当前位置:首页 / 网页制作 / Frontpage教程 / FrontPage制作网站页面美化
FrontPage制作网站页面美化
芯晴素材特效 分类:Frontpage教程 发布日期:2018-04-10

通过模板建立的网页,常常预先置放了些标题栏、目录栏(一般叫导航栏),导航栏都是用很多元素组成的,结构上稍稍复杂一些。一般情况下我们不必要对这些东西进行低层次的修改,FrontPage也不允许操作者修改,但在某些项目上,我们还是可以根据自己页面的要求来修改。

操作 修改页面的主标题:在主页(index.htm)的页面上部,模板预置了一个名为“主页”的横幅标题,这个横幅标题和整个主页格格不入。点击横幅,按“Del”键删除,然后在同样位置插入一个事先准备好的横幅图片为主页标题。

操作 修改导航条的链接:在主页的左边,有一个导航条(目录栏),在建立站点的时候,导航条就建立了几个网站的链接。这些链接不能在网页窗口中修改,只能在站点管理的“导航”视图窗口中修改。但可以在网页视图窗口中给导航条添加链接。在导航条中点击鼠标,然后选择输入文字“给我写信”,设置文字的超链接,这里的链接地址设置的是我的邮箱地址“mailto:豆豆@yesky.com”。

操作 删除页面元素:在主页的右下,程序放置了一个LOG图片,这个图片和我的主页不符,选择该图片,按“Del”删除。

操作 给页面添加水平线:水平线对于规划页面有很大的作用,可以让页面清楚,简洁。在要插入水平线的位置点击鼠标,选择“插入/水平线”,水平线就出现了。注意,一般模板网页的水平线由程序自动设置外观属性。而其他情况下,将由操作者自己设置水平线的颜色,粗细等。

进一步学习的建议:页面长期编辑后,可能会留下垃圾(无效代码),如果想做得更专业一点,可以在HTML标签窗口修改源代码,或者使用其他网页制作工具休整。

表格

表格实际和文字、图片一样,是一个网页的基本元素,但表格在网页中,更大的用途是来规划页面。实际上,在网页编辑中,通过空格、段落、缩进等是很不容易规划好一个有很多元素的页面的,特别是图文混排的页面。

在FrontPage中添加常用的数据表格,和在Word中添加表格一样的方便,直接使用插入表格命令,然后填写数据就可以了。甚至还可以将Word文件中的? 粘贴进来。

操作 添加一个简单表格:在要插入表格的位置点击鼠标,选择“表格/插入/表格”,在弹出的对话框中设置表格的属性,然后选择表格的行数——2,选择表格的列数——1,然后指定表格的宽度,可以设置表格的宽度占网页宽度的百分比,或者直接设置表格的绝对宽度——像素。其他设置表格边框线的宽度为1,设置单元格间距为2。确定即可。

操作 在表格中添入文字:在表格中输入文字和在普通编辑页面中输入文字没有什么区别,另外,在生成主页模板的时候,程序在网页中添加了一个高级控件,可以自动显示网页的更新时间。将这个控件拖入到表格中。这样,一个显示网页制作者的表格就制作好了。

操作 设置表格的属性:表格的属性比较复杂,分成单元格属性和表格属性。选择表格,然后选择菜单“表格/属性/表格”,在弹出的窗口中可以设置表格的边框、背景、颜色等等。特别要说明的是表格的浮动,表格的浮动是设置整个表格的对齐方式,而一般的对齐方式是设置表格内的元素的对齐。

操作 图文混排:在需要的位置加入一个只有一个单元格的表格,并设置好其他属性。在表格中添加图片,并设置好表格的大小。再设置表格为“左浮动”,调整文字,让文字在表格的右边。这样,图文相配的混排就得到了。

进一步学习的建议:表格的操作比较复杂,需要反复的练习,学习如何用表格构造特殊页面,如何实现复杂的图文混排等等。

主题

经过以上过程,我主页制作也基本完成了。但页面的背景图、导航栏、颜色选择,边框等都不太令我满意,而这些都是模板自动设计的,而且不能修改。这个时候,就要使用主题了。

主题,就是FrontPage针对页面中的背景、导航栏、横幅、按钮、各种边框自动进行设置,主题的内容有几十种,操作者可以根据自己的喜好选择,这样,就可以省去自己分别对这些页面元素的设置。

操作 为网页指定主题:打开主页,选择“格式/主题”,弹出主题窗口。在主题窗口的左边,列出了可以选择的主题,默认的是“直边”,点击这些主题,可以在右面窗口查看该主体的风格,如横幅是什么样、是什么样的颜色、标题的样式、超链接的显示样式,导航条的样式等等。另外,还可以设置是否需要背景图片,是否使用鲜艳的颜色等。选择“渐蓝”主题,单击确定,即可在网页窗口看到效果了。

主题都是事先设计好的,如果你有什么特殊要求,而FrontPage又不允许你在网页编辑时修改,这个时候,可以自定义主题。

操作 测试网页和网站:现在,我的主页基本完成了,要实地测验一下主页和整个网站的情况,看页面显示是否正常,各个超链接是否正确,设计上还有什么缺陷。打开要预览的主页,然后选择“文件/在浏览器中预览主页”,这样,我就看到了我精心设计的主页的真正模样了。测试的时候,要仔细看页面的各种元素,看是不是有不正确的地方。多改变一下浏览器的一些相关设置,如字体大小、全屏、缩放窗口。点击页面上的超链接,看是否能跳转到正确的页面。另外,最好将整个网站文件夹复制到其他机器上,看是否正确,特别是字体显示是否正确。

操作 查看网站报表情况:在视图窗口选择“报表”图标,打开报表窗口,在这个窗口,可以看到整个网站的一些统计数据。仔细查看这些数据,看看有没有什么问题,如无效的超链接等。如果一切没有问题,就可以发布了。

进一步学习的建议:网页的美化是一个经验和修养的问题,一方面多实践,另一方面多看优秀的网页。另外,网站的测试很重要,要摸索和掌握这方面的经验和技巧。

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

链接上的透明的鼠标悬停提示

2013-01-08   浏览:7817

jq.nivo.slider网页焦点图

2017-03-17   浏览:394

jQuery轻量级京东图片轮播网页下载

2017-03-13   浏览:505

html5鼠标点击页面放烟花特效

2017-03-14   浏览:612

jQuery+CSS3自动轮播焦点图

2017-03-15   浏览:166

边框流动发光的表格,霓虹灯效果

2013-01-09   浏览:7730

6个炫目的CSS渐变背景特效演示代码

2013-01-03   浏览:8263

两行CSS代码实现的感应鼠标图片放大效

2013-01-17   浏览:8176

仿苹果CoverFlow图片切换特效

2017-03-14   浏览:123

响应式jQuery图片轮播插件

2017-03-17   浏览:361

jQuery小图预览幻灯片

2017-03-18   浏览:134

JS实现文字从页面顶部掉下来的效果

2013-01-11   浏览:8439