惠州高級(jí)電商網(wǎng)頁設(shè)計(jì)培訓(xùn)班

課程體系

學(xué)習(xí)簡(jiǎn)介

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

第 一課時(shí)

Dreamweaver

對(duì)網(wǎng)頁的知識(shí)有個(gè)基本的了解；

能區(qū)分什么是網(wǎng)站和什么是網(wǎng)頁，結(jié)合實(shí)際了解網(wǎng)頁的分類形式，以及制作網(wǎng)頁的流程

熟悉DW軟件的界面，掌握文件的一系列基本操作

學(xué)會(huì)DW軟件基本的使用操作；站點(diǎn)新建，管理的方法；

了解網(wǎng)站基本分類方法概述；理解網(wǎng)站運(yùn)作的基本原理；

了解網(wǎng)頁的基本構(gòu)成元素，各種網(wǎng)站的頁面排版規(guī)則。

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

第二課時(shí)

Dreamweaver

熟練掌握建立網(wǎng)站站點(diǎn)的方法；

掌握站點(diǎn)當(dāng)中文件及文件夾的新建以及命名規(guī)則；

熟練掌握二級(jí)目錄的設(shè)置及站點(diǎn)當(dāng)中文件分類的管理；

掌握網(wǎng)頁的新建、打開、預(yù)覽、存儲(chǔ)、關(guān)閉的技巧；

掌握Dreamweaver快速插入面板的使用。

1.學(xué)會(huì)創(chuàng)建靜態(tài)站點(diǎn)；
2.站點(diǎn)文件夾新建，命名規(guī)則；
3.二級(jí)目錄設(shè)置，文件分類管理；
4.網(wǎng)頁的命名與保存。

第三課時(shí)

Dreamweaver

熟悉操作界面，并學(xué)會(huì)在代碼視圖和設(shè)計(jì)視圖當(dāng)中輸入文字，掌握基本相應(yīng)的代碼對(duì)應(yīng)的效果。

學(xué)會(huì)在網(wǎng)頁當(dāng)中插入所需要的圖片，了解相應(yīng)的格式，以及在DW中一些簡(jiǎn)單的編輯方法（裁剪、縮放等）

1.在網(wǎng)頁中添加文本；
2.了解網(wǎng)頁當(dāng)中常用的標(biāo)簽；
3.掌握網(wǎng)頁當(dāng)中的常用的標(biāo)題標(biāo)簽；
4.設(shè)置網(wǎng)頁文字樣式屬性；
5.添加文字項(xiàng)目列表與編號(hào)列表。

第四課時(shí)

Dreamweaver

掌握并了解網(wǎng)頁當(dāng)中允許使用的圖片格式；

能夠自由的插入網(wǎng)頁圖片，并學(xué)會(huì)使用；Dreamweaver軟件如何給圖片進(jìn)行添加鏈接；

網(wǎng)頁中添加圖片的方法，圖片代碼的編輯修改；

掌握如何在網(wǎng)頁當(dāng)中實(shí)現(xiàn)圖文混排效果，并兼容主流瀏覽器。

1.網(wǎng)頁當(dāng)中使用的圖片格式；

2.插入網(wǎng)頁圖片；

3.圖片加鏈接；

4.使用Dreamweaver編輯圖片，優(yōu)化圖片；

5.在網(wǎng)頁當(dāng)中實(shí)現(xiàn)圖文混排效果。

第五課時(shí)

Dreamweaver

熟練掌握網(wǎng)頁中超鏈接概念及用途；

熟悉DW各種鏈接的概念以及對(duì)應(yīng)的操作

熟練掌握用DreamWeaver制作各種超級(jí)鏈接；

使用頁面屬性面板修改超鏈接樣式；

熟練掌握?qǐng)D像超級(jí)鏈接，圖像熱區(qū)的超級(jí)鏈接方法。

1.了解網(wǎng)頁中超鏈接概念；

2.添加超級(jí)鏈接；
3.郵件及空鏈接、死鏈接；
4.添加網(wǎng)頁錨點(diǎn)鏈接；
5.添加圖像熱區(qū)鏈接。

第六課時(shí)

Dreamweaver

認(rèn)識(shí)網(wǎng)頁中表單所有的元素種類，掌握表單在網(wǎng)頁中的應(yīng)用；

理解表單在收集用戶信息方面的作用機(jī)理；

學(xué)會(huì)在網(wǎng)頁中合理地設(shè)置表單，并制作一個(gè)課表；

利用表單對(duì)象制作友情鏈接，制作一個(gè)友鏈的前端頁面。

1.認(rèn)識(shí)表單元素種類；
2.掌握創(chuàng)建表單、向表單中插入表單對(duì)象的方法；
3.掌握表單及表單對(duì)象屬性的設(shè)置。

第七課時(shí)Dreamweaver

了解表格在網(wǎng)頁中的重要性與實(shí)用性；

