DREAMWEAVER+CS4+網(wǎng)頁設(shè)計(jì)與制作指南第14章

1、第第14章章 網(wǎng)頁制作常用技巧網(wǎng)頁制作常用技巧現(xiàn)在網(wǎng)頁制作工具越來越接近可視化，學(xué)習(xí)起來其實(shí)并不難，通過對(duì)dreamweaver cs4的具體操作和使用，相信可以使用dw8制作出相對(duì)簡(jiǎn)單的網(wǎng)頁。但是會(huì)做不等于作品就能使客戶滿意。在制作網(wǎng)頁的過程中，需要掌握一些基本的常用技巧。本章重點(diǎn)內(nèi)容：l網(wǎng)頁制作要領(lǐng)l網(wǎng)頁制作規(guī)范l網(wǎng)頁設(shè)計(jì)色彩搭配14.1 網(wǎng)頁制作要領(lǐng)網(wǎng)頁制作要領(lǐng)在設(shè)計(jì)網(wǎng)頁時(shí)，需要掌握幾個(gè)要領(lǐng)：l標(biāo)題llogol網(wǎng)頁導(dǎo)航l圖片處理l布局l內(nèi)容lcss樣式設(shè)置14.2網(wǎng)頁制作規(guī)范網(wǎng)頁制作規(guī)范互聯(lián)網(wǎng)上的網(wǎng)頁不勝枚舉，但是一個(gè)設(shè)計(jì)精美、內(nèi)容豐富的網(wǎng)站更能吸引客戶的眼球，網(wǎng)頁內(nèi)容是首要的原因，其次

2、是網(wǎng)頁色彩搭配及網(wǎng)頁排版布局等因素，都是影響網(wǎng)站速度和流量的關(guān)鍵因素。設(shè)計(jì)師在制作網(wǎng)頁的過程要注意使用網(wǎng)頁制作規(guī)范。14.2.1 網(wǎng)站目錄建立規(guī)范網(wǎng)站目錄建立規(guī)范一般在網(wǎng)站的根目錄下建立images、js、css、media、temp幾個(gè)子目錄，html文件一般放在網(wǎng)站根目錄下。14.2.2 注釋規(guī)范注釋規(guī)范在網(wǎng)頁的編碼中良好的注釋，會(huì)讓網(wǎng)頁清晰可讀，方便修改和供他人使用。同時(shí)，這也是一個(gè)很好的習(xí)慣，如果一個(gè)頁面中的代碼有很多行，在以后閱讀時(shí)，使用規(guī)范就能很方便地找到相關(guān)代碼。14.2.3 css樣式表書寫規(guī)范樣式表書寫規(guī)范l鏈接l首行縮進(jìn)l字母、數(shù)字的字體設(shè)置l行距l(xiāng)字號(hào)設(shè)置14.2.4 表

3、格代碼書寫規(guī)范表格代碼書寫規(guī)范在網(wǎng)頁中插入表格之前，盡量選用最佳的方案，表格的嵌套盡量控制在3層以內(nèi)，而且要盡量避免有“colspan”和“rowspan”兩個(gè)標(biāo)記，否則在以后插入行或列時(shí)，就會(huì)導(dǎo)致整個(gè)頁面的排版出現(xiàn)問題。一個(gè)網(wǎng)頁，要盡量避免用整個(gè)一張大表格，如果一個(gè)網(wǎng)頁是嵌套在一個(gè)大表格之內(nèi)，而表格之中又嵌套了多層表格，那么當(dāng)瀏覽者輸入網(wǎng)址時(shí)，首先面對(duì)的是一片持續(xù)很長(zhǎng)時(shí)間的空白，然后所有的網(wǎng)頁內(nèi)容才同時(shí)出現(xiàn)?？梢允褂脴?biāo)記，以便能夠使這個(gè)大表格分塊顯示，減少空白的等待時(shí)間。14.2.5 空格的使用規(guī)范空格的使用規(guī)范不同語種的文字之間應(yīng)該留有一個(gè)半角空格。在dw8的設(shè)計(jì)視圖中，使用鍵盤的空格鍵，

