网页设计教案.docx

网页设计教案.docx

《网页设计教案.docx》由会员分享，可在线阅读，更多相关《网页设计教案.docx（39页珍藏版）》请在冰豆网上搜索。

网页设计教案

新乡技师学院

教案

2012-2013学年度第二学期

课程名称：

网页设计

授课班级：

11级电子商务班

授课教师：

朱小燕

教学部：

电子信息系

2013年3月1日

审批表

日期

课题（章节）内容

教案质量

教研室主任意见

签字

授课班级

授课日期

授课题目：

第一章简单网页制作

（一）

目的要求：

掌握新建站点及网页的方法；掌握网页的属性设置、水平线的插入、滚动字幕的插入及图象的插入等网页的简单美化操作；。

重点难点：

网页的属性设置、水平线的插入、滚动字幕的插入及图象的插入等网页的简单美化操作

组织教学：

点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结

总结复习导入新课：

信息技术突飞猛进，不断地创造着令人耳目一新的天地。

就在人们对互联网络有所认识的时候，电子商务这一全新的事物又以难以估量的速度兴起，并进而改变着社会经济生活的各个方面。

电子商务正从一个概念慢慢变成我们生活中不可缺少的一部份，作为一个现代公民，认识、了解、学习电子商务是非常必要的,而网页制作是专业的电子商务人员所不可缺少的一项技能，从本次课开始我们将详细的学习网页的简单制作方法。

提问：

1、曾经是否学习过网页的制作方法？

2、对网页有什么看法？

教学方式、手段、媒介：

教学手段：

讲授、多媒体；媒介：

教材

授课内容：

一、创建新站点和网页

（一）、创建新站点

1、启动FrontPage2003应用程序，单击主界面“常用”工具栏上“新建普通网页”按钮

右侧的下拉箭头，在弹出的下拉菜单中选择“站点（w）…”，在打开的“Web站点模板”对话框中，选择“空白站点”模板类型，如图所示。

指定新站点的的位置为d：

\dzsw，表示新建立网站的所有文件夹和文件都存放在本地机D盘的dzsw目录中。

2、单击“确定”按钮。

此时即完成了网站的建立。

（二）、创建网页

1、在FrontPage2003的“网页”视图下，单击“常用”工具栏上的“新建普通网页”按钮右侧的下拉箭头，在弹出的下拉菜单中单击其中的“网页（P）”命令，打开如图所示的网页模板对话框。

根据需要选择合适或接近的模板新建网页，如选择“普通网页”。

2、单击“确定”按钮，此时，在工作区上方显示该网页为“new_page_1.htm”。

3、保存网页并更改网页标题

（1）单击“文件（F）”菜单中的“保存（S）”命令，打开“另存为”对话框。

如图所示

（2）在对话框中的“文件名（N）”处，输入文件名（通常为index）,保存类型为“Web页”。

（3）单击对话框中的“更改标题（C）…”按钮，打开“设置网页标题”对话框。

（4）在对话框中输入网页标题，单击F“确定”按钮。

（5）单击“保存（S）”按钮，保存网页。

二、网页美化操作

（一）、网页属性的设置

1、选择“文件”菜单下“属性”命令或单击鼠标右键，选择“网页属性”命令，打开“网页属性”对话框。

2、在“网页属性”对话框中分别进行设置。

在“常规”选项卡中设置背景音乐及循环次数；在“背景”选项卡中设置背景的图片或背景的颜色以及超链接不同状态的显示效果；在“语言”选项卡中设置语言的类型等。

（二）、在网页中插入水平线

1、将光标移到需插入水平线的位置。

2、单击“插入”菜单中的“水平线”命令。

3、选中水平线并双击，打开如所示的“水平线属性”对话框进行设置。

（三）、网页中插入剪贴画库中的水平线

1、将光标移到需插入水平线的位置。

2、单击“插入”菜单下的“图片”子菜单中的“剪贴画”命令，打开“插入剪贴画”任务窗格。

