网页设计教案.doc

资源ID：2881413 资源大小：3.82MB 全文页数：17页
资源格式： DOC 下载积分：8金币

快捷下载

会员登录下载

三方登录下载：

下载资源需要8金币

邮箱/手机：
温馨提示：	用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）
支付方式：
验证码：	换一换

加入VIP免费专享

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

友情提示

1、下载资料失败解决办法

2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。

3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。

4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。

网站客服

侵权投诉

网页设计教案.doc

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

注意事项

本文（网页设计教案.doc）为本站会员（文库蛋蛋多）主动上传，三一办公仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知三一办公（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。