《網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)》實(shí)驗(yàn)指導(dǎo)書

試驗(yàn)?zāi)康?/p>

試驗(yàn)一 網(wǎng)頁(yè)的生疏1、把握利用Internet進(jìn)展信息巡游、搜尋，下載網(wǎng)頁(yè)、圖片、文字和文件；2HTML文檔并掃瞄。3HTML根本標(biāo)記的使用。試驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗(yàn)重點(diǎn)及難點(diǎn)生疏HTML的構(gòu)造、語(yǔ)法。生疏HTML根本標(biāo)記的使用。試驗(yàn)內(nèi)容1〔“://dabaoku/“://dabaoku等〕下載網(wǎng)頁(yè)制作時(shí)需要的小圖片、動(dòng)畫及flash等網(wǎng)頁(yè)制作素材。2、收集你認(rèn)為比較好的網(wǎng)頁(yè)并從網(wǎng)頁(yè)主題、網(wǎng)頁(yè)內(nèi)容、構(gòu)造布局、顏色搭配等方面來(lái)分析網(wǎng)頁(yè)。3、通過(guò)掃瞄浪網(wǎng)站主頁(yè)分析其網(wǎng)頁(yè)根本元素，查看其源代碼，保藏到保藏夾中，將其設(shè)為主頁(yè)。4、制作一個(gè)簡(jiǎn)潔的網(wǎng)頁(yè)sy1-1.htmHTML內(nèi)容為司空曙的《江村即事51的練習(xí)生疏HTML〔可參考其次章內(nèi)容〕試驗(yàn)二 根本操作〔一〕試驗(yàn)?zāi)康?、生疏Dreamweaver的工作環(huán)境并了解本地站點(diǎn)的建設(shè)和治理；23試驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗(yàn)重點(diǎn)及難點(diǎn)文字的插入及設(shè)置。圖像的插入及設(shè)置。各種超鏈接的創(chuàng)立。試驗(yàn)內(nèi)容1、使用DreamweaverDreamweaver個(gè)文件和文件夾：圖片文件夾image；音樂(lè)文件夾soun〕等。2Dreamweaversy2-1.html的網(wǎng)頁(yè)文件，從供給的網(wǎng)頁(yè)原始素材中把相關(guān)文字復(fù)制到該網(wǎng)頁(yè)文件中，并進(jìn)展適當(dāng)?shù)奈淖衷O(shè)置，結(jié)果如以下圖所示。3Dreamweaver根本操作”中對(duì)網(wǎng)頁(yè)sy2-1.html按如下要求進(jìn)展編輯并另存為sy2-2.html，效果如下圖。標(biāo)題文字大小用<h1></h1>標(biāo)記；24像素，字體為幼圓，顏色為紅色；24像素，字體為隸書，顏色為藍(lán)色；在作者信息后加一條水平線，居中，水平線寬度為掃瞄器的30%，水平線的粗細(xì)為20個(gè)像素，顏色為棕色；4Dreamweaver根本操作”中對(duì)網(wǎng)頁(yè)sy2-2.html按如下要求進(jìn)展編輯并另存為sy2-3.html，效果如下圖。插入背景圖片：Welcome-Popup-Background.gif在古詩(shī)左下方插入作者的照片：司空曙.jpg5、在站點(diǎn)“Dreamweaver根本操作”中從供給的網(wǎng)頁(yè)原始素材中把相關(guān)文字復(fù)制到網(wǎng)頁(yè)文sy2-3.html中按要求進(jìn)展編輯并另存為sy2-4.html，效果如下圖。改“名目”下的列表符號(hào)類型為方框。以標(biāo)題為熱點(diǎn)創(chuàng)立空超鏈接以圖片為熱點(diǎn)創(chuàng)立空超鏈接以“大歷十才子”為熱點(diǎn)創(chuàng)立空超鏈接6Dreamweaversy3-1.html的網(wǎng)頁(yè)文件，以作試驗(yàn)三制作留言簿備用。7、在站點(diǎn)“Dreamweaver根本操作”中對(duì)網(wǎng)頁(yè) sy2-4.html按要求進(jìn)展編輯并另存為sy2-5.html，如以下圖所示。以標(biāo)題和圖片為熱點(diǎn)的超鏈接均指向“://baike.baidu/view/1121590.htm“://baike.baidu/view/1121590.ht〔路徑，在當(dāng)前窗口中翻開。為“名目”下的各條目創(chuàng)立書簽，書簽名為相應(yīng)條目的拼音首字母。在文檔最終增加一行“如有訴求，請(qǐng)留言或郵件聯(lián)系！感謝以“留言”為熱點(diǎn)創(chuàng)立指向sy3-1.html〔使用相對(duì)路徑，在窗口中翻開。以“郵件聯(lián)系”為熱點(diǎn)創(chuàng)立指向“mailto:ggyx@yahoo.cn“ggyx@yahoo.cn的超鏈接。試驗(yàn)三 根本操作〔二〕試驗(yàn)?zāi)康?2、嫻熟把握在網(wǎng)頁(yè)文件中表格的添加和設(shè)置。3、嫻熟把握在網(wǎng)頁(yè)文件中表單的添加和設(shè)置。試驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗(yàn)重點(diǎn)及難點(diǎn)多媒體對(duì)象的添加和設(shè)置。表單及表單對(duì)象的添加及設(shè)置。利用表格來(lái)歸整表單。試驗(yàn)內(nèi)容1Dreamweaversy2-5.html.mp3，要求循環(huán)播放，結(jié)果另存為sy3-2.html。2Dreamweaversy3-3.html的網(wǎng)頁(yè)文件，在該網(wǎng)頁(yè)文件中建立一個(gè)如下圖的表格，并在表格下方添加文字“讓我們回到歡快的童年時(shí)間Flash3Dreamweaver根本操作”中的網(wǎng)頁(yè)文件sy3-1.html，制作一個(gè)留言簿表單，效果如以下圖所示。4Dreamweaversy3-4.html的網(wǎng)頁(yè)文件，在該網(wǎng)頁(yè)文件中用表格來(lái)布局sy3-1.html網(wǎng)頁(yè)文件中的留言簿，效果如以下圖所示。試驗(yàn)?zāi)康?/p>

