一、建立站點(非常重要)
1、建立站點檔案夾，命名為“座位号_班級_姓名”，列：01_19信管_2班_某某某
圖1-1
圖1-2
2建立CSS檔案夾、檔案夾中的CSS檔案命名為index.CSS
3網頁檔案命名為index.HTML
4圖檔素材檔案夾命名為images
圖1-3
5将考試給定的素材檔案拷貝到images目錄中
圖1-4
二、使用div+css進行布局設計
先按照圖2-1開始建立div布局
圖、2-1
2.1、使用外部式(導入式)CSS美化網頁
打開index.html檔案，在
内輸入link語句，導入外部樣式檔案
2.2、設計各個子產品的div布局
根據各個子產品的樣式(zlass)名稱設定為：
子產品1：top
子產品2：nav
子產品3：main
子產品3-1：main_l
子產品3-2：main_r
子產品4：bottom
在設定好的div中使用對應的類選擇器，如圖2-2
2-2
2.3在index.css中設定各個子產品對應選擇器的尺寸
尺寸要求如下(機關：像素)見圖2-3
子產品1的尺寸：100%x95
子產品2的尺寸：100%x50
子產品3的尺寸：1200x500
子產品3-1的尺寸：720x450
子產品3-2的尺寸：380x450
子產品4的尺寸：100%x138
圖、2-3
2.4、用background-color在類選擇器中給各個div加上背景色
根據圖2-1，在類選擇器中使用background-color依次給各個div上底色
2.5、main、main_l、main_right三個div的設定
(1)、通過設定子產品3的外邊距，實作子產品3的螢幕居中，
圖2-5-1
(2)、用浮動屬性把子產品3-1、3-2嵌入子產品3中，
圖2-5-2
(3)、設定main_l和main_right的外邊距，
圖2-5-3
布局的基本樣式效果圖
三、往div中填充内容
3.1頂部圖檔插入
見圖3-1-1，圖3-1-2
圖3-2-1
3-2-2
3.2、在導航欄插入的圖檔和超連結
(1)、将圖檔插入導航欄，圖3-2-1，3-2-2
圖3-2-3
3-2-4
(2)、将圖檔和文字左浮動，圖3-2-3、3-2-4
圖3-2-3
3-2-4
(3)、把超連結中無序清單的原點去掉，下劃線去掉，改為白色字型，大小設定為16px
(4)、把字型居中
3.3、子產品3-1和子產品3-2的設定
(1)、将圖檔放入子產品3-1
3-1
(2)、在子產品3-2中編輯對應的表單控件。
在index.css中定義類選擇器，并在index.html中對應的表單輸入框中使用該樣式
.input_box{width:200px;height:24px}
(3)、設定注冊按鈕的樣式，尺寸150x40，字型大小為18px，顔色設定為：#09
(4)、設定表格的單元格間距，并把背景顔色去掉
3.4在頁尾加上圖檔
最終完成效果：