Adobe Dreamweaver CS4 网页设计与制作标准实训教程
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

模拟制作任务

任务1 素材收集与规划站点结构

任务背景

某学校为了让社会、企业、家长、老师和学生之间有更好的沟通,需建立“师生作品展示平台”网站,通过网站来展示教师与学生的学习生活等情况。在建立网站之前,需要收集相关素材,并规划站点结构,如图2-1所示。

图2-1 素材分类管理

任务要求

收集适合网站内容的素材,并对素材分类管理;合理规划站点结构,方便以后网站的制作。


重点、难点

1.站点结构规划。

2.素材分类。


【技术要领】素材分类、结构规划。

【解决问题】依据“网站目录规范”将不同素材进行分类整理并放置到相关管理目录中,根据网站

主题,对网站内容结构层次进行规划。

【应用领域】个人网站;企业网站。


任务分析

设计者对网站进行分析,并在建站之前准备相关资料(文字资料、图片资料、动画素材以及其他多媒体元素)。为了养成良好的素材管理习惯,要对收集到的素材进行分类,通过建立文件夹管理素材,然后根据网站主题规划站点结构。

操作步骤

网站目录结构

01 依据“网站目录规范”1(注:此序号与“知识点拓展”中的序号1相对应),规划网站目录结构,并建立相应文件夹,如图2-2所示。

图2-2 网站目录结构

02 将收集的素材进行分类,按照“网站目录规范”,放置到相关文件夹中。

规划网站结构

03 根据“师生作品展示平台”的使用范围与用途,设计导航草图,如图2-3所示。

图2-3 规划草图

任务2 创建站点

任务背景

在建立“师生作品展示平台”网站之前,需要创建一个站点,对站点内的所有素材与网页进行管理。


任务要求

便于对网站内所有素材与网页进行管理。


重点、难点

建立站点设置的选择。


【技术要领】建立站点设置的选择。

【解决问题】根据每步的建站向导提示选择合适的选项。

【应用领域】个人网站;企业网站。

【素材来源】无。


任务分析

在规划好站点结构之后,使用Dreamweaver CS4定义站点并建立目标结构,在本地磁盘上定义的站点可自由编辑和修改。

操作步骤

启动Dreamweaver CS4

01 选择“开始”>“程序”> Adobe Dreamweaver CS4命令,启动Dreamweaver CS4软件,如图2-4所示。

图2-4 启动Dreamweaver CS4软件

建立站点

02 选择“站点”2>“管理站点”命令,如图2-5所示,或者展开“文件”面板组,单击“文件”面板中的“管理站点”超链接,弹出“管理站点”3对话框,单击“新建”按钮,弹出快捷菜单,如图2-6所示。

图2-5 选择“管理站点”命令

图2-6 “管理站点”对话框

03 选择“站点”命令,弹出“站点定义”对话框,在“基本”选项卡的站点名称输入框中输入站点名称“workspace”,如图2-7所示。

图2-7 输入站点名称

04 单击“下一步”按钮,由于此站点是一个静态站点,没有动态页,所以在弹出的对话框中选中“否,我不想使用服务器技术”单选按钮,如图2-8所示。

图2-8 取消使用服务器技术

提示

若选中“是,我想使用服务器技术”单选按钮,则对话框将提示需选择一种服务器技术。

05 单击“下一步”按钮,在“编辑文件,第3部分”选项组中,选中默认的推荐选项“编辑我的计算机上的本地副本,完成后再上传到服务器”单选按钮,然后单击下面的“文件夹”图标,定位在本地根目录,如图2-9所示。

图2-9 选择站点的本地根目录

06 单击“下一步”按钮,由于没有定义服务器技术,在站点完成之前也不需要上传,所以可以将“您如何连接到远程服务器?”选项设置为“无”,如图2-10所示。

图2-10 在站点未完成之前暂不共享文件

提示

建立本地站点,通常就是把已有的文件夹设置为站点。此文件夹内的文件就是站点内的文件。

07 单击“下一步”按钮,出现站点定义选项的总结。“远程信息”和“测试服务器”都可以等站点设计完成之后再设置,而“本地信息”则是建立站点的基本信息,如图2-11所示。

图2-11 站点信息总结

08 单击“完成”按钮。站点向导将关闭,同时开始扫描本地根目录中的文件,扫描完成之后,新站点名称 将出现在“管理站点”对话框的列表框中,如图2-12所示。

图2-12 新建的站点出现在站点列表中

09 单击“完成”按钮,新建站点将显示在“文件”面板中,单击该面板上的“扩展/折叠”按钮,可以打开独立的站点管理窗口,如图2-13所示。

图2-13 打开站点管理窗口

任务3 管理站点

任务背景

在建立站点时,不小心将其配置设置错误,为了确保信息准确,要对站点错误信息进行修改。


任务要求

修改要做到准确、快速。


重点、难点

修改站点信息。


【技术要领】修改站点信息。

【解决问题】通过“管理站点”命令修改站点信息。

【应用领域】个人网站;企业网站。

【素材来源】无。


任务分析

通过“管理站点”命令进行站点信息的修改。

操作步骤

修改站点名称

01 选择“站点”>“管理站点”命令,弹出“管理站点”对话框,选择要编辑的站点,如workspcae站点,单击“编辑”按钮,如图2-14所示。

图2-14 “管理站点”对话框

02 弹出“workspcae的站点定义为”对话框,将输错的名字“workspcae”修改为“workspace”,如图2-15所示,或者打开“高级”选项卡,在“分类”列表框中选择“本地信息”,在右侧窗口中修改名字,如图2-16所示。

图2-15 修改后的名称

图2-16 在“高级”选项卡中修改名称

删除已有的站点

03 选择“站点”>“管理站点”命令,弹出“管理站点”对话框,选择要删除的站点,如pfc站点,如图2-17所示,单击“删除”按钮,弹出信息提示对话框,单击“是”按钮,即可删除pfc站点,如图2-18所示。

图2-17 选择要删除的站点

图2-18 删除提示对话框