實(shí)驗(yàn)2 網(wǎng)頁(yè)設(shè)計(jì)(2-3)

實(shí)習(xí)2網(wǎng)頁(yè)設(shè)計(jì)（2）一、實(shí)習(xí)目的熟悉FrontPage2003的工作環(huán)境；掌握FrontPage2003站點(diǎn)管理功能；掌握FrontPage2003制作網(wǎng)頁(yè)的基本方法；掌握網(wǎng)頁(yè)制作中的常用頁(yè)面布局方法。掌握制作主題網(wǎng)站的方法。二、實(shí)習(xí)內(nèi)容熟悉FrontPage2003的工作環(huán)境，學(xué)習(xí)FrontPage的基本功能及操作；學(xué)習(xí)FrontPage2003管理站點(diǎn)功能，進(jìn)行站點(diǎn)目錄規(guī)劃（個(gè)人網(wǎng)站）；按要求制作“示例網(wǎng)站”，并測(cè)試瀏覽效果；制作自擬主題的網(wǎng)站，要求網(wǎng)站內(nèi)容在表現(xiàn)形式上必須具有主頁(yè)面、圖文混排頁(yè)面、圖片頁(yè)面、表格頁(yè)面等頁(yè)面形式；對(duì)自擬主題的網(wǎng)站瀏覽測(cè)試。注：第1次實(shí)驗(yàn)完成實(shí)驗(yàn)步驟中1至5的任務(wù)，練習(xí)“孫悟空自傳”的制作。第2次實(shí)驗(yàn)完成6，制作自命題個(gè)人網(wǎng)站。三、預(yù)備知識(shí)網(wǎng)頁(yè)制作的基本知識(shí)；FrontPage2003的工作環(huán)境及操作方法。四、實(shí)習(xí)步驟1.熟悉FrontPage2003的工作環(huán)境。啟動(dòng)FrontPage2003，熟悉FrontPage2003工作環(huán)境。2.FrontPage管理站點(diǎn)①建立站點(diǎn)主目錄文件夾在D盤(pán)根目錄下建立名為“myweb”的文件夾，作為網(wǎng)頁(yè)制作的站點(diǎn)主目錄（站點(diǎn)主目錄路徑為d:\myweb）。（如果D盤(pán)不存在，在C盤(pán)建立。）②創(chuàng)建站點(diǎn)啟動(dòng)FrontPage2003，打開(kāi)“文件“菜單”，單擊“新建”，在右側(cè)的任務(wù)窗格中選擇新建網(wǎng)站列表中的“其他網(wǎng)站模版”；打開(kāi)網(wǎng)站模板對(duì)話框，選擇“空白站點(diǎn)”，然后單擊“瀏覽”命令按鈕，打開(kāi)新網(wǎng)站位置（站點(diǎn)主目錄）對(duì)話框，單擊“查找范圍”下拉列表，選擇d盤(pán)，在文件夾列表中，選擇“myweb”文件夾；單擊“打開(kāi)”命令按鈕，完成站點(diǎn)主目錄的設(shè)置，則站點(diǎn)的主目錄為“D:\myweb”；單擊“確定”按鈕，完成站點(diǎn)的創(chuàng)建。③查看站點(diǎn)目錄結(jié)構(gòu)單擊“視圖欄”（窗口左側(cè)）中“文件夾”圖標(biāo)，即可查看新建站點(diǎn)目錄結(jié)構(gòu)。FrontPage自動(dòng)建立了images和_private等文件夾。注意：不要在如“_private”等以“_”開(kāi)始的文件夾中存放你的任何文件。該文件夾是系統(tǒng)用于存放臨時(shí)文件。=4\*GB3④創(chuàng)建網(wǎng)站其它文件夾（目錄規(guī)劃）根據(jù)要制作的網(wǎng)站的內(nèi)容，可以建立相應(yīng)的子文件夾，用以分類存放網(wǎng)站制作中的相關(guān)文件。在本站點(diǎn)中，請(qǐng)建立如下文件夾：xiangce，然后分別在這兩個(gè)文件夾中建立文件夾images。注意：網(wǎng)站目錄結(jié)構(gòu)一般在網(wǎng)站創(chuàng)建初期就完成，但也可以在制作網(wǎng)站過(guò)程中，隨時(shí)根據(jù)要求建立。文件夾名及文件名不要使用漢字，否則會(huì)在網(wǎng)頁(yè)超鏈接引用和網(wǎng)頁(yè)瀏覽是出現(xiàn)錯(cuò)誤的情況。3.導(dǎo)入網(wǎng)頁(yè)制作需要的素材①?gòu)淖鳂I(yè)管理系統(tǒng)共享資源中“計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)及應(yīng)用”文件夾中下載“孫悟空自傳.rar”素材壓縮包，解壓縮文件包。②在解壓件后素材“孫悟空自傳”文件夾中，將“images”文件夾中的所有圖片導(dǎo)入新建站點(diǎn)主目錄下的“images”文件家中。③在解壓件后素材“孫悟空自傳”文件夾中，將“xiangce”文件夾下“images”文件夾中的所有圖片導(dǎo)入新建站點(diǎn)主目錄下“xiangce”的“images”文件夾中。注意：不要在如“_private”等以“_”開(kāi)始的文件夾中存放你的任何文件。4.制作一個(gè)圖文混排的網(wǎng)頁(yè)①打開(kāi)“文件“菜單”，單擊“新建”，選擇“空白網(wǎng)頁(yè)”，在FrontPage中將出現(xiàn)一個(gè)空白的網(wǎng)頁(yè)。②在頁(yè)面上單擊右鍵，選擇“網(wǎng)頁(yè)屬性”，打開(kāi)頁(yè)面屬性對(duì)話框，選擇各選項(xiàng)卡進(jìn)行適當(dāng)配置。③在網(wǎng)頁(yè)中輸入（粘貼）一段文字（孫悟空自傳素材中），設(shè)置第一段（作為標(biāo)題）為“黑體、6號(hào)（24磅）”，其余文字設(shè)置為“宋體、4號(hào)（14磅）”。④在網(wǎng)頁(yè)中插入一張圖片(sunwukong.jpg)，設(shè)置圖片的對(duì)齊屬性為“左對(duì)齊”。調(diào)整位置,如圖2-1所示。=5\*GB3⑤將保存網(wǎng)頁(yè)到網(wǎng)站的根目錄（d:\myweb）中，文件名為“zizhuan.htm”。注意：1.本網(wǎng)頁(yè)所用到圖片都要存入d:\myweb\images文件夾中。2.觀察在保存網(wǎng)頁(yè)時(shí)出現(xiàn)的“保存嵌入式文件”對(duì)話框(如圖2-2)，并保存網(wǎng)頁(yè)中的圖片保存到正確的位置。（這種情況表明：圖片素材是直接應(yīng)用到當(dāng)前的網(wǎng)頁(yè)中，沒(méi)有事先導(dǎo)入，將圖片等網(wǎng)頁(yè)中的素材保存到站點(diǎn)內(nèi)合適的文件夾中即可）3．“另存為”文件對(duì)話框中，要注意保存網(wǎng)頁(yè)到指定的位置。圖2-1zizhuan.htm網(wǎng)頁(yè)圖2-2“保存嵌入式文件”對(duì)話框5.制作一個(gè)圖片展示網(wǎng)頁(yè)①打開(kāi)“文件”，單擊“新建”，選擇“空白網(wǎng)頁(yè)”，在FrontPage中將出現(xiàn)一個(gè)空白的網(wǎng)頁(yè)。②在網(wǎng)頁(yè)中插入一個(gè)7行3列的表格，在表格屬性中，將表格的邊框粗細(xì)設(shè)置為0，接著再將第1行的3列合并,輸入文字“孫悟空的幸福生活”，設(shè)置為“標(biāo)題一”格式。調(diào)整單元格行高，如圖2-3所示。圖2-3制作中的xiangche.htm網(wǎng)頁(yè)圖2-4完成的xiangce.htm網(wǎng)頁(yè)③在表格的單元格中，插入“xiangce”文件夾中的圖片，輸入圖片的文字說(shuō)明。如圖2-4所示。④將保存網(wǎng)頁(yè)到網(wǎng)站的根目錄（d:\myweb\xiangce）中，文件名為“xiangce.htm”。注意:本網(wǎng)頁(yè)所用到圖片都要求存在d:\myweb\xiangce\images文件夾中。5.制作主頁(yè)（首頁(yè)）網(wǎng)頁(yè)設(shè)計(jì)時(shí)，網(wǎng)頁(yè)的布局方式將直接影響頁(yè)面的外觀，同時(shí)也是體現(xiàn)設(shè)計(jì)師水平的一個(gè)標(biāo)準(zhǔn)。在設(shè)計(jì)布局時(shí)，通常采用表格的方式。在本網(wǎng)站主頁(yè)的制作中，將使用表格方式布局。①打開(kāi)“文件”，單擊“新建”，選擇“空白網(wǎng)頁(yè)”，在FrontPage中將出現(xiàn)一個(gè)空白的網(wǎng)頁(yè)。圖2-5第1次布局圖2-6第2次布局②在網(wǎng)頁(yè)中插入一個(gè)7行2列的表格（寬：700像素；邊框：0），然后將第2列的所有單格合并,如圖2-5。圖2-5第1次布局圖2-6第2次布局③在剛合并完成后單元格中，設(shè)置單元格對(duì)齊屬性為“水平：左對(duì)齊；垂直：頂端對(duì)齊”，然后在該單元格插入一個(gè)4行1列的表格（寬度：100%；邊框：0）。完成的布局如圖然后調(diào)整單元格行高如圖2-6所示。④在左邊單元格和右邊第1行的單元中，插入如圖2-7所示的圖片（教學(xué)資源網(wǎng)下載），⑤將右邊第2行拆分為2列。在第3行中，插入一個(gè)1行3列的表格(寬：100%；高：100%，邊框：0)，如圖2-8所示。

