網(wǎng)頁(yè)設(shè)計(jì)入門與提高第16章課件

第16章小型企業(yè)網(wǎng)站制作16.1分析圖紙本實(shí)例是一個(gè)研發(fā)雨水利用技術(shù)的公司網(wǎng)站，其頁(yè)面設(shè)計(jì)如圖所示。網(wǎng)站首頁(yè)設(shè)計(jì)圖

網(wǎng)站內(nèi)容頁(yè)設(shè)計(jì)圖

16.1.1設(shè)計(jì)分析

該網(wǎng)站的主色調(diào)是藍(lán)色、灰色和白色，配以少量的黃綠色，文字為黑色。藍(lán)色非常純凈，通常讓人聯(lián)想到“海洋”、“水”，符合公司的主題。并且“藍(lán)色”代表的是沉穩(wěn)、理智、準(zhǔn)確，在商業(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技，效率的企業(yè)形象。黃綠色的使用，則使整個(gè)網(wǎng)站顯得朝氣蓬勃。對(duì)于頁(yè)面的重點(diǎn)部分“公司簡(jiǎn)介”等，采用了白色和淺灰色作為背景色，使得其非常醒目凸出；黑色的文字清晰且容易辨認(rèn)。

網(wǎng)站配色方案

16.1.2布局分析

搞清楚網(wǎng)頁(yè)的布局，對(duì)于后面搭建頁(yè)面非常重要，因?yàn)檫@將指導(dǎo)我們?nèi)绾尾们性O(shè)計(jì)圖以及如何組裝HTML頁(yè)面。當(dāng)拿到設(shè)計(jì)稿以后，不要忙于著手切圖，先看一下總體的布局設(shè)計(jì)，分析一下版式結(jié)構(gòu)，對(duì)于以后HTML頁(yè)面的搭建方法有一個(gè)大體的規(guī)劃以后，再根據(jù)考慮好的規(guī)劃來(lái)切圖。本實(shí)例中，整個(gè)網(wǎng)站的布局十分簡(jiǎn)單明了，主要是為了突出內(nèi)容。首頁(yè)內(nèi)容頁(yè)

16.1.2布局分析1.首頁(yè)觀察首頁(yè)設(shè)計(jì)圖，可以明顯看出，首頁(yè)主要分為左右兩部分，左邊是網(wǎng)站標(biāo)識(shí)和研發(fā)項(xiàng)目，右邊是公司簡(jiǎn)介、欄目列表和版本選擇。具體分析如下：頁(yè)面整體有一個(gè)灰色的背景色，內(nèi)容部分同頁(yè)面頂部有一段距離。頁(yè)面整體在窗口中左右居中顯示。公司項(xiàng)目介紹部分的背景是一張背景圖，并且下邊有一條白色的虛線。網(wǎng)站標(biāo)識(shí)、公司定位和語(yǔ)言版本選擇部分，都采用了特殊字體，需要以圖片的形式放置在網(wǎng)頁(yè)上。重點(diǎn)內(nèi)容部分的藍(lán)色背景上有白線的底紋。欄目列表部分為無(wú)序列表，類型為“方塊”。16.1.2布局分析

為了實(shí)現(xiàn)頁(yè)面的整體居中，需要一個(gè)最外層（id=main）來(lái)放置所有的內(nèi)容，如圖所示。main層16.1.2布局分析

主要內(nèi)容為左右并列的兩個(gè)層，左邊為放置標(biāo)識(shí)和公司研發(fā)項(xiàng)目的層（id=left），右邊為放置重點(diǎn)內(nèi)容和語(yǔ)言版本選擇的層（id=box）。left層box層16.1.2布局分析公司標(biāo)識(shí)層（id=logo）和研發(fā)項(xiàng)目層（id=explain）為上下順序。

logo層explain層16.1.2布局分析重點(diǎn)內(nèi)容層（id=text）和語(yǔ)言版本選擇層（id=ver）為上下順序。

text層ver層16.1.2布局分析2.內(nèi)容頁(yè)觀察內(nèi)容頁(yè)設(shè)計(jì)圖，可以看出頁(yè)面主要分為上下兩個(gè)部分。上部分為“頁(yè)頭部”，下部分為主要內(nèi)容部分。這種版式是小型網(wǎng)站比較常用的版式，其中下部分分為左右兩部分，左窄右寬。具體分析如下：

