第10章 创建站点.ppt

1、第10章 创建站点,本章学习要点 站点规划和流程设计 创建本地站点 管理本地站点,10.1 站点规划 10.2 站点设计步骤 10.3 定义本地站点 10.4 定义本地站点 10.5管理本地站点,10.1 站点规划,10.1.1 确定站点类型和目标,站点类型决定站点的类别，在规划站点时，首先要确定站点类型（如企业网站、政府网站、学校网站等），然后根据站点类型确定站点目标。目标是站点设计的灵魂与向导,能够引导设计者成功地设计站点。站点的目标因主题而异,因此,在设计站点之前只有明确站点的目标,才能有条不紊地设计和管理好站点文件,10.1.2 确定站点规模和结构,一般开始设计站点时，规模不要求大而全

2、，要突出主题。站点主题突出，结构设计合理,能够更好地管理文件。在规划站点结构时，应遵循以下两个原则：,1.本地站点和远程站点采用相同的结构 将本地站点和远程站点设置成相同的结构,以便于站点的维护和管理。在本地站点结构设置修改完成后,利用Dreamweaver MX 2004将本地站点上的文件及文件夹上传到远程服务器上。 2.用文件夹保存文档 应将站点文件分门别类,保存在站点根目录下的相关文件夹中,以便查找和组织管理。,10.1.3规划站点栏目和内容,站点的栏目要清楚，内容安排要合理,可以将各种不同的内容划分为几个板块,例如新闻、汽车、笑话、旅游等,这样既可以方便网站设计者,也能够方便网站浏览者

3、浏览相关信息。除了文本和图像等内容外,还可以加入多媒体元素。此外,要注意使用合理的文件名称,尽量避免使用中文名称,因为大多数软件平台是英文的。有的Web服务器是区分大小写的,所以,最好采用小写字母命名站点中的文件。,10.1.4规划站点的导航机制,站点应该具有明确的导航系统,避免浏览者在页面上迷失方向,找不到自己想要的信息。 在规划站点的导航条时,应该注意以下几个方面：,1.返回首页链接 除了站点主页以外，每个页面上都要有与主页的链接,方便浏览者回到主页,寻找新的导航目标。同时,当浏览者在页面上迷失方向时,可以返回主页,重新开始。,2.导航标题明确 导航标题文字或图像具有明确的导航指示作用,标

4、题性文字一般是页面内容的概括,例如“新闻”,一看到该标题文字,就可知道链接的内容是当日重要的新闻,如果要查阅当日发生的重要事件,单击该链接即可。,相对于文字导航标题,图像标题更有其独到的一面。例如,做一个首页的链接,设计者往往是添加一个大家所熟悉的图标。例如浏览汽车，使用汽车图标导航，浏览图书，使用图书图标导航。这样,既可以起到明确的导航作用,同时又比单调的文本生动。此外,可以在图像上添加替代文本,这些文本可起到辅助的指示作用。,10.1.5 明确站点的风格,站点的风格体现在主题、颜色、布局、内容等各个方面,因此,应紧紧围绕站点主题和内容设计出颜色柔和、风格独特，表现形象的网页。例如,以自然山

5、水为主题的站点,最好能够体现出回归大自然的感觉。 在实际创建站点时,可以使用模板创建风格相同的页面,提高设计的效率。,10.1.6规划站点要注意的原则,1.为站点创建一个磁盘根文件夹,然后创建多个子文件夹,这样可以将站点的文件分类储存到相应的文件中。 2.文件夹和文件命名注意事项: 使用英文或汉语拼音作为文件或文件夹的名字。 名字中不能包含空格等非法字符。 命名应有一定规律,以便日后的管理。 网页主页名字最好使用index.htm。 由于某些操作系统是区分文件名大小写的,因此建议在创建站点时,全部使用小写字母的文件名称。 3.创建站点需要使用各种类型文件，一般将图片文件放在image文件夹中,