試驗(yàn)四 CSS樣式表1CSS的根本學(xué)問(wèn)；2CSS樣式”面板；3試驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗(yàn)重點(diǎn)及難點(diǎn)選擇器的使用。利用樣式表對(duì)頁(yè)面進(jìn)展美化。樣式應(yīng)用的優(yōu)先級(jí)試驗(yàn)內(nèi)容1、CSS.html和淡然.html。將網(wǎng)頁(yè)文件淡然.html另存為sy4_1.html，將網(wǎng)頁(yè)文件人生最美是淡然.html另sy4_2.html。2、對(duì)網(wǎng)頁(yè)文件sy4_1.html的標(biāo)題“淡然”做如下設(shè)置：字體為“華文行楷50像素，顏色為#666666，并對(duì)該標(biāo)題承受Glow濾鏡進(jìn)展特效處理：光暈顏色為藍(lán)色，方向45度。3、在網(wǎng)頁(yè)文件sy4_1.html.zit_GB23124顏色設(shè)置為#666699，粗體。將該樣式應(yīng)用于sy4_1.html中表格上方的正文內(nèi)容〔不包括表格本身。4、在網(wǎng)頁(yè)文件sy4_1.html.b：字體為“隸書24為#993366，粗體，背景顏色為#CCCCCC，表格的上邊框是顏色為#003399的雙線，表格的下邊框是顏色為#669999的實(shí)線，表格的左邊框是顏色為#FF6666的虛線，表格的右邊框是顏色為#9999998像素。將該樣式應(yīng)用于sy4_1.html中的表格局部。5sy4_1.html中更改超鏈接的樣式，其中a:link定義為：字體：幼圓，顏色：#66999，修飾：無(wú)〔無(wú)下劃線；a:visite#66003，修飾：無(wú)；a:hover：字體：幼圓，顏色：#FF0000，修飾：下劃線；a:active：字體：華文魏，樣式：傾斜，顏色：#0000CC，修飾：刪除線。6、建立外部樣式表wenzi.cs_GB23118粗體。將該樣式應(yīng)用于sy4_1.html中表格下方的正文內(nèi)容〔不包括表格本身。7、在網(wǎng)頁(yè)文件sy4_1.html中為“淡然的釋義”局部加上方塊列表符號(hào)，并給這局部?jī)?nèi)容設(shè)置為字體顏色為#993333，背景顏色為#999999。8、使用內(nèi)嵌樣式使得其次段文字“淡然，常用義為淡泊……失意坦然個(gè)字符。9、將外部樣式表wenzi.css應(yīng)用于網(wǎng)頁(yè)文件sy4_2.html然”做如下設(shè)置：字體為“華文行楷50#CC336Shadow濾鏡進(jìn)展特效處理：光暈顏色為藍(lán)色，方向?yàn)?5度。試驗(yàn)五 網(wǎng)頁(yè)布局〔一〕試驗(yàn)?zāi)康?2試驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗(yàn)重點(diǎn)及難點(diǎn)利用布局表格來(lái)規(guī)劃網(wǎng)頁(yè)的設(shè)計(jì)。利用框架來(lái)來(lái)設(shè)計(jì)網(wǎng)頁(yè)。利用表格、框架這兩種布局工具來(lái)共同布局網(wǎng)頁(yè)。試驗(yàn)內(nèi)容1、建立一個(gè)名為“布局表格與框架”的本地站點(diǎn)并在該站點(diǎn)中建一個(gè)名為sy5-1.html的網(wǎng)頁(yè)文件，利用布局表格來(lái)布局表單。效果如下圖。2sy5-2.html來(lái)和表格配搭使用來(lái)布局網(wǎng)頁(yè)。效果如下圖。3、利用框架集和框架來(lái)規(guī)劃在本地站點(diǎn)“布局表格與框架”建立的首頁(yè)文件index.html，為名目?jī)?nèi)容“主講課程sy5-2.html、sy5-1.html,此外為名目?jī)?nèi)容“和我聯(lián)系”建立電子郵件鏈接。試驗(yàn)六 網(wǎng)頁(yè)布局〔二〕試驗(yàn)?zāi)康?CSS的頁(yè)面分割技術(shù)、盒子模式和定位技術(shù)；2〔APDiv〕的根本操作并能利用層來(lái)定位頁(yè)面元素；3試驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗(yàn)重點(diǎn)及難點(diǎn)CSS盒模式和定位技術(shù)敏捷利用層來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)元素的準(zhǔn)確定位。利用模板生成多個(gè)風(fēng)格全都的網(wǎng)頁(yè)。試驗(yàn)內(nèi)容1、在本地站點(diǎn)“基于CSS的網(wǎng)頁(yè)布局設(shè)計(jì)”中創(chuàng)立文件夾sy6sy6文件夾下創(chuàng)立兩個(gè)文件：my.htmlzzy.html。并將給定的多媒體文件放入相應(yīng)的文件夾中。2CSS布局學(xué)問(wèn)和APDiv〔層〕的學(xué)問(wèn)，利用Dreamweavermy.html進(jìn)展設(shè)計(jì)編輯，效果如以下圖所示。3、zzy.htm4、.htmmy.dwsy6文件夾下。5、依據(jù)模板文件“my.dw”創(chuàng)立網(wǎng)頁(yè)文檔“yhy.htmbssz.htm”和“l(fā)y.htm點(diǎn)的網(wǎng)頁(yè)文件my.html中的名目?jī)?nèi)容“拙政園zzy.htmyhy.htmbssz.htm”和“l(fā)y.htm試驗(yàn)?zāi)康?/p>

