![網頁設計專案製作成員:鄭湘霖,吳宛軒,林雨萱 網頁設計專案製作成員:鄭湘霖,吳宛軒,林雨萱](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-22.jpg?fit=1280%2C960&ssl=1)
對於網頁設計,你想到什麼?今年接了一個非常特別的專案,不是製作網站,而是教導一組不是資訊背景的學生從無到有製作一個完整的網站。
![網頁設計專案製作成員:鄭湘霖,吳宛軒,林雨萱,大家辛苦了。](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-32.jpg?resize=1021%2C766&ssl=1)
三個同學努力十週完成的網站:北海十全艷
純HTML網站
![網站設計說明](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-42.jpg?resize=640%2C480&ssl=1)
自行設計版面或找尋HTML範本
講解完以後,大家開始分工,看看是要手工打造再切版或直接找現有的範本,後來找了一個範本來使用。
基礎知識
虛擬主機與網站空間
FTP上傳檔案
網站架構規劃
![網站架構圖](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-3.jpg?resize=1021%2C969&ssl=1)
頁面製作
![網站頁面製作](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-9.jpg?resize=720%2C1280&ssl=1)
隱私權條款頁面
使用條款頁面
專案時程與分工
![專案分工](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-8.jpg?resize=1021%2C574&ssl=1)
時程:10週
dirty work總要有人去做,最好的方法是,分工,每個人分配幾個部份。
- 每個人都做好自己負責的內頁,完成後要上傳自己的部份
- footer要用dwt修改、要把語言改成中文(湘霖)分成
- 放北海岸FB網址
- 北海十全艷簡介(雨萱)
- 推薦網址
- 我們五個的購物車名稱
- 把logo改大和做網頁上的小圖(宛軒)
- 把錯的.html修改好、想北海岸十全艷的簡介(雨萱)
內頁的圖片統一要靠左還是置中,還有網站內頁不要有文繞圖,把按footer時會開新分頁target=”_blank”分頁,完成網站所有頁面。
Dreamweaver範本應用
把header和footer區分別設計成Dreamweaver範本,優點是更新網站的選單或頁尾區,不用一頁一頁的人工更改。
MENU下拉選單位置調整
![Dreamweaver css設計工具](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-2-1.jpg?resize=1021%2C560&ssl=1)
網頁全站中文顯示
CSS設定與上傳
連絡我(contact)頁面製作
php sitemap產生器
https://www.plop.at/en/xml-sitemap.html
偵錯(Debug)
網站完成後,難免會有一些小的問題出現,這時候使用Google chrome,找出問題,並且解決它。
![網頁出現照片找不到](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-40.jpg?resize=878%2C400&ssl=1)
![Google Chrome 檢查網頁](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-41.jpg?resize=410%2C488&ssl=1)
![資料夾錯誤](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-7.jpg?resize=1021%2C98&ssl=1)
![找不到相關元件](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-10.jpg?resize=1021%2C112&ssl=1)
![404錯誤,找不到檔案](https://i0.wp.com/jackteacher.cc/wp/wp-content/uploads/2018/12/web-design-project-5.jpg?resize=1021%2C702&ssl=1)
補上superfish檔案
http://www.koala-paintings.com/js/superfish-1.4.8/js/
補充:網路行銷SEO
表面上看起來已經很好了,還是要吹毛求疵一下,其實針對網路行銷SEO來看,還有一點點的改善空間,包括:
- meta description 設定
- 內部及外部連結
- 圖片alt內容設定
- 預先製作各種樣式的案例,避免分工時作出來的格式不一致
- 搜尋功能