计算机应用基础应用基础XP-项目七：网页制作软件Frontpake2003的应用_第1页
计算机应用基础应用基础XP-项目七：网页制作软件Frontpake2003的应用_第2页
计算机应用基础应用基础XP-项目七：网页制作软件Frontpake2003的应用_第3页
计算机应用基础应用基础XP-项目七：网页制作软件Frontpake2003的应用_第4页
计算机应用基础应用基础XP-项目七：网页制作软件Frontpake2003的应用_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务一用记事本创建一个简单的文字网页任务描述：创建一个如图7-1所示的简单文字网页。任务分析：当我们要创建一个最简单的文本型网页时，最先考虑到的就是使用HTML语言来编写。HTML（HypertextMarkupLanguage）语言就是超文本标记语言，是网页制作的基础，也是最基本的工具。无论用哪种工具制作网页，最终生成的网页文件均是HTML文档，而且制作网页也可以直接使用HTML语言书写脚本。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。用记事本就可以编写HTML文件，文件保存时将文件的后缀由.txt改为“.htm”或者是“.html”即可。知识点：

HTML脚本中的标记、概念、语法规则HTML语言的常用标签7.1.1HTML语言概述

HTML脚本都是以<html>标记开头，</html>标记结尾。在<html>……</html>标记之间是HTML的脚本内容，一般情况下它分为两部分：“头部”和“主体”。头部是由<head>……</head>标记组成的，其中包含了该HTML脚本的标题和说明信息（如编码方式、关键字、编辑软件、作者信息等）。主体部分是由<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。做一个简单的例子打开一个文本文档，输入如下代码，然后将这个文件存成first.html。<html><head><title>Titleofpage</title></head><body>Thisismyfirsthomepage.（个人页面）<b>Thistextisbold（加粗）</b></body></html>可以看到这些文本在网页中的效果。

任务一用记事本创建一个简单的文字网页7.1.2HTML脚本中的标记1．标记有三种语法格式（1）<标记>内容</标记>（2）<标记属性1=参数1属性2=参数2…>内容</标记>（3）<标记>不同的标记采用不同的语法格式，其中的参数要加引号。2．常用的标记（1）<html></html>（2）<head></head>（3）<body></body>（4）<title></title>（5）<p></p>（6）<br>（7）<font></font>（8）<b></b>和<i></i>（9）<img>（10）<a></a>（11）<table>...</table>（12）<form>...</form>

任务一用记事本创建一个简单的文字网页7.1.3任务实施：步骤1.打开记事本，在记事本中输入如下代码：<html><bodybgcolor="yellow"><h1align="center">这是一个简单的网页</h1><p>上面的1号标题是居中显示的。</p><h2>世界</h2><h3>中国</h3><h4>山东省</h4><h5>德州市</h5><h6>德城区</h6><p>用hr这个Tag可以在HTML文件里加一条横线。</p><hr><p><b>粗体用b表示。</b></p><hr><p><pre>这是预格式(preformatted)文本浏览器会保留pre里面的空格和分行。</pre></p></body></html>

步骤2.选择文件菜单保存命令，在弹出的对话框中将保存路径设置为“桌面”，再将文件名称由“*.txt”改为“简单网页.html”，单击保存按钮。步骤3.返回到桌面，双击桌面上的“简单网页.html”，观看最终效果。任务一用记事本创建一个简单的文字网页任务描述：FrontPage2003是Microsoft公司推出的Office2003组件之一，是一个网页制作和网站维护工具。如何利用FrontPage2003创建新的网页文件呢？任务分析：FrontPage2003提供了“所见即所得”的网页创作环境可以轻松愉快地制作出自己喜爱的网页。它的工作方式与Word非常相似，有了使用Word的基础，使用FrontPage2003能很容易的制作出满意的网页。知识点：启动与退出窗口界面新建空白网页及站点任务二使用FrontPage2003创建新的网页文档7.2.1FrontPage2003的启动与退出1.FrontPage的启动启动FrontPage2003有两种方法：（1）单击任务栏中的“开始”按钮，在“开始”菜单中选择“程序”→“MicrosoftFrontPage2003”菜单命令即可，打开的窗口界面如图7-1所示。（2）如果在桌面上添加了MicrosoftFrontPage2003的快捷方式，双击其图标即可。2．FrontPage2003的退出使用结束需退出FrontPage2003系统时，有五种方法：（1）选择“文件”→“退出”菜单命令。（2）单击标题栏中最左边的控制菜单图标，再单击菜单中的“关闭”命令。（3）单击标题栏中最右边的按钮。（4）双击FrontPage2003窗口左上角的控制菜单按钮。（5）使用快捷键Alt+F4。任务二使用FrontPage2003创建新的网页文档7.2.2FrontPage的窗口界面

