《【教学课件】第六章网页制作软件.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第六章网页制作软件.ppt（31页珍藏版）》请在三一办公上搜索。
1、第六章 网页制作软件,8.1 FrontPage 2003介绍8.2 建立站点与保存网页8.3 编辑文字8.4 网页元素的插入8.5 建立超链接8.6 动态效果8.7 框 架8.8 表 单8.9 测试和发布网站8.10 其他网页制作软件,8.1 FrontPage 2003介绍,FrontPage的界面：与WORD有相同的界面外，还有特有的部分界面,六个功能键,三个控制按钮,1在视图栏内有六种模式：网页、文件夹、报表、导航、超链接、任务2在“网页”视图方式下，设有“普通”、“HTML”、“浏览”三个控制按钮。（1）“普通”方式：可以利用菜单中的命令或工具栏上的按钮来编辑网页。（2）“HTML”
2、方式：可以直接对网页的HTML代码进行编辑操作。（3）“预览”方式：可以预览当前的网页，让编制者观看自己当前所作的网页效果，不能编辑。,8.1 FrontPage 2003介绍,一、视图栏1网页：在“网页”视图中，有“普通”、“HTML”和“预览”3张选项卡，可以在“普通”或“HTML”选项卡中创建、编辑网页信息，并可在“预览”选项卡中预览网页制作效果。,2文件夹视图:“文件夹”视图用于管理站点中的网页文件夹和网页文档，可进行新建、复制、删除、移动操作。(P273)在此视图下，编辑区被分两个部分：左边：文件夹列表，显示的是当前网站中包含的所有文件夹右边：显示当前文件夹中包含的所有文件及文件夹，
3、：在创建新的网站时FrontPage2003会自动创建两个文件夹：_private与images，_private：是网站创建者私人文件夹，一般用于存放对安全性要求较高的文件，只有网站管理员和创建者本人才可访问images：是图形文件夹，专门用于存放网页中包含的图形文件,注意,3报表视图显示的是当前站点的统计数据，包含所有的文件、图片、未链接与已接的文件等的数量、大小及简要说明，通过这些数据，可以很清楚的掌握网站的情况，它有助于维护站点。4导航视图“导航”视图用于对站点结构的管理，可以创建网页、更改网页间的互相链接结构。通过“导航条”及“共享边界”可使网站保持一致的风格。5超链接视图“超链接”
4、视图可以查看网站中每一网页的链接从属关系。还可自动验证所有超链接是否正常。6任务视图“任务”视图用于记录与创建和维护Web站点有关的所有细节，对于大型站点和有许多人参加创建的站点，维护管理十分有效。,8.2 建立站点与保存网页,创建新站点 创建新站点主要是用站点模板和站点向导来创建站点（同幻灯片向导）。站点模板和站点向导：是由一组事先经过格式化的空白网页组成的，相当于一个站点的骨架，通过它可以容易地搭起整个站点的框架。在“网站模板”提供的10种类型中，最常用的是“空站点”,特别是在制作个人性质的网站时，具体的文件结构可以在创建后自行调整。,创建方法：（1）选择菜单“文件”“新建”“站点”命令，
5、在“新建”站点对话框中选择站点图标，并在“指定新站点的位置（S）：”栏中键入或选择新站点的路径及名称。（2）选择自创文件夹存放的位置，“文件”“新建”“文件夹”，建立新文件夹。,如何设计一个简单的网页？,（1）“文件”“新建”“网页”命令，（2）有三个选项卡：“常规”、“框架网页”、“样式表”。选择其中一个网页模板。（3）按“确定”,操作方法,在“普通”模式下输入,新建网页窗口,操作方法：“文件”“另存为”，在“另存为”对话框中，指定文件的存储路径与文件名（操作同WORD）:(1)网站主页文件习惯命名为为index.htm；(2)文件类型选用默认的“Web页”，；（3）系统自动给文档一个网页标
6、题，若要修改标题文字，单击“更改”按钮，单击“保存”，完成保存。另外：如果主页中包含了图像、背景图像、视频或背景音乐，在第一次保存时还会弹出“保存嵌入式文件”对话框，用户可直接单击“确定”按钮完成保存，将链接文件都存储在同一站点（文件夹）中。,如何保存网页呢？,指定存储路径和更改文件名：index.htm,单击 此，修改网页标题,注意,8.3 编辑文本,在FrontPage 2003编辑区中输入网页文本，例如输入“我的第一个网页”，用户可对该文字进行编辑、设置格式，操作方法同WORD：选择欲设置格式的文字。在“格式”菜单中选择“字体”命令，弹出“字体”对话框，用户对文字可作“字体”、“字型”、
7、“大小”、“颜色”、“效果”以及“字符间距”的设置。,类似于Word,8.4 网页元素的插入,1插入换行符插入“隔行换行”：直接在插入点按Enter键。插入“紧凑换行”：先定位插入点，选择“插入”菜单的“换行符”命令，或按Shift+Enter组合2插入水平线 插入水平线可以使层次分明，最简单的方法是插入水平线使需要分隔的部分分开。（1）把插入点调整到插入水平线的位置，选择“插入”菜单的“水平线”命令。就可在光标处插入一条默认水平线。（2）双击该水平线，可修改水平线的宽度和颜色以及对齐方式和长短。（3）选中，按DEL可删除。如要选择装修性强的，可选择“插入”-“图片”-“剪贴画”-“Web框架
8、”,3插入背景图片和更改超链接等文本颜色（1）插入图片将插入点定位到放置图片的位置，选择“插入”菜单中的“图片”命令。图片操作同前（2）插入背景：插入背景图片：单击“格式”-“背景”命令，或鼠标右键单击FrontPage编辑区，选择快捷菜单中的“网页属性”命令，在“网页属性”对话框的“背景”选项卡的“格式”区域选择“背景图片”复选框，再在空白栏处直接键入图片所在的文件路径和文件名，或单击“浏览”按钮选择图片文件。设置网页“背景”颜色与“文本”颜色：使用“背景”选项卡的“颜色”区域，在“背景”和“文本”列表框中选择不同的色彩，设置“背景”和“文本”颜色；设置“超链接”的文字的颜色，可在“颜色”区
9、域右侧的3个列表框中完成设置。使用背景图片时，所设置的背景颜色将被图片覆盖。,4插入背景音乐“网页属性”对话中-“常规”-“背景音乐”-“位置”文本框，输入声音文件的路径和文件名，或单击“浏览”按钮来选择声音文件的路径和文件名。插入背景音乐后运行网页就能播放出音乐。5插入并设置表格（操作同Word）（1）插入表格使用“表格”菜单的“手绘表格”或“插入表格”命令项。（2）修改表格用鼠标右键单击表格，在弹出的快捷菜单中选择“表格属性”命令作进一步的设置。,表格宽度为浏览器宽度的百分比,单元格之间的距离,图一,在INTERNET上我们经常看到许多网页上都有一个最新更新日期，用来告诉用户页面上一次更新
10、是什么时候，这是怎么做的呢？看完下面的部分你就知道了。时间标记当活动网页被重新编辑或自动更新之后，会自动改变。设置起来也很容易：在页面末尾输入：“更新时间”，执行“插入”菜单的“日期与时间”命令，在“日期时间属性”对话框中选择“该网页上次编辑日期”图一，,6、插入时间标记,插入”菜单的“高级”“插件”命令，在“插件属性”对话框的“数据源”栏内键入插件的文件路径及文件名，或单击“浏览”以查找插件的位置。在此可输入.swf、.wav、.mid等视频及音频类型的文件。,7插入插件,8插入注释,插入一些文字，表明设计的意图和方法，在编辑网页时作为参考和提示，这就是注释。（浏览时不显示）操作方法：单击当
11、前网页要插入注释的位置，选“插入”-“注释”命令，这样就会弹出“注释”对话框，在“注释”文本框中输入注释的内容，单击“确定”按钮。,8.5 建立超链接入,如何进行进行超链接呢？,1.链接到网页,操作方法：（1）选定文本或图形，单击“插入”“超链接”（2）在URL地址栏内输入绝对地址或相对地址（只给出路径名和文档名），如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜 就可以用浏览器在INTERNET上查找要链接的网页，FRONTPAGE会自动记录你找到的地址。（3）单击“确定”按钮就可以了。修改：我们还可以改变已经设置好的超链接。首先确认是普通模式，在要改变的超链接下单击鼠标右键，选
12、择“超链接属性”命令，输入新的URL地址就可以了。,2.链接到书签,会看到,2.链接到E-mail地址,选择一个要建立电子邮件超链接的文本，单击“常用”工具栏中的“超链接”按钮，弹出“创建超链接”对话框，用鼠标单击“制作发送电子邮件的超级链接”按钮。,链接到www,链接到文件,创建一网页并链接到该网页,8.6 动态效果,2横幅广告管理在网页的同一地方轮流显示不同的图片，在有限的网页页面中提供尽可能多的信息。方法：“插入”“组件”“横幅广告管理”。“过渡效果”：是设置图形的广告图片的切换效果；“上移、下移”：是用来调整广告图片的播放顺序的；,1字幕在网页中设置移动字幕，可以使某段文字在网页上循环
13、作水平移动。用它来发布一些站点的通知或提示信息。方法：选择“插入”“组件”“字幕”。“延迟”表示字幕每滚动一步的时间间隔是多少毫秒；“数量”表示字幕每滚动一步的距离是多少像素；,3创建悬停按钮“悬停按钮”是一个文字颜色或图片可转换的动感按钮，当鼠标移动到按钮上，按钮的就会改变颜色，或变换成另一幅图片。（1）文字“悬停按钮”（2）图片“悬停按钮”方法：选择“插入”“组件”“悬停按钮”。,8.6 动态效果,4创建站点计数器 站点计数器通常添加在主页中，用于统计和显示站点被访问的次数。（1）选择“工具”“网页选项”，在“网页选项”对话框，从中选择“兼容性”选项卡，选中“该服务器使用Microsoft
14、 FrontPage服务器扩展”复选框。（2）选择“插入”“组件”“站点计数器”。设置计数器的网站必须要保存后发布到服务器上才能发挥计数功能，也可以将网站发布到装有“Personal Web Manager”的本地计算机上观看其实际效果。5设置页面过渡方式网页过渡是指进入或离开网页时的特殊效果。（1）选定要设置过渡效果的网页；（2）选择“格式”“网页过渡”命令。,8.6 动态效果,6设置动态HTML效果设置动态HTML效果后，当打开网页、进行单击、双击或鼠标悬停等操作时，网页内指定的文本、图像、按钮、字幕、链接等对象能够实现某种动画效果，如飞出、缩放等（1）选定要制作动态效果的对象；（2）选择
15、“格式”“动态HTML效果”命令。,8.7 框架,1建立框架网页（1）选择菜单“文件”“新建”“网页”命令，在“新建”对话框中选择“框架网页”选项卡，并选择一种“框架网页”模板，如“横幅和目录”，（2）为每个框架指定显示的初始网页：“设置初始网页”或“新建网页”2设置框架网页属性单击鼠标右键，选择“框架属性”命令项；或使用“框架”菜单的“框架属性”命令。3保存框架网页（1）在保存框架网页时，必须逐一保存所有框架的相关网页及总框架网页，且不可同名，否则同名网页将覆盖另一框架的网页文件。（2）选择“文件”菜单中的“另存为”命令,再逐个保存框架网页。要保存的框架网页以深蓝色框突出显示。或单击需保存框
16、架内容网页，使该框架选中，打开“框架”菜单，选择“保存网页”命令,8.8 表单,表单是网页中收集信息、与访问者进行交互的主要元素，类似Windows对话框。1表单域的类型（1）单行文本框：接受少量信息。（2）滚动文本框：可输入多行文本的文本框。（3）复选框：复选框的作用为用户提供预先定义好的信息的选择，可多重选择。（4）单选按钮：提供两个或多个选项，用户从中选择一项（如性别），不能复选。（5）下拉菜单（下拉列表框）：当用鼠标单击下拉箭头时，会出现一个项目列表框，供使用者在出现的列表项中点击选择项目。（6）按钮“提交”按钮：是由FrontPage定义的一种控件，它的功能主要是将表单中的信息发送出
17、去。“全部重写”按钮：也是FrontPage定义的按钮。“普通”按钮：外型与前两种按钮相同，它需要人工设置其执行动作，编写其中的程序代码，作用更加灵活。,2表单属性（1）发送到文件表单结果可以保存到一个指定位置的文件中，或以E-mail形式发送到某个信箱。（2）发送到数据库在“将结果保存到数据库的选项”对话框中有“数据库结果”、“保存的域”和“附加域”3个选项卡组成，数据库可以是已存在的，也可以是新建的，系统会自动创建一个Access数据库（.mdb），并将它放在当前Web站点的fpdb目录下面，将数据库命名为“_new_page_1.mdb”。（3）发送到其他对象由一些专门的网页处理程序完成
18、。3创建确认网页确认网页是在访问者提交了一个表单之后自动出现的网页，使访问者了解到自己提交的信息是否已经发送出去4创建表单先插入一个表单框，再添加文本和插入所需的表单元素。,8.9 测试和发布网站,1拼写检查2检查网站的超链接（1）启动FrontPage 2003中打开站点，单击视图栏的“超链接”按钮，切换到超链接视图。双击其主页图标打开主页。（2）单击工具栏中的“在浏览器中预览”按钮，并把浏览器窗口最大化。依次点击网页中的超链接，检查它们的指向是否正确。（3）使用“工具”栏中的“重新计算超链接”选项，将所有超链接状态视图变成激活状态，能同时进行超链接验证。,把本机中站点上网页文件传送到Int
19、ernet的Web服务器上详细操作见P290面，不作演示。1发布站点应具备的条件若使用FrontPage服务器扩展来发布站点，则具备：支持HTTP发布方式；支持动态网页。2利用FrontPage发布站点（1）发布到Internet上首先将计算机连接到Internet，向有关站点申请一个网站；在FrontPage中，选择“文件”菜单中的“发布站点”命令，打开“发布目标”对话框，在“指定发布站点的位置”中输入ISP服务器的IP地址。如果要发布的Web服务器上安装有FrontPage服务器扩展，可以使用HTTP发布；如果Web服务器上没有安装服务器扩展，可使用（FTP）发布站点。单击“发布”按钮开始发布。发布成功后弹出“成功发布站点”提示对话框。,8.10 其他网页制作软件,其他网页制作软件1DreamweaverMacromedia公司的产品，是一款“所见即所得”的网页编辑工具，或称网页排版软件。2FlashMacromedia公司的产品，Flash是交互式矢量图和Web动画的标准。3FireworkMacromedia公司的另一款产品，是真正的网页作图软件。,THE END,