試驗(yàn)七 行為和時(shí)間軸12試驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，Dreamweaver軟件，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗(yàn)重點(diǎn)及難點(diǎn)利用行為實(shí)現(xiàn)網(wǎng)頁(yè)的交互效果。利用時(shí)間軸實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。試驗(yàn)內(nèi)容1.html；圖片文件夾image，里面有假設(shè)干圖片文件。2、index.htm當(dāng)單擊文字“行為”時(shí)，效果如以下圖所示：當(dāng)單擊文字“時(shí)間軸”時(shí)，效果如以下圖所示：3、在站點(diǎn)“行為和時(shí)間軸”中建一個(gè)網(wǎng)頁(yè)“交換圖像.htm.jp”時(shí)，會(huì)自動(dòng)變?yōu)椤肮?jp.jp4、當(dāng)單擊網(wǎng)頁(yè)“交換圖像.htm則建議書。5、在站點(diǎn)“行為和時(shí)間軸”中建一個(gè)網(wǎng)頁(yè)“彈出信息.htm6、當(dāng)鼠標(biāo)指針移向網(wǎng)頁(yè)“彈出信息.html”中的生日蛋糕圖片時(shí)，在狀態(tài)欄顯示“您許愿了7、在站點(diǎn)“行為和時(shí)間軸”中建一個(gè)網(wǎng)頁(yè)“直線運(yùn)動(dòng).htm一只蝴蝶就從頁(yè)面左上角按直線飛到右下角。8、在站點(diǎn)“行為和時(shí)間軸”中建一個(gè)網(wǎng)頁(yè)“曲線運(yùn)動(dòng).htm一只蝴蝶就從頁(yè)面左上角按曲線飛到右上角，期間進(jìn)展了俯沖和仰沖的動(dòng)作。9、在站點(diǎn)“行為和時(shí)間軸”中建一個(gè)網(wǎng)頁(yè)“簡(jiǎn)單運(yùn)動(dòng).htm一條魚兒在藍(lán)色的海洋里歡快地游來(lái)游去。效果如以下圖所示。10、 把站點(diǎn)“行為和時(shí)間軸”的網(wǎng)頁(yè)index.htm設(shè)為主頁(yè)并在其中設(shè)置相應(yīng)的超鏈接，如以下圖所示。試驗(yàn)?zāi)康?/p>

