網(wǎng)制作課程設(shè)計(jì)報(bào)告

網(wǎng)頁(yè)制作課程設(shè)計(jì)報(bào)告學(xué)院：專業(yè)班級(jí)：姓名：學(xué)號(hào)：成績(jī)：閱卷教師：目錄1.設(shè)計(jì)目的 12.設(shè)計(jì)思想 12.1網(wǎng)站整體結(jié)構(gòu)規(guī)劃思想 12.2主頁(yè)設(shè)計(jì)思想 12.3子頁(yè)的設(shè)計(jì)思想 13網(wǎng)頁(yè)具體設(shè)計(jì)分析 14結(jié)論 11.設(shè)計(jì)目的

闡述該個(gè)人網(wǎng)站的設(shè)計(jì)意圖和創(chuàng)意，簡(jiǎn)樸介紹自己的個(gè)人網(wǎng)站。2.設(shè)計(jì)思想闡述網(wǎng)站的整體設(shè)計(jì)思想，涉及：2.1網(wǎng)站整體結(jié)構(gòu)規(guī)劃思想規(guī)定闡述網(wǎng)站整體結(jié)構(gòu)的選擇、設(shè)計(jì)的思想，繪制網(wǎng)站結(jié)構(gòu)草圖。2.2主頁(yè)設(shè)計(jì)思想規(guī)定對(duì)主頁(yè)的布局思緒進(jìn)行闡述和分析。2.3子頁(yè)的設(shè)計(jì)思想規(guī)定對(duì)子頁(yè)的設(shè)計(jì)以及網(wǎng)頁(yè)對(duì)象的選取思緒進(jìn)行闡述和分析。3網(wǎng)頁(yè)具體設(shè)計(jì)分析規(guī)定選取一張網(wǎng)頁(yè)，對(duì)網(wǎng)頁(yè)的設(shè)計(jì)實(shí)現(xiàn)過程進(jìn)行闡述和分析，具體說明制作該網(wǎng)頁(yè)的環(huán)節(jié)，所使用的網(wǎng)頁(yè)對(duì)象以及該網(wǎng)頁(yè)對(duì)象的操作方法。4結(jié)論對(duì)整個(gè)設(shè)計(jì)報(bào)告做歸納性總結(jié)，并分析設(shè)計(jì)過程中的困難及如何解決的，最后提出展望。一、設(shè)計(jì)目的本課程的設(shè)計(jì)目的是通過實(shí)踐使同學(xué)們經(jīng)歷Dreamweavercs3開發(fā)的全過程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)。結(jié)合具體的開發(fā)案例，理解并初步掌握運(yùn)用Dreamweavercs3可視化開發(fā)工具進(jìn)行網(wǎng)頁(yè)開發(fā)的方法；了解網(wǎng)頁(yè)設(shè)計(jì)制作過程。通過設(shè)計(jì)達(dá)成掌握網(wǎng)頁(yè)設(shè)計(jì)、制作的技巧。了解和熟悉網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和實(shí)現(xiàn)技巧。根據(jù)題目的規(guī)定，給出網(wǎng)頁(yè)設(shè)計(jì)方案，可以按規(guī)定，運(yùn)用合適圖文素材設(shè)計(jì)制作符合規(guī)定的網(wǎng)頁(yè)設(shè)計(jì)作品。純熟掌握Photoshopcs3、Dreamweavercs3等軟件的的操作和應(yīng)用。增強(qiáng)動(dòng)手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。我本次重要是設(shè)計(jì)的一“新加坡之旅”為主題的網(wǎng)頁(yè)，針對(duì)新加坡的美麗風(fēng)景做了介紹。二、設(shè)計(jì)思想運(yùn)用Dreamweaver8.0制作一個(gè)關(guān)于“新加坡之旅”的網(wǎng)站，運(yùn)用表格、行為、層和鏈接等網(wǎng)頁(yè)設(shè)計(jì)技術(shù)設(shè)計(jì)頁(yè)面。本網(wǎng)站以新加坡旅游為素材，重要講解了與新加坡景點(diǎn)相關(guān)的內(nèi)容。首頁(yè)設(shè)風(fēng)景介紹和風(fēng)景欣賞兩個(gè)欄目。景點(diǎn)介紹設(shè)7個(gè)欄目，風(fēng)景欣賞只含一個(gè)頁(yè)面。具體結(jié)構(gòu)如圖1.1所示。首頁(yè)首頁(yè)風(fēng)景欣賞風(fēng)景欣賞景點(diǎn)介紹景點(diǎn)介紹烏敏島小印度牛車水花柏山烏敏島小印度牛車水花柏山魚尾獅公園夜間野生動(dòng)物園萊佛士大酒店魚尾獅公園夜間野生動(dòng)物園萊佛士大酒店三、網(wǎng)頁(yè)具體設(shè)計(jì)分析(一)建立布局在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweavercs3是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的杰出表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個(gè)協(xié)調(diào)合理的頁(yè)面。1.點(diǎn)擊“ALT+F6”2.使用背景圖片：選中該項(xiàng)，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景，由于圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。（二）網(wǎng)頁(yè)中的圖像圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點(diǎn)：一是直觀，人眼觀看圖像時(shí)接受信息的速度遠(yuǎn)遠(yuǎn)超過觀看文字時(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ì)適得其反）。圖像文獻(xiàn)的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現(xiàn)在InternetExplorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。（1）在網(wǎng)頁(yè)中插入圖像運(yùn)用Dreamweavercs3可以方便地在網(wǎng)頁(yè)中插入圖像，還可以設(shè)立圖像邊框、大小、和位置，并且可以直接對(duì)圖像進(jìn)行編輯。在網(wǎng)頁(yè)中加入圖像的操作非常簡(jiǎn)樸：1.新建一個(gè)空白網(wǎng)頁(yè)，把光標(biāo)定位在網(wǎng)頁(yè)的開始位置。2.打開“工具”菜單，選擇“圖片”菜單項(xiàng)，在子菜單中選擇“來(lái)自文獻(xiàn)”菜單項(xiàng)，或者單擊工具欄中的圖片工具圖標(biāo)，彈出一個(gè)“圖片”對(duì)話框。3.在此對(duì)話框中單擊“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇文獻(xiàn)”對(duì)話框。4.在“選擇文獻(xiàn)”對(duì)話框的文獻(xiàn)列表中選擇某個(gè)圖像文獻(xiàn)，然后單擊“擬定”按鈕，或直接雙擊該圖像文獻(xiàn)，該圖像即被加入到網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中插入圖像后我們就可以對(duì)圖像的各種屬性進(jìn)行設(shè)立了。（2）圖像的各種屬性設(shè)立1.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個(gè)快捷菜單，在菜單中選擇“圖片屬性”菜單項(xiàng)，出現(xiàn)一個(gè)“圖片屬性”對(duì)話框.2.打開“外觀”選項(xiàng)卡。(1)設(shè)定圖像邊框粗細(xì)：在“外觀”選項(xiàng)卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”(2)設(shè)立圖像圍繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時(shí)需要將圖像和文字分開，且兩者互不影響。比如在網(wǎng)頁(yè)左邊插入一幅圖像，規(guī)定右邊的文字就像沒有圖像時(shí)可以多行輸入，這就要通過設(shè)立圖像的圍繞方式來(lái)實(shí)現(xiàn)。在網(wǎng)頁(yè)中圖像的圍繞方式有兩種：①左圍繞：圖像在左邊，文本在圖像的右邊進(jìn)行圍繞。②右圍繞：圖像在右邊，文本在圖像的左邊進(jìn)行圍繞。在“外觀”選項(xiàng)卡的“布局”欄中打開“對(duì)齊方式”下拉列表框，選擇“左”選項(xiàng)，并單擊“擬定”按鈕，圖像就被設(shè)立為左圍繞方式，同樣，假如選“右”，圖像就被設(shè)立為右圍繞方式。(3)編輯圖像大小：在Dreamweavercs3中，當(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è)立圖像縮放比例的環(huán)節(jié)如下：1.選中網(wǎng)頁(yè)中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項(xiàng)，彈出一個(gè)“圖像屬性”對(duì)話框.2.在“大小”欄中選中“指定大小”復(fù)選框，同時(shí)選中“寬度”和“高度”下面的“比例”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“擬定”完畢設(shè)立。外還可以在“外觀”選項(xiàng)卡的“水平間距”和“垂直間距”欄里進(jìn)行設(shè)立，水平間距是指圖像與周邊元素在水平方向的間距，以象素為單位；垂直間距指圖像與周邊元素在垂直方向的間距。（3）如何編輯網(wǎng)頁(yè)中的圖像在Dreamweavercs3中，可以使用“圖片”工具欄中的各種工具對(duì)網(wǎng)頁(yè)中的圖像進(jìn)行編輯，編輯功能重要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。此外，為了使圖片更符合規(guī)定，我們還在photoshopcs3中隊(duì)所用的圖片進(jìn)行了解決，使得圖片看起來(lái)更加精細(xì)美觀，符合我們的主題規(guī)定。（4）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁(yè)的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁(yè)的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁(yè)更美觀好看。網(wǎng)頁(yè)中使用背景圖像的具體環(huán)節(jié)如下：1.新建一個(gè)空白網(wǎng)頁(yè)。2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“網(wǎng)頁(yè)屬性”，彈出“網(wǎng)頁(yè)屬性”對(duì)話框.3.開“背景”選項(xiàng)卡。4.在“背景”選項(xiàng)卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇背景圖片”對(duì)話框。5.在“選擇背景圖像”對(duì)話框中單擊“瀏覽文獻(xiàn)”按鈕，出現(xiàn)一個(gè)“選擇文獻(xiàn)”對(duì)話框。6.在“選擇文獻(xiàn)”對(duì)話框的文獻(xiàn)列表中選擇圖像文獻(xiàn)，單擊“擬定”按鈕。這樣，所選圖片將作為整個(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)生一種透明層的效果，非常吸引人。（5）插入flash動(dòng)畫關(guān)于Flash視頻使用Dreamweaver中的“插入Flash視頻”命令，可將Flash視頻內(nèi)容插入Web頁(yè)面，而無(wú)需使用Flash創(chuàng)作工具。該命令可以插入Flash組件；當(dāng)您在瀏覽器中查看它時(shí)，它顯示所選擇的Flash視頻內(nèi)容以及一組播放控件。（6）設(shè)立鼠標(biāo)通過圖片，進(jìn)行圖片交互再插入圖片的下拉菜單中有一項(xiàng)是“鼠標(biāo)通過”，點(diǎn)擊這一項(xiàng)，會(huì)彈出一個(gè)對(duì)話框，在對(duì)話框中可以設(shè)立鼠標(biāo)通過前的圖片和通過時(shí)的圖片，選擇“擬定”即可。（7）設(shè)立鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時(shí)，下方的目的屬性被激活，輸入blank設(shè)立成在新窗口中打開網(wǎng)頁(yè)。我們?cè)O(shè)立了鏈接本站點(diǎn)的網(wǎng)頁(yè)頁(yè)面，同時(shí)也連接了外網(wǎng)，使得大家訪問頁(yè)面時(shí)可以查詢更多具體的信息，方便用戶查詢。四、結(jié)論通過這次網(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)，通過自身的實(shí)踐，創(chuàng)作出積聚個(gè)人風(fēng)格、個(gè)性的個(gè)人網(wǎng)頁(yè)?？傮w來(lái)說，整個(gè)學(xué)期的學(xué)習(xí)過程，我學(xué)會(huì)了很多知識(shí)，在本次網(wǎng)頁(yè)設(shè)計(jì)中，我充足運(yùn)用了這次設(shè)計(jì)的機(jī)會(huì)，全心全意投入到網(wǎng)頁(yè)世界，去不斷的學(xué)習(xí)，去不斷的探索；同時(shí)去不斷的充實(shí)，去不斷的完善自我，在網(wǎng)絡(luò)的天空下逐漸的美化自己的人生！做好頁(yè)面，并不是一件容易的事，它涉及個(gè)人主頁(yè)的選題、內(nèi)容采集整理、圖片的解決、頁(yè)面的排