网页设计教案_教案网页设计

网页设计教案由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“教案网页设计”。

课程：

课时：

教学对象：教师：

公 开 课 教 案

课题：

时间：

地点：多媒体教室五

教学目标：

 严格把握信息产业部关于“网页设计师”职业技能鉴定大纲，使学生能够最大程度满足企业对网页设计人员的需求，掌握网页设计软件的高级应用。

 掌握CSS的基本语法与功能。

 熟悉“CSS样式”面板与“相关CSS” 面板的使用。 学会创建、插入样式表。 学会套用CSS样式。教学对象分析：

由于讲授对象为高职院校大专生，所讲内容以实际操作为主，注重训练学生动手能力，所以本课程以案例教学的方式讲解。教学重点：

CSS样式的创建、编辑、导出及应用 教学难点：

应用类样式，设置CSS样式属性 教学方法和教具准备：

在带有大屏幕投影仪和计算机相连接的多媒体教室，采用教师讲解与学生实践相结合的授课方式。教学过程：

一、导入课题

复习上一章表单知识，简要回顾前面几章的学习：设置文本和网页属性、使用图像、插入表格等，但是仅仅利用以上所学知识做出来的网页比较枯燥，页面并不完美。在网络上形形色色的网站中，怎么才能让自己的页面独树一帜？

1、CSS样式功能：能够使你的页面保持统一的风格，它可以调整文字间距、行间距、删除链接下划线、固定背景图像、制作特殊的边框、改变鼠标指针形状等，并能够简化网站的制作过程。

2、拿c样式做出来的页面效果和没有使用c样式的页面做比较，演示c样式的特效

二、新课讲解

1、CSS概述

⑴ 什么是CSS？

CSS（Cascading Style sheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。CSS定义了控制元素外观的样式属性。

⑵ CSS由来

CSS样式由全球广域网协会制定，分别是CSS1、CSS2

2、实例讲解

实例

1、利用c样式“类型”选项改变文本属性

分析：Dreamweaver的文本控制功能不足，无论是字体大小，排列方式，还是行间距，等等，它所提供的选择并不多，为了让我们的网页更加美观，更加规范，有必要使用CSS。

步骤：

1.单击“CSS面板”右下角“新建CSS样式”按钮，弹出“新建CSS样式”对话框。设置完毕后点击“确定”按钮。2.在对话框 “类型”选项中，“字体”下拉列表框中选择“华文新魏”，“大小”选择“18”，“颜色”中选择“#003300”，加粗，单击“确定”按钮。3.在文档窗口中选择文字，从“样式”下拉列表框中选择该样式即可。

小结：本例中用到c样式列表中的“类型”属性。它可以帮助我们轻松地实现对文本格式的各种设置。

扩展：

1.引入外部样式表

2.利用“区块”选项组设置字母间距、縮进等属性

实例

2、作出单张图像的背景

分析：默认状态下在“页面属性”中选择图像，则在网页文档的整体背景上重复出现，在c中可以使背景图像在指定位置上只显示一次。

步骤： 1.单击按钮，选择“新建”

2.在“背景图像”中选择合适的背景图像，在“重复”列表中选择“不重复”，在“水平位置”中选择“右对齐”，在“垂直位置”中选择“居中”，在“附件”中选择“固定”，单击“确定”按钮。

3.选中标签，在属性栏的“样式”中选择该样式。

小结：本例中用到c样式列表中的“背景”属性。它可以帮助我们随意设置背景图像。

实例

3、利用c样式给表格设置特殊边框，用图像作列表、改变鼠标指针。

分析：利用c样式为表格设置不同颜色、样式的边框，用漂亮的图标作列表也可将鼠标指针改成动画。

步骤：如实例2，但使用不同的新建及应用方式。

扩展：为标签加双线边框、利用“定位”列表项将表格像“层”一样任意移动。

实例

4、特效文字

说明：在photoshop等图像制作软件中经常会听到滤镜的概念，滤镜能作出很多神奇的特效，然而在dreamweaver mx2004中我们可以利用样式表设定各种滤镜效果。

实例

5、图像特效

说明：利用“滤镜”项为图像设置不同样式。

思考题：改变网页超级链接样式

作业：

p204页，课后习题

上机练习：

1.对已经编辑的文档使用新的文本样式（包括超级链接时样式改变）2.将单张图像作背景并且不滚动、水平:右对齐，垂直:底部 3.改变鼠标指针样式 4.光晕字

5.对图像使用滤镜功能

三、教学后记