【范文】网页制作教案及课件

网页制作教案及课件本资料为woRD文档，请点击下载地址下载全文下载地址【第六章第一节网页制作】教案一、【教学目标】、理解网页与网站的概念2、掌握建立网站与建立网页的方法3、掌握页面文件与图片的保存二、【教学重点】掌握建立网站与建立网页的方法三、【难点、关键】．建站点的位置2．页面文件与图片的保存四、【教学方法】演示、任务驱动法五、【课时安排】3课时六、【教学环境】多媒体教育广播系统，Dreamweaver软件七、【教学过程】第1课时1．导入新课师：上节课已经讲了信息集成（也就是网站建设）的一般过程包括四个阶段，现在请同学们回顾一下。

生：学生作答。

师：同学们平时都有喜欢上网，那大家知道网站与网页的区别吗？概念：网页：通常我们在www上所能看到的每一个页面都称之为网页,它可以形象地比喻成一篇.网站：网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,可以形象地比喻成一本杂志或一本书.下面我们来学习如何用Dreamweaver这个软件制作网页。

2．新课讲述在制作个人网站之前，应先确定网站的主题。

XX奥运会即将来临，这是中国政治，经济等综合国力提升到另一台阶的盛事，我们中学生也得供献一分锦力本节课的主题是围绕“心系奥运”，资料（包括文字、图片、动画）等我已经为大家收集好，内容分类，网站的结构也规划好了，利用Dreamweaver这个工具来完成“心系奥运”这个网站的建设一、启动Dreamweaver，认识其工作界面“开始”-“程序”-“macromediaDreamweaver8”Dreamweaver工作界面包括：菜单栏插入栏编辑窗口属性面板浮动面板组．菜单栏（包括10个菜单项）符号所表示的含意黑色命令：表示该命令当前是可用的灰色命令：表示该命令当前是不可用的，需要满足一定的条件后才能使用。

带有复选标记√的命令：表示该命令是一种可选择命令，若前面出现√标记，表示该命令正在使用；若没有√标记时，表示该命令没有被使用。

带有三角形▼的命令：表示在该命令下还有下一级子菜单命令。

带有省略号的…的命令：表示选择命令后会弹出一个相关的对话框。

带有快捷键号的命令：表示该命令有一个快捷键，当按下该快捷键时，即可执行该命令。

2．插入栏单击常用▼按钮，在弹出的下拉菜单中可以选择要插入的网页元素的类型3．编辑窗口包括：项目选择标签，文档工具栏，水平标尺，垂直标尺，编辑区域，状态栏，垂直扩展按钮和水平扩展按钮。

文档工具栏：代码按钮，拆分按钮，设计按钮，检查错误按钮，预览调试网页按钮，刷新设计视图按钮，用于隐藏文件内容，标尺，网格和辅助线按钮。

4．属性面板用于查看各更改当前选择对象的各种属性。

二、新建站点为了有效地发挥Dreamweaver对网页的组织管理功能，通常在制作具体的网页之前，应先创建一个新站点，然后根据网站的具体结构制作网页。

[例1-1]在D盘中建立一个名为“xinxiaoyun”的新站点。

操作步骤：①单击“开始”按钮，将指针依次指向“程序（P）”“macromediaDreamweaver8”，并单击，即可启动Dreamweaver8；②入Dreamweaver8工作界面后，单击“站点”/“弹出站点管理”命令，弹出“管理站点”对话框；③单击“新建（N）”按钮，在弹出的下拉菜单中选择“站点（w）”命令；④弹出站点定义对话框，在“你打算为你的站点起什么名字”的文本框中输入站点的名称，如“心系奥运”；⑤单击“下一步”按钮，在弹出的对话框中选取中“否，我不想使用服务器技术”；⑥单击“下一步”在弹出的对话框中选取择开发过程中如何使用文件，这里选中“编辑我的计算机上的副本，完成后再上传到服务器”，在“您将把文件存储在计算机上的什么位置”文本框中输入本地站点的位置“D：\”；⑦单击“下一步”，在弹出的对话框中的“您如何连接远程服务器”下拉表框中先择“无”；⑧单击“下一步”，在弹出的对话框中单击“完成”；⑨弹出“管理站点”对话框，在其左侧列表框中将显示名为“xinxiaoyun”的站点，单击“完成”，完成本地站点的建设。

Dreamweaver将自动在指定位置建立一个站点，首先建立“D：\xinxiaoyun”文件夹，然后在此文件夹下，再建立一组文件夹，其中可见文件夹包括：“_private”和“Images”（存放图形文件），其余文件夹被隐藏起来.三、新建网页[例1-2]在“xinxiaoyun”网站中建立第一个网页取名为“index.html”，设置背景色为：蓝色，字体为：黑色，并作相应文件的插入，完成后保存。

（两种方法）．新建网页操作步骤：方法一①选择“文件”/“新建”命令，弹出“新建文档”对话框，②在“类别”列表框中选择需要创建的网页类别，如选择“基本页”选项，此时右侧的列表中将显示基示页网页的类型。

