网页制作动态流程简介

2022-07-12 17:14:16   第一文档网     [ 字体: ] [ 阅读: ] [ 文档下载 ]
说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。下载word有问题请添加QQ:admin处理,感谢您的支持与谅解。点击这里给我发消息

#第一文档网# 导语】以下是®第一文档网的小编为您整理的《网页制作动态流程简介》,欢迎阅读!
网页制作,流程,简介,动态

实训13 FrontPage网页制作

1.实训目的

掌握FrontPage网页制作的基本方法。

掌握设置网页超链接、滚动字幕、悬停按钮等操作方法。 掌握网页浏览的方法。 2.实训内容

FrontPage的启动与关闭。 制作简单的网页。

对制作的网页进行编辑和修饰,效果如图11-34所示。



11-34 效果图



3。实训步骤 1)创建网页

启动FrontPage应用程序,单击“文件”下拉菜单中“新建”命令,弹出“新建”任务窗格,选择“新建网站”选项区的“由一个网页组成的网站,弹出“网站模板”对话框,选择“常规”选项卡中的“只有一个网页的网站”模板,如图11-35所示。

单击“确定”




11-35 “网站模板”对话框



2)保存网页

单击“文件”菜单中的“另存为”命令,打开“另存为”对话框。 选择保存位置“我的文档\我的个人网站”,在“文件名”文本框中,输入“index,在“保存类型”下拉列表框中,选择“网页”选项。单击“更改标题”按钮,将网页标题改为“我的个人主页”,单击“保存”按钮。

3)插入滚动字幕

将光标定位于网页第一行位置。

单击“插入”菜单下的“Web组件”命令,弹出“插入Web组件”对话框,选择“动态效果”中的“字幕”,单击完成。

弹出“字幕属性”对话框,在“文本”框中输入“欢迎光临我的个人网站”,单击“样式”按钮,弹出“修改样式”对话框,再单击“格式”按钮,选择“字体”选项。

弹出“字体”对话框,设置字体为隶书、加粗、36pt、紫红色,然后按“确定”返回。 单击“预览”视图,可观看字幕效果。 4)插入水平线

回到“设计”视图后,换行将鼠标指针置于第二行位置。 单击“插入”菜单下的“水平线”命令。 双击水平线,打开“水平线属性”对话框。

设置宽度为100%,高度为5像素,水平居中对齐方式,颜色为紫色。 5)插入表格

将鼠标指针置于水平线的下一行,单击“表格”菜单中的“插入”“表格”命令,弹出“插入表格对话框。

在“大小”选项组中,设置表格的行数为4,列数为3 “布局”选项组中,设置表格的对齐方式为“居中”边框粗细为1单元格间距为1指定宽度为650像素,指定高度为500像素。

单击“确定”按钮,一个表格便插入了网页中。

选中表格第一列,单击右键,弹出一快捷菜单,选择“合并单元格”命令。 在合并后的单元格中单击右键,再弹出的“快捷菜单”中选择“单元格属性”,在弹出的“单元格属性”对话框中作如下设置:对齐方式为居中,指定宽度为100像素,指定高度550像素,行跨距为4,列跨距为1,背景颜色为粉色。


单击“确定”按钮,返回网页中。 6)设置字体格式。 在刚才的单元格中输入“我的个人主页”(每个字后均用回车换行)然后选中这几个字。 单击右键,在弹出的“快捷菜单”中选择“字体”,弹出“字体”对话框,作如下设置:字体为华文彩云,字形加粗,大小7磅,颜色为紫红色,设置完后,单击“确定”按钮。

7)编辑表格

选中表格的第二列,单击右键,选择“单元格属性”命令,将指定宽度设为280像素,指定高度设为100像素,行跨距设为1,列跨距设为1,单击“确定”

将第二列的四个单元格,利用“单元格属性”对话框,分别设置背景颜色为:淡紫色、乳白色、淡紫色、乳白色。

单击“确定”按钮。 8)插入悬停按钮。

在表格第二列的前三个单元格中,“插入”Web组件”的“动态效果”中的“交互式按钮”,三个按钮的文本分别为“自我介绍”“给我留言”和“跟我联系”

这三个按钮可分别链接到相应的其他网页,点击“链接”框后面的“浏览”,选择实现作好的其他网页。

选择“字体”选项卡,将三个按钮都作如下设置:“悬停时字体颜色”为紫红色,“按下时字体颜色”为蓝色。

单击“确定”按钮后回到网页中,可在“预览”视图中观察效果。 在第二列第四个单元格中可直接输入“网页尚在建设中”文字说明。 9)插入图片

选中表格的第三列,单击右键,在快捷菜单中选择“合并单元格”命令。

将鼠标停留于刚合并后的单元格内,在其“单元格属性”对话框中将指定高度设置为750像素。

在此单元格内执行“插入”“图片”操作,从来自文件中选择一幅已保存的图片。 单击“确定”按钮。

10)保存网页,单击“保存”按钮,保存网页。

11)测试网页,单击常用工具栏中的“预览”按钮,可在浏览器中观看网页的效果。


本文来源:https://www.dywdw.cn/532bd1ee86254b35eefdc8d376eeaeaad1f31635.html

相关推荐
推荐阅读