启动FrontPage2003后，出现如图7.2所示的窗口界面，它由标题栏、菜单栏、工具栏、视图栏、编辑区、滚动条和状态栏等组成。主要部分的功能及使用方法如下：1．标题栏、菜单栏和工具栏标题栏、菜单栏和工具栏的功能和使用方法和Word类似，在此不再赘述。2．编辑区FrontPage2003窗口中的空白区域就是编辑区，如图7-3所示。用户可以在该区域中输入文本、插入图片、表格以及各种组件。打开一个新网页文件时，FrontPage2003在编辑区的左下方显示网页编辑状态切换标签：“设计”、“拆分”、“代码”以及“预览”。单击某个标签后，系统将在对应的编辑状态中显示当前网页的内容。3．任务窗格任务窗格是Office应用程序中提供常用命令的窗口，如图7-5所示。它的位置适宜，尺寸较小，可以一边使用这些命令，一边继续处理文件。4．状态栏状态栏位于窗口的最下端，显示出当前操作的相关信息、超链接的URL地址、预计的下载时间以及NumLock键的状态。任务二使用FrontPage2003创建新的网页文档任务描述：网页要想吸引浏览者的眼球，必须是图文并茂，如何用Frontpage2003创建一个如图7-8所示的图片并茂的网页呢？任务分析：Frontpage2003提供了丰富的图文混排功能，可以很方便的完成在网页页面中插入图片并进行编辑。知识点：文本的输入文本格式的设置图片的插入图片格式的设置设置段落格式设置动态文字任务三制作图文网页7.3.1文字的输入与编辑FrontPage2003中对于文字与图像的处理与Word类似，只是在Word的基础上增加了很多制作网页的功能，让初学者也能制作出复杂而且美观的网页。FrontPage2003中对于文字以及图像的处理基本集中在这三个菜单项里：“编辑”、“插入”和“格式”。文本的输入在FrontPage2003中输入文本与在Word中输入文本非常类似，具体方法不在赘述，需要注意的地方如下：(1)当输入文本达到所定义的右边界时，将自动换行，不能使用回车，只有需要加入空行或另起一段时才能使用回车键。若录入文字有错可按Backspace键清除错误，重新录入。(2)可在文本中任意位置处插入新文本内容，操作时把鼠标指针定位到欲加文本处即可添加文本。(3)可进行覆盖式录入，即先用鼠标选中要替换的文本，然后直接录入文本。(4)可通过单击常用工具栏的“显示所有”按钮，让段落标记在屏幕上显示或隐藏，借助段落标记可清楚地看到段与段之间的空行。任务三制作图文网页2.文本的编辑（1）设置字体格式选择要改变的文字，单击格式工具框中相应的按钮进行设置，或是选择“格式”→“字体”菜单命令，打开如图7-9所示的“字体”对话框，在该对话框中的字体选项卡中进行字体、字形、大小、颜色、特殊效果的设置。设置完成后将一直保持，直到用户又重新设置新的字体为止。注意：在制作网页时，一般不采用“下划线”效果，因为下划线在一些网页中都表示有超链接；文字特殊效果只有在浏览器中才能体现出来。任务三制作图文网页（2）文本的缩进文本的缩进就是使文本左边、右边显示空白，这种效果有利于对关键段落加强说明。要对一个已有的段落运用缩进的方式，首先选中段落，然后在格式工具栏上单击“增加缩进”按钮，段落左边和右边分别缩进一段距离，连续按”增加缩进”按钮，缩进将进一步加大。这种在文字两边同时缩进的方式也称之为双向缩进。若缩进的空间太大，可以通过单击“减少缩进”按钮来减少缩进的空间。（3）文本对齐方式文本的对齐方式有左对齐、右对齐和居中。要进行对齐设置，首先选中要设置的文本，然后单击格式工具栏上的“向左对齐”、“居中”和“向右对齐”按钮来实现。不同的对齐方式可以使文本呈现不同的显示样式，而且可以清楚地表明用户想要说明的问题，使网页整体保持协调。（4）加入项目符号或列表编号在Web页面中加入项目符号或列表编号可使内容有条理、更清楚，可以通过列表把大量内容简要地描述出来，便于读者抓住重点。还有另外一种形式即列表编号，可以用来描述一个问题的处理步骤和顺序，这两种处理形式在FrontPage2003中运用起来很方便。任务三制作图文网页图7-10目符号和编号方式对话框

