精品精品welcomewelcome＜參快A待菽A孝WE網(wǎng)站設(shè)計(jì)報(bào)告書(shū)學(xué)年第學(xué)期設(shè)計(jì)題目:Web設(shè)計(jì)題目:Web網(wǎng)站設(shè)計(jì)報(bào)告年級(jí)專(zhuān)業(yè):姓名學(xué)號(hào):所在學(xué)院:、設(shè)計(jì)目的、設(shè)計(jì)題目、結(jié)構(gòu)設(shè)計(jì)四、技術(shù)分析五、設(shè)計(jì)風(fēng)格目錄2..3..3..3..7..設(shè)計(jì)目的在Internet飛速發(fā)展的今天，人們已經(jīng)無(wú)法離開(kāi)網(wǎng)絡(luò)，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見(jiàn)，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。我們當(dāng)代大學(xué)生更是離不開(kāi)網(wǎng)絡(luò)給我們帶來(lái)的好處與便利.但是,我們成天瀏覽的網(wǎng)站網(wǎng)頁(yè)到底是如何制作的呢 ?我們已經(jīng)學(xué)了WEB這門(mén)課，就可以通過(guò)設(shè)計(jì)達(dá)到掌握網(wǎng)頁(yè)設(shè)計(jì)、制作的技巧。了解和熟悉網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和實(shí)現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁(yè)設(shè)計(jì)方案，可以按要求，利用合適圖文素材設(shè)計(jì)制作符合要求的網(wǎng)頁(yè)設(shè)計(jì)作品。熟練掌握Photoshoto等軟件的的操作和應(yīng)用。增強(qiáng)動(dòng)手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。學(xué)會(huì)和團(tuán)隊(duì)配合，逐漸培養(yǎng)做一個(gè)完整項(xiàng)目的能力。設(shè)計(jì)題目籃球球迷交流網(wǎng)》主要是籃球新聞、視頻，還有交流帖子區(qū)，交易廣告平臺(tái)等。結(jié)構(gòu)設(shè)計(jì)選定主題，確定題目之后，在做整個(gè)網(wǎng)站之前對(duì)網(wǎng)站進(jìn)行需求分析。首先，做好需求調(diào)研。調(diào)研方式主要是上網(wǎng)查閱資料，在圖書(shū)館里翻閱相關(guān)書(shū)籍。然后，調(diào)研結(jié)束之后對(duì)整個(gè)網(wǎng)站進(jìn)行功能描述，并對(duì)網(wǎng)站進(jìn)行總體規(guī)劃，接著逐步細(xì)化。我的設(shè)計(jì)主題是籃球球迷交流網(wǎng)，包括多個(gè)方面，框架為：首先是首頁(yè)，首頁(yè)下是新聞、視頻、論壇、比賽、交易，從分欄都可以回到首頁(yè)。首頁(yè)主要分為新聞?lì)^條、熱門(mén)話(huà)題區(qū)、熱門(mén)比賽預(yù)告、靚圖展示。