6、媒体文件放在media文件夹中。其他文件应根据其类型,放在不同的文件夹中。,10.2 站点设计步骤,一般站点设计步骤如下： 步骤1：根据构思和内容要求制作流程图。制作流程图的方法可以手画草图，也可以使用word软件制作规范的流程图。构思要新颖，流程层次要清楚。 步骤2：按照流程图创建站点的基本框架，站点框架命名要准确。如果已经构建了自己的站点,也可以利用Dreamweaver MX 2004来编辑和更新现有的站点。Dreamweaver MX 2004可以在站点窗口中以两种方式显示站点结构,一种是目录结构,另一种是站点地图。使用站点地图方式可以快速构建和查看站点。,步骤3：在本地站点中组织文档

7、和数据。文档就是在访问站点时可以浏览的网页。文档中包含各种类型的数据,例如文本、图像、声音、动画和超级链接等。 步骤4：在站点编辑完成后,需要将本地站点上载到Intemet服务器上,以后可以定期更新。,10.3 定义本地站点,10.3.1 使用管理站点对话框定义本地站点 10.3.2 使用文件面板定义本地站点 10.3.3从起始页定义本地站点,10.3.1 使用管理站点对话框定义本地站点,操作步骤如下： 步骤1：选择菜单“站点(S)”|“管理站点(M)”命令，弹出管理站点对话框, 如图10.1所示。,图10.1 管理站点对话框,步骤2：在管理站点对话框中单击“新建(N)”|“站点(S)”，打开

8、未命名站点1的站点定义为对话框，如图10.2所示。,图10.2 未命名站点1的站点定义为对话框中的“基本”选项卡,在“基本”选项卡中，首先显示编辑文件的第一部分，从这里开始逐步完成定义站点。 在编辑文件第一部分“您打算为您的站点起什么名字？”中输入站点名称，然后单击“下一步”； 在编辑文件第二部分“您是否打算使用服务器技术”中选择“否，我不想使用服务器技术”，然后单击“下一步”； 在编辑文件第三部分“在开发过程中，您打算如何使用您的文件”中选择“编辑我的计算机上的本地副本，完成后再上传到服务器”，再选择“您将把文件存储到计算机的什么位置”，在文本框中输入路径，然后单击“下一步”；,在共享文件第

9、一部分“您如何连接到远程服务器？”中选择“本地网络”，再选择“您打算将您的文件存储在服务器上的什么文件夹中？”，在文本框中输入路径，然后单击“下一步”； 在共享文件第二部分“是否要启用存回和取出文件以确保您和您的同事无法同时编辑同一个文件？”中选择“否，不启用存回和取出”，然后单击“下一步”； 在总结对话框中选择“完成”，至此完成了定义站点的设置。,步骤3：在未命名站点1的站点定义为对话框中选择“高级”选项卡，如图10.3所示。“高级”选项卡除了具备“基本”选项的设置功能以外，还增加了“HTTP地址”和“缓存”设置,图10.3 未命名站点1的站点定义为对话框中的“高级”选项卡,10.3.2 使

10、用文件面板定义本地站点,操作步骤如下： 步骤1：选择文件面板右边下拉菜单中的“站点(S)”，弹出二级菜单，如图10.4所示。,图10.4 文件面板中的二级菜单,步骤2：在二级菜单中选择“新建站点(S)”，出现图10.2未命名站点1的站点定义为对话框中的“基本”选项卡，然后按图10.2中的“基本”选项卡操作。,10.3.3从起始页定义本地站点,启动Dreamweaver MX 2004后，出现一个默认的起始页。用鼠标在起始页中点击“Dreamweaver站点”图标，如图10.5所示。即可打开未命名站点1的站点定义为对话框，同样可以按照图10.2的步骤进行站点定义。,图10.5 起始页,注意： 起

11、始页的显示方式是可以控制的，选择菜单 “编辑(E)”|“首选参数(S)”命令，打开首选参数对话框，在首选参数对话框中选中“常规”|“文档选项”|“显示起始页(S)”复选按钮，即可使用起始页，否则不能使用起始页。,10.4 定义本地站点 渊博书屋,本地站点“渊博书屋”的主页已经预先编辑好，如图10.6所示。“渊博书屋”主页已经保存到D:渊博书屋文件夹中。,图10.6渊博书屋网站,使用未命名站点1的站点定义为对话框中“基本”选项卡定义本地站点（素材存放在D:渊博书屋image文件夹中），操作步骤如下： 步骤1：首先在D盘根目录下建立一个存放站点的文件夹，命名“渊博书屋”。 步骤2：选择Dreamw

