![Dreamweaver CS4网页制作100例](https://wfqqreader-1252317822.image.myqcloud.com/cover/418/680418/b_680418.jpg)
实例1 幼儿园网页首页
实例说明 在本实例中将指导读者制作一个幼儿园网页的首页,该网页为标准的网页形式,包含一张图片素材,通过本实例的制作可以使读者了解网页设计的基础知识点,并了解页面属性的相关设置。由于本实例是本书中的第一个实例,因此还为读者介绍了本地站点及本地站点路径的设置。
技术要点 在本实例中,为了便于管理网页,首先为网页设置站点及站点路径,然后通过设置页面属性,编辑网页的大小和边距,最后导入素材图像,完成该网页的设置。图1-1所示为本实例完成后的效果。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0010_0001.jpg?sign=1739688803-mcpzpBtTcbpdQDDuTGSjDKgUTszu58wh-0-2069dc9b10cd6c515ddc645542fb5e60)
图1-1 幼儿园网页首页
1 首先需要定义一个本地站点,运行Dreamweaver CS4,单击起始页面的“Dreamweaver站点”选项,打开“网页制作的站点定义为”对话框,在该对话框中设置站点名称和HTTP地址,由于本站点是为制作练习使用的,所以可以不设置HTTP地址,如图1-2所示,单击“下一步”按钮,进入下一个面板。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0011_0001.jpg?sign=1739688803-yQbme3fTGhoKHhZ1KOUylj0IXdU6Z6qX-0-8d9b2afdc4bdc292bf213596b498fb01)
图1-2 “网页制作的站点定义为”对话框
2 进入“编辑文件,第2部分”面板,选择“否,我不想使用服务器技术”单选按钮,如图1-3所示,单击“下一步”按钮,进入下一个面板。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0011_0002.jpg?sign=1739688803-KWgqYDAWMGQ3TP4MbDBEzhWDWG0rDJuN-0-508fc7e8ef78b1f91e28a12725446761)
图1-3 “编辑文件,第2部分”面板
3 进入“编辑文件,第3部分”面板,选择“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”单选按钮,并设置文件的保存路径,如图1-4所示,单击“下一步”按钮,进入下一个面板。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0011_0003.jpg?sign=1739688803-0fGsH1V3Kus01yW5dwnKYyBapzy5HrJX-0-c08c2a6b9ee89e7227262bbfe9f6242d)
图1-4 “编辑文件,第3部分”面板
4 进入“共享文件”面板,在“您如何连接到远程服务器?”下拉选项栏中选择“无”选项,如图1-5所示,单击“下一步”按钮,进入下一个面板。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0012_0001.jpg?sign=1739688803-9RFP7WLPt9CrilxYl96vKm5FsP2vpAYB-0-8d9e1a5fb729b1e9f7918c71220c79d2)
图1-5 “共享文件”面板
5 进入“总结”面板后,单击“完成”按钮,如图1-6所示,完成本地站点的设置。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0012_0002.jpg?sign=1739688803-aMr7wfIX0z6pjgq1V8umcRvIky46Eduy-0-5fefee6bd7e65d1e08b7725fda27f548)
图1-6 “总结”面板
6 现在“文件”面板中会显示创建站点的信息,如图1-7所示。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0013_0001.jpg?sign=1739688803-31pO3AUyUa9UW0vFaDJdt7u4XPTcbAvM-0-3bf11b1e6eedf25d93ebf04edc28239d)
图1-7 “文件”面板
提示
本地站点的设置是非常重要的,默认状态下,使用Dreamweaver CS4制作的所有网页和素材都将被保存在本地站点。如果路径设置错误或者相关文件夹被移动或删除,会导致网页错误。
7 下面制作网页。将本书附带光盘中的“网页基础设置/实例1:制作幼儿园网页的首页”文件夹复制到本地站点路径内。
8 接下来创建一个新文件,单击起始页面内的HTML选项,如图1-8所示,创建一个新的HTML格式文件。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0013_0002.jpg?sign=1739688803-3x0learOFhCbDgJKksRZzWOLOOCS2Oza-0-03d5c20a82de9d3831529f70db4ae664)
图1-8 单击起始页面内的HTML选项
9 执行菜单栏中的“文件”/“保存”命令,打开“另存为”对话框,如图1-9所示,设置文件的保存路径及文件名,将文件保存在本地站点路径中。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0013_0003.jpg?sign=1739688803-jWLvEbqYzgJZZZl1zdGs8UGZZek8cFN7-0-f3a511f06542081558af9261b5c6fb99)
图1-9 “另存为”对话框
10 接下来需要设置网页的大小和边距。单击“属性”面板中的“页面属性”按钮,打开“页面属性”对话框,在“分类”显示窗中选择“外观(CSS)”选项,在“页面属性”对话框中会显示“外观(CSS)”编辑窗,在“外观(CSS)”编辑窗中的“左边距”、“右边距”、“上边距”和“下边距”参数栏中均键入0,确定页面边距,如图1-10所示,单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0014_0001.jpg?sign=1739688803-C4tUXcFOrp26S1sWOrA4MnbbnLauS4HJ-0-00f34aa7ba8b43068c64528fed066d46)
图1-10 “页面属性”对话框
11 将本书附带光盘中的“网页基础设置/实例1:幼儿园网页首页”文件夹复制到本地站点路径中。
提示
html使用的素材文件必须与网页文件在同一路径,否则网页将无法显示素材文件,所以首先需要将素材复制到本地站点的路径。
12 执行菜单栏中的“插入”/“图像”命令,打开“选择图像源文件”对话框,从该对话框中选择复制的“实例1:幼儿园网页首页”文件夹中的Flower.jpg文件,如图1-11所示,单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0014_0002.jpg?sign=1739688803-fJB3YdMSRU1OtKxVFuYgFpU7ODOC36zr-0-e8d4e67b0c291bd32d0f07d7830f275a)
图1-11 “选择图像源文件”对话框
13 退出“选择图像源文件”对话框后,会打开“图像标签辅助功能属性”对话框,如图1-12所示。使用默认设置,单击“确定”按钮,退出该对话框,将图像导入到页面中。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0015_0001.jpg?sign=1739688803-jS4H556Vzaqs0HSXYcJOrRo0bpJRwpvC-0-2f9696e3baec55f3625fcafb628aa589)
图1-12 “图像标签辅助功能属性”对话框
14 图像导入后的效果如图1-13所示。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0015_0002.jpg?sign=1739688803-K7E8GQfZYNfAzrse8e7DWxD8ERnCEpCy-0-70af040ed80e4b23ebdff505abf734be)
图1-13 导入图像
15 执行菜单栏中的“文件”/“保存”命令,将该网页保存,按下键盘上的F12键浏览网页,如图1-14所示。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0015_0003.jpg?sign=1739688803-eLra70bs6mQgWMMNwqGcQFFJmzMofdXO-0-7513afffb94897ddbc9ea8792ed67ca2)
图1-14 浏览网页
16 现在本实例的制作就全部完成了,图1-15所示为本实例完成后的效果。如果读者在制作过程中遇到了什么问题,可以打开本书附带光盘中的“网页基础设置/实例1:幼儿园网页的首页/幼儿园网页首页.html”文件,该文件为本实例完成后的文件。
![](https://epubservercos.yuewen.com/587855/3590444703767501/epubprivate/OEBPS/Images/figure_0016_0001.jpg?sign=1739688803-guBSTxuc7xussyXFqoBCPgWGUAEO7Rz1-0-5b385bc657db83251e18009721e76107)
图1-15 幼儿园网页首页