課時

學(xué)習(xí)簡介

學(xué)習(xí)收益

DIV+CSS基礎(chǔ)入門

1.DIV+CSS是什么意思

2.如何用CSS代碼控制頁面

3.CSS代碼語法基礎(chǔ)

4.CSS選擇器

5.選擇器集體聲明

1、學(xué)習(xí)并了解 DIV+CSS 是什么意思
2、了解傳統(tǒng)布局和 CSS 樣式布局的區(qū)別

3、掌握行內(nèi)樣式、內(nèi)嵌樣式、外部鏈接樣式的特點與寫法
4、熟練運用并掌握 CSS 三種選擇器
5、了解 DIV+CSS 語法基礎(chǔ)

6、了解選擇器的集體聲明、嵌套聲明、混合聲明之間的區(qū)別

DIV字體與背景屬性

1.設(shè)置文本屬性

2.設(shè)置背景屬性

3.CSS樣式整合

1、學(xué)會設(shè)置文字一系列樣式屬性并能兼容各種主流瀏覽器
2、掌握怎么在沒有記住代碼的時候去設(shè)置屬性

3、學(xué)會設(shè)置網(wǎng)頁當(dāng)中的背景顏色
4、學(xué)會如何將圖片以背景的形式插入
5、掌握自如控制平鋪與定位

6、學(xué)會將代碼進行 整合有利于頁面的整潔
7、運用 CSS 代碼布局大體網(wǎng)頁框架

CSS盒模型與布局

1.盒模型概述

2.盒的尺寸

3.邊距設(shè)置

1、了解 DIV+CSS 布局中盒模型的概念意義
2、學(xué)會將所有的網(wǎng)頁元素都看成是一個一個的矩形框，分 析出框里面的組成元素

3、掌握如何計算 CSS 布局中盒子的尺寸
4、掌握在布局當(dāng)中盒子邊框樣式的設(shè)置
5、掌握如何設(shè)置單獨邊框的樣式

6、掌握并了解網(wǎng)頁布局中盒子邊距的重要性與使用用途
7、掌握外邊距與內(nèi)邊距樣式的區(qū)別并
8、掌握如何設(shè)置上下左右邊距各不相同的間距

列表導(dǎo)航與超鏈接

1.浮動樣式布局

2.列表導(dǎo)航

3.什么是超鏈接

4.超鏈接的四種狀態(tài)

1、了解網(wǎng)頁布局中常用的布局樣式之一（浮動布局）
2、掌握浮動布局中的塊狀元素與內(nèi)聯(lián)元
3、運用 CSS 樣式清除網(wǎng)頁中的浮動屬性素

4、了解列表在網(wǎng)頁中的重要性與實用性
5、了解并熟悉ul無序列表和 dl定義列表在網(wǎng)頁中的使用用 途與使用技巧方法
6、熟練掌握符號列表的圖片屬性和定位屬性

7、了解什么是超鏈接？了解超鏈接的基本定義
8、掌握在 HTML 語言中，通過標(biāo)簽實現(xiàn)超鏈接效果
9、利用 css 設(shè)置超鏈接四種常用狀態(tài)下的樣式
10、自定義設(shè)置超鏈接樣式屬性并運動到文本

表單美化與定位布局

1.什么是表單？

2.制作表單的常用標(biāo)記

3.相對定位

4.絕對定位

5.固定定位

6.層疊順序

7.定位布局

1、掌握表單在網(wǎng)頁當(dāng)中的重要
2、了解后期表單的應(yīng)用范圍

3、運用 CSS 樣式對文本框和文本域進行美化
4、掌握在DW中如何改變文本框和文本域樣式

5、了解在布局中，常用的 CSS 定位方式有幾種
6、掌握絕對定位、相對定位的使用與z-index解析
7、了解網(wǎng)頁布局中，浮動元素（float）與定位（position） 的不同點
8、掌握在CSS布局中，四大核心內(nèi)容（標(biāo)準(zhǔn)流、盒模型、 浮動元素、定位）

DIV+CSS基礎(chǔ)入門

1.DIV+CSS是什么意思

2.如何用CSS代碼控制頁面

3.CSS代碼語法基礎(chǔ)

4.CSS選擇器

5.選擇器集體聲明

1、學(xué)習(xí)并了解 DIV+CSS 是什么意思
2、了解傳統(tǒng)布局和 CSS 樣式布局的區(qū)別

3、掌握行內(nèi)樣式、內(nèi)嵌樣式、外部鏈接樣式的特點與寫法
4、熟練運用并掌握 CSS 三種選擇器
5、了解 DIV+CSS 語法基礎(chǔ)

6、了解選擇器的集體聲明、嵌套聲明、混合聲明之間的區(qū)別