鏈接到新聞板塊，則是各種與籃球有關(guān)的新聞；視頻則是各種網(wǎng)友發(fā)布的片段，包括十佳球、比賽集錦和采訪視頻等；論壇就是大家發(fā)貼的地方；比賽區(qū)里包括比賽賽程和球員排行榜（主要是nba）；交易區(qū)則是球迷聯(lián)系交易裝備的平臺(tái)，球迷可以發(fā)貼介紹自己的新品或二手籃球相關(guān)裝備（籃球、球鞋、球衣和護(hù)腕等），然后互相留下聯(lián)系信息，之后通過(guò)淘寶等交易，其實(shí)就是起到廣告的作用。四、技術(shù)分析WEB技術(shù)主要分為客戶(hù)端和服務(wù)器技術(shù)。Web客戶(hù)端設(shè)計(jì)技術(shù)主要包括：html四、技術(shù)分析WEB技術(shù)主要分為客戶(hù)端和服務(wù)器技術(shù)。Web客戶(hù)端設(shè)計(jì)技術(shù)主要包括：html語(yǔ)言、JavaApplets、腳本程序、CSS、DHTML、插件技術(shù)以及VRML技術(shù)。Web服務(wù)器技術(shù)主WebWeb服務(wù)器技術(shù)主要包括服務(wù)器、CGI、PHP、ASP、ASP.NET、Servlet和JSP技術(shù)?；镜挠玫玫降幕A(chǔ)技術(shù)如下：（一）建立布局在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweavercs3是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱(chēng)手兵器，也是眾多入門(mén)者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒(méi)有表格的幫助，很難組織出一個(gè)協(xié)調(diào)合理的頁(yè)面。1.點(diǎn)擊“ALT+F6”鍵，進(jìn)入布局模式，插入布局表格。建立一個(gè)大概的布局。2.使用背景圖片：選中該項(xiàng)，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景，因?yàn)閳D片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。二）網(wǎng)頁(yè)中的圖像圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點(diǎn)：一是直觀，人眼觀看圖像時(shí)接受信息的速度遠(yuǎn)遠(yuǎn)超過(guò)觀看文字時(shí)接受信息的速度；二是能更清楚地表達(dá)細(xì)節(jié)內(nèi)容。正是由于這些優(yōu)點(diǎn)，所以在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)圖像很受歡迎。如果網(wǎng)頁(yè)做得像一幅風(fēng)景畫(huà)，瀏覽者一定會(huì)流連忘返（如果圖片很大，效果會(huì)適得其反）。圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現(xiàn)在InternetExplorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。1）在網(wǎng)頁(yè)中插入圖像利用Dreamweavercs3可以方便地在網(wǎng)頁(yè)中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對(duì)圖像進(jìn)行編輯。在網(wǎng)頁(yè)中加入圖像的操作非常簡(jiǎn)單：新建一個(gè)空白網(wǎng)頁(yè)，把光標(biāo)定位在網(wǎng)頁(yè)的開(kāi)始位置。打開(kāi)“工具”菜單，選擇“圖片”菜單項(xiàng)，在子菜單中選擇“來(lái)自文件”菜單項(xiàng)，或者單擊工具欄中的圖片工具圖標(biāo)，彈出一個(gè)“圖片”對(duì)話(huà)框。在此對(duì)話(huà)框中單擊“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話(huà)框。在“選擇文件”對(duì)話(huà)框的文件列表中選擇某個(gè)圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中插入圖像后我們就可以對(duì)圖像的各種屬性進(jìn)行設(shè)置了。)圖像的各種屬性設(shè)置選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個(gè)快捷菜單，在菜單中選擇“圖片屬性”菜單項(xiàng)，出現(xiàn)一個(gè)“圖片屬性”對(duì)話(huà)框打開(kāi)“外觀”選項(xiàng)卡。設(shè)定圖像邊框粗細(xì)：在“外觀”選項(xiàng)卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無(wú)邊框。設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時(shí)需要將圖像和文字分開(kāi)，且兩者互不影響。比如在網(wǎng)頁(yè)左邊插入一幅圖像，要求右邊的文字就像沒(méi)有圖像時(shí)可以多行輸入，這就要通過(guò)設(shè)置圖像的環(huán)繞方式來(lái)實(shí)現(xiàn)。在網(wǎng)頁(yè)中圖像的環(huán)繞方式有兩種：①左環(huán)繞：圖像在左邊，文本在圖像的右邊進(jìn)行環(huán)繞。②右環(huán)繞：圖像在右邊，文本在圖像的左邊進(jìn)行環(huán)繞。在“外觀”選項(xiàng)卡的“布局”欄中打開(kāi)“對(duì)齊方式”下拉列表框，選擇“左”選項(xiàng)，并單擊“確定”按鈕，圖像就被設(shè)置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設(shè)置為右環(huán)繞方式。編輯圖像大?。涸贒reamweavercs3中，當(dāng)在網(wǎng)頁(yè)中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來(lái)的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡(jiǎn)單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動(dòng)圖像邊框，可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿(mǎn)意的尺寸。(4)設(shè)置圖像縮放比例：網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)重要原則就是網(wǎng)頁(yè)的兼容性，對(duì)于不同的瀏覽器或者不同的分辨率，不管是800X600的窗口，還是1024X768的窗口，網(wǎng)頁(yè)都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：

