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