WEB系統(tǒng)開發(fā)綜合實(shí)驗(yàn)報(bào)告題 目紅塵客棧網(wǎng)上訂房頁面專 業(yè)計(jì)算機(jī)科學(xué)與技術(shù)（信息技術(shù)及應(yīng)用）班 級 計(jì)信2班學(xué) 生 蔣波濤重慶交通大學(xué)2013年目錄TOC\o"1-5"\h\z一、設(shè)計(jì)目的 3二、設(shè)計(jì)題目 3三、結(jié)構(gòu)設(shè)計(jì) 3四、技術(shù)分析 4五、設(shè)計(jì)過程 7六、實(shí)驗(yàn)心得 10七、實(shí)驗(yàn)總結(jié) 11、設(shè)計(jì)目的在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。我們當(dāng)代大學(xué)生更是離不開網(wǎng)絡(luò)給我們帶來的好處與便利.但是,我們成天瀏覽的網(wǎng)站網(wǎng)頁到底是如何制作的呢?我想這一點(diǎn)很多同學(xué)都沒有去深究過.所以,這學(xué)期我選擇了"0?6網(wǎng)頁設(shè)計(jì)”這門課，本課程的設(shè)計(jì)目的是通過實(shí)踐使同學(xué)們經(jīng)歷網(wǎng)頁制作的全過程.通過設(shè)計(jì)達(dá)到掌握網(wǎng)頁設(shè)計(jì)、制作的技巧。了解和熟悉網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識和實(shí)現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁設(shè)計(jì)方案，可以按要求，利用合適圖文素材設(shè)計(jì)制作符合要求的網(wǎng)頁設(shè)計(jì)作品。熟練掌握Photoshopcs3、Dreamweavercs等軟件的的操作和應(yīng)用。增強(qiáng)動手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。學(xué)會和團(tuán)隊(duì)配合，逐漸培養(yǎng)做一個完整項(xiàng)目的能力。設(shè)計(jì)題目《紅塵客棧》結(jié)構(gòu)設(shè)計(jì)選定主題，確定題目之后，在做整個網(wǎng)站之前對網(wǎng)站進(jìn)行需求分析。首先，做好需求調(diào)研。調(diào)研方式主要是上網(wǎng)查閱資料，在圖書館里翻閱相關(guān)書籍。然后，調(diào)研結(jié)束之后對整個網(wǎng)站進(jìn)行功能描述，并對網(wǎng)站進(jìn)行總體規(guī)劃，接著逐步細(xì)化。我們選做的主題是個人主頁，并且選定題目為“紅塵客?！?，其目的是做一個簡單的網(wǎng)站，介紹酒店概況，提供一定的資訊信息。技術(shù)分析（一）建立布局在這次的網(wǎng)頁設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweavercs3是大多數(shù)人設(shè)計(jì)網(wǎng)頁的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個協(xié)調(diào)合理的頁面。.點(diǎn)擊“ALT+F6”鍵，進(jìn)入布局模式，插入布局表格。建立一個大概的布局。.使用背景圖片：選中該項(xiàng)，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景，因?yàn)閳D片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。（二）網(wǎng)頁中的圖像圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點(diǎn)：一是直觀，人眼觀看圖像時接受信息的速度遠(yuǎn)遠(yuǎn)超過觀看文字時接受信息的速度；二是能更清楚地表達(dá)細(xì)節(jié)內(nèi)容。正是由于這些優(yōu)點(diǎn)，所以在進(jìn)行網(wǎng)頁設(shè)計(jì)時圖像很受歡迎。如果網(wǎng)頁做得像一幅風(fēng)景畫，瀏覽者一定會流連忘返（如果圖片很大，效果會適得其反）。圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現(xiàn)在InternetExplorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。（1）在網(wǎng)頁中插入圖像利用Dreamweavercs3可以方便地在網(wǎng)頁中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對圖像進(jìn)行編輯。在網(wǎng)頁中加入圖像的操作非常簡單：.新建一個空白網(wǎng)頁，把光標(biāo)定位在網(wǎng)頁的開始位置。.打開“工具”菜單，選擇“圖片”菜單項(xiàng)，在子菜單中選擇“來自文件”菜單項(xiàng)，或者單擊工具欄中的圖片工具圖標(biāo)，彈出一個“圖片”對話框。.在此對話框中單擊“瀏覽”按鈕，出現(xiàn)一個“選擇文件”對話框。.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁中。在網(wǎng)頁中插入圖像后我們就可以對圖像的各種屬性進(jìn)行設(shè)置了。(2)圖像的各種屬性設(shè)置1.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個快捷菜單，在菜單中選擇“圖片屬性”菜單項(xiàng)，出現(xiàn)一個“圖片屬性”對話框.2.打開“外觀”選項(xiàng)卡。(1)設(shè)定圖像邊框粗細(xì)：在“外觀”選項(xiàng)卡的“布局”欄里可以根據(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)繞。在“外觀”選項(xiàng)卡的“布局”欄中打開“對齊方式”下拉列表框，選擇“左”選項(xiàng)，并單擊“確定”按鈕，圖像就被設(shè)置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設(shè)置為右環(huán)繞方式。⑶編輯圖像大?。涸贒reamweavercs3中，當(dāng)在網(wǎng)頁中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動圖像邊框，可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿意的尺寸。(4)設(shè)置圖像縮放比例：網(wǎng)頁設(shè)計(jì)的一個重要原則就是網(wǎng)頁的兼容性，對于不同的瀏覽器或者不同的分辨率，不管是800X600的窗口，還是1024X768的窗口，網(wǎng)頁都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：1.選中網(wǎng)頁中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項(xiàng)，彈出一個“圖像屬性”對話框.2.在“大小”欄中選中“指定大小”復(fù)選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。外還可以在“外觀”選項(xiàng)卡的“水平間距”和“垂直間距”欄里進(jìn)行設(shè)置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。（3）怎樣編輯網(wǎng)頁中的圖像在Dreamweavercs3中，可以使用“圖片”工具欄中的各種工具對網(wǎng)頁中的圖像進(jìn)行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等另外，為了使圖片更符合要求，我們還在photoshopcs3中隊(duì)所用的圖片進(jìn)行了處理，使得圖片看起來更加精細(xì)美觀，符合我們的主題要求。（4）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁更美觀好看。網(wǎng)頁中使用背景圖像的具體步驟如下：1.新建一個空白網(wǎng)頁。2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“網(wǎng)頁屬性”，彈出“網(wǎng)頁屬性”對話框.3.開“背景”選項(xiàng)卡。4.在“背景”選項(xiàng)卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個“選擇背景圖片”對話框。5.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個“選擇文件”對話框。6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊“確定”按鈕。這樣，所選圖片將作為整個網(wǎng)頁的背景，如果在第4步時同時選中“水印”復(fù)選框，背景圖片將顯示為特殊的水印效果，當(dāng)網(wǎng)頁滾動時，背景不動，只有網(wǎng)頁內(nèi)容滾動，產(chǎn)生一種透明層的效果，非常吸引人。（6）設(shè)置鼠標(biāo)經(jīng)過圖片，進(jìn)行圖片交互再插入圖片的下拉菜單中有一項(xiàng)是“鼠標(biāo)經(jīng)過”，點(diǎn)擊這一項(xiàng)，會彈出一個對話框，在對話框中可以設(shè)置鼠標(biāo)經(jīng)過前的圖片和經(jīng)過時的圖片，選擇“確定”即可。（7）設(shè)置鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時，下方的目標(biāo)屬性被激活，輸入blank設(shè)置成在新窗口中打開網(wǎng)頁。我們設(shè)置了鏈接本站點(diǎn)的網(wǎng)頁頁面，同時也連接了外網(wǎng)，使得大家訪問頁面時能夠查詢更多詳細(xì)的信息，方便用戶查詢。五、設(shè)計(jì)過程通過這半年的學(xué)習(xí)實(shí)踐中和老師的指導(dǎo)下以大量明晰的操作步驟和典型的應(yīng)用實(shí)例，教會我們。使更豐富全面的軟件技術(shù)和應(yīng)用技巧，使我們真正對所學(xué)的軟件融會貫通。所以我結(jié)合所學(xué)專業(yè)的內(nèi)容制作了個人網(wǎng)站，作為實(shí)習(xí)的成果。其內(nèi)容是多樣化的。制作網(wǎng)頁用的軟件是Dreamweaver,banner軟件。Dreamweaver大大加速了網(wǎng)絡(luò)時代電子交易應(yīng)用中的項(xiàng)目交付。它提供了網(wǎng)頁和表單的動態(tài)生成到企業(yè)級的解決方案，如電子商店，庫存管理系統(tǒng)和企業(yè)內(nèi)部局域網(wǎng)的數(shù)據(jù)庫應(yīng)用等功能。例如，網(wǎng)頁上很流行的陰影和立體按紐等效果，只需單擊一下就可以制作完成。當(dāng)然，其最方便之處是，它可以將圖象切割，圖象映射，懸停按紐，圖象翻轉(zhuǎn)等效果直接生成HTML代碼，或者嵌入到現(xiàn)有的網(wǎng)頁中，或者作為單獨(dú)的網(wǎng)頁出現(xiàn)。主圖是一個網(wǎng)頁的門面，它能體現(xiàn)出這個網(wǎng)頁的整體風(fēng)格。再后是制作網(wǎng)頁了，使用dreamweaver制作。首頁內(nèi)容精彩豐富，簡潔明快，語言風(fēng)趣，通俗易懂。頁面可愛清爽。首頁主要是導(dǎo)航作用。首頁制作時，時刻考慮著網(wǎng)頁的基本原則：統(tǒng)一，連貫，分割，對比及和諧的原則，內(nèi)容統(tǒng)一，都是為了主題服務(wù)，一個網(wǎng)站強(qiáng)調(diào)的就是一個整體，只有圍繞一個統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的；連貫，頁面之間關(guān)系連貫，統(tǒng)成一體；每版內(nèi)容都自成一體，顏色各異，便于瀏覽；整個網(wǎng)頁有動有靜，顏色不同，形成對比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。

