1 內(nèi)容：設(shè)計(jì)并制作一個(gè)個(gè)人網(wǎng)站。欄目設(shè)置：因?yàn)闀r(shí)間的原因，僅包括以下幾個(gè)欄目1、個(gè)人簡(jiǎn)介介紹個(gè)人的基本情況，年齡、學(xué)歷、學(xué)位、畢業(yè)院校、所學(xué)專業(yè)、身高、體重等等。2、成長(zhǎng)經(jīng)歷介紹個(gè)人的成長(zhǎng)經(jīng)歷，從初

1 內(nèi)容：

設(shè)計(jì)并制作一個(gè)個(gè)人網(wǎng)站。

欄目設(shè)置：

因?yàn)闀r(shí)間的原因，僅包括以下幾個(gè)欄目

1、個(gè)人簡(jiǎn)介

介紹個(gè)人的基本情況，年齡、學(xué)歷、學(xué)位、畢業(yè)院校、所學(xué)專業(yè)、身高、體重等等。

2、成長(zhǎng)經(jīng)歷

介紹個(gè)人的成長(zhǎng)經(jīng)歷，從初中起學(xué)習(xí)、社會(huì)實(shí)踐和獲得榮譽(yù)情況。

3、興趣愛(ài)好

介紹個(gè)人的興趣愛(ài)好。

4、個(gè)人特長(zhǎng)

介紹個(gè)人的特長(zhǎng)，文字 圖片 視頻。

5、個(gè)人相冊(cè)

版面設(shè)置

一般來(lái)說(shuō)網(wǎng)站的結(jié)構(gòu)為倒樹(shù)的結(jié)構(gòu)

網(wǎng)頁(yè)的類型可分為：首頁(yè)、欄目頁(yè)、內(nèi)容頁(yè)三種。其中欄目頁(yè)又可分為單頁(yè)和列表頁(yè)兩種。 對(duì)于個(gè)人網(wǎng)站，除了個(gè)人相冊(cè)是列表頁(yè)外，各欄目基本上都是單頁(yè)類型的欄目。

網(wǎng)頁(yè)的設(shè)計(jì)比較常用的方法是首先在photoshop 中作出效果圖，然后再切片做成html 網(wǎng)頁(yè)。這里，我們用word 表格來(lái)做設(shè)計(jì)。

首頁(yè)的設(shè)計(jì)：

個(gè)人相冊(cè)列表頁(yè)

布局知識(shí)介紹

網(wǎng)頁(yè)布局有兩種方法：1、div css 2、用table 標(biāo)簽布局。

本文采用第2種方法，這也早期的網(wǎng)站常用的布局方式。特點(diǎn)是簡(jiǎn)單易學(xué)。缺點(diǎn)是代碼冗余，不易于修改。

table 標(biāo)簽的用法

首先我們來(lái)看一個(gè)九宮格的代碼。

用table 布局的方法：

1、單個(gè)table ，行列合并

2、table 的嵌套

用table 的嵌套操作方法，易于修改和維護(hù)。

方法1：創(chuàng)建一個(gè)6行3列的table ，然后合并3、4、5行的第1列，合并1、2、6行的所有列，合并第5行的2、3列。

代碼如下：

方法2：

創(chuàng)建4行1列的表格，然后在第3行嵌入1個(gè)1行2列的表格，在這個(gè)表格的第列嵌入一個(gè)3行2列的表格，并合并其第3行。

2、網(wǎng)頁(yè)制作步驟及要點(diǎn)

2.1首頁(yè)

（1）banner 的設(shè)計(jì)與制作

（2）菜單

代碼：

首頁(yè)

個(gè)人簡(jiǎn)介

成長(zhǎng)經(jīng)歷

興趣愛(ài)好

個(gè)人特長(zhǎng)

相冊(cè)

（3）主體部分

放置一個(gè)歡迎動(dòng)畫(huà)。操作方法非常簡(jiǎn)單，點(diǎn)擊“插入》媒體》flash ”（快捷方式ctrl alt f）插入制作好的flash 即可。

（4）頁(yè)腳部分

輸入一些版權(quán)或者聯(lián)系方式等信息。

2.2 單頁(yè)形式的欄目頁(yè)

Banner 、menu 和foot 可以直接從首頁(yè)的源文件復(fù)制，內(nèi)容根據(jù)設(shè)計(jì)修改。

要點(diǎn)：

（1）通過(guò)嵌套的表格布局。

（2）圖文排版（css 樣式控制）

CSS 概述：

?

?

?

?

?

?

? CSS 指層疊樣式表 (C ascading S tyle S heets) 樣式定義如何顯示 HTML 元素 樣式通常存儲(chǔ)在樣式表中 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題 外部樣式表可以極大提高工作效率 外部樣式表通常存儲(chǔ)在 CSS 文件中 多個(gè)樣式定義可層疊為一

樣式表極大地提高了工作效率

樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標(biāo)簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的 CSS 文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。

由于允許同時(shí)控制多重頁(yè)面的樣式和布局，CSS 可以稱得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開(kāi)發(fā)者，你能夠?yàn)槊總€(gè) HTML 元素定義樣式，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。

多重樣式將層疊為一個(gè)

樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。

層疊次序

當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？

一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。

i. 瀏覽器缺省設(shè)置

ii. 外部樣式表

iii. 內(nèi)部樣式表（位于 標(biāo)簽內(nèi)部）

iv. 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明： 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。

本文只介紹用到樣式，詳細(xì)的說(shuō)明請(qǐng)參考相關(guān)資料。

1）css 樣式的三種寫(xiě)法

外部鏈接

將樣式書(shū)寫(xiě)在擴(kuò)展名為css 的文本文件中，并通過(guò)link 標(biāo)簽鏈接。

上述語(yǔ)句，鏈接了images 目錄下的文件名為css.css 的外部樣式文件。

內(nèi)部樣式表

在HTML 內(nèi)以標(biāo)簽定義的樣式，例如：

內(nèi)聯(lián)樣式

段落中為紅色的字體

以style 屬性內(nèi)聯(lián)。

本文用于排版的樣式

1、行高

line-height:150;/*設(shè)置行高為字體的1.5倍*/

2、縮進(jìn)

text-indent:2em;/*首行縮進(jìn)2字符*/

3、內(nèi)邊距

Padding:10px 10px 5px 5px; 分別設(shè)置上、右、下、左的內(nèi)邊距為10像素、10像素、5像素、5像素。

4、設(shè)置字體

Font-size:13px; 大小13像素

Color:#000000; 字體為黑色

5、邊框

Border-bottom:1px solid #ccc; 底部1像素的實(shí)心顏色為#ccc的邊線。

Border:1px solid #ccc; 1像素的實(shí)心顏色為#ccc的邊框。

其中Border-bottom 為底部，Border-top 為頂部，Border-left 為左邊，Border-right 為右邊。

2.3 列表形式的欄目頁(yè)

Banner 、menu 和foot 可以直接從首頁(yè)的源文件復(fù)制，內(nèi)容部分做成左右結(jié)構(gòu)，其中左部可以放置圖片、文字、鏈接等（視具體設(shè)計(jì)而定），右部為圖片列表。根據(jù)設(shè)計(jì)圖片列表以3*3的表格方式展示。

具體操作見(jiàn)視頻。

2.4 欄目?jī)?nèi)容頁(yè)

設(shè)計(jì)方法與單頁(yè)形式的列表頁(yè)相同。制作方法參考2.2, 以及源文件。

3. 文檔資源

操作視頻和源文件在生活百科網(wǎng)站處可以下載，地址：http://www.ishbk.net/?p=935