| 网站首页 | 文章中心 | 电子书下载 | 矢量图库 | 视频教程 | 素材下载 | 程序代码下载 | JS代码 | 论坛 | 
龙腾教程网  
常用软件类:
|杀毒安全 |联络聊天 |网络软件 |多媒体类 |系统工具 |图形图像 |系统工具 |应用软件 |行业软件
开发设计类:
|动画制作 |图像处理 |3D设计 |操作系统 |站长学院 |网络相关 |WEB设计 |数据库类 |程序开发
 
  您当前位置:您现在的位置: 龙腾软件教程网 >> 文章中心 >> WEB设计 >> Dreamweaver >> 实列效果 >> 文章正文>>>>>> 
Dreamweaver 8 设计网页框架模板教程
 框架是网页中经常使用的页面设计方式,框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域,实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作,让网站的结构更加清晰,而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面,作为框架结构的一个子框架的内容给整个网站公用。

   一个框架结构有两部分网页文件构成:

   框架(Frame):框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。

   框架集(Frameset):框架集也是一个网页文件,它将一个窗口通过行和列的方式分割成多个框架,框架的多少根据具体有多少网页来决定,每个框架中要显示的就是不同的网页文件。

   一、创建框架

   在创建框架集或使用框架前,通过选择“查看/可视化助理/框架边框”命令,使框架边框在文档窗口的设计视图中可见。

   1、使用预制框架集

   (1)、新建一个HTML文件,在快捷工具栏选择“布局”,单击 “框架”按钮,在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。

Dreamweaver 8 设计网页框架模板教程


  

 

(2)、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动,直至合适的位置,这样顶部和嵌套的左侧框架就完成了。



  2、鼠标拖动创建框架

  (1)、新建普通网页,命名后将其打开。

  (2)、把鼠标放到框架边框上,出现双箭头光标时拖拽框架边框,可以垂直或水平分割网页。

  二、、保存框架

   每一个框架都有一个框架名称,可以用默认的框架名称,也可以在属性面板修改名称,我们采用系统默认的框架名称topFrame(上方)、leftFrame(左侧)、mainFrame(右侧)。

   选择菜单栏>文件>保存全部,将框架集保存为index.html,上方框架保存为07.html,左侧框架保存为08.html,右侧框架保存为09.html。

   这个步骤虽然简单,但是很关键,只有将总框架集和各个框架保存在本地站点根目录下,才能保证浏览页面时显示正常。

   三、 编辑框架式网页

   虽然框架式网页把屏幕分割成几个窗口,每个框架(窗口)中放置一个普通的网页,但是编辑框架式网页时,要把整个编辑窗口当作一个网页来编辑,插入的网页元素位于哪个框架,就保存在哪个框架的网页中。框架的大小可以随意修改。

   1、 改变框架大小

   用鼠标拖拽框架边框可随意改变框架大小。

   2、 删除框架

   用鼠标把框架边框拖拽到父框架的边框上,可删除框架。

   3、设置框架属性

   设置框架属性时,必须先选中框架。选择框架方法如下:

   选择菜单栏>窗口>框架,打开框架面板,单击某个框架,即可选中该框架。

   在编辑窗口某个框架内按住Alt键并单击鼠标,即可选择该框架。当一个框架被选择时,它的边框带有点线轮廓

 

2. 设置框架属性

   选中框架,在属性面板上可以设置框架属性:框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。

   需要注意的是:1、框架是不可以合并的。2、在创建链接时要用到框架名称,所以我们要很清楚的知道每个框架对应的框架名。

[1] [2] 下一页


上一篇:
  • 上一篇文章:
  • 下一篇
  • 下一篇文章: 没有了
  • 收藏此文到百度搜藏 百度搜藏| 新浪VIvi| 365key| Younote| 博采中心| 你好BLOG| 亿友网摘| 和讯网摘|
    相关文章    
    Dreamweaver中编写CSS应该学会的技巧
    Nokia WML Studio Dreamweaver轻松制作WAP网
    Dreamweaver制作简单的网页下拉菜单
    Dreamweaver CS3中Spry详细区域的功能
    Dreamweaver CS3中Spry详细区域功能
    dreamweaver mx 制作网站留言本过程全解
    Dreamweaver MX制作各种网页鼠标样式技巧
    Dreamweaver制作自动关闭的网页
    Dreamweaver CS3 新功能介绍
    Dreamweaver定义模板批量制作web网页
     
     
     
    最新文章
    普通文章 Dreamweaver 8 设计网页框架模板最新文章
    普通文章 photoshop创意设计-梦幻的水上城最新文章
    普通文章 Photoshop设计3D商标图案最新文章
    普通文章 掌控Vista从控制面板说起最新文章
    普通文章 家庭组网智能综合布线最新文章
    普通文章 Photoshop绘制金黄的琥珀字体最新文章
    普通文章 卡巴斯基近20种实用技巧放送最新文章
    普通文章 PPLive播放 出现乱码花屏、虚拟内最新文章
    普通文章 3DSMAX制作神话人物-欧罗巴女神最新文章
    普通文章 Photoshop CS3制作GIF图像综述及最新文章
     
    热门文章
  • 没有推荐文章
  •  
     
    设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 

    版权所有2006-2008 龙腾教程网