第七章 网页制作和网站管理工具,（FrontPage 2003）,第7章 网页制作和网站管理工具(FrontPage 2003),7.1 网页编程语言HTML概述 7.2 FrontPage 2003的基本知识 7.3 网站的基本操作 7.4 网页的基本知识 7.5 超链接 7.6 表单 7.7 框架网页 7.8 动态网页 7.9 网站的发布,7.1.1 HTML简介 7.1.2 HTML语标记符,7.1 网页编程语言HTML概述,7.1.1 HTML简介,HTML是Hyper Text Markup Language的缩写，中文意思是“超文本标记语言”，它是全球广域网上描述网页内容和外观的标准。所有的网页都是采用HTML格式的文件，因此，网页的本质就是HTML，HTML是网页编程的基础。一个网页就是一个HTML文件，也称为Web页。HTML文件是一个纯文本或ASCII码文件，可以在任何具有文本编辑功能的字处理软件中进行编辑，文件的扩展名必须是.htm或.html。,7.1.2 HTML语标记符,HTML是一种语言，它由基本字符和修饰这些字符的各种标记符组成。这些标记符是一些嵌入式命令，其大小写形式是等价的，提供了网页的结构、外观和内容等信息。Web 浏览器利用这些信息来决定如何显示网页。在HTML中，所有的标记符都用尖括号括起来，大多数标记符都是成对出现的，分别表示开始和结束。开始标记符和对应的结束标记符定义了该标记符起作用的范围，两者的区别在于结束标记符在标记符号前有一个左斜杠。例如HTML 代码： 欢迎！ ，表示显示网页时对“欢迎！”使用标题 1 样式， 表示标题 1 样式的结束。,7.1.2 HTML语标记符,要查看网页的HTML代码，可以选择“查看”|“源文件”命令。下面是一个网页的代码表示形式，通过该网页可以使读者了解HTML中的各种标记符及其功能。代码可以在文本编辑器如“记事本”等中输入，示例如下。, 青岛农业大学 学校简介 一、校园平面示意图 校情总览： 学校简介 现任领导 历任领导 校园风光 如有问题，请联系我 ,图7.1 学校简介网页,HTML中常用的标记符及功能如下所述： (1) ：HTML文件的开始和结束标记符。当浏览器遇到标记符时，开始按照HTML的标准解释其后的文本，直到遇到结束标记符为止。 (2) ：Web页面的头部标记符。其中的内容一般是这个文件的说明。 (3) ：Web页面的标题标记符。其中的内容是Web页面的标题，显示在浏览器的标题栏中。 (4) ：Web页面的主体标记符。其中的内容是Web页面的主体，显示在浏览器的主窗口中。 (5) ：居中标记符。将其中的内容居中显示。在默认情况下，所有的文字与图形靠左对齐。 (6) ：标题等级标记符。定义了6个标题的级别，其中x的值在16之间。不同的等级的字号不同。例如：定义了一个一级标题。 (7) ：分段标记符。将其中的文本自动分成一段，且在各个段落之间有一个空行。,(8) ：行中断标记符。相当于文本编辑程序中的回车。 (9) ：横线标记符。在Web页面中加入一条横线。 (10) ：图片标记符。在Web页面中加入图片，其中“图片文件名”为具体的图片文件名。 (11) ：黑体字标记符。将其中的文本显示为黑体字。 (12) ：斜体字标记符。将其中的文本显示为斜体字。 (13) ：超链接标记符。常把写成：，其中“超链接的文件名”为具体的HTML文件。HREF相当于一个指针，指向要链接的文件。标记符之间的内容在Web页面显示为蓝色加下划线的超链接标记。 (14) ：不带序号的列表标记符。其中用标记列表的各项。 (15) ：带序号的列表标记符。其中用标记列表的各项。 此外，HTML语言还有许多标记符，读者可以参考有关HTML的书籍或者在网上查询。,7.2 FrontPage 2003的基本知识,7.2.1 FrontPage 2003的安装 7.2.2 FrontPage 2003的主要功能 7.2.3 FrontPage 2003的启动 7.2.4 FrontPage 2003的界面构成 7.2.5 FrontPage 2003的帮助系统,7.2.1 FrontPage 2003的安装,FrontPage 2003的硬件和软件配置，同Word 2003的要求一致。在安装过程中，需要用户在Office 2003的初始安装窗口中，选中“FrontPage 2003”按钮，然后根据提示和需要完成其他步骤。,7.2.2 FrontPage 2003的主要功能,作为一个网页编辑器，FrontPage 2003完全实现了“所见即所得”的网页制作方式，简单易学，功能强大，用户不需要懂网页编程语言，就能制作出具有专业效果的网页。当然，用户也可以切换到“设计”或“代码”视图，用网页编程语言直接描述网页，然后切换到“预览”视图就能看到效果。Office FrontPage 2003 具有经过改进的设计和开发环境，可以帮助用户轻松实现网站设计与开发。此外，进一步增强了发布网站和维护网站的功能。,7.2.3 FrontPage 2003的启动,启动FrontPage 2003可以通过以下两种方法。 (1) 选择“开始”|“程序”| Microsoft Office | Microsoft Office FrontPage 2003”。 (2) 在桌面创建Microsoft Office FrontPage 2003的快捷方式，通过双击该快捷方式启动Microsoft Office FrontPage 2003。,7.2.4 FrontPage 2003的界面构成,FrontPage 2003启动成功后，屏幕出现图7.2所示的窗口界面。该窗口由标题栏、菜单栏、工具栏、视图栏、编辑区、状态栏、任务窗格等组成。,1) 标题栏 2) 菜单栏 3) 工具栏 4) 视图栏 （1）网页视图 （2）文件夹视图 （3）远程网站视图 （4）报表视图 （5）导航视图 （6）超链接视图 （7）任务视图 5) 编辑区 6) 任务窗格 7) 状态栏,7.2.5 FrontPage 2003的帮助系统,FrontPage 2003提供了内容丰富的帮助系统，介绍了有关网页制作、网站的管理与发布等知识，可以解决用户在网页制作过程中遇到的一些问题。 选择“帮助”|“Microsoft Office FrontPage帮助”命令，在主窗口的右侧出现FrontPage帮助窗格。 在帮助窗格中，可以通过单击“目录”按钮浏览帮助信息，或者通过搜索关键字获取帮助信息。用户还可以使用在线帮助或选择开发资源网站寻求帮助。,7.3 网站的基本操作,7.3.1 创建新网站 7.3.2 打开已有的网站 7.3.3 删除网站 7.3.4 关闭网站,7.3.1 创建新网站,1. 利用模板创建网站 利用模板可以快速建立网站。FrontPage 2003提供了如下3种模板。 个人网站模板 客户支持网站 项目网站,2. 利用向导创建网站,向导是FrontPage 2003内建的引导程序。用户根据向导的指示选择相应的功能来建立网页。FrontPage 2003提供了导入网站向导、公司展示网站向导、数据库界面向导和讨论网站向导等。导入网站向导引导用户导入现成的网站，重新编辑或成为当前网站的一部分；公司展示网站向导创建一个有关公司的产品目录、联系信息等的Web网站，数据库界面向导可以创建用来添加、编辑或删除数据库记录的网页，还可以指定密码来帮助保护这些网页；讨论网站向导则用来创建一个讨论相关专题的Web网站。,3. 创建只有一个网页的网站,(1) 选择“文件”、“新建”命令，在任务窗格的“新建”窗格中选择“新建网站”选项中的一项，此时弹出“网站模板”对话框，如图7.3所示，选择“只有一个网页的网站”选项。 (2) 在“指定新网站的位置”列表框中输入新网站的存储路径，关于该网站的资源都要放在该目录下，以便进行管理。 (3) 单击“确定”按钮。 网站创建完毕后，系统会自动建立两个空白的子文件夹(_private文件夹，用来存放私有文件；images文件夹，用来存放图像文件)和一个空白的网站首页文件(文件名为index.htm)。,图7.3 “网站模板”对话框,4. 创建空白网站,(1) 在“网站模板”对话框中，选择“空白网站”选项。 (2) 在“指定新网站的位置”列表框中输入新网站的存储路径。 (3) 单击“确定”按钮。 新创建的网站仅有两个空白的子文件夹(_private和images)，没有任何网页，如图7.4所示。,7.3.2 打开已有的网站,打开“文件”菜单，选择“打开网站”命令，弹出“打开网站”对话框。 (1) 若要打开在本地计算机上的网站，则在“文件夹名”框中，选择包含网站的文件夹的路径，选定网页，然后单击“打开”按钮。另外，可以使用“查找范围”框来浏览任何包含网站的文件夹。在网站列表中，选择所要的网站，然后单击“打开”按钮。 (2) 若要打开网络中计算机上的网站，使用“查找范围”框浏览包含要打开的网站的网络磁盘驱动器和文件夹。在网站列表中，选择所要的网站，然后单击“打开”按钮。(3) 若要打开服务器上的网站，在“网站名称”框中输入网站的URL，然后单击“打开”按钮。例如要打开称为“Northwind”的网站，而该网站位于名称为“My Server”的服务器上，则输入“http:/My Server/Northwind”。 (4) 若要打开最近访问过的子网站，选择“文件”|“最近访问过的网站”命令，然后单击所要的网站。,图7.4 “打开网站”对话框,7.3.3 删除网站,(1) 打开“文件夹列表”框。 (2) 选中要删除的网站，单击鼠标右键，再选择快捷菜单上的“删除”命令，或者选择“编辑”|“删除”命令，弹出的对话框如图7.5所示。 (3) 在“确认删除”对话框中，单击“确定”按钮。如果不想删除网站下的文件，需选中“只删除此网站中的FrontPage 信息，保留所有的其他文件和文件夹”单选按钮。 图7.5 “确认删除”对话框,图7.5 “确认删除”对话框,7.3.4 关闭网站,要关闭当前编辑的网站，选择“文件”|“关闭”命令即可。另外，打开其他网站，也会关闭当前网站。,7.4 网页制作的基本知识,7.4.1 网页的基本操作 7.4.2 网页文本 7.4.3 边框和底纹 7.4.4 列表 7.4.5 表格 7.4.6 图片,7.4.1 网页的基本操作,1. 创建网页 使用模板创建网页的步骤如下所述： 选择“文件”|“新建”命令，在“新建”任务窗格中的“新建网页”下，单击“空白网页”选项，将创建一个空白网页；如果从已创建的动态网页模板中创建网页，单击“根据现有网页”选项，定位并单击模板，然后单击“创建”按钮；如果要从其他模板中创建网页，单击“其他网页模板”，在弹出的“网页模板”对话框中选择所需模板类型的选项卡，如图7.6所示，然后单击某个模板，系统就会自动生成一个新的网页。在新网页中，可以根据需要添加或删除某些内容。 此外，单击“常用”工具栏上的“新建网页”按钮，将创建一个空白网页，或从该按钮右侧的下拉箭头选择“网页”命令，然后在“网页模板”对话框中选择相关选项及模板。,图7.6 “网页模板”对话框,(1) 选择“文件”|“打开”命令，或者单击“常用”工具栏上的“打开”按钮，弹出“打开文件”对话框如图7.7所示。 (2) 在“查找范围”下拉列表框中选择文件路径，在文件列表区中将列出该路径下的所有网页文件。 (3) 选中要打开的网页文件，单击“打开”按钮，或直接双击该文件名，可以打开网页文件。 如果要打开当前网站中的网页，可以在“文件夹”视图中双击该网页的图标或文件名来打开网页。,2. 打开网页,图7.7 “打开文件”对话框,网页创建之后，可以设置网页的属性，如标题、背景、边距等。 (1) 打开要设置其属性的网页。 (2) 选择“文件”|“属性”命令，打开“网页属性”