web網(wǎng)站設(shè)計報告書

1、精品WEB網(wǎng)站設(shè)計報告書學(xué)年第1學(xué)期設(shè)計 題目：Web網(wǎng)站設(shè)計報告年級專業(yè)：姓名學(xué)號：所在學(xué)院：welcome精品目 錄一、設(shè)計目的2二、設(shè)計題目3三、結(jié)構(gòu)設(shè)計3四、技術(shù)分析3五、設(shè)計風格7welcome精品一、 設(shè)計目的在 Internet 飛速發(fā)展的今天，人們已經(jīng)無法離開網(wǎng)絡(luò)，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在 Internet 應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。我們當代大學(xué)生更是離不開網(wǎng)絡(luò)給我們帶來的好處與便利 .但是 ,我們成天瀏覽的網(wǎng)站網(wǎng)頁到底

2、是如何制作的呢?我們已經(jīng)學(xué)了WEB 這門課，就可以通過設(shè)計達到掌握網(wǎng)頁設(shè)計、制作的技巧。了解和熟悉網(wǎng)頁設(shè)計的基礎(chǔ)知識和實現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁設(shè)計方案，可以按要求，利用合適圖文素材設(shè)計制作符合要求的網(wǎng)頁設(shè)計作品。熟練掌握 Photoshoto 等軟件的的操作和應(yīng)用。增強動手實踐能力，進一步加強自身綜合素質(zhì)。學(xué)會和團隊配合，逐漸培養(yǎng)做一個完整項目的能力。二、 設(shè)計題目籃球球迷交流網(wǎng)主要是籃球新聞、視頻，還有交流帖子區(qū)，交易廣告平臺等。三、 結(jié)構(gòu)設(shè)計選定主題，確定題目之后，在做整個網(wǎng)站之前對網(wǎng)站進行需求分析。首先，做好需求調(diào)研。調(diào)研方式主要是上網(wǎng)查閱資料，在圖書館里翻閱相關(guān)書籍。然后，調(diào)

3、研結(jié)束之后對整個網(wǎng)站進行功能描述，并對網(wǎng)站進行總體規(guī)劃，接著逐步細化。我的設(shè)計主題是籃球球迷交流網(wǎng)，包括多個方面，框架為：首先是首頁，首頁下是新聞、視頻、論壇、比賽、交易，從分欄都可以回到首頁。首頁主要分為新聞頭條、熱門話題區(qū)、熱門比賽預(yù)告、靚圖展示。welcome精品鏈接到新聞板塊，則是各種與籃球有關(guān)的新聞；視頻則是各種網(wǎng)友發(fā)布的片段，包括十佳球、比賽集錦和采訪視頻等；論壇就是大家發(fā)貼的地方；比賽區(qū)里包括比賽賽程和球員排行榜（主要是nba ）；交易區(qū)則是球迷聯(lián)系交易裝備的平臺，球迷可以發(fā)貼介紹自己的新品或二手籃球相關(guān)裝備（籃球、球鞋、球衣和護腕等），然后互相留下聯(lián)系信息，之后通過淘寶等交易，

4、其實就是起到廣告的作用。四、 技術(shù)分析WEB 技術(shù)主要分為客戶端和服務(wù)器技術(shù)。Web 客戶端設(shè)計技術(shù)主要包括：html語言、 Java Applets、腳本程序、CSS、 DHTML 、插件技術(shù)以及VRML 技術(shù)。Web 服務(wù)器端的開發(fā)技術(shù)也是由靜態(tài)向動態(tài)逐漸發(fā)展、完善起來的。Web 服務(wù)器技術(shù)主要包括服務(wù)器、CGI 、 PHP 、 ASP 、ASP.NET 、Servlet和 JSP 技術(shù)?；镜挠玫玫降幕A(chǔ)技術(shù)如下：(一 )建立布局welcome精品在這次的網(wǎng)頁設(shè)計中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweaver cs3是大多數(shù)人設(shè)計網(wǎng)頁的稱手兵器，也是眾多入門者的捷徑。