注意：在FrontPage2003中新建的两个文本行之间都有一个空行，如果用户在输入或添加项目时不想每两行之间都出现一个空行，可以在格式工具栏上单击“项目符号”或“编号方式”按钮。该按钮为下凹状态时出现第一个项目符号，输入需要的文字后，按“回车”键，然后在自动出现的下一个项目符号后继续输入。任务三制作图文网页（5）设置段落格式选择“格式”→“段落”菜单命令，打开段落对话框，如图7-11所示。在段落对话框中，选择适当的段落格式即可。（6）设置动态文字（设置动态字幕）选择“插入”→“web组件”菜单命令，在弹出的对话框中双击“字幕”命令，打开字幕属性对话框，如图7-12所示，其中：“方向”区域用来选择文字的移动方向。“速度”区域用来指定文字的移动速度，其中“延迟”列表框中的数值用来设置两次连续运行之间暂停的毫秒数；“数量”列表框中的数值用来表示文本每次移动距离的像素数。“表现方式”区域用来选择文字的运动方式。“重复”区域用来指定文字的动态效果是否循环显示。若选中“连续”复选框，则移动字幕连续不停循环，否则手工设置重复次数。“背景颜色”列表框用来选择移动字幕的背景颜色。在该对话框中选择合适的参数，点击“确定”即可。图7-11段落对话框任务三制作图文网页（7）设置交互式按钮选择“插入”→“交互式按钮”菜单命令，弹出“交互式按钮对话框”如图7-14所示，在对话框中选择合适的动态按钮即可。任务三制作图文网页7.3.2图像处理1．插入图片把光标定位到需要插入图片的位置，选择“插入”→“图片”→“剪贴画”或“来自文件”菜单命令，打开相应的对话框，在对话框中选择适用的剪贴画或图片文件，点击“确定”按钮即可。2．图片格式的编辑插入图片之后，可以对图片进行编辑，编辑图片一般有两种方法：（1）在已经创建的图片上单击左键，打开图片工具栏，如图7-15所示。工具栏中从左至右各个按钮的功能如下：任务三制作图文网页①插入文件中的图片：以插入的新图像替代选中的图像。②文本：在图像上加入文字。③自动缩略图：可创建缩略图。④绝对定位：锁定图片在网页中的位置。⑤上移、下移一层：类似于FireWorks中的排列，点击后，图像可以在网页中任意拖动确定位置。⑥翻转：可以上下左右翻转图片。⑦对比度以及亮度的处理：可以对图片进行亮度及对比度的处理。⑧裁剪、线性、填充色、设置透明色、颜色、凹凸效果都用于修改图片属性。⑨最后几个是添加热区，也就是图片上的超链接。任务三制作图文网页（2）在图片上单击右键，在弹出的快捷菜单选择“图片属性”命令，打开“图片属性”对话框，如图7-16所示。在该对话框中，选择不同的选项卡，可以完成对图片属性的设置。图7.16片属性对话框任务三制作图文网页任务描述：要求用Frontpage2003实现在网页中插入表格，精确的布局图片和文字，使图片和文字保持精确的位置，效果如图7-17所示。任务分析：在网页中精确地布局图片与文字的位置，Frontpage2003中的实现方法有多种，应用表格布局网页，是常用的方法之一。表格布局时可以及在表格中继续嵌套表格，对表格的格式进行设置、合并与拆分等。知识点：嵌套表格表格为网页布局表格属性的编辑任务四使用表格布局的网页

