电子商务网站课程设计

第一篇：电子商务网站课程设计

《电子商务网站设计》课程设计方案

课程设计是作为一门独立的课，进行考核的。根据本课程所学知识，针对“淘宝商城”大卖家，没有独立建站的，为其设计“独立电子商务网站建设实施方案”，方案须重点考虑可行性，有效性。该方案以小组为单位提交，每个小组必须按时提交才有成绩，根据分工情况、完成质量打分。

方案主题：“淘宝商城”大卖家xxx的电子商务网站

时间：2010年1月21日截止

考核：完成以下内容，根据完成情况给分，没有提交或不合格的需要重修，重考

完成内容：

1.小组项目分工及进度安排一份(参考“网站项目分工及进度安排.doc”)

2.建设实施方案一份(必须包括：可行性分析;成本预算;网站栏目内容规划;网站发布与推广等内容)(参考“参考_1电子商务网站建设方案模板.doc,参考_2网站项目开发方案模板.doc,参考_3服饰类B2C商城网站规划实施方案.doc”)

3.网站建设效果图若干(网页截图图片)

示例：淘宝商城大卖家：优衣库 http://uniqlo.taobao.com/

独立电子商务网站：

第二篇：电子商务网站建设课程设计报告

《B2C商务网站》

指导老师：易秋香 所在班级：08级EC

设计人：洪敏 学号：0802052 2010.9.16

一、 课程设计的目的与要求

通过图书商务网站课程设计，进一步掌握ASP的理论和方法。、

要求了解电子商务系统开发的全过程，理解网站建设相关的概念，掌握ASP网站建设的开发方法。主要包括：系统调研方法;业务分析、数据分析;数据库设计、功能设计、物理模型设计方法;系统的实现等方法。完成一个小型系统的设计与开发。

二、设计正文 1 系统分析

1.1随着计算机的高度普及和网络技术的突飞猛进，网上购物也已经成为新兴的购物方式，越来越多的改变着我们的生活!图书销售作为传统的销售领域也应加入到新兴浪潮之中，因此着手建设图书商务网站的建设! 1.2业务流程分析

(1)用户通过注册得到会员资格。

(2)用户通过登陆系统登陆到网站，并且可以查看和搜索所要商品。 (3)用户可以对自己所选商品进行购买，并将其添加入自己的购物车当中。 (4)通过购物车对自己所选商品进行添加或删除。 (5)确认所选商品后到收银台提交订单。 (6)选择邮寄方式和支付方式。 (7)确认订单信息，完成购物。 1.3数据字典 用户系统表：

User_id：用户ID User_name:用户名 Cha:密码查询问题 Daan:密码查询答案 User_pass:用户密码 User_mail:用户邮箱 User_adds:用户地址

User_regtime:用户登陆时间 User_regid:用户登陆ID Userlassttime:用户最后登陆时间 Userlastip:用户最后登陆ID User_baymoney:用户购买钱数 User_namec:联系人名

User_postcode：用户邮政编码 User_tel:用户电话 商品表：

Sp_id:商品ID Sort_id:商品所属类别ID Sp_name:商品名 Sp_cash:商品价格 Sp_content:商品简介 Sp_content2:商品介绍 Sp_views:商品查看数 Sp_buys:商品购买数 Sp_date:商品上架时间 Sp_pic:商品PIC号 Huiyuan:会员价 Vip:vip价

Sp_zuozhe图书作者: Sp_chuban:图书出版社 商品类别表：

Sort_id:类别ID Sort_name:类别名 购物车表：

Basket_id购物车ID: Sp_name商品名: Sp_cash:商品价格

Basket_count:购买数量 Sub_number:订单号 User_name:用户名 Sp_id:商品ID Basket_time:购物时间 Sp_price:总价 订单表：

Sub_id:订单ID Basket_id:购物车ID User_name:用户名 Sub_date:订单时间 Sub_number:订单号 Sub_to:订单

User_mail用户邮箱: User_tel:用户电话 User_adds:用户地址 User_postcode:用户邮编 Qian:付款方式 Other:其他信息 2 系统设计 2.1功能设计 用户功能：

用户注册，找回密码，修改用户信息 商品功能：

商品显示，分类显示，商品搜索 购买功能：

购物车实现，商品添加实现，订单功能实现 2.2系统运行环境与数据库

需运行于装有IIS功能的服务器上，配套SQL数据库。 3 系统实施 index.asp

第三篇：《电子商务网站建设》课程设计教学大纲

