網(wǎng)頁制作報告

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

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

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

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

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

6、所在，它與文字相比具有顯著的優(yōu)點：一是直觀，人眼觀看圖像時接受信息的速度遠(yuǎn)遠(yuǎn)超過觀看文字時接受信息的速度；二是能更清楚地表達(dá)細(xì)節(jié)內(nèi)容。正是由于這些優(yōu)點，所以在進(jìn)行網(wǎng)頁設(shè)計時圖像很受歡迎。如果網(wǎng)頁做得像一幅風(fēng)景畫，瀏覽者一定會流連忘返（如果圖片很大，效果會適得其反）。(1)網(wǎng)頁中插入圖像 利用dreamweaver 8可以方便地在網(wǎng)頁中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對圖像進(jìn)行編輯。在網(wǎng)頁中加入圖像的操作非常簡單： a.新建一個空白網(wǎng)頁，把光標(biāo)定位在網(wǎng)頁的開始位置。 b.打開“插入”菜單，選擇“圖片”菜單項，在子菜單中選擇“來自文件”菜單項，或者單擊工具欄中的圖片工具圖標(biāo)

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

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