第08章 网页制作初步

第八章 网页制作初步,本章的主要内容,1、FrontPage 2000的概述2、建设网站3、网页的修饰4、网页中的文字5、网页中的表格6、网页中的图片7、插入其它各种对象8、创建超链接9、网页的发布,本章的主要目标,本章节通过一个简单的个人网站实例介绍了关于网站制作的基本方法，通过对本章节的学习，可以使用户在短时间内掌握组织、编辑网页的方法，并了解将编辑好的网页发布到指定的站点上的方法。,8.1 FrontPage 2000的概述,本节主要内容 本节概述介绍FrontPage 2000的基本功能，使用户在使用FrontPage 2000设计网页之前，对FrontPage 2000有一个基本的认识，了解用它能实现哪些方面的功能。,8.1 FrontPage 2000的概述,1、介绍FrontPage 2000的启动方法从【开始】菜单中启动FrontPage 2000 利用右键快捷菜单启动FrontPage 20002、FrontPage 2000的主界面 FrontPage 2000是一个典型的Windows窗口，与Office中其他产品的界面有着一定的相似性。包括标题栏、菜单栏、工具栏、视图栏、编辑区、状态栏等几个窗口元素组成。 详细介绍每一元素的功能特点。,8.1 FrontPage 2000的概述,3、FrontPage 2000的视图网页视图文件夹视图报表视图导航视图超链接视图任务视图 介绍不同的视图模式的功能，值得注意的是，网页视图是用户使用最多的视图方式，对网页的编辑操作大部分在该视图下进行，网页视图有3种编辑模式（普通模式、HTML模式、预览模式）。,8.2 建设网站,本节主要内容： 本节通过一个实例介绍如何建立网站的整体结构。,8.2 建设网站,1、通过FrontPage 2000向导和模板，建立各种类型的站点。 FrontPage 2000中常用的向导和模板包括：只有一个网页的站点导入站点向导个人站点公司展示向导客户支持站点空站点讨论站点向导项目站点分别介绍不同模版能够建立的不同站点类型。,8.2 建设网站,2、通过一个实例，建立自己风格站点结构。,8.2 建设网站,8.2 建设网站,8.3 网页的修饰,本节主要内容共享边框和导航栏的设置 应用主题,8.3 网页的修饰,共享边框和导航栏的设置 FrontPage 2000提供了一种快捷方便的方法，可以使我们的网站保持一致的外观，那就是使用共享边框。这些边框可以在网页上保留特定的区域，作为所有网站中网页的共享区，用户可以在这些区域放置导航栏、特定的商标或图片等，让网页具有统一的风格。而导航条则是FrontPage中一组特定格式的链接，它是FrontPage 2000提供的站内导航的很好的工具。,8.3 网页的修饰,下面我们介绍一下在上面建立的站点中设置共享边框和添加导航栏的方法。,8.3 网页的修饰,在网页视图中打开主页，单击鼠标右键，或者选择【格式】|【共享边框】命令,8.3 网页的修饰,在共享边框对话框中，选择【所有网页】单选按钮，并选择我们想使用的边框，选择【上】、【左】、【包含导航栏】复选框，然后点击【确定】按钮。,8.3 网页的修饰,设置好共享边框以后，网页的编辑区中就被虚线分隔 成了三部分,8.3 网页的修饰,在网页共享边框中的编辑此导航栏属性 文字上点击鼠标右键，会弹出快捷菜单， 在快捷菜单中选择 【导航栏属性】命令， 打开导航栏属性 对话框,8.3 网页的修饰,设置了共享边框和导航栏的网页,8.3 网页的修饰,创建共享边框，不仅可以使网站保持一致的外观，边框中导航栏按钮还可以简化网站内的链接工作，使得整个站点的导航结构和网页形式保持统一。但制作出来的网页仍然比较单一，FrontPage 2000的主题功能提供了很多预先设计好的元素和配色方案，使用主题可以快捷的建立一个风格统一、富有吸引力的站点。,8.3 网页的修饰,在网页视图下打开要应用主题的网页，选择【格式】|【主题】命令，弹出【主题】对话框。,8.3 网页的修饰,应用了主题之后，网页中自动添加了背景、按钮等元素,8.3 网页的修饰,虽然FrontPage 2000预先定义了多种主题，但使用时仍然不能达到所有用户的满意。用户可以根据自己的需要对主题中的元素进行修改，制作一个独特的主题，应用到自己的站点中。刚刚应用完主题的网页仍然是一片空白，除了根据主题设置的背景等外观会有所变化以外，还需要再网页中添加文本、图形、超级链接等元素。,8.4 网页中的文字,本节主要内容 本节主要介绍在网页中加入自己的文字的方法和技巧，具体包括： 文字的格式 文字的段落格式 设置项目列表,8.4 网页中的文字,在FrontPage 2000中对网页进行文本编辑与Word中的方法是非常类似的，因此，在学习了前面章节中Word的基本操作之后，就能很快地掌握 FrontPage 2000编辑文本的方法。 方法：选中要设置字体属性的文字，选择【格式】|【字体】命令，在打开的对话框中选择需要的字体，然后选择【确定】按钮，即可完成设置字体的各种属性的操作。,8.4 网页中的文字,在FrontPage 2000中，也可以设置每一段落的格式。段落格式主要包括对齐方式、文本的缩进、段间距、行间距和字间距等。设置段落格式方法和Word也是类似的： 选中要设置格式的段落，选择【格式】|【段落】命令，在弹出的【段落】对话框中可以完成需要的段落间距和缩进的设置。,8.4 网页中的文字,添加了文字，并设置了文字属性的网页,8.4 网页中的文字,虽然通过上面的内容，我们已经可以创建一个包含文本的网页，而且也可以设置各种文字的格式了，但形式上总体来说还是显得单调了一些。当遇到一个并列或者等级比较明显的内容的时候，列表就可以使网页层次清晰、条理清楚，使访问者对整个页面的内容更容易把握。 选中要建立列表的文本，然后选择【格式】|【项目符号合编号】命令，在打开的【列表属性】对话框可以进行的设置。,8.4 网页中的文字,添加了项目列表符号的网页,8.5 网页中的表格,本节主要内容 表格是网页中一种非常有用的工具，不仅可以用来存放数据，还可以组织整个网页，设计网页的特殊效果，本节主要介绍在网页中建立表格的基本方法。,8.5 网页中的表格,通过对文字处理软件的学习应该对表格应该有一定的了解，FrontPage虽然是一个网页制作软件，但也提供了强大的表格制作、编辑功能。在网页制作过程中，表格是一个频繁使用的工具，利用表格可以在网页中有效地组织大量的数据，使Web 站点信息能够整洁、有序的表现在页面上。在FrontPage 2000的表格中可以输入文字，也可以插入图片。,8.5 网页中的表格,本节我们首先学习有关表格建立和修改的方法。1、建立新的表格 选择【表格】|【插入】|【表格】命令，弹出的【插入表格】对话框里，设置表格行数、列数、对齐方式、单元格边框宽度以及单元格间距等属性，然后单击【确定】按钮即可得到相应表格。,8.5 网页中的表格,2、表格的基本操作 通过上面的方法制作出的表格还是很简单的，由于各种原因，远远满足不了用户的实际需要，因此通常在插入表格后还要进一步对表格进行设置。这时，用户可以可右击表格在弹出的快捷菜单中选择【表格属性】命令，然后在打开【表格属性】对话框中，用户可以修改表格的对齐方式、单元格填充、单元格间距、边框的大小、边框的颜色、背景色以及三维边框的颜色等属性。,8.5 网页中的表格,3、插入、删除、合并、拆分表格 建成的表格一般形状都比较规整，但不一定符合我们实际使用中的要求，可能还需要增加或删除部分行和列，或者合并和拆分单元格。,8.5 网页中的表格,4、插入表格标题 表格设置完成后，将光标放置在表格的任一单元格中，选择【表格】|【插入】|【标题】 命令，光标会自动出现在表格正上方，用户可以在此输入表格的标题。,8.5 网页中的表格,添加表格后的网页,8.6 网页中的图片,本节主要内容 本节着重介绍在网页中如何使用图片：插入本地计算机上的图片插入远程计算机上的图片插入剪贴画,8.6 网页中的图片,在前面的内容中，我们简单介绍了在FrontPage 2000中的一般操作技术和文本的处理方法，但是实际的站点中几乎没有完全由文本组成的。而且Internet吸引人的重要特点之一也是图文并茂，图像不仅可以用来表达网页的内容，同时还是网页中很好的装饰品，所以在站点开发过程中图片处理的技术也变得越来越重要。,8.6 网页中的图片,1、插入本地计算机上的图片 将光标放在想插入图片的位置，选择【插入】|【图片】|【来自文件】命令， 弹出对话框。 在对话框里 单击 按钮 选择一个 图片文件,8.6 网页中的图片,插入图片的网页,8.6 网页中的图片,2、插入远程计算机上图片 用户除了可以插入保存在本地计算机上的图片之外，还可以插入互联网上的图片文件，将光标放在想插入图片的位置，选择【插入】|【图片】|【来自文件】命令， 弹出对话框。 在对话框里 单击 按钮 找到一个 图片文件,8.6 网页中的图片,3、插入剪贴画 FrontPage 2000 还附带了一个剪贴画库。这个剪贴画库是FrontPage 2000的另一个强大功能，它提供了大量的图像文件供我们选择，在页面的编辑中恰当的使用，可以大大增强页面的表现能力。 通过【插入】|【图片】|【剪贴画】命令可以完成插入剪贴画的操作。,8.7 插入其他各种对象,本节主要内容 在 FrontPage 2000 中除了可以插入图片对象外，还可以插入多种对象以实现不同的功能，使网页的内容更丰富。本节将讲述其他几个常用的对象：水平线横幅广告字幕,8.7 插入其他各种对象,1、水平线 在网页中使用水平线是分隔章节、主题和其他元素的一种简洁的方法。在添加了水平线后仍然可以修改其属性，如宽度、高度、对齐方式和颜色等等。但需要注意的是，如果站点中使用了主题，水平线将被该主题中对应的图形所替代。,8.7 插入其他各种对象,在网页中添加水平线的方法为： 将光标定位在要添加水平线的位置，选择【插入】|【水平线】 命令，这时网页中 光标闪烁的位置会 出现一条水平线。,8.7 插入其他各种对象,2、横幅广告 现在很多的广告牌都是运动的，每隔一段时间翻转一次，从而打出不同的广告。网页中的横幅广告的显示效果和这种广告牌的效果差不多。横幅广告中可以包含一系列图形，让每一幅图形按照预先设置的时间顺序一个一个切换，直到所有图形都显示完毕，然后又从头开始重新播放。横幅广告管理器不仅可以使网页中的广告保持循环播放，而且可以控制每个广告的显示时间，设置不同图片之间的过渡效果,8.7 插入其他各种对象,设置横幅广告的具体方法为： 首先准备好要显示的图片，然后将光标移动到要添加横幅广告的地方， 然后选择【插入】| 【组件】| 【横幅广告管理器】 命令，弹出对话框。,8.7 插入其他各种对象,3、字幕 所谓“字幕”是指一些包含了运动文本的文本框。在网页中创建字幕可以在浏览器中显示一条水平滚动的文本信息。,8.7 插入其他各种对象,在网页中添加字幕的具体操作步骤为： 在网页视图里将鼠标指向要创建字幕的位置，选择【插入】|【组件】 | 【字幕】命令，弹出对话框。,8.8 创建超连接,本节主要内容： 超连接是网页中最活波、最有吸引力的一种元素，也是FrontPage中非常重要的概念。利用超链接技术可以轻松地跳到其他网页或站点，而不论这个网页或站点是在本地还是在Internet上的其他计算机中，从而可以使读者可以方便的浏览相关的信息。网页中的超连接有很多种，本节主要介绍以下两种常用的超连接：到网页的超链接到电子邮件的超链接,8.8 创建超连接,1、到网页的超链接 在网页中选中要建立超链接的文本或图片，选择【插入】|【超链接】 命令，在弹出的 【编辑超链接】对话 框中选择要链接到 的页面。,8.8 创建超连接,2、到电子邮件的超链接 网页中的超链接除了可以链接到一个页面之外，还可以链接到一个邮件地址。这样访问者可以使用它来给站点的管理者发送电子邮件。,8.8 创建超连接,其设置方法为： 选中网页中要进行电子邮件链接的内容，点击鼠标右键，出现一个 快捷菜单，在快捷菜 单中选择【超链接】 命令，弹出的 【编辑超链接】 对话框。,8.8 创建超连接,在【编辑超链接】对话框中选择 按