PART.1
網站規劃期
PART.2
簡單型網站設計
PART.3
快速型網站建置
PART.4
內容才是王道
PART.5
手機版網站架設
PART.6
各平台設備通吃
PART.7
網站上傳與維護
PART.1 網站規劃期
1-1. 網站開發流程的順序
1-2. 網站架構規劃
:網站頁面架構?檔案資料結構?
1-3. 網站類型分析
:簡單型?延伸型?手機型?彈性型?RWD?
1-4. 網頁版型介紹
:套版?參考?客製?
1-5. 相關素材介紹
:付費?免費?客製?
1-6. 網頁技術與相關軟體有那些?
(於各單元中陸續介紹)
1-7. 網站報價與合約製作
(於PART.4介紹)
1-8. 製作 Wireframe 線框圖
(於PART.4介紹)
1-9. 製作 Mockup 視覺稿
(於PART.4介紹)
1-10. 製作 Prototype 網站原型
(於PART.4介紹)
1-11. 網頁設計技術參考網站
:HTML?CSS?FONT?COLOR?
PART.2 簡單型網站設計
【TSJDXweb1----第一個網站】
2-1. 超簡單、低預算、求快速
,那麼最好是畫畫圖、套套版即可
2-2. Photoshop設計網站首頁
2-3. Illustrator設計聯絡表單
2-4. 也可以使用Fireworks來設計
2-5.
使用Dreamweaver
調整網頁內容及連結
2-6. 運用免費版型套版完成內容設計
PART.3 快速型網站建置
【TSJDXweb2----第二個網站】
3-1. 認識 Muse 建立 Muse 專案
!快!快!快!就是為了方便快速!
3-2. 規劃網站建置網站地圖
!耶!真的沒有程式原始碼?!
3-3. 設計頁面主版套用到各頁面
:Widget選單,Font Awesome 品牌圖示
3-4. 使用資源面板管理網站檔案
3-5. 設計符合視窗版面的圖文排版
3-6. 使用自行管理的網頁字體
3-7. 運用各種Widget
:全螢幕幻燈片展示、標籤面板、折疊式面板
3-8. 設計頁面捲動效果
3-9. 嵌入式HTML顯示Google地圖
3-10. 設計Widget聯絡表單
3-11. Muse 的轉存與發佈
3-12. 探討 Muse 的優缺點
PART.4 內容才是王道
【TSJDXweb3----第三個網站】
桌機版
4-1. 站在使用者角度來設計!
重視UX!
4-2. 決定網站主題,設計網站架構圖
、檔案結構圖、頁面線框圖
4-3. 頁面排版布局的選擇
:固定式、流動式、彈性式、混合式
4-4.
配合
多條件媒體查詢設計範本
版型
4-5. 配合圖庫資源活用折疊式面板
4-6. 活用多個標籤面板的排版
4-7.
加入
jQuery Plugins : 大圖輪播展示
4-8.
加入
jQuery Plugins : 縮圖整排輪轉
4-9.
加入
jQuery Plugins : 瀑布流排版
4-10.
加入
jQuery Plugins :
縮圖點選展現大圖的
燈箱效果
4-11.
加入
jQuery Plugins : 放大鏡效果
4-12.
學習
Edge Animate 設計 Banner
廣告動畫
4-13.
學習
Edge Animate 設計下拉式選單
4-14. 發佈 Edge Animate 結合網頁
4-15. 設計與訪客互動的留言表單
4-16. 結合網路資源
:YouTube、Google Map
4-17. 運用Facebook網頁開發資源
PART.5 手機版網站架設
【TSJDXweb4----第四個網站】
手機版
5-1. 配合桌機版網站再設計手機版
5-2. 認識jQuery Mobile
:下載程式庫、準備首頁相關檔案
5-3. 規劃網站架構安排主要頁面
:插入頁面
5-4. 設計導覽按鈕及頁面切換效果
5-5. 設計清單檢視的頁面
5-6. 設計可收合區塊的頁面
5-7. 設計網頁互動表單
5-8. 結合桌機版與手機版的顯示控制
PART.6 各平台設備通吃
【TSJDXweb5----第五個網站】
6-1. 加強認識 RWD
,了解一個網頁符合 RWD 的優缺點
6-2. 配合 Bootstrap 設計 RWD 網頁
6-3. 加強多條件媒體查詢設計CSS
6-4. 設計桌機版面時的導覽選單
6-5. 設計手機版面時的導覽選單
6-6. 配合 Foundation 設計網頁
6-7. 多認識協助符合 RWD 的外掛
PART.7 網站上傳與維護
7-1. 認識 SEO 關鍵字搜尋最佳化
7-2. 加入適當的標題、關鍵字及描述
7-3. 整理優化網頁程式原始碼
7-4. 運用 W3C 標準化的檢測
7-5. 申請虛擬主機及網域名稱
7-6. Google pagespeed 檢測速度
7-7. Google Trends 了解熱門趨勢
7-8. Google Analytics 分析工具