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

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

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

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

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

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

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

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