Home 課程與演講 網頁設計製作專案學習課程

網頁設計製作專案學習課程

104
0
網頁設計專案製作成員:鄭湘霖,吳宛軒,林雨萱
網頁設計專案製作成員:鄭湘霖,吳宛軒,林雨萱

對於網頁設計,你想到什麼?今年接了一個非常特別的專案,不是製作網站,而是教導一組不是資訊背景的學生從無到有製作一個完整的網站。

網頁設計專案製作成員:鄭湘霖,吳宛軒,林雨萱,大家辛苦了。
網頁設計專案製作成員:鄭湘霖,吳宛軒,林雨萱,大家辛苦了。

三個同學努力十週完成的網站:北海十全艷

純HTML網站

網站設計說明
網站設計說明

自行設計版面或找尋HTML範本

講解完以後,大家開始分工,看看是要手工打造再切版或直接找現有的範本,後來找了一個範本來使用。

基礎知識

虛擬主機與網站空間

FTP上傳檔案

網站架構規劃

網站架構圖
網站架構圖

頁面製作

網站頁面製作
網站頁面製作

隱私權條款頁面

使用條款頁面

專案時程與分工

專案分工
專案分工

時程:10週

dirty work總要有人去做,最好的方法是,分工,每個人分配幾個部份。

  1. 每個人都做好自己負責的內頁,完成後要上傳自己的部份
  2. footer要用dwt修改、要把語言改成中文(湘霖)分成
    1. 放北海岸FB網址
    2. 北海十全艷簡介(雨萱)
    3. 推薦網址
    4. 我們五個的購物車名稱
  3. 把logo改大和做網頁上的小圖(宛軒)
  4. 把錯的.html修改好、想北海岸十全艷的簡介(雨萱)

內頁的圖片統一要靠左還是置中,還有網站內頁不要有文繞圖,把按footer時會開新分頁target=”_blank”分頁,完成網站所有頁面。

Dreamweaver範本應用

把header和footer區分別設計成Dreamweaver範本,優點是更新網站的選單或頁尾區,不用一頁一頁的人工更改。

MENU下拉選單位置調整

Dreamweaver css設計工具
Dreamweaver css設計工具

網頁全站中文顯示

CSS設定與上傳

連絡我(contact)頁面製作

php sitemap產生器

https://www.plop.at/en/xml-sitemap.html

偵錯(Debug)

網站完成後,難免會有一些小的問題出現,這時候使用Google chrome,找出問題,並且解決它。

網頁出現照片找不到
網頁出現照片找不到
Google Chrome 檢查網頁
Google Chrome 檢查網頁
資料夾錯誤
資料夾錯誤
找不到相關元件
找不到相關元件
404錯誤,找不到檔案
404錯誤,找不到檔案

補上superfish檔案

http://www.koala-paintings.com/js/superfish-1.4.8/js/

補充:網路行銷SEO

表面上看起來已經很好了,還是要吹毛求疵一下,其實針對網路行銷SEO來看,還有一點點的改善空間,包括:

  1. meta description 設定
  2. 內部及外部連結
  3. 圖片alt內容設定
  4. 預先製作各種樣式的案例,避免分工時作出來的格式不一致
  5. 搜尋功能
網頁設計製作專案學習課程
5 (100%) 1 vote

發表迴響