课程设计名称：电子商务网站建设 课程设计学分: 1 课程设计时间：第六学期 课程设计年级: 3 课程设计学时或周数：1周(36学时) 课程设计专业:电子商务

一、课程设计的目的、任务与要求

全面考查学生网站建设的能力，包括电子商务网站的规划与设计、网站软硬件平台的安装与配置、静态和动态页面的设计开发、Web数据库与访问技术等。特别要强化编写及调试ASP程序的能力。要求学生提交一个可运行的动态网站及网站说明书。

二、选题的原则及题目难度、深度、广度分析

1、网站选题有创意，符合社会需要;

2、页面具有鲜明的设计风格和良好的视觉效果;

3、具有后台管理系统，可动态管理前台页面。

三、课程设计内容

1、静态网页设计

2、动态网站建设

3、网站说明书

四、课程设计时间进程表

第1天完成网站创意与基本设计;第

2、

3、4天分工完成网站的详细设计及编程;第5天测试网站，编写网站说明书。

五、课程设计成绩的评定方法及评分标准

根据学生网站建设的质量和课程设计的工作态度等综合打分。成绩评定实行优秀、良好、中等、及格和不及格五个等级。不及格者不能得到相应的学分，需重新做课程设计，经指导教师考核及格后，方可取得相应学分。有关的考查相关材料(文字材料以及光盘)统一妥善保管。

拟稿(签名)：

邵婷

核对(签名) 林建宗

审批(签名)：瞿友喜

2009年 10 月10 2009年 11 月 1 2009年 11 月 2 日

日

日

第四篇：《企业网页设计与网站建设》课程及《电子商务网站建设实训》作业要求剖析

《企业网页设计与网站制作》 课程成果要求及实训大纲

一、实训目的

《网页设计与网站制作》是电子商务专业实践性很强的课程，学生必须通过不断上机练习以及使用它来解决实际的问题，才能更好地掌握。因此，在本学期特设置此课程实训，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、完整的电子商务网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。

二、实训要求

综合运用已学的知识，使用Dreamweaver、Photoshop、Flash等网页制作软件，制作一个网站，要求如下：

设计一个包含一个主页及至少30个不同页面的完整的电商网站或企业网站，主题自选，但要表达明确的主题思想，并完成网站的相关文字材料。

(一)网站设计要求 1. 内容：

1) 网站主题可以包括企业门户网站、电子商务网站、新闻旅游、个人网站、专业网站等方面的网站。网页内容要主题健康向上、有时代气息，内容充实、主题鲜明。

1 以企业门户网站为例网站至少包括：主页、新闻多条、论坛和帖子多条、产品多个，并包含用户注册、登陆、留言板等页面。

2) 主页上必须有Logo、网站导航、网站版权等信息。 2. 设计要求：

1) 网页布局设计合理，文字、图片、动画等元素在网页中的运用适当。

2) 各网页之间的设计风格具有联系性、一致性，符合设计原理。

3. 技术要求：

网页中各种技术运用恰到好处，不为技术而技术。

1) 网页中应包含表格、css技术和多媒体元素(例如背景音乐等)技术。

2) 网页中含有CSS样式和行为技术(例如鼠标经过图像，“增大/收缩”效果等)。

3) 站点中创建库文件、模板文件，并应用的网页中。 4) 部分页面可使用框架集。

5) 部分网页(如主页)中运用div技术。 6) 用户注册登陆和留言板页面实用表单及控件。 7) 站点下的页面创建合理的站点内链接和外部链接。 4. 美工要求：

网页界面美观大方、引人入胜，色颜搭配合理，所有图片、动画与网站主题相符。

运用Photoshop、flash等工具进行特殊处理的元素在报告中进行

2 说明和展示，可作为亮点加分项。

5. 创意要求：

网站要具有新意，参考同类的网站，但设计上要具有自己的特色，。

注：

1) 成果提交形式为电子版：以学号+姓名命名站点根文件夹，例如：20104140101张子蒙，子文件夹和文件组织合理，命名合理。

2) 对网站互相抄袭或从他人网站抄袭者将给予扣分，完全抄袭者成绩为零分。

(二)书面材料

需要上交的材料包括《网站策划方案》和《企业网站设计与网站制作课程汇报》

1.网站策划方案：

2.《企业网站设计与网站制作课程汇报》

根据提供的模板撰写实训报告。实训报告要切实体现网站制作过程中思路和行动。报告内容主要包括一下几个模块：

设计思想

