学年小学 网页制作备课.docx
- 文档编号:5206629
- 上传时间:2022-12-13
- 格式:DOCX
- 页数:35
- 大小:41.10KB
学年小学 网页制作备课.docx
《学年小学 网页制作备课.docx》由会员分享,可在线阅读,更多相关《学年小学 网页制作备课.docx(35页珍藏版)》请在冰豆网上搜索。
学年小学网页制作备课
2015-2016学年第一学期
网页制作课程设计方案
课程内容
网页制作
指导教师
张建华
课程目标
1、知道网站、网页的概念,能够确定网站的主题,画出网站结构草图;
2、了解FrontPage操作界面,知道不同视图的不同功能;
3、了解各种网站和网页布局特点,能够利用表格规划网页布局;
4、、熟练掌握在网页中输入文字、修饰文字以及插入图片,更改背景的方法;
5、熟练掌握框架的插入与设置方法;
6、熟练掌握各种超级链接的插入与修改,包括图片热区等;
7、在网页上实现各种动态效果的方法;
8、表单的相关概念以及使用方法,能编辑确认表单;
9、样式与行为的概念以及简单的应用;
10、熟练掌握网站的管理以及上传到因特网上的方法。
课时内容及进度
周次
2
认识FrontPage
3
在FrontPage中创建网站
4
在FrontPage中编辑简单的网页
5
规划网页的布局(表格)
6
表格属性的设置
7
综合实践课(完善修饰页面内容)
8
在网页中插入图片
9
在网页中插入视频
10
网站中图片和视频的修饰
11
超链接的创建与管理
12
动态效果与动态网页
13
使用FrontPage的组件
14
使用表单
15
样式与行为
16
管理与上传网站
2015-2016学年度第一学期
网页制作课程课时记录
课时内容
认识FrontPage
周次
1
准备工作
常用网站主页的页面
主要环节
1、点名
2、介绍网站的意义,学生将自己对网站的了解
3、了解FrontPage的窗口。
主要过程设计
1、网页的基本知识
在因特网上浏览时,看到的每一个页面,就是一个网页。
简单地说,网页就是把文字、图形、声音、影片等多种媒体形式的信息,以及分布在因特网上的各种相关信息,相互链接起来而构成的一种信息表达方式。
2、FrontPage是微软公司Office系列办公软件中的一个。
熟练地使用FrontPage,再加上一个好的构思,就能够制作出比较理想的主页。
3、FrontPage入门
1.启动FrontPage
首先,单击任务栏上的“开始”,打开“开始”菜单。
然后,将鼠标指针指向“开始”菜单中的“程序”,右侧弹出“程序”菜单。
在“程序”菜单中单击子菜单中的“MicrosoftFrontPage”,稍等一会儿,就会出现FrontPage的操作窗口。
FrontPage操作窗口由标题栏、菜单栏、工具栏、编辑区、窗格等组成。
1.2.2FrontPage工具栏
FrontPage共提供了14种工具栏,包含大部分菜单命令,熟练使用工具栏能够为我们操作提供方便。
单击菜单栏上的“视图”命令,在弹出的菜单中可以看到全部九个工具栏,其中前面打勾的是在当前操作窗口显示并可直接使用的,就可以或关闭打开相应的工具栏。
1.2.3FrontPage的编辑区
编辑区是制作、编辑主页的地方,我们将在这个区域里进行输入文字、插入图片、制作表格等操作。
编辑区下面有四个切换标签:
即“设计”、“拆分”、“代码”和“预览”标签。
1.“设计”标签即一般编辑画面,在此画面中我们将以“所见即所得”方式进行网页的编辑与制作;2.“拆分”标签可同时查看设计和HTML代码的画面,在这个窗口中可以对照“设计”标签的情景,对网页的设计代码进行修改;3.“代码”标签中可以像在文本编辑器里一样对HTML代码进行编辑和修改;4.“预览”标签即预览画面,在此窗口中可以预览网页在IE浏览器中的样子。
1.2.4FrontPage视图
在编辑区的左端有一个视图栏,该视图栏中有六种视图的按钮。
单击菜单栏上的“查看”,在下拉菜单中可以发现在“视图栏”前面有一个“√”,单击鼠标,视图栏被隐藏。
重复操作,视图栏又会出现。
1.3.7退出FrontPage
单击“文件”菜单,在其下拉菜单中选择“退出”命令,可以将FrontPage关闭。
2015-2016学年度第一学期
网页制作课程课时记录
课时内容
在FrontPage中创建网站
周次
2
准备工作
制作网页所需的文字、图片素材
主要环节
1、搜集制作网页所需的文字、图片素材。
2、了解网站的组成
3、学习创建站点的方法
4、创建站点
主要过程设计
1创建FrontPage站点
创建站点前的准备
为全面地展示一个主题,往往需要制作若干个网页,把这些网页互相链接起来,就构成了一个网站。
在开始建立网站之前,首先要确定网站的主题,根据主题确定这个网站需要由多少个网页构成,以及这些网页之间的关联关系等。
2创建站点
打开FrontPage,单击菜单栏上的“文件”,打开“文件”菜单,将鼠标指针移动到“新建”上,弹出它的下一级,选择“网页或站点”。
此时任务窗格“新建网页或站点”被打开,在“新建网页或站点”任务窗格中单击“空白站点”,打开“Web站点模板”对话框。
选择“空白站点”模板,然后在“指定新站点位置”框中输入:
D:
\MyHomepage,单击“确定”。
1.3.3在网站中添加网页
单击“视图”菜单,在下拉菜单中选择“文件夹”,打开“文件夹”视图。
在“文件夹”视图中可以看到,窗口分为两部分。
整个形式与Windows资源器相同,左边是网站根文件夹里的子文件夹以及文件,而右边窗口是左边所选根文件夹或子文件夹里的下一级文件夹和文件。
在左边窗口中单击鼠标右键,在弹出的快捷菜单中选择“新建”,然后在其下一级菜单中单击“网页”选项。
此时,在右边的窗口中出现一个名为“index.htm”的网页,该网页将作为网站的主页,仔细观察可以发现它的图标上有一个小房子的标志。
重复上述操作,可以建立一个名为“new_page_1.htm”的网页。
将“new_page_1.htm”删除,输入文件名,这个网页将成为“班级相册”。
网页文件名由英文字母、数字和下划线等符号组成,一般不使用中文作为文件名。
网页标题指的是浏览该网页时显示在浏览器标题栏中的名字。
选中网页,单击该网页的标题项,使该网页的标题处于编辑状态。
将网页默认的标题删除,输入中文的网页标题。
使用同样的方法,按照网站结构图,继续添加网页,并更改网站标题。
3导入素材文件到站点中
我们知道,网站是由网页和支持网页的各种文件组成的。
要编辑网页的内容,还应该将制作网页需要的图像、声音、视频等文件导入到站点中。
单击“文件”菜单,在下拉菜单中单击“导入”,在“导入”对话框中,单击“添加文件”按钮。
在“将文件添加到导入列表”对话框中,打开存放网页素材的文件夹,选中要导入的文件,单击“打开”,返回“导入”对话框。
重复上述操作,可以将多个文件添加到“导入”文件夹列表中。
最后在“导入”对话框中单击“确定”,文件被导入到站点中。
4对站点中的文件进行管理
对于站点中的文件,常常需要统一管理。
例如,将没有用的文件删掉,将同一类的文件移动到一个文件夹中等等。
FrontPage提供了“文件夹列表”栏,通过它可以轻松地实现各种文件操作。
在“文件夹列表”栏中,选中文件,单击右键,在弹出的快捷菜单中选择相应命令,就可以很方便的实现文件的复制、移动和删除等操作,操作方法和在Win98的“资源管理器”中是一样的,大家可以自己练习。
5关闭站点
单击“文件”菜单,在其下拉菜单中选择“关闭站点”命令,可以将现在正在编辑的站点关闭。
关闭站点后,站点中的文件和文件夹等信息将不再显示,而FrontPage窗口仍然处于打开状态,可以继续编辑其他的站点。
2015-2016学年度第一学期
网页制作课程课时记录
课时内容
在FrontPage中编辑简单的网页
周次
3/4
准备工作
站点、素材
主要环节
1、确定网页主题
2、规划网页内容
3、制作网页
主要过程设计
2.1.2设置网页中的文字
在FrontPage的文件夹视图中,选中要编辑的网页,双击鼠标,此时FrontPage自动切换到网页视图中,而且出现光标,等待输入文字。
1改变文字的字体与字号
首先,拖动鼠标选中文字,选定的文字呈反色显示。
然后单击工具栏上“字体”框右端的
,弹出如图所示的字体下拉表,单击其中的“楷体”,将文字设置为楷体。
2文字的对齐方式
FrontPage提供了三种对齐方式,分别是左对齐、居中和右对齐。
选中文字,单击工具栏上的
按钮,文字就居中显示了。
3文字的风格
和Word一样,FrontPage也提供了字体风格按钮,我们可以将字体变成粗体、倾斜、下划线三种风格,也可以对三种风格任意组合,形成新的风格样式。
选中文字,单击工具栏上的按钮
,使文字变成粗体。
4改变文字的颜色
我们还可以更改文本的颜色,使网页看起来更漂亮。
选中文字,单击格式工具栏上按钮右边的
,单击红色色块,将“飞”这个字改成红色。
2.1.4段落间距
选中文字,然后通过单击“格式”菜单下的“段落”命令,打开“段落”对话框。
在“段落间距”区中,更改段前值为-10,其中“-”号表示减少段与段之间的距离,如果想加大段与段之间的距离,则输入正值。
2.1.5预览网页
在FrontPage中单击“预览”标签,切换到预览状态。
在FrontPage操作窗口中,单击“文件”,在下拉菜单中选择“在浏览器中预览”。
单击“在浏览器中预览”对话框中的“预览”按钮,网页被浏览器打开
2015-2016学年度第一学期
网页制作课程课时记录
课时内容
规划网页的布局
周次
5
准备工作
常用网站布局图
主要环节
1、展示常用网站的布局图
2、了解网页的常用布局类型
3、用白纸和笔设计网站的布局图
4、利用表格给网页布局
主要过程设计
2网页布局实例
所谓网页的布局,通俗地说,就是确定网页上的网站标志、导航栏、菜单等元素的位置。
不同的网页,各种网页元素所处的地位不同,他们的位置也就不同。
一般情况下,重要的元素都放在突出的位置。
简单划分,网页的布局一般可以分为:
“厂”字型、“同”字型、标题正文型、分栏型、Flash型、封面型等。
3.1.3网页布局注意事项
网页布局同样没有优劣之分,但要注意与网站的风格相适应。
一些规律性的东西在确定网页风格时要特别注意。
平衡性、对称性、对比性、疏密度、反复性、韵律感。
3.2使用表格
在网页中插入表格可以使网页上的内容排列整齐。
3.2.1表格概述
列表主要有两种方法:
项目列表和编号列表。
相对于列表,表格的应用更加广泛,功能也更加强大。
在网页中,表格的作用主要有两种:
一是存放数据和显示信息,这是常见的,也是基本的应用;二是组织网页的内容,对于图文混排的网页,利用表格可以大大提高网页制作的效率,而隐藏表格框线后,可以使浏览者感受不到表格的存在。
3.2.2插入表格
单击菜单栏上的“表格”,打开“表格”菜单,移动鼠标指针到“插入”上,在下一级菜单中单击“表格”,出现“插入表格”对话框。
在“插入表格”对话框中,输入欲插入表格的行数、列数和边框线宽度。
单击
后,出现表。
在表中输入文字。
在表格中输入文字的方法和在Word中是一样的。
将鼠标指针移动到框线上拖动,可以改变列宽,使表格更美观些。
3.2.3插入、删除表格的行、列和单元格
使光标出现在该行中。
然后单击菜单栏上的“表格”,打开“表格”菜单,再单击“表格”菜单中的“插入”,在下一级菜单中单击“行或列”,打开“插入行或列”对话框。
选中“行”,在“行数”右端的栏位中输入1,然后选中“所选区域之上”。
单击
,在上面将插入一行。
插入新列的操作与插入新行基本一样。
单击鼠标使光标出现在该行中。
然后单击“表格”菜单,将鼠标指针移动到“选定”上,自动弹出下一级菜单,最后单击“行”,选定该行。
单击“表格”菜单,在下拉菜单中选择“删除单元格”,该行被删除。
3.2.4合并与拆分单元格
首先,选中两个单元格。
单击菜单栏上的
,打开“表格”菜单,再单击“表格”菜单中的“合并单元格”,两个单元格将被合并成一个单元格。
首先,单击鼠标,使光标出现在单元格中。
然后单击菜单栏上的
,打开“表格”菜单,再单击“表格”菜单中的“拆分单元格”,打开“拆分单元格”对话框。
选中“拆分为列”,在“列数”右端的栏位中输入“3”。
单击
,该单元格被分为三个单元格。
按行拆分单元格的操作与按列拆分单元格基本一样。
2015-2016学年度第一学期
网页制作课程课时记录
课时内容
网页布局中表格属性的设置
周次
6
准备工作
未布局完整的页面
主要环节
1、打开上节课未布局好的网站
2、进一步修饰完善网站的布局
3、对表格的属性设置
主要过程设计
3.2.5表格的嵌套
表格的嵌套就是在表格中插入另外一个表格,这样除了可以使网页内容更整齐以外,还可以为选取内容进行编辑提供方便。
3.3利用表格规划网页的布局
3.3.1“表格属性”对话框
将鼠标移到表格的任意单元格中,单击菜单栏上的“表格”,然后将鼠标指针移动到“表格属性”上,最后在它的下一级菜单中选择“表格”,将“表格属性”对话框打开。
在“表格属性”对话框的“布局”区域中共有六项设置,其中“对齐方式”指表格相对于网页的对齐方式,默认情况下,表格将左对齐,由于表格宽度占满100%,此项一般不用设置;单元格边距指单元格中文字与框线的距离;单元格间距指单元格之间的距离。
3.3.2框线的设置
在“表格属性”对话框中,表格的框线宽度改为0。
此时表格框线变成虚线,在浏览器中打开网页可以发现表格框线被隐藏。
3.3.3在表格中使用背景色
首先,单击鼠标使光标出现在该单元格中,然后在“表格”菜单中选择“属性”下的“单元格”,打开“单元格属性”对话框。
在“单元格属性”对话框中单击“背景颜色”右端的,在下拉的颜色选项中选择合适的颜色。
单击“确定”。
2015-2016学年度第一学期
网页制作课程课时记录
课时内容
美化页面
周次
7/8两周
准备工作
网站页面所需要的图片
主要环节
1、为网站的页面添加文字内容
2、了解网站能够添加的图片类型
3、为网页添加图片或者背景
主要过程设计
4.1在网页中使用图片
图片是网页中不可或缺的元素,它主要有两个作用:
一是可以起到装饰的作用,另外,图片本身也包含许多信息。
4.1.1图片的基本知识
GIF(GrapplerInterchangeFormat)图片文件最多支持256种颜色。
另外GIF文件可以实现简单的动画。
GIF文件相对体积较小,多数用于图标,按钮,滚动条和背景等等。
JPEG或JPG称为联合图片专家组(JointPhotographExpertGroup)格式,它主要应用于摄影图片的存储和显示,是一种静态影像压缩标准。
它在处理颜色和图形细节方面作的比GIF要好,因而在图片、复杂徽标和图片镜像方面使用的更为广泛。
JPG/JPEG
GIF
色彩
真彩色
16色、256色
特殊功能
无
透明背景、动画
压缩是否有损失
有损压缩
无损压缩
适合情景
颜色丰富,有连续的色调,一般表现真实的事物
颜色有限,主要以漫画图案或线条为主。
一般表现建筑结构图或手绘图。
JPEG与GIF格式的比较
PNG格式文件的特点是:
只需下载图像的1/64,就可以在网页上显示一个低分辨率的图片,随着图片信息的下载,图片也越来越清晰。
FrontPage内嵌一个图片转换程序,自动将BMP文件、TIF文件等没有压缩的图片格式转换成JPEG或GIF格式文件。
4.1.2插入图片
单击菜单栏上的“插入”,打开“插入”菜单;再单击“插入”菜单的“图片”,在“图片”的下一级菜单中选择“来自文件”,打开“图片”对话框。
在“图片”对话框中,打开“Image”文件夹,选中图片文件,单击“确定”将其插入网页。
1、改变图片的大小
首先,用鼠标单击图片,在图片的四周会出现8个黑色的小方块。
然后,将鼠标移至小方块处,当鼠标指针变成双向箭头时,按住鼠标左键拖动,将图片调整到合适的大小。
2、改变图片的位置
选中图片,按住鼠标不放,当鼠标指针变成
时,将图片拖到合适的位置,松开鼠标,图片的位置被改变了。
4.1.4使用图片作为网页背景
打开网页后,单击“文件”菜单,在下拉菜单中选择“属性”命令,打开“页面属性”对话框。
在“页面属性”对话框中,打开“背景”选项卡。
单击“背景图片”前的方框,使这个小方框中出现一个对勾
(称为“选中”),然后单击
,打开“选择背景图片”对话框。
在该对话框中打开“Image”文件夹,选择背景图片,单击“确定”按钮,返回“页面属性”对话框。
单击“确定”,得到有背景的网页。
4.2图片的属性
4.2.1图片工具栏
当我们选中图片时,在窗口的下端会出现图片工具栏,工具栏上各按钮的作用如下:
(1)“来自文件”按钮。
用于向当前网页插入来自文件的图片。
单击此按钮会打开“插入图片”对话框。
(2)“文本”按钮。
用于在图片中加入文本。
但该图片必须是GIF格式的,如果不是,FrontPage会自动将它转换成GIF格式图片文件。
(3)“自动缩略图”按钮。
用于将选中的图片生成一个图片缩略图,并在缩略图中建立一个链接到该图片的超链接。
(4)“绝对定位”按钮。
在定义层时,设置图像在当前层的绝对位置。
(5)“上移一层”按钮。
在定义层时,将图片上移一层。
(6)“下移一层”按钮。
在定义层时,将图片下移一层。
(7)“向左旋转”按钮。
将图片向左旋转90度。
(8)“向右旋转”按钮。
将图片向右旋转90度。
(9)“水平翻转”按钮。
将图片沿垂直线对称翻转。
(10)“垂直翻转”按钮。
将图片沿水平线对称翻转。
(11)“增加对比度”按钮。
增加图片前景色和背景色的对比度。
(12)“减少对比度”按钮。
降低图片前景色和背景色的对比度。
(13)“增加亮度”按钮。
增加图片颜色的明亮度。
(14)“减少亮度”按钮。
减少图片颜色的明亮度。
(15)“剪裁”按钮。
用于剪裁图片。
单击该按钮,所选图片出现8个控点,拖动该控点,出现一个虚线框,再次单击“剪裁”按钮,图片将只剩下虚框内的内容。
(16)“线型”按钮。
单击鼠标可以设置线型,默认情况下无效。
(17)“设置图片格式”按钮。
单击鼠标可以设置图片格式,默认情况下无效。
(18)“设置透明的颜色”按钮。
将图片背景色设为透明色,单击该按钮可以使一幅图片与页面真正融为一体。
要实现这一点,要求原始图片必须全部着色,不能有无色的区域干扰。
(19)“颜色”按钮。
可以设置图片的灰度,冲蚀变淡等效果
(20)“凹凸效果”按钮。
将图片转化为立体效果,即将图片边界凹凸化,使图片看起来有立体效果。
(21)“重新取样”按钮。
调整图片大小以后,单击该按钮可以获得调整之后的图片。
(22)“选定”按钮。
用于选择网页中的图片
(23)“长方形热点”按钮。
可以在图片中划出长方形热点区域用于超链接。
(24)“圆形热点”按钮。
可以在图片中划出圆形热点区域用于超链接。
(25)“多边形热点”按钮。
可以在图片中划出多边形热点区域用于超链接。
(26)“突出显示热点”按钮。
在图片中可以突出显示热点。
(27)“还原”按钮。
单击该按钮可以还原图片被编辑前的状态。
4.2.2图片的属性
选中图片,单击菜单栏上的“格式”,在弹出的菜单中选择“属性”,得到图片属性对话框。
在图片属性对话框中共有三个选项卡:
“常规”选项卡、视频选项卡、外观选项卡。
4.2.3图片在网页中显示的方式
在“替代”选择区。
单击“低分辨率”后面的“浏览”按钮,选择一幅低分辨率体积较小的图片,这样浏览网页时,先下载低分辨率的图片,然后再下载整幅图片,将其覆盖。
使得浏览者在网速较慢的情况下,可以完整地看到整个网页;在“文本”后面的框中输入图片的说明文字,当无法下载图片时,浏览者虽然无法看到图片,但可以看到图片的说明文字。
4.3缩略图与图片定位
4.3.1创建图片缩略图
缩略图是图片的缩小版本,单击它可以让访问者通过超链接打开完整的图片。
这样需要清晰看到大图片的人可以看到清晰的图片,而普通的浏览者只是看到一个小图片,而不会影响到整个网页的显示速度。
选中该图片。
单击图片工具栏上的“自动缩略图”按钮。
这是选中图片便缩小为一个小的图片,且四周有一个蓝色的方框。
这时FrontPage已经创建了指向缩略图原来大图片的超链接。
在浏览器中打开网页单击缩略图就将大图片打开。
4.3.2设置缩略图
单击“工具”菜单,选择其中的“网页选项”命令,打开“网页选项”对话框,选取“自动缩略图”选项卡。
单击“设置”框右端的小三角,分别选择“宽度”、“高度”、“最短的一边”、“最长的一边”;然后在“像素”右边的框中输入相应的像素值。
这样可以完成缩略图的大小设置。
4.3.3图片的绝对定位
绝对定位就是将网页中的各种元素(包括图片和表格等)按照绝对坐标放置在网页中。
所谓绝对坐标就是以网页的左上角作为相对参考点来制定参考坐标,既将网页左上角定为(0,0),根据给定的坐标(X,Y),就可以将图片等准确定位在(X,Y)处。
选中图片,单击“格式”,打开菜单,选择“定位”命令,打开“定位”对话框。
单击“定位样式”区域中的“绝对”框,在“位置与大小”区域中,输入图片位置坐标(左边为X值;顶边为Y值)和图片的大小值。
单击“确定”,完成操作。
4.3.4图片的相对定位
相对定位就是根据与文本段落中其他元素的位置来制定图片的位置,在这种情况下可以设置图片与文本的环绕方式。
选中图片,单击“格式”,打开菜单,选择“定位”命令,打开“定位”对话框。
单击“定位样式”区域中的“相对”框,在“环绕方式”区域中选择“左”、“右”、“无”三种环绕方式。
从图示中可以知道,“左”就是图片放在网页的左边,而文字从右边环绕图片;“右”就是图片放在网页的右边,而文字从左边环绕图片。
2015-2016学年度第一学期
网页制作课程课时记录
课时内容
充实网页内容
周次
9
准备工作
搜集网站所需素材
主要环节
1、各组对比所制作网站
2、搜集素材
3、完善网站内容
主要过程设计
本节课为综合实践课,对前段时间学习的总结。
首先请各组展示自己的页面,互相之间学习优点,找出不足。
再根据自己网站的主题内容需要,搜集素材。
再完善自己的作品。
2015-2016学年度第一学期
网页制作课程课时记录
课时内容
在网站中插入视频
周次
10/11
准备工作
视频、网站
主要环节
1、观看其他网站的视频使用情况
2、了解网站插入视频的格式
3、学习插入视频的方法
主要过程设计
4.4插入与设置视频
4.4.1插入AVI视频
首先确定光标的位置,单击菜单栏上的“插入”,在下拉菜单中选择“图片”,当出现下级菜单时,单击“视频”,打开“视频”对话框。
在“视频”对话框中找到AVI视频文件,可以实现AVI视频文件的插入。
将鼠标移动到视频文件上,单击鼠标右键,弹出快捷菜单,在快捷菜单中选择“图片属性”,打开“图片属性”对话框。
在该对话框中可以对视频播放方式进行设置。
4.4.2流媒体文件
流媒体技术就是把连
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 学年小学 网页制作备课 学年 小学 网页 制作 备课
![提示](https://static.bdocx.com/images/bang_tan.gif)