整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
時：100
學(xué)分：6
HTML+CSS是網(wǎng)頁構(gòu)成的基本要素，“跨平臺開發(fā)”的概念也逐漸走進移動開發(fā)者的視野。目前國內(nèi)外已經(jīng)有很多基于HTML5的跨平臺開發(fā)工具，掌握HTML+CSS技術(shù)，運用工具中所提供的各種豐富的功能模塊，可在很短時間內(nèi)完成App的開發(fā)而且讓你的App具備完美的原生體驗。
通過本課程的學(xué)習(xí)，使學(xué)生對網(wǎng)頁得組成有所了解，從最簡單的網(wǎng)頁開發(fā)基礎(chǔ)入手，通過本課程的學(xué)習(xí)與實踐，使學(xué)生掌握網(wǎng)頁得基本組成部分，掌握使用HTML完成網(wǎng)頁開發(fā)得步驟，并能結(jié)合CSS為網(wǎng)頁增添華麗的動畫與3D效果樣式，能夠編寫大型綜合性網(wǎng)頁。
教學(xué)章節(jié) | 理論 | 實驗 |
第一章：HTML語言基礎(chǔ) | 4 | 4 |
第二章：表格和表單 | 4 | 4 |
第三章：CSS樣式表基礎(chǔ) | 4 | 4 |
第四章：CSS樣式表深入 | 4 | 4 |
第五章：塊狀元素和行內(nèi)元素 | 4 | 4 |
第六章：盒子模型與盒子定位 | 8 | 8 |
第七章：菜單樣式設(shè)計 | 4 | 4 |
第八章：表格布局網(wǎng)頁制作 | 4 | 4 |
第九章：DIV頁面布局 | 4 | 4 |
第十章：靜態(tài)網(wǎng)站設(shè)計案例 | 10 | 10 |
合計 | 50 | 50 |
三、實踐教學(xué)的基本要求
1.課內(nèi)實驗項目一覽表
序號 | 實驗項目 | 學(xué)時 | 必/選做 |
1 | HTML基本標簽 | 2 | 必做 |
2 | 網(wǎng)頁表單表格設(shè)計 | 2 | 必做 |
3 | 網(wǎng)頁基礎(chǔ)CSS樣式設(shè)計 | 2 | 必做 |
4 | 網(wǎng)頁CSS樣式設(shè)計 | 2 | 必做 |
5 | 網(wǎng)頁CSS樣式設(shè)計 | 2 | 必做 |
6 | 浮動廣告位設(shè)計案例 | 2 | 必做 |
7 | 導(dǎo)航欄菜單設(shè)計案例 | 2 | 必做 |
8 | 網(wǎng)頁布局設(shè)計 | 2 | 必做 |
9 | 新疆旅游網(wǎng)網(wǎng)頁設(shè)計案例 | 4 | 必做 |
10 | 百度貼吧網(wǎng)頁設(shè)計案例 | 4 | 必做 |
總計 | 24 | ||
2.實踐教學(xué)要求
（1）教學(xué)目的: 加強實踐環(huán)節(jié)，培養(yǎng)學(xué)生的動手能力。使學(xué)生通過實驗驗證課堂所學(xué)理論，加深理解并掌握網(wǎng)頁設(shè)計相關(guān)理論知識。
(2) 教學(xué)要求：了解要求學(xué)生掌握Hbulider軟件的操作過程，以及利用該軟件進行實際網(wǎng)頁設(shè)計開發(fā)的步驟。
(3) 教學(xué)形式：課堂教學(xué)和教學(xué)實驗相互結(jié)合，通過實驗內(nèi)容鞏固所學(xué)知識。
四、課程的基本教學(xué)內(nèi)容及要求
第一章 HTML語言基礎(chǔ)
1.教學(xué)內(nèi)容
（1）B/S程序架構(gòu)
（2）HTML語言
（3）HTML常用標簽
2.重點與難點
重點：HTML常用標簽分類，常用標簽使用。
難點：HTML常用標簽分類，常用標簽使用。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生了解HTML語言，掌握HTML常用標簽分類以及常用標簽使用，會使用Hblider完成簡單得頁面練習(xí)。
第二章 表格和表單
1.教學(xué)內(nèi)容
（1）表格的基本結(jié)構(gòu)，表格的基本語法
（2）表格的基本操作
（3）表單的使用
（4）表單基本元素
2.重點與難點
重點：表格/表單的基本結(jié)構(gòu)，基本語法以及常用操作。
難點：表格/表單的基本結(jié)構(gòu)，基本語法以及常用操作。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求掌握網(wǎng)頁中表格和表單的基本結(jié)構(gòu)，基本語法以及常用操作，并可以完成簡單的表格表單頁面設(shè)計。
第三章 CSS樣式表基礎(chǔ)
1.教學(xué)內(nèi)容
（1）CSS基本語法
（2）CSS基本用法
（3）CSS基礎(chǔ)選擇器
2.重點與難點
重點：CSS基本語法，CSS中選擇器的分類及各類選擇器的使用方法。
難點：CSS基本語法，CSS中選擇器的分類及各類選擇器的使用方法。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生了解什么是CSS，掌握CSS基本語法和基本使用方式，CSS中選擇器的分類及各類選擇器的使用方法，并能使用CSS為網(wǎng)頁添加簡單的樣式。
第四章 CSS樣式深入
1.教學(xué)內(nèi)容
（1）CSS顏色屬性
（2）字體屬性
（3）CSS背景屬性
（4）CSS列表屬性
（5）CSS文本格式化
2.重點與難點
重點：CSS各類樣式的基本語法，屬性及使用。
難點：CSS各類樣式的基本語法，屬性及使用。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生深入了解掌握CSS顏色、字體、背景、列表等屬性基本語法和使用方式，并能使用CSS為網(wǎng)頁添加相應(yīng)的樣式。
第五章 塊狀元素,行內(nèi)元素
1.教學(xué)內(nèi)容
（1）塊狀元素和行內(nèi)元素
（2）元素之間相互轉(zhuǎn)換
2.重點與難點
重點：塊狀元素和行內(nèi)元素區(qū)別和相互轉(zhuǎn)換。
難點：塊狀元素和行內(nèi)元素區(qū)別和相互轉(zhuǎn)換。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生深入了解掌握CSS中元素的分類和相互轉(zhuǎn)換，并能使用CSS為網(wǎng)頁添加相應(yīng)的樣式。
第六章 盒子模型
1.教學(xué)內(nèi)容
（1）盒子模型
（2）盒子模型計算
（3）邊距設(shè)置
（4）盒子模型陰影
（5）盒子定位
2.重點與難點
重點：盒子模型大小計算方式，內(nèi)外邊距設(shè)置使用，盒子定位方式和區(qū)別。
難點：盒子模型大小計算方式，內(nèi)外邊距設(shè)置使用，盒子定位方式和區(qū)別。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生深入了解掌握CSS中盒子模型的分類，盒子大小的計算，以及盒子邊距的設(shè)計和計算，熟練定位盒子位置，并能使用CSS為網(wǎng)頁添加相應(yīng)的樣式。
第七章 菜單樣式設(shè)計
1.教學(xué)內(nèi)容
（1）水平導(dǎo)航菜單設(shè)計
（2）垂直導(dǎo)航菜單設(shè)計
（3）懸浮菜單設(shè)計
2.重點與難點
重點：水平/垂直/懸浮導(dǎo)航菜單設(shè)計。
難點：水平/垂直/懸浮導(dǎo)航菜單設(shè)計。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生熟練使用CSS樣式基礎(chǔ)完成不同類型的導(dǎo)航菜單設(shè)計。
第八章 表格布局網(wǎng)頁制作
1.教學(xué)內(nèi)容
（1）網(wǎng)頁布局屬性
（2）使用表格完成完成網(wǎng)頁布局
2.重點與難點
重點：使用表格完成完成網(wǎng)頁布局。
難點：使用表格完成完成網(wǎng)頁布局。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生掌握網(wǎng)頁布局的用途，熟練使用CSS表格完成網(wǎng)頁布局。
第九章 DIV頁面布局
1.教學(xué)內(nèi)容
（1）使用DIV完成完成網(wǎng)頁布局
（2）新疆旅游網(wǎng)網(wǎng)頁設(shè)計
2.重點與難點
重點：使用DIV完成完成網(wǎng)頁布局。
難點：使用DIV完成完成網(wǎng)頁布局。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生掌握網(wǎng)頁布局的用途，熟練使用DIV完成網(wǎng)頁布局，完成新疆旅游網(wǎng)網(wǎng)頁設(shè)計。
第十章 靜態(tài)網(wǎng)站設(shè)計案例
1.教學(xué)內(nèi)容
（1）百度貼吧網(wǎng)頁設(shè)計
2.重點與難點
重點：百度貼吧網(wǎng)頁設(shè)計。
難點：百度貼吧網(wǎng)頁設(shè)計。
3.課程教學(xué)要求
本章采用多媒體講述的教學(xué)方法，要求學(xué)生熟練使用HTML+CSS完成百度貼吧網(wǎng)頁設(shè)計
五、課程考核
1.考核方式、記分制和考核時間
本課程采用理論閉卷考查+上機實踐兩種考核方式，成績采用百分制記分，理論考試時間為60分鐘，上機考試時間為120分鐘
2.考試成績構(gòu)成
課程總成績=平時成績10%+實踐成績20%+期末考試成績70%。
3.考核題型及命題要求
理論考核題型為選擇題。
上機考試題型為網(wǎng)頁設(shè)計題。
命題依據(jù)教學(xué)大綱要求，命題在教學(xué)大綱規(guī)定的教學(xué)目的、教學(xué)要求、教學(xué)內(nèi)容和教材范圍之內(nèi)，按照重分析推理和理論聯(lián)系實際原則，既考查對基本知識的識記能力，又考查運用所學(xué)知識實際運用能力，考試命題的覆蓋面應(yīng)盡可能廣一些，其中主要考查學(xué)生對HTML+CSS基礎(chǔ)的掌握程度和使用HTML+CSS完成網(wǎng)頁設(shè)計的熟練程度。
六、參考教材
[1] 明日科技.梅長林.零基礎(chǔ)學(xué)HTML5+CSS3.吉林大學(xué)出版社,2017
[2] Elisabeth Robson,Eric Freeman著,徐陽,丁小峰等譯.Head First HTML與CSS（第2版）.中國電力出版社.2013
七、大綱說明
本大綱根據(jù)計算機應(yīng)用專業(yè)人才培養(yǎng)方案、培養(yǎng)規(guī)格和數(shù)據(jù)分析與處理性質(zhì)，結(jié)合學(xué)校現(xiàn)有條件制定本大綱，其內(nèi)容根據(jù)課程內(nèi)容、人才培養(yǎng)方案及科學(xué)性和合理性原則選編。對大綱中的重點應(yīng)深入講解，對難點采用課堂講授與課下輔導(dǎo)為主，課堂講授中，教師反復(fù)強調(diào)工程性的指導(dǎo)思想，以及所講知識點在信息科學(xué)領(lǐng)域所處的位置和作用，以生動的實例引導(dǎo)學(xué)生，提高學(xué)生學(xué)習(xí)的積極性。
制定人： 審定人：
學(xué)目標：
1. 理解前端開發(fā)的基本概念和原理。
- 前端開發(fā)的定義和作用
- 前端開發(fā)的基本工具和環(huán)境
- 前端開發(fā)的職責(zé)和要求
2. 掌握HTML5標記語言的基本語法、元素和屬性。
- HTML5的發(fā)展歷程和版本
- HTML5文檔結(jié)構(gòu)和基本語法規(guī)范
- HTML5常用的文本標記、圖像標記、表格標記等
- HTML5的表單元素和相關(guān)屬性
3. 掌握CSS3的基本語法、選擇器和常用樣式屬性。
- CSS3的發(fā)展歷程和版本
- CSS3的基本語法和選擇器
- CSS3的盒模型、布局和浮動
- CSS3的文本樣式、背景樣式和過渡動畫
it學(xué)習(xí)
4. 理解JavaScript的基本語法、數(shù)據(jù)類型、條件語句和循環(huán)結(jié)構(gòu)。
- JavaScript的基本語法和變量定義
- JavaScript的數(shù)據(jù)類型和類型轉(zhuǎn)換
- JavaScript的條件語句和邏輯運算
- JavaScript的循環(huán)結(jié)構(gòu)和數(shù)組操作
5. 掌握DOM操作，能夠使用JavaScript操作HTML文檔中的元素。
- DOM的概念和基本原理
- 使用JavaScript獲取和操作HTML元素
- 使用JavaScript創(chuàng)建、修改和刪除HTML元素
- DOM事件的處理和綁定
6. 理解響應(yīng)式設(shè)計的概念和基本原理。
- 響應(yīng)式設(shè)計的定義和作用
- 使用媒體查詢實現(xiàn)頁面布局的適應(yīng)性
- 使用流式布局和彈性盒子布局實現(xiàn)頁面適配
- 使用響應(yīng)式圖片等技術(shù)提升頁面響應(yīng)性
軟件開發(fā)
大綱精細化教學(xué)設(shè)計：
第一部分：前端開發(fā)基礎(chǔ)
1. 前端開發(fā)概述
1.1 什么是前端開發(fā)
1.2 前端開發(fā)的歷史和發(fā)展趨勢
1.3 前端開發(fā)的基本工具和環(huán)境
2. HTML5基礎(chǔ)
2.1 HTML5的簡介和發(fā)展歷程
2.2 HTML5的文檔結(jié)構(gòu)和基本語法規(guī)范
2.3 HTML5常用的文本標記、圖像標記、鏈接標記等
2.4 HTML5的表單元素和相關(guān)屬性
3. CSS3基礎(chǔ)
3.1 CSS3的簡介和發(fā)展歷程
3.2 CSS3的基本語法和選擇器
3.3 CSS3的盒模型、布局和浮動
3.4 CSS3的文本樣式、背景樣式和過渡動畫
4. JavaScript基礎(chǔ)
4.1 JavaScript的簡介和發(fā)展歷程
4.2 JavaScript的基本語法和變量定義
4.3 JavaScript的數(shù)據(jù)類型和類型轉(zhuǎn)換
4.4 JavaScript的條件語句和邏輯運算
4.5 JavaScript的循環(huán)結(jié)構(gòu)和數(shù)組操作
小程序開發(fā)
第二部分：網(wǎng)頁交互與動態(tài)效果
1. DOM操作
1.1 DOM的概念和基本原理
1.2 使用JavaScript獲取和操作HTML元素
1.3 使用JavaScript創(chuàng)建、修改和刪除HTML元素
1.4 DOM事件的處理和綁定
2. 事件處理與表單驗證
2.1 常見的DOM事件類型和觸發(fā)條件
2.2 使用JavaScript處理交互事件
2.3 表單驗證的基本原理和實現(xiàn)方法
3. Ajax與數(shù)據(jù)交互
3.1 Ajax的簡介和發(fā)展歷程
3.2 使用JavaScript發(fā)送異步請求
3.3 處理服務(wù)器返回的數(shù)據(jù)
第三部分：響應(yīng)式設(shè)計與跨平臺開發(fā)
1. 響應(yīng)式設(shè)計概述
1.1 響應(yīng)式設(shè)計的定義和作用
1.2 媒體查詢的基本語法和常用屬性
1.3 使用響應(yīng)式設(shè)計實現(xiàn)網(wǎng)頁適配
2. 移動端開發(fā)概述
2.1 移動端開發(fā)的特點和挑戰(zhàn)
2.2 使用CSS3實現(xiàn)移動端樣式效果
2.3 使用JavaScript處理移動端交互
3. 跨平臺開發(fā)基礎(chǔ)
3.1 常見的跨平臺開發(fā)技術(shù)和框架
3.2 使用跨平臺開發(fā)工具搭建應(yīng)用
3.3 測試和發(fā)布跨平臺應(yīng)用
通過以上的教學(xué)目標和大綱精細化教學(xué)設(shè)計，學(xué)習(xí)者將能夠全面掌握前端開發(fā)所需的HTML5、CSS3和JavaScript的基礎(chǔ)知識，并能夠應(yīng)用所學(xué)知識實現(xiàn)網(wǎng)頁交互和動態(tài)效果，以及具備響應(yīng)式設(shè)計和跨平臺開發(fā)的能力。
eb前端HTML/CSS教程大綱
本文總結(jié)了HTML和CSS的教程大綱，大家可以保存收藏下來的，這個是一個學(xué)習(xí)大綱頁面方便自己找文章，HTML和CSS是前端的基礎(chǔ)，這個是需要學(xué)的，有了基礎(chǔ)后面的JS、vue框架等等，都容易學(xué)。
古語有言，名師出高徒，如果跟弱者學(xué)習(xí)，那么就會成為弱者，跟強者學(xué)習(xí)，就會成為強者，學(xué)習(xí)跟混社會是一樣的道理，如果你跟精明的商人學(xué)習(xí)你就會成為商業(yè)高手，如果你跟擺地攤的學(xué)習(xí)，那你就成為擺地攤的貨色，學(xué)習(xí)前端也是如此，如果你是真心想學(xué)好前端，你可以來這個群 153775627，前端大神之路正為你敞開！
HTML/CSS教程大綱
HTML教程：
1、HTML是什么？
2、HTML使用哪個編輯器好
3、HTML基礎(chǔ)標簽的使用
4、HTML元素標簽
5、HTML標題的重要性
6、什么是HTML段落
7、HTML常用的文本格式
8、HTML跳轉(zhuǎn)鏈接制作
9、HTML頭部了解
10、HTML中的CSS是什么？
11、HTML圖片調(diào)用
12、HTML表格編寫方法
13、HTML列表編寫方法
14、HTML表單的玩法
15、HTML模塊
16、HTML網(wǎng)頁布局
17、HTML顏色調(diào)用
18、什么是HTML腳本
19、HTML中URL的由來
20、HTML字符實體
21、HTML用過的標簽元素
22、HTML總結(jié)
CSS教程：
1、什么是CSS
2、CSS語法
3、CSS中的ID和class
4、CSS創(chuàng)建
5、CSS背景
6、CSS文本
7、CSS字體
8、CSS鏈接
9、CSS列表
10、CSS表格
11、CSS盒子
12、CSS邊框
13、CSS中outline屬性
14、CSS外邊距
15、CSS填充
16、CSS分組和嵌套選擇器
17、CSS尺寸
18、CSS中的Display與Visibility
19、CSS中的Positioning定位
20、CSS浮動
21、CSS水平對齊
22、CSS組合選擇符
23、CSS偽類(Pseudo-classes)
24、CSS偽元素
25、CSS導(dǎo)航欄
26、CSS下拉框
27、CSS媒體類型
28、CSS屬性選擇器
29、CSS總結(jié)
HTML和CSS主要是做靜態(tài)頁面，做得高深一點，做成動態(tài)及特效也是可以做到，主要是看自己怎么運用，在這里發(fā)的，只是我最初學(xué)前端的一些知識，這也是最基礎(chǔ)的知識，算不上有多高深，但是基礎(chǔ)要打牢，后面的才會好學(xué)，話不多少，就說到這！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
