在Dreamweaver中巧用框架建立网站

2016-02-19 21:26 2 1 收藏

下面图老师小编要跟大家分享在Dreamweaver中巧用框架建立网站,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

【 tulaoshi.com - Web开发 】

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

  效果说明

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

  创作思想

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

  操作步骤

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

  提示:也可使用快捷键 Ctrl + N 打开对话框。

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

  提示:也可使用快捷键 Ctrl+S 打开对话框。

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

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

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

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

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

来源:https://www.tulaoshi.com/n/20160219/1626154.html

延伸阅读
标签: Web开发
在发布网站之前先使用Dreamweaver MX 2004 站点管理器对你的网站文件进行检查和整理,这一步很必要。可以找出断掉的链接、错误的代码和未使用的孤立文件等,以便进行纠正和处理。 步骤如下:在编辑视图点「站点」菜单>选“检查站点范围的链接”,弹出“结果”对话框,如下图: 下图是检查器检查出本网站与外部网站的链接的全...
标签: Web开发
在dreamweaver中,如果插入 Horizontal Rule (水平线),默认情况下这根线只是灰色,在很多情况下,这并不符合我们的要求。如果想要插入其他颜色的直线(甚至细到一个像素),该怎么办呢? 首先,在document window(网页编辑窗口)中的适当位置,插入Horizontal Rule, 按ctrl + F3 调出 Property inspector(属性面板), ...
标签: Web开发
“占位图形”顾名思义是在准备好将最终图形添加到 Web 页之前使用的临时图形。使用它可以在没有理想的图形的情况下先行制作Web页面——在需要使用图形的地方插入一个占位图形先“占领”着“地盘”。     一、插入占位图形     将光标定在需要插入图形的地方;选择:插入图像占位符即出现图像占位符对话框,...
标签: Web开发
iframe框架,虽然在浏览器兼容性上谈不上非常友好,但它的应用的确广泛。我们可以将它嵌在网页中的任意部分,这样对于提高网页排版的灵活性还是非常有好处。当然,iframe相关代码的书写还是令许多人头痛的,今天我们就通过 Dreamweaver的标签选择器来插入一个iframe框架,不需要你手工写一句代码的方法。 启动Dreamweaver CS3点击菜单插入&rar...
标签: Web开发
在DW8中创建代码片段--提高CSS布局开发效率 本文介绍的是如何在DW8中创建自定义的代码片段,以提高CSS布局开发效率,文章末端有演示代码下载。 如何创建 1.在DW8的代码片段中新建一个文件夹,命名为:CSS Navigation。 2.右键选中CSS Navigation,新建个代码片段,命名为:Nav01。 3.在对话框中写入代码。 使用时只要把代码拖到需...

经验教程

882

收藏

63
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部