輸入密碼:再次輸入密氈;輸入密碼:再次輸入密氈;簡潔實(shí)用:這是非常重要的，網(wǎng)絡(luò)特殊環(huán)境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。使用方便:同第一個是相一致的，滿足使用者的要求，網(wǎng)頁做得越適合使用，就越顯示出其功能美；頁面用色協(xié)調(diào)，布局符合形式美的要求:布局有條理，充分利用美的形式，是網(wǎng)頁富有可欣賞性，提高檔次。當(dāng)然雅俗共賞是人人都追求的。利用我們所學(xué)的框架集，制作更完美的頁面。將動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁結(jié)合起來。再后，調(diào)試過程，好多次本來在dream里好好的，把字調(diào)的好好的，位置很對，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，很不老實(shí)，經(jīng)過再三調(diào)試，整理，加了好多表格，終于滿意了，很是麻煩，想請問老師，為什么會出現(xiàn)這種情況啊，還有怎么解決啊，不用這么反復(fù)調(diào)整的辦法，還有什么好辦法?。繑?shù)據(jù)庫的部分情況：日口裝據(jù)庫0口案僦據(jù)庫0.J1日U20LJ數(shù)據(jù)庫關(guān)至圖日口表S._1索婉表@Jdbo.Li&ers國口視圖mp-iF3還有，在最超鏈接過程中，明明在頁面屬性里設(shè)置的是超鏈接的文字是原色，點(diǎn)擊鏈接后也是原色，可一鏈接上就變色了，想了老半天，也做了很多研究，實(shí)驗(yàn)，終于知道怎么回事了，原來應(yīng)該對文字所在的單元格整體做鏈接，而不是只