阐述网站设计思想，从网站内容及特点、网站定位、受众范围及特点分析、网站的设计风格等方面进行分析。

网站构架和站点分析

根据设计思想对站点进行分析。确定网站的基本框架，运用的网页元素，分析形成站点地图。

网页设计

阐述内容网站的开发工具、设计过程;网站的设计特点;网站中使用的网页元素及图像编辑软件等;网站中使用的，如动态元素、css样式、层、行为、框架集、库、模板、表单、引用的语言代码等。

网站截图 体会和收获

4 考核答辩记录

答辩问题：

(1)你的网站主题是什么，对用户想达到什么效果，你觉得达到效果了吗。 网站共有**个网页，包含有**个首页+**个一级页面+**个二级页面。 (2)在网站制作过程中，除了dreamweaver，你还使用到什么软件工具，利用这些工具实现了哪些功能。

(3)以下问题，选一作答

① 怎样避免你的网站内容被复制。 ② 怎样改变鼠标在浏览器中的样式。 ③ 如何把一个压缩文件供给用户下载。

④ 想在一张图片上做多个链接，如何实现。

⑤ 思考如何在首页中实现雪花漫天飞舞的效果。 将答辩内容简写到答辩记录上，实训报告装订上交。

三、实训课时安排

14高职电商1班 15-16周

15#306

14高职电商2班 17-18周

15#306

四、考核方式

本学期成绩以作品和大作业形式进行考核：

成绩= 平时成绩：20% + 网站作品成绩：40% +

五、实训项目

实训一 网站策划

一、实训目的 了解网站制作的流程

对要制作的网站进行定位和分析 搜集网站素材

二、实训内容

项目1 网站建设流程

书面材料：40%

内容：网站建设流程图

项目2 网站定位

实训内容：

确定你要制作的网站内容、所属类型、受众定位 实训要求：

以图文叙述的方式(word文档)描述你的网站设计思路和想法，分几个方面进行阐述。

项目3 网站地图

实训内容：

6 分析网站、制作网站地图 实训要求：

使用E-R图展示网站地图。

项目4 网站素材

实训内容： 搜集网站素材 实训要求：

(1)通过因特网搜集素材

(2)利用图像处理工具制作网站素材、处理素材

项目5 制作LOGO 实训内容： 制作网站LOGO 实训要求：

利用搜集的素材，使用PHOTOSHOP制作网站LOGO

三、实训方法与步骤 1.遵循要求，独立完成;

2.学生在整个过程中应自觉遵守纪律，服从指导教师的安排。

四、实训注意事项

1. 实训态度认真、知识准备充分

2.对方法和技巧的使用难点，通过网络或书籍寻求解决方法

实训二 网页制作

一、实训目的

完成网站各网页的制作

二、实训内容

根据自己网站的内容和地图，运用Dreamweaver技术，分别制作各个页面。

项目1 网页布局

实训内容：

确定网站风格，布局页面版式 实训要求：

确定网站中网页的版式风格，使页面具有设计感，符合用户的常规审美标准。

项目2 色彩风格

实训内容： 确定网站色彩格调 实训要求：

网站最令人赏心悦目的东西，网站的主色调。这时候，你选择的网站主色调，就不能只是掺杂你个人的想法，要从浏览者和公司产品出发，选择最适宜的颜色。注意，假如这个颜色是多色调的，那就不能将颜色的反差拉的过大，这样，视觉的冲击效果会下降。你选择的颜色，可以是公司LOGO或者是公司宣传彩页的颜色，要是太过艳丽

8 的颜色，切忌不要大面积使用。

项目3 制作首页

实训内容： 制作Index(首页) 实训要求：

网站首页的重要性。一个成功的网站，首先是其静态页面的设置，，主要就是首页的设计。只要你的网站首页足够hold住全场，你的网站机会吸引更多的浏览者，哪怕只是简单的浏览，也对你的公司、产品有了了解。

项目4 导航栏

实训内容： 制作导航栏 实训要求：

网站的导航要有吸引力。导航条在网站中的作用不可小觑，在制作的时候，选择的导航条图片除了要精美，大小要适宜，还有就是在图片上能体现网站文化的字幅，展现网站的风采。

项目5 内页

实训内容：

创建一级页面和二级页面

实训要求：通过创建和使用库文件和模板文件，创建其中统一版式的子页面。

项目6 CSS

9 实训内容： CSS样式 实训要求：

CSS是Cascading Style Sheet的缩写，有些书上把它译为"层叠样式单"或"级联样式单"(下文简称"样式单")，它是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。