5、特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個協(xié)調(diào)合理的頁面。1.點擊“ ALT+F6 ”鍵，進入布局模式，插入布局表格。建立一個大概的布局。2.使用背景圖片：選中該項，按瀏覽可以插入一幅準備好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。（二）網(wǎng)頁中的圖像圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點：一是直觀，人眼觀看圖像時接受信息的速度遠遠超過觀看文字時接受信息的速度；二是能更清楚地表達細節(jié)內(nèi)容。正是由于這些優(yōu)點，所以在進行網(wǎng)頁設(shè)計時圖像很受歡迎。如果網(wǎng)頁做得像一幅風景畫，瀏覽者一定會流連忘返（

6、如果圖片很大，效果會適得其反）。圖像文件的格式有幾十種，如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è)置圖像邊框、大小、和位置，并且可以直接對圖像進行編輯。在網(wǎng)頁中加入圖像的操作非常簡單：welcome精品1.新建一個空白網(wǎng)頁，把光標定位在網(wǎng)頁的開始位置。2.打開“工具”菜單，選擇“圖片”菜單項，在子菜單中選擇“來自

7、文件”菜單項，或者單擊工具欄中的圖片工具圖標，彈出一個“圖片”對話框。3.在此對話框中單擊“瀏覽”按鈕，出現(xiàn)一個“選擇文件”對話框。4.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁中。在網(wǎng)頁中插入圖像后我們就可以對圖像的各種屬性進行設(shè)置了。（2 ）圖像的各種屬性設(shè)置1.選中所插入的圖片，單擊鼠標右鍵，彈出一個快捷菜單，在菜單中選擇“圖片屬性”菜單項，出現(xiàn)一個“圖片屬性”對話框.2.打開“外觀”選項卡。(1) 設(shè)定圖像邊框粗細：在“外觀”選項卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“ 0”，即無邊框。(2

8、) 設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時需要將圖像和文字分開，且兩者互不影響。比如在網(wǎng)頁左邊插入一幅圖像，要求右邊的文字就像welcome精品沒有圖像時可以多行輸入，這就要通過設(shè)置圖像的環(huán)繞方式來實現(xiàn)。在網(wǎng)頁中圖像的環(huán)繞方式有兩種：左環(huán)繞：圖像在左邊，文本在圖像的右邊進行環(huán)繞。右環(huán)繞：圖像在右邊，文本在圖像的左邊進行環(huán)繞。在“外觀”選項卡的“布局”欄中打開“對齊方式”下拉列表框，選擇“左”選項，并單擊“確定”按鈕，圖像就被設(shè)置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設(shè)置為右環(huán)繞方式。(3) 編輯圖像大小：在Dreamweaver cs3中，當在網(wǎng)頁中加入一幅

9、圖像后，圖像大小默認設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標左鍵拖動圖像邊框，可任意調(diào)整圖像的寬度和高度直到達到你滿意的尺寸。(4) 設(shè)置圖像縮放比例：網(wǎng)頁設(shè)計的一個重要原則就是網(wǎng)頁的兼容性，對于不同的瀏覽器或者不同的分辨率，不管是 800 ×600 的窗口，還是 1024 ×768 的窗口，網(wǎng)頁都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：wel

10、come精品1.選中網(wǎng)頁中的圖像，單擊鼠標右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項，彈出一個“圖像屬性”對話框.2.在“大小”欄中選中“指定大小”復(fù)選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。外還可以在“外觀”選項卡的“水平間距”和“垂直間距”欄里進行設(shè)置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。（3 ）怎樣編輯網(wǎng)頁中的圖像在通過 fhotoshop等軟件中，可以使用“圖片”工具欄中的各種工具對網(wǎng)頁中的圖像進行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)

11、、剪裁、圖像淡化、凹凸效果等等。另外，為了使圖片更符合要求，我們還在photoshop cs3中對所用的圖片進行了處理，使得圖片看起來更加精細美觀，符合我們的主題要求。（4 ）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁更美觀好看。網(wǎng)頁中使用背景圖像的具體步驟如下：welcome精品1.新建一個空白網(wǎng)頁。2.單擊鼠標右鍵，彈出的快捷菜單里選“網(wǎng)頁屬性”，彈出“網(wǎng)頁屬性”對話框.3.開“背景”選項卡。4.在“背景”選項卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個“

