《網(wǎng)頁設(shè)計》課程報告模板(共12頁)

1、精選優(yōu)質(zhì)文檔-傾情為你奉上網(wǎng)頁設(shè)計課程報告學(xué) 號: 專 業(yè): 姓 名: 題 目: 設(shè) 計 時 間:電子信息與計算機工程系2011年11月目 錄一、設(shè)計目的本課程的設(shè)計目的是通過實踐使同學(xué)們經(jīng)歷Dreamweaver cs3開發(fā)的全過程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運用所學(xué)的知識。結(jié)合具體的開發(fā)案例，理解并初步掌握運用Dreamweaver cs3可視化開發(fā)工具進行網(wǎng)頁開發(fā)的方法；了解網(wǎng)頁設(shè)計制作過程。通過設(shè)計達到掌握網(wǎng)頁設(shè)計、制作的技巧。了解和熟悉網(wǎng)頁設(shè)計的基礎(chǔ)知識和實現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁設(shè)計方案，可以按要求，利用合適圖文素材設(shè)計制作符合要求的網(wǎng)頁設(shè)計作品。熟練

2、掌握Photoshop cs3、Dreamweaver cs3等軟件的的操作和應(yīng)用。增強動手實踐能力，進一步加強自身綜合素質(zhì)。二、課程設(shè)計題目設(shè)計的題目是：XXXXX三、課程設(shè)計要求1課程設(shè)計要求一人一題，每題之間不得有雷同現(xiàn)象。2每個題目至少要 有8個不同頁面（不能利用模板生成），總頁面不少于10個。作品中必須有index.htm為索引頁，作品中需包含flash動畫、超鏈接、圖片、聲音等多媒體元素。3課程設(shè)計過程中，首先要進行項目調(diào)研分析、技術(shù)設(shè)計分析及頁面布局。4設(shè)計結(jié)束時，每人須按題目分析設(shè)計的要求，上交所有的HTML文檔和素材，將所有文件作壓縮包，文件名按“學(xué)號+姓名+項目名

3、稱”來命名（將壓縮文件在課堂上發(fā)給我或者在課程結(jié)課一周內(nèi)發(fā)送至郵箱：，否則將視為放棄所修課程）。5作品內(nèi)容必須要和課程設(shè)計報告中的項目內(nèi)容要一致，設(shè)計報告要求在3500字以上，報告內(nèi)容應(yīng)有課程設(shè)計題目、需求分析、設(shè)計制作方案及關(guān)鍵制作技術(shù)等內(nèi)容，必要時需要將效果圖抓屏后進行插圖。課程設(shè)計報告要求用A4紙打印后與作品一同上交，無設(shè)計報告者不予評定成績。四、需求分析選定主題，確定題目之后，在做整個網(wǎng)站之前對網(wǎng)站進行需求分析。首先，做好需求調(diào)研。調(diào)研方式主要是上網(wǎng)查閱資料，在圖書館里翻閱相關(guān)書籍。調(diào)研內(nèi)容如下：1、 網(wǎng)站當(dāng)前以及日后可能出現(xiàn)的功能需求。2、 客戶對網(wǎng)站的性能（如訪問速度）的要求和可靠

4、性的要求。 3、 確定網(wǎng)站維護的要求。 4、 網(wǎng)站的實際運行環(huán)境。 5、 網(wǎng)站頁面總體風(fēng)格以及美工效果。6、 主頁面和次級頁面數(shù)量等。7、 內(nèi)容管理及錄入任務(wù)的分配。 8、 各種頁面特殊效果及其數(shù)量（如flash等）。 9、 項目完成時間及進度。然后，調(diào)研結(jié)束之后對整個網(wǎng)站進行功能描述，并對網(wǎng)站進行總體規(guī)劃，接著逐步細(xì)化。例如：（本內(nèi)容為模板例文不得抄襲）選做的主題是旅游交通，并且選定題目為“玩轉(zhuǎn)西安”，其目的是做一個簡單的網(wǎng)站，介紹西安旅游的各個方面，提供一定的資訊信息，。進行一番調(diào)研之后，該網(wǎng)站整體站功能結(jié)構(gòu)圖如下：進入進入西安概況美食進入進入旅行社景點介紹大唐芙蓉園大唐芙蓉園大雁塔華清池

5、半坡遺址大雁塔華清池兵馬俑半坡遺址兵馬俑交通住宿風(fēng)俗文化首頁五、技術(shù)分析(一)建立布局 在這次的網(wǎng)頁設(shè)計中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweaver cs3是大多數(shù)人設(shè)計網(wǎng)頁的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個協(xié)調(diào)合理的頁面。1.點擊“ALT+F6”鍵，進入布局模式，插入布局表格。建立一個大概的布局。 2.使用背景圖片：選中該項，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。（二）網(wǎng)頁中的圖像圖像傳輸是WWW的真正魅力所在，

