Dreamweaver網(wǎng)頁設(shè)計任務(wù)4-10

1、Dreamweaver網(wǎng)頁設(shè)計項目教程機械工業(yè)出版社任務(wù)四 利用CSS美化網(wǎng)頁10（建議2學(xué)時）01任務(wù)實施02任務(wù)評價02觸類旁通任務(wù)實施10上方子導(dǎo)航制作1.在DIV“topbar”中，插入images文件夾中的“top-bar-bg01.jpg”和“top-bar-bg02.jpg”圖片。2.切換到代碼窗口，這里需要添加代碼來實現(xiàn)“設(shè)為首頁”和“加為收藏”的功能。對應(yīng)代碼如下 ：圖片“top-bar-bg01.jpg” 圖片“top-bar-bg02.jpg”對應(yīng)代碼如下：任務(wù)實施10上方子導(dǎo)航制作任務(wù)評價任務(wù)評價參照以下內(nèi)容進行：CSS樣式中各種選擇器的命名是否規(guī)范是否分類建立了CSS

2、樣式文件網(wǎng)站的效果與效果圖是否一致鏈接無空鏈接、死鏈接鏈接均為有效鏈接所有圖片均能正常顯示所有文字的字體、字號、顏色是否正常顯示框架有無移位完成時間限制：熟練之后制作首頁的樣式可以在3小時內(nèi)完成，其余頁面能在1.5小時內(nèi)完成。 觸類旁通有了制作首頁的基礎(chǔ)。我們可以快速開展制作子頁面的進度。這里以產(chǎn)品詳情頁為例，講述如何快速制作子頁面。1. 新建文件和文件夾。在根目錄下新建文件夾，名稱為“detail”，在該文件夾中新建文件，名稱為“detail.html”。2. 對比詳情頁和首頁，可以發(fā)現(xiàn)，只有右部內(nèi)容區(qū)有所差別，其他的內(nèi)容都是一樣的。因此我們僅需要制作右側(cè)內(nèi)容區(qū)就可以了。3. 導(dǎo)入CSS樣式

3、表。以鏈接的方式添加樣式表文件“l(fā)ayout.css”、“style.css”。4. 復(fù)制代碼。打開“index.html”頁面，轉(zhuǎn)到代碼窗口，復(fù)制代碼如下：（注意，一定要去掉DIV“right”的全部內(nèi)容。）插入到標簽之間。 5. 。很多圖片都沒有正常顯示。這是由于我們采用的是相對路徑進行圖片的鏈接，因此由于detail.html的路徑和index.html的路徑發(fā)生變化所導(dǎo)致的。我們需要一一重新更新路徑。觸類旁通6.制作右側(cè)內(nèi)容區(qū)。本頁面的右側(cè)內(nèi)容區(qū)與首頁不同，需要單獨制作。新建CSS樣式.觸類旁通設(shè)置背景選項 觸類旁通設(shè)置方框選項 觸類旁通7. 在DIV“det-right”開始標簽之后

4、，插入h1標簽，并輸入文字。代碼如下： 8. 定義標簽的樣式。 觸類旁通設(shè)置背景選項 觸類旁通設(shè)置方框選項 觸類旁通設(shè)置邊框選項 觸類旁通9. 插入一個6行4列的表格。插入方法為選擇插入面板常用表格，插入表格。鼠標拖拽選中第一列單元格，在下方屬性欄中，選擇“合并單元格”。10.同樣的方法，把第一行，第二、三、四列的單元格合并，合并后效果如圖所示。 觸類旁通11.按照效果圖，在第一列單元格中插入圖片，在其他單元格中添加文字，效果如圖所示。 觸類旁通12.為表格設(shè)定樣式。新建CSS樣式 。觸類旁通設(shè)置類型選項 觸類旁通設(shè)置區(qū)塊選項 觸類旁通13.設(shè)置表格內(nèi)特殊文字樣式，定義兩個類“.tab-title”、“.tab-name”。 為表格設(shè)定樣式。新建CSS樣式 。觸類旁通設(shè)置類型選項 觸類旁通14. 新建CSS樣式 觸類旁通設(shè)置類型選項 觸類旁通設(shè)置背景選項 觸類旁通15. 對特殊本文套用定義的樣式，套用后，效果如圖所示。觸類旁通16. 商品詳細信息采用自定義列表來制作。方法為插入面板，選擇“文本”“dl定義列表”插入。直接在HTML代碼窗口輸入如下代碼。位置為DIV“det-right”的結(jié)束標簽之前。代碼如下： 觸類旁通17. 設(shè)置自定義列表的樣式。先設(shè)定標簽。新建CSS樣式規(guī)則。 觸類旁通設(shè)置類型選項