网页制作教程

网页制作教程 8.1.3(网站的常规步骤 通常设计网站需要以下6个步骤。 1(总体规划 进行网站的整体规划也就是组织网站的内容和设计其结构，以确保文件内容条理清楚、结构合理。首先要确定包括几张网页，每页信息是什么，多媒体信息如何编排，每页开几个窗口，页与页之间如何建立超链接等。 2(准备素材 根据规划准备各种有关的材料，例如文本、图像等。最好将这些材料制作成文本文件和图形文件(采用gif或jpg格式)备用。 3(创建站点与制作网页 使用网页编辑软件建立站点、制作网页。 4(浏览测试 当制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试。功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所的功能。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。 5(申请空间/发布 用户创建了网页之后，通常直接将其保存在硬盘上，但只有当整个站点上传到Web服务器，浏览者才能通过Internet上访问到站点中的网页。 (1)如果制作的网页是在本单位的Intranet上发布，则只需要系统管理员划出一块空间并允许存放Web站点的文件即可。 (2)如果制作的网页需要在Internet上发布，就需要选择一个合适的ISP，并租用适当的空间存放自己的网页。 6(维护/更新为了让网站具备持久的生命力，需要进行维护和更新。 8.1.4 FrontPage 2000的工作界面 1(FrontPage 2000的操作界面 FrontPage 2000的操作界面(见图8-4)与Office 2000的其他组件类似，只是它的编辑窗口有3个，通过选择不同的选项卡可以切换到普通窗口、HTML窗口和预览窗口。 (1)默认的视图方式是普通，在其中编辑网页时基本上可以达到”所见即所得”，这使 得即使不懂HTML的用户可以轻松制作出精美的网页。 (2)如果切换到HTML视图方式，就可以看到FrontPage编辑器自动生成的HTML代 码。即使在普通视图方式下看到的空白网页，也会用一套简单的HTML代码来描述它。 在HTML视图方式下，可以直接输入HTML代码。 (3)预览视图方式实际上是用已安装的Internet Explorer浏览器来显示网页。 视图栏:有6个视 编辑窗口 图图标，选择不同 的图标，可在各种视图中切换 编辑窗口切换按钮 图8-4 FrontPage 2000的操作界面 2(FrontPage 2000的六种视图 在FrontPage 2000中可以用6种视图从不同的角度浏览网站。 (1)网页视图 单击视图栏中的“网页”图标，进入网页视图。它为站点的所有网页提供一种编辑环境，在网页视图下可以显示3种视图方式，其中普通视图是默认方式。 视图的左边是文件夹列窗格，以树状结构的形式显示文件夹的层次列表。可以单击“视图”?“文件夹列表”隐藏文件夹列表窗格。 (2)文件夹视图 单击视图栏中的“文件夹”图标，进入文件夹视图。这种视图与资源管理器很相似，左侧列出了站点的树状结果，右侧列出了当前文件夹下的文件。用户可以方便地添加新的文件夹和网页。 在内容窗格中，显示具体文件信息内容的栏目有文件,文件夹的名称、标题、大小、类型、修改日期、修改者和注释。在默认情况下，右窗格按文件名的字母顺序排列。用户只要单击右窗格相应的标题头，便可以按文件标题、大小、类型、最后修改日期、修改者以及注解排列。 (3)报表视图 单击视图栏中的“报表”图标，进入报表视图。报表视图为站点的设计者提供了一种站点总览的有效手段。对站点总览的项目包括所有文件、图片、各种超链接、组件错误、未完成的任务和未使用的主题等，可使站点的设计者对站点一目了然。 (4)导航视图 单击视图栏中的“导航”图标，进入导航视图。左边为文件夹列表。右边以树的方式显示导航的结构。 导航视图在新建Web站点时是最有用的，它不仅提供了Web站点结构的框图，而且还能自动为所有的页面创建导航栏。导航栏是页面中的一个区域，通过文本或图形的超链接与其他页面发生关联。在大型的Web中，要把所有的页面用一致和准确的风格连接起来是很困难的，但如果利用导航视图，创建Web站点就容易多了。 (5)超链接视图 单击视图栏中的“超链接”图标，进入超链接视图。左边是文件夹列表窗格，右边是超链接窗格，可视化显示了网页之间的超链接。FrontPage支持鼠标拖放操作。每当对文件和文件夹进行了移动或改名时，FrontPage会自动更新所有指向它们的超链接。 报表视图 文件夹视图 网页视图 导航视图 任务视图 超链接视图 图8-5 FrontPage 2000的6种视图 8.2 网页编辑 8.2.1 创建站点与网页 网站由若干个网页及相关文件集合而成，要建立和修改网页，首先要创建本地站点。网页又称为Web页，是网站的基本信息单位。图8-6为著名的电子商务网站―――“淘宝”的主页。 网页标题 网址 导航栏 表单 超级链接 图8-6 网页的构成 这里以建立个人站点为例，该站点包含4张网页:主页(index.htm)、个人信息(personal.htm)、个人相册(photo.htm)、站长调查(investigation.htm)。 1(网站的基本操作 (1)创建本地站点 ,根据模板创建站点 单击“文件”?“新建”?“站点”，打开如图8-7所示的“新建”对话框。选中站点模板中的“只有一个网页的站点”图标，在“指定新站点的路径”文本框中输入新站点的位置，然后单击“确定”按钮。 本地站点即对应外存指定位置上的一个文件夹，系统自动生成两个子文件夹_private和 images，用来存放不希望被别人看到的文件和网页中用到的图片文件，同时自动建立一个命名为new_page_1.htm的网页。 图8-7 “新建”站点对话框 ,另外，可以选择图8-7中的“个人站点”或其他模板创建站点，如果选择“空站点”图标则需要自行添加网站中的所有网页。 (2)打开站点 单击“文件”?“打开站点”，在“打开站点”对话框(见图8-8)中找到站点所在文件夹或URL。单击“打开”按钮，站点中包括的所有网页均加载过来。 图8-8“打开站点”对话框 (3)保存站点 在创建网站时选择了站点的位置，站点会自动保存在这个位置下，无须再保存。 (4)删除站点 本地站点即对应外存上的文件夹，要删除站点，只要到文件夹下选中相应的站点文件夹删除即可。 2(网页的基本操作 (1)创建网页 为站点添加网页的方法有两种。 ,单击“文件”?“新建”?“网页”，打开“新建”对话框，单击某一网页样式，利用网页模板创建网页。 ,通过工具栏的“新建”按钮可以直接创建普通网页。 利用此方法创建一个新网页，用来保存站长的个人信息。 (2)键入网页内容 在“普通”视图下即可输入文本。FrontPage中使用的字处理规则类似于Word字处理程序，确定插入点后键入文本;选择文本后可以通过“格式”菜单进行格式设置。 (3)保存网页 单击“文件”?“保存”，在“保存”对话框中选择保存位置，并为网页命名，默认的文件类型为“Web页”;也可选择保存为“FrongPage模板”。 将步骤(1)中创建的网页保存命名为personal.htm。同样创建站点中的其他3张网页并按命名。 (4)设置网页属性 单击“文件”?“属性”或者在网页视图下，右键单击网页任何位置，从弹出的快捷菜单菜单中选择“网页属性”命令，出现“网页属性”对话框(见图8-9)。 “常规”选项卡中可以设置网页的基本位置、标题、背景音乐等;“背景”选项卡用来设置网页的背景图片和颜色等。 这里设定personal.htm网页的标题为“个人信息”，在“背景”选项卡中设置背景颜色为淡黄色背景颜色，也可以指定图片文件为网页的背景图片。 图8-9 “网页属性”对话框 8.2.2 制作多媒体网页 1(插入图片 生动的网页经常需要图片的点缀，图片是网页制作中不可缺少的一部分，目前网页设计常用的图片文件有GIF、JPG、BMP格式等。 ,单击“插入”?“图片”?“来自文件”，在弹出的“图片”对话框(见图8-10)中点击浏览按钮，选定相应的图片文件，图片随之插入在当前位置;选中图片后单击常用工具栏上的右对齐按钮。 注意:第一次保存包含图片的网页时会弹出“保存嵌入式文件”的对话框(见图8-11)，网页中的照片应当存放在FrontPage自动生成的images文件夹中，便于以后的管理。 图8-10 “图片”对话框图 8-11 “保存嵌入式文件”对话框 ,设置图片属性 选中图片单击右键，执行“图片属性”命令，弹出如图8-12所示的“图片属性”对话框。在“外观”选项卡中可以设置“对齐方式”，“水平间距”和“垂直间距”用来设置图片水平和垂直方向上同文本的间隔距离。 图8-12 “图片属性”对话框 8-13 “personal.htm”网页效果图 如图8-13所示，将图片设置为右对齐，将“水平间距”和“垂直间距”设置为10。 注意:虽然只需插入图片即可马上让网页呈现精彩效果，但碍于Internet网络的速度，太大或太多的图片对于网速较慢的用户反而会造成困扰，因此如何衡量实用性和美观性便成为图片处理上考虑的重点。应当尽量使用较小的图片使之能能更快地呈现在用户眼前;如操作按钮或提示图片，建议使用16色，少用256色图片。 ,插入视频 单击“插入,图片视频”，打开“视频”对话框，选择要插入的视频文件，单击“打开”即可。 2(添加背景音乐 一首动人的音乐往往会给人带来听觉上的享受。在FrontPage 2000中，可以使用扩展名为MIDI/MID/AFF/AU的声音文件作为网页的背景音乐。 (1)右键单击网页，在弹出的快捷菜单中选择“网页属性”，打开网页属性对话框(见 图8-9)。 (2)在“常规”选项卡中单击“背景音乐”栏中的浏览按钮，打开“浏览”对话框，选定作为背景音乐的文件，然后单击“确定”按钮。 (3)选中“不限次数”复选框，则连续播放声音。 (4)保存网页后可以在预览窗口或浏览器中听到网页的背景音乐。 3(制作动态网页 (1)动态HTML效果 使用FrontPage提供的动态HTML效果可以使网页中的各个元素动起来。 将光标定位到相关的网页元素或选中该网页元素，单击“格式”?“动态HTML效果”，打开DHTML效果工具栏，如图8-14所示。 8-14 在“DHTML效果”工具栏中选择一种事件 在该工具栏的“开启”下拉列表框中选择一种事件，即网页浏览者要做的动作选项。选择一种事件选项后，“应用”下拉列表框被激活，从中选择一种动态网页效果，如图8-15所示。 8-15在“DHTML效果”工具栏中应用一种效果 选择的事件不同，在“应用”下拉列表框中列举出的动态效果选项则不同。选中部分动态效果后会激活其后的下拉列表框，可以进行进一步设置。 设置了动态HTML效果的网页元素在普通窗口中呈浅蓝色背景显示，当鼠标移动的该元素上，会出现一个浮动提示条提示该元素目前应用的何种动态效果。 (2)网页过渡效果 打开网页后，单击“格式”?“网页过渡”，打开“网页过渡”对话框，如图8-16所示。 8-16 “网页过渡”对话框 在“事件”下拉列表框中选择事件，在“周期”文本框中输入过渡效果持续的时间(以s为单位)，在“过渡效果”列表框中选择一种过渡效果。 切换到预览窗口可以看到网页的过渡效果。 8.2.3 创建 表格可以把许多相互关联的信息集中起来，便于用户分析、比较和使用。它在网页元素的定位上也起着重要的作用。我们可以利用表格对网页进行排版、分隔，对网页进行布局定位，设计出具有专业效果的网页。现在它已成为一种重要的网页布局技术。 1(插入表格 单击“表格”?“插入”?“表格”(也可以单击常用工具栏上的按钮快速创建表格)，弹出图8-17所示的“插入表格”对话框。 8-17 “插入表格”对话框 8-18 “表格属性”对话框 2(设置表格属性 设置表格属性包括其大小、布局、边框与背景等设置。光标置于表格中，单击右键，在弹出的快捷菜单中选择“表格属性”，出现如图8-18所示的“表格属性”对话框。 (1)设置表格的大小 在“布局”栏中选中“指定宽度”和“指定高度”复选框，再选中“象素”或“百分比”单选项，在文本框中分别输入所需的宽度和高度。 (2)设置表格的布局 ,对齐方式 设置表格在网页中的对齐方式。 ,浮动 “默认”选项意味着表格两边不能绕排文字。可以设置浮动对齐方式为“左对齐”和“右对齐”，，即使表格排放在文字的左侧还是右侧。 ,单元格边距 设置单元格内容与单元格边框之间的距离;单元格间距为单元格与单元格之间的距离。 (3)设置表格边框线与背景 如果不想显示边框线，在图8-18中设置“边框”粗细为0即可;可以为表格或单元格指定颜色或图片。 3(编辑表格 编辑表格包括单元格的合并与拆分、单元格/行/列的插入、删除、移动或复制、调整行高和列宽等操作。由于与Word应用程序中表格的操作很相似，这里不再赘述。 接下来在主页中插入表格，规范文字、图片等对象的位置。 双击index.htm使之成为当前网页，插入3行1列的表格。将鼠标至于第三行中单击右键，选择“拆分单元格”，将其拆分为3列。 在相应的单元格中分别插入文字/图片，采用居中对齐方式。 鼠标插入在表格中单击右键，选择“表格属性”，设置单元格边距/单元格间距/边框的粗细均为0，此时表格边框线由实线变为虚线，效果如图8-19所示。将视图模式切换到“预览”下，观察表格的变化(见图8-20)。 图8-19 插入表格 图8-20 预览效果 8.2.4 建立超链接 超链接的含义就是将某个文本串或某幅图象和其他网页的地址联系在一起，如果访问者单击此文本串或图象，浏览器将打开相应地址的网页。目前网站中的网页之间没有链接，接下来通过超链接将它们关联起来。 选中要创建超链接的文本或图象，单击“插入”?“超链接”或单击常用工具栏上的超链接按钮，在弹出的对话框(见图8-21)的URL域中指定超链接的目标位置，单击确定按钮。 选中导航文字“站长介绍”，单击右键菜单中的“超链接”，在对话框中选择personal.htm作为目标URL。点击“确定”后“站长介绍”变为蓝色并添加了下划线(见图8-22)，切换到“预览”视图下测试效果。 图8-21 “创建超链接”对话框 图8-22 添加“超链接” 为了使浏览网站者不会迷路，建议在各网页添加相应的超链接，使之能够返回主页。这 里在personal.htm中建立导航文字“返回主页”，设置回到首页的超链接，如图8-23所示。 图8-23 添加“返回主页”超链接