6、它與文字相比具有顯著的優(yōu)點：一是直觀，人眼觀看圖像時接受信息的速度遠(yuǎn)遠(yuǎn)超過觀看文字時接受信息的速度；二是能更清楚地表達細(xì)節(jié)內(nèi)容。正是由于這些優(yōu)點，所以在進行網(wǎng)頁設(shè)計時圖像很受歡迎。如果網(wǎng)頁做得像一幅風(fēng)景畫，瀏覽者一定會流連忘返（如果圖片很大，效果會適得其反）。 圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現(xiàn)在Internet Explorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。 （1）在網(wǎng)頁中插入圖像 利用Dreamweaver2004 cs3可以方便地在網(wǎng)頁中插入圖像，還可以設(shè)置圖像邊框、大

7、小、和位置，并且可以直接對圖像進行編輯。在網(wǎng)頁中加入圖像的操作非常簡單：1.新建一個空白網(wǎng)頁，把光標(biāo)定位在網(wǎng)頁的開始位置。2.打開“工具”菜單，選擇“圖片”菜單項，在子菜單中選擇“來自文件”菜單項，或者單擊工具欄中的圖片工具圖標(biāo)，彈出一個“圖片”對話框。3.在此對話框中單擊“瀏覽”按鈕，出現(xiàn)一個“選擇文件”對話框。4.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁中。在網(wǎng)頁中插入圖像后我們就可以對圖像的各種屬性進行設(shè)置了。（2）圖像的各種屬性設(shè)置1.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個快捷菜單，在菜單中選擇“圖片屬性”菜單

8、項，出現(xiàn)一個“圖片屬性”對話框.2.打開“外觀”選項卡。(1)設(shè)定圖像邊框粗細(xì)：在“外觀”選項卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。(2)設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時需要將圖像和文字分開，且兩者互不影響。比如在網(wǎng)頁左邊插入一幅圖像，要求右邊的文字就像沒有圖像時可以多行輸入，這就要通過設(shè)置圖像的環(huán)繞方式來實現(xiàn)。在網(wǎng)頁中圖像的環(huán)繞方式有兩種：左環(huán)繞：圖像在左邊，文本在圖像的右邊進行環(huán)繞。右環(huán)繞：圖像在右邊，文本在圖像的左邊進行環(huán)繞。在“外觀”選項卡的“布局”欄中打開“對齊方式”下拉列表框，選擇“左”選項，并單擊“確

9、定”按鈕，圖像就被設(shè)置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設(shè)置為右環(huán)繞方式。(3)編輯圖像大?。涸贒reamweaver2004 cs3中，當(dāng)在網(wǎng)頁中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動圖像邊框，可任意調(diào)整圖像的寬度和高度直到達到你滿意的尺寸。(4)設(shè)置圖像縮放比例：網(wǎng)頁設(shè)計的一個重要原則就是網(wǎng)頁的兼容性，對于不同的瀏覽器或者不同的分辨率，不管是800×600的窗口，還是1024×768的窗口，網(wǎng)頁都要能正常的顯示。設(shè)置圖像縮放比例

10、就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：1.選中網(wǎng)頁中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項，彈出一個“圖像屬性”對話框.2.在“大小”欄中選中“指定大小”復(fù)選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。外還可以在“外觀”選項卡的“水平間距”和“垂直間距”欄里進行設(shè)置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。（3）怎樣編輯網(wǎng)頁中

11、的圖像在Dreamweaver2004 cs3中，可以使用“圖片”工具欄中的各種工具對網(wǎng)頁中的圖像進行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。另外，為了使圖片更符合要求，我們還在photoshop cs3中隊所用的圖片進行了處理，使得圖片看起來更加精細(xì)美觀，符合我們的主題要求。（4）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁更美觀好看。網(wǎng)頁中使用背景圖像的具體步驟如下：1.新建一個空白網(wǎng)頁。2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“網(wǎng)頁屬性”，彈出“網(wǎng)頁屬性”對話框.

12、3.開“背景”選項卡。4.在“背景”選項卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個“選擇背景圖片”對話框。5.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個“選擇文件”對話框。6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊“確定”按鈕。這樣，所選圖片將作為整個網(wǎng)頁的背景，如果在第4步時同時選中“水印”復(fù)選框，背景圖片將顯示為特殊的水印效果，當(dāng)網(wǎng)頁滾動時，背景不動，只有網(wǎng)頁內(nèi)容滾動，產(chǎn)生一種透明層的效果，非常吸引人。 （5）插入flash動畫 關(guān)于 Flash 視頻 使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Fla

