熱門: 手機教學 | 文書法寶 | 影片剪輯 | 廣告DM設計 | 電腦新手 | 動手做網站  線上學習人數:

CSS與Dreamweaver教學 應用範例課程 線上看

觀賞人次:9942人次評分:0分

範例檔案下載

此檔案為壓縮檔,請會員下載後,在電腦中進行解壓縮即可;裡頭完整包含講師在課程中使用到的圖片、檔案、以及完成作品...等等,供會員操作練習。

應用程式下載

Dreamweaver CS5 繁體中文版應用程式下載,可試用30天。此檔案為壓縮檔,請會員下載後,在電腦中進行解壓縮並且執行安裝。

講師介紹

講師:王老師

王老師擁有17年的教學經驗,教學經驗豐富,上課生動活潑,目前大約教授16000名以上的學生,有多張ACA國際認證,目前任職於企業資訊顧問一職。

  • 課程介紹(展開/收起)

章節目錄(點取標題)

01.CSS語法使用前操作環境的設定教學41分56秒

01-01啟動Dreamweaver CS5建立一個新的CSS網站 02分33秒

01-02調整Dreamweaver CS5的偏好設定 04分03秒

01-03講解在新的檔案中網頁程式碼的用途與含意 10分06秒

01-04分析與下載其他瀏覽器 06分55秒

01-05如何安裝第二種瀏覽器? 05分19秒

01-06下載安裝Firefox外掛CSS檢視程式 02分56秒

01-07WEB Developer外掛安裝好之後的顯示狀況 03分58秒

01-08進入到Yahoo奇摩來看看CSS的切換顯示 06分06秒

02.建立CSS的幾種方式教學介紹教學57分30秒

02-01讓瀏覽器判斷網頁語系語法的輸入操作 03分42秒

02-02尋找取代文字與文字段落的產生方式 05分03秒

02-03網頁標題與網頁描述文字的插入方式 06分55秒

02-04網頁關鍵字與「檔頭標籤」的呈現方式 05分09秒

02-05CSS樣式類別的介紹與文字格式的設定 07分21秒

02-06建立P段落的CSS樣式 08分11秒

02-07練習自己輸入CSS樣式碼的操作方式介紹 08分36秒

02-08如何將同樣的樣式套用到多個標籤上?CSS群組的設定 04分14秒

02-09當兩個一樣的CSS名稱出現時,會以哪個設定為主? 04分01秒

02-10用CSS屬性面板來設定CSS樣式操作 04分18秒

03.CSS元素的外觀觀念教學49分23秒

03-01元素外觀的方框模式解說 03分20秒

03-02何謂「有襯線」與「無襯線」字型?如何選擇? 10分08秒

03-03完成H1文字樣式的設定 04分59秒

03-04建立一個H2的段落樣式 03分22秒

03-05「邊框」線條樣式的設定說明介紹 03分28秒

03-06「方框」寬度的加減操作技巧 02分46秒

03-07如何讓特定的選取文字產生螢光標示效果? 06分26秒

03-08選取區SPAN的介紹 02分14秒

03-09如何讓「項目清單」的邊界去掉? 02分21秒

03-10用另外一種方式來調整清單圖示 04分50秒

03-11運用背景樣式設定再建立一個H3的標題樣式 05分29秒

04.CSS在網頁背景的應用的教學40分01秒

04-01背景圖片的載入操作 02分43秒

04-02如何讓網頁的背景變成漸層色效果? 04分05秒

04-03建立的另一個新的網頁,準備製作樣式串接練習 02分05秒

04-04如何將CSS設定與其他網頁共享?樣式表的串接 03分44秒

04-05CSS樣式可以取消共用狀態嗎? 02分11秒

04-06另外再介紹單一圖片當成背景時的操作 03分48秒

04-07使用DIV區塊來調整段落文字的寬度 08分49秒

04-08進入「程式碼」模式檢視快速的找到物件範圍 03分19秒

