適合人仕 / 對象 :
本課程由基本開始入手, 漸漸到深入教授, 故適合任何對電腦有基本認識之人仕就讀, 特別對有志從事 web design 及對web 有興趣之人仕, 事半功倍.
報讀本課桯可免費租用"WebEasy"服務6個月‧
"WebEasy"的內容請瀏覽請click me
課程特點 :
- 本中心提供親自編寫筆記，絕對適合課程之用，令你無須「死鋤」如字典般厚及不適合香港讀書格調的書本。
- 本課程以一人一機模式上課。
- 每位學員均會有個人網站, 令每位學員能真
正學習網站管理及運作流程。
- 由課程開始到結束期間, 每位學員可透過Internet 上載或下載課堂上之範例及作品, 以增加學習效益。
- 以小班教學形式上課, 務求顧及到每位學員學習進度。
專題討論
- 電子新聞紙 (E-newsletter)製作及使用
- 設計及編寫相簿
- 網上個人簡介 / 履歷表
- 網站管理
有關進升課程
- Diploma in Computer Graphic
Design
學員欲想進一步提升自己網頁設計的能力及專業資格 , 如專業排版及圖示等, 可以繼續報讀“Diploma in Computer Graphic Design” 課程
- Certificate in E-shop production
學員欲想進一步提升自己網頁編寫的能力及專業資格 , 如個人網誌(blog)、 Gestbook、搜索引擎(Search engine) 等, 可以繼續報讀“Certificate in E-shop production” 課程
公開考試 :
完成課程後, 學員可以自行考取下列Adobe認可專業資格, 成為獨當一面的專業人仕 :
- Dreamweaver© 8 Developer
- Flash© Professional 8 Exam
- Macromedia Dreamweaver© MX 2004 Developer
- Macromedia Flash© MX 2004 Developer
課程大綱
課程大綱 Web pages 之製作，可以從簡單的純文字網頁到複雜如動 畫網頁及互動網頁。箇中包括了不同網上之技術。故網頁之製作往往不能倚賴一個軟件。本課程是針對各網上之技術，由淺入深，去介紹各技術之功能。大致可以劃分以下
Dreamweaver
這部份主要是應用Macromedia Dreamweaver之強大功能，去建立網頁之基本骨架。內容討論如何輸入文字、圖片、影片或建立超連結(hyperlink)。Designers 更可以利用table及frameset之功能去排列內容，而Form 及buttons更是本課程不可缺 少。使用Dreamweaver的網站管理功能去管理各網頁內的超連結及整個網址，這更能省卻designers不少時間。
| 學生的網頁作品 |
 |
| 學員: Yip Pui Yan, Joey |
| |
 |
