網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告-9

網(wǎng)頁(yè)設(shè)計(jì)報(bào)告班級(jí):計(jì)算機(jī)08－5班學(xué)號(hào):0804010508姓名:白露一.設(shè)計(jì)意義:網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)是教學(xué)過(guò)程中重要的實(shí)踐性教學(xué)環(huán)節(jié).它是根據(jù)專(zhuān)業(yè)教學(xué)計(jì)劃的要求,在教師的指導(dǎo)下對(duì)學(xué)生進(jìn)行網(wǎng)頁(yè)制作專(zhuān)業(yè)技能的訓(xùn)練,培養(yǎng)學(xué)生綜合運(yùn)用理論知識(shí)分析和解決實(shí)際問(wèn)題的能力,實(shí)現(xiàn)由理論知識(shí)向操作技能的轉(zhuǎn)化,是對(duì)理論與實(shí)踐教學(xué)效果的檢驗(yàn),也是對(duì)學(xué)生綜合分析能力與獨(dú)立工作能力的培養(yǎng)過(guò)程.因此加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié),搞好實(shí)訓(xùn)教學(xué),對(duì)實(shí)現(xiàn)本專(zhuān)業(yè)的培養(yǎng)目標(biāo),提高學(xué)生的綜合素質(zhì)有著重要的作用。二.設(shè)計(jì)目的:本課程的設(shè)計(jì)目的是通過(guò)實(shí)踐使同學(xué)們經(jīng)歷Dreamweavercs3開(kāi)發(fā)的全過(guò)程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)。結(jié)合具體的開(kāi)發(fā)案例，理解并初步掌握運(yùn)用Dreamweavercs3可視化開(kāi)發(fā)工具進(jìn)行網(wǎng)頁(yè)開(kāi)發(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ì)作品。熟練掌握Photoshopcs3、Dreamweavercs3等軟件的的操作和應(yīng)用。增強(qiáng)動(dòng)手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。學(xué)會(huì)和團(tuán)隊(duì)配合，逐漸培養(yǎng)做一個(gè)完整項(xiàng)目的能力。1．通過(guò)綜合實(shí)訓(xùn)進(jìn)一步鞏固，深化和拓展學(xué)生的理論知識(shí)與專(zhuān)業(yè)技能。(1)掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu)，目錄結(jié)構(gòu),鏈接結(jié)構(gòu)的方法。(2)熟練掌握網(wǎng)頁(yè)制作軟件FrontPage2003和的基本操作和使用技能。(3)掌握頁(yè)面的整體控制和頭部?jī)?nèi)容設(shè)置的方法。(4)熟練掌握網(wǎng)頁(yè)頁(yè)面布局的各種方法。(5)熟練掌握在網(wǎng)頁(yè)中輸入,設(shè)置標(biāo)題和正文文字的方法。(6)熟練掌握在網(wǎng)頁(yè)中插入圖象,flash動(dòng)畫(huà)和背景音樂(lè)的方法。(7)熟練建立各種形式的超級(jí)鏈接的方法。(8)掌握表單網(wǎng)頁(yè)制作方法。(9)掌握網(wǎng)頁(yè)特效制作方法。(10)掌握網(wǎng)站測(cè)試的方法。2.訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力,充分培養(yǎng)和提高學(xué)生的動(dòng)手能力,學(xué)會(huì)通過(guò)網(wǎng)站、書(shū)籍、素材光盤(pán)等方式收集所需的文字資料、圖象資料、flash動(dòng)畫(huà)和網(wǎng)頁(yè)特效等。3.培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識(shí)和技能解決網(wǎng)站開(kāi)發(fā)過(guò)程中所遇到的實(shí)際問(wèn)題的能力及其基本工作素質(zhì)。4.培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng),嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力,樹(shù)立自信心。三．設(shè)計(jì)步驟：1、網(wǎng)站主題我的網(wǎng)站的主旨在于從各個(gè)方面全面的介紹我自己，展示自己，包括我的個(gè)人資料、個(gè)人相片和愛(ài)好。另外，網(wǎng)站里還包括我的好友和好友資料，建立一個(gè)展示自我形象的平臺(tái)。同時(shí)，網(wǎng)站里的每一個(gè)網(wǎng)頁(yè)都有統(tǒng)一的風(fēng)格，每一個(gè)網(wǎng)頁(yè)的主題色彩都是淺紅色，用以展示自己性格的效果。最重要的是做出自己的風(fēng)格，給瀏覽者好的欣賞感受。2、網(wǎng)站材料主要在網(wǎng)站上搜集所要的網(wǎng)頁(yè)信息，包括圖片、文字、相關(guān)的新聞。同時(shí)，查詢(xún)相關(guān)的書(shū)籍、百度和素材光盤(pán)等方式收集所需的文字資料,圖象資料,flash動(dòng)畫(huà)和網(wǎng)頁(yè)特效等，用以得來(lái)更加具有說(shuō)服力的頁(yè)面。要想做好自己的網(wǎng)站，能夠給瀏覽者好的欣賞感受，就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。精選自己收集的材料，作為自己制作網(wǎng)頁(yè)的素材，這樣就可以做好一個(gè)好的網(wǎng)站。3、網(wǎng)站規(guī)劃我的網(wǎng)站內(nèi)容是聆聽(tīng)世界的聲音。把各個(gè)國(guó)家的代表性的東西都體現(xiàn)出來(lái)，創(chuàng)建鏈接。每一個(gè)頁(yè)面用統(tǒng)一的背景圖片，以保證網(wǎng)站統(tǒng)一的頁(yè)面風(fēng)格。如下圖：我是用一個(gè)女孩聽(tīng)音樂(lè)的圖片來(lái)作為主背景，這樣可以表達(dá)出聆聽(tīng)世界聲音的主題。網(wǎng)站整體色調(diào)為淺色，然后點(diǎn)綴其他不同的顏色相配，突出主題，顏色沒(méi)有過(guò)多，過(guò)雜，用以避免給人一種雜亂的感覺(jué)。版面設(shè)計(jì)十分靈活，根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。網(wǎng)頁(yè)布局主要用框架和表格，用框架定位內(nèi)容的大體結(jié)構(gòu)。位子的設(shè)計(jì)也是重要的一個(gè)部分，根據(jù)具體內(nèi)容決定字體風(fēng)格，相同的風(fēng)格多次調(diào)用是用css設(shè)計(jì)一個(gè)樣式，以保證隨時(shí)、準(zhǔn)確的調(diào)用。另外，為了網(wǎng)頁(yè)布局的協(xié)調(diào)。4、網(wǎng)站的制作工具做網(wǎng)頁(yè)時(shí)主要使用的是FrontPage2003，但我還使用了Deamweaver。另外，為了處理網(wǎng)頁(yè)中的其他元素，還使用了Photoshop、GifAnimator等軟件。5、制作網(wǎng)站的網(wǎng)頁(yè)素材、風(fēng)格、模板都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁(yè)。制作網(wǎng)站時(shí)，首先要做的就是站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)“mysite”，建立的各個(gè)頁(yè)面都應(yīng)該放在本地站點(diǎn)中，在網(wǎng)頁(yè)制作時(shí)所需的各個(gè)元素都進(jìn)行了統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類(lèi)型的文件，我在制作時(shí)建立了“tupian”文件夾來(lái)存放圖片。同時(shí)，由于“相冊(cè)”頁(yè)面中的信息太多，于是建立了一個(gè)專(zhuān)門(mén)的文件夾存放相冊(cè)信息，網(wǎng)頁(yè)中的css樣式文件也應(yīng)統(tǒng)一管理，做到有條不紊，我設(shè)計(jì)的網(wǎng)站的首頁(yè)如下圖：根據(jù)自己的網(wǎng)頁(yè)風(fēng)格，在網(wǎng)上搜集合適的圖片，另外網(wǎng)頁(yè)的頁(yè)寬一般沒(méi)有超過(guò)900像素，以保證左右不出現(xiàn)滾動(dòng)條。用以體現(xiàn)網(wǎng)站的主題色彩，表格還定位了網(wǎng)頁(yè)特效、系統(tǒng)時(shí)間和flash動(dòng)畫(huà)。網(wǎng)頁(yè)特效為上下滾動(dòng)的字幕，當(dāng)鼠標(biāo)停在字幕上時(shí)，字幕停止?jié)L動(dòng)。這個(gè)主頁(yè)面和上面的一樣，都插入了交互式按鈕，既突出網(wǎng)站的主色調(diào)，又給人以凝重的感覺(jué)，目的都是增加網(wǎng)頁(yè)的可看性。點(diǎn)擊了聆聽(tīng)世界的聲音之后，就會(huì)鏈接到另一個(gè)頁(yè)面上，這樣實(shí)現(xiàn)子鏈接。如下圖：表單的制作過(guò)程：首先打開(kāi)FronrPage2003,再新建網(wǎng)頁(yè)，單擊插入按鈕，在插入按鈕中選擇表單，最后插入表單的各個(gè)屬性就可以完成表單的插入了。在點(diǎn)擊中國(guó)后，就可以彈出中國(guó)的文化特色，可以讓用戶(hù)了解自己想了解的國(guó)家內(nèi)容。點(diǎn)擊后的頁(yè)面如下：6、上傳測(cè)試網(wǎng)站網(wǎng)頁(yè)制作完畢以后，要進(jìn)行反復(fù)的測(cè)試，保存后在IE瀏覽器上反復(fù)運(yùn)行自己的網(wǎng)站，用以發(fā)現(xiàn)設(shè)計(jì)中的缺陷并及時(shí)改正。四．技術(shù)分析(一)建立布局在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweavercs3是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱(chēng)手兵器，也是眾多入門(mén)者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒(méi)有表格的幫助，很難組織出一個(gè)協(xié)調(diào)合理的頁(yè)面。1.點(diǎn)擊“ALT+F6”鍵，進(jìn)入布局模式，插入布局表格。建立一個(gè)大概的布局。2.使用背景圖片：選中該項(xiàng)，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景，因?yàn)閳D片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。（二）網(wǎng)頁(yè)中的圖像圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點(diǎn)：一是直觀，人眼觀看圖像時(shí)接受信息的速度遠(yuǎn)遠(yuǎn)超過(guò)觀看文字時(shí)接受信息的速度；二是能更清楚地表達(dá)細(xì)節(jié)內(nèi)容。正是由于這些優(yōu)點(diǎn)，所以在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)圖像很受歡迎。如果網(wǎng)頁(yè)做得像一幅風(fēng)景畫(huà)，瀏覽者一定會(huì)流連忘返（如果圖片很大，效果會(huì)適得其反）。圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現(xiàn)在InternetExplorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。（1）在網(wǎng)頁(yè)中插入圖像利用Dreamweavercs3可以方便地在網(wǎng)頁(yè)中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對(duì)圖像進(jìn)行編輯。在網(wǎng)頁(yè)中加入圖像的操作非常簡(jiǎn)單：1.新建一個(gè)空白網(wǎng)頁(yè)，把光標(biāo)定位在網(wǎng)頁(yè)的開(kāi)始位置。2.打開(kāi)“工具”菜單，選擇“圖片”菜單項(xiàng)，在子菜單中選擇“來(lái)自文件”菜單項(xiàng)，或者單擊工具欄中的圖片工具圖標(biāo)，彈出一個(gè)“圖片”對(duì)話框。3.在此對(duì)話框中單擊“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話框。4.在“選擇文件”對(duì)話框的文件列表中選擇某個(gè)圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中插入圖像后我們就可以對(duì)圖像的各種屬性進(jìn)行設(shè)置了。（2）圖像的各種屬性設(shè)置1.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個(gè)快捷菜單，在菜單中選擇“圖片屬性”菜單項(xiàng)，出現(xiàn)一個(gè)“圖片屬性”對(duì)話框.2.打開(kāi)“外觀”選項(xiàng)卡。(1)設(shè)定圖像邊框粗細(xì)：在“外觀”選項(xiàng)卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無(wú)邊框。(2)設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時(shí)需要將圖像和文字分開(kāi)，且兩者互不影響。比如在網(wǎng)頁(yè)左邊插入一幅圖像，要求右邊的文字就像沒(méi)有圖像時(shí)可以多行輸入，這就要通過(guò)設(shè)置圖像的環(huán)繞方式來(lái)實(shí)現(xiàn)。在網(wǎng)頁(yè)中圖像的環(huán)繞方式有兩種：①左環(huán)繞：圖像在左邊，文本在圖像的右邊進(jìn)行環(huán)繞。②右環(huán)繞：圖像在右邊，文本在圖像的左邊進(jìn)行環(huán)繞。在“外觀”選項(xiàng)卡的“布局”欄中打開(kāi)“對(duì)齊方式”下拉列表框，選擇“左”選項(xiàng)，并單擊“確定”按鈕，圖像就被設(shè)置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設(shè)置為右環(huán)繞方式。(3)編輯圖像大?。涸贒reamweavercs3中，當(dāng)在網(wǎng)頁(yè)中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來(lái)的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡(jiǎn)單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動(dòng)圖像邊框，可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿意的尺寸。(4)設(shè)置圖像縮放比例：網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)重要原則就是網(wǎng)頁(yè)的兼容性，對(duì)于不同的瀏覽器或者不同的分辨率，不管是800×600的窗口，還是1024×768的窗口，網(wǎng)頁(yè)都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：1.選中網(wǎng)頁(yè)中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項(xiàng)，彈出一個(gè)“圖像屬性”對(duì)話框.2.在“大小”欄中選中“指定大小”復(fù)選框，同時(shí)選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。外還可以在“外觀”選項(xiàng)卡的“水平間距”和“垂直間距”欄里進(jìn)行設(shè)置，水平間距是指圖像與周?chē)卦谒椒较虻拈g距，以象素為單位；垂直間距指圖像與周?chē)卦诖怪狈较虻拈g距。（3）怎樣編輯網(wǎng)頁(yè)中的圖像在Dreamweavercs3中，可以使用“圖片”工具欄中的各種工具對(duì)網(wǎng)頁(yè)中的圖像進(jìn)行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。另外，為了使圖片更符合要求，我們還在photoshopcs3中隊(duì)所用的圖片進(jìn)行了處理，使得圖片看起來(lái)更加精細(xì)美觀，符合我們的主題要求。（4）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁(yè)的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁(yè)的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁(yè)更美觀好看。網(wǎng)頁(yè)中使用背景圖像的具體步驟如下：1.新建一個(gè)空白網(wǎng)頁(yè)。2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“網(wǎng)頁(yè)屬性”，彈出“網(wǎng)頁(yè)屬性”對(duì)話框.3.開(kāi)“背景”選項(xiàng)卡。4.在“背景”選項(xiàng)卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇背景圖片”對(duì)話框。5.在“選擇背景圖像”對(duì)話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話框。6.在“選擇文件”對(duì)話框的文件列表中選擇圖像文件，單擊“確定”按鈕。這樣，所選圖片將作為整個(gè)網(wǎng)頁(yè)的背景，如果在第4步時(shí)同時(shí)選中“水印”復(fù)選框，背景圖片將顯示為特殊的水印效果，當(dāng)網(wǎng)頁(yè)滾動(dòng)時(shí)，背景不動(dòng)，只有網(wǎng)頁(yè)內(nèi)容滾動(dòng)，產(chǎn)生一種透明層的效果，非常吸引人。五．心得體會(huì)第一：我非常感謝學(xué)校給了我這次制作網(wǎng)頁(yè)的機(jī)會(huì)，通過(guò)這次實(shí)訓(xùn)，我學(xué)到了很多有價(jià)值的東西。我獨(dú)立的完成了網(wǎng)站設(shè)計(jì)的全過(guò)程，把設(shè)計(jì)中散亂的網(wǎng)頁(yè)鏈接成框架體系，使平時(shí)學(xué)到的知識(shí)點(diǎn)有了很高的提高，并且合理的在試驗(yàn)中進(jìn)行了實(shí)踐。第二：在這次實(shí)驗(yàn)的過(guò)程中，我搜集