网页设计工具
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
20
4.5 布局表格
5、内容添加 P111
——5、使用布局模式进行布局
Dreamweaver的使用
21
4.6 层和行为
一、层 层是网页中的一种容器，它可定位在页面上的任意位置，并 且其中可包含文本、图像、表单等所有可直接用于文档的元 素。 1．创建层
2．层的大小调整
3．层的移动 4．层的属性面板
编辑模板 使用模板 – 创建基于模板的文档 – 在现有文档上应用模板 – 将文档脱离出模板
Dreamweaver的使用
8
4.5 Βιβλιοθήκη Baidu局表格
1、布局设计概述 2、常见的几种布局形式
3、版面布局设计要求和实例
4、使用表格、框架和图层进行布局 5、使用布局模式进行布局
Dreamweaver的使用
5．层控制面板
6．层的动态效果
Dreamweaver的使用
22
4.6 层和行为
1．创建层
(1)在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对 象＞选“层”。 (2)在页面中显示一个层。 (3)通过周围的黑色调整柄拖动控制层的大小
(4)拖动层左上角的选择柄可以移动层的位置。
(5)单击层标记可以选中一个层。 (6)在层中可以插入其他任何元素包括图片文字链接表格等。
布局：指的是以最适合浏览的方式将图片和文字排放在页面的不同位置。
布局设计的四个步骤： 方案设计：画出页面的结构草图 初步设计：把各个功能模块安排到页面上 技术设计：确定网站标志、题头和背景图等等。 定案设计：精细化、具体化
Dreamweaver的使用
10
4.5 布局表格
1、“┏”型布局
——2、常见的几种布局形式
1、新建网页（注意建完先保存） 2、页面设置
3、字体排版
4、超链接编辑 5、清单和表格 6、插入图片、绘制热点 7、创建框架网页
Alt＋点击框架，设置框架页的属性
设置每个框架的name属性，实现框架之间的跳转
Dreamweaver的使用
5
框架
新建－－修改－－框架页－－－进行相应拆分 可按住alt键，点框架边，建新框架 可拖动框架到父框架边缘，取消框架 设置框架集属性：点击框架分割边，设置对应框架集的属性 边框有或无、边框宽度、颜色等 框架大小 设置框架属性：alt＋点击对应的框架页，属性面板中设置属性 设置显示的源文件 框架名称
9
4.5 布局表格
——1、布局设计概述
版面：浏览器观看到的完整的一个页面。因各个用户的显示器分辨率不同， 同一个页面的大小可能出现800*600像素、1024*768像素等等。目前， 1024*768像素占多数。 一般分辨率800×600下，页面的显示象素为780×428；在1024×768下， 为1007×600。设计中，向下拖动页面是唯一增加页面尺寸的方法，但最 好不超过3屏，否则最好在上方做内部链接。
（4）设置图片的来源位置
选中ImageURLs，在旁边有一个小图 标的下拉菜单，点击之后出现一个对 话框，这里我们输入图片的来源位置
Dreamweaver的使用
34
4.8 其他效果设置
（5）设置链接，在ImageLinks中使用与ImageURLs同样的操 作，在链接设置对话框中它默认了三个指向Macromedia的链接 地址，每个地址和图片来源的文件是相对应的，按照顺序输入 地址就行。
Dreamweaver的使用
35
4.8 其他效果设置
（6）其他参数设置：
BgColor是设置相册的背景颜色；
ImageCaptions是填写相册名；
TitleFont是设置相册名的文字字体； TilteSize是设置相册名文字大小；
Transtitions Type是设置图片出场方式的效果，在 下拉菜单中有很多特效 。
Dreamweaver的使用
28
Dreamweaver的使用
29
Dreamweaver的使用
30
4.7 TimeLine
Dhtml 通过 Jscript 或 Vbscript 语言来改变样式和位置的特性。 Timelines 利用 Dhtml 所提供的这项功能，随着时间的改变通过一系 列连续的帧变换层的特性以形成动画。 （1）创建Timeline 将图像插入到层中，选中层，点击右键，选择“添加到时间轴” 拖动时间轴到终点时间，而后再拖曳图片，将其拖至终点位置。 在相应时间点插入关键帧，并将图片拖曳至对应位置。 （2）设置Timeline
3、删除站点
4、创建站点首页 编辑站点的首页index.htm，将以往的作业链接到首页中。
5、查看站点文件和链接
当建立完首页之后，就可以编辑首页，然后添加与其相关的 网页，网页之间的相互链接可以通过站点管理器来查看
Dreamweaver的使用 7
4.4 模板
创建模板 – 空白模板
– 现有文档另存
一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也 可以相互重叠。层面板可以通过菜单「窗口」菜单＞选“层”打开。
Dreamweaver的使用
23
4.6 层和行为
二、行为 行为是在网页中进行的一系列动作。行为包括事件和动作组成， 是Dreamweaver最具有特色的功能之一。 事件是用于指明执行某项动作的条件，而动作实际上是一段执 行特定任务的预先写好的javaScript代码，如打开窗口、播放声 音等都是动作。 常见事件的一些解释 onClick 单击； onDbclick 双击
onKeypress按键；onMouseDown鼠标按下
onMouseOut鼠标移出；onMouseOver鼠标移上 onMouseUp鼠标抬起。
Dreamweaver的使用 24
应用示例1：显示和隐藏层
例如：显示、隐藏跳舞小人
要素：一张图片、一个层（层内贴入跳舞小人）
实施步骤：
1）在层面板中，将该层设置成为隐藏（点击眼睛使其闭 眼），可使该网页打开时不显示该层。 2）单击图片，打开行为面板（「窗口」菜单＞行为）。 在行为面板按“+”号，在弹出菜单中选中显示-隐藏层。 3）其中设置onMouseOver事件为显示层，onMouseOut 事件为隐藏层。
第四章 网页设计工具
主要内容
4.1 操作界面介绍
4.2 基本操作
4.3 构建站点和管理站点 4.4 模板 4.5 布局表格 4.6 层、行为、导航条 4.7 Timeline
Dreamweaver的使用
2
4.1 操作界面介绍
在 Windows 中首次启动 Dreamweaver 时，会出现一个对 话框，您可以从中选择一种工作区布局。并可以使用”编辑” 菜单－“首选参数”对话框切换到一种不同的工作区。
①
① 主要为网站标志和广告条 ②主要为主菜单
②
③
③主要为内容主窗口
杭州旅游集散中心
Dreamweaver的使用
11
4.5 布局表格
2、“┬”型布局
——2、常见的几种布局形式
①
② ③ ④
①主要为网站标志和广告条 ②主要为主菜单
③主要为内容主窗口
④主要为友情链接等
Dreamweaver的使用
（3）为时间轴添加行为。
Dreamweaver的使用
31
4.8 其他效果设置
1．Dreamweaver中加入竖直线的办法 应用表格
应用<HR>标记(宽width，高size，颜色color)
2．制作电子相册——利用Flash Element这个功能图标
（1）首先在Dreamweaver的菜单栏下找到Flash Element这个功能图标: （2）.选择这个按钮之后，在Dreaweaver中生成一 个Flash文件，需要制定这个自制的Flash文件的保存 位置。
12
4.5 布局表格
3、其他布局
——2、常见的几种布局形式
盛大在线
Dreamweaver的使用
13
4.5 布局表格——3、版面布局设计要求和实例
1、设计要求 整洁大方：各种元素的运用应适度
突出重点：突出主体内容
平衡对称：页面的上下左右应给人以任意匀称的感觉 风格一致：样式统一，配色合理 2、实例：详见书P90 页面尺寸 整体造型 页面题头 页脚
Dreamweaver的使用
15
4.5 布局表格
1、布局模式
——5、使用布局模式进行布局
2、绘制布局表格和布局单元格 3、编辑布局表格和布局单元格 4、使用网格 5、内容添加，制作主页
Dreamweaver的使用
16
4.5 布局表格 ——5、使用布局模式进行布局
1、布局模式
标准视图
Flash文件在网页中的大小，可以随意调节。
Dreamweaver的使用 32
4.8 其他效果设置
Dreamweaver的使用
33
4.8 其他效果设置
（3）设置属性：右边Tag面板中CSS的变化， 其中增加了ImageLinks和ImageURLs两个选 项。
ImageLinks：若图片需要指向其它的 文件做链接，要在ImageLinks添加链 接的地址 ImageURLs：图片的来源位置
Dreamweaver的使用
25
应用示例2：打开新窗口
例如：在网页打开时同时弹出另外一个窗口如广告窗口。
在设计窗口状态栏中选中<Body>标签
选择打开浏览器窗口行为，可设置弹出的新窗口的某些 属性。
使用onLoad事件，弹出新窗口。
Dreamweaver的使用
26
应用示例3：切换图片 单击图片按钮，加入一幅原始图片，并设置标识名； 按“ + ”号按钮选择 “交换图像” ，在弹出的对话框中， 选择用以切换的另一图像文件名，并选中 “预先载入图像” 和 “鼠标滑开时恢复图像” ； 由于指定了恢复初始图象的选项，在 Behavior 对话框中 已经自动地增加了两个事件； 当 onMouseOver 时，交换图像事件被触发；当 onMouseOut 时，交换图像恢复事件被触发。
文本与图片
Dreamweaver的使用 14
4.5 布局表格——4、使用表格、框架和图层进行布局
1、使用表格进行布局 如何创建表格、选取表格、修改表格，详见P93－95 进行布局设置，详见P95－98 布局实例，P98－99 2、使用框架进行布局 框架的创建 框架的保存，注意框架集和框架页的保存 框架的属性面板和框架集的属性面板 框架之间的跳转P103 3、使用图层进行布局（自学，P105）--------------要转换为表格
105px 45px
564px
信息分类
19px
Dreamweaver的使用 18
4.5 布局表格 ——5、使用布局模式进行布局
3、编辑布局表格和布局单元格 P108
Dreamweaver的使用
19
4.5 布局表格——5、使用布局模式进行布局
4、使用网格 P110
Dreamweaver的使用
Dreamweaver的使用
27
应用示例4：弹出菜单制作
要素：主菜单（文字、表格） 实施步骤：
（1）为主菜单的文字设置超链接，因为单独的文本文 字是无法添加行为的，按照 Dreamweaver 中的约定， 将文字的超链接设置为“ JavaScript:; ”才能够添加弹 出菜单这个行为。
（2）设置菜单项和子菜单项，并为菜单设置超链接， 然后安排好各个菜单的次序 . （3）主要步骤见下图：
设置每个框架的name属性，实现框架之间的跳转
实例：sy3/3-3 frameset.html
Dreamweaver的使用
6
4.3 构建站点和管理站点
1、定义站点 在在菜单栏选择“站点”|“管理站点”选项，弹出“管理站点” 对话框，点击“新建”，按照提示进行设置。 2、编辑站点和操作站点 将站点连到FTP服务器上，并进行网页的下载和上传操作。
设计人员工作区是一个使用 MDI（多 文档界面）的集成工作区，其中全部 “文档”窗口和面板被集成在一个更 大的应用程序窗口中，并将面板组停 靠在右侧。建议大多数用户使用此布 局。
Dreamweaver的使用
3
4.1 操作界面介绍
一、主要界面与基本操作
Dreamweaver的使用
4
4.2 基本操作
布局视图
绘制布局表格 绘制布局单元格
若要使用布局表格和布局单元格，必须进入布局模 式，在布局模式下，仅可以进行布局，不可编辑网 页内容。
Dreamweaver的使用 17
4.5 布局表格 ——5、使用布局模式进行布局
2、绘制布局表格和布局单元格 P107
756px
180px
190px
信息提示 课程介绍