| 學員: Ling Man Hong |
其它作品 |
Dreamweaver 課程內容
1. 文字格式的設定
2. 插入圖片
- 不同的圖片格式及製作
- 解柝度的定義
- Rollover Image 的製作
3. Table的製作
- 設定Table的格式
- 設定Table的底色及其底紋
- 如何利用Table排列文件內容
4. 超連結（hyperlink）的製作
5. Frames的概念及製作
- 設定target frame
- 設定frames的技巧
6. 建立表格（Form）
- 不同form fields的運用
- 利用web server將表格寄出
7. 利用Dreamweaver上傳（upload）網頁
8. 網站（web site）的管理
9. 於網頁內加入不同的檔案（例如：Flash, Movie, Shockwave.）
10. 圖層（Layers）的運用及製作
11. 利用Timeline製作Animation效果
利用Dreamweaver及HTML編寫的網頁美觀及公整 |
利用Dreamweave 內的 “link”指令把不同內容網頁連結一起
|
HTML
HTML 是在萬維網(World Wide Web)中之 靈魂，所有網頁最終會以html之格式輸出。雖然大部份設計可在Dreamweaver上完成，但認識HTML亦有助插入一些非Dreamweaver 可完成之功能。在這部份，會學習使用基本之指令去建立網頁。
HTML 課程內容
- HTML檔案的結構
- 製作不同的文字格式 ，列式清單（List）的製作
- 超連結（hyperlink）的定義 超連結的製作及運用
- 製作圖片連結，網頁連結及連結到其他網站
- 插入圖片到網頁中 改變圖片的大小
- 圖片外框的製作 網頁用圖片的格式介紹及製作
- 處理網頁用圖片的注意事項 ImageMap的用法及製作
- Table 的製作 ，表格的格式
- 利用表格排列網頁的內容 Frames的定義及使用方法
- Frames的製作
Flash
如欲加強網頁的動感，適量的動 畫是不可決少的。於網頁上最常見到的動畫大多是Animanted GIF的圖片檔，此類圖片只是將不同的Bitmap（點陣圖） 組合成一張動畫圖片，而它的檔案大小會隨著點陣圖的多少而增大，故此並非一個良好的檔案格式。所以Flash 便是一個良好的網頁動畫製作軟件，Flash是利用Vector Image 作輸入，故此網頁內的動 畫能隨意改變形狀及大小，而 不影響畫面質素，加上Flash更支援streaming 的技術，大大減低瀏覽者的等候時間。是現今網頁設計不可決少的軟件。
Flash 課程內容
-
圖像製作﹐包括繪畫﹐上色及修改等。
- Flash的工作介面的介紹
- Stage的作用及用法
- Frames, layer及timeline對於製作動畫的不同作用
- Flash內繪圖的技巧及與一般繪圖軟件的分別
- 不同的圖像檔案介紹
- Flash動 畫的原理及使用flash作為網頁動畫的好處
- Symbol及instance的分別
- Library的管理
- Timeline 的原理
- Frames及keyframes的分別及其用法
- Motion tween及shape tween的分別及製作方法
- Motion guides 的製作
- Movie, graphics symbol及movie clip symbol的分別
- 製作fade-in 或fade-out動畫
- 按鈕的製作及其四種形態的介紹
- 於flash內加插聲音
- Event sounds及steam sounds 的分別
- 製作連貫性的flash movie
- Flash movie 與HTML的關係
- 製作flash為基本的網頁
Javascript
利用Javascript去編寫網頁，是可以達到互動 之效果，內容包括如何偵緝browser之版本，plug-in 之資料，scrolling status bars，不斷轉換banner，隨機顯示圖片，資料核實(如email address) 及 cookies等。
Javascript 課程內容
1. Javascript
- 甚麼是Javascript
- 為甚麼要有Javascript
- Javascript之語法
2. 視窗篇
- 顯示警告視窗 (alert)
- 顯示確認視窗 (confirm)
- 顯示文字輪入視窗 (prompt)
3. 子視窗
- 開啟及關閉子視窗（open()及close()函式）
- 子視窗屬性 （如位置、大小等）
- 利用Javascript輸出動態HTML碼
4. 條件測試和迴圈
- 使用IF句子作條件測試而對用戶作出不同之回應
- 使用FOR或WHILE句式使程式反覆執行
5. 事項處理
- onLoad
- onClick
- onMouseOver
- onMouseOut
6. 基本文件及函式
7. 表單核對
8. 實戰Javascript
Cascade Style Sheet (CSS)
CSS 是繼 HTML 外最為人採用的技術，它不但在外觀及設計上能提供較佳的效果（文字效果如 drop cap 或 drop shadow），使用 CSS的網站亦在維護上較為快捷，在更新網頁時及覺輕鬆，故往往為資深網頁設計師所選用。
CSS 課程內容
1. Understanding CSS
2. CSS Basics
-
直接定義標籤的樣式(style)屬性
- 自訂內部樣式表(style sheet)
- 自訂外部樣式表(style sheet)
3. 文字樣式介紹
-
字型學(typography)在網上的知識
- 字型設定屬性
- 字型效果之設定
- 文字大小屬性
4. 排版樣式介紹
-
字元（character）,文字（word）距離和行距（leading）的調校
- 垂直及水平對齊
- 首行縮排屬性
5. 框線及邊界之設定
-
箱型模組的觀念
- 文件位置之控制
- 位置屬性 之設定
- 設定物件之距離
ImageReady
ImageReady是一個專為網頁內的圖像加工而設的專業軟件。除一般相片編輯功能外，更可製作不同網上物件，如 Rollover button、Image map及 Animated Gif 等。加上有強勁的相片切割及圖像最佳化功能，令到設計師更能平衡圖像下載時間及質素。因ImageReady可完全融入於Photoshop內，故令到整個製作流程能一氣呵成，大大縮減了製作時間。
|
|
|
|
|
| |
 |
| 利用ImageReady製作animated gif |
ImageReady課程內容
1. ImageReady
-
甚麼是ImageReady
- 為甚麼要有ImageReady
- 輸入不同之檔案
2. 動畫製作
-
Frame by Frame動畫
- Tweening動 畫
- 輸出至動畫GIF
- 輸出至Flash檔案
3. 圖像檔案格式
-
GIF、JPEG及PNG檔案之比較
- GIF輸出最佳化
- JPEG輸出最佳化
4. 從設計圖到網頁
-
圖像切割工具之介紹
- 分割圖像之要訣
- 製作Hotspots及URL
- 將所有分割之圖像輸出成HTML檔
|
