網(wǎng)頁制作課程設(shè)計報告材料

1、網(wǎng)頁制作課程設(shè)計報告學(xué)院：專業(yè)班級：姓名：學(xué)號：成績：閱卷教師：目錄1. 設(shè)計目的1.2. 設(shè)計思想 1.2.1網(wǎng)站整體結(jié)構(gòu)規(guī)劃思想 12.2主頁設(shè)計思想12.3子頁的設(shè)計思想13網(wǎng)頁詳細(xì)設(shè)計分析14結(jié)論2.1. 設(shè)計目的闡述該個人網(wǎng)站的設(shè)計意圖和創(chuàng)意，簡單介紹自己的個人網(wǎng)站。2. 設(shè)計思想闡述網(wǎng)站的整體設(shè)計思想，包括：2.1網(wǎng)站整體結(jié)構(gòu)規(guī)劃思想要求闡述網(wǎng)站整體結(jié)構(gòu)的選擇、設(shè)計的思想，繪制網(wǎng)站結(jié)構(gòu)草圖。2.2主頁設(shè)計思想要求對主頁的布局思路進(jìn)行闡述和分析。2.3子頁的設(shè)計思想要求對子頁的設(shè)計以及網(wǎng)頁對象的選取思路進(jìn)行闡述和分析。3網(wǎng)頁詳細(xì)設(shè)計分析詳細(xì)說明制作該網(wǎng)頁的步要求選取一張網(wǎng)頁， 對網(wǎng)頁

2、的設(shè)計實(shí)現(xiàn)過程進(jìn)行闡述和分析，驟，所使用的網(wǎng)頁對象以及該網(wǎng)頁對象的操作方法。4結(jié)論對整個設(shè)計報告做歸納性總結(jié)，并分析設(shè)計過程中的困難及如何解決的，最后提出展望。一、設(shè)計目的本課程的設(shè)計目的是通過實(shí)踐使同學(xué)們經(jīng)歷Dreamweaver cs3開發(fā)的全過程和受到一次綜合訓(xùn)練，以 便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識。結(jié)合具體 的開發(fā)案例，理解并初步掌握運(yùn)用Dreamweaver cs3 可視化開發(fā)工具進(jìn)行網(wǎng)頁開發(fā)的方法；了解網(wǎng)頁設(shè)計制作過程。 通過設(shè)計達(dá)到掌握網(wǎng)頁設(shè)計、制作的技巧。了解和熟悉網(wǎng)頁 設(shè)計的基礎(chǔ)知識和實(shí)現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁設(shè) 計方案，可以按要求，利用合適圖文素材設(shè)計制

3、作符合要求的網(wǎng)頁設(shè)計作品。熟練掌握 Photoshop cs3 、Dreamweavercs3等軟件的的操作和應(yīng)用。增強(qiáng)動手實(shí)踐能力，進(jìn)一步加 強(qiáng)自身綜合素質(zhì)。我本次主要是設(shè)計的一“新加坡之旅”為 主題的網(wǎng)頁，針對新加坡的美麗風(fēng)景做了介紹。1、設(shè)計思想利用Dreamweaver8.0 制作一個關(guān)于“新加坡之旅” 的網(wǎng)站，利用表格、行為、層和鏈接等網(wǎng)頁設(shè)計技術(shù)設(shè)計頁 面。本網(wǎng)站以新加坡旅游為素材，主要講解了與新加坡景 點(diǎn)相關(guān)的內(nèi)容。首頁設(shè)風(fēng)景介紹和風(fēng)景欣賞兩個欄目。景點(diǎn) 介紹設(shè)7個欄目，風(fēng)景欣賞只含一個頁面。具體結(jié)構(gòu)如圖1.1 所示。風(fēng)景欣賞三、網(wǎng)頁詳細(xì)設(shè)計分析（一）建立布局在這次的網(wǎng)頁設(shè)計中用

4、到大量的布局，所以怎么樣建立 布局是關(guān)鍵。Dreamweaver cs3 是大多數(shù)人設(shè)計網(wǎng)頁的稱 手兵器，也是眾多入門者的捷徑。特別是其在布局方面的 出色表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很 難組織出一個協(xié)調(diào)合理的頁面。1. 點(diǎn)擊“ ALT+F6 ”鍵，進(jìn)入布局模式，插入布局表格。 建立一個大概的布局。2. 使用背景圖片：選中該項，按瀏覽可以插入一幅準(zhǔn)備 好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。（二）網(wǎng)頁中的圖像圖像傳輸是 WWW 的真正魅力所在，它與文字相比具 有顯著的優(yōu)點(diǎn)：一是直觀，人眼觀看圖像時接受信息的速 度遠(yuǎn)遠(yuǎn)超過觀看文

5、字時接受信息的速度；二是能更清楚地 表達(dá)細(xì)節(jié)內(nèi)容。正是由于這些優(yōu)點(diǎn)，所以在進(jìn)行網(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)頁中插入圖像利用Dreamweaver cs3可以方便地在網(wǎng)頁中插入圖像， 還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對圖 像進(jìn)行編輯。在網(wǎng)頁中加入圖像的操作非常簡單：

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

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

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

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

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

11、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視頻”命令，可將F

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

13、詢新加坡的標(biāo)志與象征 新加坡是東南亞的一個島國， 也是一個城市國家。該也位于 馬來半島南端，毗鄰馬六甲的 南口，其南而有新加坡海峽與 印尼相隔，北面有柔佛海峽與 馬來西亞相隔，并以長堤相連 于新馬曲岸之間.新加坡是亞 洲垠重要的金融、服務(wù)和航運(yùn) 中心之一.新加坡在城市保潔 方血效果顯著，故亦有花園 城市稼之美稱口寫敏島 花柏山 牛車水 葉佛土大酒店 夜間野生動物園 小印康盤尾狎公園四、結(jié)論通過這次網(wǎng)頁課程設(shè)計激發(fā)學(xué)習(xí)興趣，調(diào)動學(xué)習(xí)的自覺性，自己動腦、動手，動口，運(yùn)用網(wǎng)絡(luò)資源，結(jié)合教材及 老師的指導(dǎo)，通過自身的實(shí)踐，創(chuàng)作出積聚個人風(fēng)格、個性 的個人網(wǎng)頁?？傮w來說，整個學(xué)期的學(xué)習(xí)過程，我學(xué)會了很 多知識，在此次網(wǎng)頁設(shè)計中，我充分利用了這次設(shè)計的機(jī)會， 全心全意投入到網(wǎng)頁世界，去不斷的學(xué)習(xí)，去不斷的探索； 同時去不斷的充實(shí)，去不斷的完善自我，在網(wǎng)絡(luò)的天空下逐 漸的美化自己的人生!做好頁面，并不是一件容易的事，它包括個人主頁的選 題、內(nèi)容采集整理、圖片的處理、頁面的排版設(shè)