网页设计与制作

网页设计与制作 学时：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发布

二、利用CuteFTP发布 一般的网站都支持FTP上传方式，因此只需要安装一款FTP文件上传工具。下面以常用的CuteFTP为例进行介绍。这款软件能够快速上传或下载整个站点文件，并支持断点续传功能。

THE END

网页设计与制作

Télécharger la présentation

Plus de contenu associé