04-09必學技巧DIV區塊的替換操作 04分36秒

04-10使用CSS中的「複合」選取器來改變DIV內文字的色彩 04分41秒

05.CSS與超連結文字樣式設定的教學48分59秒

05-01超連結文字的建立技巧操作說明 07分11秒

05-02設定頁面上超連結文字的CSS樣式 04分33秒

05-03如何製作兩種不一樣的超連結文字樣式? 04分04秒

05-04將Hover效果加入到指定元素中,產生不一樣的醒目提示效果 03分36秒

05-05也可以將Hover選取器效果加在文字標題上 05分10秒

05-06準備製作文字導覽列 01分51秒

05-07超連結快速重複建立的技巧 04分34秒

05-08一定要給清單一個ID名稱唷! 04分12秒

05-09將超連結導覽列改成水平樣式「inline」的使用 04分20秒

05-10經由CSS的設定將超連結文字變成按鈕樣式 05分32秒

05-11在導覽列文字上再加上「hover」與「visited」效果 03分56秒

06.如何運用CSS語法產生導覽列按鈕的教學34分24秒

06-01使用Fireworks CS5快速繪製按鈕圖示 03分41秒

06-02將繪製完成的按鈕樣式置入按鈕中 04分24秒

06-03再將hover的狀態下加上另一張背景圖案與底框線,完成圖片按鈕的設計 03分12秒

06-04另一種單一按鈕圖片背景的製作技巧 04分13秒

06-05完成同樣一個按鈕背景圖片的替換效果製作 09分11秒

06-06看看雅虎奇摩的例子了解單一背景圖片與CSS的關係 05分31秒

06-07導覽列按鈕的新增與刪除方式介紹 04分12秒

07.CSS與DIV網頁排版的教學55分42秒

07-01插入一張圖片作「重新取樣」設定 01分51秒

07-02如何將圖片的外框設定到指定的圖片上? 05分07秒

07-03將圖片放入到DIV區塊後的邊框調整技巧 06分08秒

07-04文字貼入到DIV區塊的前後技巧說明 01分41秒

07-05圖片與DIV搭配的文繞圖設定技巧 08分24秒

07-06使用項目清單的方式來製作「全圖排版」步驟一:圖片的插入方式 06分56秒

07-07使用項目清單的方式來製作「全圖排版」步驟二:新增DIV區塊並設定CSS樣式 04分20秒

07-08使用項目清單的方式來製作「全圖排版」步驟三:將圖片依序排列完成 05分04秒

07-09使用項目清單的方式來製作「全圖排版」步驟四:如何控制圖片的顯示排列與圖片的新增操作 04分35秒

07-10使用項目清單的方式來製作「全圖排版」步驟五:加上註解文字的方式 06分19秒

07-11使用項目清單的方式來製作「全圖排版」步驟六:最後再設定標題文字的CSS樣式完成圖片排版的範例 05分17秒

08.如何使用CSS來美化表格的教學58分02秒

08-01表格的建立方式 05分02秒

08-02表頭參考方向Scope的定義方式 06分41秒

08-03將表格式資料匯入到網頁中的注意事項 05分17秒

08-04表格的註解標題插入方式介紹 03分56秒

08-05表格頁尾的加入方式 06分39秒

08-06表格的註解標題與表頭的CSS設定 07分46秒

08-07接著繼續將表格內的文字資料用CSS設定完成 03分54秒

08-08用CSS將表格的框線變成較細的黏合線 07分16秒

08-09表格整體邊框樣式的設定 03分32秒

08-10再將表格內的儲存格框線做不一樣的設定 06分06秒

08-11表頭欄位也可以另外加上不一樣的線段樣式 01分53秒

09.滑鼠指到表格後變色的CSS設定教學42分35秒

09-01進階技巧!讓滑鼠指到表格時背景會變換顏色 05分33秒

09-02網頁色碼的詳細觀念解說,如何輕易的判斷顏色色碼? 12分45秒

