| 第一章 网页设计基础与Dreamweaver CC基础 教学内容： 1.1 互联网基础 1.1.1 Internet与Web服务 1.1.2 URL路径 1.1.3 服务器与客户机 1.1.4 互联网数据中心 1.2 网页设计知识 1.2.1 色彩 1.2.2 网页设计元素 1.2.3 页面布局 1.3 网页标准化技术 1.3.1 超文本标记语言 1.3.2 CSS样式 1.3.3 脚本语言 1.3.4 PHP技术 1.4 网站制作流程 1.4.1 前期准备工作 1.4.2 方案实施 1.4.3 后期工作 1.5 Dreamweaver CC基础 1.5.1 Dreamweaver CC工作界面 1.5.2 创建网站站点 1.5.3 管理站点 1.5.4 网页文档头部信息设置 1.6 HTML语言 1.6.1 HTML 代码 课堂案例： 慈善救助中心 瑜伽会所 案例学习目标：学习创建站点、管理站点文件和文件夹的方法。学习页面代码的编辑方法，包括HTML代码、CSS格式化代码和JavaScript代码的编辑。 案例知识要点：使用【站点】|【新建站点】创建站点，编写页面代码。 预期学习成果： 通过本章教学，让学生了解网页设计基础知识，熟悉Dreamweaver CC操作界面。掌握创建站点、管理站点文件、编写页面代码等基本操作。 重点难点： 【本章重点】 1.熟练掌握Dreamweaver CC操作界面。 2.掌握站点建设与管理的基本操作。 【本章难点】 1.HTML语言的运用 2.站点的创建与管理
第二章 页面与文本 教学内容： 2.1 页面属性 2.1.1网页标题 2.1.2文本分段与换行 2.1.3输入空格 2.1.4设置页面文字属性 2.1.5显示或隐藏不可见元素 2.1.6设置页边距 2.1.7设置背景属性 课堂案例：中国经济峰会 案例学习目标：学习网页页面属性的设置方法，以及文本的换行与分段，字体的选择与设置等方法。 案例知识要点：使用【文件】|【页面属性】菜单设置页面属性。 2.2 文本属性 2.2.1 设置文本属性 2.2.2 文本段落 2.2.3 插入日期 2.2.4 插入特殊字符 课堂案例：百货公司 案例学习目标：学习设置网页中的文字样式。 案例知识要点：使用CSS样式改变文本大小、颜色、字体等。 2.3 无序列表和有序列表 2.3.1 设置无序列表和有序列表 课堂案例：咨询网站 案例学习目标：学习使用无序列表。 案例知识要点：使用【无序列表】按钮创建列表、改变列表样式。 练习案例： 1.大学生国际电影节 2.移动银行网站 3.化妆品网站 预期学习成果： 通过本章教学，让学生掌握页面文本的基本编辑方法。掌握无序列表和有序列表的基本设计方法。 重点难点： 【本章重点】 1.掌握文本分段与换行方法 2.掌握页面边距和页面属性设置 3.掌握文本属性的设置及项目列表的设置 【本章难点】 1.文本分段与换行的不同方法
第三章 图像、多媒体和表格 教学内容： 3.1 图像插入 3.1.1 插入图像 3.1.2 图像源文件 3.1.3 图像的宽度和高度 3.1.4 替换文本 课堂案例：茶叶网站 案例学习目标：学习使用多种方法在网页中插入图像。 案例知识要点：使用【插入】|【Image】菜单、【插入】面板和直接拖曳图像等方法将图像插入网页指定位置。 3.2 HTML5网页多媒体 3.2.1插入HTML5 Video元素 3.2.2插入HTML5 Audio元素 课堂案例：米克音乐 案例学习目标：学习在网页中插入Video元素、Audio元素。 案例知识要点：使用【插入】面板的【HTML】|【HTML5 Audio】按钮和【HTML5 Video】按钮插入Video元素和Audio元素。 3.3 表格简单操作 3.3.1 表格的组成 3.3.2 插入表格 3.3.3 表格属性 3.3.4 表格单元格属性 3.3.5 在表格中插入内容 3.3.6 选择表格元素 3.3.7 合并和拆分单元格 3.4 表格排版 3.4.1 复制和粘贴表格 3.4.2 删除表格和清除表格内容 3.4.3 增加或减少表格的行和列 课堂案例：融通室内装饰 案例学习目标：学会表格基本操作，体验简单的表格排版过程。 案例知识要点：选择菜单【插入】|【Table】，创建表格，通过单元格进行拆分与合并，实现简单表格的排版。在表格【属性】面板和单元格【属性】面板中设置其基本属性，对整个页面进行外观设计。 3.5表格应用 3.5.1细线表格和带状表格 3.5.2表格数据排序 课堂案例：远景苑小区 案例学习目标：学习使用细线表格和带状表格，对表格中的数据进行排序。 案例知识要点：使用【属性】面板，设置单元格间距和单元格背景。使用【编辑】|【表格】|【排序表格】对表格数据进行排序。 练习案例： 1.五金机械 2.古典音乐网 3.爱丽丝家具 4.逸购鲜花速递网 预期学习成果： 通过本章的教学，让学生掌握图像、音频、视频等多媒体元素在网页中运用的方法。让学生熟练掌握表格编辑的方法和技巧，学会运用表格来布局页面、美化页面。 重点难点： 【本章重点】 1.掌握插入图像的方法 2.掌握网页中多媒体运用的方法和技巧 3.表格属性 4.表格布局 【本章难点】 1.HTML5网页多媒体运用 2.运用表格实现页面布局
第四章 超链接 教学内容： 4.1 超链接的概念与路径知识 4.1.1 按超链接端点分类 4.1.2 按超链接路径分类 4.2 文本超链接 4.2.1 创建文本链接 4.2.2 页面文本链接状态 4.2.3 下载文件链接 4.2.4 电子邮件链接 4.2.5 空链接 课堂案例：婚礼公司 案例学习目标：学习创建内部链接、外部链接、下载文件链接和电子邮件链接等多种文本超链接。 案例知识要点：使用【属性】面板、【插入】菜单和直接拖曳等方法创建文本超链接。 4.3 图像超链接 4.3.1 创建图像超链接 4.3.2 创建鼠标经过图像超链接 课堂案例：手机商城 案例学习目标：学习建立图像超链接和鼠标经过图像超链接。 案例知识要点：使用【属性】面板为图像设置超链接，使用菜单【插入】|【HTML】|【鼠标经过图像】建立鼠标经过图像超链接。 4.4 热点链接 4.4.1创建热点链接 课堂案例：儿童课堂 案例学习目标：学习创建热点链接。 案例知识要点：使用【属性】面板创建热点链接。 4.5锚点链接 4.5.1 创建锚点链接 课堂案例：数码商城 案例学习目标：学习建立锚点链接。 案例知识要点：在【代码】视图中，使用<a name=“锚点名称”>该元素处创建锚点</a>建立锚点，利用与设置链接同样的方式创建锚点链接。 4.6 链接管理 4.6.1 自动更新链接 4.6.2 链接检查 4.6.3 修复链接 练习案例：百适易得商城 案例学习目标：学习网站的链接管理。 案例知识要点：使用菜单【窗口】|【结果】|【链接检查器】，打开【链接检查器】面板管理网站链接。 练习案例： 1.室内设计网 2.多美味餐厅 3.生物科普网 预期学习成果： 通过本章的教学，让学生理解不同超链接的作用，熟练掌握各类超链接运用的技巧。 重点难点： 【本章重点】 1.超链接的概念与路径知识 2.文本超链接 3.图像超链接 4.热点链接 5.锚点超链接 6.链接管理 【本章难点】 1.不同热点工具运用产生的不同热点链接效果
第五章 CSS样式 教学内容： 5.1 CSS样式 5.1.1 CSS样式标准 5.1.2 CSS样式构造规则 5.1.3 CSS样式种类 5.1.4 CSS样式应用范围 5.2 CSS样式设计器 5.2.1 CSS样式选择器 5.2.2 CSS样式的使用 5.2.3 CSS样式的编辑 课堂案例：美好摄影 案例学习目标：学习使用各种CSS样式。 案例知识要点：在【CSS设计器】面板中，单击【源】选项卡中的按钮+ ，选定样式的存储位置；单击【选择器】选项卡中的按钮+ ，设置标签样式、ID样式、类样式和复合样式等；单击【属性】选项卡中的按钮+ ，完成属性的设置。 5.3 CSS属性 5.3.1用<ul>和<li>创建导航条 5.3.2 布局 5.3.3 文字 5.3.4 边框 5.3.5背景 课堂案例：走进台湾 案例学习目标：学习设置CSS文字导航条。 案例知识要点：在【CSS设计器】面板中，灵活使用【选择器】，【属性】中的分类：布局、文字、边框和背景，完成CSS属性的设置。 5.4 CSS过渡效果 5.4.1 CSS样式私有属性 5.4.2 CSS过渡属性 课堂案例：墙体装饰 案例学习目标：学习使用CSS过渡效果。 案例知识要点：在【CCS过渡效果】面板中，打开【新建过渡效果】对话框，完成新建CSS过渡效果的设置。 5.5 CSS动画 5.5.1 animation属性和@keyframes规则 课堂案例：校园统一认证 案例学习目标：学习使用CSS动画效果。 案例知识要点：在【CCS设计器】面板中，选择【属性】下方按钮… ，打开【更多】列表，完成CSS动画效果的设置。在【代码】视图中，在样式表文件中建立@keyframes规则。 预期学习成果： 通过本章教学，让学生了解CSS设计器属性，能够运用CSS样式实现页面元素属性的美化。 重点难点 【本章重点】 1.熟悉CSS设计器属性面板 【本章难点】 创建新的CSS规则
第六章 CSS+Div布局 教学内容： 6.1 盒子模型 6.1.1 盒子结构 6.1.2 盒子属性 6.2 布局方法 6.2.1 <div>标签 6.2.2 position定位属性 6.2.3 浮动方式 6.3 “上中下”布局 6.3.1在DreamweaverCC中插入<div>标签 课堂案例：网页设计大赛 案例学习目标：学习“上中下”布局的方法。 案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮<> 创建网页布局结构；在【CSS设计器】面板中，使用【添加选择器】按钮+ 创建<div>标签的ID样式，并采用默认的position和float属性，完成“上中下”的布局。 6.4 “左中右”布局 6.4.1使用CSS样式布局 课堂案例：连锁餐厅 案例学习目标：学习“左中右”布局的方法。 案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮<> ，插入<div>标签；在【插入Div】对话框中，使用【新建CSS规则】按钮，创建<div>标签的相关样式，设置position、float和clear属性，完成“左中右”的网页布局。 练习案例 1.电子产品 2.装修公司 预期学习成果： 通过本章教学，让学生掌握使用DIV实现页面布局，使用CSS样式实现页面元素的丰富化 重点难点 【本章重点】 1.CSS样式种类 2.熟练掌握DIV布局页面 【本章难点】 1.DIV布局
第七章 行为 教学内容 7.1行为 7.1.1事件 7.1.2动作 7.1.3行为面板 7.2 制作图像特效 7.2.1交换图像 7.2.2显示-隐藏元素 课堂案例：吉太美食 案例学习目标：学习图像特效的制作。 案例知识要点：在【行为】面板中，点击+ 按钮，在【动作】菜单中选择相应图片特效动作进行设置。 7.3改变属性 课堂案例：绿野网站建设 案例学习目标：学习改变网页元素属性的方法。 案例知识要点：在【行为】面板中，单击【添加行为】按钮+ ，在【动作】菜单中选择【改变属性】进行设置。 7.4 启用浏览器窗口 7.4.1打开浏览器窗口 课堂案例：儿童摄影 案例学习目标：学习添加打开浏览器窗口行为。 案例知识要点：在【行为】面板中，单击【添加行为】按钮+ ，在【动作】菜单中选择【打开浏览器窗口】进行设置。 预期学习成果： 通过本章的教学，让学生掌握运用动作和事件设置来实现网页的特效。 重点难点 【本章重点】 1．行为基本概念； 2．行为的类别； 【本章难点】 1.行为动作和事件的联合运用
第八章 模板和库 教学内容： 8.1 模板 8.1.1 创建模板 8.1.2 定义可编辑区域 8.1.3 定义可编辑重复区域 8.1.4 创建基于模板的网页 8.1.5 管理模板 课堂案例：花仙子园艺 案例学习目标：学习模板的使用。 案例知识要点：新建模板文件，选择菜单【插入】|【模板】|【可编辑区域】，在模板文件中插入可编辑区域，通过模板文件创建网页，在【资源】面板中对模板文件进行编辑。 8.2 库 8.2.1 创建库项目 8.2.2 向页面添加库项目 8.2.3 更新库项目文件 课堂案例：时尚女性网 案例学习目标：学习库的使用。 案例知识要点：创建库项目文件，在网页文件中插入库项目，在【资源】面板中对库项目进行编辑。 练习案例： 1.旗袍文化 2.恒生国际老年公寓 预期学习成果： 通过本章学习，让学生掌握运用模板和库实现快速编辑页面的技巧。 重点难点 【本章重点】 1.了解模板和库的作用。 2.熟练掌握库的创建和管理的方法和技巧。 3.掌握模板运用的方法。 【本章难点】 1.库的创建和管理
第九章 表单及jQuery UI 教学内容： 9.1 表单 9.1.1 表单及属性 9.1.2 文本元素 9.1.3 单选按钮和单选按钮组 9.1.4 复选框和复选框组 9.1.5 选择 9.1.6 文件元素 9.1.7 按钮 9.1.8 HTML5表单元素 课堂案例：网页设计 案例学习目标：学习表单的基本操作。 案例知识要点：选择菜单【插入】|【表单】或使用【插入】面板【表单】选项卡创建表单。在表单中，插入各种表单元素，并利用【属性】面板进行设置。 9.2 jQuery UI 9.2.1 折叠面板Accordion 9.2.2 选项卡Tabs 9.2.3 日期选择器Datepicker 9.2.4 对话框Dialog 课堂案例：创意家居 案例学习目标：学习jQuery UI的基本操作。 案例知识要点：在【插入】面板【jQuery UI】选项卡中，单击【Accordion】按钮创建折叠面板、单击【Tabs】按钮创建选项卡。并使用其【属性】面板进行设置。 练习案例： 1.咖啡餐厅 2.练习案例-网上生活超市 预期学习成果： 通过本章的教学，让学生熟练掌握表单的创建以及表单各项目元素的设置。学会运用jQuery UI实现页面的互动元素设置。 重点难点 【本章重点】 1.熟练掌握表单创建的方法。 2.熟练掌握jQuery UI互动方法。 【本章难点】 1.jQuery UI的互动设置
第十章jQuery Mobile 教学内容： 10.1 jQuery Mobile概述 10.1.1 jQuery Mobile简介 10.1.2 jQuery Mobile框架 10.1.3 data-属性 10.1.4 jQuery Mobile样式 10.2 使用jQuery Mobile 10.2.1 jQuery Mobile页面 10.2.2 jQuery Mobile列表视图 10.2.3 jQuery Mobile布局网格 10.2.4 jQuery Mobile可折叠区块 10.2.5 jQuery Mobile表单 课堂案例：服装定制I 案例学习目标：学习创建jQuery Mobile页面的基本方法。 案例知识要点：在【插入】面板【jQuery Mobile】选项卡中，单击【页面】【列表视图】【布局网格】【可折叠区块】和一些表单项目创建移动Web页面。 10.3 jQuery Mobile应用 10.3.1 jQuery Mobile版本 10.3.2 面板panel 10.3.3 弹窗popup 课堂案例：服装定制II 案例学习目标：学习创建jQuery Mobile应用的方法。 案例知识要点：在【代码】视图中，学会升级和使用jQuery Mobile新版本，使用面板panel、弹窗popup、图片轮播和页面链接的方法。 10.3.4 视口viewport 10.3.5 自定义jQuery Mobile主题 10.3.6 打包jQuery Mobile应用 练习案例 1.男人会装I 2.男人会装II 预期学习成果： 通过本章学习，让学生了解jQuery Mobile的基本知识；掌握jQuery Mobile基本使用方法；掌握jQuery Mobile进阶使用方法。 重点难点 【本章重点】 1.掌握jQuery Mobile基本使用方法。 【本章难点】 1.掌握jQuery Mobile进阶使用方法。
| 