頁(yè)面整體有一個(gè)灰色的背景色，內(nèi)容部分同頁(yè)面頂部有一段距離。頁(yè)面整體在窗口中左右居中顯示。網(wǎng)頁(yè)頭的部分，背景是一張背景圖，并且下邊有一條白色的虛線。網(wǎng)站標(biāo)識(shí)和語(yǔ)言版本選擇部分都采用了特殊字體，需要以圖片的形式放置在網(wǎng)頁(yè)上。左邊的欄目選擇部分有草綠色的左邊框，并且行與行之間有間隙。雖然欄目選擇部分具有底色和邊框色，但是其組織形式還是無(wú)序列表，所以，此處的結(jié)構(gòu)同首頁(yè)一樣，只是需要設(shè)置不同的外觀樣式。

16.1.2布局分析

為了實(shí)現(xiàn)頁(yè)面的整體居中，需要一個(gè)最外層（id=main）來(lái)放置所有的內(nèi)容。

main層16.1.2布局分析

主要內(nèi)容為上下兩個(gè)層，上邊為放置標(biāo)識(shí)和語(yǔ)言版本選擇的層（id=header），下邊為放置欄目選擇、內(nèi)容和客服專線的層（id=box）。

header層box層16.1.2布局分析企業(yè)標(biāo)識(shí)層（id=logo）和語(yǔ)言選擇層（id=ver）為左右順序。

logo層ver層16.1.2布局分析

放置欄目的層（id=menu）為左對(duì)齊，內(nèi)容層（id=text）和客服專線層（id=footer）則為右對(duì)齊。

menu層text層footer層16.2拆分圖紙

通過(guò)觀察圖紙，已經(jīng)對(duì)網(wǎng)頁(yè)的版式與顏色有了基本的認(rèn)識(shí)，下面要把制作HTML頁(yè)面需要的“原料”分離出來(lái)。這些原料一般包括尺寸、顏色、背景圖、裝飾性的線框、特殊字體的文字、裝飾圖片等。提取顏色拆分首頁(yè)拆分內(nèi)容頁(yè)

拆分圖紙16.2.1提取顏色1.基本配色因?yàn)楸緦?shí)例所使用的顏色較少，圖片也比較簡(jiǎn)潔，所以顏色的提取也相對(duì)簡(jiǎn)單。

首頁(yè)配色分析內(nèi)容頁(yè)配色分析16.2.1提取顏色未訪問(wèn)過(guò)的鏈接（link）已訪問(wèn)過(guò)的鏈接（visited）鼠標(biāo)懸停（hover）當(dāng)前激活鏈接（active）#000000，無(wú)下劃線#666666，無(wú)下劃線#a9d418，無(wú)下劃線無(wú)定義2.超鏈接配色超鏈接配色，包括未訪問(wèn)過(guò)的鏈接（link）、已訪問(wèn)過(guò)的鏈接（visited）、鼠標(biāo)懸停（hover）以及當(dāng)前激活鏈接（active）4種。

首頁(yè)超鏈接配色表內(nèi)容頁(yè)超鏈接配色表未訪問(wèn)過(guò)的鏈接（link）已訪問(wèn)過(guò)的鏈接（visited）鼠標(biāo)懸停（hover）當(dāng)前激活鏈接（active）#FFFFFF，無(wú)下劃線#999999，無(wú)下劃線#a9d418，無(wú)下劃線無(wú)定義16.2.2拆分首頁(yè)1.提取尺寸這里所說(shuō)的尺寸，包括寬度（width）、高度（height）、邊界（margin）、填充（padding）、邊框（border）以及XY坐標(biāo)等。首頁(yè)尺寸16.2.2拆分首頁(yè)2.分離背景圖之所以先要分離背景圖，是因?yàn)楸尘皥D一般包括大面積的重復(fù)圖案區(qū)，而背景圖上面一般還會(huì)有其他的圖片或者文字，所以需要先把背景圖分離出來(lái)，然后再對(duì)背景圖上面的圖片或文字進(jìn)行處理。瀏覽器會(huì)自動(dòng)對(duì)背景圖進(jìn)行重復(fù)顯示，可以通過(guò)設(shè)定CSS來(lái)控制背景圖的顯示方式，橫向重復(fù)、縱向重復(fù)或者重復(fù)。靈活的使用背景圖，就可以用比較小的圖片來(lái)實(shí)現(xiàn)比較大的有規(guī)律的圖案，這樣既提高了頁(yè)面的顯示速度，又達(dá)到了美觀的目的。16.2.2拆分首頁(yè)2.分離背景圖main層背景explain層背景box層背景16.2.2拆分首頁(yè)3.分離圖片網(wǎng)站標(biāo)志特殊字體文字16.2.3拆分內(nèi)容頁(yè)1.提取尺寸根據(jù)前面對(duì)內(nèi)容頁(yè)所做的布局分析，在這里，將對(duì)每一個(gè)層以及層里面的內(nèi)容進(jìn)行尺寸的提取。