12、eaver MX 2004菜单栏中的“站点(S)”|“管理站点(M)”命令，在管理站点对话框中选择“新建(N)”|“站点(S)”命令。如图10.7所示。,图10.7 管理站点对话框,步骤3：选择未命名站点1的站点定义为对话框中“基本”选项卡，输入本地站点名字“渊博书屋”，如图10.8所示。,图10.8 输入站点名字“渊博书屋”,步骤4：用鼠标点击“下一步”，在对话框中选择“否，我不想使用服务器技术”，如图10.9所示。,图10.9选择“否，我不想使用服务器技术”,步骤5：用鼠标点击“下一步”，在对话框中选择“编辑我的计算机上的本地副本，完成后再上传到服务器”，在“您将把文件存储到计算机的什么位

13、置”的文本框中输入路径“d:渊博书屋”，如图10.10所示。,图10.10 输入本地站点所在文件夹,步骤6：用鼠标点击“下一步”，在对话框中选择列表框中的“本地网络”，在“您打算将您的文件存储在服务器上的什么文件夹中？”中选择路径“d:渊博书屋”。如图10.11所示,图10.11 选择“本地网络”和文件夹路径,步骤7：用鼠标点击“下一步”，选择“否，不启用存回和取出”，如图10.12所示。,图10.12选择“否，不启用存回和取出”,步骤8：用鼠标点击“下一步”，显示站点定义总结内 容，如图10.13所示。,图10.13 站点定义总结窗口,至此完成了本地站点的全部操作，在“站点管理”对话框中显示

14、“渊博书屋”。如图10.14所示。,图10.14 “渊博书屋”出现在列表框中,10.5管理本地站点,10.5.1 使用管理站点对话框管理站点,打开管理站点对话框，在管理站点对话框中有“新建(N)”、“编辑(E)”、“复制(P)”、“删除(E)”、“导入(I)”和“导出(E)”站点按钮。如图10.14所示,下面分别介绍各个按钮的主要功能,1.新建(N) 在10.4节已经详细讲解，详细内容请见10.4节。,2编辑（E） 对已经设置好的“渊博书屋”进行设置修改。在图10.14中点击“编辑(E)”按钮，显示未命名站点1的站点定义为对话框中“基本”选项卡，如图10.15所示。按着步骤逐一修改。,图10.

15、15未命名站点1的站点定义为对话框中的“基本”选项卡,3.复制（P） 通过复制可以建立一个站点副本，副本将出现在列表框中，如图10.16所示。,4.删除（R） 将不需要的站点名字从列表框中删除,图10.16 渊博书屋副本,5.导入（I）和导出（E） (1)导出（E） 在图9.16中用鼠标点击“导出(E)”按钮，显示“导出站点”对话框，如图10.17所示。在文件名右边文本框中输入新文件名，也可以使用源文件名，然后点击“保存(S)”按钮，即可将文件保存到当前路径。,图10.17 输入导出文件名,(2)导入（I） 在图10.16中用鼠标点击“导入(I)”按钮，显示“导入站点”对话框，如图10.18所示。选择导入的站点的路径，在文件名右边文本框中选择导入的文件名。然后点击“打开”按钮，即可将文件导入到当前路径。,图10.18 导入站点对话框,在导出和导入站点文件时，需要事先查看是否为站点文件，只有是站点文件才能够按站点文件导出和导入。Dreamweaver MX 2004本地站点文件类型为ste文件，这里通过属性对话框查看，如图10.19所示。,图10.19 渊博书屋属性对话框,10.5.2 使用站点地图管理站点,使用站点地图管理站点，可以查看站点结构。查看站点结构的具体操作步骤如下： 第一步：在文件面板中选择地图视图，即可显示站点地图。在站点地图的index.htm图标上单击