采用CSS技术，对页面的布局、字体、颜色、背景和其它效果实现页面美化。

项目7 超链接

实训内容： 超级链接 实训要求：

网页制作中基本理能的超级链接就是在网页中以文字和图片的形式来作为链接对象，点击可以连接到一个你指定的网页当中去，在IE打开网页单击文字或其他链接时时，IE浏览器可以直接或者采取弹窗的方式连接到指定目标网页。

(1)给主页、内页、导航、库、模板等需要设置超级链接。 (2)要求站点内页面可以互相访问及返回。 (3)链接设置要准确，各种连接畅通。

项目8 行为

实训内容：

10 创建行为 实训要求：

使用行为，可以实现浏览者与网页之间的简单交互，从而以多种方式修改页面或引发某些任务的执行。

为页面元素添加行为，如弹出信息、打开浏览器窗口、改变文字或图片属性、变换图像、拖动AP元素等。

项目9 DIV 实训内容： DIV(层) 实训要求：

(1)使用AP Div和Div标签布局网页 (2)使用CSS样式控制DIV的样式和位置

三、实训仪器、设备

学生用机：WindowsXP 软件条件：Dreamweaver8中文版、Photoshop中文版、FlashMX中文版。

网络条件：与因特网连接的局域网。

四、实训方法与步骤 1.遵循要求，独立完成;

2.学生在整个过程中应自觉遵守纪律，服从指导教师的安排。

五、实训注意事项

1. 实训态度认真、知识准备充分

11 2.对方法和技巧的使用难点，首先通过网络或书籍找到解决方法

第五篇：教学网站课程设计

广东工业大学本科课程设计

1 绪论

1.1 引言

Internet是目前世界上最大的计算机网络，它遍布全球，将全世界各种网络连接成一个整体。我们的教学也有了长足的发展和改革。现代信息技术是网络教学的标志，教学活动对于人才培养则是网络教学的根本。网络教学的问题不仅仅是计算机技术的问题，其本质仍然是教学的问题，人才培养的问题，现代信息技术与传统教学相碰撞的人才培养问题。对于这些根本问题的把握，必须以科学为指导，实事求是的分析当前教学存在的缺陷，结合新时代信息技术对网络教学进行探索、借鉴、发展、创新。联系传统教学，结合学校实际情况把教学模式多样化，把教学资源、学生、老师练成一个互相的整体。 1.2 教学网站建设的背景

在网络发展得如此迅速的情况下，大都高校的教师都已经采用课件的形式教学，改变了传统的教学方式，例如用PowerPoint或其他的教学软件来丰富课堂，这样大大的提高了课堂教学的效率，也使课堂气氛得到了活跃，这样的教学方式既方便老师，也使学生以最大的学校效率去学习。尽管这些措施在课堂内带来了很大的方便与好处，但对课下却没什么帮助。课下的复习对于学习来说也是非常关键的，因而在网络发展得如此发达的形势下，对课下学习进行改革是势在必行。建立教学网站是教学信息化，网络化的最佳途径，也是当前教学辅助手段的大势所趋。

XXXX工程是XX工程与XX工程的交叉学科，是XX技术在XX工程中的应用，及应用XX技术主要是微XX技术来处理XX问题。使XX向着有利于人类和谐发展的方向转变。同时应用XX技术可以实现废物资源化，保护生态XX。

结合本专业实验实践要求高，联系社会程度高的教学特点，设计本教学网站。 1.2.1 教学网站发展的概况

近年来，国家大力推行高校教育改革，现代教育技术、现代教育手段的应用与推广已是变革中的重中之重。现代教育技术作为国家推行素质教育的重要手段，具体在计算机使用方面，已体现全面要求大学生必须通过等级考试，初步掌握计算机的使用，而网络又是现代教育技术应用的核心。在这样形势下，很多教学网站开始涌现，给传统教学带来了一次强力冲击，新的一轮教学改革已经展开。教学网站作为一个学习的平台，具有信息量大、交换便捷、易于互动等优点，它的应用多少与好坏直接展示了教育提升的水平和档次。但现如今的教学网站并没能充分利用这一点。

1

广东工业大学本科课程设计

教学网站一般有教师个人教学网站和单位的教学网站(例如专业教学网站)，教师个人教学网站大都是自己建设或找人建立起来的;单位的教学网站是单位组织人员建立起来的。无论是哪种方式建立起来的，一般都没有对如何利用网络或者说网站来达到教学互动交流这个问题。这样就造成了教学网站的发展良莠不齐的状况，且大部分教学网站的利用效果都不尽人意，甚至有些学生都不知道它们的存在。

