網(wǎng)頁(yè)制作報(bào)告

1、網(wǎng)頁(yè)制作報(bào)告 作者:侯杰方 本次工程設(shè)計(jì)作品為檸檬，本網(wǎng)頁(yè)已檸檬為主題，重點(diǎn)介紹了點(diǎn)介紹了設(shè)計(jì)項(xiàng)目、產(chǎn)品理念、產(chǎn)品特性、團(tuán)隊(duì)組成、關(guān)鍵技術(shù)等模塊。版面設(shè)計(jì)美觀，鏈接四通八達(dá)，圖文并茂，聲色俱佳，讓你在瀏覽網(wǎng)頁(yè)的同時(shí)享受軟件帶給你的的歡樂(lè)，絕對(duì)值得一看。 一、網(wǎng)頁(yè)設(shè)計(jì)1. 首頁(yè)布局我們的布局分為導(dǎo)航條和項(xiàng)目?jī)?nèi)容等。團(tuán)隊(duì)介紹，我們的團(tuán)隊(duì)為輕氧工作室，輕代表年輕，青春。氧，是英文youny的諧音，象征著生命和活力。具體布局如下 首頁(yè)是一個(gè)靜態(tài)網(wǎng)頁(yè)，由一些圖片，和文字介紹組成，這些頁(yè)面是用模板做的，上面的圖片，導(dǎo)航條以及下面的版權(quán)聯(lián)系方式是不用改變的，都保持著首頁(yè)的風(fēng)格，背景圖一樣，字體與樣式一樣，圖

2、片風(fēng)格一樣。中間是兩個(gè)可編輯區(qū)域。在所有的頁(yè)面導(dǎo)航條下面，插入層對(duì)象制作了一個(gè)層動(dòng)畫(huà)，來(lái)回移動(dòng)的層，里面存放日期，利用行為面板為此層添加了鼠標(biāo)行為，做布局大多使用表格布局，使用了少量的css樣式，字體，字號(hào)，顏色都統(tǒng)一套用相應(yīng)的樣式。2.版面設(shè)計(jì)網(wǎng)頁(yè)的版式設(shè)計(jì)同報(bào)刊雜志等平面媒體的版式設(shè)計(jì)有很多共同之處，它在網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)中占據(jù)著重要的地位。所謂網(wǎng)頁(yè)的版式設(shè)計(jì)，是在有限的屏幕空間上將視聽(tīng)多媒體元素進(jìn)行有機(jī)的排列組合，將理性思維個(gè)性化的表現(xiàn)出來(lái)，是一種具有個(gè)人風(fēng)格和藝術(shù)特色的視聽(tīng)傳達(dá)方式。它在傳達(dá)信息的同時(shí)，也產(chǎn)生感官上的美感和精神上的享受。 但網(wǎng)頁(yè)的排版與書(shū)籍雜志的排版又有很多差異。印刷品都有

3、固定的規(guī)格尺寸，網(wǎng)頁(yè)則不然，它的尺寸是由讀者來(lái)控制的。這使網(wǎng)頁(yè)設(shè)計(jì)者不能精確控制頁(yè)面上每個(gè)元素的尺寸和位置。而且，網(wǎng)頁(yè)的組織結(jié)構(gòu)不像印刷品那樣為線性組合，這給網(wǎng)頁(yè)的版式設(shè)計(jì)帶來(lái)了一定的難度。二、 目錄設(shè)計(jì) 由于網(wǎng)站較為簡(jiǎn)單，不需要太復(fù)雜的系統(tǒng)支持，所以我采用iis系統(tǒng)。設(shè)計(jì)一個(gè)主文件夾，在里面加入img圖片文件夾和mdb的數(shù)據(jù)庫(kù)文件夾，這樣的結(jié)構(gòu)就已經(jīng)可以滿足要求了，節(jié)約資源。三、網(wǎng)站設(shè)計(jì)的技術(shù)解決方案 1.表格的設(shè)計(jì) 我們?cè)谶@次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的表格，所以怎么樣建立表格是關(guān)鍵。dreamweaver 8是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱手兵器，也是眾多入門者的捷徑。特別是其在表格方面的出色表現(xiàn)，更受

