-I Hate Love.mp3” loop=“-1” />。5.行走在巴黎（BaLi.html）：
1）采用Ap層布局。
2）設(shè)置了AP Div1差
一個(gè)擁抱.mp3“ loop=”-1“>。6.巴塞羅那（Basailuona.html）：
1）采用spry選項(xiàng)卡式面板布局。
2）設(shè)置了AP Div1不
想去上班.mp3” loop=“-1” />。7.ReadMe（ReadMe.html）：
1）采用Ap層布局+表格布局。
2）設(shè)置了AP Div1-AP Div2兩個(gè)層。
3）AP Div2 設(shè)置為滾動(dòng)字幕，并插入了日期。
心得
通過(guò)《Web前端設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)》的學(xué)習(xí)，我喜歡上了網(wǎng)頁(yè)設(shè)計(jì)，在制作網(wǎng)頁(yè)的過(guò)程中遇到很多問(wèn)題，但是經(jīng)過(guò)自己在網(wǎng)上搜索、圖書館找材料以及老師的講解幫助下，都解決了問(wèn)題。雖然我現(xiàn)在制作網(wǎng)頁(yè)的能力還不好，但是我會(huì)在大學(xué)期間好好實(shí)踐，將網(wǎng)頁(yè)的制作變成自己的技術(shù)。
武漢大學(xué)計(jì)算中心2007年5月
《網(wǎng)頁(yè)與Web程序設(shè)計(jì)》實(shí)驗(yàn)報(bào)告
年級(jí)：2008級(jí)（必修）
學(xué)號(hào)：20080307703117姓名：郝嫚專業(yè)：金融管理與實(shí)務(wù)3班
一、實(shí)驗(yàn)題目
分析或參考給定的“網(wǎng)站設(shè)計(jì)實(shí)例”，設(shè)計(jì)一個(gè)自選題材的網(wǎng)站。
說(shuō)明：
1．自行設(shè)計(jì)的網(wǎng)站可以只包含靜態(tài)網(wǎng)頁(yè)（.htm），也可以包含動(dòng)態(tài)網(wǎng)頁(yè)(.asp)。
2．站點(diǎn)至少要有三層結(jié)構(gòu)，頁(yè)面數(shù)5頁(yè)左右；網(wǎng)頁(yè)要有落款、版權(quán)說(shuō)明。網(wǎng)站大小不要超過(guò)10MB。
3．在網(wǎng)站制作過(guò)程中或完成后，填寫下面“
五、實(shí)驗(yàn)步驟”里的省略號(hào)部分。
二、實(shí)驗(yàn)?zāi)康暮鸵?/p>
通過(guò)以前各章的學(xué)習(xí)和實(shí)驗(yàn)，同學(xué)們已經(jīng)了解和初步掌握一系列的網(wǎng)頁(yè)與Web程序設(shè)計(jì)技術(shù)。本實(shí)驗(yàn)?zāi)苁勾蠹覍?duì)網(wǎng)站設(shè)計(jì)的全過(guò)程，有一個(gè)更加完整的概念，熟練掌握網(wǎng)站設(shè)計(jì)工具“網(wǎng)頁(yè)設(shè)計(jì)三劍客”。具體要求如下：
1．自選題材，主題內(nèi)容要合法、健康、實(shí)用。網(wǎng)站主題突出、內(nèi)容豐富。
2．自己動(dòng)手獨(dú)立完成網(wǎng)站設(shè)計(jì)?？梢越梃b和模仿某個(gè)網(wǎng)站進(jìn)行設(shè)計(jì)與制作，但不可以從網(wǎng)上下載網(wǎng)頁(yè)直接上交。
3．站點(diǎn)應(yīng)當(dāng)設(shè)計(jì)合理，結(jié)構(gòu)分明，管理有序，無(wú)多余文件和文件夾，大小合適。文件和文件夾存放位置要正確，首頁(yè)文件名應(yīng)該使用index.htm、index.asp、default.htm或default.asp。其他文件或文件名命名也要規(guī)范，不宜使用漢字或帶有空格的名稱。
4．網(wǎng)站風(fēng)格統(tǒng)一，設(shè)計(jì)適合于主題的LOGO（徽標(biāo)），或者標(biāo)題圖片及動(dòng)畫。各頁(yè)面設(shè)計(jì)合理、美觀，有創(chuàng)意。不要太花哨或太孩子氣，不要只是各種元素的隨意拼湊。圖片和動(dòng)畫選用要適合主題，不要在網(wǎng)頁(yè)中插入不相干的圖片，圖片保存格式和圖片大小要合適。要適用于各種顯示器的分辨率，不要太寬，否則在顯示器分辨率較小時(shí)會(huì)出現(xiàn)水平滾動(dòng)條。
5．各個(gè)頁(yè)面之間的鏈接要合理有效，路徑要正確（使用相對(duì)路徑）。要合理使用css樣式，不要在各個(gè)頁(yè)面中重復(fù)定義相同的css樣式；應(yīng)該將css樣式存放到css文件中，然后附加即鏈接到各頁(yè)中。代碼結(jié)構(gòu)清晰，無(wú)垃圾代碼。
三、實(shí)驗(yàn)方法
網(wǎng)站設(shè)計(jì)的一般過(guò)程或方法如下：
1．確定主題和收集資料
自行選定所要設(shè)計(jì)的網(wǎng)站主題和欄目，收集有關(guān)圖文、數(shù)據(jù)等資料，經(jīng)過(guò)分析，初步確定網(wǎng)站的基本功能、結(jié)構(gòu)或三級(jí)目錄。
2．規(guī)劃網(wǎng)站和新建站點(diǎn)
在需求分析的基礎(chǔ)上，畫出網(wǎng)站的樹型目錄結(jié)構(gòu)圖，從網(wǎng)站根文件夾，子文件夾到文件名。首頁(yè)文件名如index.htm，應(yīng)該放在網(wǎng)站根文件夾里。根據(jù)Windows的“管理工具”中是否已安裝IIS，用Dreamweaver 8，在C:Inetpubwwroot或者D:里，新建站點(diǎn)，即根文件夾，子文件夾或文件名。隨時(shí)在U盤上做好備份。
3．制作素材和單個(gè)網(wǎng)頁(yè)
用“網(wǎng)頁(yè)設(shè)計(jì)三劍客”自行制作或者收集網(wǎng)站要使用的小圖片、動(dòng)畫、音頻或視頻，制作單個(gè)網(wǎng)頁(yè)文件及其鏈接，以及按需要建立數(shù)據(jù)庫(kù)。按照規(guī)劃，一一放在網(wǎng)站的相應(yīng)子文件夾里。
4．制作首頁(yè)和建立鏈接
制作首頁(yè)，并且建立與下一級(jí)網(wǎng)頁(yè)的鏈接（若受網(wǎng)站大小限制且超過(guò)5頁(yè)，則可建立必要的空連接）。
5．調(diào)試運(yùn)行
可以邊設(shè)計(jì)邊調(diào)試，也可以邊調(diào)試邊修改前面的設(shè)計(jì)。然后，正式運(yùn)行和提交網(wǎng)站。
四、實(shí)驗(yàn)環(huán)境
微機(jī) + Windows操作系統(tǒng)(含IIS)+ Fireworks 8 + Flash 8 + Dreamweaver 8 + Access。
五、實(shí)驗(yàn)步驟
請(qǐng)?zhí)顚懢W(wǎng)站分析與設(shè)計(jì)的實(shí)驗(yàn)步驟。
（一）分析給定的“網(wǎng)站設(shè)計(jì)實(shí)例”
1．該網(wǎng)站的樹型目錄或站點(diǎn)結(jié)構(gòu)圖（如圖1）：
……
圖1 實(shí)例網(wǎng)站的樹型目錄或站點(diǎn)結(jié)構(gòu)
2．在該網(wǎng)站首頁(yè)上“插入”大標(biāo)題圖片和動(dòng)畫文件的操作步驟：
……
3．在該網(wǎng)站設(shè)計(jì)中，運(yùn)用了哪些樣式設(shè)計(jì)技術(shù)如CSS等？舉例說(shuō)明：
……
4．在該網(wǎng)站設(shè)計(jì)中，下一級(jí)網(wǎng)頁(yè)顯示的目標(biāo)（位置）一般設(shè)置為：……；數(shù)據(jù)庫(kù)（.mdb）文件為：……。
5．在該網(wǎng)站設(shè)計(jì)中，較好地運(yùn)用了如下網(wǎng)頁(yè)與Web程序設(shè)計(jì)技術(shù)：
……
（二）設(shè)計(jì)自選題材網(wǎng)站的具體步驟
1．確定主題和收集資料
本網(wǎng)站的主題：我的美麗家鄉(xiāng)——廣水
? 欄目或三級(jí)目錄：首頁(yè)，魅力廣水，廣水高中，廣水風(fēng)光，今日廣水和廣水人
家。
2．規(guī)劃網(wǎng)站和新建站點(diǎn)
網(wǎng)站的樹型目錄或站點(diǎn)結(jié)構(gòu)圖如圖2：
? 首頁(yè)
?
?
?
? 魅力廣水 廣水風(fēng)光 廣水高中 今日廣水和廣水人家
創(chuàng)建本地站點(diǎn)：
·啟動(dòng)Dreamweaver 8，選擇“站點(diǎn)”菜單中的“管理站點(diǎn)”命令，打開“管理站點(diǎn)”對(duì)話框。
選擇“新建”按鈕，然后選擇“站點(diǎn)”命令，打開“站點(diǎn)定義”對(duì)話框，將站點(diǎn)名稱設(shè)為“Mysite”，單擊下一步。
·根據(jù)提示填完有關(guān)步驟，最后單擊“完成”按鈕。
·單擊“管理站點(diǎn)”對(duì)話框中的“完成”按鈕，在打開“文件”面板上顯示本地站點(diǎn)的目錄結(jié)構(gòu)。
·在站點(diǎn)根文件夾上單擊右鍵，從彈出的快捷菜單中選擇“新建文件夾”命令，將新建文件夾名稱設(shè)置為“image”。
·采用同樣的方法再建一個(gè)“vidao”文件夾。
3．制作素材和單個(gè)網(wǎng)頁(yè)（舉例說(shuō)明典型的操作步驟）
（1）素材制作
1.圖片：在網(wǎng)上收集一些網(wǎng)頁(yè)背景圖片，與主題有關(guān)的一些圖片；將一些不是很合心意的圖片在“fireworks”中進(jìn)行修改，制作。
2.flash動(dòng)畫：在有關(guān)網(wǎng)頁(yè)制作的網(wǎng)站中下載了一些有關(guān)的flash動(dòng)畫。由于網(wǎng)頁(yè)設(shè)計(jì)容量的限制此處沒有插入動(dòng)畫，實(shí)際步驟已知。
3.下載歌曲輕音樂紅河谷作為其中風(fēng)景網(wǎng)頁(yè)的背景音樂。
4.下載有關(guān)的資料，圖片??
…
（2）網(wǎng)頁(yè)制作
以魅力廣水為例
打開Fireworks 8，在Fireworks 8中制做好背景圖片并保存為JPG格式，關(guān)閉Fireworks 8。
打開Dreamweaver 8，單擊“插入”—“圖片”命令，選擇此圖片插入
（3）建立數(shù)據(jù)庫(kù)
4．制作首頁(yè)和建立鏈接（舉例說(shuō)明典型的操作步驟）
制作首頁(yè)：
……1）新建頁(yè)面，選擇菜單命令“修改”—“頁(yè)面屬性”，在彈出的對(duì)話框中將網(wǎng)頁(yè)的標(biāo)題設(shè)置為“魅力廣水”……
2)如果沒有顯示標(biāo)尺，則選擇菜單命令“查看”/“標(biāo)尺”/“顯示”，顯示標(biāo)尺。
3）選擇菜單命令“查看”/“網(wǎng)格”/“顯示網(wǎng)格”來(lái)顯示網(wǎng)格，以便于
定位。
4）在插入工具欄中選擇“布局”子工具欄，單擊布局按鈕，此時(shí)會(huì)打開
一個(gè)“從布局模式開始”，單擊“確定”按鈕進(jìn)入布局模式。
5）單擊“布局”插入工具欄上的“布局表格”按鈕，然后將光標(biāo)放在要繪制表格的區(qū)域，按住鼠標(biāo)左鍵繪制一個(gè)布局表格。
6）在“布局”插入工具欄上的“布局表格”按鈕，然后移動(dòng)光標(biāo)到第一
行網(wǎng)格的位置，繪制一個(gè)頂部單元格并選中該單元格，在打開的“屬性”面板中設(shè)置“背景顏色”為白色，并以此方法繪制剩余的單元格。
7）選擇“插入”/“圖像”命令，插入圖片，調(diào)整圖片大小使得圖片大
小恰好充滿單元格。
8）在左側(cè)單元格內(nèi)輸入文字，然后加上項(xiàng)目符號(hào)，并插入圖片，然后
在屬性面板中設(shè)置字體為黑體，背景設(shè)為綠色。
9)選定整個(gè)布局表格，將布局表格背景設(shè)為黑色。完成首頁(yè)制作。
建立連接:
? 將所有的網(wǎng)頁(yè)都做完了之后再建立鏈接。（下面以“魅力廣水”為例）①選中“魅力廣水”圖片，打開“屬性”面板，選擇“鏈接”文本框右邊的文件夾，選擇文件夾中的“主頁(yè)”網(wǎng)頁(yè)，單擊“確定”。
②在“目標(biāo)”的下拉框中選擇“鳴人的身世”
5．調(diào)試運(yùn)行
調(diào)試和運(yùn)行情況：
在運(yùn)行的過(guò)程中，有某些圖片，音樂無(wú)法正常顯示和播放，有些是因?yàn)殡娔X的原因，而有些則是因?yàn)椴僮鬟^(guò)程中出現(xiàn)的問(wèn)題，經(jīng)過(guò)不斷修正，網(wǎng)頁(yè)運(yùn)行正常。
……
實(shí)驗(yàn)報(bào)告要求
1、報(bào)告用紙 采用統(tǒng)一的河南科技大學(xué)實(shí)驗(yàn)報(bào)告用紙。
2、實(shí)驗(yàn)報(bào)告內(nèi)容
具體內(nèi)容包含以下幾項(xiàng)：（1）實(shí)驗(yàn)題目（2）實(shí)驗(yàn)學(xué)時(shí)（3）實(shí)驗(yàn)?zāi)康模?）實(shí)驗(yàn)環(huán)境（5）實(shí)驗(yàn)內(nèi)容
（6）出現(xiàn)的問(wèn)題及解決方法
實(shí)驗(yàn)環(huán)境
實(shí)驗(yàn)的硬件平臺(tái)為方正臺(tái)式機(jī)，主頻2.4Ghz，內(nèi)存4Gb。軟件平臺(tái)為VS 2010、Dreamveaver
8、Access 2010、Sqlserver 2008。1
實(shí)驗(yàn)一 Web開發(fā)環(huán)境的建立
一、實(shí)驗(yàn)學(xué)時(shí) 2學(xué)時(shí)
二、實(shí)驗(yàn)?zāi)康?/p>
1、掌握IIS Web服務(wù)器的配置；
2、熟悉Visual Studio 2010開發(fā)環(huán)境。
三、實(shí)驗(yàn)環(huán)境 Windows7
四、實(shí)驗(yàn)內(nèi)容 萬(wàn)維網(wǎng)發(fā)布服務(wù)
通過(guò)將客戶端 HTTP 請(qǐng)求連接到在 IIS 中運(yùn)行的網(wǎng)站上，萬(wàn)維網(wǎng)發(fā)布服務(wù)（004km.cn“>清華大學(xué)
部分重要代碼如下： 定義文本屬性標(biāo)記語(yǔ)法格式: 計(jì)算機(jī) 定義段落屬性標(biāo)記語(yǔ)法格式: 插入多媒體標(biāo)記
插入滾動(dòng)標(biāo)記 align：字幕的對(duì)齊方式（left/center/right/top/middle/buttom）behavior：設(shè)定瀏覽器處理字幕的方法 height：
設(shè)
定
字
幕的高
度
width：設(shè)定字幕的寬度
direction：設(shè)定字幕滾動(dòng)的方向（left/right/）bgcolorhspace：：設(shè)
設(shè)定
定字
字幕
左幕
右的的背空
景白
顏空
色
間
vspace：設(shè)定字幕上下的空白空間
scrollamount：設(shè)定每個(gè)連續(xù)滾動(dòng)字幕后面的間隔 scrolldelayloop：：設(shè)
設(shè)定：
鼠定
兩字標(biāo)
移次
滾幕出
該動(dòng)的區(qū)之
間滾域
時(shí)的間動(dòng)繼
續(xù)隔次滾
動(dòng)時(shí)
間 數(shù) ； ONMOUSEOUT=this.start()ONMOUSEOVER=this.stop()：鼠標(biāo)移入該區(qū)域時(shí)停止?jié)L動(dòng)。
六、出現(xiàn)的問(wèn)題及解決方法
實(shí)驗(yàn)三 XML+CSS布局
一、實(shí)驗(yàn)學(xué)時(shí) 4學(xué)時(shí)
二、實(shí)驗(yàn)?zāi)康?/p>
1、掌握XML描述文檔結(jié)構(gòu)的方法；
2、掌握CSS控制HTML和XML文檔的方法。
三、實(shí)驗(yàn)環(huán)境
四、實(shí)驗(yàn)內(nèi)容
五、實(shí)驗(yàn)步驟
六、出現(xiàn)的問(wèn)題及解決方法 實(shí)驗(yàn)四 Web數(shù)據(jù)庫(kù)訪問(wèn)技術(shù)
一、實(shí)驗(yàn)學(xué)時(shí) 2學(xué)時(shí)
二、實(shí)驗(yàn)?zāi)康?/p>
掌握.NET 4.0的服務(wù)器端數(shù)據(jù)訪問(wèn)控件技術(shù)。
三、實(shí)驗(yàn)環(huán)境
四、實(shí)驗(yàn)內(nèi)容
五、實(shí)驗(yàn)步驟
六、出現(xiàn)的問(wèn)題及解決方法 實(shí)驗(yàn)五 Web站點(diǎn)規(guī)劃設(shè)計(jì)
一、實(shí)驗(yàn)學(xué)時(shí) 4學(xué)時(shí)
二、實(shí)驗(yàn)?zāi)康?/p>
以個(gè)人信息網(wǎng)站為例，掌握Web站點(diǎn)規(guī)劃設(shè)計(jì)方法。
三、實(shí)驗(yàn)環(huán)境
四、實(shí)驗(yàn)內(nèi)容
五、實(shí)驗(yàn)步驟
六、出現(xiàn)的問(wèn)題及解決方法
網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告
本課程的設(shè)計(jì)目的是通過(guò)實(shí)踐使同學(xué)們經(jīng)歷Dreamweaver cs3開發(fā)的全過(guò)程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)。結(jié)合具體的開發(fā)案例，理解并初步掌握運(yùn)用Dreamweaver cs3可視化開發(fā)工具進(jìn)行網(wǎng)頁(yè)開發(fā)的方法；了解網(wǎng)頁(yè)設(shè)計(jì)制作過(guò)程通過(guò)設(shè)計(jì)達(dá)到掌握網(wǎng)頁(yè)設(shè)計(jì)、制作的技巧。了解和熟悉網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和實(shí)現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁(yè)設(shè)計(jì)方案，可以按要求，利用合適圖文素材設(shè)計(jì)制作符合要求的網(wǎng)頁(yè)設(shè)計(jì)作品。熟練掌握Photoshop cs3、Dreamweaver cs3等軟件的的操作和應(yīng)用。增強(qiáng)動(dòng)手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。
1.課程設(shè)計(jì)題目
跑車世界，為了拉近人們與高端汽車的距離，讓人們更加的了解它們，我收集了一些關(guān)于汽車的知識(shí)，并通過(guò)網(wǎng)頁(yè)的形式展現(xiàn)在人們面前.2.總結(jié)
在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweaver cs3是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個(gè)協(xié)調(diào)合理的頁(yè)面。通過(guò)這次網(wǎng)頁(yè)課程設(shè)計(jì)激發(fā)學(xué)習(xí)興趣，調(diào)動(dòng)學(xué)習(xí)的自覺性，自己動(dòng)腦、動(dòng)手，動(dòng)口，運(yùn)用網(wǎng)絡(luò)資源，結(jié)合教材及老師的指導(dǎo)，通過(guò)自身的實(shí)踐，創(chuàng)作出積聚個(gè)人風(fēng)格、個(gè)性的個(gè)人網(wǎng)頁(yè)?？傮w來(lái)說(shuō)，整個(gè)學(xué)期的學(xué)習(xí)過(guò)程，我學(xué)會(huì)了很多知識(shí)，在設(shè)計(jì)網(wǎng)頁(yè)的這幾天里，我充分利用了這次設(shè)計(jì)的機(jī)會(huì)，全心全意投入到網(wǎng)頁(yè)世界，去不斷的學(xué)習(xí)，去不斷的探索；同時(shí)去不斷的充實(shí)，去不斷的完善自我，在網(wǎng)絡(luò)的天空下逐漸的美化自己的人生！做好頁(yè)面，并不是一件容易的事，它包括個(gè)人主頁(yè)的選題、內(nèi)容采集整理、圖片的處理、頁(yè)面的排版設(shè)置、背景及其整套網(wǎng)頁(yè)的色調(diào)等很多東西。本次課程設(shè)計(jì)不是很好，頁(yè)面過(guò)于簡(jiǎn)單，創(chuàng)新意識(shí)反面薄弱，這是我需要提高的地方。需要學(xué)的地方還有很多，需要有耐心、堅(jiān)持，不斷的學(xué)習(xí)，綜合運(yùn)用多種知識(shí)，才能設(shè)計(jì)出好的web頁(yè)面?？傮w來(lái)說(shuō)，通過(guò)這次的對(duì)網(wǎng)頁(yè)課程設(shè)計(jì)，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁(yè)設(shè)計(jì)的大門，只要我再認(rèn)真努力的去學(xué)習(xí)，去提高，憑借我對(duì)網(wǎng)頁(yè)設(shè)計(jì)的熱情和執(zhí)著，我將來(lái)設(shè)計(jì)出的網(wǎng)頁(yè)會(huì)更加專業(yè)，更完善。感謝老師、同學(xué)在這次課程設(shè)計(jì)中給我的幫助、指導(dǎo)
點(diǎn)擊咨詢 