教学网站的建设对于教育事业方面的需要还远远不能满足，我国的教育机构的庞大以及网络的发展是教学网站建设程度不能满足需要的主要原因。而且教学网站到如今，国内还没有一个好的评价体系。

很多教学网站都是的用文章发布系统加留言板建设而成，有的可能会加上个论坛来加深交流。文章发布系统一般作为课件发布用，供学生下载课件用，而留言板作为答疑工具来用，当学生有疑问时可以发帖向老师提问。论坛的作用和留言板差不多。这种网站在一定程度上满足了教学网站的要求，但这远远不够。

在交流手段上，老师会在教学网站上发布自己的电子邮件，以供学生向自己提问，以解决学生自己独立解决不了的问题。但这一切都必须建立在学生和老师的计算机水平的基础上，这样操作都需要他们对计算机操作很熟悉才行，这也是教学网站应用推广难的一个原因。 1.2.2 教学网站建设现状

教学网站以个人教学网站居多，且很多都只是以信息发布系统建立起来的课件发布系统而已，还远远不符合教学的要求。在很多高校都是教务处建立的，这些教学网站在功能上就有些偏了，不是很符合教学的要求。教学网站的建设现状整体来说还很差，无论是从规模还是质量上都还不能承担教学中的课下学习环节的补充。 1.2.3 教学网站发展中出现的问题及原因

出现的问题有很多，教学网站到现在为止发展不是很好。这主要表现在两个方面： (1) 教学内容在教学网站上的组织形式没能让它们发挥他们应有的作用。例如，在课件上不应该只是课件下载而已，而是一个知识库，根据知识点组织起来的知识库，这个知识库也不是简单数字化的数据库，而是已经把各个知识点关联起来的知识库。

(2) 教学网站在交互设计上陷入了瓶颈。在交互设计上，国内很多教学网站都只是停留在留言板答疑的水平上，并没有把 Web 2.0 的理念融进去。出现这些问

2

广东工业大学本科课程设计

题的原因：很多教学单位或个人并没有真正把教学网站重视起来，而是简单的把它当作一种可有可无的教学手段，这样的想法到了网站设计者那，当然也就不会设计出多好的教学网站来了。教师和老师的计算机操作水平也是一个制约因素，例如一个小学生可能他会网上聊天，但不一定会在网上看电子书。这些因素在教学网站的设计上，是不能忽略的。当然啦，这也是和当今的网络发展水平密切相关的，试想，给一个没有网络的山村小学建设教学网站，这就完全没有必要，建了也是浪费。还有一个原因是，中国在教育教学网站上缺乏一种评价策略。目前，我国相关的研究也只局限于介绍评价方法、评价实施过程以及如何量化调查结果等。至于具体的评价要素、评价指标体系可以说还是空白，而这些在国外已经开始建设这一评价体系。即使在美国等远程教育发展较完善的国家，通行的认证原则也是一些定性的指导思想，进行有效性评价指标体系的研究。为了促进教学网站不断改进质量，为公众提供满意的教育服务。

1.3 建设教学网站的意义

在校园网上构建教学网站为教师和学生们提供全新的教学工具，是改革教学模式、实现学科交叉，XX专业与信息技术的融合，培养学生学习兴趣的重要途径，实现跨越式辐射式教学。构建教学网站符合实际需要，时代需求，具有十分重大的意义。

1.3.1 改变传统教学模式

从教学模式来看，建设出好的教学网站能让教学充分体现“以学生为主，教师为辅”的现代教学模式，彻底改变了传统教学中“以课堂教学为中心，以书本为中心，以教师为中心”的“三中心”教学模式。 1.3.2 引导学生自主学习

从学生的学习来看，建设出好的教学网站将是学生课堂学习强有力的补充，利用网站，教师发布课程学习资料、布置作业、进行网上答疑，学生和老师之间、学生和学生之间可使用电子邮件、BBS、讨论讨论等进行在线或非在线信息交流，学生之间亦可以相互讨论。 1.3.3 促进师生交流

从学生和老师的交流来看，建设出好的教学网站将为学生和老师在情感交流方面架起情感的桥梁。利用现代的信息技术手段，建设好的教学网站，推进国家的教育事业，此任务是教育以及国家对于网络建设工作着来说是迫不及待的。

3

广东工业大学本科课程设计

