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