网页制作教案四课时

1、网页欣赏学习目标 知识目标：了解网页是由哪些内容组成的； 能力目标：了解网页的简单结构； 情感目标：培养学生的审美观念。 本节重点：网页的概念 难点 网页的结构 学习过程一、导入新课 精彩的网络世界吸引着无数人的眼球，对我们同学来说，它也被笼上了神秘的面纱。有些同学也想在互联网上建立自己的空间，但又觉得这是非常高深的事情，其实这一切并不是那么难。互联网上有非常多的信息，这些信息的载体就是网页。那么从这节课开始，我们学习如何制作网页。二、学习新知1.教学练技能 教师首先用网络广播的形式展示几个网页的图片，以此吸引学生的注意力，并注意每个网页的各自特点。首先，我们来欣赏几个网页，在欣赏的同时，我们

2、应该注意以下这些网页基本上都是由哪些元素组成的。 2.学习“学知识” （1）打开浏览器，输入网址，让学生自己浏览； （2）学生上机练习。 请同学们带着下面几个问题浏览网页，以小组为单位进行讨论，教师巡视。 （1）观察开的网页，看看上面都有哪些元素。 （2）这些元素在网页中是怎样布置的？这样的结构有什么特点？ 这节课我们浏览了一些精彩的网页，也了解了网页的基本组成元素和网页的简单结构，同学们是不是想制作自己的网页呢？从下节课开始，我们将学习如何制作网页。三、学生练习四、教师总结 首先用网络广播的形式展示几个网页的图片，以此吸引学生的注意力，并注意每个网页的各自特点。 网页制作学习目标1、理解网页

3、与网站的概念2、掌握建立网站与建立网页的方法3、掌握页面文件与图片的保存学习重点掌握建立网站与建立网页的方法学习难点1建站点的位置2页面文件与图片的保存课时安排：3课时学习过程第1课时一、导入新课师：上节课已经讲了信息集成（也就是网站建设）的一般过程包括四个阶段，现在请同学们回顾一下。生：学生作答。师：同学们平时都有喜欢上网，那大家知道网站与网页的区别吗？概念：网页：通常我们在WWW上所能看到的每一个页面都称之为网页,它可以形象地比喻成一篇文章.网站：网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,可以形象地比喻成一本杂志或一本书. 下面我们来学习如何用Dreamweaver这

4、个软件制作网页。二、新课讲述在制作个人网站之前，应先确定网站的主题。2008奥运会即将来临，这是中国政治，经济等综合国力提升到另一台阶的盛事，我们中学生也得供献一分锦力本节课的主题是围绕“心系奥运”，资料（包括文字、图片、动画）等我已经为大家收集好，内容分类，网站的结构也规划好了，利用Dreamweaver这个工具来完成“心系奥运”这个网站的建设。（一）启动Dreamweaver，认识其工作界面“开始”-à“程序”-à“Macromedia Dreamweaver 8”Dreamweaver工作界面包括：菜单栏 插入栏 编辑窗口 属性面板 浮动面板组1菜单栏（包括10个菜单

5、项）符号所表示的含意黑色命令：表示该命令当前是可用的灰色命令：表示该命令当前是不可用的，需要满足一定的条件后才能使用。带有复选标记的命令：表示该命令是一种可选择命令，若前面出现标记，表示该命令正在使用；若没有标记时，表示该命令没有被使用。带有三角形的命令：表示在该命令下还有下一级子菜单命令。带有省略号的的命令：表示选择命令后会弹出一个相关的对话框。带有快捷键号的命令：表示该命令有一个快捷键，当按下该快捷键时，即可执行该命令。2插入栏单击常用按钮，在弹出的下拉菜单中可以选择要插入的网页元素的类型3编辑窗口包括：项目选择标签，文档工具栏，水平标尺，垂直标尺，编辑区域，状态栏，垂直扩展按钮和水平扩展

6、按钮。文档工具栏：代码按钮，拆分按钮，设计按钮，检查错误按钮，预览调试网页按钮，刷新设计视图按钮，用于隐藏文件内容，标尺，网格和辅助线按钮。4属性面板用于查看各更改当前选择对象的各种属性。（二）新建站点为了有效地发挥Dreamweaver对网页的组织管理功能，通常在制作具体的网页之前，应先创建一个新站点，然后根据网站的具体结构制作网页。例1-1 在D盘中建立一个名为“xinxiaoyun”的新站点。操作步骤： 单击“开始”按钮，将指针依次指向“程序（P）”“Macromedia Dreamweaver 8”，并单击，即可启动Dreamweaver 8。 入Dreamweaver 8工作界面后，

7、单击“站点”/“弹出站点管理”命令，弹出“管理站点”对话框。 单击“新建（N）”按钮，在弹出的下拉菜单中选择“站点（W）”命令。 弹出站点定义对话框，在“你打算为你的站点起什么名字”的文本框中输入站点的名称，如“心系奥运”。 单击“下一步”按钮，在弹出的对话框中选取中“否，我不想使用服务器技术”。 单击“下一步”在弹出的对话框中选取择开发过程中如何使用文件，这里选中“编辑我的计算机上的副本，完成后再上传到服务器”，在“您将把文件存储在计算机上的什么位置”文本框中输入本地站点的位置“D：”。 单击“下一步”，在弹出的对话框中的“您 如何连接远程服务器”下拉表框中先择“无”。 单击“下一步”，在弹