4、只能輸入一個(gè)半角空格，如果想用鍵盤的空格鍵來輸入更多的空格，可以切換到中文全角輸入狀態(tài)，但一般是不贊成這樣做，因?yàn)樵谟⑽淖址拢强崭駮?huì)變成亂碼。14.2.6 width和和height使用規(guī)范使用規(guī)范width和height的寫法也有統(tǒng)一的規(guī)范。 表格只有一列：width寫在標(biāo)簽內(nèi)。 表格只有一行：height寫在標(biāo)簽內(nèi)。 多行多列的表格：width和height寫在第一行或第一列的標(biāo)簽內(nèi)。14.2.7 網(wǎng)頁命名規(guī)范網(wǎng)頁命名規(guī)范對(duì)于網(wǎng)頁的命名也需要遵守一定的規(guī)則和規(guī)范。l默認(rèn)文件設(shè)置l網(wǎng)頁命名規(guī)范l文件改名14.2.8 圖片命名規(guī)范圖片命名規(guī)范網(wǎng)頁中所用的圖片命名也要遵循以下規(guī)范：l 盡

5、量使用英文或數(shù)字命名。l 名稱采用“頭+_尾”的形式。14.2.9 網(wǎng)頁大小網(wǎng)頁大小在瀏覽器中當(dāng)網(wǎng)頁全部下載完畢時(shí)，在頁面上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“屬性”命令，彈出“屬性“對(duì)話框，在對(duì)話框中可以查看網(wǎng)頁文件的大小。14.3 網(wǎng)頁設(shè)計(jì)色彩搭配網(wǎng)頁設(shè)計(jì)色彩搭配在網(wǎng)頁設(shè)計(jì)之初，首先要考慮的就是這個(gè)網(wǎng)站要確定的顏色，一般根據(jù)網(wǎng)站的類別和確定的網(wǎng)頁，進(jìn)行大致顏色取向，在頁面上，除白色為背景外大量使用的顏色，就是這個(gè)網(wǎng)頁的主體顏色。14.3.1 確定主體色確定主體色在制作中，一般會(huì)根據(jù)網(wǎng)站的內(nèi)容，為客戶選定一個(gè)主題色，再結(jié)合相關(guān)類別的網(wǎng)站確定所使用的色調(diào)?？蛻糁辽?，為客戶制作的網(wǎng)站，首先要滿

6、足客戶的需求，要確定客戶的顏色取向之后，再配以合理的色彩，這樣的網(wǎng)站才能滿足設(shè)計(jì)者和使用者的要求。14.3.2 選擇相近色選擇相近色在網(wǎng)頁配色時(shí)，盡量控制在3種色彩以內(nèi)，選擇了主體色之后，再配以相近的配色，如黃色配以淡黃色，深粉配以淡粉色，這樣容易使網(wǎng)頁色彩和諧統(tǒng)一。14.3.3 使用跳躍色使用跳躍色在網(wǎng)頁中，用來引導(dǎo)視線的顏色，可以使用一些跳躍色，比如一些細(xì)線、按鈕等，可以讓網(wǎng)頁增加靈活性，減少審美疲勞，整個(gè)頁面的整體選用淡灰色，電子投票部分選擇兩個(gè)藍(lán)色的按鈕，讓頁面看起來不至平淡。14.3.4 使用黑白色使用黑白色無論網(wǎng)站的主體色調(diào)是什么，都會(huì)使用到黑、白兩種顏色，適當(dāng)用白色調(diào)整網(wǎng)頁的空白區(qū)域，可以讓頁面布局更加科學(xué)合理。黑色與白色表現(xiàn)的是兩個(gè)極端的亮度，黑白搭配可以表現(xiàn)出強(qiáng)烈的藝術(shù)感，只要搭配得當(dāng)，所體現(xiàn)的效果往往會(huì)比彩色的頁面更能生動(dòng)展示個(gè)性，常用于現(xiàn)代派的站點(diǎn)當(dāng)中。14.4 本章小結(jié)本章小結(jié)網(wǎng)頁制作中，色彩的重要性不言自明，充分合理地運(yùn)用顏色，不光能讓網(wǎng)頁瀏覽速度加快，更能使整體設(shè)計(jì)從視覺效果上令人舒適，再配合以精細(xì)的制圖和網(wǎng)頁布局