网页艺术设计课件第七章.ppt

第七章 网页设计艺术实战 【内容提要】 使用DreamWeaver软件和Photoshop软件综合完成一个网络课程教学网站。 【关键词】 前期策划 网站制作 第一节 网页设计的前期策划 一、《设计色彩》网站项目的简要分析 网络课程是当今远程教育和终生教育发展下的必然产物。《设计色彩》课程是一门普通高校艺术类网络课程，主要应用于在校本科学生课余辅助教学及非在校成人教育学生远程学习，它有助于充分利用学生的课余时间，提高学生的研究性学习能力和学习效率； 二、网站的接受对象分析 《设计色彩》网络课程面向的对象主要是艺术设计专业和美术学专业的低年级学生，从年龄段来看主要以分布在18—22岁之间，他们普遍具有爱好广泛、求知欲望强、能够接受新鲜事物的特点，但也存在学习注意力容易分散的问题。因此，《设计色彩》网络课程需要在界面风格设计上符合年轻人的特点，在栏目设置及内容安排上更贴近他们的学习实际，以产生足够的吸引力。 三、申请网站空间和域名 网站只有上传到服务器上才能被别人访问。所谓网站空间是指网站在服务器中拥有的存储空间，而域名则是网络中网站的名称。二者都需要向网络服务商申请或购买才能得到。 要注意在申请服务器空间过程中填写的FTP帐号及FTP密码一定要记牢，这是我们今后使用服务器空间的“钥匙”，没有它，我们将无法向服务器上传网站文件。 四、确定网站的内容以及栏目结构 《设计色彩》具体的栏目结构设计如图： 五、制定网站开发进度表 《设计色彩》网站建设有明确的时间规定，所以我们制定了一个进度时间表，确保网站的如期完成。 六、收集、整理和制作网站的内容素材 需要收集和整理的内容和素材包括：教学文档、教学图片、学生作业、教师资料等。 需要制作的网站素材有：网站界面设计、网站标志（Logo）、部分图片等，主要使用Photoshop制作。 第二节 Dreamweaver 8.0软件简介 一、Dreamweaver 8.0运行环境 Dreamweaver 8.0在Windows 平台和Macintosh平台都可使用。 二、Dreamweaver 8.0软件窗口布局介绍 首次启动 Dreamweaver 时，会出现一个工作区设置对话框，作为网页设计人员，我们一般选择“设计器”布局。 进入Dreamweaver软件操作界面，该软件工作区分布如图：　 1.“插入”栏 “插入”栏包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段HTML代码，允许您在插入它时设置不同的属性。例如，我们可以通过单击“插入”栏中的“表格”按钮插入一个表格。另外，也可以不使用“插入”栏而使用“插入”菜单插入对象。 2.“文档”窗口 “文档”窗口用于显示当前创建和编辑的文档。 3.“文档”工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图的选项、各种查看选项和一些常用操作。 4.标签选择器 位于“文档”窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签，可以选择该标签及其全部内容。 5.属性检查器 属性检查器用于查看和更改所选对象或文本的各种属性。 6.面板组 面板组是分组在某个标题下面的相关面板的集合。单击组名称左侧的展开箭头，可展开一个面板组。 第三节 “首页”页面制作 在做网站之前，先在本地硬盘中建立一个文件夹，取名“sjsc”，该文件夹用于放置设计色彩网站的所有文件，并将在以后全部上传到服务器上。该文件夹内的文件请尽量不要用中文名称，以免今后出现浏览器兼容性问题。 一、页面设计 首先我们用Photoshop设计好各个页面界面图，保存图像格式为PSD格式或TIFF格式，宽度为980个像素。界面效果图如下： 第四节 “课程简介”页面制作 一、“课程大纲”页面制作 二、“师资团队”页面制作 最后的页面效果图如下： 练习题： 完成“kcmb.