实例1 幼儿园网页首页
实例说明 在本实例中将指导读者制作一个幼儿园网页的首页，该网页为标准的网页形式，包含一张图片素材，通过本实例的制作可以使读者了解网页设计的基础知识点，并了解页面属性的相关设置。由于本实例是本书中的第一个实例，因此还为读者介绍了本地站点及本地站点路径的设置。
技术要点 在本实例中，为了便于管理网页，首先为网页设置站点及站点路径，然后通过设置页面属性，编辑网页的大小和边距，最后导入素材图像，完成该网页的设置。图1-1所示为本实例完成后的效果。
图1-1 幼儿园网页首页
1 首先需要定义一个本地站点，运行Dreamweaver CS4，单击起始页面的“Dreamweaver站点”选项，打开“网页制作的站点定义为”对话框，在该对话框中设置站点名称和HTTP地址，由于本站点是为制作练习使用的，所以可以不设置HTTP地址，如图1-2所示，单击“下一步”按钮，进入下一个面板。
图1-2 “网页制作的站点定义为”对话框
2 进入“编辑文件，第2部分”面板，选择“否，我不想使用服务器技术”单选按钮，如图1-3所示，单击“下一步”按钮，进入下一个面板。
图1-3 “编辑文件，第2部分”面板
3 进入“编辑文件，第3部分”面板，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮，并设置文件的保存路径，如图1-4所示，单击“下一步”按钮，进入下一个面板。
图1-4 “编辑文件，第3部分”面板
4 进入“共享文件”面板，在“您如何连接到远程服务器？”下拉选项栏中选择“无”选项，如图1-5所示，单击“下一步”按钮，进入下一个面板。
图1-5 “共享文件”面板
5 进入“总结”面板后，单击“完成”按钮，如图1-6所示，完成本地站点的设置。
图1-6 “总结”面板
6 现在“文件”面板中会显示创建站点的信息，如图1-7所示。
图1-7 “文件”面板
提示
本地站点的设置是非常重要的，默认状态下，使用Dreamweaver CS4制作的所有网页和素材都将被保存在本地站点。如果路径设置错误或者相关文件夹被移动或删除，会导致网页错误。
7 下面制作网页。将本书附带光盘中的“网页基础设置/实例1：制作幼儿园网页的首页”文件夹复制到本地站点路径内。
8 接下来创建一个新文件，单击起始页面内的HTML选项，如图1-8所示，创建一个新的HTML格式文件。
图1-8 单击起始页面内的HTML选项
9 执行菜单栏中的“文件”/“保存”命令，打开“另存为”对话框，如图1-9所示，设置文件的保存路径及文件名，将文件保存在本地站点路径中。
图1-9 “另存为”对话框
10 接下来需要设置网页的大小和边距。单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框，在“分类”显示窗中选择“外观（CSS）”选项，在“页面属性”对话框中会显示“外观（CSS）”编辑窗，在“外观（CSS）”编辑窗中的“左边距”、“右边距”、“上边距”和“下边距”参数栏中均键入0，确定页面边距，如图1-10所示，单击“确定”按钮，退出该对话框。
图1-10 “页面属性”对话框
11 将本书附带光盘中的“网页基础设置/实例1：幼儿园网页首页”文件夹复制到本地站点路径中。
提示
html使用的素材文件必须与网页文件在同一路径，否则网页将无法显示素材文件，所以首先需要将素材复制到本地站点的路径。
12 执行菜单栏中的“插入”/“图像”命令，打开“选择图像源文件”对话框，从该对话框中选择复制的“实例1：幼儿园网页首页”文件夹中的Flower.jpg文件，如图1-11所示，单击“确定”按钮，退出该对话框。
图1-11 “选择图像源文件”对话框
13 退出“选择图像源文件”对话框后，会打开“图像标签辅助功能属性”对话框，如图1-12所示。使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到页面中。
图1-12 “图像标签辅助功能属性”对话框
14 图像导入后的效果如图1-13所示。
图1-13 导入图像
15 执行菜单栏中的“文件”/“保存”命令，将该网页保存，按下键盘上的F12键浏览网页，如图1-14所示。
图1-14 浏览网页
16 现在本实例的制作就全部完成了，图1-15所示为本实例完成后的效果。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“网页基础设置/实例1：幼儿园网页的首页/幼儿园网页首页．html”文件，该文件为本实例完成后的文件。
图1-15 幼儿园网页首页