8、出的对话框中单击“完成”。 弹出“管理站点”对话框，在其左侧列表框中将显示名为“xinxiaoyun”的站点，单击“完成”，完成本地站点的建设。Dreamweaver将自动在指定位置建立一个站点，首先建立 “D： xinxiaoyun”文件夹，然后在此文件夹下，再建立一组文件夹，其中可见文件夹包括：“_private”和“Images”（存放图形文件），其余文件夹被隐藏起来。第2课时（三）新建网页例1-2 在“xinxiaoyun”网站中建立第一个网页取名为“index.html”，设置背景色为：蓝色，字体为：黑色，并作相应文件的插入，完成后保存。（两种方法）1 新建网页操作步骤：方法一 选择

9、“文件”/“新建”命令，弹出“新建文档”对话框， 在“类别”列表框中选择需要创建的网页类别，如选择“基本页”选项，此时右侧的列表中将显示基示页网页的类型。 在“基本页”列表框中选择所需创建军的网页类型后，单击“创建”按钮即可新建军指定类型的空白网页。 再把网页另存为相应的站点下。2. 网页的保存单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框。在“文件名（N）”列表框中输入“index”后，单击“保存（S）”按钮。如果要保存的页面含有图片、动画、声音等元素，Dreamweaver还会继续询问是否保存这些嵌入的文件。此时最好将这些文件保存起来，以保持它们在网页中的位置，否则

10、，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到Images文件夹中，使网站保持清洁，便于管理和维护。3 设置背景设置网页属性：新建一个网页之后，一般还需要设置网页的属性，选择“修改”/“页面属性”命令弹出“页面属性”对话框，在“分类”列表框中有“外观”“链接”“标题”“标题/编码”和“跟踪图象”5个选项。对页面进行相应的处理。大多数网页都应用背景图案来为网页增色，这些背景可以是一幅大图片，也可以是若干个小图片的重复使用（即“平铺”）。选择背景图案时，要注意与文本相协调，而且背景的应用不要妨碍文本的阅读。另外，背景图案越小，网页的下载速度就越快。设置背景的

11、操作步骤： 单击“修改”命令，出现“页面属性”对话框，且“背景”标签已被打开。 单击“浏览（B）”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。页面制作完成，可以单击“预览”标签，观察一下效果。方法二：在站的文件夹下直接创建，再做相应的设置。4 利用表格布局页面（布局表格和普通表格）操作步骤：“插入”/“表格”或者在常用插入栏中的“插入表格”按钮在表格对话框中设置插入表格的行数，列数，表格宽度，边框粗细，单元格边距等，单击“确定”按钮完成表格的创建（如果要边框显示

12、就设置边框的值，如果不要，就将其设置为0）5 文字编辑文字编辑是制作网页最基本的操作。在网页编辑窗口中，可以像在Word中一样直接输入文字，进行编辑和排版，操作步骤： 选定标题“心系奥运”，进行如下设置：字体为黑体，字号为7号字，颜色为绿色，居中排列。 选定正文，并设置如下：采用默认的字体和字号，颜色为黑色，居中排列。6. 插入图片操作步骤：将插入点移到要插入图片的位置，“插入（I）”菜单中的“图像（I）”命令，打开“图像源文件”对话框，如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。否则，单击“浏览”按钮 ，从“选择文件”对话框中选择所需图片，单击“

13、确定”按钮，将图片插入到网页中。 拖动图片到页面左侧适当位置。第3课时7插入动画在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。插入动画的类型有多种，介绍三种：插入FLASH动画，FLASH按钮和FLASH文本插入FLASH动画操作步骤：依次单击“插入（I）” 菜单中的“媒体”/“FLASH”命令，打开“选择文件”对话框，从“选择文件”对话框中选择所需动画“xx.swf”，单击“确定”按钮，插入动画。 拖动动画到标题下方适当位置。 选择插入网页中的FLASH动画，此时单击“属性”面板中的“播放”按钮，就可以预浏动画。插入FLASH按

14、钮操作步骤： 依次单击“插入（I）” 菜单中的“媒体”/“FLASH按钮”命令， 在“样式”列表框中选择按钮的样式，其效果显示在“范例“栏中， 设置按钮上的显示的文字 设置链接 设置打开方式为-blank “另存为“文本框中输入FLASH按钮存放的路径 按“确定”按钮完成按钮的插入。 在属性面板中可以设置相关的属性，如宽，高，文件名和对起方式等。插入FLASH按钮操作步骤： 依次单击“插入（I）” 菜单中的“媒体”/“FLASH文本”命令， 设置文字相关属性 设置链接 “另存为“文本框中输入FLASH文本名。 按“确定”按钮完成按钮的插入。 在属性面板中设置相关的属性后， 单击“确定”，这样当将鼠标移到文本时，文本颜色就会发生变化8插入背景音乐操作步骤：a.“插入”/“标签”命令弹出标签选择器的对话框b. 在左侧树型列表框中选择“标签选择器”/“HTML标签”/“页元素”命令，然后在右侧的列表框中选择bgsound选项，c. 单击“插入（I）”按钮，弹出“标签选择器-bgsound”d.单击“源”文本框后的“浏览”按钮，选择要播放的音乐文件，e. 在“循环”下拉菜表框中输入要播放的次数，也可以选择“无限”一直播放。f. 单击“确定”完成设置，关闭所有的对话窗口。8.设置超链接（文本，图形）选择要设置超链接的文本在“属性”