《网页的设计与制作》ppt课件1高中信息技术.ppt

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