《網(wǎng)頁設(shè)計與制作實訓(xùn)》指導(dǎo)書.doc

網(wǎng)頁設(shè)計與制作實訓(xùn)指導(dǎo)書-以“五岳獨尊泰山”為例一、規(guī)劃網(wǎng)站1策劃網(wǎng)站主題在著手設(shè)計網(wǎng)站之前，要確定好網(wǎng)站的主題，每個網(wǎng)站都應(yīng)該具有一個明確的主題。本次所創(chuàng)建的網(wǎng)站是一個名山宣傳類網(wǎng)站，主要以五岳獨尊泰山為主題，包括泰山簡介、泰山文化、泰山名吃、泰山地質(zhì)、環(huán)境和神話傳說等內(nèi)容。2確定網(wǎng)站風(fēng)格確定好站點主題后，就要根據(jù)該主題選擇站點的風(fēng)格。由于本次所創(chuàng)建的網(wǎng)站是一個名山宣傳類網(wǎng)站，要求結(jié)構(gòu)清晰，能夠展現(xiàn)出泰山的魅力所在。本網(wǎng)站的主要特點如下：（1）設(shè)計風(fēng)格要大眾化，為了提高瀏覽速度，精選圖片，同時盡量減少圖片的使用，更多地使用層、表格實現(xiàn)效果。（2）背景顏色以灰色和白色為主，文字顏色以黑色為主、藍(lán)色和紅色為輔。（3）文字內(nèi)容豐富、知識性強(qiáng)，標(biāo)題簡潔明了，字體一般采用宋體，大小一般為14像素。（4）首頁的版式結(jié)構(gòu)采用典型的“三”字型結(jié)構(gòu)，首頁如圖1-1所示。圖1-1 首頁設(shè)計瀏覽效果二級頁面采用與首頁統(tǒng)一的風(fēng)格設(shè)計。該網(wǎng)站名稱為“五岳獨尊泰山”，所有網(wǎng)頁的標(biāo)題為“五岳獨尊泰山”，個人根據(jù)所定主題確定。英文名稱為“MountTai”。3構(gòu)思網(wǎng)站欄目結(jié)構(gòu)先在紙上繪制網(wǎng)站的欄目結(jié)構(gòu)草圖，經(jīng)過反復(fù)推敲，最后確定完整的欄目和內(nèi)容的層次結(jié)構(gòu)?！拔逶廓氉鹛┥健钡臋谀拷Y(jié)構(gòu)如表1-1所示。表1-1“五岳獨尊泰山”的欄目結(jié)構(gòu)五岳獨尊泰山首頁泰山簡介泰山文化泰山名吃泰山自然為了簡化對網(wǎng)站的瀏覽過程，大部分網(wǎng)頁通過欄目就能瀏覽內(nèi)容頁面，首頁的主菜單包括9個菜單項：泰山簡介、泰山文化、泰山名吃、泰山自然、泰山地質(zhì)、神話傳說、泰山景點、泰山美圖、寄語泰山。4規(guī)劃網(wǎng)站目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)根據(jù)網(wǎng)站策劃確定的欄目結(jié)構(gòu)，創(chuàng)建站點目錄，一個網(wǎng)站的目錄結(jié)構(gòu)要求層次清晰、井然有序，首頁、欄目頁、內(nèi)容頁區(qū)分明確，有利于日后的修改。“五岳獨尊泰山”的目錄結(jié)構(gòu)，各文件夾的所存放文件類型如表1-2所示。注意文件夾和文件的名稱建議不要使用中文名，因為中文名在HTML文檔中容易生成亂碼，導(dǎo)致鏈接產(chǎn)生錯誤。表1-2網(wǎng)站的目錄結(jié)構(gòu)及其存放的文件類型文件夾名稱存放的文件類型cssCSS樣式文件。flash 動畫文件、視頻文件。image圖像文件、照片。js外部腳本文件。Templates模板文件Library庫文件。music音樂、音頻文件。index.html主頁網(wǎng)站的鏈接結(jié)構(gòu)與目錄結(jié)構(gòu)不同，網(wǎng)站的目錄結(jié)構(gòu)指站點的文件存放結(jié)構(gòu)，一般只有設(shè)計人員可以直接看到，而網(wǎng)站的鏈接結(jié)構(gòu)指網(wǎng)站通過頁面之間的聯(lián)系表現(xiàn)的結(jié)構(gòu)，瀏覽者瀏覽網(wǎng)站能夠觀察到這種結(jié)構(gòu)。本網(wǎng)站的鏈接結(jié)構(gòu)采用“網(wǎng)狀”鏈接結(jié)構(gòu)，結(jié)構(gòu)圖如圖1-2所示。圖1-2“五岳獨尊泰山”中的鏈接結(jié)構(gòu)5主要頁面布局設(shè)計使用CSS+DIV對首頁的布局結(jié)構(gòu)草圖進(jìn)行設(shè)計如圖1-3所示。整個網(wǎng)站中其它頁面的設(shè)計可參考首頁設(shè)計進(jìn)行，所以可以將該首頁制作成模板(但不要求用模板)。圖1-3主頁的布局結(jié)構(gòu)草圖二、準(zhǔn)備素材根據(jù)網(wǎng)站的欄目、內(nèi)容設(shè)計，鏈接結(jié)構(gòu)設(shè)計，首頁的布局結(jié)構(gòu)，準(zhǔn)備所需素材1準(zhǔn)備文本準(zhǔn)備大量網(wǎng)頁中所需的文字資料，可以從各類網(wǎng)站、各種書籍中搜集文字資料，然后制作成word文檔或文本文件，注意各種文字資料的文件名命名要科學(xué)合理，避免日后找不到所需的文本內(nèi)容。2準(zhǔn)備Logo利用Fireworks或Photoshop量身定做本網(wǎng)站的Logo標(biāo)志，Logo標(biāo)志要與本網(wǎng)站的主題相符，要有新意。3準(zhǔn)備圖片及按鈕根據(jù)需要到網(wǎng)上或素材光盤中搜集所需的圖片和按鈕、有些圖片、按鈕需要自己利用圖像處理軟件制作。注意圖片文件要盡可能小。4準(zhǔn)備動畫網(wǎng)站中的動畫最好能突出主題，起到畫龍點睛之功效。動畫一般利用flash軟件制作，本網(wǎng)站主頁和導(dǎo)航頁的標(biāo)題動畫就是利用flash軟件量身定做。5建立庫項目網(wǎng)頁中經(jīng)常用到的項目，例如版權(quán)區(qū)，但不可使用。三、創(chuàng)建網(wǎng)站1創(chuàng)建本地站點在開始著手設(shè)計網(wǎng)頁之前，首先要定義站點。因為網(wǎng)頁只是網(wǎng)站的一個組成部分，所有設(shè)計的網(wǎng)頁和相關(guān)文件都要放置于站點之中。定義站點的好處是：定義站點以后的所有操作都是在站點統(tǒng)一監(jiān)控之下進(jìn)行。如果使用了外部文件，Dreamweaver就會自動檢測并予以提示和詢問是否將外部文件復(fù)制到站點內(nèi)，以保持站點的完整性。如果某個文件夾或文件重新命名了，系統(tǒng)會自動更新所有的鏈接，以保證原有的鏈接關(guān)系的正確性。創(chuàng)建站點之前，要求先建立一個文件夾，以便創(chuàng)建站點時為站點指定存儲位置。在Windows操作系統(tǒng)中，打開“資源管理器”，在E盤創(chuàng)建一個名為“五岳獨尊泰山”的文件夾。創(chuàng)建站點已詳細(xì)介紹，在此只作簡要說明。定義站點的操作步驟如下：（1） 在Dreamweaver CS6主窗口中，單擊菜單【站點】【新建站點】，將彈出如圖1-6所示站點定義對話框。在該對話框中先輸入站點的名稱，選擇本地站點文件夾，如圖1-6所示。接著單擊【下一步】按鈕，進(jìn)入到下一步操作。（2）點擊保存即可。2網(wǎng)站目錄結(jié)構(gòu)的搭建創(chuàng)建站點后，在“文件”面板中切換到新創(chuàng)建的站點，然后利用快捷菜單創(chuàng)建文件夾及子文件夾，本網(wǎng)站的目錄結(jié)構(gòu)如圖1-7所示。圖1-7“五岳獨尊泰山”的目錄結(jié)構(gòu)3.網(wǎng)站首頁的設(shè)計與制作首先在網(wǎng)站根目錄下創(chuàng)建首頁文件index.html，在設(shè)計視圖狀態(tài)下，打開index.html，開始對首頁進(jìn)行布局。3.1網(wǎng)站首頁的布局設(shè)計首頁的布局方案如下(樣式規(guī)則全部定義在css文件夾中的css.css樣式表文件中)：（1） 整個頁面如上圖1-3所示，分為上中下3個區(qū)域，從上往下依次為：導(dǎo)航區(qū)：由3個DIV和其樣式實現(xiàn)，如下：樣式規(guī)則如下：。內(nèi)容區(qū)：由8個DIV和樣式實現(xiàn)樣式規(guī)則如下：#maindiv margin:0 auto; width:1000px; height:400px; background-color:#ffffff; #maintop margin:0 auto; background-color:yellow; width:1000px; height:180px; #maintopleft margin:5px; padding:0px; float:left; width:290px; height:170px; background-color:Green; #maintopleft img border:1px solid #000000; #maintopright text-indent:2em; font-size:14px; line-height:19px; white-space:inherit; margin:5px; padding:5px; float:left; width:680px; height:160px; background-color:red; overflow:hidden; #mainbottom float:left; background-color:red; width:1000px; height:180px; padding:0px; #mainbleft margin:5px; padding:0px; float:left; width:290px; height:170px; background-color:Green; #mainbleft img border:1px solid #000000; #mainbright text-indent:1.5em; font-size:14px; line-height:19px; white-space:inherit; margin:5px; padding:5px; float:left; width:260px; height:160px; background-color:yellow; overflow:hidden; #mainbrightr margin:5px; padding:0px; float:left; width:410px; height:170px; background-color:Green; #mainbrightr img border:1px solid #000000; 版權(quán)區(qū)：樣式規(guī)則：#footer margin:0 auto; width:1000px; height:30px; border-top:1px solid #000000; background-color:#ffffff; text-align:center; font-size:14px; padding-top:10px; 3.2編輯美化網(wǎng)站首頁在首頁中輸入文字、插入圖片、flash動畫、腳本代碼，對首頁進(jìn)行編輯和美化，效果如下：主要操作內(nèi)容如下：（1）設(shè)置頁面屬性網(wǎng)頁標(biāo)題設(shè)置為“五岳獨尊泰山”，CSS設(shè)置網(wǎng)頁“上、左、右邊距”為0。body background-color:#cccccc; margin-top:0px; margin-left:0px; margin-right:0px;（2）根據(jù)上圖顯示效果，在3.1中所列舉的導(dǎo)航區(qū)、內(nèi)容區(qū)、版權(quán)區(qū)三個位置，分別插入圖片、文字。（3）添加腳本。在內(nèi)容區(qū)的“五岳獨尊”圖片位置加入腳本，要求當(dāng)鼠標(biāo)移動到圖片上時，會彈出對話框，效果如下：代碼如下：在石刻圖片位置實現(xiàn)圖片變化效果，具體描述為當(dāng)鼠標(biāo)移動到圖片上換成另一幅圖片，當(dāng)鼠標(biāo)離開的時候，恢復(fù)到原圖片。代碼如下：保存首頁，并預(yù)覽其效果。3.3制作二級欄目網(wǎng)頁和內(nèi)容網(wǎng)頁根據(jù)首頁的制作完成其它頁面的設(shè)計，導(dǎo)航區(qū)、版權(quán)區(qū)的內(nèi)容不變，通過修改內(nèi)容區(qū)來制作其它的頁面。以創(chuàng)建泰山簡介模塊為例，將首頁index.html另存為taiabout.html。將內(nèi)容區(qū)添加圖片和文字，效果如下圖：內(nèi)容區(qū)的修改：用以下內(nèi)容，替換原先的布局泰山（Mount Tai），世界文化與自然雙重遺產(chǎn)，世界地質(zhì)公園，全國重點文物保護(hù)單位，國家重點風(fēng)景名勝區(qū)，國家AAAAA級旅游景區(qū)。泰山位于山東省泰安市中部。主峰玉皇頂海拔1545米，氣勢雄偉磅礴，有“五岳之首”、“天下第一山”的之稱。自古以來，中國人就崇拜泰山，有“泰山安，四海皆安”的說法。在漢族傳統(tǒng)文化中，泰山一直有“五岳獨尊”的美譽(yù)。自秦始皇封禪泰山后，歷朝歷代帝王不斷在泰山封禪和祭祀，并且在泰山上下建廟塑神，刻石題字。古代的文人雅士更對泰山仰慕備至，紛紛前來游歷，作詩記文。泰山宏大的山體上留下了20余處古建筑群，2200余處碑碣石刻。泰山風(fēng)景以壯麗著稱。重疊的山勢，厚重的形體，蒼松巨石的烘托，云煙的變化，使它在雄渾中兼有明麗，靜穆中透著神奇。 最為有名的是“泰山四大奇觀”。古人以“泰山北斗”來喻指人道德高、名望重或有卓越成就為眾人所敬仰的人。泰山雄峙于山東中部，古稱“岱山”、“岱宗”，春秋時改稱“泰山”。泰山前鄰孔子故里曲阜，背依泉城濟(jì)南，面積達(dá)426平方千米，主峰玉皇頂海拔1545米。3 被譽(yù)為“五岳之首”。泰山位于山東省中部，隸屬于泰安市（地級市）。綿亙于泰安、濟(jì)南、萊蕪三市之間，東西長約200公里，南北寬約50公里。主峰玉皇頂，在泰安市城區(qū)北，東經(jīng)1176，北緯3616。貫穿山東中部，主脈，支脈，余脈涉及周邊十余縣。泰山是山東丘陵中最高大的山脈，地層為華北地臺典型基底和蓋層結(jié)構(gòu)區(qū)，南部上升幅度大，蓋層被風(fēng)化掉了，露出大片基底泰山雜巖，即太古界泰山群地層，其絕對年齡25億年左右，是中國最古老的地層之一。北部上升幅度小，蓋層保存著典型的華北地臺上發(fā)育的古