4


主页 | 上一层

 










1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

实验四 网的设计与网页制作(二、三

实验目的:通过 本实验掌握在FrontPage中表格、共享边框、主题、导航等的运用方法

实验器材:装有FrontPage2000/XP的计算机 FTP服务器

实验原理:

在前一次实验的基础上,进一步深入学习FrontPage2000/XP制作网站和网页的技术,这些技术包括表格的插入和修改、共享边框和主题、DHTML、CSS、框架页面。

表格是网页设计中应用得非常广泛的排版技术,通过表格的灵活运用,可以使页面上的文字图片按设计的要求来定位排版。通过设置表格的粗细为零可以隐藏表格。

共享边框则是FrontPage中的一个重要特色,通过应用共享边框,可以使某些内容,如导航措施自动在所有的页面上呈现。

而FrontPage中的主题则可以使整个网站所有页面具有外观上的一致性,简单修改网站所使用的主题,可以迅速改变网站所有主体的外观。

DHTML则可以灵活地用来设置文本和图片的动态效果。

CSS的灵活运用,可以通过一个文件就简单地改变网站的各种样式,如字体、颜色等。

最后框架页面则是网页设计中的一种早期的技术,通过一个框架页面,可以把多个页面同时用一个页面呈现出来。用FrontPage可以实现所见即所得的方式来编辑制作框架页面。

实验步骤:

1.表格

1.1 打开上一个实验制作的“自我介绍”页面,执行“表格/插入/表格”。在弹出的对话框中选择2行2列。

1.2 在1行1列中输入姓名出生年月等

1.3 在1行2列中插入一幅照片

1.4 在2行1列中输入“我的简历”

1.5 在2行2列中输入我的同学的名字,并给每个名字添加相应的超链接。

1.6 鼠标移到表格中任意一个位置,单击鼠标右键,在弹出菜单中,选择“表格属性”,在弹出的对话框中,选择表格粗细为0,对齐方式可以采用默认方式,也可以按需要灵活进行选择。

1.7 保存以后预览效果

2. 共享边框

2.1 打开主页,执行“格式/共享边框”

2.2 在弹出的对话框中选择“所有页面”,选择上(包含导航按钮)、下(包含导航按钮)

2.3 单击“确定”按钮以后,稍等一段时间,当工具栏上的停止按钮变成灰色以后,共享边框应用完毕,可以在浏览器中预览效果。

3.主题

打开主页,执行“格式/主题”,选中所有页面,再选择其中的一个主题,单击“确定”按钮以后,FrontPage开始应用主题,结束以后,可以在浏览器中预览效果。

4. DHTML

4.1 打开“我的兴趣”页面,在其中输入“我的兴趣是读书、运动、唱歌......”等文字。

4.2 然后选中所有文字,执行菜单命令“格式/动态HTML效果”

4.3 在“选择一种事件”中选择“网页加载”,应用中选择“波动”

4.4 在该段文字下面插入一个教师提供或自行挑选的图片

4.5 鼠标单击插入的图片,在DHTML效果中,首先选择“鼠标悬停”,然后选择“交换图片”,在最后一栏中选择另外一幅图片。

4.6 保存页面,在浏览器中预览效果

5. CSS

5.1 执行“文件/新建/网页模板”

5.2 在弹出的对话框中选择“样式表”标签,选择其中的“普通样式表”

5.3 在新建的css文件中间,单击“样式”,在弹出的对话框中,选择a:active,单击“修改”按钮,在弹出的对话框中单击“格式”,选在下拉菜单中的“字体”,将字体改为楷体,颜色改为红色,单击两次“确定”,回到“样式”对话框。

5.4 再按上述方法修改a:link a:visited ,颜色都为棕色,字体皆为“楷体”。修改<body>,颜色为蓝色。

5.5 将文件保存为mycss.css

5.6 打开主页,执行“格式/样式表链接”,在弹出对话框中,选择“所有页面”

5.7 单击“添加”按钮,选择刚才制作完成的样式表文件,单击两次“确定”按钮,回到网页编辑窗口。

5.8 保存文件,在浏览器中预览效果。

6. 框架

6.1 打开文件夹视图,在右边窗口中单击右键,选择“新建/文件夹”,将该文件夹命名为frame

6.2 双击打开该文件夹,在右边该文件夹内部单击右键,选择“新建/网页”,将该网页命名为1,标题也是2

6.3 依此方法,在该文件夹内再建一个网页,文件名为2,标题为2

6.4 在左边的文件夹列表中,单击文件夹frame,执行菜单命令“格式/主题”,选择“所选页面”,再选择“(无主题)”,确定以后,回到文件夹视图。

6.5 在左边的文件夹列表中,单击文件夹frame,执行菜单命令“格式/共享边框”,选择“所选页面”,去掉上 下两个选择,这样可以把该文件夹中所有文件的共享边框去掉。确定以后,回到文件夹视图。

6.6 执行“文件/新建”,选择“网页模板”,选择“框架网页”标签,再选择“垂直拆分”,新建了一个框架页面。

6.7 在框架页面的左右两边,分别单击“设置初始页面”,选择刚才创建的两个页面。

6.8 在框架页面中输入任意内容。

6.9 将框架页面保存到frame目录中,将其命名为frame.htm。

7.作业完成以后,按上次实验的要求上传到教师服务器中,作为作业。

 
  如果速度慢,可以尝试访问本站的镜像站点:
北方:http://www.chengzhi.net
南方: http://www.gz-info.com