1.4 建设教学网站的目的

基于上述的信息技术迅猛发展的时代背景，传统教学对人才培养的片面化以及教学网站对新时代教育改革的迫切需要。结合本工科专业紧密联系社会实际的需要建设本。教学网站。

1.5 建设教学网站的基本原则

教学网站建设的基本原则除了要遵循网站设计的一些基本原则外，我们网站设计者应该充分考虑教学网站的特点，应该遵循下列原则：

(1) 教学网站的整体规划在动手建设之前。对网页的整体规划至关重要。 (2) 以“以学习为中心”理论指导，规范教学网站的设计，时刻以学生为中心， 强调学生的“学”，要充分考虑学生对哪些知识的需要，从教学实际出发，建设符合教学需求的教学网站。

(3) 内容丰富、重点突出网站内容。强调网页的针对性和突出性。网页设计者设计时一定要牢记对象是学生，办出学生好奇，追求，理解，接受的特点来。有且只有这样才会让更多的学生关注这个教学网站。

(4) 及时反馈。设计评价反馈系统，便于教师与学生之间了解自己掌握知识的情况，有利于改进网页和各方的设计学习。

(5) 及时更新维护，去粗取精。网站的成功与否，取决于网站的质量。网站使用与运行一段时间后，一些过时的信息就要及时的删除，保持整个网站的先进性。

1.6 课题研究内容

本设计是利用adobe dreamweaver cs5.5软件对XXXX工程的网站进行设计，布局方式主要是表格布局和div+css布局。利用adobe fireword cs5.5和adobe flash cs5.5、adobe photoshop cs5.5这三款软件对网站的图片动画进行美化。使用activex控件、php脚本语言制作网页特殊效果。本文主要阐述网站的设计理念、设计方法和规划方案，对建设XXXX工程教学网站的具体步骤进行描述和分析。

4

广东工业大学本科课程设计

2 网站规划

2.1 网站的定位分析

2.1.1 网站类型定位

静态网页有时也被称为平面页。静态网页的网址形式通常为htm(超文本标记语言)结尾，还有就是以超文本标记语言(.htm、.html)、.shtml、.xml(可扩展标记语言)等为后缀的。在超文本标记语言格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画flash、滚动字幕等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。静态网页面通常是超文本标记语言文档存储为文件在文件系统里头，并且可以通过HTTP访问网络服务器。

静态网页对用户有多重要呢?普通用户通过多浏览器发送制定的URL请求，Web服务器收到请求后定位到指定的文件，或者根据程序从数据库中调出相应的数据返回到浏览器，经过浏览器请求处理后，用户就可以看到一个完整的文件。整个过程中，动态页面的话还需要多一个步骤，就是发送命令从数据库中调出文件，如果用户一多的时候，就会造成数据库运行过慢，这样就严重影响了用户体验;用户体验被影响了，也就影响了搜索引擎优化中的一个最重要步骤，要记得网站优化用户体验最重要。

静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”;(动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索引擎不去抓取网址中“?”后面的内容。);

网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件;

静态网页的内容相对稳定，因此容易被搜索引擎检索;

静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;

静态网页的交互性较差，在功能方面有较大的限制;

页面浏览速度迅速，过程无需连接数据库，开启页面速度快于动态页面; 减轻了服务器的负担，工作量减少，也就降低了数据库的成本; 可以公开(即副本可以证明给任何人);

5

广东工业大学本科课程设计

托管没得任何特殊的要求。(不需要特殊的中间软件比如超文本预处理器、公共网关接口);

没得网络服务器或应用服务器，比如直接从CD-ROM(激光唱片-只读存储器)或USB闪存驱动器读取内容，可以通过网络浏览器直接访问;

网站更安全，HTML页面不会受Asp相关漏洞的影响;而且可以减少攻击，防sol注入。数据库出错时，不影响网站正常访问。

由于XXXX工程的教学网站的功能相对较少、内容更新量不大，网站访问速度要求较快，没有涉及较多的商业机密，根据静态网页的特点，采用静态网页。其优势是不需要数据库的支持。 2.1.2 网站主题的定位

XXXX工程教学网站的开发是基于学生和教学的需要，所以建设网站的主题必须适合这一需求。基于服务对象是教师和学生，所以在商业上，市场竞争上，资源竞争上没有过多的要求，或者说没有考虑。本教学网站主要以提高教学效率与教学质量为目的，以开设教学资源库，创建网络协作学习XX为手段，以学习者为中心的一种课程学习网站。 2.1.3 网站的功能定位

