网页制作分析和总结.docx

网页制作(二)

1、网站的规划？

打开FrontPage，假设我们今天的主题是“我的科普小家”，该准备哪些内容呢？

。。

（1）栏目设置

我们来看书的目录，每一章第一节要讲的内容，都交待的十分清楚。网站也是如此，先纲后目。这样的目的既为了突出重点，也是为了方便用户。

(2)版面设计

前面我们知道版面的布局有9种样式，“我的科普小家”应该选用哪种布局？

。。

采用综合型布局。

我们看到图4—6已经给出了该网站的版面布局图。现在我们一起来学习站点的建立。

建立站点

（1）步骤

①启动FrontPage软件；

②文件?新建?站点；

③选择“空站点”，并指定新站点的位置

(2)作用

为什么创建站点呢？请大家阅读一下课文，然后用自己的理解回答我。

将保存位置设为当前站点文件夹；使用了非本站的资源，会自动保存起来；可以通过文件列表来管理，系统会给出相应提示。

[教师]边解释边操作。

[生]观察，模仿，尝试操作。[目的]体会建立的过程。

在站点中产生了两个文件夹，他们有什么用？学生思考，回答。

下面我以主页为例，然后大家把这个网站补充完整。

利用表格进行主页布局

①文件->打开站点

②文件?新建?网页?普通网页?以“index.htm“保存。

③表格?插入?表格。规格：4行1列，宽度650像素。

④在表格1的第一行中，插入1行2列，宽度100%的表格用来放置徽标与横幅，两列宽度为152和466像素，单元格间距为6。

注意：像素在单元格属性中设置，鼠标右键。

⑤在表格1的第二行中，插入1行1列，宽度100%的表格用来放置导航栏。

⑥在表格1的第三行中，插入3行4列，宽度100%的表格，四列宽度分别为160、15、

400和65像素。用来放置点缀信息与主要内容。

⑦在表格1的第四行中，插入1行4列的表格用来放置主页脚注。4．添加元素

添加徽标和横幅

①表格2?左边单元格?插入?图片->来自文件；

②表格2?右边单元格?插入?FLASH影片文件。

添加导航栏和背景

①表格3：背景颜色为土黄色，水平对齐方式为水平居中。

②输入所有栏目名称，在栏目间插入一个垂直线（或可以再插入一个表格）。

③将导航栏下的表格4第一行与第三行的所有单元格背景颜色设为浅灰。

④将表格4第二行的最左边的单元格背景高为浅灰。

添加点缀信息和网页脚注。

①在表格4的第二行第一列插入一个20行1列，宽度100%的表格（表格6）。

②在表格6中添加“开心一刻”、“特别提醒”、“常用站点链接”等内容。

③在表格4的第二行第二列插入修饰图片，将“垂直对齐方式”设为“顶边对齐”。

④在表格4的二行四列添加文字图片“我的科普小家”。

⑤在表格5中加入脚注。

嵌入iframe框

①光标定位在表格4的二行三列（“主要内容区域”）

②插入 HTML。若无，则在工具 自定义 插入 HTML中找出。

③在弹出的对话框中，输入图4-14的代码。

设置网页的标题与背景

①在普通视图下，右击“网页属性”

②标题为“欢迎光临E代科技”，背景图片为花边图。

设置超链接

①选择相应文字，插入 超链接，选择相应网页

②目标框架 aaa（前面设置的iframe框架）。注：事先建立好要链接的网页。

③表格 插入 表格。规格：4行1列，宽度650像素。

④在表格1的第一行中，插入1行2列，宽度100%的表格用来放置徽标与横幅，两列宽

度为152和466像素，单元格间距为6。

注意：像素在单元格属性中设置，鼠标右键。

⑤依将完成其他超链接。

任务；下面请同学们把这个网站补充完整，可以和他人使用完成。