当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > DW MX实例四:嵌入式框架的妙用

Dreamweaver
Dreamweaver CS3网页制作之CSS布局规则
Dreamweaver CS3网页制作之布局实例
Dreamweaver生成新页面css的类失效
Dreamweaver CS4 JavaScript的部分新特性
Dreamweaver CS4安装试用以及截图
Dreamweaver CS4新增相关功能介绍
Dreamweaver制作网页时使用CSS的事项
Dreamweaver关于字符与编码的错误
Dreamweaver表格宽度辅助线怎么除掉?
Dreamwaver设计div层的对齐方式
DW教程之CSS网页制作实例:固定宽度布局
DreamWeaver正在走向死胡同
Dreamweaver CS3中的CSS布局规则
Dreamweaver套用源格式命令应用技巧
Dreamweaver使用过程中的常见问题
Dreamweaver教程:如何取消Dreamweaver表格宽度辅助线
Dreamweaver CS3网页制作中的CSS布局规则
制作网页中设计段落缩进的方法
DW的源代码视图按空格代码提示功能消失
dreamweaver出现翻译器没有被装载错误

Dreamweaver 中的 DW MX实例四:嵌入式框架的妙用


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 120 ::
收藏到网摘: n/a

  正确使用嵌入式框架可以给网站的创建带来许多方便,比如当单击某个在线播放的 MP3 文件时,就可以使用嵌入式框架进行局部刷新。

  效果说明 建立文件,以大型网站的链接作为实例,当单击链接时,该网站的内容就会出现在表格中,供用户浏览。

  创作思想 打开 Dreamweaver MX 2004 软件新建页面及表格,表格的第一行为导航栏,第二行为内容显示,在第二行中插入嵌入式框架代码。

  操作步骤

  ( 1 ) 打开 Dreamweaver MX 2004 软件新建文件,如图 4-1 所示。

  

  
Dreamweaver


  ( 2 )为了便于操作,先保存页面,如图 4-2 所示。

  
Dreamweaver


  ( 3 )为了使页面美观,可插入表格,如图 4-3 所示。

  
Dreamweaver


  ( 4 )添加导航文字并设置表格参数,如图 4-4 所示。

  
Dreamweaver
  ( 5 )插入如下嵌入式框架代码,如图 4-5 所示。

  
Dreamweaver


  <iframe width=500 height=400 name=main frameborder=0 src=http://www.doking.cn scrolling="auto"></iframe>

  (读者可打开【光盘】|【源文件】|【实例 4 】|【 4.1.txt 】文件,直接复制获得)

  提示: iframe 的参数中 width 表示宽度, height 表示高度, name 表示名称, frameborder 表示边框, src 表示默认网址, scrolling 表示是否显示页面滚动条。

  ( 6 )设置文字“网易”的链接。当单击“网易”二字时,嵌入式框架的内容就会跳转到网易页面,如图 4-6 所示。

  
Dreamweaver


  图 4-6  创建文字的超链接

  ( 7 )接着用相同的方法为“ 21CN ”和“新浪”建立超级链接,注意【目标】参数一定要设置为“ main ”。

  ( 8 )保存文件,完成操作。

  本例是用一些网站的首页来做链接案例的,一般这个技术适用于某些相关内容之间的浏览,如一个教程案例需要几个页面显示,那么这几个页面间连接就可以用此技术来实现。