网页设计第六章.pptVIP

网页制作与设计陈语林 梁建武 周诚 主编中国水利水电出版社 第六章 Dreamweaver网页设计技术 Dreamweaver是一套视觉化的网页开 发工具，利用它可以轻而易举地制作出跨 越平台和浏览器限制的充满动感的网页。 通过Dreamweaver 提供的“所见即得” 的友好编辑功能，编写ASP、JSP、CFML 甚至PHP程序，从而创建动态网站系统。 教学重点与难点 页面版面设计 使用资源面板 创建模板 6.1 Dreamweaver 简介 一、操作界面 Dreamweaver 4由两个部分组成，即 页面编辑器和站点管理器。 1.页面编辑器 分为五个部分：菜单栏、工具栏、控制 面板、文件工作区、状态栏。其中控制面 板有属性面板、对象面板、样式面板、帮 助面板等。 2．站点管理器的构成 站点管理器左侧窗口显示了站点地图， 右侧窗口显示了当前网站中的文件列表。 一般来说，在做站点时应先建立好站点， 再开始网页的制作，这样可以保证页面内 文件链接的正确性。 6.2 Dreamweaver 制作基础 一、创建网页 启动Dreamweaver 4，就会自动生成 一个白色背景的文件工作区，这里就是设 计和制作网页的地方，可以在这里输入网 页设计过程中所需要的文字、图片、表格、 Flash动画等。 网页的背景颜色的，以及文字的颜色都 是可以通过“Page Properties”设置的。 二、文字的编辑 可以直接在网页中输入文字，可以在 【Text】下设置文字的格式，如字体、字 号、颜色、粗体、斜体，段落居左、居中 及居右，添加项目符号及编号等。此外， 还可以利用HTML样式和CSS样式对文字进 行统一格式设置。 可以利用属性面板更改文字的大小、颜 色、字体等。 三、插入图像 在网页中插入一幅图片时，图片文件必 须位于当前站点中。 在对象面板中选择插入图片图标，此时 系统将打开“选择图像源文件”对话框。找 到需要插入的图片文件，选择“Select”。 Dreamwaver支持常用的网页图片格式有 扩展名为“GIF”、“JPG”、“JPEG”、“PNG” 的图形文件。 四、插入鼠标变换图片 该图片对象的特点是当鼠标经过该图片 时，图片内容会自动更新。实际上，它是 由两幅图片组成的，一幅为主图片，显示 在页面中；一幅为滚动图片，当鼠标经过 图片所在区域时显示。单击对象面板中的 图标，或者选择【Insert】菜单的 “Interactive Images”子菜单中的“Rollover Image”命令可实现该操作。 五、创建图片热点 在插入的图片上，可以是交换式图片， 可以把图片分为若干个区域，每个区被称 为“热点”，可以为每个热点指定相关的链 接。当单击某个热点时，系统显示相关的 网页。当绘制完热区后，属性面板会显示 热区的属性。 还可以调整热点区尺寸。 六、插入水平线 在对象面板中选择按钮，在页面中点击， 画面会自动生成一条水平线，在水平线上 单击，可以设置水平线的宽度、高度、对 齐方式、是否有阴影等参数。 七、插入邮件链接 创建邮件链接的作用是当浏览者点击该 链接时，系统将自动启动计算机中的邮件 发送程序。 八、插入日期 在对象面板中选择按钮，在页面中点击， 会弹出对话框，可以设置日期格式、星期 格式、时间格式，点击“OK”，就会在页面 中自动加上时间。 九、插入Flash对象 1．插入Flash影片 2．制作Flash文字 3．制作Flash按钮 十、表格的应用 1．插入表格 2．表格属性面板 表格属性面板中的设置项对整个表格起 作用，如果想对表中的某一行单独设置， 首先选中表的某一行，再利用单元格属性 面板进行设置。 3．表格的选取 4．添加表格内容 5．单元格的合并与拆分 十一、 层的应用 层是网页中的一种容器，它可定位在页 面上的任意位置，并且其中可包含文本、 图像、表单等所有可直接用于文档的元素。 1．创建层 2．层的大小调整 3．层的移动 4．层的属性面板 5．层控制面板 6．层的动态效果 十二、框架的应用 创建普通框架集 利用框架属性面板来设置该框架是否要 边线以及边线的颜色、边线宽度、框架的 名称和框架中所要显示的源文件。 可以查看框架集的文件的源代码，这里 面只保存了框架信息和它所对应的源文件。 十三、行为面板的使用 通过行为面板可以在网