网页设计与制作 教学课件 作者 耿杰 主编 第4章.pptVIP

网页制作与设计耿 杰荆州职业技术学院网络教研室 第4章 Dreamweaver MX 网页设计技术 Macromedia Dreamweaver MX 是一款专业级的可视化网页设计和网站管理工具，用于对Web站点、Web页和Web应用程序进行设计、编码、开发和维护。Dreamweaver MX是专业网页设计师最钟爱的网页集成工具。 教学重点与难点 站点创建 文本、图像应用 表格与层的应用 样式表 行为与时间线 框架 表单 多媒体对象与模板 4.1 Dreamweaver 简介 一、操作界面 Dreamweaver 4由两个部分组成，即 页面编辑器和站点管理器。 1.页面编辑器 分为五个部分：菜单栏、工具栏、控制 面板、文件工作区、状态栏。其中控制面 板有属性面板、对象面板、样式面板、帮 助面板等。 4.2 用Dreamweaver MX 建立Web站点 1、 创建站点 首先在磁盘上建立一个文件夹，比如 webdesign，此文件夹将是本网站的本地根目录。 2 、制作简单的网页 4.3 网页中文本的应用 网页就如同多媒体一样，文字和图形是两种基本的组成元素。当然，网页还可以包含动画、音视频，还可以接受用户的输入，根据用户输入返回特定的信息，这些都是传统的多媒体所不能比拟的。但是，文字才是网页最基本的要素。Dreamweaver MX 提供了丰富的文字处理功能，可以做出漂亮的文字效果。 1 、文字编辑 Dreamweaver MX 的文字编辑功能与一般字处理软件类似。在网页文档中输入一段文字，然后利用属性面板对文字进行格式设置。在格式选项中设置标题格式，在字体选项中设置文字字体，在大小选项中设置文字字号，在颜色选项中设置文字颜色，利用对齐方式按钮设置文字的对齐方式。对文字不应该使用过于复杂的格式，特别是字体设置，要考虑用户浏览器是否支持，一般来讲就选默认字体比较合适。 2、 HTML样式 通过设置HTML样式，可以快速一致地将字体格式应用于文档中的文本。HTML样式可由单个或多个HTML字体标签属性（如颜色、字体、大小）以及其他格式属性（如粗体或斜体）组成。例如，可以为字体为Arial、大小为 4号的绿色斜体文本创建一个HTML样式。然后选择希望应用该样式的文本，从“HTML样式”面板中选择该HTML样式即可为对象文本应用期望的样式。 3 、CSS样式 层叠样式表(CSS)是一系列格式规则，它们控制网页内容的外观。使用CSS样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。 CSS 样式使可以控制许多仅使用 HTML 无法控制的属性。例如，可以指定自定义列表项目符号并指定不同的字体大小和单位（像素、点数等等）。通过使用CSS样式和以像素为单位设置字体大小，可以确保以更一致的方式在多个浏览器中处理页面布局和外观。除了设置文本格式外，还可以控制网页中块级别元素的格式和定位。例如，可以设置边距、边框、其他文本周围的浮动文本等等。 4.4 网页中图像的应用 网页中图像是不可或缺的元素。精心设计、与文字配合协调的图像会使得网页图文并茂，更富生机和吸引力。在 Macromedia Dreamweaver MX 中，可以在“设计”视图或“代码”视图中将图像插入文档。 图形文件格式有很多种，在Web页中通常使用的只有三种，即GIF、JPEG和PNG。 1、 插入图像 2 、设置图像大小 3、 设置图像对齐方 4 、图像地图 5、用外部图像编辑器 4.5 表格和层 表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。是网页的一个非常重要的元素，我们往往借助表格实现网页的精细排版。表格由一行或多行组成；每行又由一个或多个列组成。 层是一种HTML页面元素。可以将它定位在页面上的任意位置。层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。因此，层也是一种非常有用的定位工具。 1、 创建表格 2 、设置表格属性 3、设置单元格、行和列属性 4、对表格进行排序 5、 表格的嵌套 6 、创建层 4.6 行为和时间线 行为和时间线可以用来实现动态HTMl效果。这里所讲的动态效果是指利用客户端脚本程序实现的动态效果，而非利用服务器端技术实现的动态网页。 。 1、 行为 行为是事件和由该事件触发的动作的组合。 事件是浏览器生成的消息，指示页面的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个 onMouseOver