13、sh 視頻內(nèi)容插入 Web 頁面，而無需使用 Flash 創(chuàng)作工具。該命令可以插入 Flash 組件；當(dāng)您在瀏覽器中查看它時，它顯示所選擇的 Flash 視頻內(nèi)容以及一組播放控件。 （6）設(shè)置鼠標(biāo)經(jīng)過圖片，進行圖片交互再插入圖片的下拉菜單中有一項是“鼠標(biāo)經(jīng)過”，點擊這一項，會彈出一個對話框，在對話框中可以設(shè)置鼠標(biāo)經(jīng)過前的圖片和經(jīng)過時的圖片，選擇“確定”即可。（7）設(shè)置鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時，下方的目標(biāo)屬性被激活，輸入blank設(shè)置成在新窗口中打開網(wǎng)頁。我們設(shè)置了鏈接本站點的網(wǎng)頁頁面，同時也連接了外網(wǎng)，使得大家訪問頁面時能夠查詢更多詳細(xì)的信息，方便用戶

14、查詢。（8）設(shè)置圖片滾動使圖片在頁面連續(xù)滾動出現(xiàn)，其中某頁代碼如下：<div id=demo style="OVERFLOW: hidden; WIDTH: 998px; COLOR: #ffffff"> <table cellspacing=0 cellpadding=0 width="100%" border=0 cellspace="0"> <tbody> <tr> <td id=demo1 valign=top align="center"><

15、;table cellspacing=2 cellpadding=0 width="99%" border=0> <tbody align="center"> <tr class=border-hs><td><img src="素材/華清池.jpg" width="222" height="150" /></td><td><img src="素材/華清池2.jpg"width="22

16、2" height="150" /></td><td><img src="素材/華清池3.jpg" width="222" height="150" /></td><td><img src="素材/華清池4.jpg"width="222" height="150" /></td><td><img src="素材/華清池6.jpg&

17、quot; width="222" height="150" /></td><td><img src="素材/華清池5.jpg" width="222" height="150" /></td><td><img src="素材/華清池7.jpg" width="222" height="150" /></td><td><img s

18、rc="素材/華清池8.jpg" width="222" height="150" /></td><td><img src="素材/華清池9.jpg" width="222" height="150" /></td><td><img src="素材/華清池10.jpg" width="222" height="150" /></td&

19、gt;<td><img src="素材/華清池11.jpg" width="222" height="150" /></td><td><img src="素材/華清池12.jpg" width="222" height="150" /></td><td><img src="素材/華清池13.jpg" width="222" height="

20、;150" /></td><td><img src="素材/華清池14.jpg"width="222" height="150" /></td><td><img src="素材/華清池15.jpg" width="222" height="150" /></td><td><img src="素材/華清池17.jpg" width="

21、;222" height="150" /></td> </tr></tbody> </table></td> <td id=demo2 valign=top>&nbsp;</td> </tr></tbody> </table></div>六、創(chuàng)意分析 西安，古稱“長安”，是舉世聞名的世界四大文明古都之一，居中國古都之首，是中國歷史上建都時間最長、建都朝代最多、影響力最大的都城，是中華民族的搖籃、中華文明的發(fā)祥地、中華文化

22、的代表。西安，獨特的古今融合的完美城市。因此設(shè)計網(wǎng)站主要為瀏覽者展現(xiàn)西安魅力。為此，我們將這次網(wǎng)頁設(shè)計的主體定位在古典上，歷史文化和社會風(fēng)俗采用同一個背景顏色，是肅穆的古木色又結(jié)合現(xiàn)代建筑圖片，將西安的魅力展現(xiàn)在瀏覽者面前。各個頁面都有導(dǎo)航條設(shè)計、使瀏覽者在任意頁面均可到達他想到達的景點介紹和交通住宿情況頁面，增強了頁面的友好程度。采用布局模式，對各個方面進行控制。網(wǎng)站首頁：景點介紹首頁：美食首頁：七、制作過程及要點網(wǎng)站首頁和風(fēng)俗文化部分的制作。主要從西安概況、歷史沿革、氣候環(huán)境、經(jīng)濟狀況、行政區(qū)劃五部分進行介紹。美食部分主要對西安的十大著名小吃進行了介紹，比如有羊肉泡饃，灌湯包子、黃桂稠酒、

23、肉夾饃、餃子宴等，再分頁面中分別對其進行了詳細(xì)的介紹，其中包括做法、特色、歷史特色等方面。另外，還介紹了一些飲食小常識和西安飲食新聞，其中飲食小常識用的是內(nèi)部鏈接，西安飲食新聞用的是外網(wǎng)連接，可以為讀者提供更多的信息。考慮到世界杯的舉行，在美食部分還添加了世界杯美食的頁面，選用外網(wǎng)連接，向大家介紹更多的南非美食，讓大家一飽眼福。旅行社部分使用的是框架結(jié)構(gòu)，主要介紹了四個西安旅行社：西安天馬國際旅行社、西安中國國際旅行社、西安凱萊旅行社、中國康輝西安國際旅行社。分別介紹了他們的基本情況，包括他們的公司運轉(zhuǎn)情況、服務(wù)質(zhì)量，好評度以及聯(lián)系方式和地址等情況。 景點介紹部分對其大唐芙蓉園、大雁塔、華清池、半坡遺址、兵馬俑等西安著名景點詳細(xì)介紹；以及翠華