下面利用Dreamweaver CS5中的向导功能搭建我们的第一个本地站点。
最终效果
本例的最终效果如图2-11所示。
解题思路
1 运行Dreamweaver CS5软件,并新建一个站点。
2 添加站点内容。
操作步骤
1 选择菜单命令“站点”→“新建站点”,如图2-12所示。
2 在弹出的“站点设置对象”对话框的左侧选项栏中选择“站点”选项,然后在右侧为站点指定名称和文件夹,如图2-13所示。
图2-11 最终效果
图2-12 单击“新建站点”菜单命令
图2-13 新建站点
3 单击“保存”按钮,完成站点的设置。
4 选择“窗口”→“文件”命令(快捷键为“F8”),打开Dreamweaver CS5中的“文件”面板,在其中即可看到刚刚创建好的站点“我爱音乐网”了,如图2-14所示。
5 在“文件”面板的文件列表区域单击鼠标右键,在弹出的菜单中选择“新建文件”命令,如图2-15所示。
图2-14 Dreamweaver CS5的“文件”面板
图2-15 “新建文件”命令
提示
创建站点的时候需要注意,站点文件夹的名称和网站中所有文件的名称都尽量使用英文小写字母加数字的组合,不要使用中文。这是因为现在很多服务器使用的都是Windows 2000或者UNIX操作系统,它们不能很好地识别中文。站点文件夹不要创建在C盘,因为一旦系统崩溃,C盘的内容很有可能丢失。站点文件夹的目录层次不要太深,一般在硬盘根目录的二、三级就足够了,否则有可能导致链接错误。
6 这时Dreamweaver CS5会在站点中建立一个名为“untitled.html”的网页文件,如图2-16所示。
7 修改这个文件的名称为“index.html”,这个文件即成为当前站点的首页。
提示
任何一个网站都有首页,所有网站的首页默认文件名为“index.html”,这个页面只能存放在站点的根目录下,当我们输入网址的时候,打开的就是这个页面。
8 继续在“文件”面板的文件列表区域单击鼠标右键,在弹出的菜单中选择“新建文件夹”命令,如图2-17所示。
图2-16 新建的文件
图2-17 “新建文件夹”命令
9 根据构思好的栏目设置,依次在站点根目录下创建三个文件夹,分别命名为“pop”、“old”和“down”,表示流行栏目、古典栏目和下载栏目,如图2-18所示。
提示
根据栏目的设置来建立文件夹,因为每个栏目中都会包含很多内容,比如网页、图片、动画等。如果有多级栏目,依次建立二、三级文件夹即可。
10 继续在站点的根目录建立文件夹“img”、“media”和“css”,分别用来存放当前站点中的图像、多媒体和样式表,如图2-19所示。
图2-18 新建文件夹
图2-19 新建文件夹
提示
在站点的根目录下建立的图像、多媒体和样式表文件夹用于专门存放整个站点中所公用的图像、多媒体和样式表。
11 在“pop”文件夹上单击鼠标右键,在弹出的菜单中选择“新建文件”命令。在“pop”文件夹中创建一个新的网页文件,如图2-20所示。
12 修改“pop”文件夹中的网页名称为“index.html”。这个页面是流行栏目的首页面,如图2-21所示。
图2-20 “新建文件”命令
图2-21 新建首页
提示
任何一个栏目也应该有自己的首页面,默认名称同样为“index.html”。
13 在“pop”文件夹上单击鼠标右键,在弹出的菜单中选择“新建文件夹”命令。在“pop”文件夹中创建新的文件夹,如图2-22所示。
14 在文件夹“pop”中创建两个新的文件夹,分别命名为“img”和“media”,如图2-23所示。
图2-22 “新建文件夹”命令
图2-23 新建文件夹
提示
在站点的“pop”文件夹中建立的图像和多媒体文件夹是专门用来存放流行栏目中所私用的图像和多媒体文件。
15 用同样的方法,在“old”和“down”文件夹中创建相应的子目录,站点结构创建完毕,如图2-24所示。
图2-24 “我爱音乐网”音乐网站站点结构
16 到此为止,站点结构定义完毕,可以开始制作当前网站中的每一个页面了。当把所有的页面都制作完毕并添加好超链接,网站也就制作完毕了。