FrontPage2003网页制作

网页制作软件FrontPage2003任务一制作简单网页任务二：网页布局及发布、表单的创建任务一制作简单网页返回我们很多人都喜欢上网冲浪，甚至于梦想着有一天自己也能拥有一个个人网站，可是，怎样制作网站呢？我们可能还从未曾真正的知道,而FrontPage就可以帮助我们完成我们的小小愿望。任务引入任务一制作简单网页返回学习内容FrontPage的主要功能。FrontPage的启动与退出。网页与网站的关系。FrontPage的三种编辑方式（普通、HTML、预览）以及三种编辑方式的不同用途。FrontPage中的6种视图，即网页视图、报表视图、导航视图、超链接视图、任务视图，以及各种视图的作用和操作特点。创建站点：了解站点的概念，掌握创建站点的方法。网页编辑：新建网页、打开网页、设置文字格式、设置网页属性、网页预览。插入对象：插入文本、水平线、图片、字幕、表格等。超链接：创建超链接。FrontPage2003简介在Office2003套装软件中，FrontPage2003已不再是其中的一个组件，而是被分离出来。FrontPage2003的安装、启动和退出方法都同Office系列的其它软件基本相同。窗口介绍FrontPage2003的视图•FrontPage2003提供了六种视图模式，即网页视图、文件夹视图、报表视图、导航视图、超链接视图和任务视图。它们是用户进行网站设计的有力工具，灵活运用视图模式，将极大地方便设计操作和网站管理。一、网页视图网页视图为网页的设计提供了一个工作场所，可以在这个环境下对网页进行设计和修改。二、文件夹视图打开一个网页后，系统默认是以文件夹视图来显示的，文件夹视图与Windows中的资源管理器相似，它能够显示当前的Web中的内容是如何组织的。•三、报表视图报表视图相当于属性检查，它能给出当前网站的有关属性。灵活应用报表视图能够使用户方便地了解网页的属性，便于把握和修改网页。•四、导航视图导航视图清楚地显示了Web的结构，用户可以从中了解到网站中各部分之间的逻辑关系，它反映了网站的整个脉络。•五、超链接视图超链接视图以图形化的界面显示了当前网页和其他文件之间的超链接关系，也可以显示网站与网站之间的超链接。•六、任务视图任务视图用任务列表的方式对任务进行管理，操作人员可以把详细的任务放在任务列表中，这样它就会提醒设计人员需要完成哪些任务，还剩哪些任务没有完成。任务一制作简单网页返回启动FrontPage2003单击任务栏上的“开始”按钮，指向“程序”，单击“MicrosoftFrontPage”启动FrontPage2003。任务一制作简单网页返回新建站点选择“文件”菜单中的“新建”“站点”命令，指定站点的位置，建立站点Web1,FrontPage2003默认建立主页（index.htm）。任务一制作简单网页在站点中新建网页：选择“文件”菜单中的“新建”“网页”命令，新建网页。(默认：NewPage1)返回任务一制作简单网页插入水平线：将插入点置于适当位置，使用“插入”菜单中的“水平线”命令插入水平线。右键单击插入的水平线，选择“水平线属性”命令，可以在弹出的“水平线属性”对话框中修改水平线的属性。返回任务一制作简单网页插入表格：选择“表格”菜单中的“插入表格”命令，或者选择“表格/手绘表格”命令，或者使用工具栏中的“插入表格”按钮，在插入点处建立一个两列多行的表格，以便下面使用表格定位文字和图片。返回任务一制作简单网页在表格中插入文字和图片：选取合适的文字和图片素材，分别插入到表格的单元格中，调整单元格的宽度和高度属性直至合适。返回任务一制作简单网页预览和保存网页：切换到预览视图可以查看网页的效果。制作完成后，保存网页为“历届奥运吉祥物.htm，注意设置合适的网页标题。保存后，在浏览器中打开并浏览该网页。返回任务一制作简单网页在窗口左侧的文件夹列表中，双击网页文件“index.htm”，打开并编辑该网页文件。输入标题“历届奥运会吉祥物”，利用“格式”工具栏中的“样式”将其设置为“标题一”，并设“对齐方式”为“水平居中”。返回任务一制作简单网页选择“插入”菜单中的“水平线”命令，插入水平线。双击水平线，在打开的“水平线属性”对话框中设置其属性。输入文字“北京2008奥运吉祥物及历届奥运吉祥物”，并在两段文字后分别插入图片“福娃贝贝”和“2004年奥运吉祥物”。返回任务一制作简单网页插入超链接第一步：选择文字“北京2008奥运吉祥物”。第二步：利用“插入”菜单或右键菜单中“创建超链接”命令，打开“创建超链接”对话框。返回任务一制作简单网页插入超链接:第三步：在“创建超链接”对话框中选择网页“2008奥运吉祥物.htm”，该网页在任务二中已创建。第四步：单击“确定”按钮，完成超链接的添加。第五步：为图片“福娃贝贝”设置超链接，指向网页“2008奥运吉祥物.htm”；为文字“历届奥运吉祥物”和图片“2004年奥运吉祥物”添加超链接，链接到任务二创建的网页“历届奥运吉祥物.htm”。返回任务一制作简单网页设置图片“福娃贝贝”和“2004年奥运吉祥物”的属性。选中图片，利用“格式”菜单中的“属性”或右键菜单中的“图片属性”命令打开“图片属性”对话框，选择其中的“外观”选项卡，修改布局、大小等属性，将图片的对齐方式设置为“相对垂直居中”返回任务一制作简单网页为网页“2008奥运吉祥物.htm”和“历届奥运吉祥物.htm”添加返回“index.htm”的超链接返回插入交互式按钮实现网页“2008奥运会吉祥物.htm”转到其他网页和返回主页的链接。任务一制作简单网页返回任务一制作简单网页插入滚动字幕在index.html标题文字“奥运吉祥物”上方插入滚动字幕“奥运会吉祥物的历史”，设置为向左滚动。返回任务一制作简单网页添加横幅广告管理器在左上角的位置插入横幅广告管理器组件。可以添加多个图片定时切换，还可以设置超链接返回保存网页，在浏览器中查看网页，并测试超链接。课后作业1．用FrontPage制作一个站点。设置网页标题栏内容为“我的第一个网页”，插入水平线，换行后再插入“日期和时间”2．在上题网页中插入图片和背景图片。3．在上题网页中添加滚动字幕“欢迎光临本网站”。4．在上题网页中的滚动字幕下加入一个3行4列的表格，将表格第一行合并，其中加入文字“课程表”。表格边框粗细为“3”，亮边框“浅蓝色”、暗边框“蓝绿色”。5．在上题的网页中的表格下输入文字“有情链接”，并将其链接到中国教育和科研计算机网。6．创建一个包含列表（项目符号）、换行符、及文本的Web页面。其内容是：描述你的家庭成员。7．创建一个包含图和书签超链接的反映你家乡风貌的Web页面。8．创建一个包含图、表格和用于接受反馈的E-mail地址链接的有关产品介绍的Web页面。9．选择一个“插件”加入到上题中。10．创建使用框架的网页，其中一个框架中包含滚动字幕，内容为“欢迎光临我的个人主页”，背景颜色设置成“浅绿色”，方向为“右”，表现方式为“交替”。在另一个框架中添加横幅广告、背景音乐及介绍你的母校的文字的Web页面。并确认至少有一个不可移动的边界和无滚动条的框架。11．在上题中设置文字“悬停按钮”和图片“悬停按钮”（选择两幅图片）。12．插入一个“站点计数器”加入到上题中。13．将网站发布到本机上。14．联机上网后测出本机的动态IP地址，并使用其他联网计算机登录到你的网站。任务二：网页布局及发布、表单的创建知识技能点FrontPage2003的表格的创建和使用FrontPage2003的框架的创建和使用FrontPage2003的表单的创建和使用FrontPage2003的网页的发布和维护返回王君要为燕山中学校报的网站创建一个介绍关于“中国节日”专题网页，他已经设计了关于“春节”、“元宵节”、“清明节”、“端午节”的4个网页，下面要进行工作就是把各个网页组织在一起，进行整体布局，并创建一个征求反馈意见的网页，发布在学校的网站上。王君首先要建立一个带表格的网页做为目录，然后创建一个表单页面，再通过创建框架把这些网页进行整体的布局，最后发布到学校的网站上。返回任务二：网页布局及发布、表单的创建任务引入初始图成形图返回任务二：网页布局及发布、表单的创建创建表格网页相关知识：表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。利用表格可以有条理地排列数据或者组织网页布局。表格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本提供边界。FrontPage2003提供了与Word字处理软件类似的表格处理功能，在网页中可以轻松地创建和处理表格。返回任务二：网页布局及发布、表单的创建创建表格网页创建方法如下：使用菜单命令“插入”——“表格”，弹出如图8—14所示，可以对插入的表格进行精确的设置，包括行和列的数目、边框尺寸以及单元格宽度等。王君根据实际情况，选择了大小为4行1列，和背景颜色为水绿色的的表格。然后在插入的表格中输入文字，并最后在表格属性中调整表格，完成后的表格页面如图8—15所示。返回任务二：网页布局及发布、表单的创建创建表格网页图8—14表格属性图图8—15表格设计完成图返回任务二：网页布局及发布、表单的创建创建表格网页创建表格还有以下2种方法：（1）可以使用“常用”工具栏中的“插入表格”按钮，快速地插入表格。（2）从“表格”菜单中选择“手绘表格”命令，手动绘制表格。返回任务二：网页布局及发布、表单的创建创建表格网页表格属性的设置：对齐方式：可以选择左对齐、右对齐、水平居中和两端对齐。该属性决定表格在网页中的相对位置。浮动：可以选择左对齐、右对齐。该属性决定表格与其他网页元素的排列关系，即“文字环绕”效果。指定宽度和高度：设置表格的大小。可以使用绝对大小“像素”或相对大小“百分比”。单元格衬距：设置表格线与表格内容的距离。单元格间距：设置两个相邻单元格边框的距离边框：粗细以像素为单位，可以选择合适的边框颜色。背景：可以指定背景颜色或背景图像。任务二：网页布局及发布、表单的创建创建表格网页表格属性的设置：创建表格后，可以对表格单元格、行和列的布局和结构进行调整，具体操作有：调整行、列或单元格；插入行、列或单元格；删除行、列或单元格；合并、拆分单元格；平均分布行高、列宽；设置单元格属性等。在“单元格属性”对话框中，可以设置单元格中内容的布局，精确定义单元格的宽度、高度，确定单元格的背景以及边框的颜色等。王君完成了一个表格网页的设计，接着要做的工作就是利用表单设计一个反馈网页。返回任务二：网页布局及发布、表单的创建创建表单网页相关知识：表单与网站之间的关系在概念上类似于表格与纸张之间的关系，不同之处在于使用表单可以与网站访问者交互以及从访问者那里收集信息。用户在表单中输入数据然后提交给Web服务器，例如在表单中输入姓名及密码，服务器根据输入通过脚本进行判断是否允许登录。通常可以使用网站上的表单来完成以下典型任务：从网站访问者那里检索联系信息（例如，留言簿）；接受订单并收集交货与收费信息；用户登录网站。返回任务二：网页布局及发布、表单的创建创建表单网页创建表单首先在需要添加表单的位置单击；然后，单击“插入”单，鼠标指向“表单”，在出现的子菜单中单击“表单”，如图8—16所示。在FrontPage2003中，有文本框、文本区、分组框、复选框、选项按钮、文件上载、下拉框、高级按钮、图片、标签等几种表单域。插入表单图返回任务二：网页布局及发布、表单的创建创建表单网页王君根据实际情况，要获得反馈者的姓名、性别、建议等信息。分别了插入“文本框”、“选项按钮”和“文本区”表单域。其操作步骤如下：首先输入文字“姓名”，在其后插入“文本框”表单域，然后输入文字“性别”，在其后插入两个“选项按钮”表单域，并在对应的“选项按钮”位置输入文字“男”，“女”，最后输入文字“建议”，并在其后插入“文本区”表单域。完成如图所示。返回任务二：网页布局及发