需求
做一個介紹家鄉的網頁設計，用table進行布局，至少為三行兩列表格，包含文字、圖片、超連結、表單等元素，至少包含四頁。親愛的小夥伴，歡迎光臨《周末簡設》，有許多小夥伴給我留言，想了解我發布的網頁設計作品的製作過程，應小夥伴的要求，今天就給大家分享一篇網設作業製作的全過程，目的是和大家一起互相學習，當然長篇大論你不高興讀，我也不願意寫，我儘量用通俗的文字來描述，圖文結合，重點的地方我會圈出來，有不對的地方，歡迎指正。需求是四頁介紹家鄉的設計，為了縮減篇幅，我會分四篇文章分別介紹，今天的製作的是首頁，製作完成以後，我會把製作好的網頁文件和素材分享給大家。1、首頁我打算用的製作軟體是notepad++，瀏覽器用Google的Chrome首先新建demo文件夾，裡面再新建css文件夾、js文件夾和images文件夾。
css：存放外部樣式表
js：存放JavaScript文件
images：存放圖片素材
4、用notepad++打開index.html，現在裡面什麼都沒有首先要想好頁面的效果圖是怎樣的，然後才能布局頁面，本次首頁我打算簡單一點，採用table布局，左右居中設計，垂直分四層，上層為網頁標題，第二層為菜單，第三層佔位最大，為家鄉的照片，最後一層為頁腳。
先敲個基本的代碼框架
在body標籤中填充網頁展示的內容，先用table進行簡單布局
好了雙擊打開index.html,在瀏覽器看一下效果吧
額。。。這是什麼鬼，文字是顯示了，但是全部擁擠在一起，太醜了
為了方便調試，藉助css外表樣式表給table加上邊框，但是現在還沒有css文件，那麼就在css文件夾中新建一個style.css文件先
現在就往style.css裡面添加代碼吧
OK，瀏覽器刷新一下頁面，看一下效果
emmmm，怎麼沒有效果，還是和之前一樣
額。。。抓瞎。。。
好吧，原來是因為index.html頁面還沒有引用style.css這個樣式表
那麼就引用一下吧，正確的姿勢如下
再次刷新一下頁面
有效果了，可以繼續下一步調整了，下面可以稍微加快一點進度
首先調整一下table的寬度和高度
再調整一下標題、菜單、和頁腳的高度
讓文字居中顯示
繼續繼續。。。
更改標題，修改文字size，And 文字加粗
開始添加家鄉的圖片
將準備好的背景圖片拷貝到images文件夾中
引用圖片
更改頁腳，並修改文字size
調整位置，現在table靠左顯示，肯定不好看，需要居中顯示
給頁頭、頁腳和菜單欄加上背景色，並且優化配色
到這時候已經不再需要調試了，可以刪除表格邊框的代碼了
table,table tr td { border:1px solid red; /*設置表格邊框寬度1px，solid線條，邊框顏色為紅色*/}設置所有元素margin和padding為0，並給網頁加上背景色
*{ margin:0px; padding:0px; } body{ background:#EBEBEB; }感覺菜單欄的size、菜單欄的背景以及網頁標題和整體網頁還是不搭，再次優化一版
再加點js互動
最終定稿
百度雲下載
有需要的童鞋可以前去百度雲下載本次設計的全部源碼和素材
連結：https://pan.baidu.com/s/17hTH6Gg4h6WQmWALIW_ujw
提取碼：8yty