09-03如何直接設定表格的背景色彩與onmouseout效果相同? 04分03秒

09-04如何設定表格單一列的滑鼠變換效果? 03分47秒

09-05又要如何將整個表格中的列全部有變換效果呢? 03分53秒

09-06使用IE瀏覽器才支援的滑鼠指標變換手指效果 02分25秒

09-07使用CSS就可以很輕易的做出表格列的色彩變換效果! 04分57秒

09-08使用直接輸入的CSS樣式語法的方式讓表格的框線黏合 05分12秒

10.使用DIV來建立網頁版型各種技巧教學47分05秒

10-01DIV基本版型的建立方式一 07分03秒

10-02DIV基本版型的建立方式二 04分01秒

10-03接著再將CSS設定到各個DIV上 04分34秒

10-04將CSS複製到另一個檔案的操作方式 02分33秒

10-05接著製作第二種版面排列操作 07分04秒

10-06解決最底端的DIV區塊Footer區塊的顯示操作 07分57秒

10-07只要改變Nav區塊的浮動設定,就可以獲得對調的效果! 01分43秒

10-08準備製作第三種排列版型 04分05秒

10-09接著設定各個區塊的CSS樣式 04分44秒

10-10完成三欄式版面排列的操作設定 03分21秒

11.CSS與DIV的網頁版型範例實做教學38分44秒

11-01DIV簡易版型實例操作步驟一:版型的切割 06分52秒

11-02步驟二:將分割區圖片匯出到網站資料夾內 06分16秒

11-03步驟三:建立新的網頁與DIV區塊 03分22秒

11-04步驟四:完成各區塊的CSS與背景圖片的設定 04分09秒

11-05步驟五:將文字資料貼入到Content的方式 03分53秒

11-06步驟六:將Content區塊改成自動延伸的設定方式 04分15秒

11-07步驟七:準備製作頂端文字區塊的插入 01分39秒

11-08步驟八:完成地址文字區塊的CSS設定 03分37秒

11-09步驟九:完成底端文字的CSS區塊設定 04分41秒

12.各種CSS濾鏡效果製作教學1小時02分40秒

12-01濾鏡效果的套用如何讓物件變成透明狀? 06分32秒

12-02漸層透明度效果的製作方式 08分20秒

12-03準備製作橫幅標題文字的透明效果 02分54秒

12-04完成橫幅文字區塊的CSS設定 05分52秒

12-05設定完成透明漸層濾鏡效果 03分40秒

12-06準備製作照片翻轉效果 02分00秒

12-07製作簡單的垂直與水平方向的影像翻轉 02分07秒

12-08另外再介紹Invert與Gray濾鏡效果 04分36秒

12-09介紹一個很棒的微軟濾鏡DEMO網址 05分09秒

12-10如何將DEMO的濾鏡效果複製到我們的網頁來使用? 06分13秒

12-11再介紹複製後如何修改成自己想要的尺寸與顏色? 10分13秒

12-12另外再補充如何套用轉場DEMO效果在網頁中? 05分04秒

13.用CSS來美化表單元件的教學55分04秒

13-01準備製作表單的CSS美化套用 02分58秒

13-02將表單元件依序插入到指定位置 02分49秒

13-03完成表單物件的插入步驟 01分18秒

13-04在表格的末端加上表格頁尾列<tfoot> 04分56秒

13-05設定表單內表格的背景色彩 03分43秒

13-06美化表單儲存格的邊框線樣式 03分46秒

13-07變更儲存格的背景色彩與文字色彩 04分21秒

13-08製作當滑鼠指到儲存格時變換背景的效果 02分53秒

13-09給表單按鈕製作不一樣的色彩 04分54秒

13-10給按鈕加上Hover的變換效果! 02分03秒

13-11超炫的清單選單背景色彩變換製作 07分14秒

13-12如何設定網頁捲軸的色彩? 07分47秒

13-13如何驗證CSS設計取得CSS驗證標章? 06分22秒