《HTML+CSS網頁前端課程》通過手寫代碼詳細講解網頁前端開發必備的html和css代碼知識,知識點由淺入深,從基礎代碼到案例實戰演練,貫穿全流程,讓大家完整系統地學習和掌握html+css網頁前端代碼技能。
通過本套課程的學習,能夠全面掌握HTML和CSS基本標簽類型、語法格式、網頁布局方式、及交互效果制作等網頁前端代碼知識。在老師帶領制作的實戰商業項目案例中,積累實操經驗,所學知識馬上就可以應用到工作中,實現菜鳥到web前端工程師的真正蛻變。如果您正在想學習和提升HTML+CSS網頁前端代碼技能,本課程是一套您不可錯過的好教程。
課程特色:老師授課風趣幽默,條理分明,邏輯性強,講課過程行云流水。一堂課下來非常輕松,卻也收獲頗豐。
學習環境:老師使用Dreamweaver cc 2015進行講解,建議使用同版本軟件學習,使用其他版本或者軟件也可。學習本課程需要大家具備基本的Photoshop和Dreamweaver操作基礎。
下拉菜單制作
↓
鼠標經過時圖片切換效果
↓
鼠標經過時按鈕動效和旋轉特效
↓
鼠標經過時縮放效果
↓
第一章 HTML代碼基礎回顧
|
主要講解常見的文本標簽和區塊標簽用途介紹,代碼的基本編寫規范總結 |
超級鏈接和錨記鏈接代碼編寫及實操演示 |
講解圖像標簽及相關屬性設置,圖像的相對路徑和絕對路徑。 |
使用Dreamweaver設計視圖及代碼編寫兩種制作表格的方式對比,以及細線表格的做法 |
表單標簽的編寫規范、嵌套規范以及相關屬性的用法講解 |
使用表格布局京東欄目模塊,實例演示細線表格的用法。 |
利用所學知識制作京東企業用戶注冊表,練習表格、嵌套表格、表單及圖片提交表單的制作. |
第二章 CSS層疊樣式表概述
|
講解css樣式的編寫格式及標簽選擇器、類選擇器、id選擇器、編組選擇器、后代選擇器、通用選擇器、后代選擇器7種類型選擇器的特征對比和編寫格式 |
講解常用的文字屬性包括顏色、大小、字體、粗細、行高、下劃線、傾斜、對齊方式、首行縮進等 |
背景顏色,圖片,對齊方式,是否重復,固定背景等屬性設置及編寫規則 |
講解盒子模型概念,內邊距、外邊距的應用以及元素默認值的清除方式,使用外邊距定義元素居中的方法 |
講解盒子模型的邊框屬性,利用邊框制作“圣誕樹”案例 |
講解行元素、塊元素和行級塊元素的特性及相互轉換的方法,以及隱藏屬性的應用。 |
講解浮動屬性及清除浮動的應用,利用所學知識手動編寫代碼,制作導航條案例 |
各類型選擇器作用元素的優先級別比較 |
第三章 網頁布局小案例
|
綜合練習,利用所學html和css知識制作“百度百科w3c”頁面 |
講解小米5頁面課堂案例,包含固定背景和文字排版,上標下標的制作方法等知識點 |
講解如何利用float屬性布局網頁,設置網頁模塊間距的方式等 |
多個模塊布局時,實現同樣的布局方式的不同方法演示 |
利用所學知識,實操演練“Gulp中文網”頁面布局及樣式的定義 |
第四章 網站首頁制作實例
|
商業案例logo及導航條區域的制作,包括鼠標移入時導航條表框,文字顏色的變化以及項目分割線的制作。 |
圖像的保存方式,線條的制作,圖像表現的居中方式等 |
產品展示區域圖片的排列與分布,按鈕制作,鼠標指針的改變,以及去除元素間隙的方法等。 |
講解圖片和按鈕的布局,利用定義列表制作新聞內容,以及span標簽定義新聞時間等 |
底部區域公司名稱處理,鏈接文本處理,及電話號碼優化,代碼編組優化等 |
第五章 網站整站布局案例
|
固定定位,相對定位和絕對定位的對比及代碼編寫方式等。 |
利用定位布局制作帶有下拉框的導航條效果。 |
利用定位布局制作鼠標移入時的圖文交互效果,涉及小知識點背景顏色的不透明度以及過渡屬性設置。 |
講解transition屬性的用法,及制作簡單交互小動畫按鈕。 |
講解css3的圓角、陰影、旋轉、縮放、以及速率等屬性值 |
第六章 商業網站的綜合實例
|
吉利汽車網站首頁整體框架搭建,及頭部區域logo,導航條,搜索框的框架搭建和樣式設置 |
海報區域輪播圖的框架搭建,左右和下方切換按鈕制作,以及定位方式的優化等 |
導航菜單按鈕的創建,鼠標懸停時圖標顏色及背景的切換等 |
導航菜單下拉框的制作,鼠標懸停時顯示,離開時隱藏 |
產品展示列表制作,廣告圖制作以及新聞列表項制作 |
底部列表及備案信息,以及外部鏈接圖標的制作 |
網站內頁的CSS樣式引用以及頭部和底部區域的快捷制作方法 |