7.4.1插入表格1．表格的组成表格由表头、行、列、单元格和边框组成，各部分的含义如下：表头：表格的首行，表示表格各列的名称。行：表格的一行，水平方向。列：表格的一列，垂直方向。单元格：在表格中，每个方格称为一个单元格（Cell）。边框：在表格的四周，可设置边框的有无。在每个单元格中，除了可以填写文本之外，还可以放置图片、表单等，表格的最大好处是能分类显示数据，同时还能利用表格来组织网页的整体布局。2．插入表格在Frontpage2003中插入表格有三种方法：（1）使用“插入表格”工具按钮（2）使用“表格”菜单命令（3）使用手工绘制表格任务四使用表格布局的网页

7.4.2表格属性设置把光标定位到表格的任一单元格内，选择“表格”→“表格属性”菜单命令，打开“表格属性”对话框，如图7-20所示。与“插入表格”对话框类似在“表格属性”对话框中可以对表格的外观进行设置：包括表格的行高和列宽、表格的对齐方式、边框属性和背景颜色等。任务四使用表格布局的网页

7.4.3表格的其它操作表格的其它属性的设置如：合并/拆分单元格、插入行与列、删除行与列等操作与Word中的操作基本相同，在此不再赘述。7.4.4任务实施步骤1.在空白网页中插入10行5列的表格。步骤2.通过合并单元格与拆分单元格实现表格的布局，如图7-17所示。步骤3.用鼠标拖动法调整各个单元格的高度和宽度。步骤4.通过调整背景颜色、输入文字和插入图片美化网页。步骤5.以index.htm为名保存网页。

任务四使用表格布局的网页

任务描述：网页的强大之处就在它的超链接，在浏览器中通过点击网页中的超链接，可以很方便地打开另外一个网、图片、文件、邮件地址等。要求在网页中建立超链接，使网站的多个页面之间建立链接联系，效果如图7-21所示。任务分析：每一个网站及每一个网页都有独一无二的地址，在英文中被称作url(UniformResourceLocator：通用资源标示符)，多个页面之间以及多个网站之间通过超级链接而建立链接。因此链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网页中的链接可分成两个部分：“链接的载体”和“链接的目标地址”。“链接的载体”就是网页中的文字和图片，凡是包含链接的文字和图片都称为“超链接”。“链接的目标地址”就是超链接指向的网页。要想在网页中加入超链接，要从学习创建链接，修改链接的属性开始。知识点：建立超链接同一页面内书签链接修改链接的属性热点链接在图片上添加热区管理超链接任务五为网页建立超级链接

7.5.1设置文字的超链接打开网页文件，拖动鼠标选择要建立超链接的文字，单击常用工具栏中的“插入超链接”按钮，或者是单击鼠标右键，在弹出的菜单中选择”超链接”命令，弹出创建超链接对话框如图7.22所示，在列表中选择要超链接的网页文件，单击“确定”按钮即可。任务五为网页建立超级链接

7.5.2.设置图片的超链接选中要建立链接的图片，单击常用工具栏中的“插入超链接”按钮，或者是鼠标右键单击要设置超链接的图片，在右键菜单中选择”超链接”命令，然后设置要链接的文件，也可以链接图片、音乐、E－Mail地址等。7.5.3在图片上添加热区选中要添加热区的图片，在图片工具栏中选择“插入热区”按钮，可以插入“矩形热区”、“圆形热区”或“多边形热区”。任务五为网页建立超级链接

7.5.4管理超链接

一个网站的超链接就像一张网一样，网住了网站的所有文件。选择“视图”→“超链接”菜单命令，打开超链接对话框，可以看到各个文件相互间的链接情况，文件中链接了哪些文件，又被哪些文件链接。也可以在超链接的示意窗口中直接展开某个文件的上、下超链接。（1）.修改超链接的目的端选中已经建立超链接的对象，右键单击，在快捷菜单中选择“超链接属性”，弹出“编辑超链接”对话框，在对话框中选择要修改的超链接的目的端，单击“确定”按钮完成。（2）.设置超链接的显示颜色选择“格式”→“主题”菜单命令，在打开的窗口右边的任务窗格中选择最后一项“新建主题”，单击“颜色”按钮，选择“自定义”选项卡，在“项目”列表中修改超链接的颜色色块，单击“确定”→“另存为”→“保存主题”对话框→“确定”，完成设置。（3）.删除超链接方法1：选中超链接文本或图片，单击“delete”键，完成删除。方法2：右键单击超链接（在网页设计视图模式下），选择“超链接属性”菜单命令，在URL地址栏中删除其内容，单击“确定”，完成删除。任务五为网页建立超级链接

