chap4 网页设计工具-new

1、第四章 网页设计工具,主要内容,4.1 操作界面介绍 4.2 基本操作 4.3 构建站点和管理站点 4.4 模板 4.5 布局表格 4.6 层、行为、导航条 4.7 Timeline,2,Dreamweaver的使用 ,4.1 操作界面介绍,在 Windows 中首次启动 Dreamweaver 时，会出现一个对话框，您可以从中选择一种工作区布局。并可以使用”编辑”菜单“首选参数”对话框切换到一种不同的工作区。,设计人员工作区是一个使用 MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。建议大多数用户使用此布局。,3,Dream

2、weaver的使用 ,4.1 操作界面介绍,一、主要界面与基本操作,4,Dreamweaver的使用 ,4.2 基本操作,1、新建网页（注意建完先保存） 2、页面设置 3、字体排版 4、超链接编辑 5、清单和表格 6、插入图片、绘制热点 7、创建框架网页 Alt点击框架，设置框架页的属性 设置每个框架的name属性，实现框架之间的跳转,5,Dreamweaver的使用 ,框架,新建修改框架页进行相应拆分 可按住alt键，点框架边，建新框架 可拖动框架到父框架边缘，取消框架 设置框架集属性：点击框架分割边，设置对应框架集的属性 边框有或无、边框宽度、颜色等 框架大小 设置框架属性：alt点击对应

3、的框架页，属性面板中设置属性 设置显示的源文件 框架名称 设置每个框架的name属性，实现框架之间的跳转 实例：sy3/3-3 frameset.html,6,Dreamweaver的使用 ,4.3 构建站点和管理站点,1、定义站点 在在菜单栏选择“站点”|“管理站点”选项，弹出“管理站点”对话框，点击“新建”，按照提示进行设置。 2、编辑站点和操作站点 将站点连到FTP服务器上，并进行网页的下载和上传操作。 3、删除站点 4、创建站点首页 编辑站点的首页index.htm，将以往的作业链接到首页中。 5、查看站点文件和链接 当建立完首页之后，就可以编辑首页，然后添加与其相关的网页，网页之间的

4、相互链接可以通过站点管理器来查看,7,Dreamweaver的使用 ,4.4 模板,创建模板 空白模板 现有文档另存 编辑模板 使用模板 创建基于模板的文档 在现有文档上应用模板 将文档脱离出模板,8,Dreamweaver的使用 ,4.5 布局表格,1、布局设计概述 2、常见的几种布局形式 3、版面布局设计要求和实例 4、使用表格、框架和图层进行布局 5、使用布局模式进行布局,9,Dreamweaver的使用 ,4.5 布局表格 1、布局设计概述,版面：浏览器观看到的完整的一个页面。因各个用户的显示器分辨率不同，同一个页面的大小可能出现800*600像素、1024*768像素等等。目前， 1

5、024*768像素占多数。 一般分辨率800600下，页面的显示象素为780428；在1024768下，为1007600。设计中，向下拖动页面是唯一增加页面尺寸的方法，但最好不超过3屏，否则最好在上方做内部链接。 布局：指的是以最适合浏览的方式将图片和文字排放在页面的不同位置。布局设计的四个步骤： 方案设计：画出页面的结构草图 初步设计：把各个功能模块安排到页面上 技术设计：确定网站标志、题头和背景图等等。 定案设计：精细化、具体化,10,Dreamweaver的使用 ,4.5 布局表格 2、常见的几种布局形式,1、“”型布局, 主要为网站标志和广告条,主要为主菜单,主要为内容主窗口,杭州旅游

6、集散中心,11,Dreamweaver的使用 ,4.5 布局表格 2、常见的几种布局形式,2、“”型布局,主要为网站标志和广告条,主要为主菜单,主要为内容主窗口,主要为友情链接等,12,Dreamweaver的使用 ,4.5 布局表格 2、常见的几种布局形式,3、其他布局,盛大在线,13,Dreamweaver的使用 ,4.5 布局表格3、版面布局设计要求和实例,1、设计要求 整洁大方：各种元素的运用应适度 突出重点：突出主体内容 平衡对称：页面的上下左右应给人以任意匀称的感觉 风格一致：样式统一，配色合理 2、实例：详见书P90 页面尺寸 整体造型 页面题头 页脚 文本与图片,14,Drea

7、mweaver的使用 ,4.5 布局表格4、使用表格、框架和图层进行布局,1、使用表格进行布局 如何创建表格、选取表格、修改表格，详见P9395 进行布局设置，详见P9598 布局实例，P9899 2、使用框架进行布局 框架的创建 框架的保存，注意框架集和框架页的保存 框架的属性面板和框架集的属性面板 框架之间的跳转P103 3、使用图层进行布局（自学，P105）-要转换为表格,15,Dreamweaver的使用 ,4.5 布局表格 5、使用布局模式进行布局,1、布局模式 2、绘制布局表格和布局单元格 3、编辑布局表格和布局单元格 4、使用网格 5、内容添加，制作主页,16,Dreamweav

8、er的使用 ,绘制布局单元格,4.5 布局表格 5、使用布局模式进行布局,1、布局模式,标准视图,绘制布局表格,布局视图,若要使用布局表格和布局单元格，必须进入布局模式，在布局模式下，仅可以进行布局，不可编辑网页内容。,17,Dreamweaver的使用 ,4.5 布局表格 5、使用布局模式进行布局,2、绘制布局表格和布局单元格 P107,756px,105px,45px,190px,180px,564px,19px,18,Dreamweaver的使用 ,4.5 布局表格 5、使用布局模式进行布局,3、编辑布局表格和布局单元格 P108,19,Dreamweaver的使用 ,4.5 布局表格5

