FrontPage简明教程:网页布局

2016-03-31 18:19 12 1 收藏

关注图老师电脑网络栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享FrontPage简明教程:网页布局教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - 软件应用 】

FrontPage简明教程:网页布局

  通常网页的布局使用到的是FrontPage中的表格和框架菜单栏里的命令。

  表格(TABLE)是将页面中的内容以表格的形式排列,常用于单一页面内图片与文字的安排,是最常用的布局命令。

FrontPage简明教程:网页布局 图老师

  图3.1

  框架(FRAMES)是在同一浏览器窗口中显示多个相互隔离的HTML页的结构。使用框架组织页面时,每个框架显示一个不同的独立页面或者图像,你可以将一些框架中的内容永远保留在浏览器窗口中,而其余窗口则发生改变。

FrontPage简明教程:网页布局

  图3.2

  表格的使用十分简单,一般经过如下步骤:

  § 插入表格

  § 修改表格样式

  § 填充内容

  一、轻轻松松插入表格

  点击表格菜单中的插入表格,在弹出的对话框中可以对所需表格的行列数及边框属性进行设置。插入一个大概样子的表格,自己调整它在整个网页中的位置,为之后填充内容做好准备。

FrontPage简明教程:网页布局

  图3.3

  二、对表格外观进行前所未有的美化

  鼠标左击已经插入的表格,弹出的菜单中选择表格属性选项。弹出的对话框可以让你对表格的外观进行设置。基本上除了行列数这些需要使用插入行列等菜单完成的功能,在此设置的大都和表格的外观有关。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)
FrontPage简明教程:网页布局

  图3.4

  FrontPage 2002的新功能:表格自动套用格式提供了快速和容易的方法,来创建具有专业外观的表格。用户可以选择他们想要使用的样式,可以自动更改表格的边框、底纹和颜色。使用新的填充表格,用户可以将一个单元格的内容快速地重复输入到该单元格右侧的单元格(向右填充),或输入其下面的单元格(向下填充)。当用户想要将相同内容复制到多个单元格中时,该功能将节约用户的时间。拆分表格让用户能够将任何位置的表格快速和容易地拆开。当用户想要在表格的各行之间添加文本或图形时,这会很方便。

  § 在 FrontPage 中编辑任何表格时,单击该表格,并从表格菜单中选择表格自动套用格式。从几个表格格式和设计中选择,以创建想要的外观。

  § 从表格菜单中单击插入,插入五个新行,然后选择行或列。在想要复制的内容下面,添加所需数量的行。选中想要复制的文本和想要填充的单元格。从表格菜单中选择表格填充,然后选择向下填充或向右填充,以匹配突出显示的单元格。

  § 在表格中间挑选一个单元格,然后从表格菜单中选择拆分表格。

  三、简单填充完内容。

  只需点击鼠标在表格中与插入的地方,就可以输入文字或者创建图像,或者导入文字图像等等,简简单单的操作之后,一张有条有理的网页就做好了。

FrontPage简明教程:网页布局

  图3.5

  与以往的FrontPage一样,在FrontPage 2002中可以非常方便地利用框架来组织页面。

  一般地,利用框架组织WEB页面需要经过如下步骤:

  一.创建框架

  二.设置框架属性

  三.设定初始页面

  四.确定框架间的调用关系

  一、创建框架原来如此轻松!

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)

  在FrontPage 2002中,点击新建图标旁的小三角调出新建网页模板选择窗口,选择满意的模板创建框架Web页面。如果没有模板符合需要,你可以选择最接近的风格,然后改变框架大小或者增加框架以得到想要的结构。

FrontPage简明教程:网页布局

  图3.6

  可以拖拉框架边改变框架大小;增加或删除框架则可以使用框架菜单中的拆分框架和删除框架命令。

  在这里我们建立一个目录框架页面。

  二、设置框架属性

  点击页面右键菜单中的框架属性,在弹出的对话框中设置框架属性。你可以指定框架名称、控制框架之间边界的大小、在一个框架内是否允许滚动等。

  在显示滚动条选项框中选择在该框架中是否允许存在滚动条。点击框架网页按钮进入该框架的页面属性设置窗口。在框架间距标签中设置框架之间的边界的宽窄,也可以取消显示边框的选项,不显示框架边框。记住,框架之间的边界越大,对于读者观看页面就越困难。