7.5.5.设置同一页面中的书签当一个网页文章内容比较长的时候，为了便于浏览，往往在网页中分章节使用书签。在网页中使用书签的步骤分为两步：第一步是先定义书签，即在网页中的每个章节位置上先定义一个书签；接下来是使用书签，即定义一个超链接到该书签。具体操作步骤见课本任务五为网页建立超级链接

任务描述：在网页布局中，框架布局是比较常用的网页布局技术之一。框架技术可以将不同的网页文档在同一个浏览器窗口中显示出来。因此，框架技术经常被用于实现页面文档的导航。用户可以直接通过导航条切换到想要浏览的页面，而不必每一次都翻一个页面，且各个框架之间互不干扰。要求制作一简单的框架型网页，效果如图7-27所示。任务分析：框架的功能有点像windows操作系统的“资源管理器”，在窗口的一边显示目录，另一边显示内容。想制作框架网页，要掌握FrontPage2003中框架网页的建立、属性修改、增加新框架、在框架中添加基本的网页元素等知识知识点：创建框架增加新框架修改框架属性任务六制作框架网页

7.6.1创建框架框架是在同一浏览器窗口中显示多个相互隔离的HTML页的结构。使用框架是进行网页布局设计的一种重要手段。也就是把Web浏览器的视窗分成几个部分，每个部分都是独立的Web页面，这样便可同时显示多个页面。为了创建具有框架的Web页面，可从工作区右边的“新建任务窗格”中选择“其他网站模板”命令，打开“网页模板”对话框，选择“框架网页”选项卡，如图7-28所示，从中可选择不同类型的框架模板，按“确定”按钮即可创建一个具有框架的网页。单击各个框架中的“新建网页”按钮，完成空白框架网页的创建，注意：在创建有框架的Web页面时，应注意有些web浏览器不支持框架。虽然使用不能显示框架的浏览器的用户已很少，为确保这些用户仍然能够浏览到Web站点上的内容，可以填上要告诉那些低版本浏览器的使用者的话，例如请对方更换浏览器等。在新建的框架窗口中，单击“设置初始页”按钮将会弹出“创建超链接”对话框，可以链接到一个指定页面；单击“新建网页”按钮将创建一个新页面，然后在该页面内对该页进行编辑。在编辑页面时，若感觉页面被放在一个狭窄的框架中太拥挤，可选择“框架”菜单中的“在新窗口中打开网页”命令，这样便打开一个新的满屏窗口，可以自由地在页面中增加内容。任务六制作框架网页

7.6.2增加新框架要给框架页面增加新框架，就是像拆分表格的单元格一样，把一个框架分为两个框架。其操作方法如下：（1）按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。（2）也可以通过命令来操作：首先单击要拆分的框架内部，选择“框架”→“拆分框架”菜单命令，在弹出的“拆分框架”对话框中单击“拆分成列”或“拆分成行”单选按钮，单击“确定”按钮即可。

7.6.3删除框架若框架页面看起来太乱，可删除某些框架。要删除一个框架，可先单击该框架选择它，再选择“框架”菜单中的“删除框架”命令即可。任务六制作框架网页

7.6.4修改框架属性在设置好框架的整体布局后，还可以对每一框架的具体属性进行设置，操作如下：（1）单击需设置属性的框架，选择“框架”→“框架属性”菜单命令，弹出“框架属性”对活框，如图7-30所示。（2）在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在例览器中可以调大小”复选框，则在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。（3）在“框架大小”区域中，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。（4）要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。（5）单击“框架网页”按钮，则弹出“网页属性”对话框。（6）在该对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。（7

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论