9、、使用布局模式进行布局,4、使用网格 P110,20,Dreamweaver的使用 ,4.5 布局表格 5、使用布局模式进行布局,5、内容添加 P111,21,Dreamweaver的使用 ,4.6 层和行为,一、层 层是网页中的一种容器，它可定位在页面上的任意位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。 1创建层 2层的大小调整 3层的移动 4层的属性面板 5层控制面板 6层的动态效果,22,Dreamweaver的使用 ,4.6 层和行为,1创建层 (1)在窗口菜单选“层”，或点插入菜单布局对象选“层”。 (2)在页面中显示一个层。 (3)通过周围的黑色调整柄拖动控制层

10、的大小 (4)拖动层左上角的选择柄可以移动层的位置。 (5)单击层标记可以选中一个层。 (6)在层中可以插入其他任何元素包括图片文字链接表格等。 一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单窗口菜单选“层”打开。,23,Dreamweaver的使用 ,4.6 层和行为,二、行为 行为是在网页中进行的一系列动作。行为包括事件和动作组成，是Dreamweaver最具有特色的功能之一。 事件是用于指明执行某项动作的条件，而动作实际上是一段执行特定任务的预先写好的javaScript代码，如打开窗口、播放声音等都是动作。 常见事件的一些解释 onClic

11、k 单击；onDbclick 双击 onKeypress按键；onMouseDown鼠标按下 onMouseOut鼠标移出；onMouseOver鼠标移上 onMouseUp鼠标抬起。,24,Dreamweaver的使用 ,例如：显示、隐藏跳舞小人 要素：一张图片、一个层（层内贴入跳舞小人） 实施步骤： 1）在层面板中，将该层设置成为隐藏（点击眼睛使其闭眼），可使该网页打开时不显示该层。 2）单击图片，打开行为面板（窗口菜单行为）。在行为面板按“+”号，在弹出菜单中选中显示-隐藏层。 3）其中设置onMouseOver事件为显示层，onMouseOut事件为隐藏层。,应用示例1：显示和隐藏层,

12、25,Dreamweaver的使用 ,例如：在网页打开时同时弹出另外一个窗口如广告窗口。 在设计窗口状态栏中选中标签 选择打开浏览器窗口行为，可设置弹出的新窗口的某些属性。 使用onLoad事件，弹出新窗口。,应用示例2：打开新窗口,26,Dreamweaver的使用 ,单击图片按钮，加入一幅原始图片，并设置标识名； 按“ + ”号按钮选择 “交换图像” ，在弹出的对话框中，选择用以切换的另一图像文件名，并选中 “预先载入图像” 和 “鼠标滑开时恢复图像” ； 由于指定了恢复初始图象的选项，在 Behavior 对话框中已经自动地增加了两个事件； 当 onMouseOver 时，交换图像事件被

13、触发；当 onMouseOut 时，交换图像恢复事件被触发。,应用示例3：切换图片,27,Dreamweaver的使用 ,要素：主菜单（文字、表格） 实施步骤： （1）为主菜单的文字设置超链接，因为单独的文本文字是无法添加行为的，按照 Dreamweaver 中的约定，将文字的超链接设置为“ JavaScript:; ”才能够添加弹出菜单这个行为。 （2）设置菜单项和子菜单项，并为菜单设置超链接，然后安排好各个菜单的次序 . （3）主要步骤见下图：,应用示例4：弹出菜单制作,28,Dreamweaver的使用 ,29,Dreamweaver的使用 ,30,Dreamweaver的使用 ,4.7

14、 TimeLine,Dhtml 通过 Jscript 或 Vbscript 语言来改变样式和位置的特性。 Timelines 利用 Dhtml 所提供的这项功能，随着时间的改变通过一系列连续的帧变换层的特性以形成动画。 （1）创建Timeline 将图像插入到层中，选中层，点击右键，选择“添加到时间轴” 拖动时间轴到终点时间，而后再拖曳图片，将其拖至终点位置。 在相应时间点插入关键帧，并将图片拖曳至对应位置。 （2）设置Timeline （3）为时间轴添加行为。,31,Dreamweaver的使用 ,4.8 其他效果设置,1Dreamweaver中加入竖直线的办法 应用表格 应用标记(宽wid

15、th，高size，颜色color) 2制作电子相册利用Flash Element这个功能图标 （1）首先在Dreamweaver的菜单栏下找到Flash Element这个功能图标: （2）.选择这个按钮之后，在Dreaweaver中生成一个Flash文件，需要制定这个自制的Flash文件的保存位置。 Flash文件在网页中的大小，可以随意调节。,32,Dreamweaver的使用 ,4.8 其他效果设置,33,Dreamweaver的使用 ,4.8 其他效果设置,（3）设置属性：右边Tag面板中CSS的变化，其中增加了ImageLinks和ImageURLs两个选项。 ImageLinks：若图片需要指向其它的文件做链接，要在ImageLinks添加链接的地址 ImageURLs：图片的来源位置 （4）设置图片的来源位置 选中ImageURLs，在旁边有一个小图标的下拉菜单，点击之后出现一个对话框，这里我们输入图片的来源位置,34,Dreamweaver的使用 ,4.8 其他效果设置,（5）设置链接，在ImageLinks中使用与ImageURLs同样的操作，在链接设置对话框中它默认了三个指向Macromedia的链接地址，每个地址和图片来源的文件是相对应的，