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

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

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

選擇查詢分區開課時間

地點 班號 日期 時間 報名
台北 651 班 2023/12/26 ~ 2023/12/29 每週一二三四五 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 規則與 Dreamweaver中的CSS設定

1-2-1 嵌入樣式

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

1-2-3 連接外部樣式（Linking Style Sheet）

1-3 Dreamweaver CSS 規則定義設定視窗

2.CSS樣式初步應用

2-1 CSS文字屬性應用

2-1-1 文字屬性應用

2-1-2 色塊式文字標題

2-1-3 圖片文字標題

2-2 圖片邊框與編排應用

2-3 CSS按鈕

2-3-1 清單與 CSS 按鈕

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

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

2-3-4 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 CSS 二欄版面配置應用

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

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

4-3 CSS 三欄的版面配置

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

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

5輕鬆搞懂HTML5與CSS3

5-1 HTML5語意化標籤

5-2 使用HTML5語意化標籤編排頁面區塊

5-3 CSS3 新增屬性

5-3-1 CSS3 文字相關屬性

5-3-2 CSS3邊框相關屬性

5-3-3 CSS3區塊陰影屬性

5-3-4 CSS3半透明顏色與漸層

5-3-5 CSS3轉換變形

5-3-6 CSS3轉變

5-4 HTML5語意化標籤與CSS3編排頁面

學會技能

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

備註事項

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