1.選中網(wǎng)頁(yè)中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項(xiàng)，彈出一個(gè)“圖像屬性”對(duì)話(huà)框2.在“大小”欄中選中“指定大小”復(fù)選框，同時(shí)選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。外還可以在“外觀”選項(xiàng)卡的“水平間距”和“垂直間距”欄里進(jìn)行設(shè)置，水平間距是指圖像與周?chē)卦谒椒较虻拈g距，以象素為單位；垂直間距指圖像與周?chē)卦诖怪狈较虻拈g距。）怎樣編輯網(wǎng)頁(yè)中的圖像在通過(guò)fhotoshop在通過(guò)fhotoshop等軟件中，可以使用圖片”工具欄中的各種工具對(duì)網(wǎng)頁(yè)中的圖像進(jìn)行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。另外，為了使圖片更符合要求，我們還在photoshopcs3中對(duì)所用的圖片進(jìn)行了處理，使得圖片看起來(lái)更加精細(xì)美觀，符合我們的主題要求。另外，為了使圖片更符合要求，我們還在）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁(yè)的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁(yè)的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁(yè)更美觀好看。網(wǎng)頁(yè)中使用背景圖像的具體步驟如下：

1.新建一個(gè)空白網(wǎng)頁(yè)。2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“網(wǎng)頁(yè)屬性”，彈出“網(wǎng)頁(yè)屬性”對(duì)話(huà)框開(kāi)“背景”選項(xiàng)卡。在“背景”選項(xiàng)卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇背景圖片”對(duì)話(huà)框。在“選擇背景圖像”對(duì)話(huà)框中單擊“瀏覽文件”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話(huà)框。在“選擇文件”對(duì)話(huà)框的文件列表中選擇圖像文件，單擊“確定”按鈕。這樣，所選圖片將作為整個(gè)網(wǎng)頁(yè)的背景，如果在第4這樣，所選圖片將作為整個(gè)網(wǎng)頁(yè)的背景，如果在第4步時(shí)同時(shí)選中“水印”復(fù)選框，背景圖片將顯示為特殊的水印效果，當(dāng)網(wǎng)頁(yè)滾動(dòng)時(shí)，背景不動(dòng)，只有網(wǎng)頁(yè)內(nèi)容滾動(dòng)，產(chǎn)生一種透明層的效果，非常吸引人。透明層的效果，非常吸引人。5）插入5）插入flash動(dòng)畫(huà)關(guān)于Flash視頻使用Dreamweaver中的“插入Flash視頻”命令，可將Flash視頻內(nèi)容插入Web頁(yè)面，而無(wú)需使用Flash創(chuàng)作工具。該命令可以插入Flash組件；當(dāng)您在瀏覽器中查看它時(shí)，它顯示所選擇的Flash關(guān)于Flash6）設(shè)置鼠標(biāo)經(jīng)過(guò)圖片，進(jìn)行圖片交互再插入圖片的下拉菜單中有一項(xiàng)是“鼠標(biāo)經(jīng)過(guò)”，點(diǎn)擊這一項(xiàng)，會(huì)彈出一個(gè)對(duì)話(huà)框，在對(duì)話(huà)框中可以設(shè)置鼠標(biāo)經(jīng)過(guò)前的圖片和經(jīng)過(guò)時(shí)的圖片，選擇“確定”即可。7)設(shè)置鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時(shí)，下方的目標(biāo)屬性被激活，輸入blank設(shè)置成在新窗口中打開(kāi)網(wǎng)頁(yè)。我們?cè)O(shè)置了鏈接本站點(diǎn)的網(wǎng)頁(yè)頁(yè)面，同時(shí)也連接了外網(wǎng)，使得大家訪問(wèn)頁(yè)面時(shí)能夠查詢(xún)更多詳細(xì)的信息，方便用戶(hù)查詢(xún)。五、設(shè)計(jì)風(fēng)格學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)需要耐心，如果沒(méi)有耐心，就學(xué)不好網(wǎng)頁(yè)設(shè)計(jì)，應(yīng)為當(dāng)你碰到一個(gè)問(wèn)題時(shí)，如果不能立刻得到問(wèn)題的答案，你可能需要很長(zhǎng)時(shí)間去解決，我就碰到過(guò)一個(gè)問(wèn)題，用了很長(zhǎng)時(shí)間才解決。頁(yè)面設(shè)計(jì)頁(yè)面的設(shè)計(jì)風(fēng)格，每個(gè)人的審美觀都不同，所以中國(guó)、韓國(guó)和歐洲的風(fēng)格完全不同，但是我發(fā)現(xiàn)簡(jiǎn)約美，不管審美觀怎么樣不同，至少不會(huì)說(shuō)他難看，而我本人也比較喜歡簡(jiǎn)單的風(fēng)格，所以我選擇了簡(jiǎn)約風(fēng)格的設(shè)計(jì)風(fēng)格，不追求浮夸，只求簡(jiǎn)單實(shí)用，并且我認(rèn)為網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該注重實(shí)用性，因?yàn)樗亲屓藶g覽的，是用戶(hù)可以撫摸，可以評(píng)論，可以交互的。因此我提倡簡(jiǎn)單的美。網(wǎng)頁(yè)視覺(jué)效果視覺(jué)形象識(shí)別即我們通常所說(shuō)的VI(VisualIdentity)，所謂視覺(jué)形象識(shí)別，就是指能夠被目標(biāo)客戶(hù)通過(guò)視覺(jué)來(lái)認(rèn)知與企業(yè)相關(guān)的一切事物，從最基礎(chǔ)的企業(yè)標(biāo)志、吉祥物、標(biāo)準(zhǔn)色到企業(yè)日常業(yè)務(wù)中的信紙、服裝、名片等等，而我對(duì)視覺(jué)的要求主要是色彩和視覺(jué)風(fēng)格，色彩我選擇主色調(diào)為紅色和白色，副色調(diào)為藍(lán)色，貼圖為各種籃球圖片，主要體現(xiàn)出熱情的感覺(jué)。