了解并熟悉表格的標(biāo)簽元素，學(xué)會(huì)在設(shè)計(jì)視圖和代碼視圖中插入表格的方法；

熟練掌握與運(yùn)用表格中的添加、刪除、合并、拆分等技巧；

學(xué)會(huì)使用表格布局網(wǎng)頁的部分元素，如尺碼表，商品信息，關(guān)聯(lián)列表等等。

1.了解網(wǎng)頁表格的概念含義；
2.熟練掌握表格的組成元素；
3.學(xué)會(huì)如何在網(wǎng)頁當(dāng)中插入表格；
4.掌握如何設(shè)置表格的屬性；
5.通過實(shí)例熟悉表格布局網(wǎng)頁方法。

第八課時(shí)

Dreamweaver

掌握網(wǎng)頁制作中如何添加圖像和多媒體等網(wǎng)頁元素；

熟練掌握在DreamWeaver中處理圖片和多媒體的方法和操作技巧；

學(xué)會(huì)如何在網(wǎng)頁中添加FLASH動(dòng)畫，插入圖像和視頻，以及背景音樂；

掌握HTML語言及聲音及視頻的格式。

1.添加多媒體、了解有哪些多媒體元素；

2.插入Flash多媒體元素，或快速有效的3.利用第三方平臺(tái)結(jié)合來插入視頻與音頻；

4.插入網(wǎng)頁動(dòng)畫圖片與滾動(dòng)文本；

5.實(shí)現(xiàn)各種主流瀏覽器兼容性。

第九課時(shí)

DIV+CSS

了解什么是DIV？什么是CSS？了解傳統(tǒng)布局和CSS樣式布局的區(qū)別

熟練并完全掌握行內(nèi)樣式、內(nèi)嵌樣式、外部鏈接樣式的特點(diǎn)與寫法，了解多種樣式的優(yōu)先級(jí)

掌握標(biāo)簽選擇器、類別選擇器、ID選擇器的特點(diǎn)與寫法，并能在XHTML頁面實(shí)現(xiàn)調(diào)用樣式。

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

1.學(xué)習(xí)并了解DIV+CSS是什么意思
2.用CSS代碼控制頁面
3.了解DIV+CSS語法基礎(chǔ)
4.熟練運(yùn)用并掌握CSS三種選擇器
5.掌握選擇器的集體聲明

第十課時(shí)

DIV+CSS

學(xué)會(huì)設(shè)置文字字體、大小、顏色、粗細(xì)等一系列樣式屬性并能兼容各種主流瀏覽器

學(xué)會(huì)設(shè)置網(wǎng)頁當(dāng)中的背景顏色

學(xué)會(huì)如何將圖片以背景的形式插入，并自如控制平鋪與定位

相同屬性代碼太長(zhǎng)容易影響顯示效果，學(xué)會(huì)將代碼進(jìn)行整合有利于頁面的整潔

1.學(xué)習(xí)CSS文字屬性設(shè)置
2.學(xué)習(xí)如何在網(wǎng)頁當(dāng)中設(shè)置背景顏色
3.學(xué)習(xí)如何將圖片以背景形式插入
4.學(xué)會(huì)如何將多行樣式代碼進(jìn)行整合
5.運(yùn)用CSS代碼布局大體網(wǎng)頁框架

第十一課時(shí)

DIV+CSS

學(xué)會(huì)將所有的網(wǎng)頁元素都看成是一個(gè)一個(gè)的矩形框，分析出框里面的組成元素

學(xué)會(huì)如何量取出盒子的正確尺寸并進(jìn)行布局

掌握在布局當(dāng)中盒子邊框樣式的設(shè)置并進(jìn)行調(diào)整

能夠自由的對(duì)多行相同屬性代碼進(jìn)行整合

掌握盒子的外邊距邊界與內(nèi)邊距填充的區(qū)別

1.了解DIV+CSS布局中盒模型的概念意義
2.掌握如何計(jì)算CSS布局中盒子的尺寸
3.了解并掌握盒子模型邊框的設(shè)置
4.掌握如何設(shè)置單獨(dú)邊框的樣式
5.掌握如何把代碼進(jìn)行整合

第十二課時(shí)

DIV+CSS

掌握并了解網(wǎng)頁布局中盒子邊距的重要性與使用用途

掌握外邊距與內(nèi)邊距樣式的區(qū)別并能夠正確的使用

掌握如何設(shè)置上下左右邊距各不相同的間距

掌握如何清除在添加內(nèi)邊距時(shí)增加的盒子尺寸

1.掌握在CSS布局中邊距的重要性
2.了解常用的外邊距（margin）與內(nèi)邊距（padding）樣式的運(yùn)用
3.正確掌握外邊距與內(nèi)邊距樣式的使用
4.運(yùn)用CSS代碼布局網(wǎng)頁主體框架結(jié)構(gòu)

第十三課時(shí)

DIV+CSS

了解網(wǎng)頁布局中常用的布局樣式之一（浮動(dòng)布局）

