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

1、Dreamweaver網(wǎng)頁設(shè)計(jì)項(xiàng)目教程機(jī)械工業(yè)出版社任務(wù)5完成首頁內(nèi)容區(qū)制作3（建議2學(xué)時(shí)）01任務(wù)實(shí)施02任務(wù)評價(jià)03觸類旁通任務(wù)實(shí)施雙擊添加標(biāo)題文字#index_box制作 #index_box內(nèi)的內(nèi)容分為左右兩個(gè)部分，左側(cè)為.box（“焦點(diǎn)中心”區(qū)），右側(cè)為.box_ box1（“最新評測”區(qū)）。其結(jié)構(gòu)如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字#index_box制作 （1）創(chuàng)建#index_box的布局結(jié)構(gòu) 1）返回index.html的代碼窗口，光標(biāo)定位在#index_box中，如圖所示: 2）輸入代碼如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字#index_box制作 （2）創(chuàng)建#index_box

2、的內(nèi)部CSS樣式 打開layout.css，輸入代碼如圖所示: 任務(wù)實(shí)施雙擊添加標(biāo)題文字#index_box制作 （3）添加內(nèi)容 1）返回index.html的代碼窗口，光標(biāo)定位在第一個(gè)“.box”中輸入文字并為標(biāo)題文字插入“標(biāo)題2”、“鏈接”及“行內(nèi)樣式”，如圖所示: 2）光標(biāo)定位在“.box_con”中，輸入代碼如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字#index_box制作 3）復(fù)制并修改代碼。 兩個(gè)“box”除文本內(nèi)容有改變外，其樣式相同，可以將步驟2）中的代碼復(fù)制并修改文本內(nèi)容，代碼窗口顯示如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字#index_box制作 （4）樣式美化 打開layout.css

3、，創(chuàng)建#index.html內(nèi)列表項(xiàng)及超鏈接樣式，可參見前面章節(jié)的窗口操作，也可以用手輸入代碼。Layout.css窗口代碼顯示如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題文字#index_box制作 #index_box完成后的最終結(jié)果如圖所示: 任務(wù)實(shí)施雙擊添加標(biāo)題文字右側(cè)的#side制作 #side的內(nèi)容分成上中下3個(gè)部分，這3個(gè)部分都應(yīng)用了同一個(gè)類.side_box。每個(gè).side_box又應(yīng)用了不同的樣式。其結(jié)構(gòu)如圖所示: 任務(wù)實(shí)施雙擊添加標(biāo)題文字右側(cè)的#side制作 （1）創(chuàng)建“.side”的內(nèi)部布局結(jié)構(gòu),返回index.html代碼窗口，在“.side”中輸入代碼如圖所示:任務(wù)實(shí)施雙擊添加標(biāo)題

4、文字右側(cè)的#side制作 （2）創(chuàng)建“.side”的內(nèi)部CSS樣式 上述結(jié)構(gòu)中“.side”、“.side_con”的樣式已經(jīng)在“構(gòu)建網(wǎng)頁架框”章節(jié)完成設(shè)置，這里只設(shè)置“.side_con”的樣式。設(shè)置它的填充（padding）為上、下為0，左右為10px；設(shè)置它的背景圖片（background）及背景不重復(fù)（no-repeat）。Layout.css代碼如下：.side_con padding:0 10px; background:url(./images/side_bg.gif) 0 bottom no-repeat;任務(wù)實(shí)施雙擊添加標(biāo)題文字右側(cè)的#side制作 （3）添加內(nèi)容 1）添加“

5、產(chǎn)品導(dǎo)購”內(nèi)容。 光標(biāo)定位在“.side_box”中，輸入文字。 選中“產(chǎn)品導(dǎo)購”文字，插入“標(biāo)題2” 。 選中“產(chǎn)品”文字，單擊屬性面板中的“加粗”按鈕。 光標(biāo)定位在“.side_con”中，輸入文字，選中文字，插入“項(xiàng)目列表”標(biāo)簽。 選中文字，插入“列表項(xiàng)” 。 選中文字“語音業(yè)務(wù)：”，單擊“粗體”按鈕。 選中文字，添加鏈接 。 復(fù)制代碼 。 設(shè)計(jì)窗口顯示效果如圖所示： 任務(wù)實(shí)施雙擊添加標(biāo)題文字右側(cè)的#side制作 2）添加“使用問答”內(nèi)容 光標(biāo)定位在“.side_box”中，輸入文字，設(shè)置文字為“標(biāo)題2”，字體“粗體”，操作步驟參照步驟1），也可直接復(fù)制上面的代碼后再進(jìn)行文字修改 。 光

