Dreamweaver-8.0-网页设计-非常好的参考资料.pptVIP

第3章 Dreamweaver 8.0网页设计 第3章 Dreamweaver 8.0网页设计 　　 本章内容 1、Dreamweaver 8.0基础知识 2、站点的建立与管理 3、编辑基本页面 4、超级链接 5、页面布局 6、CSS样式 7、行为和时间轴 8、Dreamweaver 8.0网页设计实例 3.1 Dreamweaver 8.0基础知识 Dreamweaver的字面意思为“梦幻编织者”，是Macromedia公司推出的可视化网页制作工具。 Dreamweaver 8 包含了许多新增的功能，这些新增功能改善了软件的易用性，并使用户无论处于设计环境还是编码环境都可以方便地制作页面。同时Dreamweaver 8支持学习和利用新的技术，其中包括 PHP 5、Flash 视频、ColdFusionMX 7 和 Macromedia Web Publishing System。 3.1.1 Dreamweaver 8.0工作界面 1、 菜单栏 所有的编辑工作都可以通过菜单栏里的命令来完成。 单击F4键关闭所有浮动面板，再单击F4又可以打开。 利用“窗口”菜单，可以控制各种浮动窗口和面板的开启和关闭。 2、 工具栏 菜单“查看”?“工具栏” ?“标准”或“文档” 3、文档窗口 设计视图 代码视图 设计视图和代码视图 4、 Dreamweaver 8.0的面板 插入面板 可折叠组合面板 属性面板 （1）插入面板 插入面板也是一个浮动的面板，包含以下几个面板：“常用”、“布局”、“文本”等。 也可以选择菜单“插入/……”来插入对象。 （2）可折叠组合面板（浮动面板） 打开/折叠按钮 抓取按钮 （3）属性面板 选择“窗口”|“属性”，打开属性面板。 在属性面板中显示了文档窗口中选取对象的属性。 5、 状态栏 可以通过单击状态栏上的HTML标签来选取对象，故又称“选择状态栏”。 3.1.2 基本操作 1、创建新页面 若要创建新的空白文档，请执行以下操作： （1）选择“文件”“新建”。 （2）从“类别”列表中选择“基本页”、“动态页”、“模板页”、“其它”或“框架 集”；然后从右侧的列表中选择要创建的文档的类型。 （3）单击“创建”按钮。 2、打开已有页面 若要打开现有的文件，请执行以下操作： （1）选择“文件”“打开”，出现“打开”对话框。 （2）定位到并选择要打开的文件。 （3）单击“打开”。 3、保存页面 若要保存新文档，请执行以下操作： （1）选择“文件”“保存”。 （2）在出现的对话框中，定位到要用来保存文件的 文件夹。 （3）在“文件名称”文本框中，键入文件名。 注意不 要在文件名和文件夹名中使用空格和特殊字符，文件 名也不要以数字开头。 （4）单击“保存”。 4、预览页面 在保存页面后，就可以点击文档工具栏按钮或按F12键预览当前页面了。 3.2 站点的建立与管理 “站点”可以简单地理解为文件夹，编辑的网页、图片、音乐等都放在这个文件夹里。 3.2.1 建立站点 选择菜单“站点/新建站点”； 为网站取名，如“我的第一个站点”； 建立一个静态站点，无需服务器； 选择站点存放的路径； “无”链接到远程服务器； 完成。 3.2.2 管理站点 新建文件或文件夹 删除文件或文件夹 编辑文件 注意事项 建立有意义的文件夹对资源文件进行分门别类的管理 尽量使用英文名称（小写) 删除站点只是删除了本地相关文件和站点的联系，文件仍然是存在的。 建立完站点结构后，准备工作基本完成，可以继续index.html首页的创建。双击站点面板中的index.html ，我们要为这个页面进行简单的图文混排设计。 3.3 编辑基本页面 本节主要内容： 1、页面属性设置 2、添加文本 3、插入图像 4、插入表单 3.3.1 页面属性设置 “修改”?“页面属性” 设置标题 设置背景图像 设置背景颜色、字体颜色 设置链接文本颜色 设置左边界和顶部边界（一般设为“0”） 3.3.2 添加文本 直接在编辑窗口中插入文字。 选中网页中的文字，在下面的属性面板中设定字体、字号、颜色及排列方式等。 实例１：插入标题和文本 操作步骤如下： 设置文本标题级、文本字体、字体大小、文本颜色 文本对齐 插入水平线 创建项目列表和缩进文本 实例２：滚动文字 操作步骤如下： 在网页中插入表格，设置背景颜色和边框颜色； 在表格中插入文字信息，如“新闻消息”等； 打开“设计”视图，在td标签后输入marquee； 设置的marquee属性behavior，d