適合人群

1.零基礎或初步掌握DW知識,希望系統學習的學員;
2.希望電商網頁設計類工作的學員(利用代碼進行裝修);
3.從事天貓、京東、電商網頁設計,公司官網獨立設計的學員;
4.愛好網頁設計師和網站前端設計的學員。

課程時間

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

上課時間

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

課時

學習簡介

學習收益

DIV+CSS基礎入門

1.DIV+CSS是什么意思

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

3.CSS代碼語法基礎

4.CSS選擇器

5.選擇器集體聲明

1、學習并了解 DIV+CSS 是什么意思
2、了解傳統布局和 CSS 樣式布局的區別

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

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

DIV字體與背景屬性

1.設置文本屬性

2.設置背景屬性

3.CSS樣式整合

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

3、學會設置網頁當中的背景顏色
4、學會如何將圖片以背景的形式插入
5、掌握自如控制平鋪與定位

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

CSS盒模型與布局

1.盒模型概述

2.盒的尺寸

3.邊距設置

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

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

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

列表導航與超鏈接

1.浮動樣式布局

2.列表導航

3.什么是超鏈接

4.超鏈接的四種狀態

1、了解網頁布局中常用的布局樣式之一(浮動布局)
2、掌握浮動布局中的塊狀元素與內聯元
3、運用 CSS 樣式清除網頁中的浮動屬性素

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

7、了解什么是超鏈接?了解超鏈接的基本定義
8、掌握在 HTML 語言中,通過標簽實現超鏈接效果
9、利用 css 設置超鏈接四種常用狀態下的樣式
10、自定義設置超鏈接樣式屬性并運動到文本

表單美化與定位布局

1.什么是表單?

2.制作表單的常用標記

3.相對定位

4.定位

5.固定定位

6.層疊順序

7.定位布局

1、掌握表單在網頁當中的重要
2、了解后期表單的應用范圍

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

5、了解在布局中,常用的 CSS 定位方式有幾種
6、掌握定位、相對定位的使用與z-index解析
7、了解網頁布局中,浮動元素(float)與定位(position) 的不同點
8、掌握在CSS布局中,四大核心內容(標準流、盒模型、 浮動元素、定位)

DIV+CSS基礎入門

1.DIV+CSS是什么意思

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

3.CSS代碼語法基礎

4.CSS選擇器

5.選擇器集體聲明

1、學習并了解 DIV+CSS 是什么意思
2、了解傳統布局和 CSS 樣式布局的區別

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

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

DIV字體與背景屬性

1.設置文本屬性

2.設置背景屬性

3.CSS樣式整合

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

3、學會設置網頁當中的背景顏色
4、學會如何將圖片以背景的形式插入
5、掌握自如控制平鋪與定位

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

CSS盒模型與布局

1.盒模型概述

2.盒的尺寸

3.邊距設置

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

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

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

列表導航與超鏈接

1.浮動樣式布局

2.列表導航

3.什么是超鏈接

4.超鏈接的四種狀態

1、了解網頁布局中常用的布局樣式之一(浮動布局)
2、掌握浮動布局中的塊狀元素與內聯元
3、運用 CSS 樣式清除網頁中的浮動屬性素

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

7、了解什么是超鏈接?了解超鏈接的基本定義
8、掌握在 HTML 語言中,通過標簽實現超鏈接效果
9、利用 css 設置超鏈接四種常用狀態下的樣式
10、自定義設置超鏈接樣式屬性并運動到文本

表單美化與定位布局

1.什么是表單?

2.制作表單的常用標記

3.相對定位

4.定位

5.固定定位

6.層疊順序

7.定位布局

1、掌握表單在網頁當中的重要
2、了解后期表單的應用范圍

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

5、了解在布局中,常用的 CSS 定位方式有幾種
6、掌握定位、相對定位的使用與z-index解析
7、了解網頁布局中,浮動元素(float)與定位(position) 的不同點
8、掌握在CSS布局中,四大核心內容(標準流、盒模型、 浮動元素、定位)

DW基礎入門知識

1.初識網站和網頁

2.Dreamweaver基礎入門

3.使用DW定義網頁站點

4.網頁文件的基本操作

5.網頁文件的命名方法

1、學習并了解網頁的概念,網站的概念
2、認知網站的分類及瀏覽網頁的工具
3、了解開發實用型網站的基本流程
4、認識組成網頁的元素,并掌握網頁排版的規則

1、熟練掌握建立網站站點的方法
2、掌握站點當中文件及文件夾的新建以及命名規則
3、熟練掌握二級目錄的設置及站點當中文件分類的管理
4、掌握網頁的新建、打開、預覽、存儲、關閉的技巧

1、站點文件夾/文件命名規則
2、二級目錄設置,文件分類管理
3、網頁的命名與保存

插入文本圖像超鏈接

1.網頁中輸入文本

2.網頁中插入圖像

3.網頁超鏈接

4.文本和圖像鏈接

5.熱點鏈接

1、熟悉在代碼視圖和設計視圖當中輸入文字
2、掌握基本相應的代碼對應的效果
3、掌握并了解網頁當中允許使用的圖片格式
4、掌握如何在網頁中實現圖文混排效果,并兼容主流瀏覽器

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

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

插入表單選項

1.什么是表單

2.表單元素

3.插入表單項

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

4、認識表單元素種類
5、學會在網頁中合理地設置表單
6、掌握表單及表單對象屬性的設置

7、學會在網頁中合理地設置表單
8、掌握如何創建表單
9、掌握向表單中插入表單對象的方法

表格布局與切片

1.網頁表格的概念

2.表格的基本操作

3.設置表格屬性

4.切片的意義

5.規范切片的類型

1、了解表格在網頁中的重要性與實用性
2、了解并熟悉表格的標簽元素

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

5、掌握網頁中切圖的重要性
6、掌握網頁中切片的存儲及優化技巧

插入多媒體內容

1.網頁多媒體

2.插入Flash動畫

3.插入音頻文件

4.插入視頻文件

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

3、學會如何在網頁中添加 FLASH 動畫
4、插入網頁動畫圖片與滾動文本
5、實現各種主流瀏覽器的兼容

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

網頁設計

綜合實訓

1.了解網頁版式設計概念及常見的網頁版式類型

2.學習并掌握如何根據實際需要制定網頁/網店頁面布局規范

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

4.掌握網頁中圖片的編排規則和文本的組合編排規則,以及柵格的應用

1.網頁設計的版式類型介紹
2.網頁設計中的頁面布局規范
3.網頁設計視覺設計配色規范
4.網頁設計的圖文編排規則

1.認識和注冊第三方建站系統平臺

2.使用第三方建站系統制作網站前端效果

3.保存網頁,熟練運用生成代碼,構建本地頁面

1.常見的第三方建站系統
2.第三方建站系統模塊實操
3.成品網站代碼運用實戰

網站設計

實戰式練習

1.熟悉網站首頁常見的布局類型及其相應特點

2.熟悉行業網站首頁頁面布局規范,根據規范設計頁面

3.實戰練習,從零開始使用DIV+CSS布局網頁界面效果

實戰練習,突破頁面從一到多,實現靜態網站效果

1.實戰練習之使用DIV+CSS布局網頁一
2.實戰練習之使用DIV+CSS布局網頁二

備:電商發展日新月異,本班級課程內容以當月更新為準,敬請同行切勿模仿