3、在任务窗格的“搜索文字”文本框中输入“水平线”，单击“搜索”按钮，任务窗格中出现搜索出的水平线图样。

如图所示

4、单击要选择的水平线图样即可插入水平线。

（四）、插入图像

1、单击“插入”菜单中的“图片”子菜单中的“来自文件”命令。

2、在“图片”对话框中，选择一个需要的图像文件，单击“插入”按钮，图像出出在网页相应的位置。

3、选中图片，单击鼠标右键，从弹出的快捷菜单中选择“图片属性”命令，打开“图片属性”对话框，选定其中的“外观”选项卡，在其中进行环绕样式、布局、大小等设置。

4、也可以使用“图片”工具栏上的按钮给图片加上文字、创建缩略图、旋转、对比度及亮度等设置。

（五）、插入滚动字幕

1、选择“插入”菜单中的“Web组件”命令，选择“动态效果”中的“字幕”，弹出的“字幕属性”对话框如图所示，

2、在对话框输入字幕文本及字幕的方向、速度、表现方式、大小、背景颜色等。

注：

如果要使文本上下滚动，需要修改其HTML代码。

（六）、插入悬停按钮

1、在“网页”视图模式下，将光标移到准备插入悬停按钮的地方，执行“插入”菜单中的“Web组件”命令，打开“插入Web组件”对话框如图1—7所示。

2、在“组件类型”列表框中，选择“动态效果”，在“选择一种效果”列表框中选择“悬停按钮”，单击“完成”按钮。

打开“悬停按钮属性”对话框。

如图所示。

3、在“按钮文本”文本框中，输入悬停按钮的名称。

4、在“链接到”文本框中，输入悬停按钮链接目标的URL地址，或者单击“浏览”按钮，打开“选择悬停按钮链接”对话框选择准备跳转到的网页文件。

注：

也可以用鼠标右键单击悬停按钮，选择“悬停按钮属性”命令，在打开的“悬停按钮属性”对话框中对悬停按钮属性进行必要的更改。

（七）、站点计数器

1、在“网页”视图模式下，将光标定位到要放置站点计数器的位置。

2、选择“插入”菜单下的“Web组件”命令，打开“插入Web组件”对话框。

3、在“组件类型”列表框中，单击“计数器”选项，然后单击“完成”按钮，打开“站点计数器属性”对话框，如图所示。

4、在“计数器样式”设置区中，单击计数器样式单选框，选择一种计数器样式。

5、如果要将计数器设置为某个数字，单击“计数器智囊团为”复选框，再输入数字。

6、如果要在计数器中显示固定倍数的数字，请选中“设定数字位数”复选框，再输入数字。

7、单击“确定”按钮。

注：

（1）设置完计数器后，在网页上将显示“[计数器]”标志，只有将站点发布之后计数器才可以正常使用。

（2）创建完计数器后，在“网页”视图下，双击“[计数器]”标志，打开“站点计数器属性对话框，即可以计数器进行重新设置。

三、实例练习

（一）、在FrontPage2003中，设计制作一幅标题“我的主页”的静态文本网页，该网页的背景颜色为“黄色”。

首先插入一条文字大小是36pt的滚动字幕“欢迎光临”，其设置是：

文字是浅蓝色、表现方式为“滚动条”、背景颜色为“紫色”；然后，再插入一条红色的水平线；最后，再输入如图中显示文字，该段落文字的字体为楷体-GB2312、颜色为深蓝色、大小不为24磅。

将答案以文件名为MYINDEX.html保存,提交该网页为答案。

（二）、利用FrontPage2003制作如图所示的网页，把此文件命名为pcl.htm，作为最后提交的考试结果文件。

要求：

设置背景图片为素材包中的b3.gif；第一段为文正姚体，黑色，加粗，24磅，居中对齐；插入第一根水平线；中间段落为新宋体，绿色，24磅，左对齐，并加上实心圆圈的项目符号；插入第2根水平线；插入素材包中的图片sa.jpg；为图片建立超链接，链接目标为素材包中的catslog_c.htm。

