《網(wǎng)頁制作課程設計報告.doc》由會員分享，可在線閱讀，更多相關《網(wǎng)頁制作課程設計報告.doc（16頁珍藏版）》請在裝配圖網(wǎng)上搜索。

網(wǎng)頁制作課程設計報告 學院： 專業(yè)班級： 姓名： 學號： 成績： 閱卷教師： 目錄 1.設計目的 1 2.設計思想 1 2.1網(wǎng)站整體結構規(guī)劃思想 1 2.2 主頁設計思想 1 2.3子頁的設計思想 1 3網(wǎng)頁詳細設計分析 1 4結論 1 1.設計目的 闡述該個人網(wǎng)站的設計意圖和創(chuàng)意，簡單介紹自己的個人網(wǎng)站。 2.設計思想 闡述網(wǎng)站的整體設計思想，包括： 2.1網(wǎng)站整體結構規(guī)劃思想 要求闡述網(wǎng)站整體結構的選擇、設計的思想，繪制網(wǎng)站結構草圖。 2.2 主頁設計思想 要求對主頁的布局思路進行闡述和分析。 2.3子頁的設計思想 要求對子頁的設計以及網(wǎng)頁對象的選取思路進行闡述和分析。 3網(wǎng)頁詳細設計分析 要求選取一張網(wǎng)頁，對網(wǎng)頁的設計實現(xiàn)過程進行闡述和分析，詳細說明制作該網(wǎng)頁的步驟，所使用的網(wǎng)頁對象以及該網(wǎng)頁對象的操作方法。 4結論 對整個設計報告做歸納性總結，并分析設計過程中的困難及如何解決的，最后提出展望。 一、設計目的 本課程的設計目的是通過實踐使同學們經(jīng)歷Dreamweaver cs3開發(fā)的全過程和受到一次綜合訓練，以便能較全面地理解、掌握和綜合運用所學的知識。結合具體的開發(fā)案例，理解并初步掌握運用Dreamweaver cs3可視化開發(fā)工具進行網(wǎng)頁開發(fā)的方法；了解網(wǎng)頁設計制作過程。通過設計達到掌握網(wǎng)頁設計、制作的技巧。了解和熟悉網(wǎng)頁設計的基礎知識和實現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁設計方案，可以按要求，利用合適圖文素材設計制作符合要求的網(wǎng)頁設計作品。熟練掌握Photoshop 、Dreamweaver 等軟件的的操作和應用。增強動手實踐能力，進一步加強自身綜合素質。我本次主要是設計的一“我的家鄉(xiāng)宿遷之旅”為主題的網(wǎng)頁，針對宿遷的美麗風景做了介紹。 二、設計思想 利用Dreamweaver8.0制作一個關于“我的家鄉(xiāng)宿遷之旅”的網(wǎng)站，利用表格、行為、層和鏈接等網(wǎng)頁設計計頁面。 本網(wǎng)站以新加坡旅游為素材，主要講解了與宿遷景點相關的內容。首頁設風景介紹和風景欣賞兩個欄目。景點介紹設7個欄目，風景欣賞只含一個頁面。具體結構如圖1.1所示。 首頁 風景欣賞 景點介紹 駱馬湖 雪楓公園 三臺山 嶂山森林公園 項王故里 洪澤湖濕地溫泉 乾隆行宮 三、網(wǎng)頁詳細設計分析 (一)建立布局 在這次的網(wǎng)頁設計中用到大量的布局，所以怎么樣建立布局是關鍵。Dreamweaver cs3是大多數(shù)人設計網(wǎng)頁的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個協(xié)調合理的頁面。 1.點擊“ALT+F6”鍵，進入布局模式，插入布局表格。建立一個大概的布局。 2.使用背景圖片：選中該項，按瀏覽可以插入一幅準備好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。 （二）網(wǎng)頁中的圖像 圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點：一是直觀，人眼觀看圖像時接受信息的速度遠遠超過觀看文字時接受信息的速度；二是能更清楚地表達細節(jié)內容。正是由于這些優(yōu)點，所以在進行網(wǎng)頁設計時圖像很受歡迎。如果網(wǎ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)頁中插入圖像，還可以設置圖像邊框、大小、和位置，并且可以直接對圖像進行編輯。在網(wǎng)頁中加入圖像的操作非常簡單： 1.新建一個空白網(wǎng)頁，把光標定位在網(wǎng)頁的開始位置。 2.打開“工具”菜單，選擇“圖片”菜單項，在子菜單中選擇“來自文件”菜單項，或者單擊工具欄中的圖片工具圖標，彈出一個“圖片”對話框。 3.在此對話框中單擊“瀏覽”按鈕，出現(xiàn)一個“選擇文件”對話框。 4.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁中。在網(wǎng)頁中插入圖像后我們就可以對圖像的各種屬性進行設置了。 （2）圖像的各種屬性設置 1.選中所插入的圖片，單擊鼠標右鍵，彈出一個快捷菜單，在菜單中選擇“圖片屬性”菜單項，出現(xiàn)一個“圖片屬性”對話框. 2.打開“外觀”選項卡。 (1)設定圖像邊框粗細：在“外觀”選項卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。 (2)設置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時需要將圖像和文字分開，且兩者互不影響。比如在網(wǎng)頁左邊插入一幅圖像，要求右邊的文字就像沒有圖像時可以多行輸入，這就要通過設置圖像的環(huán)繞方式來實現(xiàn)。在網(wǎng)頁中圖像的環(huán)繞方式有兩種： ①左環(huán)繞：圖像在左邊，文本在圖像的右邊進行環(huán)繞。 ②右環(huán)繞：圖像在右邊，文本在圖像的左邊進行環(huán)繞。 在“外觀”選項卡的“布局”欄中打開“對齊方式”下拉列表框，選擇“左”選項，并單擊“確定”按鈕，圖像就被設置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設置為右環(huán)繞方式。 (3)編輯圖像大?。涸贒reamweaver cs3中，當在網(wǎng)頁中加入一幅圖像后，圖像大小默認設置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調整圖像的大小。調整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標左鍵拖動圖像邊框，可任意調整圖像的寬度和高度直到達到你滿意的尺寸。 (4)設置圖像縮放比例：網(wǎng)頁設計的一個重要原則就是網(wǎng)頁的兼容性，對于不同的瀏覽器或者不同的分辨率，不管是800600的窗口，還是1024768的窗口，網(wǎng)頁都要能正常的顯示。設置圖像縮放比例就是將圖像設置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設置圖像縮放比例的步驟如下： 1.選中網(wǎng)頁中的圖像，單擊鼠標右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項，彈出一個“圖像屬性”對話框. 2.在“大小”欄中選中“指定大小”復選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設置。外還可以在“外觀”選項卡的“水平間距”和“垂直間距”欄里進行設置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。 （3）怎樣編輯網(wǎng)頁中的圖像 在Dreamweaver cs3中，可以使用“圖片”工具欄中的各種工具對網(wǎng)頁中的圖像進行編輯，編輯功能主要有：圖像旋轉和翻轉、剪裁、圖像淡化、凹凸效果等等。 另外，為了使圖片更符合要求，我們還在photoshopcs3中隊所用的圖片進行了處理，使得圖片看起來更加精細美觀，符合我們的主題要求。 （4）使用背景圖像 使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁更美觀好看。網(wǎng)頁中使用背景圖像的具體步驟如下： 1.新建一個空白網(wǎng)頁。 2.單擊鼠標右鍵，彈出的快捷菜單里選“網(wǎng)頁屬性”，彈出“網(wǎng)頁屬性”對話框. 3.開“背景”選項卡。 4.在“背景”選項卡的“格式”欄中選中“背景圖片”復選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個“選擇背景圖片”對話框。 5.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個“選擇文件”對話框。 6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊“確定”按鈕。 這樣，所選圖片將作為整個網(wǎng)頁的背景，如果在第4步時同時選中“水印”復選框，背景圖片將顯示為特殊的水印效果，當網(wǎng)頁滾動時，背景不動，只有網(wǎng)頁內容滾動，產生一種透明層的效果，非常吸引人。 （5）插入flash動畫 關于 Flash 視頻 使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Flash 視頻內容插入 Web 頁面，而無需使用 Flash 創(chuàng)作工具。該命令可以插入 Flash 組件；當您在瀏覽器中查看它時，它顯示所選擇的 Flash 視頻內容以及一組播放控件。 （6）設置鼠標經(jīng)過圖片，進行圖片交互 再插入圖片的下拉菜單中有一項是“鼠標經(jīng)過”，點擊這一項，會彈出一個對話框，在對話框中可以設置鼠標經(jīng)過前的圖片和經(jīng)過時的圖片，選擇“確定”即可。 （7）設置鏈接 選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時，下方的目標屬性被激活，輸入blank設置成在新窗口中打開網(wǎng)頁。我們設置了鏈接本站點的網(wǎng)頁頁面，同時也連接了外網(wǎng)，使得大家訪問頁面時能夠查詢更多詳細的信息，方便用戶查詢。 四、結論 通過這次網(wǎng)頁課程設計激發(fā)學習興趣，調動學習的自覺性，自己動腦、動手，動口，運用網(wǎng)絡資源，結合教材及老師的指導，通過自身的實踐，創(chuàng)作出積聚個人風格、個性的個人網(wǎng)頁。總體來說，整個學期的學習過程，我學會了很多知識， 在此次網(wǎng)頁設計中，我充分利用了這次設計的機會，全心全意投入到網(wǎng)頁世界，去不斷的學習，去不斷的探索；同時去不斷的充實，去不斷的完善自我，在網(wǎng)絡的天空下逐漸的美化自己的人生！ 做好頁面，并不是一件容易的事，它包括個人主頁的選題、內容采集整理、圖片的處理、頁面的排版設置、背景及其整套網(wǎng)頁的色調等很多東西。本次課程設計不是很好，頁面過于簡單，創(chuàng)新意識反面薄弱，這是我需要提高的地方。需要學的地方還有很多，需要有耐心、堅持，不斷的學習，綜合運用多種知識，才能設計出好的web頁面。 總體來說，通過這次的對網(wǎng)頁課程設計，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁設計的大門，只要我再認真努力的去學習，去提高，憑借我對網(wǎng)頁設計的熱情和執(zhí)著，我將來設計出的網(wǎng)頁會更加專業(yè)，更完善。 　 人的身體也是一個風水寶地。你的心念，你的所想所思，內在的情志，從你的外在，展現(xiàn)的淋漓盡致。你內心是不安，還是從容，都會從你的言語和行為中展現(xiàn)出來， 　　所以人身體的本身就是一個風水場，它又是一個強大的磁場，吸引和抵御著好與壞的事物。人身體內在的機體，在儒家思想里以仁、義、禮、智、信來表述。佛家的思想中被闡述為，地、水、火、風。老子；以道、天、地、王來表述。 　　你的四大平穩(wěn)和合，你身體的風水就為上乘風水，散發(fā)的都是好的能量，你的四大不合，就為差風水，散發(fā)出來的就是壞的能量。 　　真正的好風水，好人生，其實就是我們內心的高貴。在這個世界上，內心的高貴比物質的高貴更加寶貴。 　　富是物質的擁有，沒有精神的高貴，永遠成不了貴族。富二代在中國儼然是一個貶義詞，目中無人，橫行無忌，因為中國富人大多是從改革開放之后開始富起來的，財富積累也才區(qū)區(qū)三十年，還是鉆了各種空子，所以說中國沒有真正的富人，充其量有些暴發(fā)戶。 　　二戰(zhàn)期間英國王子愛德華視察貧民窟，他對一貧如洗的老太太說，“請問我可以進來嗎？”真正的貴族永遠尊敬每一個人，即使對方是不名一文的窮人。