內(nèi)容頁(yè)尺寸menu部分尺寸16.2.3拆分內(nèi)容頁(yè)2.分離背景圖header層背景16.2.3拆分內(nèi)容頁(yè)3.分離圖片網(wǎng)站標(biāo)志16.3組裝

在制作HTML頁(yè)面之前，需要先建立一個(gè)站點(diǎn)。在計(jì)算機(jī)中建立一個(gè)文件夾，將其命名為“site”（文件夾名稱可以根據(jù)站點(diǎn)的內(nèi)容自己設(shè)置，但不能使用中文名稱）。在site文件夾中再建立一個(gè)文件夾，命名為“images”，專門放置網(wǎng)站中要用到的圖片?，F(xiàn)在，將前幾步截取出來(lái)的圖片，放置到images

文件夾中。如果網(wǎng)站還應(yīng)用到其他的元素，也將其分類放置，例如：flash動(dòng)畫放置到“flash”文件夾；音頻和視頻文件放置到“media”文件夾。網(wǎng)頁(yè)文件如果比較少，可以直接放置到site文件夾下；如果頁(yè)面比較多，也可以為每個(gè)頁(yè)面單獨(dú)建立文件夾。本實(shí)例中直接放置在site文、件夾下即可。

16.3.1定義站點(diǎn)

將建立好的文件夾，用Dreamweaver定義成站點(diǎn)，這樣軟件就會(huì)對(duì)這個(gè)站點(diǎn)內(nèi)的文件進(jìn)行管理，比如自動(dòng)更新鏈接、創(chuàng)建更新模板等，同時(shí)也方便對(duì)站點(diǎn)內(nèi)的文件進(jìn)行管理和操作，還可以共享文件以及將站點(diǎn)文件傳輸?shù)絎eb服務(wù)器等。站點(diǎn)16.3.2組裝首頁(yè)1.整體布局left層box層

main層logo層explain層text層ver層

插入層時(shí)，與其前一個(gè)層相比較。第一個(gè)層選擇在插入點(diǎn)；包含關(guān)系的層選擇在開始標(biāo)簽之后；同級(jí)關(guān)系的層選擇在標(biāo)簽之后。16.3.2組裝首頁(yè)2.插入內(nèi)容本實(shí)例的內(nèi)容比較簡(jiǎn)單，只有少量的文字和圖片。從上面的層次關(guān)系圖中，我們可以發(fā)現(xiàn)只有最末端的層內(nèi)，才有內(nèi)容，因此我們先整理一下代碼。選擇沒有內(nèi)容的層，層保留，但是將里面的內(nèi)容清空。有內(nèi)容的層，插入相應(yīng)的內(nèi)容（網(wǎng)頁(yè)元素）。logo層——圖像explain層——圖像+文本（段落）text層——文本（段落）+列表ver層——圖像16.3.2組裝首頁(yè)3.設(shè)置CSS

為頁(yè)面設(shè)置CSS樣式，通常包含以下幾個(gè)步驟：定義通用規(guī)則定義<body>標(biāo)簽定義各個(gè)層以及層里面的內(nèi)容尺寸：長(zhǎng)、寬背景：背景圖、背景色位置：左中右、上中下、填充、邊界邊框：線型、寬度、顏色定義超鏈接16.3.3內(nèi)容頁(yè)模板1.整體布局header層box層

main層logo層ver層menu層text層footer層16.3.3內(nèi)容頁(yè)模板2.插入內(nèi)容在logo層中插入圖片“s_logo.gif”，設(shè)置超鏈接。在ver層中插入圖片“ver_en.gif”。在menu層插入庫(kù)元素“menu.lbi”。在“資源”面板的“庫(kù)”中選擇“menu”，點(diǎn)擊面板左下角的“插入”按鈕。在text層插入文本。其中包括標(biāo)題與內(nèi)容。scn_1.html文件中，內(nèi)容形式為無(wú)序列表。scn_2.html文件中，內(nèi)容形式為表格。scn_3.html文件中，內(nèi)容形式為段落。scn_4.html文件中，內(nèi)容形式為無(wú)序列表。在footer層輸入文字“客服專線：4006-501-510”。16.3.3內(nèi)容頁(yè)模板3.設(shè)置CSS

為頁(yè)面設(shè)置CSS樣式，通常包含以下幾個(gè)步驟：定義通用規(guī)則定義<body>標(biāo)簽定義各個(gè)層以及層里面的內(nèi)容尺寸：長(zhǎng)、寬背景：背景圖、背景色