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

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