4、青睞。大家都知道，沒(méi)有表格的幫助，很難組織出一個(gè)布局協(xié)調(diào)合理的頁(yè)面。但在使用表格時(shí)，一些細(xì)節(jié)問(wèn)題往往成為入門者的攔路虎，令人望而卻步。 （1）插入表格 點(diǎn)擊“表格”菜單中的“插入表格”，在彈出的對(duì)話框中可以對(duì)所需表格的行列數(shù)及邊框?qū)傩赃M(jìn)行設(shè)置。插入一個(gè)大概樣子的表格，自己調(diào)整它在整個(gè)網(wǎng)頁(yè)中的位置，為之后填充內(nèi)容做好準(zhǔn)備。 （2）表格屬性的設(shè)置 設(shè)置表格屬性的時(shí)候，一定要讓光標(biāo)停留在該表格中才能使用。比如可用右鍵在表格中點(diǎn)一下，選“表格屬性”，彈出對(duì)話框。分別介紹其中的幾個(gè)要點(diǎn)： a.對(duì)齊與浮動(dòng)：先制作一個(gè)表格，然后分別選擇該框中的各項(xiàng)，察看控制效果。 b.單元格邊距：隨便改變數(shù)值，察看控制效果

5、，比如調(diào)整數(shù)值到8，看一下表格是否別有情趣了？ c.使用暗邊框、亮邊框顏色設(shè)置，結(jié)合表格線粗細(xì)及單元格邊距，聯(lián)合變化，看看能制作出什么效果。 d.指定寬度和指定高度項(xiàng)的設(shè)置，主要是為了控制頁(yè)面中表格的大小。一般在頁(yè)面視圖下用鼠標(biāo)拖動(dòng)，這里的數(shù)值就會(huì)發(fā)生變化。一些小的細(xì)節(jié)，用鼠標(biāo)拖動(dòng)難以準(zhǔn)確控制時(shí)，可以從這里進(jìn)行控制。選擇百分比控制可以讓頁(yè)面隨瀏覽者電腦的不同分辨率自動(dòng)調(diào)整寬度，充滿屏幕。選擇像素則根據(jù)瀏覽者電腦的分辨率，有時(shí)會(huì)超出屏幕顯示范圍，需左右拖動(dòng)才能完整瀏覽；而有些時(shí)候，又不能充分利用屏幕的顯示區(qū)域。網(wǎng)頁(yè)制作中我們選擇選擇兩者都有，看情況。 2.網(wǎng)頁(yè)中的圖像 圖像傳輸是www的真正魅力

6、所在，它與文字相比具有顯著的優(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ì)適得其反）。(1)網(wǎng)頁(yè)中插入圖像 利用dreamweaver 8可以方便地在網(wǎng)頁(yè)中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對(duì)圖像進(jìn)行編輯。在網(wǎng)頁(yè)中加入圖像的操作非常簡(jiǎn)單： a.新建一個(gè)空白網(wǎng)頁(yè)，把光標(biāo)定位在網(wǎng)頁(yè)的開(kāi)始位置。 b.打開(kāi)“插入”菜單，選擇“圖片”菜單項(xiàng)，在子菜單中選擇“來(lái)自文件”菜單項(xiàng)，或者單擊工具欄中的圖片工具圖標(biāo)

7、，彈出一個(gè)“圖片”對(duì)話框。 c.在此對(duì)話框中單擊“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話框。 d.在“選擇文件”對(duì)話框的文件列表中選擇某個(gè)圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中插入圖像后我們就可以對(duì)圖像的各種屬性進(jìn)行設(shè)置了。 (2)圖像的屬性設(shè)置 a.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個(gè)快捷菜單，在菜單中選擇“圖片屬性”菜單項(xiàng)，出現(xiàn)一個(gè)“圖片屬性”對(duì)話框. b.打開(kāi)“外觀”選項(xiàng)卡。 設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時(shí)需要將圖像和文字分開(kāi)，且兩者互不影響。比如在網(wǎng)頁(yè)左邊插入一幅圖像，要求右邊的文字就像沒(méi)有圖像時(shí)

8、可以多行輸入，這就要通過(guò)設(shè)置圖像的環(huán)繞方式來(lái)實(shí)現(xiàn)。編輯圖像大?。涸赿reamweaver 8中，當(dāng)在網(wǎng)頁(yè)中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來(lái)的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡(jiǎn)單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動(dòng)圖像邊框，可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿意的尺寸。 設(shè)置圖像縮放比例：網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)重要原則就是網(wǎng)頁(yè)的兼容性，對(duì)于不同的瀏覽器或者不同的分辨率，不管是800600的窗口，還是1024768的窗口，網(wǎng)頁(yè)都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。 （3）編輯網(wǎng)頁(yè)中的圖像 在dreamweaver 8中，可以使用“圖片”工具欄中的各種工具對(duì)網(wǎng)頁(yè)中的圖像進(jìn)行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。 四、網(wǎng)站的發(fā)布和維護(hù)我所做的只是一個(gè)小網(wǎng)站，從節(jié)約成本的角度出發(fā)，不需要單獨(dú)的服務(wù)器，只需要在別人的服務(wù)器上租借一點(diǎn)空間，先在互聯(lián)網(wǎng)上申請(qǐng)或購(gòu)買一個(gè)域名，再將