《第六章《网页的设计与制作》ppt课件-高中信息技术》由会员分享，可在线阅读，更多相关《第六章《网页的设计与制作》ppt课件-高中信息技术（51页珍藏版）》请在金锄头文库上搜索。
1、第六章网页的设计与制作,一、网页的元素 1、文字 文字是网页表达信息的基本工具，从凸显主题或者网页美观等方面考虑，文字常被设置成不同的字体、大小或者颜色。 2、图像 网页中适当地使用图形图像，可以更直观、准确地表达某些信息，并有美化网页、吸引读者的作用。网页中可以使用静态图像，也可以使用动态图像，也就是我们说的动画。,大家看看网页中的图片常见有哪些格式？选中一张图片右击“图片另存为 . ”，在出现的保存对话框中“保存类型”里可以看到图片的格式。 3、超链接 网站是通过什么来实现多个网页间跳转的呢？我们发现当我们将鼠标放置到自己感兴趣的标题栏目时，鼠标会变成手型，这表示这里有超链接，可以实现网页
2、间的跳转。文字、图片和超链接是网页的三种基本元素，大部分网站都具备这三种元素中的一种或几种。刚才同学提到了网页中还有音乐、视频等元素，其实网页的元素还远不止这些，网页中还常见表格、表单以及更多的网页构件。,4、表单 “电视栏目查询”部分使用的是表单，表单可以实现用户和网站的交互功能，网站上的投票功能一般都是用表单来实现的。“TOP10”用的是表格；网页底部状态栏中的移动标语使用的就是网页构件了 二、超文本标记语言HTML 乍看起来，网页和我们熟悉的 word 文档有不少相似之处，比如，都通过文字、图片等方式表达信息，那么是否可以使用word来制作网页呢？打开word程序，输入一段文字并插入一张
3、图片，选择菜单栏里的“文件”-“另存为.”，在“保存类型”中选择“网页”，保存后打开看看，呀，文档的属性变成HTML，可以在浏览器中浏览，成为网页了。,超文本标记语言（Hypertext Mark-up Language ，HTML），是在WWW中用于指定一个超文本的内容和格式的一种计算机语言。HTML是标准通用标记语言（SGML）的简化版本，是使用超级链接的经过正式定义的文档系统。用HTML编写网页时，它控制着Web页面的布局和构思，成为因特网上描述网页内容和外观的标准。HTML语言是一种标记语言，HTML包含了一对“打开”和“关闭”的标记，其中含有属性和值。标记描述了每个在网页上的组件，例
4、如文本段落、表格或图像。HTML描述的是文件各部分内容的结构，而不是文件内容在网页或显示器上出现的具体形式，只有这样才能保证网页是跨平台的，可以在任何计算机系统上正确显示。也就是说HTML文档应该在不同的浏览器和操作平台之间都很好使用。,超文本标记语言是一种文档结构的标记语言，它使用一些约定的标记对页面上各种信息（包括文字、声音、图形、图像、视频等）、格式以及超级链接进行描述。当用户浏览WWW上的信息时，浏览器会自动解释这些标记的含义，并将其显示为用户在屏幕上所看到的网页。这种用HTML编写的网页又称为HTML文档。HTML语法非常简单，它采用简洁明了的语法命令，通过对各种标签、元素、属性、对
5、象等的定义，建立起图形、声音、视频等多媒体信息，还可以建立与其他超文本的链接。一个完整的HTML文件是由头部和主体两部分构成。HTML单元由三部分组成：起始标记、单元内容、结束标记。,其实，网页中包含的文本、图像、超链接等元素是由超文本标记语言HTML来描述的。在 IE 浏览器中将“信息技术基础首页”保存下来，单击菜单栏里的“文件”选择“另存为.”,在打开的保存对话框中保存类型里选择“网页，全部”。保存后就可以用记事本打开该网页的HTML代码了,8,金手指考试网 2016年金手指驾驶员考试科目一 科目四元贝驾考网 科目一科目四仿真考试题C1,Grammar,三、网页制作工具 我们看到代码中有不
6、少“ ” 标记，它们描述了网页文档的结构。比如在 之间就是网页的名称。我们来修改一下这部分的内容，将它改成你的名字，保存后再用IE浏览器打开该文档，看，网页标题栏中的名称改变了。起初，人们都是以人工方式编写网页结构的HTML代码，虽然代码简单，但对于不熟悉它的人来说，要想让它生成理想的网页还不是一件简单的事情。为了提高网页制作的效率和质量，许多公司开发了 专门用于制作网页的网页制作工具。OFFICE里有一款名为FrontPage的软件， 就是这样一款网页制作工具。启动FrontPage，从菜单栏“文件”中选择“打开.”，找到刚才保存的“信息技术基础首页”，将它在 FrontPage 中打开。在
7、“设计”页和“代码”页，以及“预览”页中观察页面的内容。,想一想，哪一页的情况与记事本中看到的情况相似？（同学：“代码”页）分别在 FrontPage 的“设计”页和“代码”页中修改正文文字“编者的话”，然后预览。体会一下这两种方法的效果有没有不同？还有一个“拆分”页实际上就是“设计”页和“代码”页的组合，在“拆分”页中修改“设计”窗口的内容，“代码”窗口的内容也会同时发生变化。,这节课我们知道了网页是万维网上进行信息表达的重要工具，若干个网页组成了网站；我们寻找了网页中的元素，文字、图片、动画、音乐、视频，超链接、表格、表单等都可以是构成网页的元素；我们还尝试将Word文档变成简单的网页。其
8、实，网页中包含的文本、图像、超链接等元素是由超文本标记语言HTML来描述的。当然同学们如需制作更专业的网站，要借助专门制作网页的工具，如FrontPage,一、网站主题的确定 我们的祖国历史悠久，上下五千年为人类文明留下了许多宝贵的文化遗产；我们的祖国景色秀丽，江山如此多娇，960万平方公里，处处保留了大自然的杰作。请同学们关注我们生活所在地的自然景观、人文景观，其中哪些已经被列入世界遗产保护名录，哪些基本具备了列入条件但至今未被列入。请大家以小组为单位，利用网络搜索信息，收集感兴趣的人文或自然景观的资料，如果它们已经被列入世界遗产名录，就可以设计制作一个网站向大家介绍这些世界遗产，如果有条件
9、争取成为世界遗产的，则可以设计一个申请性质的网站，向全世界推荐这个景点作为世界遗产。还可以按照世界遗产的分类，分别组成“世界文化遗产”、“世界自然遗产”、“世界文化与自然遗产”等三大组进行活动。,二、制作网站的分工 网站为我们提供了大量的信息，而一个优秀的网站通常是集体智慧的结晶。那么制作网站主要包括哪些工作呢？一般来说，网站制作中主要的分工有“网站策划构思”、“网站制作支持”和“素材收集整理”。负责“网站策划构思”的需多考察一些优秀的网站，开阔网站构思的视野，活跃网站策划的思路；负责“素材收集整理”的应该尽可能多地收集丰富的素材，然后做好整理工作；负责“网站制作支持”的就要多学习一些网页制作
10、的知识，不要把重点放在收集素材上。,在网站的设计制作过程中，每个小组的成员，按照各自的分工，分别进行准备，小组中的同学既需要相互合作，又要各司其责。在小组中，开展合作学习，互为老师，共同完成网站的建设，由于大家在准备网站的设计制作时，各有侧重，所以在一个小组中，每位同学各有所长，可以相互指导，取长补短，共同提高，从而制作出一个大家满意的网站。,网站的策划与构思,三、网站的构思 一个好的网站需要有好的构思，这里以介绍世界文化遗产“北京故宫”为例，构思轮廓可以大致如下： 网站名称：世界文化遗产北京故宫。 网站主题：世界文化遗产“北京故宫”的基本情况介绍 网站内容：关于北京故宫的文字说明，相关的配图
11、和录像资料，目的是向浏览者说明作为世界文化遗产的北京故宫的深厚的历史底蕴和浓郁的人文气息。 网站结构：采用一个为主页，下面链接数个网页的二层结构,一、素材的收集 我们今天就要将收集的图片转换成制作网页所需要的格式，通过视窗操作系统中的画图软件可以方便地转换图片格式。仔细观察“图片转换方法的操作示例”，尝试将收集到一些图片转换成JPG或GIF格式。（下载图片）在画图软件中将该文件打开，单击菜单栏里的“文件”-“另存为.”,在“保存类型”里选择“JPEG”后保存。,对彩色图片而言格式转换成jpg后质量会有所降低，但一般情况下，我们不易察觉。而JPG格式的图片体积远小于BMP格式的图片，传输速度快，
12、因而在网页中大量使用。 二、素材的整理 通常收集的图片中只有部分内容有使用价值，有些图片还有瑕疵，我们需要经过截图后才能使用。在画图软件中打开图片，在工具栏里单击虚线矩形即“选定”按钮，在图像区域拖拽鼠标画出需要的图像区域，在菜单栏单击“编辑”-“复制”，然后新建一个文件，再“编辑”-“粘贴”，最后保存即可。,仿照主页布局设计、素材收集和整理的方法和步骤，把自己需要的素材按照要求保存到各个子文件夹中，然后通过网络上传工具把自己的文件夹合并到小组的文件夹下。例如，把文件夹“renwen”上传合并后的结构如下：,一、使用FrontPage新建网页 1、网页制作的基本步骤 网站的主页是进入其他网页的
13、通道，所以在主页上应设置与其他网页的超链接。其他网页的制作方法与主页相仿。设计制作网页一般要经过以下几个基本步骤：,二、设计制作网站主页 一个网站主页的文件名一般是 index.htm 或 index.html。 （1）FrontPage2000中，新建一个网页并把网页文件名改为网站首页的默认文件名 (index.htm) 执行菜单命令项“文件”“另存为”命令，在“另存为”对话框中，选定或创建存放网站的文件夹，如“北京故宫”，将文件名更改为“index.htm”，将网页标题更改为“世界文化遗产北京故宫”。保存后，该网页存放在“北京故宫”文件夹中。,2）输入网站的名称，并对网站名称进行格式设置
14、在网页的第一行输入网站名称“世界文化遗产北京故宫”，然后，将该名称“居中”、将该段文字的字体、字号和颜色设定为“黑体”、“字号 7( 36 磅 值) ”、“红色”等,（3）在网站名称下方，插入一个表格用来定位网页构件 执行菜单命令“表格”“插入”“表格”命令。在“插入表格”对话框中，对表格的属性进行设置，作为定位用的表格，其边框粗细必须设为“ 0 ”，而单元格间距和边距则可以根据需要进行设置，这里将单元格边距和单元格间距都设置为“ 5 ”。行数和列数根据需要设置为 5 行 2 列。完成这些参数设置后，单击“确定”按钮，即可完成表格的插入。 表格插入后，在网站名称下方出现了一个5行2列的表格，我
15、们可以发现，这个表格的边框线是虚线，这表示边框线的宽度是“0”，以后浏览时将不会出现这些表格线。每个单元格之间应有合适的间距，这样里面的文字就不会挤在一起，看起来也美观一些。,（4）合并单元格 由于我们准备在表格的右半边插入一幅北京故宫的照片，这幅照片占用右侧的五个单元格，这就需要将这五个单元格合并成一个单元格。合作的办法是先选中这五个单元格，再执行菜单“表格”“合并单元格”命令，就能将被选中的五个单元格合并为一个单元格。 （5）在表格的单元格中输入文字 我们准备在表格左侧的五个单元格中输入另外五个网页的标题，以后可以在这五个标题上设置超链接。在五个单元格中分别输入“北京故宫简介”、“太和殿”
16、、“乾清宫”、“金水桥”、“文物宝库”，并且进行格式的设置。,（6）在表格的单元格中插入图像 光标置于合并后的单元格中，执行菜单“插入”“图片”“来自文件”命令，在“选择文件”对话框中，选定存放图像的文件夹，从中选择一张图片，将这张图片插入到光标所在的单元格中。如果对插入图片的尺寸感到不合适的话，可以选中该图片，执行菜单“格式”“图片”命令，在“图片属性”对话框中，选定“大小”选项卡，然后改变长和宽的数值即可，也可以直接拖动图片的八个控制点，以改变图片的大小尺寸。 （7）输入版权信息 一般应该在网站主页的底部，给出网站的作者、联络方式 ( 电子邮件地址 ) 及制作时间等信息,（8）预览、查看HTML代码 在网页制作的过程中，随时可以通过单击窗口底部的“常规”、“HTML”和“预览”标签，在网页编辑、HTML代码编辑和网页预览等三种方式之间自由切换。在预览方式下，我们可以看到正在制作的“网页在浏览器中的显示效果”。在HTML代码方式下，我们可以看到与正在制作的“网页内容相对应的HTML代码”，如果懂得一些HTML语言的话，就可以直接对HTML代码进行编辑修改了。,使用front
