Dreamweaver網(wǎng)頁設(shè)計(jì)任務(wù)5完成首頁內(nèi)容區(qū)制作1

1、Dreamweaver網(wǎng)頁設(shè)計(jì)項(xiàng)目教程機(jī)械工業(yè)出版社任務(wù)5完成首頁內(nèi)容區(qū)制作1（建議2學(xué)時(shí)）01任務(wù)分析02任務(wù)實(shí)施任務(wù)分析主內(nèi)容區(qū)的結(jié)構(gòu)如圖所示 ：任務(wù)分析 主內(nèi)容區(qū)的主架框?yàn)?maincontent，內(nèi)容包含左右兩個(gè)部分：#main、#side。 在#main中又分成上、中、下3個(gè)部分；在.side中也包括上、中、下3個(gè)部分。 主內(nèi)容區(qū)的層次嵌套得比較多，在制作過程中，要注意各部分之間的嵌套關(guān)系和位置關(guān)系，如#maincontent中的#main和.side是左右分布，那么就需要設(shè)置浮動(dòng)。而#main中和.side中是上中下結(jié)構(gòu)，則無須設(shè)置浮動(dòng)。 網(wǎng)頁制作沒有順序要求，可以“先大架、再具體

2、”；也可以按“從左到右、從上到下”的順序，依個(gè)人的習(xí)慣而定。本實(shí)例按“先布局大框架，再按從左到右、從上到下”的順序制作完成。任務(wù)實(shí)施雙擊添加標(biāo)題文字創(chuàng)建外大架框 外大架框結(jié)構(gòu)如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字創(chuàng)建外大架框 1）光標(biāo)定位在#maincontent中，插入Div標(biāo)簽，插入位置在#maincontent結(jié)束標(biāo)簽前，名稱為“#main”，如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字創(chuàng)建外大架框 2）插入Div標(biāo)簽，插入位置在#maincontent結(jié)束標(biāo)簽前，名稱為“#side”，如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字創(chuàng)建外大架框 3）插入Div標(biāo)簽，插入位置在#main結(jié)束標(biāo)簽前，名稱為“#ind

3、ex_top”，如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字創(chuàng)建外大架框 4）插入Div標(biāo)簽，插入位置在#main結(jié)束標(biāo)簽前，名稱為“#index_pic”，如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字創(chuàng)建外大架框 5）插入Div標(biāo)簽，插入位置在#main結(jié)束標(biāo)簽前，名稱為“#index_box”，如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字創(chuàng)建外大架框 6）插入Div標(biāo)簽，插入位置在#side結(jié)束標(biāo)簽前，類名稱為“.side_box”，如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字創(chuàng)建外大架框 重復(fù)步驟6）兩次，再插入兩個(gè)同樣的Div標(biāo)簽。在網(wǎng)頁代碼中的代碼如圖所示：在index.html中，此段代碼： 任務(wù)實(shí)施雙擊添加標(biāo)題文字設(shè)置

4、插入Div標(biāo)簽的CSS樣式表 （1）設(shè)置#main的CSS樣式 1）創(chuàng)建#main的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 2）在方框樣式中，設(shè)置它的寬度（width）為664px，左浮動(dòng)任務(wù)實(shí)施雙擊添加標(biāo)題文字設(shè)置插入Div標(biāo)簽的CSS樣式表 2）設(shè)置#index_top的CSS樣式 1）創(chuàng)建#index_top的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 2）在方框樣式中，設(shè)置它的高度（hei

5、ght）為255px，下邊距（margin-bottom）為8px任務(wù)實(shí)施雙擊添加標(biāo)題文字設(shè)置插入Div標(biāo)簽的CSS樣式表 3）在定位樣式中，設(shè)置它的內(nèi)容超出（overflow）為隱藏（hidden），如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字設(shè)置插入Div標(biāo)簽的CSS樣式表 （3）設(shè)置#index_pic的CSS樣式 1）創(chuàng)建#index_pic的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 2）在方框樣式中，設(shè)置它的下邊距（margin-bottom）為8px 3）在邊框樣式中，設(shè)置它的邊框線樣式（st

6、yle）為實(shí)線（solid），設(shè)置線粗細(xì)（width）為1px，設(shè)置邊框線的顏色（color）為#dbdbdb Layout.css中自動(dòng)生成相應(yīng)代碼：任務(wù)實(shí)施雙擊添加標(biāo)題文字設(shè)置插入Div標(biāo)簽的CSS樣式表 （4）設(shè)置#index_box的CSS樣式 1）創(chuàng)建#index_box的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 2）在方框樣式中，設(shè)置它的下邊距（margin-bottom）為8px Layout.css中自動(dòng)生成相應(yīng)代碼：任務(wù)實(shí)施雙擊添加標(biāo)題文字設(shè)置插入Div標(biāo)簽的CSS樣式表 （5

7、）設(shè)置#side的CSS樣式 1）創(chuàng)建# side的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 2）在方框樣式中，設(shè)置它的寬度（width）為228px，左浮動(dòng) 任務(wù)實(shí)施雙擊添加標(biāo)題文字設(shè)置插入Div標(biāo)簽的CSS樣式表 （6）設(shè)置.side_box的CSS樣式 1）創(chuàng)建.side_box的CSS樣式。單擊CSS樣式面板下方的“新建CSS規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對話框中做如圖所示的設(shè)置，設(shè)置完成后單擊“確定”按鈕 任務(wù)實(shí)施雙擊添加標(biāo)題文字設(shè)置插入Div標(biāo)簽的CSS樣式表 2）在方框樣式中，設(shè)置它的下邊距（margin-bottom）為8px 上述操作在Layout.css中自動(dòng)生成相應(yīng)代碼如下：#main float:left; width:664px;#index_top height:255px; overflow:hidden; margin-bottom:8px;#index_pic border:1px solid #dbdbdb;