网站设计与建设-附录A：网页设计工具 Dreamweaver CS3.pptVIP

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材 山东大学计算机科学与技术学院 《 网 站 设 计 与 建 设 》 《 网 站 设 计 与 建 设 》 普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材 山东大学计算机科学与技术学院 附录A 网页设计工具 Adobe Dreamweaver CS3 * Dreamweaver原来是多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，是网页“三剑客”之一，由于Adobe公司与Macromedia公司已合并，其必威体育精装版版本为Adobe Dreamweaver CS3。 Adobe Creative Suite 3.0 Web Standard：Adobe公司2007年3月新发布，是为 Web 设计人员和开发人员打造的基本工具包，包括： Adobe Dreamweaver CS3 Adobe Flash CS3 Adobe Firework CS3 Adobe Contribute CS3 1.Adobe Dreamweaver CS3 介绍 * 下载免费试用版：/cn/products/dreamweaver/ 点击setup.exe安装即可 启动Adobe Dreamweaver CS3 2.Adobe Dreamweaver CS3 安装 * A.“插入”栏 B.文档工具栏 C.“文档”窗口 D.面板组 E.标签选择器 F.“属性”检查器 G.“文件”面板 3.Adobe Dreamweaver CS3 界面 * 规划和设置站点 组织和管理站点文件 设计网页布局 向页面添加内容 通过手动编码创建页面 针对动态内容设置 Web 应用程序 创建动态页 测试和发布 4.Adobe Dreamweaver CS3工作流程概述 5.Dreamweaver CS3基础应用 创建 Dreamweaver CS3站点 创建和管理网页文件 使用HTML“表格” 布局网页 使用HTML“框架”布局网页 使用CSS布局网页 使用AP元素布局网页 使用Spry构件的网页 6.创建 Dreamweaver CS3站点： 建立本地站点根文件夹 创建每一个网站的文件夹(由多个网站) 定义本地站点： 打开站点窗口：窗口-站点 站点窗口选择站点-新建站点或菜单站点-新建站点 * 7.创建Dreamweaver CS3站点--管理站点窗口： * 8.创建 Dreamweaver CS3站点--本地信息： * 9.创建Dreamweaver CS3站点--远程信息： * 10.创建Dreamweaver CS3站点--测试服务器： * 11.创建一个简单的网页： 主页名称： Index.html、Index.htm、default.htm、Index.jsp、Index.asp、Index.php。注意：大小写敏感。 新建文件：在右侧的站点窗格中，选择“文件-新建文件”，窗格中新增untitled.htm，更改其名称，例如Index.html。或者选择“文件菜单-新建”或单击工具栏“新建”命令按钮，弹出“新建”文件对话框，如图示： * 12.创建文档窗口： * 13.创建一个最简单： * 14.预览网页：选择浏览器进行网页预览 * 15.使用HTML“表格”对页面进行布局： 表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。 Dreamweaver 提供了“布局”模式和“标准”模式。在“布局”模式中，可以在添加内容前使用布局单元格和表格来对页面进行布局。要调整页布局，可以通过对布局单元格和嵌套布局表格进行移动并调整它们的大小即可，（最外面的布局表格只能调整大小）。 在“标准”模式中，可以向表格内添加内容或对表格进行编辑。 * 16.使用 CSS对页面进行布局 CSS 页面布局使用层叠样式表格式（而不是传统的 HTML 表格或框架），用于组织网页上的内容。 CSS 布局的基本构造块是 div 标签，它是一个 HTML 标签，在大多数情况下用作文本、图像或其它页面元素的容器。 与表格单元格（被限制在表格行和列中的某个现有位置）不同，div 标签可以出现在 Web 页上的任何位置。可以用绝对定位方式或相对定位方式来定位 div 标签。 Dreamweaver CS3提供30多个预先设计的 CSS 布局，可以帮助用户快速设计页面并开始运行。 * 17.使用绝对定位(AP元素)来创建CSS布局 Dreamweaver CS3中的 AP 元素是分配有绝对位置的 HTML 页面元素，具体地说，就是 div 标签或其它任何标签。 Dreamweaver CS3使用“AP 元素”面板来管理文档中的 AP 元素，使用“AP 元素”面板可