《网页设计教案.doc》由会员分享，可在线阅读，更多相关《网页设计教案.doc（17页珍藏版）》请在三一办公上搜索。
1、教 案（2011学年第一学期）校名：浙江江南理工专修学院学科：网页设计与制作实训班级： 09平面设计教师： 魏 芳 芳第1课 制作一个简单的网页本课重点：1.设计网页属性；2.编辑文字；3.处理图像。本课难点：1.添加和删除中文字体；2.调整图像的对齐方式。课时：2课时。一、主要内容1、设置网页属性在标题栏中增添网页标题、 为网页增添背景图像、 调整网页的边距 2、 在页面中插入基本的网页元素在页面中添加和处理文字、 在页面中插入和处理图像、 插入水平线、插入时间和日期 二、教学案例源文件案例演示index3.html“畅想未来”网页这是一个简单的网页。在这个页面中包含了文本、图像、水平线、特
2、殊字符等基本元素，同时还设置了文本的字符格式和段落格式以及背景颜色、边距等网页属性。三、实训“信乐团网站”利用提供的素材文件，制作一个介绍台湾音乐团体“信乐团”的网站，要求如下：1. 创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中，启动Dreamweaver，定义站点。2. 创建index.htm文件，设置页面背景图像为bg.jpg，网页标题为“信乐团”。3. 插入基本的页面元素，包括文本、图像、水平线和日期对象。4. 对图像进行适当的调整，包括大小、在页面中的对齐方式、与周边对象的距离及环绕方式。5. 对文本设置相应的字符格式和段落格式。第2课 在网页中建立各种超级链接本课重点
3、：1.创建内部超链接、外部超链接；2.创建E-mail链接；3.创建锚点链接。本课难点：1.设置链接目标；2.创建锚点链接。课时：4课时。一、主要内容1、创建超级链接创建内部超级链接、创建外部超级链接、创建空链接和脚本链接、在新的浏览窗口中打开链接文件2、创建E-mail链接3、创建锚点链接4、设置链接颜色5、制作图像地图制作热区、为热区添加说明文字和制作超级链接、编辑热区6、制作导航栏创建导航栏、修改导航栏二、教学案例源文件效果演示简要说明1.index4.html超级链接应用实例该网页是在第3章实例index3.html的基础上，创建了各种超级链接：内部超级链接、外部超级链接、在新的浏览窗
4、口中打开链接文件、创建E-mail链接并设置了链接颜色等。2.ex4_city.html创建锚点链接在网页的开始部分以网页内容的小标题作为链接。当在浏览器中预览该页面时，单击页首的某个小标题，便会跳转到该页面的相应文章处。在该文章的末尾单击Go Top时，又可以返回到页首处，以便继续选择感兴趣的文章浏览。3.ex4_hotspot.html制作图像地图在一张图像上实现多个局部区域指向不同的网页链接。4.ex4_bar.html制作导航栏导航栏由4个按钮组成，每个按钮当鼠标移上去时，颜色将会发生变化。单击导航栏中的某个按钮便会打开另一个网页。三、实训“信乐团网站”利用所学知识，继续完善“信乐团”
5、网站，要求如下：1. 打开index.htm文件，设置超链接：为“个人档案”、“新闻讯息”、“作品介绍”和“返回首页”创建超链接，分别链接到members.htm、news.htm、album.htm和index.htm页面。为“与我联系”文本创建E-mail链接，其E-mail地址为“teach_ie”.2. 打开news.htm文件,创建锚点链接。3. 打开members.htm文件,将网页中得图像制作成图像地图。第3课 在网页中使用CSS样式本课重点：1.类样式的创建、修改及应用；2.利用“CSS样式”面板创建、修改、应用各种CSS样式；3.利用外部样式文件统一网站风格。本课难点：1.创
6、建、修改高级样式。课时：4课时。一、主要内容1、利用CSS样式美化文本使用CSS样式面板创建自定义样式、重新定义HTML标签、应用CSS样式、修改CSS样式2、利用CSS样式改变超级链接创建外部CSS样式表控制整个站点的风格、使用CSS选择器、修改样式文件、链接外部样式文件 3、CSS样式综合应用 重定义HTML标签设置页面背景图像格式、利用CSS滤镜效果实现阴影文字、为图像添加边框 二、教学案例源文件案例演示简要说明ex5_city.htmlCSS样式美化网页实例利用CSS样式美化文本。该网页中包含了两个CSS的样式：通过设置重新定义HTML的标签，改变文本的默认标题样式；通过创建自定义样式
7、，改变正文的样式。利用CSS样式改变超级链接。该网页包括三部分内容：利用CSS选择器用来控制超链接文本的样式；利用设置Extensions面板改变鼠标指针形状；通过修改外部样式文件，为文本添加图像项目符。将CSS样式作用于图像、表格、页面背景。该网页中包含了三个CSS的样式：利用CSS样式设置页面背景图像格式、利用CSS滤镜产生阴影字效果、利用CSS样式设置图像的边框。index_css_div.htmlCSS与Div页面、布局应用实例将页面分为4部分，并分别装载在4个Div中，通过对这4个Div进行定位美化，实现页面效果。三、实训“HUNTER”网页第4课 利用表格设计和制作网页本课重点：1
8、.创建表格；2.合并与拆分单元格；3.设置表格属性；4.设置表格行、列及单元格属性；5.利用“布局模式”规划网页。本课难点：利用表格进行页面布局。课时：4课时。一、主要内容1、创建表格和表格的基本操作插入空白表格、合并与拆分单元格、在表格中插入页面元素、利用CSS样式美化表格 2、设置表格属性认识表格的属性面板、设置表格属性 3 、设置表格行、列及单元格属性认识单元格属性面版、设置表格行、列及单元格属性 4、表格的高级使用技巧利用表格制作水平线和垂直线、制作立体导航栏表格 5、利用“布局模式”规划网页 6、表格的其他应用表格数据的导入和导出、自动套用表格格式 二、教学案例源文件案例演示简要说明
9、index6.html利用表格布局实例这是一个利用表格进行页面布局的实例。其中还包括：利用表格制作水平线和垂直线、制作立体导航栏表格等。ex6_format.html自动套用表格格式实例将Excel工作表中的数据导入到网页中，并利用Dreamweaver中表格的自动套用格式可以对现有的表格进行格式化。三、实训“八音琴”网页第5课 应用框架技术制作网页本课重点：1.创建框架结构；2.框架页面导航的链接；3.保存框架文件。本课难点：1.框架页面导航的链接；2.保存框架文件。课时：4课时。一、主要内容1、创建框架结构插入框架集、选取框架和框架集、增加框架、删除框架、调整框架的大小2、编辑框架集页面内
10、容与保存框架集文件编辑框架集页面内容、保存框架集文件3、设置框架中的链接目标将链接目标设置在创建的框架中、将链接目标设置在默认的框架中4、修饰框架集网页外观设置框架集属性、设置框架属性二、教学案例源文件案例演示简要说明index7_1.html框架应用实例该网页是一个典型的框架应用实例。使用框架可以把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页，从而使用户能够一次浏览更多的内容。index7_border.htm设置框架边框该网页是在实例index7_1.html的基础上设置了框架的边框及其宽度和颜色。index7_2.html利用框架组织页面实例利用框架结构重新组织index6
11、.html页面，并在预览页面时，单击导航栏目可以在窗口的中间区域显示相应的链接内容。三、实训“杭州西湖”网页第6课 应用图层技术制作网页本课重点：1.激活层；2.调整层大小、移动层、对齐层。本课难点：改变层的叠放次序。课时：2课时。一、主要内容1、图层的基本操作创建层图、选择图层、激活图层、移动图层、调整图层大小、对齐图层、吸附图层到网格2、图层的管理更改图层的名称、改变图层的叠放次序、改变图层的可见性、创建嵌套层3、图层与表格 将图层转换为表格、将表格转换为图层二、教学案例源文件案例演示简要说明ex8_1.htm图层应用实例创建一组相互重叠的彩色图像，当鼠标移动到某图像上时，就会出现相应的带
12、阴影效果的说明文字，当鼠标离开图像时，说明文字消失。ex8_2.htm图层与表格利用把图层转换为表格功能，可以轻易地将位置不规则的图层转换为表格。三、实训“个人主页”网页第7课 利用时间轴制作动画本课重点：1.使用图层和时间轴创建时间轴动画；2.在“时间轴”面板中添加关键帧。本课难点：图层和时间轴的配合使用。课时：2课时。一、主要内容1、创建时间轴动画创建简单的直线运动的时间轴动画、创建曲线运动的时间轴动画、创建复杂路径的时间轴动画2、使用时间轴改变图像和层属性实现幻灯片效果、实现图像的渐推式显示效果 二、教学案例源文件案例演示简要说明ex9_1.htm实现直线运动一个简单的直线运动的时间轴动
13、画实例。ex9_2.htm实现曲线运动一个曲线运动的时间轴动画实例。ex9_3.htm实现复杂路径运动创建具有复杂路径的时间轴动画，使动画的运行路线完全由用户设定。（利用拖动时记录层的路径的方法，可以创建任意复杂路径的动画）。ex9_4.htm实现幻灯片效果实现幻灯片的轮流播放效果，使一组图像不停地轮换显示。（利用时间轴改变图像的Src属性，实现幻灯片的轮流播放效果）ex9_5.htm实现图像的渐推式显示效果一幅图像从左向右逐渐推出显示，象卷轴一样展开。（通过改变图层的大小属性，从而实现从左向右逐渐推出图像的动画效果。） 三、实训动画效果利用提供的素材文件，完成以下操作，要求如下：1. 打开素材文件ex1.htm，在页面中制作一个层动画，使图像ex1_girl.gif沿用户任意设定的运动路线运动。2. 在ex1.htm页面中，添加时间轴，在TimeLine2中制作一个层动画，使图像zuri.gif像卷轴一样自左向右逐渐退出显示，完全显示一段时间后，又像卷轴一样自右向左逐渐收起。3. 打开素材文件ex2.htm，在页面制作一个一边移动、一边变换内容的幻灯片。
