《电子商务静态网站设计》实训指导书.doc
《《电子商务静态网站设计》实训指导书.doc》由会员分享，可在线阅读，更多相关《《电子商务静态网站设计》实训指导书.doc（32页珍藏版）》请在冰点文库上搜索。
《电子商务静态网站设计》实训指导书
《电子商务静态网站设计》
实训指导书
目录
实训一网站选题………………………………………………………7
实训二搜集素材……………………………………………………10
实训三站点创建和页面布局………………………………………12
实训四网站CI制作…………………………………………………15
实训五首页的制作…………………………………………………17
实训六一级页面的制作……………………………………………18
实训七二级页面的制作……………………………………………20
实训八网站调整与修改……………………………………………22
实训九网站调试与上传……………………………………………24
附录一网站计划书的书写格式……………………………………25
附录二CuteFTP使用说明…………………………………………27
《电子商务静态网站设计》实训指导书
一、实训目的
《静态网站设计》是电子商务专业实践性很强的课程，学生必须通过不断上机实习以及使用它来解决实际的问题，才能更好地掌握。
因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、完整的电子商务网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。
二、实训内容
综合运用已学的知识，使用Dreamweaver、Fireworks、Flash等网页制作软件，制作一个满足如下要求的网站：
1、内容思想积极向上，无科学性错误；
2、紧密结合开放教育教与学的实践，突出电子商务站点主题，内容翔实，层次结构清楚，操作提示准确；
3、构思新颖，风格鲜明，表现独特，具有一定的艺术性和趣味性；
4、界面清楚、整洁、使用色彩、图案、文字、声音、视频、控件等搭配协调，前后统一；
5、界面设计以800*600分辨率为显示标准；
6、若引用了文献，包括文字、图片、动画、声音、视频以及模板等，必须注名出处。
三、材料准备
1.软件准备
DreamweaverMX2004中文版、Fireworks2004中文版、FlashMX2004中文版。
2.硬件准备
网络条件：
与因特网连接的局域网。
教师用机：
Windows2000Server版。
学生用机：
Windows2000Professional版。
四、要求
1、老师认真组织，充分调动学生的积极性与主动性，在规定的时间内按计划有步骤地完成课程设计的各项内容，达到预定的教学目的。
2、学生进入实训室后，根据学号对号入座，不能随意移动机位。
3、实验室需要提供方便，全力配合。
4、学生必须认真学习教科书，查阅参考资料，在教师的指导下按要求完成实训任务；学生每天按上课时间进行实习，不迟到、不早退、不准中途溜出，学习委员负责考勤登记，并及时将考勤情况报指导老师；学生在实训过程中应勤于思考，刻苦钻研，把理论与实践结合起来，提高对理论知识的理解，增强动手能力。
5、学生每天按要求完成老师布置的实训计划，并在每天实训结束前将实训结果上交教师机，由老师进行评分。
6、学生根据每天的实训计划和实训目的，最后写出实训报告上交，实训报告作为成绩评定的依据之一。
7、实训单列成绩，成绩根据有关的评分标准进行评定，其中学生迟到一次扣2分，早退一次扣2分，旷课一节扣5分，违反纪律（如玩游戏等）扣2分，如学生出勤率达不到实训总课时的三分之二，该学生的实训成绩计0分。
五、实训地点
电子商务实训室
六、评分标准
类别
项目
内容
权重
纪律分
出勤10%
考核
10
纪律10%
考核
10
实验15%
考核
15
网站评分
思想性10%
电子商务主题鲜明，内容积极、健康向上
5
内容的组织能准确、完整地表达主题思想
3
内容切合学习实际，文字通顺
2
创造性
20%
素材获取及加工属原创
5
主题表达形式新颖，构思独特、巧妙
5
具有想象力和个性表现力
5
内容、结构设计有创意
5
艺术性
15%
反映出作者有一定的审美能力
5
完美运用各种形式表现主题，有感染力
5
界面美观、布局设计独到，富有新意
5
技术性
20%
选用制作工具和制作技巧恰当
5
技术运用准确、适当、简捷
5
交互方便，结构清晰，导航和链接准确
10
七、制作进度安排：
时间
实训项目
内容
星期一
1、2
准备工作
实训动员
3、4
实训一
网站选题
5、6
实训二
搜集素材
星期二
1、2
实训二
搜集素材
3、4
实训三
站点创建
星期三
1、2
实训三
页面布局
3、4
实训三
页面布局
5、6
实训四
制作站点标志
星期四
1、2
实训四
制作网站广告
3、4
实训四
制作导航条
5、6
实训五
首页模板的制作
星期五
1、2
实训五
首页的完善
3、4
实训五
首页的完善
5、6
实训六
一级页面模板的制作
星期一
1、2
实训六
第一个一级页面的完善
3、4
实训六
第二、三个一级页面的完善
5、6
实训六
第四、五个一级页面的完善
星期二
1、2
实训七
二级页面模板的制作
3、4
实训七
二级页面的完善
星期三
1、2
实训七
二级页面的完善
3、4
实训八
整个网站超链接的制作与检查网站
5、6
整体调整与修改
星期四
1、2
实训八
局部调整与修改
3、4
实训九
最后检查与调试
5、6
网站功能调试
星期五
1、2
实训九
作品上交（上传）
3、4
评比
作品评比
5、6
总结
实训总结
32
实训一网站选题
实训目的:
（1）明确网站的主题、整体风格，目标浏览人群；
（2）绘制网站结构示意图、确定网站的各级页面及内容；
（3）绘制各个页面的布局示意图，对页面进行初步规划。
实训步骤:
请大家认真看完下列内容后，撰写《网站规划书》。
²网站选题
从下面1-5中任选一个，作为本次实训的网站主题。
1、电子商务企业网站
2、网上商城站点
3、校园网站
4、某一公司网站
5、其它（需要说明主题）
²网站名称
根据网站的选题，为网站命名。
²网站结构
写出网站各个一级页面名称、二级页面名称。
如做企业网站时，包含如下页面：
首页、一级页面（企业简介、产品展示、关于我们、网上订单、留言本）、二级页面（产品介绍、新闻内容）。
²网站内容
写出各页面的基本内容，如企业网站中，产品展示：
主要介绍本公司的产品类别以及链接至每类产品的介绍。
²标准色彩
设计网站的标准色彩。
网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。
不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。
“标准色彩”是指能体现网站型象和延伸内涵的色彩。
举个实际的例子就明白了：
IBM的深蓝色，肯得基的红色条型，Windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。
如果将IBM改用绿色或金黄色，我们会有什么感觉？
一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。
标准色彩要用于网站的标志，标题，主菜单和主色块。
给人以整体统一的感觉。
至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。
一般来说，适合于网页标准色的颜色有：
蓝色，黄/橙色，黑/灰/白色三大系列色。
²标准字体
设计网站的标准字体。
和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。
一般我们网页默认的字体是宋体。
为了体现站点的“与众不同”和特有风格，我门可以根据需要选择一些特别字体。
例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。
当然你也可以根据自己网站所表达的内涵，选择更贴切的字体。
目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用英文艺术字体下载，要寻找一款满意的字体并不算困难需要说明的是：
使用非默认字体只能用图片的形式。
²宣传标语
设计网站的宣传标语。
也可以说是网站的精神，网站的目标。
用一句话甚至一个词来高度概括。
类似实际生活中的广告金句。
例如：
鹊巢的“味道好极了”；麦斯威尔的“好东西和好朋友一起分享”；Intel的“给你一个奔腾的心”。
以上这些是一个网站树立形象的关键，确切的说是网站的表面文章，设计并完成这几步，你的网站将脱胎换骨，整体形象有一个提高。
形象地说：
你从一个土气的农民转变为一位西装革履的白领人士。
实训方法:
上机
实训课时:
2
考核办法:
根据学生撰写《网站规划书》给分，将作为最终网页评审的依据。
思考和练习:
作为电子商务专业，你觉得在撰写电子商务站点规划书应该着重突出哪几个方面，为什么？
实训二搜集素材
实训目的:
下载与主题相关的素材，便于后期网页制作。
实训重点:
（1）各种类型素材的下载的方法；
（2）上网搜索素材的方法。
实训准备:
机房需要上网
实训步骤:
在D盘新建文件夹，并以自己的姓名命名。
在此文件夹中再建立多个子文件夹，分别命名为text，image，swf，page，font等，将收集的素材分门别类放在这个文件夹中。
一、搜集素材
1、素材的形式：
文字、图形、图像、动画、声音（音乐）、视频、网页、模板、字体等
2、搜索资料的途径：
书报杂刊、网上下载、数字资料（光碟和数码相机等）、自己创作、调查采访等。
我们这里主要采用网上下载的方法。
3、网上下载资料的方法：
（1）文字：
采用复制到文本文件中的方法；或将整个网页保存
（2）图形、图像：
在图片上右击，选择“图片另存为……”进行保存
（3）动画：
打开源文件，按CTRL+F，查找“.swf”然后选择动画保存的文件夹，单击确定进行下载
（4）声音（音乐）：
点击超链接下载
（5）网页：
“文件”—“另存为”
（6）模板：
点击超链接下载
（7）字体：
点击超链接下载
二、素材下载的要求：
网上的素材很多，我们要有选择的进入下载。
大家选择对网站建设有用的素材。
（1）文字：
在网络上搜索所有与主题有关的网页，把有意义的、与网站主题相关的网页内容，要求保存与一级网页相关的文字二至三篇。
（2）声音：
下载一至二首与网站主题相关的音乐
（3）图像：
搜索与主题有关的站点标志、广告条、图片、导航条等，并将合适的图像、图片进行保存。
（4）模板：
下载与主题有关的模板二至三个。
（5）字体：
下载网站中将会用到的字体。
实训方法:
上机
实训课时:
4
考核办法:
根据学生下载的素材给分。
思考与练习：
此部分是学生在因特网上进行资源的搜集和创建，故无练习。
实训三站点创建和页面布局
实训目的:
根据下载的素材以及学生对网站的理解与构思，以及网站的框架结构，对站点和页面进行创建与规划。
实训重点:
（1）网站站点的创建；
（2）页面结构的布局，以及页面元素的尺寸，颜色，位置等的规划。
实训步骤:
根据已收集的素材和网站的整体框架结构，进行网站结构与页面的布局。
一、站点创建
（1）在D盘新建文件夹，命名为MYSITE，在此文件夹中新建子文件夹，存放网站制作过程中使用到的素材。
（2）在DW中定义站点，站点名为：
MYSITE，站点根目录为：
D：
\MYSITE。
（3）在站点管理目录中，新建网站中将要设计的页面，如首页index.htm，一级页面（aboutme.htm……），二级页面等。
二、页面布局
打开新建的网页，进行如下布局设计：
（1）制定LOGO、BANNER、导航条等网页元素的尺寸
（2）根据网站的各页面的布局图，确定网页的结构，并在DW中进行布局设计。
常用的页面结构布局有：
²“T”结构布局（"厂"字型）。
所谓"T"结构。
就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”，所以我们称之为“T”形布局。
这是网页设计中用的最广泛的一种布局方式。
优点：
页面结构清晰，主次分明。
是最容易上手的布局方法。
缺点：
规矩呆板，如果细节色彩上不注意，很容易让人乏味。
²“口”型布局。
这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。
优点：
充分利用版面，信息量大。
缺点：
页面拥挤，不够灵活。
也有将四边空出，只用中间的窗口型设计。
²“三”型布局。
这种布局多用于国外站点，国内用的不多。
特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。
²对称对比布局。
顾名思义，采取左右或者上下对称的布局，一半
深色，一半浅色，一般用于设计型站点。
优点：
视觉冲击力强，
缺点：
将两部分有机的结合比较困难。
²POP布局。
POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。
常用于时尚类站点优点：
显而易见：
漂亮吸引人。
缺点：
就是速度慢。
作为版面布局还是值得借鉴的。
²其他布局。
更多的网站并没有一定的规律，他们只是在排版布局中加入自己的各种想法。
因此，网站的布局也各有特色。
在作这种网站时，哪里该放什么，哪里不该放什么，必须做到胸有成竹。
否则就会乱掉，或者整个网站风格不统一。
实训方法:
上机
实训课时:
6
考核办法:
根据学生制作站点、布局页面给分。
思考和练习:
布局视图和表格视图在版面布局中各有优势和劣势？
对怎样的版面布局应该用布局视图，又对怎样的版面布局应该用表格视图。
实训四网站CI制作
实训目的:
根据下载的素材以及学生对网站的理解与构思，确定网站的标志，使网站个性化。
实训重点:
（1）标志、广告条、导航条的设计方法；
（2）素材的运用；
（3）FIREWORKS对素材的处理（选做）。
实训步骤:
一、制作网站标志
根据已收集的素材以及实训三页面策划的LOGO尺寸及样式，用FIREWORKS软件（选做），制作站点标志。
LOGO是你站点特色和内涵的集中体现，看见LOGO就让大家联想起你的站点。
标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。
标志的设计创意来自你网站的名称和内容。
大家可以采用如下方法来实现：
（1）.网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化。
（2）.网站有专业性的，可以以本专业有代表的物品作为标志。
（3）.最常用和最简单的方式是用自己网站的英文名称作标志。
采用不同的字体，字母的变形，字母的组合可以很容易制作好自己的标志。
二、制作网站广告条
根据已收集的素材以及实训三中页面规划的广告条尺寸及样式，用FIREWORKS软件（选做），制作站点标志。
三、制作网站导航条
根据已收集的素材以及实训三中页面规划的导航条的尺寸及样式，用FIREWORKS软件（选做），制作站点导航条。
（也可以直接利用下载的素材）
实训方法:
上机
实训课时:
6
考核办法:
根据学生制作的标志、广告条、导航条给分。
思考与练习:
此部分是学生在本机上进行页面素材的创建，故无练习。
实训五首页的制作
实训目的:
综合前几次实训做出的作品，进行首页的制作。
实训重点:
（1）FIREWORKS对素材的处理（选做）；
（2）DW页面对象的操作。
实训步骤:
在前面的实训中，我们已经确定了网页的结构、网站的标志、广告条、导航条，以及页面元素的大小与位置，那么接下来便是制作主页。
一、图片处理
1、在FIREWORKS中打开主页中将要引用的图片（选做）
2、对图片进行大小的调整、颜色的更改、内容的修改等
3、处理完的图片保存在D：
\MYSITE\IMAGES中，并用一个容易查询的名字命名。
注意不要用中文
4、重复1-3步，将其他的图片也进行适当的处理。
二、主页的设计
1、在DW中打开站点中的index.htm页面。
2、通过表格、层或框架，将主页中的需要插入的对象（如标志、广告条、导航条、声音、行为、图片、动画等）进行操作。
注意主页中插入的图片位置应该在D：
\MYSITE\IMAGES。
3、将页面保存。
同时保存一份为模板。
实训方法:
上机
实训课时:
6
考核办法:
根据学生制作的主页，按照评分规则给分。
思考与练习:
无
实训六一级页面的制作
实训目的:
根据网站的规划，完成一级页面的设计与制作。
实训重点:
（1）模板的制作；
（2）模板的重复调用。
实训步骤:
一、图片处理
1、在FIREWORKS中打开二级页面中将要引用的图片（选做）；
2、对图片进行大小的调整、颜色的更改、内容的修改等；
3、处理完的图片保存在D：
\MYSITE\IMAGES中，并用一个容易查询的名字命名。
（注意不要用中文）
4、重复1-3步，将其他的图片也进行适当的处理。
二、页面布局
1、在DW中新建模板页面（参考教材p148-7.1），命名为1，保存在MYSITE站点中
2、通过表格、层或框架，将主页中的需要插入的对象（如标志、广告条、导航条、声音、行为、图片、动画等）进行布局。
注意主页中插入的图片位置应该在D：
\MYSITE\IMAGES。
3、制作完后，设置可编辑区域，并定义可编辑区域。
4、保存页面。
5、打开D：
\MYSITE\FILES中的某一个页面，打开库面板，在页面中调入模板。
6、对模板的可编辑区域，根据该页的主题，进行内容调整。
7、重复5-6步，至到所有的一级页面都制作完成为止。
如果同学们是使用现有的模板，那么直接将模板中的页面及图片分别复制到D：
\MYSITE的相应位置，然后再将页面另存为模板，命名为1后，进行3-7步的操作。
实训方法:
上机
实训课时：
8
考核办法:
根据学生制作的一级页面，按照评分规则给分。
实训七二级页面的制作
实训目的:
根据网站规划，完成二级页面的设计与制作。
实训步骤:
一、图片处理
1、在FIREWORKS中打开二级页面中将要引用的图片（选做）；
2、对图片进行大小的调整、颜色的更改、内容的修改等；
3、处理完的图片保存在D：
\MYSITE\IMAGES中，并用一个容易查询的名字命名。
注意不要用中文；
4、重复1-3步，将其他的图片也进行适当的处理。
二、页面布局
1、在DW中新建模板页面（参考教材p148-7.1），命名为2，保存在MYSITE站点中
2、通过表格、层或框架，将主页中的需要插入的对象（如标志、广告条、导航条、声音、行为、图片、动画等）进行布局。
注意主页中插入的图片位置应该在D：
\MYSITE\IMAGES。
3、制作完后，设置可编辑区域，并定义可编辑区域。
4、保存页面。
5、新建页面，保存在D：
\MYSITE\FILES\FILES中，打开库面板，在页面中调入模板。
6、对模板的可编辑区域，根据该页的主题，进行内容调整。
7、重复5-6步，至到所有的二级页面都制作完成为止。
如果同学们是使用现有的模板，那么直接将模板中的页面及图片分别复制到D：
\MYSITE的相应位置，然后再将页面另存为模板，命名为2后，进行3-7步的操作。
实训方法:
上机
实训课时：
6
考核办法:
根据学生制作的二级页面，按照评分准则给分。
实训八网站调整与修改
实训目的:
检查网站内容与超链接，减少网站中的错误。
实训重点:
（1）超链接的检查；
（2）模板的修改。
实训准备:
实训步骤:
网站的基本内容已经完成，接下来的工作，便是对网站的检查与修改。
网站检查是一个重复的过程，通过整体与局部不断的修改，达到最佳的效果。
一、超链接的检查
1、打开DW选择“检查超链接”，然后查看超链接是否有空链接或错误链接；
2、在IE浏览器中打开首页，点击超链接，查看是否有误；
3、通过每个一级页面，打开二级页面，查看是否有误。
二、网站整体调整与修改
1、在IE浏览器中打开首页，从整体的角度，即从页面的布局、颜色的搭配、字体的选择等因素着手，认真查阅首页，检查是否有需要修改的内容，对页面进行整体的修改。
2、在IE浏览器中打开一级页面，从整体的角度，即从页面的布局、颜色的搭配、字体的选择等因素着手，认真查阅这些一级页面，检查是否有需要修改的内容，对页面进行整体修改。
3、在IE浏览器中打开二级页面，从整体的角度，即从页面的布局、颜色的搭配、字体的选择等因素着手，认真查阅这些二级页面，检查是否有需要修改的内容，对页面进行整体修改。
三、网站局部调整与修改
1、在IE浏览器中打开首页，认真查阅首页中的细节内容，检查是否有需要修改的内容，对页面进行整体的修改。
2、在IE浏览器中打开一级页面，认真查阅这些一级页面中的细节内容，检查是否有需要修改的内容，对页面进行整体修改。
3、在IE浏览器中打开二级页面，认真查阅这些二级页面中的细节内容，检查是否有需要修改的内容，对页面进行整体修改。
实训方法:
上机
实训课时:
8
考核办法:
根据学生制作的二级页面，按照评分规则给分。
思考与练习:
完成整个站点后，对自己的站点的建设进行总结。
实训九网站调试与上传
实训目的:
将网站进行调试后发布，使网站能在INTERNET网上浏览。
实训重点:
网站上传
实训步骤:
一、整体调试与修改；
二、上传。
1、免费空间的申请
通过INTERNET网，搜索提供免费主页空间申请的服务器，申请免费空间。
2、上传软件的安装
将教师机文件夹中的CUTEFTP安装至D盘
3、上传
打开CUTEFTP，上传文件和文件夹。
具体操作如下：
1）打开软件；
2）创建FTP站点，Host（主机）中输入申请的空间地址，在用户名和密码中分别输入申请空间时用到的用户名和密码；
3）点击链接；
4）待链接成功后，将“本地站点”中的文件和文件夹拖至“服务器目录中”。
实训方法:
上机
实训课时:
4
考核办法:
根据评分准则，给网站评分。
附录一网站计划书的书写格式
一、建设网站前的市场分析
1、相关行业的市场是怎样的,市场有什么样的特点，是否能够在互联网上开展公司业务。
2、市场主要竞争者分析，竞争对手上网情况及其网站规划、功能作用。
3、公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力（费用、技术、人力等）。
二、网站内容规划
1、根据网站的目的和功能规划网站内容，一般企业网站应包括：
公司简介、产品介绍、服务内容、价格信息、联系方式、网上定单等基本内容。
2、电子商务类网站要提供会员注册、详细的商品服务信息、信息搜索查询、定单确认、付款、个人信息保密措施、相关帮助等。
3、如果网站栏目比较多，则考虑采用网站编程专人负责相关内容。
注意：
网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信息不会吸引匆匆浏览的访客。
可事先对人们希望阅读的信息进行调查，并在网站发布后调查人们对网站内容的满意度，以及时调整网站内容。
三、网页设计
1、网页设计美术设计要求，网页美术设计一般要与企业整体形象一致，要符合CI规范。
要注意网页色彩、图片的应用及版
升级会员 