教学网站主要是实现把丰富的课程资源通过网络信息平台共享到互联网上，向所有用户提供视频观看、课程介绍，教材简介等功能，同时也提供网络互动交流和上传课件、视频，提交作业的功能。

网站导航：网站提供了导航功能，在网站的首页设计一个导航，把站内各种资源分门别类。这样可以为用户大大的节省精力和时间。

课程信息：对用户提供课程介绍，上课时间，课件资料等。

信息交流：本网站系统会给用户提供一个良好的在线交流的平台，便于用户进行互动交流，向用户提供留言板与回复的功能。

资源共享：主要实现上传下载功能，用户能在资源共享界面上传教学相关视频、题库、课件，提交作业等功能，并在网上显示，为多人共享。 2.2 教学网站的规划

教学网站的内容设计与组织是网站规划中重要的一部分，是网站浏览者最看重的因素。

6

广东工业大学本科课程设计

2.2.1 网站内容的设计规划

本站的功能模块包括专业前景、教师简介、课程体系、实践环节、校友风采、资料下载、专业动态、特色教学、课程体系、实践环节以及具体的各老师的教学网站、各课程的学习网站、相关网站链接等。 2.2.2 软件选择

从本站的需求与特点考虑，采用静态网页的方式制作。网站制作采用主流的网站制作软件adobe dreamweaver cs5.5。 2.2.3 网站风格的确定

由于XXXX工程是环保类的学科，主题与绿色比较符合。本站采用绿色的色调作为网页的基色。网页风格较为朴素、简洁，突出环保的风格。在清新的背景下使学生更加愉快的浏览网页。 2.2.4 素材的收集

本站图片素材是大多是自己制作的，通过photoshop和firework等制作的。主要的其他素材有相关老师的教学积累提供。 2.3 网站总体设计

网站经过初步的整体规划,从细节入手,对网站进行总体设计。 2.3.1 首页设计

首页设计是一个网站成功与否的关键。本站的首页根据网站的风格采取简单的排版，模块分布比较有规律，网站的思路较为清晰。网站的首页的设计图如图2.1所示。

XX教学网站

专业前景 教师简介 课程体系 实践环节 校友风采 资料下载 联系我们

图 2.1 首页网站栏目规划

2.3.2 课程设计首页设计

课程设计首页与教学网站首页相呼应。具体如下图2.2所示。

XX工厂课程设计

课程介绍 设计任务 教学组织 考核方式 学习资源

图 2.2 课程设计首页栏目规划

7

广东工业大学本科课程设计

2.3.3 网页版式的设计

版式的布局在网页制作中也是比较重要的一项。既要符合浏览者的一般兴趣，也要有自己的特色，符合浏览器的兼容需求。本站采用混合排版，采取传统的上中下布局，左右列液固定的方法。基本布局如下图2.3所示。

网站logo

导航菜单 关于我们

快速链接

教师简介

快速链接

快速链接 课程体系

版权信息

实践环节

图2.3 网站模板布局

2.3.4 网页色彩搭配

对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。

一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。 2.3.5 网页文字的搭配

字号大小可以用不同的方式来计算，例如磅#quotel.quoter#或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅，所以，建议采用磅为单位。

最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。

网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感

8

广东工业大学本科课程设计

性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容;细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感;字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。

行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距 12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。

除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。