12、選擇背景圖片”對話框。5.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個“選擇文件”對話框。6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊“確定”按鈕。這樣，所選圖片將作為整個網(wǎng)頁的背景，如果在第4 步時同時選中“水印”復(fù)選框，背景圖片將顯示為特殊的水印效果，當網(wǎng)頁滾動時，背景不動，只有網(wǎng)頁內(nèi)容滾動，產(chǎn)生一種透明層的效果，非常吸引人。（ 5 ）插入 flash 動畫關(guān)于 Flash 視頻 使用 Dreamweaver中的“插入Flash 視頻”命令，可將Flash 視頻內(nèi)容插入Web頁面，而無需使用Flash 創(chuàng)作工具。該命令可以插入Flash 組件；當您在瀏覽器中查看它時，

13、它顯示所選擇的Flash 視頻內(nèi)容以及一組播放控件。（6 ）設(shè)置鼠標經(jīng)過圖片，進行圖片交互welcome精品再插入圖片的下拉菜單中有一項是“鼠標經(jīng)過”，點擊這一項，會彈出一個對話框，在對話框中可以設(shè)置鼠標經(jīng)過前的圖片和經(jīng)過時的圖片，選擇“確定”即可。（7 ）設(shè)置鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時，下方的目標屬性被激活，輸入blank設(shè)置成在新窗口中打開網(wǎng)頁。我們設(shè)置了鏈接本站點的網(wǎng)頁頁面，同時也連接了外網(wǎng)，使得大家訪問頁面時能夠查詢更多詳細的信息，方便用戶查詢。五、 設(shè)計風格學(xué)習(xí)網(wǎng)頁設(shè)計需要耐心，如果沒有耐心，就學(xué)不好網(wǎng)頁設(shè)計，應(yīng)為當你碰到一個問題時，如果不能立

14、刻得到問題的答案，你可能需要很長時間去解決，我就碰到過一個問題，用了很長時間才解決。頁面設(shè)計頁面的設(shè)計風格，每個人的審美觀都不同，所以中國、韓國和歐洲的風格完全不同，但是我發(fā)現(xiàn)簡約美，不管審美觀怎么樣不同，至少不會說他難看，而我本人也比較喜歡簡單的風格，所以我選擇了簡約風格的設(shè)計風格，不追求浮夸，只求簡單實用，并且我認為網(wǎng)頁設(shè)計應(yīng)該注重實用性，因為它是讓人瀏覽的，是用戶可以撫摸，可以評論，可以交互的。因此我提倡簡單的美。網(wǎng)頁視覺效果視覺形象識別即我們通常所說的 VI （VisualIdentity ），所謂視覺形象識別，就是指能夠被目標客戶通過視覺來認知與企業(yè)相關(guān)的一切事物，從最基礎(chǔ)的企業(yè)標志

15、、吉祥物、標準色到企業(yè)日常業(yè)務(wù)中的信紙、服裝、名片等等，而我對視覺的要求主要是色彩和視覺風格，色彩我選擇主色調(diào)為紅色和白色，副色調(diào)為藍色，貼圖為各種籃球圖片，主要體現(xiàn)出熱情的感覺。welcome精品網(wǎng)頁的整體布局和導(dǎo)航網(wǎng)頁的布局通常指的是網(wǎng)頁的整體架構(gòu)，說的通俗一點就是排版。如何突出最重要的內(nèi)容，即讓用戶第一眼就看到這個網(wǎng)頁所想要傳達的信息。這一點至關(guān)重要。在大多數(shù)做的比較成功的網(wǎng)頁中，一個共同的特點就是網(wǎng)頁的整體架構(gòu)十分的清晰明了，所以我的首頁采用封面和 flash 型，便于用戶瀏覽和點連接；然后視頻分欄我選擇綜合框架型；論壇和交易區(qū)都采用標題正文型，還帶有上下的框架結(jié)構(gòu)。比賽分欄采用“國”字型。首頁內(nèi)容要求精彩豐富，簡潔明快。頁面可愛清爽。首頁主要是導(dǎo)航作用。首頁制作時，時刻考慮著網(wǎng)頁的基本原則：統(tǒng)一，連貫，分割，對比及和諧的原則，內(nèi)容統(tǒng)一，都是為了主題服務(wù)，一個網(wǎng)站強調(diào)的就是一個整體，只有圍繞一個統(tǒng)一的目標所做的設(shè)計