圖2-7插入圖片圖2-8第三次布局⑥接下來(lái)，在單元格中插入圖片，輸入文字，如圖2-9所示。圖2-7插入圖片圖2-8第三次布局圖2-9輸入文字和插入圖片圖2-10index.htm在IE中的效果⑦將“悟空自傳”圖片超鏈接到前面制作的網(wǎng)頁(yè)“zizhuan.htm”,“我的相冊(cè)”圖片超鏈接到“xiangce.htm”，“我的母?！眻D片邊接到“”，“與我聯(lián)系”圖片超鏈接到“mailto:sunwukong@”。圖2-9輸入文字和插入圖片圖2-10index.htm在IE中的效果⑧將網(wǎng)頁(yè)保存到網(wǎng)站的根目錄（d:\myweb）中，文件名為“index.htm”。注意:本網(wǎng)頁(yè)所用到的圖片都要存入d:\myweb\images文件夾中。=9\*GB3⑨在瀏覽器中打開(kāi)index.htm頁(yè)面，如圖2-10所示。請(qǐng)注意：將制作好的網(wǎng)站內(nèi)容保存好，在以后的服務(wù)器架設(shè)實(shí)驗(yàn)中使用。記錄實(shí)習(xí)任務(wù)完成情況，對(duì)本次實(shí)習(xí)進(jìn)行總結(jié)（主要說(shuō)明實(shí)習(xí)任務(wù)完成情況和結(jié)果、實(shí)習(xí)中存在的問(wèn)題、實(shí)習(xí)收獲與體會(huì)），在3次網(wǎng)頁(yè)設(shè)計(jì)實(shí)習(xí)結(jié)束后，將本次實(shí)習(xí)任務(wù)完成情況和實(shí)習(xí)總結(jié)寫(xiě)入實(shí)習(xí)報(bào)告并提交。6．自擬主題制作包含圖文混排、圖片、表格、主頁(yè)等頁(yè)面的網(wǎng)站（第2次完成）（1）自擬站點(diǎn)主題，規(guī)劃站點(diǎn)內(nèi)容，收集相關(guān)素材并整理實(shí)驗(yàn)前自擬站點(diǎn)主題（如“我的班級(jí)”、“西安世園會(huì)”、“XX旅游景點(diǎn)”等），根據(jù)站點(diǎn)類型和特性設(shè)計(jì)站點(diǎn)各網(wǎng)頁(yè)內(nèi)容，規(guī)劃各網(wǎng)頁(yè)之間的鏈接關(guān)系。收集或撰寫(xiě)文字內(nèi)容，下載或拍攝圖片并進(jìn)行圖像處理（也可錄制音樂(lè)和視頻，多媒體素材文件不宜太大，一般不超過(guò)5MB），設(shè)計(jì)表格，填寫(xiě)站點(diǎn)重要數(shù)據(jù)或信息。以“我的班級(jí)”主題為例，基本要求如下：首頁(yè)采用很經(jīng)典的文字對(duì)專業(yè)介紹和班級(jí)概況介紹，并插入班級(jí)成員合影、專業(yè)特色圖片，達(dá)到主題顯明的效果，在首頁(yè)上再建立三個(gè)鏈接，分別鏈接到圖文混排頁(yè)面、圖片展示頁(yè)面和表格頁(yè)面；圖文混排頁(yè)面以文字為主（班級(jí)特點(diǎn)、特長(zhǎng)、成績(jī)、成就等）插入1-2張圖片配合文字描述；圖片展示頁(yè)面以表格布局，展示成員照片；表格頁(yè)面可以制作成簡(jiǎn)單的二維表，表頭包含：學(xué)號(hào)、姓名、性別、年齡、籍貫、特長(zhǎng)等。（2）FrontPage管理站點(diǎn)①建立站點(diǎn)文件夾：在磁盤(pán)根目錄下建立站點(diǎn)主目錄文件夾（如WWWroot）。②創(chuàng)建站點(diǎn)打開(kāi)“文件“菜單”，單擊“新建”，選擇“空白站點(diǎn)”，指定新站點(diǎn)的位置為“WWWroot”。③進(jìn)行站點(diǎn)內(nèi)目錄規(guī)劃根據(jù)要制作的網(wǎng)站的內(nèi)容，規(guī)劃并建立站點(diǎn)內(nèi)的子文件夾，用以分類存放網(wǎng)站制作中的相關(guān)素材及網(wǎng)頁(yè)文件。④.導(dǎo)入網(wǎng)頁(yè)制作需要的素材將準(zhǔn)備好的素材文件，分別導(dǎo)入站點(diǎn)中相應(yīng)的文件夾中。注意：不要將文件存放在“_private”文件夾中。若在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中使用站點(diǎn)文件夾以外的素材文件，請(qǐng)注意：在保存網(wǎng)頁(yè)時(shí)出現(xiàn)“保存嵌入式文件”對(duì)話框（如圖2-2所示），務(wù)必將素材文件保存到站點(diǎn)內(nèi)合適的文件夾中。（3）頁(yè)面布局規(guī)劃首頁(yè)以表格或?qū)Ш叫问讲季郑粓D文混排頁(yè)面通過(guò)對(duì)齊方式布局；圖片展示網(wǎng)頁(yè)通過(guò)表格布局；表格頁(yè)面通過(guò)表格布局并注意表格屬性單元格屬性設(shè)置。（4）制作各個(gè)頁(yè)面 ①制作圖文混排的網(wǎng)頁(yè)新建一個(gè)空白網(wǎng)頁(yè)，添加文字，設(shè)置字型、字體、段落、對(duì)齊方式等，并對(duì)頁(yè)面進(jìn)行必要的修飾；插入圖片，進(jìn)行圖文混排；將該網(wǎng)頁(yè)保存到站點(diǎn)內(nèi)合適的文件夾中。 ②制作圖片展示網(wǎng)頁(yè)新建一個(gè)空白網(wǎng)頁(yè)，建立表格，第一行合并，輸入圖片頁(yè)面主題；第二行插入圖片，第三行輸入對(duì)第二行圖片的文字說(shuō)明（圖注）；依次類推。將該網(wǎng)頁(yè)保存到站點(diǎn)內(nèi)合適的文件夾中。 ③制作表格網(wǎng)頁(yè)新建一個(gè)空白網(wǎng)頁(yè)，輸入表格標(biāo)題，設(shè)置標(biāo)題格式；插入一個(gè)表格，設(shè)置表格格式；添加表頭文字和表格內(nèi)容，設(shè)置文字格式和單元格格式。將該網(wǎng)頁(yè)保存到站點(diǎn)內(nèi)合適的文件夾中。 ④制作站點(diǎn)主頁(yè)（首頁(yè)）新建一個(gè)空白網(wǎng)頁(yè)，進(jìn)行首頁(yè)布局設(shè)計(jì)（使用表格布局）；添加站點(diǎn)主題，站點(diǎn)概要文字及圖片；建立鏈接圖文頁(yè)面、圖片頁(yè)面、表格頁(yè)面的超鏈接；設(shè)計(jì)要求：頁(yè)面布局合理、內(nèi)容排版整潔，顏色搭配合理。將該網(wǎng)頁(yè)保存到站點(diǎn)主目錄下，首頁(yè)文件名為“index.htm”。（5）請(qǐng)注意：①所有文件夾和文件名不能使用中文；②圖文頁(yè)面、圖片頁(yè)面、表格頁(yè)面，通過(guò)鏈接返回主頁(yè)；③網(wǎng)頁(yè)素材文件不宜過(guò)大，網(wǎng)站壓縮包容量盡量在10M以內(nèi)7.測(cè)試與評(píng)價(jià)將設(shè)計(jì)的自擬網(wǎng)站壓縮包拷貝到同組同學(xué)的計(jì)算機(jī)中，同組同學(xué)進(jìn)行測(cè)試和評(píng)價(jià)，測(cè)試和評(píng)價(jià)的內(nèi)容包括：布局是否合理、鏈接是否正常、色彩搭配是否得當(dāng)、文件系統(tǒng)（文件命名、文件夾