WEB系統開發綜合實驗報告題 目 紅塵客棧網上訂房頁面 專 業 計算機科學與技術（信息技術及應用）班 級 計信2班 學 生 蔣波濤 重慶交通大學2013年目 錄一、設計目的3二、設計題目3三、結構設計3四、技術分析4五、設計過程7六、實驗心得10七、實驗總結11一、 設計目的在Internet飛速發展的今天，互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。因此網站建設在Internet應用上的地位顯而易見，它已成為政府、企事業單位信息化建設中的重要組成部分，從而倍受人們的重視。我們當代大學生更是離不開網絡給我們帶來的好處與便利.但是,我們成天瀏覽的網站網頁到底是如何制作的呢?我想這一點很多同學都沒有去深究過.所以,這學期我選擇了”web網頁設計”這門課, 本課程的設計目的是通過實踐使同學們經歷網頁制作的全過程. 通過設計達到掌握網頁設計、制作的技巧。了解和熟悉網頁設計的基礎知識和實現技巧。根據題目的要求，給出網頁設計方案，可以按要求，利用合適圖文素材設計制作符合要求的網頁設計作品。熟練掌握Photoshop cs3、Dreamweaver cs等軟件的的操作和應用。增強動手實踐能力，進一步加強自身綜合素質。學會和團隊配合，逐漸培養做一個完整項目的能力。二、 設計題目紅塵客棧三、 結構設計選定主題，確定題目之后，在做整個網站之前對網站進行需求分析。首先，做好需求調研。調研方式主要是上網查閱資料，在圖書館里翻閱相關書籍。然后，調研結束之后對整個網站進行功能描述，并對網站進行總體規劃，接著逐步細化。我們選做的主題是個人主頁，并且選定題目為“紅塵客棧”，其目的是做一個簡單的網站，介紹酒店概況，提供一定的資訊信息。四、 技術分析(一)建立布局 在這次的網頁設計中用到大量的布局，所以怎么樣建立布局是關鍵。Dreamweaver cs3是大多數人設計網頁的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的出色表現，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個協調合理的頁面。1.點擊“ALT+F6”鍵，進入布局模式，插入布局表格。建立一個大概的布局。 2.使用背景圖片：選中該項，按瀏覽可以插入一幅準備好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。（二）網頁中的圖像圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優點：一是直觀，人眼觀看圖像時接受信息的速度遠遠超過觀看文字時接受信息的速度；二是能更清楚地表達細節內容。正是由于這些優點，所以在進行網頁設計時圖像很受歡迎。如果網頁做得像一幅風景畫，瀏覽者一定會流連忘返（如果圖片很大，效果會適得其反）。 圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現在Internet Explorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。 （1）在網頁中插入圖像 利用Dreamweaver cs3可以方便地在網頁中插入圖像，還可以設置圖像邊框、大小、和位置，并且可以直接對圖像進行編輯。在網頁中加入圖像的操作非常簡單：1.新建一個空白網頁，把光標定位在網頁的開始位置。2.打開“工具”菜單，選擇“圖片”菜單項，在子菜單中選擇“來自文件”菜單項，或者單擊工具欄中的圖片工具圖標，彈出一個“圖片”對話框。3.在此對話框中單擊“瀏覽”按鈕，出現一個“選擇文件”對話框。4.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網頁中。在網頁中插入圖像后我們就可以對圖像的各種屬性進行設置了。（2）圖像的各種屬性設置1.選中所插入的圖片，單擊鼠標右鍵，彈出一個快捷菜單，在菜單中選擇“圖片屬性”菜單項，出現一個“圖片屬性”對話框.2.打開“外觀”選項卡。(1)設定圖像邊框粗細：在“外觀”選項卡的“布局”欄里可以根據需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。(2)設置圖像環繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時需要將圖像和文字分開，且兩者互不影響。比如在網頁左邊插入一幅圖像，要求右邊的文字就像沒有圖像時可以多行輸入，這就要通過設置圖像的環繞方式來實現。在網頁中圖像的環繞方式有兩種：左環繞：圖像在左邊，文本在圖像的右邊進行環繞。右環繞：圖像在右邊，文本在圖像的左邊進行環繞。在“外觀”選項卡的“布局”欄中打開“對齊方式”下拉列表框，選擇“左”選項，并單擊“確定”按鈕，圖像就被設置為左環繞方式，同樣，如果選“右”，圖像就被設置為右環繞方式。(3)編輯圖像大小：在Dreamweaver cs3中，當在網頁中加入一幅圖像后，圖像大小默認設置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調整圖像的大小。調整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標左鍵拖動圖像邊框，可任意調整圖像的寬度和高度直到達到你滿意的尺寸。(4)設置圖像縮放比例：網頁設計的一個重要原則就是網頁的兼容性，對于不同的瀏覽器或者不同的分辨率，不管是800600的窗口，還是1024768的窗口，網頁都要能正常的顯示。設置圖像縮放比例就是將圖像設置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設置圖像縮放比例的步驟如下：1.選中網頁中的圖像，單擊鼠標右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項，彈出一個“圖像屬性”對話框.2.在“大小”欄中選中“指定大小”復選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設置。外還可以在“外觀”選項卡的“水平間距”和“垂直間距”欄里進行設置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。（3）怎樣編輯網頁中的圖像在Dreamweaver cs3中，可以使用“圖片”工具欄中的各種工具對網頁中的圖像進行編輯，編輯功能主要有：圖像旋轉和翻轉、剪裁、圖像淡化、凹凸效果等等。另外，為了使圖片更符合要求，我們還在photoshop cs3中隊所用的圖片進行了處理，使得圖片看起來更加精細美觀，符合我們的主題要求。（4）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網頁的背景用某種顏色填充，而使用背景圖像則是將網頁的背景用圖像平鋪。這樣做可以使制作的網頁更美觀好看。網頁中使用背景圖像的具體步驟如下：1.新建一個空白網頁。2.單擊鼠標右鍵，彈出的快捷菜單里選“網頁屬性”，彈出“網頁屬性”對話框.3.開“背景”選項卡。4.在“背景”選項卡的“格式”欄中選中“背景圖片”復選框，然后單擊下面的“瀏覽”按鈕，出現一個“選擇背景圖片”對話框。5.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現一個“選擇文件”對話框。6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊“確定”按鈕。這樣，所選圖片將作為整個網頁的背景，如果在第4步時同時選中“水印”復選框，背景圖片將顯示為特殊的水印效果，當網頁滾動時，背景不動，只有網頁內容滾動，產生一種透明層的效果，非常吸引人。（6）設置鼠標經過圖片，進行圖片交互再插入圖片的下拉菜單中有一項是“鼠標經過”，點擊這一項，會彈出一個對話框，在對話框中可以設置鼠標經過前的圖片和經過時的圖片，選擇“確定”即可。（7）設置鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時，下方的目標屬性被激活，輸入blank設置成在新窗口中打開網頁。我們設置了鏈接本站點的網頁頁面，同時也連接了外網，使得大家訪問頁面時能夠查詢更多詳細的信息，方便用戶查詢。五、 設計過程通過這半年的學習實踐中 和老師的指導下以大量明晰的操作步驟和典型的應用實例，教會我們。使更豐富全面的軟件技術和應用技巧，使我們真正對所學的軟件融會貫通。所以我結合所學專業的內容制作了個人網站，作為實習的成果。其內容是多樣化的。制作網頁用的軟件是reamweaver , banner軟件。Dreamweaver大大加速了網絡時代電子交易應用中的項目交付。它提供了網頁和表單的動態生成到企業級的解決方案，如電子商店，庫存管理系統和企業內部局域網的數據庫應用等功能。例如，網頁上很流行的陰影和立體按紐等效果，只需單擊一下就可以制作完成。當然，其最方便之處是，它可以將圖象切割，圖象映射，懸停按紐，圖象翻轉等效果直接生成HTML代碼，或者嵌入到現有的網頁中，或者作為單獨的網頁出現。主圖是一個網頁的門面，它能體現出這個網頁的整體風格。再后是制作網頁了，使用dreamweaver制作。首頁內容精彩豐富，簡潔明快，語言風趣，通俗易懂。頁面可愛清爽。首頁主要是導航作用。首頁制作時，時刻考慮著網頁的基本原則：統一，連貫，分割，對比及和諧的原則，內容統一，都是為了主題服務，一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的；連貫，頁面之間關系連貫，統成一體；每版內容都自成一體，顏色各異，便于瀏覽；整個網頁有動有靜，顏色不同，形成對比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。簡潔實用: 這是非常重要的，網絡特殊環境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。使用方便:同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美；頁面用色協調，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網頁富有可欣賞性，提高檔 次。當然雅俗共賞是人人都追求的。利用我們所學的框架集，制作更完美的頁面。將動態網頁與靜態網頁結合起來。再后，調試過程，好多次本來在dream里好好的，把字調的好好的，位置很對，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，很不老實，經過再三調試，整理，加了好多表格，終于滿意了，很是麻煩，想請問老師，為什么會出現這種情況啊，還有怎么解決啊，不用這么反復調整的辦法，還有什么好辦法啊？數據庫的部分情況：還有，在最超鏈接過程中，明明在頁面屬性里設置的是超鏈接的文字是原色，點擊鏈接后也是原色，可一鏈接上就變色了，想了老半天，也做了很多研究，實驗，終于知道怎么回事了，原來應該對文字所在的單元格整體做鏈接，而不是只選中文字做鏈接。這次的網站大部分用的是表格，層用的很少，因為它太靈活了，不好控制，用的很少。制作過程中，才發現，原來自己懂的太少了，好多不知道的地方，才趕緊查書，開始的時候只是會建立模版，可不會應用，操作，可這樣要修改模版可就麻煩了，要一個網頁一個的修改，于是趕緊上網學習相關內容，閱覽書籍，最后才知道文件這有個資源，點擊進入資源面板，點擊到數第二個的模版，選項，所有模版就都顯示了，點擊資源面板左下角的應用命令，好了，這個模版就應用到你建立的網頁中去了。這只是在制作過程中出現的問題之一，其它問題也是類似相同。現在想想，自己所會的東西太少了，現在做的網站只是一些簡單的網站，看到了一些知名的網站開發出的網頁，不僅欄目內容豐富，信息量大，而且頁面圖文并茂，五彩繽紛，使得網民贊嘆不已，流連忘返。以我們的經驗，當前的軟件的功能日趨復雜，不學到一定的深度和廣度是難以在實際工作中應付自如的。因此反映出學習的還不夠，缺點疏漏。需在加以刻苦鉆研及學習，不斷開拓視野，增強自己的實踐操作技能，為以后能做出出色的網頁而努力。六、 實驗心得（一） 頁面的設計方面網頁設計跟學習別的東西一樣，也需要興趣，所謂的興趣也不是三分鐘熱度，是一種執著。學習網頁設計需要耐心，如果沒有耐心，就學不好網頁設計，應為當你碰到一個問題時，如果不能立刻得到問題的答案，你可能需要很長時間去解決，我就碰到過一個問題，用了很長時間才解決。學習網頁設計需要堅持，堅持不斷的學習，因為設計網頁的軟件在不斷的更新，因此我們要不斷的學習并且學習網頁設計不要掉入技術的陷阱，如果你的網頁設計技術一流，并且對軟件的掌握程度已經達到一定水平，但是你設計的網頁確不堪目睹，這是因為網頁設計是介于平面設計和編程技術兩者之間的邊緣科學.不僅涉及到美學,心理學,平面構成,色彩搭配等平面設計的方面的知識,還涉及到html,javascript,css,asp,php等編程語言技術方面的知識.只有綜合運用多種知識,才能設計出視聽特效,動感十足,富于個性的web頁面,才能全面展現互聯網這一新型媒體的獨特魅力和多維空間的超強功能.并且我認為網頁設計應該注重實用性，因為它是讓人瀏覽的，是用戶可以撫摸，可以評論，可以交互的。因此我提倡簡單的美。（二）網頁視覺效果視覺形象識別即我們通常所說的VI（VisualIdentity），與BI一起用于深化表現企業理念，同時也受到BI的影響。所謂視覺形象識別，就是指能夠被目標客戶通過視覺來認知與企業相關的一切事物，從最基礎的企業標志、吉祥物、標準色到企業日常業務中的信紙、服裝、名片等等，在將其系統化以后就形成了企業的視覺形象識別系統。視覺形象識別系統在整套CIS中處于最表層的位置，其中所有的設計都將與目標客戶發生直接的接觸。（三）網頁的整體布局和導航網頁的布局通常指的是網頁的整體架構，說的通俗一點就是排版。如何突出最重要的內容，即讓用戶第一眼就看到這個網頁所想要傳達的信息。這一點至關重要。在大多數做的比較成功的網頁中，一個共同的特點就是網頁的整體架構十分的清晰明了，便于用戶瀏覽網頁布局大致可分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型網頁布局是主要考慮以下幾點：1、首先要考慮整個網頁的長和寬，以及長度和寬度之間的比例。2、其次就應該考慮導航條的設置了。3、正文的框架設置（橫向因素和縱向因素交