適合人群

1.零基礎(chǔ)或初步掌握DW知識(shí),希望系統(tǒng)學(xué)習(xí)的學(xué)員;
2.希望電商網(wǎng)頁(yè)設(shè)計(jì)類工作的學(xué)員(利用代碼進(jìn)行裝修);
3.從事天貓、京東、電商網(wǎng)頁(yè)設(shè)計(jì),公司官網(wǎng)獨(dú)立設(shè)計(jì)的學(xué)員;
4.愛(ài)好網(wǎng)頁(yè)設(shè)計(jì)師和網(wǎng)站前端設(shè)計(jì)的學(xué)員。

課程時(shí)間

總課時(shí):30課時(shí)    上午/下午(10天)    晚上15天    全日制5天

上課時(shí)間

早上9:45-12:45     下午14:30-17:30     晚上19:00-21:00

課時(shí)

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

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

DIV+CSS基礎(chǔ)入門

1.DIV+CSS是什么意思

2.如何用CSS代碼控制頁(yè)面

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

4.CSS選擇器

5.選擇器集體聲明

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

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

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

DIV字體與背景屬性

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

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

3.CSS樣式整合

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

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

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

CSS盒模型與布局

1.盒模型概述

2.盒的尺寸

3.邊距設(shè)置

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

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

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

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

1.浮動(dòng)樣式布局

2.列表導(dǎo)航

3.什么是超鏈接

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

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

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

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

表單美化與定位布局

1.什么是表單?

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

3.相對(duì)定位

4.定位

5.固定定位

6.層疊順序

7.定位布局

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

3、運(yùn)用 CSS 樣式對(duì)文本框和文本域進(jìn)行美化
4、掌握在DW中如何改變文本框和文本域樣式

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

DIV+CSS基礎(chǔ)入門

1.DIV+CSS是什么意思

2.如何用CSS代碼控制頁(yè)面

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

4.CSS選擇器

5.選擇器集體聲明

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

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

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

DIV字體與背景屬性

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

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

3.CSS樣式整合

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

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

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

CSS盒模型與布局

1.盒模型概述

2.盒的尺寸

3.邊距設(shè)置

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

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

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

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

1.浮動(dòng)樣式布局

2.列表導(dǎo)航

3.什么是超鏈接

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

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

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

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

表單美化與定位布局

1.什么是表單?

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

3.相對(duì)定位

4.定位

5.固定定位

6.層疊順序

7.定位布局

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

3、運(yùn)用 CSS 樣式對(duì)文本框和文本域進(jìn)行美化
4、掌握在DW中如何改變文本框和文本域樣式

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

DW基礎(chǔ)入門知識(shí)

1.初識(shí)網(wǎng)站和網(wǎng)頁(yè)

2.Dreamweaver基礎(chǔ)入門

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

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

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

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

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

1、站點(diǎn)文件夾/文件命名規(guī)則
2、二級(jí)目錄設(shè)置,文件分類管理
3、網(wǎng)頁(yè)的命名與保存

插入文本圖像超鏈接

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

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

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

4.文本和圖像鏈接

5.熱點(diǎn)鏈接

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

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

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

插入表單選項(xiàng)

1.什么是表單

2.表單元素

3.插入表單項(xiàng)

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

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

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

表格布局與切片

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

2.表格的基本操作

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

4.切片的意義

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

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

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

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

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

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

2.插入Flash動(dòng)畫

3.插入音頻文件

4.插入視頻文件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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