（三）、用Frotpage2003制作如图所示的网页，把此文件命名为page1.html,提交作为答案。

要求：

设置背景图片为素材包中的034.jpg;插入一根水平线；段落文字为18磅，华文中宋，加粗，蓝色，首行缩进为50点，段前缩进10点，段后缩进20点，行距300%，两端对齐；在上述文字下方插入一根水平线；输入文字“首页”，字体为华文新魏，24磅，居中对齐，蓝绿色，并建立超链接，链接目标为素材包中的homepage.htm。

总结巩固：

掌握新建站点及网页的方法；掌握网页的属性设置、水平线的插入、滚动字幕的插入及图象的插入等网页的简单美化操作；

布置作业：

课后习题

参考资料：

教材

教学后记：

编写日期：

2013年3月1日

编写人员：

朱小燕

授课班级

授课日期

授课题目：

第一章简单网页制作

（二）

目的要求：

熟练掌握用表格定位网页的方法；熟练掌握文本超链接、图片超链接及E-mail超链接的创建方法；

重点难点：

表格定位网页的方法；文本超链接、图片超链接的创建方法；

组织教学：

点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结

总结复习导入新课：

上次课我们主要学习了Frontpage2003中创建站点及网页的方法，并简单学习了如何在网页中加入一些简单的美化元素，本次课我们将详细学习用于定位网页各元素的一个很重要的知识点——表格，并且还将详细学习互联网中用于将成千上万张网页链接在一起的技术——超链接。

提问：

1、如何新建站点及网页？

2、在网页中如何插入水平线及图像？

教学方式、手段、媒介：

教学手段：

讲授、多媒体；媒介：

教材

一、使用表格定位网页

（一）、插入表格

1、启动FrontPage2003。

2、执行“表格”菜单下的“插入”中的“表格”命令，在出现的对话框中设置表格的行列数、布局及宽度。

3、在表格中输入表格的具体内容。

（二）、为表格添加行、列

1、选择插入位置，如果要插入行，则选择一行；如果要插入列，则选择一列。

2、选择“表格”菜单下的“插入”中的“行或列”，打开“插入行或列”的对话框，如图所示。

（三）、拆分与合并单元格

1、选择对象，如果是拆分单元格，首先选择该单元格；如果是合并单元格，则选择需要合并的多个单元格。

2、如果是拆分单元格，则选择“表格”菜单下的“拆分单元格”，如果是合并单元格，则选择“表格”菜单下的“合并单元格”。

（四）、设置表格属性

1、单击表格的任一单元格。

2、单击鼠标右键，选择“表格属性”命令，打开“表格属性”对话框。

3、按需要进行布局、表格大小、选择表格背景及图片、单元格边距、间距及边框颜色等属性的设置。

如图所示。

注：

（1）在网页中表格属性是经常用到的，此处应熟练掌握。

（2）在表格属性设置中，将：

“边框线宽度”设置为0，则浏览时不显示边框线。

（3）应特别注意表格宽度及高度的单位是“百分比”还是“像素”。

（4）选中“使用背景图片”复选框，可为表格添加背景图片，从而美化表格。

（5）若要突出显示单元格和表格边框，应将“显示单元格和表格边框（S）”复选框选中。

（五）、设置单元格属性

1、选择需要设置属性的单元格。

2、单击鼠标右键，选择“单元格属性”命令，打开“单元格属性”对话框。

3、按需要进行单元格的布局、单元格大小、自定义背景颜色和图片及边框颜色等属性的设置。

如图所示。

注：

（1）在网页中单元格属性是经常用到的，此处应熟练掌握。

（2）应特别注意单元格宽度及高度的单位是“百分比”还是“像素”

（3）选中“使用背景图片”复选框，可为当前单元格添加背景图片。

二、创建超链接

超链接是链接网页的一项强大工具。

自从有了超链接之后，用户就可以轻松漫游网络世界。

如果网页失去了超链接，也就等于失去了真正存在意义。

创建超链接有三项工作：