行距可以用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。例如：{line-height：20pt｝、{line-height：150%｝。

文字的整体编排。页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。

9

广东工业大学本科课程设计

3 建设网站的工具

3.1 网页布局软件adobe dreamweaver cs5.5 Dreamweaver可以用最快速的方式将Fireworks或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。所见即所得的操作非常实用。 3.2 图片美化软件adobe photoshop cs5.5 从功能上看，该软件可分为图像编辑、图像合成、校色调色及特效制作部分等。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。最重要的是该软件可以进行网页布局。

还有其他工具如flash等用于制作导航条等。

10

广东工业大学本科课程设计

4 网站建设的技术

4.1 Div+css布局方法

DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一，div+css是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。XHTML基于可扩展标记语言(XML)，是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

这种方法由以下优点：大多数浏览器兼容;浏览器翻译速度快;排版简单方便;更加便于维护。

4.2 PHP语言使用技术

PHP，一个嵌套的缩写名称，是英文超级文本预处理语言(PHP:Hypertext Preprocessor)的缩写。PHP 是一种 HTML 内嵌式的语言，PHP与微软的ASP颇有几分相似，都是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，现在被很多的网站编程人员广泛的运用。PHP 独特的语法混合了C、Java、Perl 以及 PHP 自创新的语法。有以下特点：

(1) 开放的源代码：所有的PHP源代码事实上都可以得到。 (2) PHP是免费的，和其它技术相比，PHP本身免费。

(3) php的快捷性：程序开发快，运行快，技术本身学习快。嵌入于HTML：因为PHP可以被嵌入于HTML语言，它相对于其他语言，编辑简单，实用性强，更适合初学者。

(4) 跨平台性强：由于PHP是运行在服务器端的脚本,可以运行在UNIX、LINUX、WINDOWS下。

(5) 效率高：PHP消耗相当少的系统资源。 (6) 图像处理：用PHP动态创建图像。

(7) 面向对象：在php

4、php5 中，面向对象方面都有了很大的改进，现在php完全可以用来开发大型商业程序。

11

广东工业大学本科课程设计

4.3 链接及其他技术

网页上的超链接一般分为三种：一种是绝对URL的超链接。URL(Uniform. Resource Locator)就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。

第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去。

第三种称为同一网页的超链接，这就要使用到书签的超链接,一般用#号加上名称链接到同一页面的指定地方。在网页中，一般文字上的超链接都是蓝色(当然，用户也可以自己设置成其他颜色)，文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变。只有图像的超链接访问后颜色不会发生变化。

其他技术包括文本的格式对齐，导航条的制作，插入多媒体，插入图片等技术由于涉及较细不一一介绍。

12

广东工业大学本科课程设计

5 网站的实现

5.1 网站实现过程概述

教学网站建设是一个系统建设的过程，需要统筹兼顾，整体把握，注重细节、认真考虑、阶段实现的过程。

首先选择成熟的dreamweaver网页制作平台。利用photoshop制作背景图像以及相关的布局图像。利用flash动画制作软件制作导航条。用切片的方法实现css+div的布局。把所有布局对象和素材整合到dreamweaver，利用dreamweaver软件的相关工具进行美化。结合dreamweaver软件里的代码视图对格式及一些特定的效果进行编程。最后利用多种版本的浏览器进行测试，IIS进行网页调试，直到网页效果达到自己的预期。 5.2 页面设置

5.2.1 教师个人网站

首页背景使用灰白色，其他颜色均为亮蓝色，突出颜色的对比度。网站风格简单朴素。采用左中右三栏的布局方式，网站的各项一目了然。具体如下图5.1所示。

图 5.1 教师个人网站

13

广东工业大学本科课程设计

5.2.2 绿旋风团队网站

绿旋风团队，注重现代工业与人文精神的融合，倡导绿色设计、推动清洁生产，加强学生的工程实践能力。以“运动、守时、细节、专攻”作为团队精神，推动本科素质教育与校园文化建设，探索广东工业大学专业建设特色。

继承采用左中右的布局方法，各项栏目内容一目了然，具体布局如下图5.2所示。

图 5.2 绿旋风团队网站

5.2.3 绿色设计学习网站

本网页为读者提供一个生态工业园区20万吨啤酒XX工厂及工业园区设计的案例。网页布局采用上下结构，提供各项设计的相关链接。具体如下图5.3所示。

14

广东工业大学本科课程设计

图5.3 绿色设计学习网站

15

广东工业大学本科课程设计

5.2.4 XX工厂课程设计网站

使学习者综合运用工程制图、AutoCAD、微XX学、XX化学、物理化学和化工原理、XX工程设备及工厂设计等知识进行工厂的初步设计，进一步掌握常用XX反应器和设备的结构、性能、适用范围及选型计算。网页采用一贯的左右布局，添加了丰富的动画。简约的页面清新自然。具体如下图5.4所示。

图4 XX工厂课程设计网站

16

广东工业大学本科课程设计

小结

本次课程设计我承担了制作网页的角色，与大多数同学的设计是不一样的，这增加了挑战性。网页的设计和制作是本专业学习的一个延伸和课外知识的拓展。在整个设计的过程中遇到的问题是技术上的问题，毕竟不是制作网页的专业学生，故水平有限。尽管如此，在全部设计中，我还是坚持着，本着学习的态度，遇到问题通过去图书馆查阅相关书籍，通过网络论坛的技术讲解，通过请教相关专业学生等等手段来完成该网页设计。在此过程中，XXX老师给与了我充足的时间和充分的理解，让我得以更加淡定的完成本设计。

17