网络基础实验五 网页设计.docVIP

实验五 网页设计 一、实验目的 掌握用FrontPage设计网页基本方法。 二、实习内容 1．启动FrontPage，新建网站，建一个“只有一个网页的网站”。 1）主页文件名为index.htm，主页内容如图5.23所示。其中“XXX 个人主页”中的“XXX”是制作者的姓名，设计时用表格将网页中的文本、图片等元素分隔定位。 如图5.23主页文件设计示意 2）在“XXX 个人主页”标题右上方放置一个“贵大学生电脑课堂”自制图形。在下方放置一个动态效果的字幕，字幕内容为“欢迎光临我的网站”，动画表现方式为“交替”，字幕背景及文本颜色自定。 3）在滚动字幕下面插入一个一行两列的表格，表格线宽为0。在表格中插入系统日期，日期能随着网页打开日期改变。 4）在日期下面插入一条水平线。对水平进行高度、颜色等设置。 5）在水平线下方再插入一个一行三列的表格，表格线宽为0。在其单元格中分别输入“小生自传”、“图片欣赏”和“教程在线”。 ①将“小生自传”设置超链接，链接到Main1.htm文件，该网页文件的内容为： 自我介绍的文本内容。 一张图片。 一个创建了超链接的可以返回主页的按钮。返回按钮可用文字、自绘图形、图片等。 ②将“图片欣赏”设置超链接，链接到Main2.htm文件，该网页文件的内容是一些图片及图片说明。图片及文字说明用表格定位。 ③将“教程在线”设置超链接，链接到Main3.htm文件。该文件内容为： 按照图5.24所示样张，以“垂直拆分”框架方式设计本网页。左框架网页名称为main31.htm，右框架网页名称为main32.htm。 图5.24 创建垂直拆分式网页示意 【知识点提示】 框架网页的创建，通过执行“文件|新建”命令，打开“新建”任务窗格，点“其他网页模板”打开“网页模板”对话框，选“框架网页”选项卡，然后在其对话框中选择“垂直拆分”，如图5.25所示。 图5.25设置框架网页为“垂直拆分”示意 点“确定”后出现如图5.26所示的左右两个网页，分别对网页进行设置。 图5.26左右两个网页显示 6）再插入一个五行三列的表格，在表格左边单元格中依次输入“友情链接”、“贵大网站”、“教育网站”、“网易”。将“贵大网站”链接到 ; “教育网站”链接到；“网易”链接到。 7）将表格第二列单元格合并，在其中插入图片。 8）将表格第三列单元格合并，在其中插入表单，其中用户名最多8个字符，密码最多可有6个字符。表单提交后送到一个E-mail信箱，地址是：dxwyfdrx@163.com。 【知识点提示】 设置用户名文本框中的字符个数的操作方法是：用鼠标右击文本框，执行菜单中的 “表单域属性”命令，在弹出的“文本框属性”对话框，在其中进行设置，如图5.27所示。同样可在“文本框属性”对话框中设置密码字符个数等。如图5.28所示。 图5.27“文本框属性”对话框 图5.28设置密码示意 将表单提交送到E-mail信箱的设置步骤为：用鼠标右击表单空白处，执行菜单中的 “表单属性”命令，弹出“表单属性”对话框，如图5.29所示。选中“发送到”按钮，然后在“电子邮件地址”文本框中输入电子邮件地址。 图5.29输入电子邮件地址