确定超链接点、确定链接目标、确定目标架。

其中

（1）超链接点确定了在何处单击可以打开超链接的目标；

（2）链接目标是需要打开的网页或文件；

（3）目标框架用于确定在何处显示超链接的目标。

（一）、创建文本超链接

1、在“网页”视图模式下，选中需创建超链接的文本。

2、执行“插入”菜单下的超命令，或单击鼠标右键在打开的快捷菜单中，选择“超链接”命令，打开“插入超链接”对话框，如图所示。

3、如果要创建指向一个站点或文件系统中的网页，单击“原有文件或Web页”按钮，在“查找范围”下拉列表中，选择存放网页的文件的文件夹并在文件列表中选择超链接的目标文件；也可以在“地址”文本框中直接输入目标网页的URL地址。

4、如果要创建指向新网页的超链接，在此单击“新建文档”按钮。

5、单击“目标框架”按钮，打开“目标框架”对话框，如图所示。

6、最后单击“确定”接钮。

（二）、创建图片超链接

1、为整个图片创建超链接

设置图片超链接有两种方法：

一种方法和创建文本超链接的方法相同，直接使用插入“超链接”命令进行设置；另一种是在“图片属性”对话框中进行设置。

（1）在“网页”视图模式下，鼠标右键单击选择需要创建超链接的图片。

（2）在弹出的快捷菜单中，执行“图片属性”命令，打开“图片属性”对话框中，如图所示。

（3）在“常规”选项卡的“默认超链接”设置区中的“位置”文本中，直接输入目标网页的URL地址，或单击“浏览”按钮，然后在打开的“编辑超链接”对话框中指定一个目标网页。

（4）单击“确定”按钮。

2、在图片上创建文本热点超链接

文本热点是一个文本框，它可以作为一个超链接源，从而指向相应的超链接跳转目标。

（1）在“网页”视图模式下，单击鼠标左键选择一幅图片。

（2）在“图片”工具栏上，单击“文本”按钮，此时图片上将出现一个文本输入框。

（3）在文本框中输入文字后可对字体的格式进行设置，并可根据需要来调整文本框的大小和位置。

如图所示。

（4）在文本框的边缘单击鼠标右键，在弹出的快捷菜单中执行“超链接”命令，打开“插入超链接”对话框

（5）指定一个目标后，单击“确定”按钮，完成设置。

注：

为图片上的文本创建超链接之后，在网页预览模式下，当光标移至文本框所在的区域时，其开头变为手形。

单击鼠标左键即可在浏览窗口中打开链接目标。

3、在图片上创建几何形状热点超链接

创建几何形状的热点需要使用图片工具栏上的“长方形热点”按钮、“圆形热点”按钮、与多边形热点按钮，它们用于决定热点的大小和形状。

（1）在“网页”视图模式下，单击鼠标左键选择一幅图片。

（2）使用图片工具栏上的“长方形热点”按钮、“圆形热点”按钮、与多边形热点按钮工具，在图片上绘制出热点区域。

采用“多边形热点”工具可以定义一个任意形状的几何图形。

（3）定义完热点区域后，会出现“插入超链接”对话框。

（4）在“插入超链接”对话框中，设置热点链接的目标的URL地址。

（5）单击“确定”按钮，完成创建图片超链接热点操作。

（6）按照以下方法，可以在一张图片上创建多个热点。

注：

（1）单击图片工具栏上的“突出显示热点”按钮，可以突出显示定义的热点，再次单击此按钮，又可以回到原来的样子。

（2）如果要删除热点，可单击图片的热点后按Delete键。

（三）创建E—mail超链接

1、在“网页”视图模式下，选中指向电子邮件的链接源，可以是一段文字，例如“与我联系”；也可以是一幅图片。

2、选择需要创建超链接的文本或图片，单击鼠标右键，选择“超链接”命令，打开“插入超链接”对话框，如图所示。

3、在“链接到”设置区，单击“电子邮件地址”按钮，打开设置电子邮件地址对话框，如图所示。