掌握浮動(dòng)布局中的塊狀元素與內(nèi)聯(lián)元素的區(qū)別及使用用途

運(yùn)用CSS樣式清除網(wǎng)頁中的浮動(dòng)屬性(clear)

掌握浮動(dòng)屬性的相關(guān)知識(shí)點(diǎn)，了解如何實(shí)現(xiàn)層的居中對(duì)齊

1.學(xué)習(xí)網(wǎng)頁當(dāng)中的浮動(dòng)屬性布局
2.掌握浮動(dòng)布局中的塊狀元素與內(nèi)聯(lián)元素
3.掌握如何清除網(wǎng)頁中的浮動(dòng)屬性
4.利用浮動(dòng)布局制作橫排菜單導(dǎo)航條
5.掌握浮動(dòng)屬性的相關(guān)知識(shí)點(diǎn)

第十四課時(shí)

DIV+CSS

了解列表在網(wǎng)頁中的重要性與實(shí)用性

了解并熟悉ul無序列表和dl定義列表在網(wǎng)頁中的使用用途與使用技巧方法

了解并熟練掌握符號(hào)列表的基礎(chǔ)屬性list-style-type

了解并熟練掌握符號(hào)列表的圖片屬性和定位屬性

1.了解列表在網(wǎng)頁設(shè)計(jì)中使用用途
2.了解ul無序列表和dl定義列表
3.學(xué)會(huì)如何改變項(xiàng)目符號(hào)樣式
4.圖片定義項(xiàng)目符號(hào)以及符號(hào)定位屬性

第十五課時(shí)

DIV+CSS

新聞列表實(shí)戰(zhàn)案例練習(xí)，掌握定義列表屬性的設(shè)置技巧

無序列表導(dǎo)航條源碼練習(xí)，掌握導(dǎo)航條鏈接標(biāo)簽的表現(xiàn)要點(diǎn)

定義列表產(chǎn)品排列練習(xí)，掌握定義列表標(biāo)簽的表現(xiàn)要點(diǎn)

1.實(shí)例1：運(yùn)用ul無序列表制作新聞列表
2.實(shí)例2：運(yùn)用ul無序列表制作導(dǎo)航條
3.實(shí)例2：運(yùn)用dl定義列表制作產(chǎn)品排列效果

第十六課時(shí)

DIV+CSS

了解什么是超鏈接？了解超鏈接的基本定義

掌握在HTML語言中，通過標(biāo)簽實(shí)現(xiàn)超鏈接效果

利用css設(shè)置超鏈接各種狀態(tài)下的樣式

css利用偽類選擇器設(shè)置標(biāo)記的不同狀態(tài)

1.了解網(wǎng)頁中超鏈接的基本定義
2.添加文本菜單超鏈接
3.了解超鏈接的四種常用狀態(tài)
4.自定義設(shè)置超鏈接樣式屬性

第十七課時(shí)

DIV+CSS

運(yùn)用CSS樣式對(duì)文本框和文本域進(jìn)行美化

掌握在DreamWeaver中用CSS樣式美化圖片的方法和技巧

學(xué)會(huì)如何用CSS樣式改變下拉列表樣式，糾正下拉列表對(duì)許多樣式不生效的問題

合理利用label標(biāo)簽會(huì)使頁面的用戶體驗(yàn)得到提升

1.改變文本框和文本域樣式
2.了解并掌握用圖片美化按鈕
3.運(yùn)用CSS代碼改變下拉列表樣式
4.用label標(biāo)簽提升用戶體驗(yàn)
5.實(shí)例1：運(yùn)用CSS設(shè)計(jì)出登錄頁面

第十八課時(shí)

DIV+CSS

了解在布局中，常用的CSS定位方式有幾種，并了解他們之間的區(qū)別

掌握absolute(絕 對(duì)定位)、relative(相對(duì)定位)的使用與z-index解析。

了解網(wǎng)頁布局中，浮動(dòng)元素（float）與定位（position）的不同點(diǎn)

掌握在CSS布局中，四大核心內(nèi)容（標(biāo)準(zhǔn)流、盒模型、浮動(dòng)元素、定位）

1.CSS定位方式有哪些，他們的區(qū)別是什？
2.CSS三大定位原理&Z-index解析
3.CSS布局——元素浮動(dòng)與定位篇區(qū)別
4.了解CSS之四種定位的理解
5.CSS核心內(nèi)容-標(biāo)準(zhǔn)流、盒模型、浮動(dòng)、定位

網(wǎng)頁設(shè)計(jì)

綜合實(shí)訓(xùn)

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

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

了解色彩基本知識(shí)和色彩的視覺識(shí)別性，各種不同場(chǎng)景的配色用法和意義

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

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

認(rèn)識(shí)和注冊(cè)第三方建站系統(tǒng)平臺(tái)

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

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

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

網(wǎng)站設(shè)計(jì)

實(shí)戰(zhàn)式練習(xí)

（八課時(shí)）

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

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

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

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

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

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