第7章网页制作基础.ppt

第第7章章 网页制作基础网页制作基础v Internet互联网是一个通过网络设备把世界各国的计算机相互连接在一起的计算机网络，在Internet上，人们可以利用任何两台支持TCP/IP网络协议的计算机进行通信、交换信息。其中，World Wide Web又是人们从因特网上获取信息的最重要手段之一。World Wide Web就是大家常说的网页，在这一章里，我们主要学习如何制作网页及存放网页的网站以及如何让网页发布到互联网上供别人浏览。 目录v7.1 网页与网站网页与网站v7.2 HTML简介简介v7.2.1 HTML文档的结构文档的结构v7.2.2 HTML控制标志控制标志v7.2.3 超链接超链接v7.2.4 表格表格v7.3 FrontPage2003网页制作软件简介网页制作软件简介v7.3.1 FrontPage2003的启动、退出和界的启动、退出和界面面v7.3.2 FrontPage2003的基本视的基本视v7.4 使用使用FrontPage2003创建网站和网页创建网站和网页v7.4.1 规划站点和创建站点规划站点和创建站点v7.4.2 创建网页创建网页v7.4.3 网站和网页的基本操作网站和网页的基本操作v7.4.4 网页的基本编辑网页的基本编辑v7.4.5超链接的使用超链接的使用v7.4.6网页属性设置网页属性设置v7.4.7表格在网页中的应用表格在网页中的应用v7.5 框架网页的制作框架网页的制作v7.5.1创建框架网页创建框架网页v7.5.2 编辑框架网页属性编辑框架网页属性v7.5.3在框架中使用超级链接在框架中使用超级链接v7.6 站点的发布与维护站点的发布与维护v7.6.1 申请建立一个网站申请建立一个网站v7.6.2 发布网站发布网站7.1 网页与网站网页与网站v随着Internet的飞速发展，通过网页进行交流,已成为人们生活中不可缺少的部分。本章主要介绍使用FrontPage2003进行网页制作。通过本章学习，你也可以制作自己的个人主页，并通过自己的主页与他人进行作品的共享以及沟通。 v1. 网页与网站 网站:是所有的总称 网页:是指网站里的每个页面 站点:就是指网站的域名 主页:指网站的首页 7.2 HTML简介简介v7.2.1 HTML文档的结构文档的结构v7.2.2 HTML控制标志控制标志v7.2.3 超链接超链接v7.2.4 表格表格v HTML英语意思是：Hypertext Marked Language，即超文本标记语言, 是一种用来制作Web网页的基本语言。v 设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息 可 能 存 放 在 网 络 的 另 一 台 电 脑 中 。v HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内 容 。 7.2.1 HTML文档的结构文档的结构vv v 页头标题 vvvvvvv v v 一个简单的HTML示例 v v v v欢迎光临我的主页 v v v v这是我第一次做主页 v v v vv(1)标记指定文档初始信息,如标题、脚本。它是文件的一些常规信息，不会作为文档内容去显示。任何Html文档的页头部分都应位于Web页的主信息之前。v(2) 标记包含了网页主体中任何可见的内容，如文字、图形、表格、超级链结等。v(3) HTML文档的基本成分是以标记形式出现的，标记的一般形式为：v规定的项目规定的项目7.2.2 HTML控制标志 v1. HTML文档内的标题，用标记。其中n是1-6的整数，指定几级标题标记。v2. 文字格式标记，基本字符格式标记有：设置黑体、设置斜体、设置下划线等。v标记与关键字Face、Size、Color组合，可指定字体、字号和字的颜色。v3. 段落格式标记v为段落格式标记，产生回车，插入一条水平线。v4. 注释行：v例：vvv我的网站vvvv我的网上之家vvvWelcome vto my homepage! vvv7.2.3 超链接超链接v超链接说明文字v可用格式在页面内嵌入图形代替超链接文字。vv v含超链接文档vvv浏览163网站v夏天的故事v图形超链接vvv7.2.4 表格表格v在网页中加入表格，可使用、等标记来实现。其中用来定义整个表格；定义表格中的每一行(结束标记可有可无) 用来定义表格中一行中的每一个格子(结束标记可有可无) 用来定义设置表格头:通常是黑体居中文字(结束标记可有可无) ,用来定义表格标题。vvv表格vvv v 时间语言表v v 时间v 语言v v v 1996v HTML4.0v v v 2003v XMLv v v v7.2.5 表单（窗口）表单（窗口）vvvvvv用户:v密码:vvvfunction check()vvvar uname=document.getElementById(uname).value;vvar pwd=document.getElementById(pwd).value;vif(uname+pwd=)vv alert(用户名和密码不能为空);vvelse if(uname=)vv alert(用户名不能为空);vvelse if(pwd=)vv alert(密码不能为空);vvelsevv alert(帐户尚未开通);vvvvv 用户名和密码都为空显示：密码为空显示：用户名为空显示：7.3 FrontPage2003网页制作软件网页制作软件v7.3.1 FrontPage2003的启动、退出和界面的启动、退出和界面v7.3.2 FrontPage2003的基本视图的基本视图7.3.1 FrontPage2003的启动、退出的启动、退出和界面和界面菜单栏菜单栏常 用 工 具常 用 工 具栏栏格 式 工 具格 式 工 具栏栏网页编辑区网页编辑区域域光标光标任 务 窗 格任 务 窗 格区区状态状态栏栏网 页 编 辑 方 式网 页 编 辑 方 式状态状态标题标题栏栏vFrontPage2003是Office2003组件之一，运行与启动Office其他软件相同。 v在FrontPage2003中，菜单栏和工具栏以及任务窗格区域的操作方法基本和Office套件中的Word和Excel一样，不同的是菜单栏和工具栏以及任务窗格的内容有所不同。 7.3.2 FrontPage2003的基本视图的基本视图vFrontPage2003为管理和维护网站、创建网页提供了丰富的工作视图，从“视图”菜单中可以选择。常见的视图有“网页”、“文件夹”、“导航”、“超链接”、“任务”。7.4 使用使用FrontPage2003创建网站和创建网站和网页网页v7.4.1 规划站点和创建站点规划站点和创建站点v7.4.2 创建网页创建网页v7.4.3 网站和网页的基本操作网站和网页的基本操作v7.4.4 网页的基本编辑网页的基本编辑v7.4.5超链接的使用超链接的使用v7.4.6网页属性设置网页属性设置v7.4.7表格在网页中的应用表格在网页中的应用7.4.1 规划站点和创建站点规划站点和创建站点v1规划站点v无论是设计个人站点，还是设计商业站点，都需要对其进行整体规划。规划站点包括确定站点主题、规划站点结构、规划网页布局等。v例如要设计一个“个人就业网站”，可以设计5个板块，分别是：学习经历、求职简历、求职须知、课程成绩、作品图片。学生个人求职网站结构图如图所示。 图7-5 个人求职网站规划v2创建站点v创建站点主要有两种方法，一种是使用FrontPage 2003模板和向导创建；另一种是创建空白网站。除此之外，用户还可以导入已创建好的站点。v（1）使用向导和模板创建网站v新建网页v选择“文件|新建”命令，打开“新建”任务窗格。新建网页新建网页新建网站新建网站v单击“新建网站”选区中的“由一个网页组成的网站”超链接，弹出如图所示的“网站模板”对话框。图7-7 新建网站模板选择v在该对话框中选择所需的网站模板或者是网站向导，在“指定新网站的位置”下拉列表框中输入网站的保存地址。设置完成后，如果是选择的是使用模板创建网站，单击“确定”按钮后，即可创建网站，并将该网站保存在指定的位置。选择“只有一个网页的网站”创建后的网站如图。 视图区域Private文件夹Images文件夹v在“文件夹列表”框中有一个网页文件“index.htm”，即是本站点的主页，这个新建的站点主页中没有任何内容。在“文件夹列表”里除了主页之外，还有文件夹。新建站点时，FrontPage2003都会在站点所在位置下新建两个文件夹，一个是“images”，另一个是“_private”。编辑站点时可以在“images”文件夹里放置站点用到的图片。“_private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，可以把一些不想让浏览者看到的网页文件放在这个文件夹里。 v如果选择的是使用向导创建网站，则会弹出相应的向导对话框，按照对话框的提示选择或者输入相应的内容即可。向导对话框如图：v用空站点建网站要从头做起，若使用模板或向导来建则可提高效率。使用系统提供的个人站点模板，个人站点模板已经规划好了站点的目录和建立了相关的页面只要把系统提供网页的相关文字等内容替换为设计者的内容，就可以方便的建立个人站点了。 v（2）导入网站v如果想要导入已创建的网站，其具体操作步骤如下：选择“文件|导入”命令，弹出“导入”对话框。选择导入网站的来源之后，选择相应的文件、文件夹或者输入导入网站的网址。按照提示即可以完成网站的导入。7.4.2 创建网页创建网页v新建网页通常有以下两种方法：v新建空白网页v新建空白网页的具体操作步骤如下：v（1）选择“文件|新建”命令，打开“新建”任务窗格，如图7.6所示。v（2）在“新建网页”选区中单击“空白网页”超链接，即可创建一个空白网页。v2使用模板创建 使用模板可以快速地创建出具有一定格式的网页，其具体操作步骤如下：v（1）选择“文件|新建”命令，打开“新建”任务窗格。如图7-6所示。v（2）在“新建网页”选区中单击“其他网页模板”超链接，弹出如图7-11所示的“网页模板”对话框。 普通网页框架网页排列方式选择7.4.3 网站和网页的基本操作网站和网页的基本操作v1保存网站和网页v网站的保存是以网页为单位的，对于打开的正在修改的网页，保存时只需选择“文件|保存”命令，或单击工具栏中的“保存”按钮，即可将其保存在创建时的位置。v2另存网站和网页v如果要将该网站另存到其他位置，其具体操作步骤如下：v（1）选择“文件”“另存为”命令，弹出如图7.12所示的“另存为”对话框。v（2）在该对话框中选择需要保存的网页，然后在“保存位置”下拉列表中选择网站的保存位置；在“文件名”下拉列表中输入保存网页的名称。v3删除网站和网页v删除网站和网页的时候只需要选择相应的网站和网页，点击鼠标右键，在弹出的快捷菜单中选择删除，或者使用工具栏中的删除按钮即可。v4保存嵌入式内容v如果网页中有图像和多媒体文件时，为了使网页在保存后不发生改变，需要将图片、视频文件等这些嵌入式文件与网页保存在一起。以保存带图片的网页为例，其具体操作步骤如下：v选择“文件|保存”命令，或单击“常用”工具栏中的“保存”按钮，当对网页进行保存后，弹出如图7-13所示的“保存嵌入式文件”对话框。v在该对话框中选择网页的保存位置，将该图片与网页保存在同一文件夹下，然后单击“确定”按钮，即可保存该嵌入式文件。v5另存为模板v将网页另存为模板可以方便地为以后创建相关网页提供很大的方便。7.4.4 网页的基本编辑网页的基本编辑v1FrontPage2003网页文本编辑的基本操作与Office2003 的Word中对文本进行操作基本相同，也有文本的选择、文本的剪切、删除及拖放、文本的粘贴与复制、文本的查找与替换、文本中字体的设置、文本的段落设置等。网页的主体是文本，网页的广西编辑是最基础的内容，应很好掌握。v2使用图像。为了使网页内容丰富多彩，能吸引人，也可以在网页中增加图像、声音和视频。但只有扩展名为GIF、JPEG和BMP的图像文件才能成为页面的一部分。但是因为BMP图像文件太大，下载速度慢慢，因此很少在网络上使用。v因为GIF和JPEG两种图像格式节省存贮空间，所以能够提高浏览网页时的下载速度。 如果使用了其它格式的图像文件，在保存网页时FrontPage2003会提示做格式转换，它可以进行格式转换。v选择“插入|图片”菜单，可以有多种图片插入方式。其中较常用的有剪贴画、来自文件、自选图形、艺术字、来自扫描仪和照相机、flash影片等。7.4.5超链接的使用超链接的使用v在网页的制作中，超链接非常重要。超链接就是从一个网页或文件到另一个网页或文件的链接。当浏览者单击某一个超链接时，所链接的目标内容将显示在浏览器中，并根据目标的类型来打开或运行。超链接的目标可以是一幅图片、一个多媒体文件、一个程序，也可以是一个网页。v1超链接的主要形式和分类vWWW超链接，目前最常见的链接形式，它用于访问WWW服务器；vFTP超链接：用于访问FTP服务器，一般用于文件传输服务。v电子邮件超链接：用户可以通过Internet上提供的电子邮件超链接来发送电子邮件。v超链接的主要分类有：一种是内部超链接，另一种是外部超链接。内部超链接是指在已创建网站的各个网页之间建立相互链接的关系。外部超链接是指链接到网站以外的文件、网站或服务器上的链接。v2. 文本超链接的创建v创建文本超链接的具体操作步骤如下：v（1）在网页中选中需要创建超链接的文本。v（2）选择“插入|超链接”命令，或单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，出如图7-15所示的“插入超链接”对话框。选 择 目 标 类选 择 目 标 类型型从网上查找从网上查找本地文件夹本地文件夹v2. 图片超链接的创建。网页图片的超链接就是为插入网页中的图像与视频建立的到其它网页或文件的链接。图片超链接的创建与网页文本的超链接创建基本上是相同的。v 图像的单一超链接。图像的单一超链接就是为在网页中的一个图像创建唯一的一个超链接，图像的单一超链接是相对于图像多个超链接而言的（因为一幅图像可以分为几个部分进行不同的超链接）。为图像创建单一的超链接与为网页文本创建超链接完全一样，就是先选中要链接的图像，然后把图像超链接就可以了，操作与文本超链接同样。v 图像超链接热点。要使一个图像只在某个区域有超链接功能或不同区域有不同的超链接，那么这就需要使用图像的超链接热点。所谓图像超链接热点就是在图像中划分出一个连续的区域并且设置该区域具有超链接功能。图像超链接热点的创建必须使用到图像工具栏中的热点设置图标。当用鼠标单击图片时，图像工具栏就会出现在FrontPage的下方。热点类型v3链接到电子邮件。如果希望浏览者可以通过邮件的形式反馈意见。这时就需要在网页中设置一个电子信箱超链接，用于接收浏览者的意见和建议。其具体操作步骤如下： 7.4.6网页属性设置网页属性设置v网页属性的设置主要是对网页的一些常规项、背景、边距和语言的设定。在网页查看状态下，单击“文件|属性”菜单项（或是在网页页面上单击鼠标右键，选“网页属性”选项），将会出现“网页属性”对话框（图7-17）。图7-17 网页属性 图7-18 网页格式v1. 常规。在“常规”设定对话框中主要是对网页的标题、背景音乐。网页的标题就是标识该网页的一个标识符，好比人的名字一样。在“文件夹”对话框状态下可以看到该网页的文件名及标题名。背景音乐主要是设置网页的背景音乐，浏览该网页时就会伴随着这种设定的背景音乐。若用户设定了背景音乐的次数，则在浏览该网页时，它的背景音乐只演奏设定的次数。v2. 在格式对话框中可以对背景进行设定。在“背景”设定对话框中，其中是对网页的背景图像、超链接的翻转效果、背景颜色、文本颜色、超链接颜色做设定 v3. 在“高级”选项中可以对网页边距及语言进行设置。在“语言”对话框中可以设定“网页语言和”HTML编码“。7.4.7表格在网页中的应用表格在网页中的应用v表格在网页中起了非常重要的作用，它不但像通常的应用一样对数据进行列表分类显示，而且它还在网页的版面设计上发挥着独特的、重要的作用。网页表格由一些行列交织的多个单元格组成的。在这些单元格中可以插入文本和图像等等。 v表格的创建。vFrontPage提供了三种创建表格的方式：v表格的插入v手工绘制表格v转换文本为表格。v创建表格的操作基本上和Word中对表格的插入、绘制、文本转换的操作一样。v2. 表格属性的设置v（1）设置表格的标题v在FrontPage 2003中可以为表格添加一个标题，设置表格标题的具体操作步骤如下：v将光标置于表格中的任意位置。v选择“表格|插入|标题”，光标即可插入到表格的顶端，此时可以输入标题文本。v如果用户需要将标题插入到表格底部，先将光标置于标题位置处，单击鼠标右键，在弹出的快捷菜单中选择“标题属性”命令，弹出如图7-20的“标题属性”对话框。v在“位置”选项组中选中“表格底端”单选按钮。单击“确定”按钮，即可将标题插入到表格的底端，v（2）设置表格的对齐方式v表格的对齐方式有3种，左对齐、右对齐和居中对齐，用户可以根据自己的需要选择所需的对齐方式。v将光标置于表格中的任意位置。选择“表格|表格属性|表格”命令，弹出“表格属性”对话框。在“布局”选区中的“对齐方式”下拉列表中选择所需的对齐方式，如选择“居中”选项。单击“确定”按钮，表格即可居中显示。v（3）设置表格的背景v为了使表格外观看起来更美观，还可以为表格设置背景和边框。将光标置于表格中的任意位置。选择“表格|表格属性|表格”命令，弹出“表格属性”对话框。在“表格属性”对话框中，在“背景”选区中的“颜色”下拉列表中选择所需的背景颜色。单击“确定”按钮即可。如果用户要为表格设置背景图片，则选中“使用背景图片”复选框，单击“浏览”按钮，浏览选择所需的背景图片后，单击“确定”按钮即可。 图7-21 表格属性对话框v（4）设置表格的边框v选择“表格|表格属性|表格”命令，弹出“表格属性”对话框。在“表格属性”对话框中，在“边框”选区中的“粗细”微调框中设置边框的粗细值，系统默认为“1”，这里将表格边框设为“5”；在“颜色”下拉列表中选择边框的颜色。v单元格属性的设置v为了使单元格突出显示，还可以对某个单元格进行属性设置，包括单元格内容的对齐方式、单元格的边框颜色、背景等。其具体操作步骤如下：v（1）将光标置于需要设置属性的单元格中。v（2）选择“表格”“表格属性”“单元格”命令，或单击鼠标右键，在弹出的快捷菜单中选择“单元格属性”命令，弹出 “单元格属性”对话框，如图7-22所示。v（3）在“布局”选区中的“水平对齐方式”下拉列表中选择单元格的水平对齐方式。v（4）在“垂直对齐方式”下拉列表中选择单元格的垂直对齐方式。v（5）在“边框”选区中的“颜色”下拉列表中选择单元格所需的边框颜色。7.5 框架网页的制作框架网页的制作v7.5.1创建框架网页创建框架网页v7.5.2 编辑框架网页属性编辑框架网页属性v7.5.3在框架中使用超级链接在框架中使用超级链接7.5.1创建框架网页创建框架网页v1新建框架网页v 选择“文件|新建”，打开“新建”任务窗格。v 在“新建网页”选区中单击“其他网页模板”超链接，在弹出的“网页模板”对话框中打开“框架网页”选项卡，如图7-11所示。v（3）在该选项卡中选择所需的选项。（4）单击“确定”按钮，即可创建框架网页。图7-23 网页模板-框架网页对话框v2编辑框架网页v 设置初始网页v在图7-23中分别点击每个框架中的“设置初始网页“按钮，弹出“插入超链接”对话框，选择需要设置的网页即可。v 新建网页v在图7-23中单击需要新建网页的框架中的“新建网页按钮”，该框架窗口即可变成一个空白窗口，在空白框架窗口中的任意位置单击鼠标右键，在弹出的快捷菜单中选择“在新窗口中打开网页”命令，该框架窗口即可变成一个普通的空白网页。在该空白网页中编辑网页内容，编辑完成后，返回到开始新建的框架网页中，此时可以发现框架窗口中的内容已经自动更新了。v3保存框架网页。当设计好框架网页之后，就需要将这个框架网页进行保存。框架网页保存与单网页有所区别，因为框架网页可能包含多个独立的网页，对它们要分别进行保存。v 对于新建的框架网页，在“常用”工具栏上单击“保存”按钮；v 出现“另存为”对话框，对话框右边包含一个框架网页图，如果网页是新的，框架图中的其中一个框架就会处于高亮状态，高亮的框架表示你当前正在保存的网页； v 在“文件名”框中输入网页名称；v 单击“更改”按钮，设置网页的标题；v 单击“保存”按钮，该网页保存完毕后，框架图中的另一个框架处于高亮状态；v 重复步骤3至步骤5的操作；v 当保存完最后一页后，对话框中的整个框架图处于高亮状态，表示此时正在保存框架网页本身；v 输入框架网页的文件名称及标题；v 单击“保存”按钮。 7.5.2 编辑框架网页属性编辑框架网页属性v用户可以单击和拖曳框架之间的边框来更改框架的大小。v其他框架属性可以在“框架属性”对话框中进行修改，用户可选择“框架”、“框架属性”或用鼠标右键单击该框架，并从弹出式菜单中选择“框架属性”（图7-24）。这个对话框也包括与框架相关的其他选项。 v1. 名称，即为框架命名。v2. 初始网页，当框架集打开时，这个页将自动显示。v3. 框架大小，宽度和高度两个选项决定框架的大小。v4. 边距，“宽度”和“高度”框使你能够以象素为单位定义框架集的边距。v5. 在浏览器中可以调整大小，允许用户通过拖动分隔栏来调整框架窗口，根据系统设置，所有框架都可调整。v6. 显示滚动条，控制滚动条出现的方式。v7. 框架网页，可以对“框架间距”“显示边框”等框架网页属性进行设置。v8. 样式，打开“修改样式”对话框，可以指定字体类型、段落对齐方式和其他其它格式。7.5.3在框架中使用超级链接在框架中使用超级链接v1. 选中要建立超链接的文本或对象，选择超链接按钮或菜单，出现“创建超链接”对话框。v2. 选择链接对象v3. 选择目标框架，弹出目标框架对话框（图7-25）。图7-25 框架属性对话框v此处几个选项的含义为：v 网页默认值：将链接的网页显示在当前系统默认的框架位置内，也可以在选择新的框架位置后，通过选择复选框“设置为网页的默认值”作为系统的新的默认值。v 相同框架：将链接的网页显示在包含该超链接的同一个框架内。v 整 页：将框架展开为全窗口后显示链接的网页。v 新建窗口：另外打开一个浏览窗口显示链接的网页。v 父 框 架：如果是嵌套框架，选择父框架可以回到上一层框架链接的网页。7.6 站点的发布与维护站点的发布与维护v网站建立好之后，只是存在于自己的个人电脑中，并不能够在互联网上被人浏览。如果想让别人能够浏览自己建立的网站，就必须进行网站的发布。进行网站发布的一般步骤为：设计网站-申请空间-早请域名-上传网站。v7.6.2 发布网站发布网站v7.6.1 申请建立一个网站申请建立一个网站7.6.1 申请建立一个网站申请建立一个网站v1申请网站空间。v2申请网站域名。v3在搜索引擎上注册。 7.6.2 发布网站发布网站v免费空间可能会提供两种上传方式：Web上传或FTP上传。vWeb上传方式比较简单，按照注册的地址、用户名和密码登陆成功后，进入上传页面，即可上传文件。这种方式操作起来比较麻烦，只能一个一个文件上传，无法整个目录上传，一个比较大的网站由很多文件构成时，传送要花费很长时间。vFTP上传方式功能比较强大，可以将整个网站一次性上传到服务器。使用FTP方式上传，首先要安装一个好用的FTP上传工具，如LeapFtp等, 另外还需要知道上传地址、用户名和密码，比如我们在网易申请的免费空间的上传地址为：，用户名为yourname，密码为mypassword。这样就可以实现网站的上传了。具体使用办法请参见常用工具使用部分。