4、在“电子邮件地址”文本框中，输入电子邮件地址，例如lbj0705@。

也可以在“最近用过的电子邮件”地址列表中，选择一个电子邮件地址。

5、在“主题”文本框中输入一个电子邮件的主题。

6、单击“确定”按钮，完成设置。

（四）、创建书签超链接

书签是一种在网页上标记位置的超链接，是一种在网页内的超链接。

书签主要起定位作用，使用书签来当作超链接的目的端。

书签在使用前必须首先定义。

1、定义书签

（1）在“网页”视图模式下，将光标定位于要插入书签的位置。

（2）选择“插入”菜单中的“书签”命令，打开“书签”对话框，如图所示在对话框中设置书签名字。

（3）单击“确定”按钮。

2、链接到书签

（1）选中要创建超链接的文字或图片，单击鼠标右键，选择“超链接”命令，打开如图所示的对话框。

（2）从对话框中的链接到列中，选择“本文档中的位置”选项出现图所示的对话框。

（3）从图中选择要链接的书签，单击“确定”按钮。

三、实例练习

（一）、制作一个标题为“我爱福娃”的网页，将其保存为olympic.html，提交作为答案。

要求：

插入2行5列的表格，指定表格宽度为70%，水平居中对齐；将素材文件中的福娃图片及文字“贝贝”、“晶晶”、“欢欢”、“迎迎”、“妮妮”输入对应单元格中，设置各单元格对齐方式为居中对齐，单元格中文字字体为幼圆，12磅，加粗；在表格上方插入滚动字幕“北京欢迎您！

”设置该滚动字幕属性如下：

表现方式为“滚动条”，文字为紫色、加粗，滚动速度设置为：

延迟50，数量为3。

（二）、制作一个普通网页，网页标题为“欢度佳节”，在页面中输入文字“节日快乐”，字体为华文行楷，24磅，居中显示，将文字链接至；插入一个二行四列的表格，表格宽度500象素，水平居中对齐，边框粗细为5个象素，颜色为绿色。

在第一行的各个单元格中分别输入如图所示的文字，字体为楷体，14磅，红色加粗，居中对齐。

在第二行各单元中依次插入图片：

picl.gif、pic2.gif、pic3.gif、和pic4.gif，整个表格的背景色设为#FDF5C1，将素材文件bl.gif设为网页背景。

将该网页保存为festivsl.html,提交作为答案。

（三）、制作一个如图所示的网页，并按照要求将此文件保存为pagel.html，提交作为答案。

要求：

（1）新建一个普通网页，插入一个5×2（即5行2列）的表格。

该表格的属性为：

宽度50%，高度150个像素，对齐方式为水平居中，每行高度30个像素，边框粗细为3个像素，颜色为#800000；单元格边距及单元格间距均为0个像素。

单元格对齐方式为水平居中。

（2）将第一行单元格设为标题单元格，背景颜色#C0C0C0，分别输入相应文字。

（3）在其余四行单元格中输入如图文字，中文使用宋体，英文字体为Arial。

（4）在表格下方插入滚动字幕“中外节日中英文对照”，文字为隶书、24pt、紫色。

（四）、请利用FrontPage2003建立一个如图所示的网页，并按照要求将此文件保存为page2.html。

要求：

插入2行4列表格，表格水平居中，表格宽度为100%；在第一行单元格中分别插入素材包中的dujuan.gif，shancha.gif.,shuixian.gif，yueji.gif；第二行第一列文字内容为：

杜鹃：

灿烂如锦色鲜艳，殷红欲燃杜鹃花；第二行第三列文字内容为：

水仙：

借水开花自一奇，水沉为骨玉为肌。

该两行文字设置为华文中宋，12磅，加粗，粉红色；第二行第二列文字内容为：

山茶：

惟有山茶偏耐久，绿丛又放数枝红；第二行第四列文字内容为：

月季：

花开花落无间断，春来春去不相关。

