優勢多媒體前端互動設計 - DCSS

精修DIV+CSS網頁排版設計輕鬆做

Web Design with DIV and CSS
  • 時數:24小時
  • 費用:NT$ 8,400
  • 點數:2.5

選擇查詢分區開課時間

地點 班號 日期 時間 報名
台北 2786 班 2021/12/06 ~ 2021/12/09 每週一二三四五 09:00~16:00 報名
台北 288 班 2022/02/11 ~ 2022/02/16 每週一二三四五 09:00~16:00 報名
台北 22930 班 2022/03/19 ~ 2022/03/27 每週六日 09:00~16:00 報名
台北 22932 班 2022/04/27 ~ 2022/05/25 每週一三 18:30~21:30 報名
台北 390 班 2022/05/04 ~ 2022/05/09 每週一二三四五 09:00~16:00 報名

目前查無開課時段

詳細開課時間請洽詢業務

聯絡恆逸

教材

優勢精選教材

課程目標

HTML與CSS可說是摒除表格式排版最需要精通的網頁基本語法,HTML決定網頁的架構而CSS決定網頁的視覺設計,可以簡單說CSS就是網頁的化妝師,它能讓網頁徹底使用您所希望的方式來呈現,這是單靠傳統HTML所無法完成的事情。

恆逸講師將以網頁設計師所熟悉的Dreamweaver軟體來教大家如何活用CSS的語法設計,Dreamweaver發展到CC最新版,加入HTML5與CSS3的相關功能設定,從設定畫面到程式碼編輯介面,都有完善的安排,讓不熟程式撰寫的使用者,自然輕鬆跨入程式碼領域。資深講師將以最簡單易懂的學習方式,引導不黯程式撰寫的您精耕HTML與CSS相關語法,加強專業的網頁設計實力,也方便後續與JavaScript/jQuery之間的設計應用。

想要學會正確的DIV/CSS排版是可以有方法的,本課程不但要教您學會如何從PSD檔靜態頁面設計從容轉化DIV/CSS排版,課程內容包括DIV排版應用、單欄、兩欄與三欄的固定式版面編排、HTML5+CSS3新屬性與標籤應用…等,讓您從CSS2.0一路銜接至HTML5+CSS3.0,並準備好學習響應式網頁所需CSS基礎。

適合對象

網頁設計師,有Dreamweaver基礎,只會用Table排版而希望學習正確DIV/CSS排版設計者

課程內容

1.HTML簡介

1-1 HTML簡介與常用的HTML標籤

1-2 CSS使用規則與CSS選取器

1-2-1 行內樣式

1-2-2 嵌入樣式

1-2-3 新增嵌入CSS規則與CSS套用方式

1-2-4連接外部樣式(Linking Style Sheet)

2.CSS樣式初步應用

2-1 CSS文字屬性應用

2-2 CSS按鈕

2-2-1 清單與CSS按鈕

2-2-2 CSS直向色塊按鈕

2-2-3 CSS直向圖片按鈕

2-2-4 CSS清單橫向按鈕

2-2-5 CSS橫向圖片按鈕

3.CSS與版面編排應用

3-1插入DIV標籤利用CSS美化DIV標籤

3-1-1 美化DIV標籤

3-1-2 固定寬度圓角邊框

3-2 DIV區塊定位

3-2-1 Position(定位)設定

3-2-2 div 區塊置中於頁面垂直中央

3-2-3 版面內容含有內部 div 的垂直置中

4.內頁版面編排

4-1 CSS一欄版面配置

4-1-1 CSS固定寬度影像邊框

4-1-2 單欄式內頁

4-1-3 CSS變動寬度與高度影像邊框

4-2 DIV二區塊定位編排

4-2-1 使用Position(定位)區塊設計版面

4-2-2 使用Float(浮動)製作區塊

4-3 CSS二欄版面配置應用

4-3-1 CSS固定寬度二欄版面

4-3-2 CSS固定寬度二欄版面與按鈕應用

4-4 CSS三欄的版面配置

4-4-1 CSS固定寬度三欄版面

4-4-2 CSS固定寬度三欄版面與按鈕應用

5.CSS3設計新屬性

5-1 text-shadow文字陰影

5-2 Box Shadow區塊陰影

5-3 Border Radius圓角

5-4 半透明顏色與漸層

5-5 Transform變形

5-6 Transition轉變效果

6.HTML5與CSS3新增屬性應用

6-1 HTML5的語意標記

6-1-1 新增的語意標記

6-1-2 檔頭標記

6-1-3 導覽選單標記

6-1-4 文章的標記

6-1-5 區段的標記

6-1-6 頁尾的標記

6-2 文字與圖像的標記

6-2-1 文字的設計

6-2-2 圖標的標記

6-2-3 圖標的圖說

6-3 HTML5版面內容與元素設計應用

6-3-1 HTML5視訊播放

6-3-2 以圓角框包圍

6-3-3 將導覽列設為圓角

6-3-4 使用漸層的背景設計

6-3-5 為外框加上陰影

6-3-6 背景圖像調整與控制

6-3-7 將顏色設成半透明

6-3-8 變形緞帶裝飾

學會技能

  1. 完整CSS文字與標準CSS網頁按鈕編排
  2. CSS固定寬排版技巧
  3. 能獨立以CSS排版完成網站
  4. 具備響應式網頁所需HTML5與CSS3基礎

備註事項

學生優惠價:參加校園IT職涯學習護照方案,享有5折優惠價NT$4,200元