网页艺术设计教案.doc

授课章节了解网页艺术设计以及网页艺术设计的工具授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：掌握网页的基本概念。能力目标：熟悉网页使用软件Dreamweaver素质目标：熟悉网页使用软件Dreamweaver教学重点Dreamweaver的功能介绍站点的创建和管理教学难点Dreamweaver的功能介绍站点的创建和管理补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、 网站基础知识1. www站点2. 统一资源定位器URL（Uniform Resources Locator）3. 超级链接4. 静态网页与动态网页5.HTML与XHTML新 课二、 Dreamweaver 工作环境1. 文档窗口：打开最近项目、创建新项目、从范例创建2. 插入工具栏：常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏3. 文档工具栏：代码、拆分、设计视图，文档标题，文件管理、错误检查、预览4. 状态栏：标签选择器、选择与缩放、窗口大小等三、 Dreamweaver 文档的基本操作1. 文档的新建：【文件】|【新建】新建类别：基本页、动态页、模板页、框架集等2. 文档的保存：保存、另存为、保存全部3. 文档的打开4. 文档的页面属性设置：【修改】|【页面属性】外观属性：字体、大小、颜色、背景色与背景图、边距链接属性：超级链接的字体、大小、四种链接状态的颜色、下划线标题/编码：标题和编码格式四、Dreamweaver站点的创建与管理1. 创建站点：【站点】|【新建站点】，选择【基本】选项卡2. 确定站点名称及http地址3. 选择站点保存的根目录位置4. 选择站点是否需要链接到远程服务器5. 核对站点信息6.打开【管理站点】对话框：选择【站点】|【管理站点】知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节HTML基本语法授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：掌握HTML的基本结构和语法。能力目标：掌握HTML的基本结构，并能熟练编写HTML语言素质目标：熟练使用HTML语言进行网页程序设计教学重点1、HTML语法基本结构的讲解2、HTML程序的编写教学难点1、HTML语法的基本含义和组织结构2、HTML常见标签的基本作用和用法补充内容无教学场地及教具使用多媒体机房教学过 程方法手段时间分配导 入 展示一个多媒体网页，然后让同学们观看代码窗口中所对应的HTML脚本，然后导入到HTML基本语法的讲解。多媒体展示15分钟新 课1、HTML的文档结构（1）文档结构标签、（2）文本格式标签、（3）字符格式标签、（4）列表标签、（5）链接标签（6）多媒体标签（7）表格标签学生上机练习：利用HTML创建自己的各种网络标签现场演示+讲解90分钟新 课3、CSS层叠样式表的介绍（1）CSS样式表代码的标签（2）Javascript代码标签学生上机练习：利用HTML创建自己的各种网络标签现场演示90分钟练习操作10分钟知识拓展：无练习或训练练习题：P27配套实训课后小结布置作业授课章节网页中文字的使用授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：掌握网页的文本的插入方式。能力目标：掌握特殊字符、滚动文字、列表、日期、水平线的插入方法 掌握设置文本属性素质目标：掌握利用属性面版改变对象的样式教学重点特殊字符、滚动文字、列表、日期、水平线的插入方法掌握设置文本属性教学难点特殊字符、滚动文字、列表、日期、水平线的插入方法掌握设置文本属性补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入新 课一、网页中使用文本1、输入特殊字符2、插入日期3、插入滚动文字4、插入水平线二、设置文本属性字体（font-family）、大小(font-size)、字体颜色(color)、粗体（font-weight）、斜体（font-style）三、创建列表1、无序列表2、有序列表知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节网页中图像的使用授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：掌握网页的图像对象的插入方式。能力目标：熟悉网页中属性面板的使用素质目标：掌握利用属性面版改变对象的样式教学重点图像的插入属性面板的使用教学难点图像的插入属性面板的使用补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、网页图像的插入1、插入普通图像1.1插入图像1.2设置图像属性1.3编辑图像1.4调整图像亮度和对比度1.4锐化图像2、插入图像占位符二、练习1、在“迪士尼”页面中插入图像2、制作图文混排效果3、修剪与调整“蓝色港湾”页面的图像三、鼠标经过图像效果1、在“远东集团”页面中制作动态轮换图像效果四、图像热区的设置知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节网页中多媒体的使用授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：掌握在网页中插入flash、视频、音频的方法能力目标：在网页中插入flash、视频、音频并设置属性素质目标：计算机专业职业道德素质的培养。教学重点插入flash、视频、音频的方法属性设置教学难点插入flash、视频、音频的方法属性设置补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、网页flash的插入1、插入FLASH动画（1）设置flash动画的属性（2）flash的三个标记(3)练习关键点：Wmode设置为transparent2、插入FLASH按钮关键点：文件保存的路径不能为中文3、插入FLASH文本如何保存网页中的flash动画二、网页中视音频的插入1、插入声音2、插入视频三、插入JavaApplet和ActiveX在“艾格”页面制作JavaApplet特效关键：参数的设置知识拓展：如何保存网页中的flash动画 网页中的多媒体流式视频练习或训练课堂案例课后小结布置作业课后练习授课章节网页中超级链接功能的设置授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：掌握网页中链接的设置。能力目标：熟悉网页中超级链接的属性设置素质目标：掌握超级链接的设置教学重点超级链接的插入属性面板的使用教学难点超级链接的插入属性面板的使用补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、关于超文本链接1、URL：统一资源定位符2、链接标签中href、name、target属性说明二、创建超级链接1、通过“指向文件”创建链接2、通过菜单创建链接3、创建下载文件链接新 课4、创建电子邮件链接mailto:19665、创建图像热区链接6、创建锚点链接二、链接检查与测试知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格的基本操作授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、表格的插入二、表格属性的设置三、表格的基本操作1、添加行、列2、删除行、列3、拆分单元格4、合并单元格四、表格的其他功能1、导入表格式数据2、表格排序新 课知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局制作个人网站首页授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、复习表格的插入、表格属性的设置二、制作个人网页考虑的要素1、网站的风格2、网站的内容3、网站功能4、网站宣传三、“画家”个人网站分析1、网站的风格2、网站的组成部分四、 演示操作步骤1、 在ps中将设计图进行切片（切边的原则）2、 将图片利用表格布局转换成网页五、学生动手练习知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局制作个人网站内页（二）授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、复习上一节课的内容二、“画家”个人网站内页布局分析1、在ps中将设计图进行切片三、页面布局操作步骤详细讲解1、插入表格2*2，宽度为7802、合并单元格，设置表格的背景，修改表格的对其方式3、插入一个8列的表格，并设置表格的背景，制作页面的导航4、制作页面中的显示列表四、学生动手练习知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局制作企业网站首页Logo及导航授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、复习上一节课的内容二、建立企业网站的原则1、企业网站的分类（基本信息型、电子商务型、多媒体广告型）2、企业网站是设计特点（交互性与连续性、多维性、多媒体的综合性、技术与艺术的紧密型）3、企业网站的建站原则（目的性、专业性、实用性、艺术性）四、“beatuty”网站分析1、网站的风格2、网站的组成部分五、演示操作步骤1、在ps中将设计图进行切片（切边的原则）2、演示网站logo以及导航的制作四、学生动手练习知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局制作企业网站首页新闻动态授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、复习1、企业网站的分类2、企业网站是设计特点3、企业网站的建站原则二、“beatuty”网站新闻动态部分页面布局分析三、演示操作步骤1、在ps中将设计图进行切片（切边的原则）2、将所切的图片转换成网页（关键技术设置下划线和实现文字的滚动）四、学生动手练习知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局制作企业网站首页产品展示授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、复习1、如何设置表格的下划线2、如何实现文字的滚动二、“beatuty”网站产品部分页面布局分析三、演示操作步骤1、在ps中将设计图进行切片（切边的原则）2、将所切的图片转换成网页四、学生动手练习知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局制作企业网站内页左侧导航授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、复习二、“beatuty”网站左侧部分页面布局分析三、演示操作步骤1、在ps中将设计图进行切片（切边的原则）2、将所切的图片转换成网页四、学生动手练习知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局制作企业网站内页右侧内容展示授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、复习二、“回转寿司”网站右侧内容展示部分页面布局分析三、演示操作步骤1、在ps中将设计图进行切片（切边的原则）2、将所切的图片转换成网页四、学生动手练习知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局习题课制作稻香村食品网站（一）授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、复习二、让学生分析此网页的布局，并让学生根据分析将页面进行切片三、学生根据之前所学习的知识制作网页四、老师总结问题练习或训练课堂案例课后小结布置作业课后练习授课章节表格布局习题课制作稻香村食品网站（二）授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握表格、行、列的插入、删除与属性设置的基本操作。 2.掌握单元格的拆分与合并操作已经单元格属性设置操作。 3.掌握布局表格与布局单元格的基本操作。能力目标：利用Dreamweaver 8完成页面的设计与制作。 素质目标：计算机专业职业道德素质的培养。教学重点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作教学难点1. 表格、行、列的插入、删除与属性设置的基本操作2. 单元格的拆分与合并操作已经单元格属性设置操作补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、让学生分析此网页的布局，并让学生根据分析将页面进行切片二、学生根据之前所学习的知识制作网页三、老师总结问题练习或训练课堂案例课后小结布置作业课后练习授课章节表单的使用授课形式现场教学授课时间第 周 周 （ 月 日） 第 至 节教学目标知识目标：1.掌握表单的属性设置。 2.掌握各表单对象的插入与属性设置。 能力目标：完成注册页面的制作 素质目标：计算机专业职业道德素质的培养。教学重点1.掌握表单的属性设置。2.掌握各表单对象的插入与属性设置。教学难点各表单对象的插入与属性设置补充内容与表单相关的html标签教学场地及教具使用机房，装有网页三剑客8、能上网的电脑一台教学过 程方法手段时间分配导 入新 课一、表单的设置Name ：表单名称，在程序处理时用Action：动作，定义讲表单数据发送到何处。值大多采用http类型的URL方式Method：方法，有默认、get、post三种。Ectype：设置发送表单到服务器的媒体类型。Target：目标，打开文档的窗口二、表单对象类型1、【文本域】：接受任何类型的字母数字文本输入内容。2、【隐藏域】：存储用户输入的信息，并在该用户下次访问此站点时使用这些数据。3、【按钮】：在单击时执行操作。通常，这些操作包括提交或重置表单。4、【复选框】：允许在一组选项中选择多个选项。5、【单选按钮】：代表互相排斥的选择。6、【列表/菜单】：【列表】在一个滚动列表中显示选项值，【菜三、与表单相关的html标签1标签用于为用户输入创建HTML表单。2标签用于搜集用户信息。3标签定义多行的文本输入。4标签定义一个按钮。5可创建单选或多选菜单。6定义下拉列表中的一个选项（一个条目）。7标签为input元素定义标注（标记）。练习或训练制作注册页面课后小结布置作业上机练习授课章节框架的使用授课形式现场教学授课时间第 周 周 （） 第 至 节教学目标知识目标：1、理解框架结构的含义和用途；2、掌握建立框架网页的方法；3、掌握框架属性的设置方法；4、掌握框架网页的保存方法。能力目标：1、掌握建立网页框架及设置框架属性的能力；2、能够应用网页框架建立简单的网页。情感目标：培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力。教学重点1、网页框架的建立。2、理解“设置初始网页”和“新建网页”的含义。教学难点掌握框架属性的设置：调整框架大小、设置框架边界、改变边框线的宽度等。补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、框架与框架集1、框架基础知识2、HTML实现的框架代码3、框架结构的缺点二、框架的创建三、设置框架集与框架属性 五、 在框架文件中设置连接新 课五、内联框架知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节模板的创建与属性设置授课形式现场教学授课时间第 周 周 （ 月 日） 第 至 节第 周 周 （ 月 日） 第 至 节教学目标知识目标：1.了解模板的概念及作用。 2.掌握网页模板及模板网页的创建方法。 3.掌握各类型模板区域的创建和属性设置操作。能力目标：利用模页面的创建。 素质目标：计算机专业职业道德素质的培养。教学重点1. 网页模板及模板网页的创建方法2. 各类型模板区域的创建和属性设置操作教学难点各类型模板区域的创建和属性设置操作补充内容Html代码中模板的设置教学场地及教具使用机房，装有网页三剑客8、能上网的电脑一台教学过 程方法手段时间分配导 入新课导入：在Dreamweaver中，如果设计的页面布局良好，页面美观，可以将页面生成相应的模板保存下来，在必要的时候可以直接套用该模板，从而可以迅速生成风格统一网站其他页面。如果需要修改不同页面中相同的网页元素如超级链接，则不需要打开不同的页面逐个进行修改，只需要更改所使用的模板文件即可。新 课一、 创建模板1 直接新建空白的模板文件，然后在模板文档中设计和制作模板文件。2 将现有的文档保存为模板二、模板区域的类型1可编辑区域：可编辑区域是基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。2重复区域：重复区域是文档中设置为重复的布局部分。通常重复部分是可编辑的。3可选区域：可选区域是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容。三、插入模板区域1在模板文档中选择需要设置为可编辑区域的文本、表格或单元格等内容；2选择【插入】|【模板对象】|【可编辑区域】/【重复区域】/【可选区域】/【可编辑的可选区域】；或者在【常用】工具栏的【模板】按钮下拉菜单中单击按钮/按钮/按钮/按钮；3在弹出的对话框的【名称】文本框中为该区域输入唯一的名称，单击【确定】按钮。四、修改模板区域及名称1修改模板区域2修改模板区域名称：选中模板区域对象，在【属性】面板中修改。3删除模板区域：从【模板】菜单中选择【删除模板标记】五、从模板分离1 【修改】|【模板】|【从模板中分离】；2. 文档从模板中分离出来，原本不可编辑的区域均可被修改，文档不会随着模板的修改发生变化。 知识拓展：练习或训练利用模板创建个人主页其他页面。课后小结布置作业上机练习授课章节行为的使用图片以及窗口的控制授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握简单JavaScript特效的添加。能力目标：利用Dreamweaver 8完成Javascript特效的添加。 素质目标：计算机专业职业道德素质的培养。教学重点Javascript特效的添加教学难点Javascript特效的应用补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、Javascript简介二、JavaScript代码在HTML页面文件中的使用方式1、 2、代码在.js文件中。方便代码为多个网页所用。3、 或用作URL的代码要加“javascript:”前缀，事件属性中代码不需。三、行为行为是事件和由该事件触发的动作的组合。事件是浏览器生成的消息，指示该页的访问者执行了何种操作。不同的浏览器支持的事件不尽相同。不同的页面元素定义有不同的事件。1、应用行为2、将行为附加到文本3、更改行为四、实践1、利用行为打开浏览器窗口2、利用Javascript实现的转到URL代码3、交换图片知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节行为的使用文本显示以及表单的验证授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1.掌握简单JavaScript特效的添加。能力目标：利用Dreamweaver 8完成Javascript特效的添加。 素质目标：计算机专业职业道德素质的培养。教学重点Javascript特效的添加教学难点Javascript特效的应用补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、利用行为显示文本1、弹出信息2、状态栏显示onload=MM_displayStatusMsg(11);return document.MM_returnValue3、设置文本域文字制作“Benbo”页面的显示文本效果二、利用行为控制表单制作“优乐美”页面的表单确认效果知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节CSS盒子模型授课形式授课时间第 周 周 （ ） 第 至 节教学目标知识目标：CSS盒子模型的划分、结构能力目标：利用盒子模型的边框实现三角形效果素质目标：计算机专业职业道德素质的培养。教学重点CSS盒子模型的划分、结构利用盒子模型的边框实现三角形效果教学难点CSS盒子模型的划分、结构利用盒子模型的边框实现三角形效果补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、CSS盒子结构 1、什么是盒模型2、盒模型的结构：内容区域（content）、内间距（padding）、边框（border）、外间距(margin)二、边框设计1、border-width: 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。2、border-color3、border-style: border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式三、利用盒子模型制作三角形知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节CSS样式表的使用网页文字授课形式现场教学授课时间第 周 周 （ ） 第 至 节第 周 周 （ ） 第 至 节教学目标知识目标：1、CSS样式语法和用法 2、网页字体样式以及段落样式能力目标：1、掌握CSS样式语法和用法 2、掌握CSS控制网页文本样式素质目标：计算机专业职业道德素质的培养。教学重点CSS样式语法和用法CSS控制网页文本样式教学难点CSS样式语法和用法CSS控制网页文本样式补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、CSS概述1、认识CSS2、CSS特性二、CSS语法和用法1、CSS基本结构2、CSS基本用法 （1）直接放在标签的Style属性中 （2）把样式代码放在Style标签内（3）把样式表放置在单独的文件中三、基本选择器1、标签选择器2、ID选择器3、复合选择器四、CSS样式控制网页文本1、网页字体（字体类型、字体大小、字体颜色）2、网页段落样式（首行缩进、左右缩进、行距、段落文本间距、水平对齐）知识拓展：无练习或训练课堂案例课后小结布置作业课后练习 授课章节CSS样式表的使用超链接和图片授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：1伪类样式 2、图片样式能力目标：1、掌握类样式语法和用法 2、掌握CSS控制图片样式素质目标：计算机专业职业道德素质的培养。教学重点类样式语法和用法CSS控制图片样式教学难点类样式语法和用法CSS控制图片样式补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、超链接样式1、伪类样式 a:link：超链接默认样式a:hover ：鼠标移动到超链接上时的样式a:active：在单击鼠标时的样式，即被激活样式a:visited：单击超链接后的样式2、下划线样式text-decoration制作立体样式文字二、图片样式1、图片大小2、图片边框知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节CSS样式表的使用列表结构授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：CSS控制列表样式 能力目标： CSS控制列表样式素质目标：计算机专业职业道德素质的培养。教学重点CSS控制列表样式教学难点CSS控制列表样式补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、列表的基本结构1、2、二、CSS控制列表样式实践1、制作列表实现名词解释三、自定义列表样式1、插入图片作为项目符号2、自定义项目符号3、使用背景图片实现项目符号：利用background属性实现图片的精确定位 。知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节CSS样式表的使用导航授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：列表制作横向菜单和纵向菜单能力目标：掌握简单的横向菜单和纵向菜单的制作素质目标：计算机专业职业道德素质的培养。教学重点列表制作横向菜单和纵向菜单教学难点列表制作横向菜单和纵向菜单补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、横向菜单的制作1、第一步，设置导航线为蓝色背景2、第二步，在页面中插入列表3、将li的float属性设置为left4、将li a的display设置为block二、纵向菜单的制作 display:block;/* 列表项中将a元素转换为块元素 */ 置垂直居中 */ background:url(images/lnavbj.gif) no-repeat left top; /* 列表项中a元素设置背景图片 */ 知识拓展：无练习或训练课堂案例课后小结布置作业课后练习授课章节CSS样式表的使用高级导航授课形式现场教学授课时间第 周 周 （ ） 第 至 节教学目标知识目标：菜单的美化和多级导航菜单能力目标：利用CSS完成菜单的美化并完成多级导航菜单素质目标：计算机专业职业道德素质的培养。教学重点菜单的美化和多级导航菜单教学难点菜单的美化和多级导航菜单补充内容无教学场地及教具使用计算机机房教学过 程方法手段时间分配导 入多媒体展示新 课一、美化菜单（如图所示）1、插入列表首页网页版式布局div+css教程div+css实例常用代码2、设置CSS样式#menu ul list-style-type: none; margin: 0px;