该两列文字设置为华文新魏，12磅，加粗，蓝色；插入图片f2.jpg，并为图片建立超链接，链接目标为素材包中的homepage.html；选择素材包内的图片文件027.jpg为网页背景；将编辑好的文件保存为page2.html。

（五）、利用FrontPage建立一个如图如示的网页，并按照要求将此文件保存为page3.html,提交作为答案。

要求：

插入2行4列表格，表格水平居中，表格宽度为43%，高度为275像素；放图片的单元格宽度设置为43%，高度为132像素，放文字的单元格宽度也设置为43%；单元格中插入的图片为第一行：

q1.jpg,q2.jpg,第二行为：

q3.jpg,q4.jpg：

表格的顶端标题文字为华文新魏，蓝色，24磅，加粗；插入水平线，第一行单元格中文字为粉红色，第二行单元格中文字为红色；选择素材包内的图片文件013.jpg为网页背景；“首页”为华文细黑，蓝色，24磅，加粗，并建立超链接，链接目标为素材包内的homepage.htm；将编辑好的文件保存为page3.html。

总结巩固：

用表格定位网页的方法；文本超链接、图片超链接及E-mail超链接的创建方法；

布置作业：

课后习题

参考资料：

教材

教学后记：

编写日期：

2013年3月5日

编写人员：

朱小燕

授课班级

授课日期

授课题目：

第二章框架网页制作

目的要求：

掌握框架网页的创建及保存方法；掌握编辑框架的方法；掌握设置框架及框架页的方法；

重点难点：

编辑框架的方法；设置框架及框架页的方法；

组织教学：

点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结

总结复习导入新课：

上次课我们详细的学习了用表格定位网页的方法，以及文本超链接、图片超链接及E-mail超链接的创建方法，通过前段时间的学习，大部分学生已基本会使用Frontpage2003制作一些简单的网页，本次课我们将详细的学习框架页面的制作方法。

提问：

1、如何在网页中插入表格？

2、如何对文本及图片创建超链接？

教学方式、手段、媒介：

教学手段：

讲授、多媒体；媒介：

教材

授课内容：

一、创建框架网页

（一）、建立框架

1、启动FrontPage2003。

2、单击主界面“常用”工具栏上“新建普通网页”按钮

右侧的下拉箭头，在弹出的下拉菜单中选择“网页（P）…”,在出现的“网页模板”对话框中选择“框架网页”选项卡，从中选择一种框架形式。

如图所示。

（二）、框架网页的内的两个按钮作用

1、设置初始网页。

单击该按钮，可以为框架指定一个初始网页。

2、新建网页。

单击该按钮，可以为框架新建一个网页。

系统自动在每个框架中创建一个空白网页。

用户可以像简单网页一样编辑框架中的每一个网页。

二、保存框架及框架页

（1）框架网页编辑后要保存，单击工具栏上的保存按钮，出现“另存为”对话框。

（2）此时应分别保存各个框架及整个框架网页。

注：

（1）某个框架为蓝色框显示时，即为当前框架，输入文件名，单击保存按钮。

（2）对于新创建的框架，第一次保存时，系统将提示用户依次保存框架中的各个网页，最后要求用户保存整个框架文件本身。

三、编辑框架

（一）、拆分框架

1、选中需拆分的框架（单击），此时选中的框架四周出现蓝色的框线。

2、执行“框架”菜单中的“拆分框架”命令，出现如图所示的对话框。

3、选择拆分方式，设定后单击“确定”按钮。

注：

要拆分框架，还可以把鼠标指针移动框架的边框上，按住Ctrl键，然后拖动框架的边框。

（二）、删除框架

1、选中需删除的框架。

2、选择“框架”菜单中的“删除框架”命令。

四、设置框架属性

（一）、设置框架属性

1、选中需设置属性的框架。

2、单击鼠标右键，选择“框架属性”命令，如图所示。

3、在框架属性对话框中，进行各种设置。

（二）、设置框架页属性

1、在图上图所示的“框架属性”对话框中单击“框架网页（F）…”按钮，此时出现如图所示的“网页属性”对话框。

2、在框架“