DIV字體與背景屬性

1.設(shè)置文本屬性

2.設(shè)置背景屬性

3.CSS樣式整合

1、學(xué)會設(shè)置文字一系列樣式屬性并能兼容各種主流瀏覽器
2、掌握怎么在沒有記住代碼的時候去設(shè)置屬性

3、學(xué)會設(shè)置網(wǎng)頁當(dāng)中的背景顏色
4、學(xué)會如何將圖片以背景的形式插入
5、掌握自如控制平鋪與定位

6、學(xué)會將代碼進行 整合有利于頁面的整潔
7、運用 CSS 代碼布局大體網(wǎng)頁框架

CSS盒模型與布局

1.盒模型概述

2.盒的尺寸

3.邊距設(shè)置

1、了解 DIV+CSS 布局中盒模型的概念意義
2、學(xué)會將所有的網(wǎng)頁元素都看成是一個一個的矩形框，分 析出框里面的組成元素

3、掌握如何計算 CSS 布局中盒子的尺寸
4、掌握在布局當(dāng)中盒子邊框樣式的設(shè)置
5、掌握如何設(shè)置單獨邊框的樣式

6、掌握并了解網(wǎng)頁布局中盒子邊距的重要性與使用用途
7、掌握外邊距與內(nèi)邊距樣式的區(qū)別并
8、掌握如何設(shè)置上下左右邊距各不相同的間距

列表導(dǎo)航與超鏈接

1.浮動樣式布局

2.列表導(dǎo)航

3.什么是超鏈接

4.超鏈接的四種狀態(tài)

1、了解網(wǎng)頁布局中常用的布局樣式之一（浮動布局）
2、掌握浮動布局中的塊狀元素與內(nèi)聯(lián)元
3、運用 CSS 樣式清除網(wǎng)頁中的浮動屬性素

4、了解列表在網(wǎng)頁中的重要性與實用性
5、了解并熟悉ul無序列表和 dl定義列表在網(wǎng)頁中的使用用 途與使用技巧方法
6、熟練掌握符號列表的圖片屬性和定位屬性

7、了解什么是超鏈接？了解超鏈接的基本定義
8、掌握在 HTML 語言中，通過標(biāo)簽實現(xiàn)超鏈接效果
9、利用 css 設(shè)置超鏈接四種常用狀態(tài)下的樣式
10、自定義設(shè)置超鏈接樣式屬性并運動到文本

表單美化與定位布局

1.什么是表單？

2.制作表單的常用標(biāo)記

3.相對定位

4.絕對定位

5.固定定位

6.層疊順序

7.定位布局

1、掌握表單在網(wǎng)頁當(dāng)中的重要
2、了解后期表單的應(yīng)用范圍

3、運用 CSS 樣式對文本框和文本域進行美化
4、掌握在DW中如何改變文本框和文本域樣式

5、了解在布局中，常用的 CSS 定位方式有幾種
6、掌握絕對定位、相對定位的使用與z-index解析
7、了解網(wǎng)頁布局中，浮動元素（float）與定位（position） 的不同點
8、掌握在CSS布局中，四大核心內(nèi)容（標(biāo)準(zhǔn)流、盒模型、 浮動元素、定位）

DW基礎(chǔ)入門知識

1.初識網(wǎng)站和網(wǎng)頁

2.Dreamweaver基礎(chǔ)入門

3.使用DW定義網(wǎng)頁站點

4.網(wǎng)頁文件的基本操作

5.網(wǎng)頁文件的命名方法

1、學(xué)習(xí)并了解網(wǎng)頁的概念，網(wǎng)站的概念
2、認知網(wǎng)站的分類及瀏覽網(wǎng)頁的工具
3、了解開發(fā)實用型網(wǎng)站的基本流程
4、認識組成網(wǎng)頁的元素，并掌握網(wǎng)頁排版的規(guī)則

5、熟練掌握建立網(wǎng)站站點的方法
6、掌握站點當(dāng)中文件及文件夾的新建以及命名規(guī)則
7、熟練掌握二級目錄的設(shè)置及站點當(dāng)中文件分類的管理
8、掌握網(wǎng)頁的新建、打開、預(yù)覽、存儲、關(guān)閉的技巧

9、站點文件夾/文件命名規(guī)則
10、二級目錄設(shè)置，文件分類管理
11、網(wǎng)頁的命名與保存

插入文本圖像超鏈接

1.網(wǎng)頁中輸入文本

2.網(wǎng)頁中插入圖像

3.網(wǎng)頁超鏈接

4.文本和圖像鏈接

5.熱點鏈接

