课程设计说明书.doc

阳光梦想设计制作与实现一、 概述随着知识经济时代的发展，基于信息技术的电子商务技术，正在逐步成为现代经济社会的重要基础，计算机网络发展迅速，信息的发布突破了时间和地域的限制，电子商务进入人们的日常生活中，网上购物带给人们的最大便利是缩短了时空距离，消费者的购物行为不再受地域的限制，不再受营业时间的限制，也不用费力地货比三家了解商品价格和质量的差异，它无其不有的强大功能，为人们提供了难以言论的方便与快捷，让你足不出户也晓天下事。为什么要建立网站？首先，网站是一个廉价但高效的宣传工具，企业信息发布除具有覆盖面广，不受时空限制，媒体信息丰富多彩，成本相对较低特点外，与传统媒体对比最主要的特点具有信息双向流通的交互功能，企业通过营销网站建立客户网络，提供企业最好的商品信息，以照片、声音及图文等多媒体信息形式，面向全球传递给客户最丰富的信息量，开发潜力无穷的潜在客户群体，基于网络如此多的优点及其价值所在，所以制作一个虚构的小型网站，在本地磁盘建立个子文件夹。创建个人网站的制作过程中，运用了目前Macromedia 公司最流行的网络三剑客Dreamweaver MX、Fireworks MX、Flash MX,主要用了目前Dreamweaver MX，因为Dreamweaver MX的功能完善，使用的便捷上比FrontPage要强些。它囊括了FrontPage的所有基本操作，并开发了许多独具特色的设计新概念，诸如行为（Behaviors）、时间线（Time Line）、资源库（Library）等，还支持层叠式样式表（CSS）和动态网页效果（DHTML）。而动态HTML是Dreamweaver MX最令人欣赏的功能，是它的最大的特色。有效地利用了这些软件制作出动静结合的网页，让顾客在最短的时间内找到自己喜欢的香水资料，使其网站信息全面，网页更为吸引用户。建议使用Internet Explorer 6.0及以上版本在800*600状态下浏览。本网站设计系统由本人负责策划网站的总框架的设计、校验、链接、修改和资料的搜集、采编、排版、美术采样、网站框架的策划等，通过充分的准备、构思编排，使该网站做到画面精美、动静结合，使顾客更好地了解本店的各类香水产品。二、 网站的总体规划（一）、网站的主题本网站的构建主要从顾客的角度入手，以实用、美观、新颖为主。其构思如下：首先，必须知道自己要做一个什么样的网站，也就是说要了解自己需要清楚知道该网站的定位，并从顾客的心理角度和市场的发展趋势来考虑设计整个网站的。（二）、搜集相关资料确定了网站主题后，就开始搜集相关的资料，包括文字信息、各种香水的资料，包括网页制作用的素材和图片等。（三）、网站架构与网页内容主页主页新闻资讯休闲地带共享资源友情链接留言板联系我们内容分类在线调查将资料采编整理后，接下来就可以把原先的构思逐一落实，首先把网站内容进行分类，即要分几个模块，并画出相应的网站架构图。图1阳光梦想结构图（四）、借助各种软件策划与编辑网页利用Fireworks MX对图片的简单分割，图片与文字的修改、排列、背景、颜色的设定；Dreamweaver MX创建层面网页，还利用其他软件来进行配合制作图片、文字、动画效果等。本网站也采用下载方式收集材料，制作软件的主要功能有： 导入文件 编排布景主题 网页中编辑文字 文字与段落编排 条列项目的文字排列整齐 利用表格来编辑网页的版面 图片与文字颜色设定和插入背景音乐 加入图处与动画 加入超链接三、 网站的风格（一）、网站题材的选择：设计一个网站，首先遇到的问题就是网站主题。（二）、网站的命名：网站名称是网站设计的一部分，而且是关键的一个要素。对网站的形象和宣传推广也有很大影响。所以这个名称必须：要有特色及具视角冲击力。取这名称是为了对网站的形象和宣传推广提供便利。（三）网站的形象风格设计：这个网站以人为本、以服务为基础的概念，使消费者能够享受在网上购物的乐趣。（四）、确定网站的目录结构与链接结构：目录结构的好坏对浏览者来说并没有什么大感觉，但对于网站本身的上传维护、内容的扩充和移植有着重要的影响。1、所有文件存在相应的目录下；2、根据栏目建立相应的目录，将同一栏目中的文件存放在相应的目录下，将图像文件放在栏目中专用的图像目录里。3、网站的链接结构是指页面之间相互链接结构，本网站采用了星状链接结构（一对多），每个页面相互之间都建立有链接；能在各个栏目之间方便跳转，随时能返回首页。四、 网页设计的制作过程和关键技术（一）、主页是网站的门面，内容编排得当，页面设计美观，观赏性和实用性并存，在整个页面构建上共包含了主题名称、图片、各个区域的超链接按钮，当浏览者一进入首页就能马上感觉到本网页的几个组成部分，很容易就能看到自己想看的商品。本主页“logo”是从网上找来的图片素材，通过Fireworks MX将一张大图片进行规划分割，再加上文字处理及颜色处理而产生的，接下来用表格进行网页布局定位，通过插入表格，定义表格格式及有次序在进行页面布局，通过一些如插入图片等形式添加网页元素，为求网站风格统一。（二）、网站制作过程中为避免让顾客浏览因各自电脑所设定的解像度不同会产生一些不同的视觉效果，所以在制作过程中特别设置了“CSS”样式使到无论在任何不同像数的计算机下显示的状态都一样，达到页面优化的效果。操作步骤：1、选择“窗口”/CSS样式命令或者直接单击文档窗口右下角微型导航条中的显示CSS样式图标，打开CSS样式面板，如所示。2、单击CSS样式面板右下角“+”图标，打开新建CSS样式对话框，如所示.3、在新建CSS样式对话框中单击确定按钮,保存样式表,后打开unnamed1的CSS样式定义对话框,如示.4、在CSS样式定义对话框设置网页中的文本字体、大小风格等，如示。5、样式设置完成后，对每个网页进行链接添加样式，务求达到所见即所得的浏览效果。（三）、整个网站使用导航条和工具条来操作，在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上访问的任何部分；通过对网页的设计和制作能够体现网站的主页所能实现的基本功能，有各功能的链接，如注册登录、公司简介、商品展示、会员说明等。主页有产品展示，浏览者很容易就能看到自己想看的、图样及产品型号和单价等。（四）、网站的其它区域，如公司简介、注册登录、会员说明等。其模板与首页的风格差不多，都是采用主页“logo”作页眉。公司简介中很清晰的网站介绍，告诉访问者网站提供的一些服务信息。注册登录采用了表单来制作的，主要用来得到用户的反馈信息、会员注册、网上调查、收到订货单和建立检索界面等。会员说明主要是说明会员的协议条款。（6）网站主页如下图所示：图5阳光梦想主页图五、 制作心得通过这次的网站系统创作，使本人感触颇深。要做一个网站的确不是一件很容易做到的事情，首先是选取材方面，现在社会上的东西应有尽有，但想找到一个人们关注而又喜欢的主题确实不易，想出网站的主题后，就要开始查找该主题的相关资料，那绝非一天半天就能完成的事情，还有网站框架、模板与表格的设计，颜色的调配，图片的修改，在制作过程中要求特别细致，如框架、表格与图片大小不一致，就会发生变形，扭曲。其中，遇到最大的困难是主页“logo”的处理，“logo”中用艺术制作了网站的名称，在制作的过程中艺术字本身带有白色的底色，如将导入“logo”图片内就发生不良的效果，经过多方面的探讨，利用了Fireworks MX技术先设置一个透明的图片，再把艺术字复制粘贴，完成此操作后将图片放到原“logo”内，完在图片的处理。所以，通过多次修改、测试才能制作一个网站；虽然我做的只是一个较简单的一个网站，但是却付出了很多时间和心血。但通过本次制作网站的过程，使我学会各种设计软件的一些基本操作。回顾一下总结经验，制作一个网站需要以下几个阶段：拟定网站的总体布局、总体规划、网站的风格和网站实际作用与主题，从多方面搜集相关资料，规范网站架构模块与网页的具体内容，借助Dreamweaver MX、Fireworks MX等软件的强大功能来策划与编辑网页；并要做到网站与顾客良好的互动性、网站的永续经营。总之，能创造并设计出一个既新颖又内容丰富的网站，是走向成功的第一步。六、 致谢在这次课程设计中，曾遇到过不少问题，如果单靠我个人的努力，很难按时完成课程设计，在此，我衷心感谢我的指导老师霍长荣老师