网页制作基础教程 第2版 教学课件 作者 邓振杰 第2章.ppt

《网页制作基础教程 第2版 教学课件 作者 邓振杰 第2章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第2章创建和管理站点【本章学习目标】●规划站点结构的方法。●DreamweaverCS3的基本操作。●利用DreamweaverCS3创建、管理站点。●站点的基本操作。●网页文件的基本操作。2.1规划站点结构整个站点是一个大的文件夹，称为站点根文件夹。在站点根文件夹下建立一个合理的文件结构来存放所有与网站相关的资料。1．按照文件的类型进行规划按照文件的类型规划，就是将不同类型的文件分别存放在不同的文件夹下。2．按照网页主题进行规划各网页的子目录在根目录下依次建立，且都应有自己独立的子目录，用来存放相关

2、的文件。2.2利用DreamweaverCS3创建站点2.2.1DreamweaverCS3简介1．DreamweaverCS3的主要功能（1）创建和编辑网页元素。（2）编辑HTML代码。（3）管理站点。（4）插入Fireworks文件和Flash动画。（5）强大的模板功能。（6）启动和编辑外部媒体。（7）定制和扩展功能。2．DreamweaverCS3的新增功能（1）适合于Ajax的Spry框架。（2）Spry数据。（3）Spry构件。（4）Spry效果。（5）AdobePhotoshop和Fire

3、works集成。（6）浏览器兼容性检查。（7）CSSAdvisor网站。（8）CSS布局。（9）CSS管理。（10）AdobeDeviceCentralCS3。3．DreamweaverCS3的工作界面启动DreamweaverCS3，首先在屏幕上显示启动画面，显示DreamweaverCS3的图标、版本号和版权信息等，随着初始化进程的展开，调用程序的名称将不断地出现在启动画面上。4．DreamweaverCS3的视图Dreamweaver自动在用户创建网页时生成底层的HTML代码，同时提供了很好的H

4、TML代码编辑功能。如果单击“文档”工具栏上的视图切换按钮，即显示设计视图。以便查看当前编辑网页的HTML源代码。如果需要同时查看代码视图和设计视图，可以单击同时显示代码和设计按钮，Dreamweaver将同时在窗口中显示代码视图和设计视图。2.2.2定义站点1．站点文件管理器在DreamweaverCS3的编辑窗口，选择“窗口”→“文件”菜单命令选择“站点”→“新建站点”菜单命令创建新站点，也可以使用“站点”→“管理站点”菜单命令管理已有的站点。2．创建站点（1）通过站点定义向导创建站点。（2）直接

5、定义站点。2.3站点的基本操作1．打开站点先打开站点管理窗口，打开“显示”下拉列表框2．复制站点若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“管理站点”命令，打开“管理站点”对话框3．编辑站点如果要更改当前站点设置，可以通过上面的方法打开“管理站点”对话框，选中一个站点后单击“编辑”按钮，即可打开该“站点定义”对话框，选择“高级”选项卡进行站点编辑，4．删除站点在DreamweaverCS3中删除一个站点非常容易，在弹出的“编辑站点”对话框中，单击“删除”按钮就可以删除选中的站点。2.

6、4网页文件的基本操作1．新建网页（1）打开DreamweaverCS3起始页，单击“创建新项目”栏中的HTML超链接，即可打开一个新网页。（2）单击“文件”→“新建”命令，将弹出“新建文档”对话框，选择“空白页”选项卡，从对话框的“网页类型”列表中选择一种类型，在“布局”列表中选择一种布局格式，然后单击“创建”按钮即可。（3）如果要基于模板创建文档，则可以在“新建文档”对话框中单击“模板中的页”选项卡，然后从该对话框左边的列表框中选择模板所在的站点，再从右边的模板列表中选择一个模板。2．文件的打开（1

7、）用鼠标右键单击要打开的文档图标，在弹出的快捷菜单中选择“使用DreamweaverCS3编辑”选项，即可启动DreamweaverCS3，并打开该文档。（2）启动DreamweaverCS3，显示起始页。如果在“打开最近项目”栏中列出了需要的文档，直接单击该文档即可。（3）启动DreamweaverCS3，显示起始页。单击“文件”→“打开”命令，同样会弹出“打开”对话框，在其中选择需要的文档，单击“打开”按钮。3．保存网页文件切换到要保存的文档所在的窗口，然后选择“文件”→“保存”菜单命令，则会打开

8、“另存为”对话框。网页文件中带有框架文件，而保存的目的是保存该网页文件中所有的文件，则应该选择“文件”→“保存全部”菜单命令，然后按提示保存所有的框架文件。将一个网页文档以模板的形式保存，切换到要保存的文档所在的窗口，选择“文件”→“另存为模板”菜单命令，则会打开“另存为模板”对话框。4．预览网页在DreamweaverCS3中制作的网页最终要通过浏览器浏览，在网页的制作过程中随时都可以启动浏览器预览网页，预览网页可用如下方法之一。（1）按“F12”键。