网页制作与网站建设Dreamweaver.ppt

网页制作与网站建设 DreamWeaver使用基础 /px/sc2.rar 考试形式一: 以三到五人为团体，设计制作一个含有8个以上页面的站点，将站点压缩成RAR格式。 要求：文件大小在1M以内，首页名称设为index.htm，将创作团队成员名称和学号标在显著位置。 题目选择：1、手足口病介绍； 2、顺德校区网介绍； 3、个人简历。 考试形式二： 论文：《我想建一个**站》 要求：800字以上，发挥创意，将建站的目的，亮点，盈利方法等作一介绍。 任选一题，文章或站点内注明姓名和学号，在12月1号前将文件发布发布到。 1、Dreamweaver介绍 Macromedia Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。 利用 Dreamweaver 中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在 MacromediaFireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入 Dreamweaver，或者添加 Macromedia Flash 对象，从而优化开发工作流程。 2、Dreamweaver 工作区 “插入”栏包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。 “标准”工具栏（在默认工作区布局中不显示）包含来自“文件”和“编辑”菜单中的一般操作的按钮。 “文档”窗口显示当前创建和编辑的文档。 属性检查器用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。 标签选择器位于“文档”窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。 面板组是组合在一个标题下面的相关面板的集合。若要展开一个面板组，应单击组名称左侧的展开箭头；若要取消停靠一个面板组，应拖动该组标题栏左边缘的手柄。 “文件”面板可以管理文件和文件夹，无论它们属于 Dreamweaver 站点的一部分还是位于远程服务器上。 3、设置 Dreamweaver 站点 站点》新建站点 在首次制作网页时，应新建一个站点。 4、设置页面属性 “修改”》“页面属性”可以对网页的外观，字体，背景颜色，标题，链接颜色等进行设置。 （5）继续将插入点定位在左侧框架内，单击“插入表格”按钮，插入一个 3 行 2 列，宽度为“140”像素，适当高度，单元格填充、单元格间距、边框都为“0”的表格。对单元格进行适当合并，然后在各单元格内添加内容，并使用“属性检查器”进行修饰，制作出左侧框架中的网页。 （6）分别制作出另外两个框架中的网页，使用“全部保存”命令保存对文档的修改，此时框架在 Dreamweaver 窗口中的效果如图7.27 所示。 图 框架网页在 Dreamweaver 窗口中的效果 * 黄粤锋 huangyf81@163.com 7.1 页面版式基础 7.2 使用表格排版 7.3 使用层排版 7.4 使用框架排版 ５、页面版式基础 5.1 版式在网页界面中的作用 网页界面的版式设计，是指将文字、图形图像、色彩、动画和视频多媒体等网页对象的传达要素，根据特定内容和主题，在网页限定范围内将设计意图以视觉形式表现出来。 从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画和正文等内容展开页面布局的。在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。 从审美角度出发，要求设计师运用统一、对比、对称、均衡等形式原理进行设计，利用网页中的元素构造出和谐、流畅、自然的网页界面。 例如，下图就是一个设计合理的页面实例。 图7.1 页面版式示例 5.2、使用表格排版 5.2.1 表格与布局表格的基本操作 1．使用表格显示网页中的内容 2．使用布局视图设计网页中的表格 3．布局表格与布局单元格基本操作 5.2.2 表格与布局表格的属性设置 5.2.3 表格排版实例 使用布局功能与表格排版实例效果 以下是使用Dremweaver 的布局视图功能与表格排版功能制作的一个网页实例，效果如图 所示。 （1）在空白文档窗口中，按【Ctrl + J】键打开“页面属性”对话框，在