綜合案例——制作餐飲美食網(wǎng)頁(yè)P(yáng)owerPointdesignCONTNETScontents目錄設(shè)計(jì)分析01創(chuàng)建站點(diǎn)02創(chuàng)建CSS文件03制作top內(nèi)容040303030605制作main內(nèi)容制作bottom內(nèi)容設(shè)計(jì)分析Part01設(shè)計(jì)分析

在餐飲類網(wǎng)站中，圖像是需要特別注意的，要與網(wǎng)站的整體搭配，而且還要勾起瀏覽者的食欲。這類網(wǎng)站的色調(diào)搭配與其他的頁(yè)面也有所不同，主要根據(jù)主體來設(shè)計(jì)?；緛碚f，使用聯(lián)想到水果、蔬菜的橙色、紅色、黃色、綠色等顏色居多。本案例制作了一個(gè)餐飲美食網(wǎng)站，該頁(yè)面主要以美食為介紹對(duì)象，所以頁(yè)面使用淺色作為背景底色，然后使用白色來表現(xiàn)主題，再使用綠色與橙色搭配，給瀏覽者以健康、爽快的感覺。頁(yè)面布局也相對(duì)簡(jiǎn)單，使用傳統(tǒng)的上中下布局方式，頁(yè)面最終效果如圖所示。主要制作步驟如下。（1）插入名為top的Div，然后制作出頭部?jī)?nèi)容。（2）在名為top的Div后插入名為main的Div，制作組成頁(yè)面的主要內(nèi)容，在該Div中主要分為left和right兩個(gè)部分。（3）在名為main的Div后插入名為bottom的Div，制作出底部?jī)?nèi)容。

創(chuàng)建站點(diǎn)Part02創(chuàng)建站點(diǎn)