1、熟悉在代碼視圖和設(shè)計視圖當(dāng)中輸入文字
2、掌握基本相應(yīng)的代碼對應(yīng)的效果
3、掌握并了解網(wǎng)頁當(dāng)中允許使用的圖片格式
4、掌握如何在網(wǎng)頁中實現(xiàn)圖文混排效果，并兼容主流瀏覽器

5、掌握網(wǎng)頁中超鏈接概念及用途
6、熟悉DW各種鏈接的概念以及對應(yīng)的操作
7、學(xué)會使用DW如何給圖片進行添加鏈接
8、使用頁面屬性面板修改超鏈接樣式

9、熟練掌握圖像熱區(qū)的超級鏈接方法
10、添加淘寶櫥窗列表圖像熱區(qū)鏈接

插入表單選項

1.什么是表單

2.表單元素

3.插入表單項

1、認識網(wǎng)頁中表單所有的元素種類
2、掌握表單在網(wǎng)頁中的應(yīng)用
3、理解表單在收集用戶信息方面的作用機理

4、認識表單元素種類
5、學(xué)會在網(wǎng)頁中合理地設(shè)置表單
6、掌握表單及表單對象屬性的設(shè)置

7、學(xué)會在網(wǎng)頁中合理地設(shè)置表單
8、掌握如何創(chuàng)建表單
9、掌握向表單中插入表單對象的方法

表格布局與切片

1.網(wǎng)頁表格的概念

2.表格的基本操作

3.設(shè)置表格屬性

4.切片的意義

5.規(guī)范切片的類型

1、了解表格在網(wǎng)頁中的重要性與實用性
2、了解并熟悉表格的標(biāo)簽元素

3、學(xué)會在設(shè)計視圖中插入表格的方法
4、熟練掌握表格中的添加、刪除、合并、拆分等技巧

5、掌握網(wǎng)頁中切圖的重要性
6、掌握網(wǎng)頁中切片的存儲及優(yōu)化技巧

插入多媒體內(nèi)容

1.網(wǎng)頁多媒體

2.插入Flash動畫

3.插入音頻文件

4.插入視頻文件

1、掌握網(wǎng)頁制作中如何添加多媒體元素
2、熟練掌握DW處理多媒體的方法與技巧

3、學(xué)會如何在網(wǎng)頁中添加 FLASH 動畫
4、插入網(wǎng)頁動畫圖片與滾動文本
5、實現(xiàn)各種主流瀏覽器的兼容

6、掌握 HTML 語言及聲音及視頻的格式
7、掌握利用第三方平臺來插入視頻與音頻
8、實現(xiàn)各種主流瀏覽器的兼容

網(wǎng)頁設(shè)計綜合實訓(xùn)

?

1.了解網(wǎng)頁版式設(shè)計概念及常見的網(wǎng)頁版式類型

2.學(xué)習(xí)并掌握如何根據(jù)實際需要制定網(wǎng)頁/網(wǎng)店頁面布局規(guī)范

3.了解色彩基本知識和色彩的視覺識別性，各種不同場景的配色用法和意義

4.掌握網(wǎng)頁中圖片的編排規(guī)則和文本的組合編排規(guī)則，以及柵格的應(yīng)用

1.網(wǎng)頁設(shè)計的版式類型介紹
2.網(wǎng)頁設(shè)計中的頁面布局規(guī)范
3.網(wǎng)頁設(shè)計視覺設(shè)計配色規(guī)范
4.網(wǎng)頁設(shè)計的圖文編排規(guī)則

1.認識和注冊第三方建站系統(tǒng)平臺

2.使用第三方建站系統(tǒng)制作網(wǎng)站前端效果

3.保存網(wǎng)頁，熟練運用生成代碼，構(gòu)建本地頁面

1.常見的第三方建站系統(tǒng)
2.第三方建站系統(tǒng)模塊實操
3.成品網(wǎng)站代碼運用實戰(zhàn)

網(wǎng)站設(shè)計實戰(zhàn)式練習(xí)

1.熟悉網(wǎng)站首頁常見的布局類型及其相應(yīng)特點

2.熟悉行業(yè)網(wǎng)站首頁頁面布局規(guī)范，根據(jù)規(guī)范設(shè)計頁面

3.實戰(zhàn)練習(xí)，從零開始使用DIV+CSS布局網(wǎng)頁界面效果

實戰(zhàn)練習(xí)，突破頁面從一到多，實現(xiàn)靜態(tài)網(wǎng)站效果

1.實戰(zhàn)練習(xí)之使用DIV+CSS布局網(wǎng)頁一
2.實戰(zhàn)練習(xí)之使用DIV+CSS布局網(wǎng)頁二

備：電商發(fā)展日新月異，本班級課程內(nèi)容以當(dāng)月更新為準(zhǔn)，敬請同行切勿模仿

?

?