首页 > 网站建设 >

框架网站制作实际操作经验分享

发布时间:2018-09-07 作者:深圳网站制作

 网站制作公司博纳网络在上篇文章中分享了静态网站制作如何使用字体,现在我们就如何制作框架网页经验进行编辑整理。希望能对您后期网站前端管理工作以及一些小的代码修改带来帮助。下面我们分别就框架网站制作流程以及所涉及到的工具介绍如下:

一、框架网站制作案例实战:
  制作框架页框架网页是非常实用的一种网页,特别适合架设聊天室、论坛等类型网站。下面结合框架技术和链接技术制作一个作品展示站点,整个站点浏览效果如图3.16所示

1.框架网页设计。本框架网页的设计目标是想把网页标题放在顶部,并固定不动,在网页的左侧放置导航条,右边作为网页的主体显示主要动态内容。有了初步的想法,不妨在具体动手之前把这样的设计想法画出来,如图3.17所示。图3.17 框架网页草图实现上述想法用框架技术是不错的选择,也可以选择其他实现技术和途径,但需要用到脚本编程,如用<iframe>标签或用CSS技术等来实现。但作为初次接触网页制作的您,用框架技术实现还是比较简单的。
主要技术参数如下:
? 框架集页面宽度为816像素。
? 需要用到框架集嵌套技术,类似表格嵌套效果。
? 先创建上下结构的框架集,上部框架高度固定为94像素,宽为816像素,无边框;下部框架高度为相对,宽为816像素,无边框。
? 在下部框架内嵌套框架集,嵌套框架集的左框架为固定宽度160像素,无边框;右框架宽度为相对,边框为默认。

2.制作框架分页面根据设计参数,下一步骤需要制作各个分页面,具体介绍如下。
(1)标题页(top.html)【操作步骤】

第1步,用Photoshop绘制网页图像,本例图像的大小为816×94像素,效果如图3.18所示。制作网页底图

第2步,在工具箱中选择【切片工具】,在【原稿】编辑窗口中根据网页编辑需要切分图像,如图3.19所示。 切分网页底图

第3步,选择【文件】|【存储为Web所用格式】命令,打开【存储为Web所用格式】对话框,对于该对话框可以保持默认设置,选择保存位置,单击【确定】按钮保存即可。Photoshop提供的这个全自动优化并导出网页图像是个非常实用的命令。

第4步,启动Dreamweaver,新建一个文件。选择【文件】|【打开】命令,打开第3步输出的网页图像,另存为top.html,要注意源图像切分图片保存文件     夹images和top.html文件的位置关系,即要处在同一文件夹中,否则会找不到。

第5步,在Dreamweaver编辑窗口中,把需要输入文本或插入图像等网页元素的切片区域设置为背景显示图像,方法是先根据单元格插入图像的大小,在【属性】面板中设置该单元格的大小,然后复制插入图片路径,再选中单元格,在【属性】面板中把该路径复制到【背景】文本框中,如图3.20所示。 编辑网页图像。

第6步,在最后一行单元格中嵌入一个JavaScript脚本文件,用来制作动态下拉菜单,感兴趣的读者可以参考本书示例,浏览效果如图3.21所示

(2)导航页(left.html)【操作步骤】

第1步,启动Dreamweaver,新建文档,保存为left.html。选择【修改】|【页面属性】命令,打开【页面属性】对话框,设置页面背景色为浅蓝色,靠近左上角对齐网页,如图3.22所示。图3.21 制作下拉菜单图3.22 【页面属性】对话框

第2步,插入一个2行1列的表格,设置宽为60像素,其他设置如图3.23所示。图3.23 插入表格

第3步,在表格的第1行中插入标题图片,在第2行中插入一个4行2列的表格,宽度为100%,如图3.24所示。根据设计输入文本和提示小图标,效果如图3.25所示。图3.24 插入嵌套表格图3.25 输入文本和图标
第4步,选中第2~4行所有单元格,如图3.26所示,切换到【代码】视图,会高亮显示选中单元格的代码,并在这段代码前输入“<tbodyid="Content4"style="display:none;">”,在后面输入“</tbody>”,详细代码如图3.27所示。图3.26 选中被控制的单元格图3.27 输入控制载体代码。

第5步,同时,在<head>和</head>之间输入一段JavaScript脚本,用来控制第2~4行单元格的显示,实际上该代码主要用来控制<tbody>和</tbody>标签中间包含的所有表格和元素显示和隐藏。代码如下(详细页面代码可参考本书示例源代码):深圳网站制作,关于如何制作框架网站的实际操作流程以及方法本文就介绍到这里。如果您喜欢这类型的文章,敬请持续关注本站。
 
文章标题:框架网站制作实际操作经验分享
本文地址:https://www.198bona.com/news/1330.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