1.結(jié)構(gòu)結(jié)構(gòu)技術(shù)用于對(duì)網(wǎng)頁(yè)中用到的信息（文本、圖像、動(dòng)畫等）進(jìn)行分類和整理，目前用于結(jié)構(gòu)化設(shè)計(jì)的Web標(biāo)準(zhǔn)技術(shù)主要是HTML。2.表現(xiàn)表現(xiàn)技術(shù)用于對(duì)已被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制，包括位置、顏色、字體、大小等形式控制。目前用于表現(xiàn)設(shè)計(jì)的Web標(biāo)準(zhǔn)技術(shù)就是CSS。W3C創(chuàng)建CSS的目的是用CSS來控制整個(gè)網(wǎng)頁(yè)的布局，與HTML所實(shí)現(xiàn)的結(jié)構(gòu)完全分離，簡(jiǎn)單來說就是表現(xiàn)與內(nèi)容完全分離，使站點(diǎn)的維護(hù)更加容易。這也正是Div+CSS布局的一大特點(diǎn)。3.行為行為是指對(duì)整個(gè)文檔的一個(gè)模型定義和交互行為的編寫，目前用于行為設(shè)計(jì)的Web標(biāo)準(zhǔn)技術(shù)主要有下面兩個(gè)。其一是DOM（DocumentObjectModel），即文檔對(duì)象模型，相當(dāng)于瀏覽器與內(nèi)容結(jié)構(gòu)之間的一個(gè)接口。它定義了訪問和處理HTML文檔的標(biāo)準(zhǔn)方法，把網(wǎng)頁(yè)和腳本以及其他的編程語言聯(lián)系了起來。第二個(gè)是ECMAScript（JavaScript的擴(kuò)展腳本語言），即由CMA（ComputerManufacturersAssociation）制定的腳本語言（JavaScript），用于實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象的交互操作。創(chuàng)建CSS文件Part03下面創(chuàng)建本例所需的CSS文件，然后鏈接到網(wǎng)頁(yè)中，具體操作步驟如下：（1）在Dreamweaver中新建一個(gè)網(wǎng)頁(yè)文件，然后執(zhí)行“文件>保存”菜單命令，將文件保存為index.html，如左下圖所示。（2）執(zhí)行“文件>新建”菜單命令，打開“新建文檔”對(duì)話框，在“頁(yè)面類型”欄中選擇CSS選項(xiàng)，然后單擊“確定”按鈕，如右下圖所示。將創(chuàng)建的CSS文件保存為css.css，接著按照同樣的方法再創(chuàng)建一個(gè)div.css文件。創(chuàng)建CSS文件（3）執(zhí)行“窗口>CSS設(shè)計(jì)器”菜單命令，打開“CSS設(shè)計(jì)器”面板，單擊“添加CSS源”按鈕，在彈出的快捷菜單中選擇“附加現(xiàn)有的CSS文件”命令，如左下圖所示。（4）打開“使用現(xiàn)有的CSS文件”對(duì)話框，將剛剛新建的外部樣式表文件div.css和css.css文件鏈接到頁(yè)面中，如右下圖所示。創(chuàng)建CSS文件制作top內(nèi)容Part04下面通過創(chuàng)建CSS規(guī)則與插入Div來制作網(wǎng)頁(yè)的頭部?jī)?nèi)容，具體操作步驟如下：（1）切換到css.css腳本文件，創(chuàng)建一個(gè)名為*的標(biāo)簽CSS規(guī)則，代碼如下，如圖所示。*{ margin:0px; border:0px; padding:0px;}制作top內(nèi)容（2）再創(chuàng)建一個(gè)名為body的標(biāo)簽CSS規(guī)則，代碼如下，如左下圖所示，頁(yè)面效果如右下圖所示。body{ font-family:"宋體"; font-size:12px; color:#666; background-image:url(../images/ds.gif); background-repeat:repeat-x;}制作top內(nèi)容（3）在頁(yè)面中插入名為box的Div，將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱的CSS規(guī)則，代碼如下，如左下所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。#box{ width:850px; height:880px; margin:auto;}制作top內(nèi)容（4）在名為box的Div中插入名為top的Div，將面切換到div.css文件，創(chuàng)建一個(gè)名稱為#top的CSS規(guī)則，代碼如下，如左下圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。#top{ width:850px; height:93px; background-image:url(../images/dh1.gif); background-repeat:no-repeat; background-position:centerbottom;}制作top內(nèi)容（5）執(zhí)行“插入>圖像>圖像”命令，插入一幅圖像（源文件與素材/素材文件/第11章/db1.gif），如右上圖所示，將頁(yè)面切換到css.css文件，創(chuàng)建一個(gè)名稱為.img的CSS規(guī)則，代碼如下，如右中圖

所示，返回設(shè)計(jì)頁(yè)面中，選擇剛剛插入的圖像，在“屬性”面板上的“Class”屬性中選擇剛剛創(chuàng)建的img類樣式，頁(yè)面效果如右下圖所示。制作top內(nèi)容（6）在名為top的Div中插入名為top0l的Div，將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#top0l的CSS規(guī)則，如右上圖所示。（7）在名為top01的Div中插入小圖標(biāo)圖像（源文件與素材/素材文件/第11章/tb.gif），并輸入相應(yīng)的文字內(nèi)容，如右下圖所示。制作top內(nèi)容（8）在名為top0l的Div后插入名為top02的Div，將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#top02的CSS規(guī)則，代碼如下，如左下圖所示。#top02{width:615px; height:42px; float:right;}（9）在名為top02的Div中插入相應(yīng)的圖像（源文件與素材/素材文件/第11章/menu01.gif-menu07.gif），如右下圖所示，選中插入的所有圖像，單擊“屬性”面板上的“項(xiàng)目列表”按鈕，對(duì)選中的圖像創(chuàng)建項(xiàng)目列表，切換到“代碼”視圖，可以看到相應(yīng)的列表代碼。制作top內(nèi)容（10）將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#top02li的CSS規(guī)則，代碼如下，如左下圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。#top02li{ width:85px; height:15px; float:left; list-style-type:none; margin-top:13px; border-left:#aac858solid1px; border-right:#5b7a0asolid1px; text-align:center;}制作top內(nèi)容（11）切換到“代碼”視圖，添加相應(yīng)的樣式代碼，如圖所示。制作top內(nèi)容制作main內(nèi)容Part05下面通過插入Div與創(chuàng)建CSS規(guī)則來制作網(wǎng)頁(yè)的主體內(nèi)容，具體操作步驟如下：（1）在名為top的Div后插入名為main的Div，將面切換到div.css文件，創(chuàng)建一個(gè)名稱為#main的CSS規(guī)則，代碼如下，如左下圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。#main{ width:850px; height:690px; background-image:url(../images/mb1.jpg); background-repeat:no-repeat; margin-top:14px;}制作main內(nèi)容（2）在名為main的Div中插入名為left的Div，將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#left規(guī)則，代碼如下，如左下圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。#left{ width:180px; height:690px; float:left;}制作main內(nèi)容（3）在名為left的Div中插入名為login的Div，將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#login的CSS規(guī)則，代碼如下，如左下圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。#login{ width:157px; height:101px; padding:24px0px0px23px;}制作main內(nèi)容（4）執(zhí)行“插入>表單>表單”命令，在該Div中插入表單，如左下圖所示。將光標(biāo)移至紅色虛線的表單區(qū)域內(nèi)，執(zhí)行“插入>表單>文本”命令插入一個(gè)文本字段，將其ID設(shè)置為name，如中圖所示。（5）按Enter鍵，插入另一個(gè)文本字段，設(shè)置ID為pass，如右下圖所示。制作main內(nèi)容（6）將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#name,#pass的CSS規(guī)則，代碼如下，如左下圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。#name,#pass{ width:90px; height:18px; margin-top:5px; background-image:url(../images/text.gif); background-repeat:no-repeat; border:none; padding-left:9px;}制作main內(nèi)容（7）將光標(biāo)移至pass文本字段的右側(cè)，執(zhí)行“插入>表單>圖像按鈕”命令，將一幅圖像插入到頁(yè)面中（源文件與素材/素材文件/第11章/dl.gif），將ID設(shè)置為button，如左下圖所示。（8）將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為button的CSS規(guī)則，代碼如下，如中圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。#button{ margin:2px12px0px3px; float:right;}制作main內(nèi)容（9）切換到“代碼視圖”，將光標(biāo)移動(dòng)到form標(biāo)簽后，如左下圖所示。（10）插入兩幅圖像（源文件與素材/素材文件/第11章/zc1.gif、mima.gif），將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#loginimg的CSS規(guī)則，代碼如下，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右上圖所示。#loginimg{ margin:12px15px0px0px;}（11）在名為login的Div后插入一幅圖像（源文件與素材/素材文件/第11章/p1.gif），如右下圖所示。制作main內(nèi)容（12）再插入名為sc的Div，根據(jù)名為login的Div的制作方法，制作出該Div中的內(nèi)容，CSS規(guī)則如左下圖所示，頁(yè)面效果如右下圖所示。制作main內(nèi)容（13）在名為sc的Div后插入名為left0l的Div，將頁(yè)面切換到div.css文件中，分別創(chuàng)建名為#left0l和#left01img的CSS規(guī)則，代碼如下，如左下圖所示，返回到設(shè)計(jì)頁(yè)面中，將相應(yīng)的圖像插入到該Div中（源文件與素材/素材文件/第11章/01.gif-04.gif），如右下圖所示。#left01{ width:180px; height:353px; text-align:center; padding-top:5px;}#left01img{ margin:5px0px5px0px;}制作main內(nèi)容（14）在名為left的Div中插入名為right的Div，將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#right的CSS規(guī)則，如右上圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。（15）將光標(biāo)移至名為right的Div中，插入一幅圖像（源文件與素材/素材文件/第11章/ship.jpg），效果如左下圖所示。制作main內(nèi)容（16）將光標(biāo)移至剛剛插入的圖像后，插入名為right01的Div，將頁(yè)面切換到div.css文件，創(chuàng)建一個(gè)名稱為#right0l的CSS規(guī)則，如右上圖所示，返回設(shè)計(jì)頁(yè)面中，頁(yè)面效果如右下圖所示。（17）在該Div中插入圖像（源文件與素材/素材文件/第11章/za.gif），切換到css.css文件中，創(chuàng)建一個(gè)名稱為.img0l的CSS規(guī)則，返回到設(shè)計(jì)頁(yè)面中，選擇剛插入的圖像，在“屬性”面板上應(yīng)用剛剛創(chuàng)建的類樣式，效果如左下圖所示。制作main內(nèi)容（18）將光標(biāo)移至插入的圖像后，插入名為zs.01的Div，將頁(yè)面切換到div.css文件，創(chuàng)