Download
1 / 34
340 likes | 487 Views
网页设计与制作. 学时： 60 学时. 第三章 创建站点和文档. 了解： Dreamweaver CS4 的工作界面、了解网站的测试项目、了解并掌握网站的各项测试。 熟练掌握： 站点创建的流程、站点文件的创建、网站的发布。 掌握： 掌握 Dreamweaver CS4 文档的基本操作、 Dreamweaver CS4 中网站测试工具的使用、 Dreamweaver CS4 中网站上传的操作 。. 文档工具栏 栏. 菜单栏. 插入栏. 面板组. 属性面板. 状态栏. 第一节 Dreamweaver CS4 工作界面.
E N D
网页设计与制作 学时：60学时
第三章 创建站点和文档 • 了解：Dreamweaver CS4的工作界面、了解网站的测试项目、了解并掌握网站的各项测试。 • 熟练掌握：站点创建的流程、站点文件的创建、网站的发布。 • 掌握：掌握Dreamweaver CS4文档的基本操作、Dreamweaver CS4中网站测试工具的使用、Dreamweaver CS4中网站上传的操作。
文档工具栏栏 菜单栏 插入栏 面板组 属性面板 状态栏 第一节 Dreamweaver CS4工作界面 Dreamweaver CS4的工作界面与Dreamweaver以前版本有所差别，主要由菜单栏、文档工具栏、编辑区、状态栏、属性面板、面板组等部分组成，而插入栏则整合在面板组中，如图。
下面分别简单介绍主要的界面组成部分。 （一）菜单栏 Dreamweaver CS4的菜单栏主要包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等菜单。同其他软件的菜单栏一样，单击菜单栏中的命令，在弹出的下拉菜单中选择要执行的命令。
（二）插入栏 • 插入栏按以下的类别进行组织。 • 常用：可以创建和插入最常用的对象，如图像和Flash等。 • 布局：主要用于网页布局，可以插入表格、div标签、层和框架。 • 表单：包含用于创建表单和插入表单元素的按钮。 • 数据：可以插入Spry数据对象和其他动态元素，如记录集、重复区域、显示区域以及插入记录和更新记录等。 • Spry：包含一些用于构建Spry页面的按钮，如Spry文本域、Spry菜单栏等。 • 文本：可以插入各种文本格式设置标签和列表格式设置标签。 • 收藏夹：可以将插入栏中最常用的按钮分组和组织到某一常用位置。
（三）文档工具栏 文档工具栏中最主要的是3个视图按钮：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的“拆分”视图。 文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如“在浏览器中预览/调试”、“文件管理”、“验证标记”、“检查浏览器兼容性”等。
（四）属性面板 Dreamweaver CS4的属性面板用于显示页面中所选元素的属性，并可对选中元素的属性值进行修改。 （五）面板组 所谓面板组，就是Dreamweaver CS4将各种工具面板集成到面板组中，包括插入面板、行为面板、框架面板、文件面板、CSS样式面板、历史面板等。
（六）状态栏 状态栏提供与当前正创建的文档有关的信息。其中“标签选择器”显示环绕当前选定内容的标签的层次结构;“缩放工具”可以设置当前页面的缩放比率;“窗口大小”用来将文档窗口的大小调整到预定义或自定义的尺寸。状态栏最右侧显示当前页面的文档大小和估计下载时间。
第二节 创建站点 一、定义站点
一、定义站点 在“管理站点”对话框中，单击右侧的“新建”按钮，在弹出的下拉列表中，选择“站点”选项，随后打开“站点定义”对话框，在该对话框中，单击“高级”选项卡。 在Dreamweaver 中，执行“窗口”→“文件”命令，或按F8键，打开“文件”面板。在“文件”面板中，单击“管理站点”链接，打开“管理站点”对话框。 在本地硬盘的一个分区上建立文件夹并命名为“site” 在“高级”选项卡中如左图设置 “站点名称”文本框中输入站点的名称 选择在本地计算机分区上建立的“site”文件夹 勾选此项 单击“确定”按钮，返回“管理站点”对话框，再单击“完成”按钮，即可在“文件”面板中看到刚才建立的站点。
二、构建网站结构 • 构建网站结构，实际上是构建网站的文件夹与文件结构。 • 创建文件夹或创建文件，只需要在“文件”面板中右击，在弹出的快捷菜单中选择“新建文件夹”或“新建文件”命令即可。
第三节 创建和保存文档 一、创建文档
一、创建文档 • Dreamweaver中新建文档同Flash一样，一般有以下两种操作： • 一是通过执行菜单“文档”→“新建”命令，打开“新建文档”对话框。 • 第二种方法是在启动Dreamweaver后，在出现的提示画面中选择“新建”→“HTML” 。
二、保存文档 当对当前的HTML文档，执行“文档”→“保存”命令后，选择本地站点文件夹，即可将当前文档保存为一个HTML文档，即网页。
第四节 设置文档属性 • 要进行文档属性的设置，首先要打开“页面属性”对话框，打开“页面属性”对话框方法如下： • 按组合键Ctrl+J或执行“修改”→“页面属性”命令，打开“页面属性”对话框。 • 在属性面板中，单击“页面属性”按钮 ，打开“页面属性”对话框。 • 在“页面属性”对话框中，主要对以下属性项进行设置。
一、设置外观 当对当前的HTML文档，执行“文档”→“保存”命令后，选择本地站点文件夹，即可将当前文档保存为一个HTML文档，即网页。
第五节测试站点 一、检查站点
一、检查站点 在Dreamweaver CS4中可以运行站点报告来检查站点问题，如是否有无标题文档、空标签以及冗余的嵌套标签等。 在DreamweaverCS4中打开所需要测试的站点，执行“站点”→“报告”命令，弹出“报告”对话框，如图。
二、检查辅助功能 辅助功能是指使网站可供具有视觉、听觉、运动和其他障碍的人士使用。辅助功能包括屏幕阅读器支持、图形的等效文本、快捷键、将显示颜色更改为高对比度等。Dreamweaver 提供了使其自身具有辅助功能的工具，并且还提供可帮助您创作具有辅助功能内容的工具，由于篇幅关系，在这里就不做详细的介绍了。 如果要运行辅助功能报告，可以执行“文件”→“检查页”→“检查辅助功能”命令，检查结果将出现在“结果”面板组的“站点报告”面板中。
三、检查目标浏览器 网页中有一些元素必须在新版本的浏览器中才能显示（如框架），所以在上传站点之前，有必要检查浏览器的兼容性。在Dreamweaver CS4中可以通过检查目标浏览器功能来实现。 执行“文件”→“检查页”→“浏览器兼容性”命令，打开 “浏览器兼容性”面板，如图。
四、检查链接 在Dreamweaver CS4中可以快速、方便地检查链接。执行“文件”→“检查页”→“链接”命令，打开“链接检查器”面板。在“显示”下拉列表框中选择要检查的链接方式，如图。
五、验证标记 验证HTML标记的方法为：执行“文件”→“验证”→“标记”命令，打开“验证”面板。
第六节站点的发布 一、使用Dreamweaver CS4上传网页
一、使用Dreamweaver CS4上传网页 Dreamweaver CS4的FTP功能非常强大，不仅支持断点续传，还可以进行批量的上传和下载。
二、利用CuteFTP发布 一般的网站都支持FTP上传方式，因此只需要安装一款FTP文件上传工具。下面以常用的CuteFTP为例进行介绍。这款软件能够快速上传或下载整个站点文件，并支持断点续传功能。