③在“基本页”列表框中选择所需创建军的网页类型后，单击“创建”按钮即可新建军指定类型的空白网页。

④再把网页另存为相应的站点下。

2.网页的保存单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框。

在“文件名（N）”列表框中输入“index”后，单击“保存（S）”按钮。

如果要保存的页面含有图片、动画、声音等元素，Dreamweaver还会继续询问是否保存这些嵌入的文件此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。

另外，最好将它们保存到Images 文件夹中，使网站保持清洁，便于管理和维护。

2．设置背景设置网页属性：新建一个网页之后，一般还需要设置网页的属性，选择“修改”/“页面属性”命令弹出“页面属性”对话框，在“分类”列表框中有“外观”“链接”“标题”“标题/编码”和“跟踪图象”5个选项。

对页面进行相应的处理。

大多数网页都应用背景图案来为网页增色，这些背景可以是一幅大图片，也可以是若干个小图片的重复使用（即“平铺”）。

选择背景图案时，要注意与文本相协调，而且背景的应用不要妨碍文本的阅读。

另外，背景图案越小，网页的下载速度就越快。

设置背景的操作步骤：①单击“修改”命令，出现“页面属性”对话框，且“背景”标签已被打开。

②单击“浏览（B）”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。

页面制作完成，可以单击“预览”标签，观察一下效果。

方法二：在站的文件夹下直接创建，再做相应的设置。

4．利用表格布局页面（布局表格和普通表格）操作步骤：①“插入”/“表格”或者在常用插入栏中的“插入表格”按钮②在表格对话框中设置插入表格的行数，列数，表格宽度，边框粗细，单元格边距等，③单击“确定”按钮完成表格的创建（如果要边框显示就设置边框的值，如果不要，就将其设置为0）5．文字编辑文字编辑是制作网页最基本的操作。

在网页编辑窗口中，可以像在word中一样直接输入文字，进行编辑和排版，操作步骤：①选定标题“心系奥运”，进行如下设置：字体为黑体，字号为7号字，颜色为绿色，居中排列。

②选定正文，并设置如下：采用默认的字体和字号，颜色为黑色，居中排列。

6.插入图片操作步骤：①将插入点移到要插入图片的位置，“插入（I）”菜单中的“图像（I）”命令，打开“图像源文件”对话框，如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。

否则，单击“浏览”按钮，从“选择文件”对话框中选择所需图片，单击“确定”按钮，将图片插入到网页中。

②拖动图片到页面左侧适当位置。

8．插入动画在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。

插入动画的类型有多种，介绍三种：插入FLASH动画，FLASH按钮和FLASH文本插入FLASH动画操作步骤：①依次单击“插入（I）”菜单中的“媒体”/“FLASH”命令，打开“选择文件”对话框，从“选择文件”对话框中选择所需动画“xx.swf”，单击“确定”按钮，插入动画。

②拖动动画到标题下方适当位置。

③选择插入网页中的FLASH动画，此时单击“属性”面板中的“播放”按钮，就可以预浏动画。

插入FLASH按钮操作步骤：①依次单击“插入（I）”菜单中的“媒体”/“FLASH按钮”命令，②在“样式”列表框中选择按钮的样式，其效果显示在“范例“栏中，③设置按钮上的显示的文字④设置链接⑤设置打开方式为-blank⑥“另存为“文本框中输入FLASH按钮存放的路径⑦按“确定”按钮完成按钮的插入。

⑧在属性面板中可以设置相关的属性，如宽，高，文件名和对起方式等。

插入FLASH按钮操作步骤：①依次单击“插入（I）”菜单中的“媒体”/“FLASH文本”命令，②设置文字相关属性③设置链接④“另存为“文本框中输入FLASH文本名。

⑤按“确定”按钮完成按钮的插入。

⑥在属性面板中设置相关的属性后，单击“确定”，这样当将鼠标移到文本时，文本颜色就会发生变化7．插入背景音乐操作步骤：①“插入”/“标签”命令弹出标签选择器的对话框①在左侧树型列表框中选择“标签选择器”/“HTmL标签”/“页元素”命令，然后在右侧的列表框中选择bgsound选项，②单击“插入（I）”按钮，弹出“标签选择器-bgsound”③单击“源”文本框后的“浏览”按钮，选择要播放的音乐文件，④在“循环”下拉菜表框中输入要播放的次数，也可以选择“无限”一直播放。

⑤单击“确定”完成设置，关闭所有的对话窗口。

9.设置超链接（文本，图形）①选择要设置超链接的文本②在“属性”面板中“链接”下拉列表框后的选择③选择要链接的目标文件，按“确定”④设置“目标”下拉列表框中选择超链接的打开方式。

（blankSelf,present,top）图形的与文本的一样方法如果还有比较多的时间可以找一下特效代码演示给学生看，并且告诉他们怎样使用这些特效代码。

比如：走马灯效果八、第1课时要求学生把所建的站点以学号+姓名命名交到FTP上，检查建站点的情况，第2，3课时要求完善第一节课的页站九、小结本次课内容建一个自己的站点，设计一个主页，学生自己主题。