網(wǎng)頁(yè)的整體布局和導(dǎo)航網(wǎng)頁(yè)的布局通常指的是網(wǎng)頁(yè)的整體架構(gòu)，說(shuō)的通俗一點(diǎn)就是排版。如何突出最重要的內(nèi)容，即讓用戶(hù)第一眼就看到這個(gè)網(wǎng)頁(yè)所想要傳達(dá)的信息。這一點(diǎn)至關(guān)重要。在大多數(shù)做的比較成功的網(wǎng)頁(yè)中，一個(gè)共同的特點(diǎn)就是網(wǎng)頁(yè)的整體架構(gòu)十分的清晰明了，所以我的首頁(yè)采用封面和flash型，便于用戶(hù)瀏覽和點(diǎn)連接；然后視頻分欄我選擇綜合框架型；論壇和交易區(qū)都采用標(biāo)題正文型，還帶有上下的框架結(jié)構(gòu)。比賽分欄采用“國(guó)”字型。首頁(yè)內(nèi)容要求精彩豐富，簡(jiǎn)潔明快。頁(yè)面可愛(ài)清爽。首頁(yè)主要是導(dǎo)航作用。首頁(yè)制作時(shí)，時(shí)刻考慮著網(wǎng)頁(yè)的基本原則：統(tǒng)一，連貫，分割，對(duì)比及和諧的原則，內(nèi)容統(tǒng)一，都是為了主題服務(wù)，一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的；連貫，頁(yè)面之間關(guān)系連貫，統(tǒng)成一體；每版內(nèi)容都自成一體，顏色各異，便于瀏覽；整個(gè)網(wǎng)頁(yè)有動(dòng)有靜，顏色不同，形成對(duì)比，不呆板，富有生氣；顏色各異，但又不是為了主題服務(wù)，一個(gè)