網頁設計實訓項目八——框架佈局
一、實訓目的
1、掌握框架網頁的創建和編輯操作
2、掌握框架內的超鏈接
二、實訓內容
1、利用PS製作所需要的圖片素材
（1）廣告條ad.jpg
（2）導航背景圖bg.jpg
2、在DW中運用框架進行頁面佈局。
三、實訓步驟
(一）利用PS製作素材
圖片ad製作
1、新建文件寬1024高180像素
2、打開一個素材，適當剪切，拖入文件中，適當調整
3、添加文字並加入描邊效果
效果如圖：
圖片bg製作
1、新建文件寬160高60像素
2、新建圖層，添加一個圓角矩形，填充漸變色
3、爲矩形添加陰影效果
效果如圖：
（二）在DW中設計框架頁面
1、新建站點並進行相關設置
2、新建文件，插入面板切換到佈局中，插入框架（頂端和嵌套的左側框架）
3、對框架頁面進行保存（注意保存的選擇）
4、在頂端框架中插入圖片ad.jpg，居中對齊，如圖：
5、在左側的框架中插入表格7行1列，寬度160像素，其它均爲0，右對齊。
6、選擇所有單元格，設置高爲60像素，爲每一個單元格添加背景圖片bg.jpg，每一個單元格添加相關文字
如圖所示：
7、（在右側框架中可自行添加相關文字圖片等，適當進行美化）
在右側框加中插入表格3行1列，寬度850像素，f填充爲30，其他均爲0
表格第一行，添加相關文字
表格第二行，製作一條細線，方法如下：
在單元格中設高爲1，添加背景色，選擇拆分視圖，在代碼中去掉 ，如圖所示：
以同樣的方法，同學們可以嘗試設計豎的細線。
表格第三行，輸入相關文字。
完成頁面如圖：
8，多建幾個頁面，在框架中分別建立超級鏈接。
注意：目標設爲mainFrame