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

《网站设计与建设》普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院附录A网页设计工具AdobeDreamweaverCS3普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》2Dreamweaver原来是多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，是网页“三剑客”之一，由于Adobe公司与Macromedia公司已合并，其最新版本为AdobeDreamweaverCS3。AdobeCreativeSuite3.0WebStandard：Adobe公司2007年3月新发布，是为Web设计人员和开发人员打造的基本工具包，包括：AdobeDreamweaverCS3AdobeFlashCS3AdobeFireworkCS3AdobeContributeCS31.AdobeDreamweaverCS3介绍普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》3下载免费试用版：点击setup.exe安装即可启动AdobeDreamweaverCS32.AdobeDreamweaverCS3安装普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》4A.“插入”栏B.文档工具栏C.“文档”窗口D.面板组E.标签选择器F.“属性”检查器G.“文件”面板3.AdobeDreamweaverCS3界面普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》5规划和设置站点组织和管理站点文件设计网页布局向页面添加内容通过手动编码创建页面针对动态内容设置Web应用程序创建动态页测试和发布4.AdobeDreamweaverCS3工作流程概述普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》5.DreamweaverCS3基础应用创建DreamweaverCS3站点创建和管理网页文件使用HTML“表格”布局网页使用HTML“框架”布局网页使用CSS布局网页使用AP元素布局网页使用Spry构件的网页普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》6.创建DreamweaverCS3站点：建立本地站点根文件夹创建每一个网站的文件夹(由多个网站)定义本地站点：打开站点窗口：窗口-站点站点窗口选择站点-新建站点或菜单站点-新建站点普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》87.创建DreamweaverCS3站点--管理站点窗口：普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》98.创建DreamweaverCS3站点--本地信息：普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》109.创建DreamweaverCS3站点--远程信息：普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1110.创建DreamweaverCS3站点--测试服务器：普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1211.创建一个简单的网页：主页名称：Index.html、Index.htm、default.htm、Index.jsp、Index.asp、Index.php。注意：大小写敏感。新建文件：在右侧的站点窗格中，选择“文件-新建文件”，窗格中新增untitled.htm，更改其名称，例如Index.html。或者选择“文件菜单-新建”或单击工具栏“新建”命令按钮，弹出“新建”文件对话框，如图示：普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1312.创建文档窗口：普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1413.创建一个最简单：普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1514.预览网页：选择浏览器进行网页预览普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1615.使用HTML“表格”对页面进行布局：表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。Dreamweaver提供了“布局”模式和“标准”模式。在“布局”模式中，可以在添加内容前使用布局单元格和表格来对页面进行布局。要调整页布局，可以通过对布局单元格和嵌套布局表格进行移动并调整它们的大小即可，（最外面的布局表格只能调整大小）。在“标准”模式中，可以向表格内添加内容或对表格进行编辑。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1716.使用CSS对页面进行布局CSS页面布局使用层叠样式表格式（而不是传统的HTML表格或框架），用于组织网页上的内容。CSS布局的基本构造块是div标签，它是一个HTML标签，在大多数情况下用作文本、图像或其它页面元素的容器。与表格单元格（被限制在表格行和列中的某个现有位置）不同，div标签可以出现在Web页上的任何位置。可以用绝对定位方式或相对定位方式来定位div标签。DreamweaverCS3提供30多个预先设计的CSS布局，可以帮助用户快速设计页面并开始运行。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1817.使用绝对定位(AP元素)来创建CSS布局DreamweaverCS3中的AP元素是分配有绝对位置的HTML页面元素，具体地说，就是div标签或其它任何标签。DreamweaverCS3使用“AP元素”面板来管理文档中的AP元素，使用“AP元素”面板可选择一个或多个AP元素，可防止重叠，更改AP元素的可见性，嵌套或堆叠AP元素。使用“AP元素”可精确调整各元素之间的位置，来达到精确调整图像和文本之间的位置的目的。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》1918.可视化构建Spry页Spry框架是一个JavaScript库，Web设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web页。Spry框架中的每个构件都与唯一的CSS和JavaScript文件相关联。当使用DreamweaverCS3界面插入构件时，会在当前站点中创建一个SpryAssets目录，并将相应的JavaScript和CSS文件保存到其中。DreamweaverCS3提供了折叠构件、菜单栏构件、可折叠面板构件、选项卡式面板构件、验证文本域构件、文本区域构件、验证选择构件、验证复选框构件、使用Spry显示数据等Spry框架。普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》2019.使用菜单栏构件的Spry网页：普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材山东大学计算机科学与技术学院《网站设计与建设》21附录A网页设计工具AdobeDreamweaverCS3熟悉网页设计工具掌握使用该工具设计网站结束