6、標(biāo)定位在“.side_con”中，輸入文字，選中文字，插入“定義列表、術(shù)語、說明”標(biāo)簽 。 復(fù)制內(nèi)容后修改文本， 如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字右側(cè)的#side制作 3）添加“聯(lián)系我們”內(nèi)容。 光標(biāo)定位在“.side_box”中，輸入文字，設(shè)置文字為“標(biāo)題2”，字體“粗體”，操作步驟參照步驟1），也可直接復(fù)制上面的代碼后再進(jìn)行文字修改 。 光標(biāo)定位在“.side_con”中，插入圖片如圖所示，“#side”最終效果如圖所示。任務(wù)實(shí)施雙擊添加標(biāo)題文字右側(cè)的#side制作 （4）美化樣式 為“#side”中的列表項(xiàng)、定義術(shù)語、定義說明設(shè)置CSS樣式。 1）“產(chǎn)品導(dǎo)購”CSS樣式美化（列表項(xiàng)）。

7、 2）“使用問答”CSS樣式美化。 3）“聯(lián)系我們”CSS樣式美化。 Layout.css文檔代碼窗口顯示效果如圖所示：任務(wù)實(shí)施雙擊添加標(biāo)題文字右側(cè)的#side制作 4）應(yīng)用設(shè)置好的CSS樣式。 返回index.html，光標(biāo)定位在“產(chǎn)品導(dǎo)購”的“.side_con”開始標(biāo)簽中，為其添加設(shè)置好的類樣式“product”。 光標(biāo)定位在“使用問答”的“.side_con”開始標(biāo)簽中，為其添加設(shè)置好的類樣式“ask” 。 光標(biāo)定位在“聯(lián)系我們”的“.side_con”開始標(biāo)簽中，為其添加設(shè)置好的類樣式“contact” 。此時(shí)的“#side”的顯示效果如圖所示:至此整個(gè)首頁制作完成。任務(wù)評價(jià)兩種評價(jià)

8、方式Html5新屬性id屬性為當(dāng)前Div指定id名稱 id=main id只允許使用一 次class名稱可以重復(fù)使用 overflow屬性 zoom屬性 overflow屬性讓父容器來自適應(yīng)內(nèi)部容器的高度 zoom:1;是為了兼容 IE6而使用的CSS HACK 觸類旁通 在學(xué)習(xí)網(wǎng)站制作的初期，網(wǎng)頁編輯可以通過設(shè)計(jì)窗口、選項(xiàng)、菜單進(jìn)行設(shè)計(jì)，在此過程中要有意識(shí)地讓自己熟悉代碼的編寫格式。之后，逐步脫離設(shè)計(jì)窗口，改用代碼編寫網(wǎng)頁。使用代碼編寫網(wǎng)頁，在結(jié)構(gòu)設(shè)計(jì)上更精準(zhǔn)，修改更方便。對于結(jié)構(gòu)一致的部分我們可以采用先復(fù)制代碼，然后對內(nèi)容部分做相應(yīng)修改的方法，這樣既保證了結(jié)構(gòu)一致，降低錄入過程中的出錯(cuò)率，也大大提高了代碼編寫速度。在后面的二級頁面的制作中可以參考本項(xiàng)目代碼的編寫方式。 小結(jié) 本項(xiàng)目以一個(gè)電子產(chǎn)品類網(wǎng)站入手，詳細(xì)講解了企業(yè)網(wǎng)站制作的一般流程，實(shí)際項(xiàng)目實(shí)現(xiàn)中的內(nèi)部分工協(xié)作機(jī)制；從技術(shù)層面上，由淺入深地講解Dreamweaver CS5制作企業(yè)網(wǎng)站的基本技巧；DIV+CSS布局網(wǎng)頁技術(shù)，使用模板化設(shè)計(jì)，方便網(wǎng)站內(nèi)容的更新；結(jié)合JS特效知識(shí)，