DREAMWEAVER网页制作 - 计算机教学部.ppt

第9章用Dreamweaver制作网页 Internet及多媒体应用 主要内容 主要内容 9.1 基 本 操 作 9.1.1 管理站点 创建本地站点 创建站点文件夹 按照网站规划可事先创建站点根目录，再根据网站复杂程度创建若干子文件夹，至少要有images文件夹，并将准备好的图像文件复制到该文件夹中。 启动Dreamweaver CS5，定义本地站点 若是首次启动Dreamweaver，则在“欢迎屏幕”的“新建”区域中单击“Dreamweaver站点”，弹出“站点设置对象”对话框，在“站点名称”框中填写站点名称，如：“中国元素”，在“本地站点文件夹”框中直接填写或单击右侧“浏览文件夹”按钮选择文件夹为事先创建的站点根目录路径，如：“D:\chineseelements”，最后，单击“保存”按钮。 9.1.1 管理站点 创建本地站点 启动Dreamweaver CS5，定义本地站点 若Dreamweaver已经启动，则选择菜单“站点”→“新建站点”命令，在弹出的“站点设置对象”对话框中，进行上述操作。 如果单击“站点设置对象”对话框左侧“高级设置”的下拉列表按钮，在展开的设置选项中选择“本地信息”，在“默认图像文件夹”框中设置默认图像文件夹的路径，则当用户插入站外图像文件时，系统将以原名自动复制站外图像文件到该默认图像文件夹中，而不再提示“是否复制图像文件到站点文件夹中” 。 9.1.1 管理站点 管理站点 编辑站点 选择菜单“站点”→“管理站点”命令，会打开“管理站点”对话框，选择要编辑的站点，单击“编辑”按钮，即可重新打开“站点设置对象”对话框，对站点的本地信息、远程服务器、测试服务器信息等重新设置。 打开站点 选择菜单“站点”→“管理站点”命令，在打开的“管理站点”对话框中，选择要打开的站点，再单击“完成”按钮即可 启动Dreamweaver后，默认打开的站点是最近一次打开的站点。 9.1.1 管理站点 管理站点 删除站点 在“管理站点”对话框中选择要删除的站点，单击“删除”按钮，在打开的提示框中单击“是”按钮。 删除站点操作只是删除站点信息，恢复站点文件夹为普通文件夹，并未真正删除该文件夹。可以通过资源管理器删除它，或再次设置为站点文件夹。 管理本地文件和文件夹 在“文件”面板（选择菜单“窗口”→“文件”命令可打开该面板）中，用户可以对各级文件和文件夹进行管理，如进行新建、选择、打开、复制、移动、删除、重命名等操作。具体操作方法类似于Windows资源管理器的操作，建议多采用单击右键快捷菜单命令的方式进行操作。 9.1.2 新建网页文档 基于空白网页创建网页文档 选择菜单“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“空白页”、页面类型为“HTML”、布局为“无”，单击“创建”按钮，即可创建一个空白网页，如图所示。 9.1.2 新建网页文档 基于网页布局模板快速建立网页 选择菜单“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“空白页”、页面类型为“HTML”、布局为某种自己所需要的布局，如“3列固定，标题和脚注”，单击“创建”按钮，即可按照该布局模板创建一个网页。用户可根据需要自行修改网页中的内容。 Dreamweaver提供16种布局模板，布局中选用“列固定”方式时，指定页面宽度为固定像素值，不随浏览器窗口大小和屏幕分辨率高低而变化。而“列液态”方式则采用浏览器窗口大小的百分比来指定页面宽度。 9.1.3 网页编辑与浏览方式 “设计”视图 主要用于网页的可视化设计和编辑。 “代码”视图 用于查看和修改网页的HTML源代码。 “拆分”视图 将文档窗口拆分为“代码”视图和“设计”视图两个窗格，用户可以同时使用“代码”视图和“设计”视图。 选择菜单“查看”→“垂直拆分”命令，可将“拆分”视图分为左右或上下两个窗格。 9.1.3 网页编辑与浏览方式 实时视图 在这种视图方式下，不能编辑网页，主要用于预览网页在浏览器中的显示效果，但不是所有的效果都能预览。 实时代码 用于查看网页的HTML源代码，但不能修改代码。 检查 在这种模式中，当鼠标在某一页面元素上悬停时，将以可视化方式详细显示该页面元素的CSS属性，包括填充、边框和边距等。 9.1.4 页面属性设置 页面属性，主要是一些影响整个网页的参数。选择菜单“修改”→“页面属性”命令，可弹出“页面属性”对话框。在该对话框中包括外观、链接、标题、标题/编码和跟踪图像等属性类型设置项，可以设置Web页面的若干基本布局选项，如网页边距、字体、背景颜色、背景图像、网页标题、超链接样式等。 外观 外观属性包括“外观（CSS）”和“外观（HTML）”两种类别。选择“外观（CSS）”选项时，所设置的页面属性，会在文档的源代码中自动生成