1、行为应用,Dreamweaver高级应用,应用篇,层叠样式表（CSS）,作业,Dreamweaver高级基础,基本概念添加行为应用示例,行为应用,行为是Macromedia预置的JavaScript程序库，利用行为能够使网页制作者不用编成而实现交互功能，即根据访问者鼠标的不同动作来让网页执行相应操作，例如打开一个浏览器窗口、信息反馈、验证表单等。行为是为响应某一个事件而采取的一个或多个动作，当指定的事件被触发时，将运行相应的JavaScript程序，执行相应得动作。行为是针对网页中的所有对象，所以要结合一个对象添加行为，而在创建行为时，必须先指定一个动作，然后再指定触发动作的事件。,行为应用,
2、 基本概念,行为是一种事件和动作的合成物，利用行为使网页具有交互功能。 每一个行为都包括对象、事件和由该事件触发的动作的组合，其中对象是网页上的某种元素，如HTML文档、文字、图像等，它是行为的产生者；事件是指访问者对网页进行的操作，如onClick（单击鼠标）、onMouseOver（鼠标经过）等；而动作则是指接受到事件的网页所执行的响应功能，如打开浏览器窗口、显示/隐藏层等。,事 件 列 表,行为菜单,在页面窗口中，选中要为其添加行为的对象，如某个图像或链接等；单击行为面板中的 按钮，从弹出的菜单中选择一个需要的动作；当选择动作后，会弹出一个参数对话框，设置好参数后，单击确定按钮；这时在行
3、为面板的列表中将显示添加的事件及对应得动作。如果该事件不是所需要的事件，可以单击该事件激活事件列表，单击事件列表下箭头打开事件下拉菜单，从中选择一个需要的事件即可。,行为应用, 添加行为,已选事件,对应动作,添加行为的对象,弹出消息（将事件Click OnLoad）图层与行为应用（行为 拖动层）交互窗口（ JavaScript ）,行为应用, 应用示例,应用示例-1,制作滚动字幕： 打开“插入/标签” HTML标签/页元素/marquee 输入要滚动的文字你好！ 选择标签属性： behavior(scroll、slide、alternate)行为（滚动、幻灯片、交替）,Dreamweaver高
4、级基础,应用示例-2,制作弹出式菜单： 打开“行为”面板 选择“显示弹出式菜单” 输入弹出式菜单项目 设置超级链接,Dreamweaver高级基础,Dreamweaver高级基础,基本概念CSS 样式面板创建CSS样式应用CSS样式,CSS应用（层叠样式表）,CSS（Cascading Style Sheet），中文为“层叠样式表”，简称样式表，它是一系列格式设置规则的集合，控制 Web 页面内容的外观。使用 CSS 可以灵活并更好地控制页面外观，从精确的布局定位到特定的字体和样式，CSS是一个非常灵活的工具，利用CSS可以将所有有关文档的样式指定内容全部脱离出来。,CSS应用, 基本概念,C
5、SS快捷视图按钮区,body设置的规则,CSS应用, CSS样式面板,创建新样式分为两种情况：为当前页面添加新的CSS样式；直接创建CSS样式文件，然后再被网页文档引用。,CSS应用, 创建CSS样式,创建CSS样式示例,打开Dreamweaver，选择“文件/新建”命令弹出新建文档窗口，选择“常规/基本页中的CSS”，单击创建按钮，进入新样式文档窗口。选择“文件/保存”命令弹出“另存为”对话框窗口，保存文档于当前站点的CSS文件夹中，文件命名为“ys1”。选择“窗口/CSS样式”命令，打开CSS样式面板，切换到“全部”选项卡。单击CSS快捷视图按钮区的“新建CSS规则”按钮 ，弹出“新建CS
6、S规则”对话框窗口。,CSS样式规则,CSS 格式设置规则由选择器和声明两部分组成：选择器是标识格式元素的术语（如 P、H1、类名或 ID）声明用于定义元素样式，由属性和值两部分组成。,定义规则,该CSS 规则为 H1 标签创建了一个特定的样式，即链接到此样式的所有 H1 标签的文本都将是 16 个像素大小、Helvetica 字体和粗体。,H1 font-size: 16 pixels; font-family: Helvetica; font-weight: bold; ,选 择 器,声明,属性,属性值,要修改的样式,选择操作,当前位置,编辑样式,页面属性 / 样式 / 管理样式 附加 ,
7、应用CSS样式编辑器 用代码实现,CSS应用, 应用CSS样式,StylesheetH1 font-size: 22pt; color: orange H2 font-size: x-large; color: red H3 font-size: large; color: blue I am heading1, yellow. I am heading2, red. I am heading3, blue.,嵌入样式表,标记名,属性,属性值,示例1,示例2,利用CSS创建动感文字,新建一个网页文档文件“sl7-2-2.htm”插入一个一行两列的表格，然后在左单元格中插入一幅图片、在右单元格中
8、输入“我爱你，中国！”。同时设置文字在单元格中居中对齐，表格边框为0。选择“文本/CSS样式/新建”命令，在弹出的“新建CSS规则”对话框窗口选择“类”，在名称文本框输入“dgwz”，在定义在选择“仅对该文档”。单击确定按钮，弹出“dgwz的CSS规则定义”对话框窗口，选择“分类”中的“类型”选项，“字体”设置为“华文中宋”，“大小”设置为60，“颜色”设置为#FF0000，“修饰”选择“闪烁” ，见图1。,单击应用按钮，再选择“分类”中的“扩展”选项，“滤镜”设置为Glow(Color= blue,Strength=20)，见图2。单击确定按钮，在文档中选中表格，然后在CSS样式面板中“所有规则”样式区中选择新建的dgwz样式，单击鼠标右键，在弹出的下拉菜单列表中选择“套用”命令。保存网页，并按F12键在浏览器中预览动感文字效果，此时表中所有元素都应用了该CSS样式，见图3。,图1,图2,图3,题目：自行设计并制作个人网站 要求：网站至少由6个独立的页面组成，每个页面的内容和风格自定；写出制作网站的实验报告，报告以Word文件格式编排，在实验报告中要有网页设计的规划和网页页面图，在页眉页脚中插入个人信息；提交作业包括：作品和网站设计实验报告。 注意：网页要充分体现Dreamweaver的应用特色,作 业,