試驗(yàn)八 綜合試驗(yàn)把握本地站點(diǎn)的創(chuàng)立和治理以及生疏網(wǎng)頁(yè)文件的根本操作；擅長(zhǎng)運(yùn)用各種網(wǎng)頁(yè)布局設(shè)計(jì)方法；生疏在網(wǎng)頁(yè)中根本的網(wǎng)頁(yè)元素〔如文字、圖片、超鏈接、多媒體元素、表格和表單等〕的插入和相關(guān)的設(shè)置；利用模板生成多個(gè)風(fēng)格全都的網(wǎng)頁(yè)；通過(guò)行為實(shí)現(xiàn)網(wǎng)頁(yè)的交互效果。試驗(yàn)環(huán)境WindowsXPDreamweaver試驗(yàn)內(nèi)容設(shè)計(jì)一個(gè)小型的校園跳蚤市場(chǎng)的網(wǎng)站〔教材第9章。附錄1 HTML標(biāo)記的使用試驗(yàn)?zāi)康?、把握HTML文檔的構(gòu)造及其制作標(biāo)準(zhǔn)。2/不換行標(biāo)記，標(biāo)題標(biāo)記，分節(jié)標(biāo)記，水平線標(biāo)記，文本居中標(biāo)記等；345、把握超鏈接的使用，包括錨點(diǎn)標(biāo)記、頁(yè)面跳轉(zhuǎn)鏈接、書簽超鏈接、下載文件鏈接以及電子郵件鏈接等；67、把握音頻和視頻標(biāo)記，包括鏈接音頻或視頻文件、設(shè)置網(wǎng)頁(yè)背景音樂(lè)標(biāo)記，內(nèi)嵌音頻或視頻播放插件等；8910、生疏表單標(biāo)記并把握利用這些標(biāo)記來(lái)創(chuàng)立表單以及其中的各種表單域。試驗(yàn)環(huán)境WindowsXP操作系統(tǒng)，內(nèi)部組成局域網(wǎng)，外連Internet互聯(lián)網(wǎng)。試驗(yàn)重點(diǎn)及難點(diǎn)嫻熟把握各種常用標(biāo)記并利用其來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的排版。不規(guī)章表格的創(chuàng)立。使用表格來(lái)布局表單。試驗(yàn)內(nèi)容1sy2。本次試驗(yàn)中全部網(wǎng)頁(yè)文件均放在名目sy2下；圖片、音頻文件分別放在sy2media子名目的imagesmusic子名目下。2sy2-1.html，實(shí)現(xiàn)如下頁(yè)面：3sy2-1.html按要求進(jìn)展編輯并另存為sy2-2.html，效果如以下圖所示。標(biāo)題文字大小用<h1></h1>