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,金手指考试网 http:/ 2016年金手指驾驶员考试科目一 科目四 元贝驾考网 http:/ 科目一科目四仿真考试题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代码在网页制
17、作的过程中，随时可以通过单击窗口底部的“常规”、“HTML”和“预览”标签，在网页编辑、HTML代码编辑和网页预览等三种方式之间自由切换。在预览方式下，我们可以看到正在制作的“网页在浏览器中的显示效果”。在HTML代码方式下，我们可以看到与正在制作的“网页内容相对应的HTML代码”，如果懂得一些HTML语言的话，就可以直接对HTML代码进行编辑修改了。,使用frontpage2003一个网站主页的文件名一般是 index.htm 或 index.html。（1）在 FrontPage中，新建一个网页并把文件名改为网站首页的默认文件名index.htm执行菜单命令项“文件”“另存为”命令，在“另
18、存为”对话框中，选定或创建存放网站的文件夹，如“北京故宫”，将文件名更改为“ index.htm ”，将网页标题更改为“世界文化遗产北京故宫”。保存后，该网页存放在“北京故宫”文件夹中。 单击菜单栏里的“文件”-“属性”,打开的“网页属性”对话框中可以更改网页标题。,（2）输入网站的名称，并对网站名称进行格式设置在网页的第一行输入网站名称“世界文化遗产北京故宫”，然后，将该名称“居中”、将该段文字的字体、字号和颜色设定为“黑体”、“字号 7( 36 磅 值) ”、“红色”等。 （3）在网站名称下方，插入一个表格用来定位网页构件执行菜单命令“表格”“插入”“表格”命令。在“插入表格”对话框中，对
19、表格的属性进行设置，作为定位用的表格，其边框粗细必须设为“0”，而单元格间距和边距则可以根据需要进行设置，这里将单元格边距和单元格间距都设置为“5”。行数和列数根据需要设置为5行2列。完成这些参数设置后，单击“确定”按钮，即可完成表格的插入。,表格插入后，在网站名称下方出现了一个5行2列的表格，我们可以发现，这个表格的边框线是虚线，这表示边框线的宽度是“0”，以后浏览时将不会出现这些表格线。每个单元格之间应有合适的间距，这样里面的文字就不会挤在一起，看起来也美观一些。 （4）合并单元格 由于我们准备在表格的右半边插入一幅北京故宫的照片，这幅照片占用右侧的五个单元格，这就需要将这五个单元格合并成
20、一个单元格。合作的办法是先选中这五个单元格，再执行菜单“表格”“合并单元格”命令，就能将被选中的五个单元格合并为一个单元格。,（5）在表格的单元格中输入文字我们准备在表格左侧的五个单元格中输入另外五个网页的标题，以后可以在这五个标题上设置超链接。在五个单元格中分别输入“北京故宫简介”、“太和殿”、“乾清宫”、“金水桥”、“文物宝库”，并且进行格式的设置。 （6）在表格的单元格中插入图像光标置于合并后的单元格中，执行菜单“插入”“图片”“来自文件”命令，在“选择文件”对话框中，选定存放图像的文件夹，从中选择一张图片，将这张图片插入到光标所在的单元格中。如果对插入图片的尺寸感到不合适的话，可以选中
21、该图片，执行菜单“格式”“图片”命令，在“图片属性”对话框中，选定“大小”选项卡，然后改变长和宽的数值即可，也可以直接拖动图片的八个控制点，以改变图片的大小尺寸,（7）输入版权信息一般应该在网站主页的底部，给出网站的作者、联络方式 (电子邮件地址)及制作时间等信息。 （8）预览、查看 HTML 代码在网页制作的过程中，随时可以通过单击窗口底部的“设计”、“代码”和“预览”标签，在网页编辑、HTML代码编辑和网页预览等三种方式之间自由切换。在预览方式下，我们可以看到正在制作的“网页在浏览器中的显示效果”。在HTML代码方式下，我们可以看到与正在制作的“网页内容相对应的HTML代码”，如果懂得一些
22、HTML语言的话，就可以直接对HTML代码进行编辑修改了。 4、结果呈现：能够设计制作网站的主页，其中包含文字、图片等资料,一、链接新建网页的步骤一个网站中的所有网页，是通过超链接的形式互相连接起来的。可以用超链接连接同一个网站的网页，也可以从一个网页链接到其他网站的网页。由于我们正在制作的网站是一个新建网站，网站中没有现成的网页，需要新建一系列网页。所以，必须在网站主页中的一个图片或一段文字等网页元素上设置超链接，并链接到那些新建的网页上，才能访问网站的其他网页链接新建网页的步骤是：,二、链接新建网页的方法 (1)在一个正在编辑的网页中，选定一段文字或一张图片，如选定“太和殿”三字。执行菜单
23、“插入”“超链接”命令，出现“创建超链接”对话框。 (2)新建网页。如果该超链接指向一个已经存在的网页，则可以直接在 URL 文本框中输入作为链接对象的网页的地址。 如果超链接的对象本身还未创建，就需要新建一个网页，单击“新建网页的新建按钮”，就可以建立一个新的网页作为超链接的对象。 (3)选择新建网页的类型。 FrontPage 中提供了许多类型的网页模板供新建网页时引用，由于我们制作是一个比较简单的网页，所以在“新建”对话框“常规”选项卡中，选择“普通网页” ( 即空白 Web 页 ) ，然后单击“确定”按钮，新建一个空白的网页。,(4)保存新建的网页。 FrontPage 中新建的网页，
24、都有一个诸如“ New_Page_1.htm ”的默认文件名，默认的文件名由于太通用不利于实际操作，一般应该换一个容易记忆便于理解的文件名。我们可以在新建一个网页后，马上另外取一个文件名，如“ taihedian.htm ” ( 即太和殿的汉语拼音 ) 另存这个新建的网页，同时将网页标题也设置成与新建网页内容一致的文字，如“太和殿”。 (5) 编辑网页。在新建的网页中，分别输入标题、网页的文字内容，并且根据需要插入图片。其中，在输入文字时，按“回车键”表示另起一段。这时，段与段之间的间距比较大；若按“ Shift ” + “回车键”，则段与段的间距较小。 (6) 图文混排。用表格的方式可以将图
25、片和文字编排得比较整齐，但无法实现图文混排的效果。在 FrontPage 中可以使用“定位”的方法，实现比较简单的图文混排。鼠标右键单击需要图文混排的图片，执行菜单中“图片属性”选项。在出现的“图片属性”对话框中，单击“样式”按钮。,(7) 在“修改样式”对话框中，单击“格式”按钮，并从“格式”按钮的下拉列表中，选取“定位”选项。(8) 图片定位。在“定位”对话框中，选择合适的“环绕样式”和“定位样式”，在“环绕样式”中，必须选择“左”或“右”否则无法实现图文混排 ) 。单击“确定”后，就会发现网页的文字环绕在图片旁边，实现了图文混排。 ()重复以上操作，新建另外几个网页并在首页中设置相应的超
26、链接。,使用frontpage2003 (1) 链接到新建网页。在一个正在编辑的网页中，选定一段文字或一张图片，如选定“太和殿”三字。执行菜单“插入”“超链接”命令，出现“创建超链接”对话框。 (2) 新建网页。如果超链接的对象本身还未创建，就需要新建一个网页，单击“新建网页的新建按钮”，就可以建立一个新的网页作为超链接的对象。如果该超链接指向一个已经存在的网页，则可以直接在 URL 文本框中输入作为链接对象的网页的地址。 (3) 选择新建网页的类型。 FrontPage 中提供了许多类型的网页模板供新建网页时引用，由于我们制作是一个比较简单的网页，所以在“新建”对话框“常规”选项卡中，选择“
27、普通网页” ( 即空白 Web 页 ) ，然后单击“确定”按钮，新建一个空白的网页。,(4) 保存新建的网页。 FrontPage 中新建的网页，都有一个诸如“ New_Page_1.htm ”的默认文件名，默认的文件名由于太通用不利于实际操作，一般应该换一个容易记忆便于理解的文件名。我们可以在新建一个网页后，马上另外取一个文件名，如“ taihedian.htm ” ( 即太和殿的汉语拼音 ) 另存这个新建的网页，同时将网页标题也设置成与新建网页内容一致的文字，如“太和殿”。 (5) 编辑网页。在新建的网页中，分别输入标题、网页的文字内容，并且根据需要插入图片。其中，在输入文字时，按“回车键
28、”表示另起一段。这时，段与段之间的间距比较大；若按“ Shift ” + “回车键”，则段与段的间距较小。 (6) 图文混排。用表格的方式可以将图片和文字编排得比较整齐，但无法实现图文混排的效果。在 FrontPage 中可以使用“定位”的方法，实现比较简单的图文混排。鼠标右键单击需要图文混排的图片，执行菜单中“图片属性”选项。在出现的“图片属性”对话框中，单击“样式”按钮。,(7) 在“修改样式”对话框中，单击“格式”按钮，并从“格式”按钮的下拉列表中，选取“定位”选项。 (8) 图片定位。在“定位”对话框中，选择合适的“环绕样式”和“定位样式”，在“环绕样式”中，必须选择“左”或“右”否则
29、无法实现图文混排 ) 。单击“确定”后，就会发现网页的文字环绕在图片旁边，实现了图文混排。 (9) 重复以上操作，新建另外几个网页并在首页中设置相应的超链接。,一、网站调试方法 在制作网页时我们应该养成一个好习惯，与制作本网站有关的所有素材，以及制作好的所有网页都要存放在一个网站文件夹下。这样才能确保网站内的网页内容完整无缺，当然，根据素材的不同，在这个文件夹下还可以设立相应的子文件夹。 是的，不过，这里的错误是因为在制作网页过程中使用了绝对地址导致的。链接路径有绝对路径和相对路径两种。相对路径是由当前文件所在的位置出发，到达目的地址的路径，我们之前学的链接方法是使用相对路径，它不会因为文件夹的位置改变而影响链接；而绝对路径是从本地电脑出发寻找目的地址的路径，一旦换了电脑和盘符，就容易出错。,
