Dreamweaver用框架建立网站把浏览器的显示空间分割为几个部分

所属分类: 网页制作 / Dreamweaver 阅读数: 1009
收藏 0 赞 0 分享

  有时看到一些论坛,左边是每个讨论区的名称,点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容,不过左右部分是独立显示的,比如拖动左边的滚动条不会影响右侧的显示效果。其实这是在页面中利用了框架技术,因此可以把浏览器的显示空间分割为几个部分,每个部分都独立显示网页内容。而且把几个框架结合在一起构成框架集,能够让页面具有更为丰富的效果。

  效果说明

  先建立两个页面,分别为“ myphoto.htm ”、“ mydiary.htm ”。前一个是相册页面,后一个是日记页面。再建立一个含有框架的页面,并添加导航栏。

  创作思想

  打开 Dreamweaver MX 2004 软件新建两个页面,在左边输入导航文字:“网站首页、我的日记、我的相册”,在每个相对应的页面输入相对应的文字,比如网站首页链接的页面内容,就输入“我的网站首页”。再建立一个新页面,单击【布局】中的框架图标,建立左右框架,然后保存页面,在左框架建立网站导航栏,在右框架随便输入文字,接着再次保存页面。

  操作步骤

  ( 1 )打开 Dreamweaver MX 2004 软件新建文件,具体操作如图 3-1 所示。

Dreamweaver如何用框架建立网站

  提示:也可使用快捷键 Ctrl + N 打开【新建文档】对话框。

  ( 2 )保存页面,保存时可以随意设置文件名称,比如输入“ myphoto (我的相册)”,如图 3-2 所示。

  提示:也可使用快捷键 Ctrl+S 打开【另存为】对话框。

  ( 3 )用同样的方法新建文件,并保存页面为“ mydiary (我的日记)”。

  ( 4 )接着再次新建文件,在页面中创建左右框架设置参数,并在左右框架中输入相应的文字,如图 3-3 所示。

  ( 5 )为了方便操作,先将该页面保存为 3 个不同名称的页面,如图 3-4 所示。

  ( 6 )设置页面的链接。首先设置“网站首页”链接,如图 3-5 所示。

  7 )接着是添加“我的日记”超链接,如图 3-6 所示。

  ( 8 )然后再添加“我的相册”超链接,如图 3-7 所示。

  ( 9 )在【文件】菜单中选择保存命令,保存全部页面,完成操作。

  使用框架时,读者务必要理解好框架的构成关系,才能很好地使用和控制框架。

更多精彩内容其他人还在看

DW怎么设置网站的背景图像?

Dreamweaver是一种强大的网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,今天小编为大家分享DW怎么设置网站的背景图像方法,不会的朋友可以参考本文,一起来看看吧
收藏 0 赞 0 分享

DW怎么做热点链接?dw热点链接制作方法图解

对于文字和图片(整图)的链接我们都知道通过属性面板可以设置,那局部图片需要链接出去,该怎么设置呢?下面小编就为大家详细介绍一下,来看看吧
收藏 0 赞 0 分享

dreamweaver怎么做一个简单的网页?

dreamweaver怎么做一个简单的网站?想做一个简单的网站,该怎么制作呢?今天我们就来卡看dreamweaver制作网站的一个步骤,感兴趣的朋友可以进来参考一下,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver怎么批量修改网页相同的内容?

Dreamweaver怎么批量修改网页相同的内容?比如想修改旺旺的副标题,有很多,而且是相同的,该怎么批量修改节省时间呢?下面我们就来看看Dreamweaver批量修改网页相同的内容的方法
收藏 0 赞 0 分享

dreamweaver cs6怎么新建HTML5格式的页面?

dreamweaver cs6怎么新建HTML5格式的页面?dreamweaver新建页面格式默认是xhtml1.0,现在想新建html5的页面该怎么办呢?下面我们来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver怎么在网页中显示一个圆角矩形?

Dreamweaver怎么在网页中显示一个圆角矩形?想绘制一个红色的圆角矩形,该怎么使用Dreamweaver实现呢?今天我们就来看看使用dw在网页中绘制红色圆角矩形的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

dreamweaver中怎么交互图像? dw制作鼠标经过图像换图的教程

dw中怎么交互图像?dw中想制作一个网页,当鼠标经过图像的时候,就自动换一个图像,该怎么换呢?下面我们就来看看dw制作鼠标经过图像换图的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

dreamweaver8调出新建、打开两个命令的快捷工具栏

今天小编为大家分享dreamweaver8调出新建、打开两个命令的快捷工具栏方法,教程很基础,适合新手来学习,推荐过来,来看看吧
收藏 0 赞 0 分享

DW在html中插入css样式方法

进行网页设计想要有一个好看的界面布局我们就得要使用到css样式,下面小编就为大家介绍DW在html中插入css样式方法,不会的朋友可以参考本文,来看看吧
收藏 0 赞 0 分享

8款替代Dreamweaver的开源网页开发工具

这篇文章主要为大家详细介绍了8款替代Dreamweaver的开源网页开发工具,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多