FrontPage简明教程:网页布局

  图3.7

  一般地,我们把左、右两个框架名称定义为contents(目录)和main(主框架)。

  三、设定初始页面

  作为Web设计者,你要决定当第一次出现框架页面时,在每个框架内显示哪个页面即初始页面。只要框架的初始页面存在于你的Web中,这个页面就能够在每次显示框架时自动出现在框架中。

  点击工作区域上的设置初始页面按钮,在对话窗口中设置初始页面。这时你可以选择点击原有文件中的浏览按钮查找需要的页面,或点击新建页面按钮直接在框架中新建一个页面。在这里我们新建一个页面。

FrontPage简明教程:网页布局

  图3.8

  四、组织框架间的调用关系

  在使用框架时一定会遇到如何处理框架间的调用关系的问题,即点击一个框架中的超链接后目的页面将会出现在哪一个框架内,或是新打开一个浏览器窗口。我们接着上面的例子来学习如何处理调用关系。

  现在,我们需要在左边的页面中加入超链接,选中页面中任一蓝色按钮作为加入超链接的对象,这时我们希望所链接的页面在调入时出现在框架main中。你会发现在设置超链接窗口的右侧有一目标框架按钮,点击按钮将出现目标框架窗口,在这个窗口中你可以随意设定目的页面将出现在哪个框架中。你可以直接在当前框架网页框中选择左或右框架作为目的框架。你也可以选择公共目标区框中的选项来确定目标页面的出现形式:

FrontPage简明教程:网页布局

  图3.9

  默认网页(main):目标页面将出现在默认目的框架中,默认目的框架可以在框架的页面属性设置窗口中设置。如果不加以说明,系统将按照默认目的框架调用目标页面。

  当前相同网页:目标页面将出现在同一框架中,也就是覆盖调用页面。

  整个网页:目标页面将覆盖整个框架页面,独立地出现在浏览器窗口中。

  新窗口:目标页面将出现在新打开的一个浏览器窗口中,而在原来的浏览器窗口中不发生任何变化。

  在上面的例子中,我们将Contents框架中所有链接的目的框架都设为main框架。

  好了,你已经能够在你的主页中利用框架来组织页面了!很简单,是吗?

FrontPage简明教程:网页布局

  图3.10

  新功能:FrontPage 2002现在支持由高级技术(例如 HTML 4)实现的功能,包括嵌入式框架、语言属性以及表单中的按钮和字段集。让这些特性帮助您做出更具动感和专业的Web站点

  从插入菜单中,选择嵌入式框架,然后选择设置初始网页并浏览到您的站点上或 Internet 上的任何 Web 页,(插入项的名称/地址应当出现在地址窗口中),然后单击确定。所选页将出现在 Web 页的框架中。通过选中它然后拖动角落,还可调整该框架大小。(连载)

来源:https://www.tulaoshi.com/n/20160331/2057372.html

延伸阅读
标签: Web开发
七、网页的排版 表格的使用之二 根据上面对表格和单元格的参数,我们可以做出以下的表格: 以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4 已经合并;单元格边距、单元格间距、表格线宽度都为10;表格的底色为灰色,单元格5的边框颜色为红色,单元格6的底色...
标签: Web开发
八、为网页增添互动效果 制作更复杂的互动效果 在Dreamweaver中,更复杂的效果是通过一个叫Behaviors的功能实现的,Behaviors的从字面上理解是“行为”,我们又称为事件的响应。通过网页元素的变化,如鼠标的移动、点击等“事件” (Events),触发弹出窗口,关闭页面等“响应”(Actions),就是一个事件的响应。而值得高兴的是,...
标签: Web开发
八、为网页增添互动效果 制作简单的互动效果 在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,原来的图片就切换为另一张图片,鼠标移开后,又恢复原来的模样,是怎么做的呢?在开篇的时候,提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在,我们就利用Dreamweaver制作这个最简单...
标签: Web开发
二.XSL的转换 1.将XML转换成HTML XSL是如何将XML文档转换成HTML文件的呢?我们来看一个例子,下面是XML文档的一部分: ?xml version="1.0" encoding="ISO8859-1" ? CATALOG CD TITLEEmpire Burlesque/TITLE ARTISTBob Dylan/ARTIST COUNTRYUSA/COUNTRY COMPANYColumbia/COMPANY PRICE10.90/PRICE YEAR1985/YEAR /CD ... 然后...
标签: PS PS教程
这种方法比较适合原图对比度比较高的情况,对于让人头疼的毛发和细小的地方处理起来效果特别好。 1、启动Photoshop,打开图片,按F7键打开通道调板,找一个对比度最强的通道为的是最好的和背景分离。本例选择蓝色通道。 2、复制这个通道,选择“图像→调整→反相(Ctrl+I)”。 3、打开“图像→调整→色...

经验教程

11

收藏

64
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部