期待已久的Dreamweaver軟件教程終于和大家見面啦!老師一貫的細致全面講解風格,注重每個專業術語的概念介紹和軟件實操相結合,幫助大家全面理解掌握Dreamweaver的使用,以及HTML/CSS樣式/JavaScript/jQuery以及網頁交互效果的添加。
本套課程基于Dreamweaver CC2015版本進行講解,從軟件的基本工具命令到新增功能逐一介紹并結合實際案例進行演示,幾乎每個小節結束后,老師都會針對本小節知識點布置對應作業供大家獨立思考操作練習,并且在第二節課開始對作業進行分析,以便大家檢查作業完成是否正確。
本課程適用于網頁設計零基礎學員,在實際工作中,網頁前端設計是基于設計稿完成之后的一個職位,需要會基本的Photoshop操作,尤其切片工具、文件格式等知識點在網頁前端使用頻率非常高,因此建議大家先學會《Photoshop CS6零基礎入門教程》。課程細致全面,學習模式專業系統,是套不可錯過的入門教程。
(一)了解什么是行為?如何利用Dreamweaver CC 行為實現交換圖像效果、添加彈出信息、打開瀏覽器窗口、動態改變DIV中文本內容、設置關閉頁面鏈接等。
1/變換圖像效果 2/ 添加彈窗效果 3/折疊標簽效果
(二)了解jQuery Accordion構件,通過插入accordion構件實現用戶操作的交互式行為,并且利用CSS樣式定義accordion樣式,實現元素抖動及元素漸隱的效果等。
4/元素抖動效果 5/元素漸隱效果
第一章 開發環境認識和本地站點創建
|
介紹Internet、網站、網頁的概念,以及一個完整的網站通常需要新建HTML文件、DIV“圈地”、CSS定義樣式、Javascript、jQuery制作交互動畫。 |
網站開發軟件Dreamweaver基本介紹,包括工作區、切換和拆分視圖、處理面板、選擇工作區布局、調整工具欄、個性化首選項、創建自定義的快捷鍵、站點目錄知識、“屬性”檢查器、“CSS設計器等。 |
一個完整的網站制作流程通常會包括:設計稿、切圖素材、構建布局搭建DIV、搭建CSS和JS效果等步驟,課程中會以實例的形式進行演示講解。 |
第二章 HTML/XHTLM和HTML5
|
初步認識HTML,簡單介紹HTML基礎結構。 |
講解常用的HTML標簽,包括基本標簽、格式標簽、文本標簽、超鏈接標簽、圖像標簽、表格標簽等的基本編寫格式及用法。 |
講解和介紹HTML/XHTML/HTML5在功能和書寫上的區別,如何新建HTML5文檔以及標簽書寫規范。 |
介紹HTML5新增標簽,并通過一個簡單的天貓頁面實例介紹標簽在實際網頁設計中的用法。 |
第三章 CSS基礎
|
講解CSS的基本概念,HTML格式化與CSS格式化的比較和CSS的基本語法。 |
CSS內聯樣式表、內嵌樣式表、外部樣式表以及樣式表的優先等級 |
包括如何創建標簽CSS樣式、類CSS樣式、IDCSS樣式以及復合CSS樣式 |
講解包括CSS的層疊理論、繼承理論、后代理論和特征理論,解釋了css樣式規則起作用的原理。 |
第四章 網頁的整體設置
|
講解為網頁添加關鍵詞、網頁說明以及設置網頁字體及視口的方法和實例演示。 |
講解使用“頁面屬性”設置網頁的背景圖像及默認邊距,設置跟蹤圖像,設置超鏈接文本的相關屬性及為網頁添加標題文字等。 |
講解設置網頁定時跳轉、通過CSS樣式控制網頁元素的布局、站點的切換導入及管理、設置設計窗口的大小以及軟件標尺及網格的顯示隱藏方法。 |
第五章 DIV+CSS基礎布局
|
講解什么是DIV,盒子模型的概念,以及Dreamweaver CC新增CSS設計器的用法,盒子模型中邊距的設置,填充設置、邊框設置及背景顏色、背景圖像設置等。 |
包括元素寬度、高度的定位,相對定位和絕對定位,固定定位和浮動定位的概念講解及實例演示。 |
講解HTML代碼元素中塊元素、內聯元素的概念,兩者之間的區別及聯系。 |
通過幾個實操案例加深盒子模型、元素定位及塊元素、內聯元素的理解,熟悉CSS設計器的使用。 |
第六章 網頁文本控制
|
講解如何使用css定義文字的顏色、大小、粗細等屬性,如何設置管理網頁字體。 |
通過幾個實例演示文本導入、創建語義結構以及創建文本縮進效果等。 |
講解如何制作無序項目列表、有序編號列表、定義列表以及設置列表屬性,并制作簡單的項目列表案例。 |
講解插入水平線、特殊字符、系統日期的方法,以及設置文本滾動效果。 |
第七章 圖像和多媒體的應用
|
在Dreamweaver中插入圖片的各種方法,插入非web類型文件,如何在DW使用Photoshop“智能對象”,利用CSS的類調整圖像屬性,利用屬性檢查器優化圖像。 |
講解背景圖像屬性設置,包括圖像的漸變色、圖像位置、尺寸、定位區域、平鋪方式及實例演示。 |
在網頁中插入web動畫、視頻、音樂的不同種方法。 |
第八章 表格和表單的使用
|
介紹構成表格的基本標簽、表格的樣式設置,使用CSS美化表格的方法,如何導入外部表格以及表格的排序。 |
表單的介紹、插入表單的方式,設置表單的屬性,表單文本的三種類型,通過實例演示制作郵件、url表單、TEL表單以及時間和日期相關表單等。 |
主要講解表單中單選按鈕、復選按鈕,提交按鈕、重置按鈕以及普通按鈕。表單中復選框的設置、選擇域設置等。 |
第九章 超鏈接基礎知識
|
超鏈接標簽屬性及代碼編寫方法,超鏈接中的內部鏈接和外部鏈接,相對鏈接和絕對鏈接等。 |
創建文字鏈接的各種方法,創建按鈕超鏈接的方法及使用CSS定義按鈕樣式、鼠標指針設置及頁面檢查。 |
講解創建內部和外部鏈接、空鏈接、熱點鏈接、基于圖像的鏈接以及建立電子郵件鏈接等。 |
第十章 DIV+CSS布局綜合應用
|
講解CSS布局設置,以及如何設置一列寬、兩列寬、三列寬等布局方式。 |
通過126郵箱的頁面講解CSS樣式設置網頁頁面的布局方式,包括頁面導航欄設置,左側欄設置等。 |
126郵箱頁面綜合案例講解包括文字樣式、按鈕、布局、表單等相關知識。 |
第十一章 模板的使用
|
講解如何創建新模板、在模板中定義可選區域、可編輯區域,創建基于模板的網頁頁面以及編輯和更新模板等操作。 |
通過實例講解模板的使用及理解模板及基于模板頁面之間的聯系。 |
講解如何創建庫項目,在頁面中插入庫,以及編輯、更新和分離庫的操作方法。 |
通過實例講解庫項目的使用方法,正確使用庫項目以提高工作效率等。 |
第十二章 為網頁添加交互
|
了解什么是行為,如何利用Dreamweaver行為實現交換圖像效果、添加彈出信息、打開瀏覽器窗口、動態改變DIV中文本內容、設置關閉頁面鏈接等。 |
了解使用jQuery Accordion構件,通過插入accordion構件實現用戶操作的交互式行為,利用CSS樣式定義accordion樣式。實例演示jQuery實現元素抖動及元素漸隱的效果等。 |
第十三章 網站建設規范及知識拓展
|
包括主要網頁主要元素命名規范,頁面結構、導航、功能的ID命名規范,網站公用相關命名,電子貿易相關命名以及文件夾命名規范等。 |
HTML5代碼編寫規范以及HTML4兼容布局,標簽的基本編寫規范,以及推薦使用的標簽縮進規范、圖片alt規范、標簽語義規范以及注釋規范。代碼設計時相關設置推薦等方面知識拓展。 |