电子商务网页设计与制作实训报告
班级：电商1302班
姓名: 张 涛
学号：0804130239
20xx年1月7日
目录
一、网站基础识.............................3
1.网站与网页的关系.................................3
2.网站、域名、空间的关系...........................3
3.网站的制作方式...................................3
二、所做网页内容...........................4
1.女娲网站.........................................4
2.休闲食品项目网站食品页面.........................4
三、所做网页详解............................4
1.女娲网站所做工作...................................4
2.休闲食品项目网站所做工作...........................5
四、实训网站制作思路.........................5
1.女娲网站思路........................................5
2.休闲食品项目网站思路................................5
五、实训网站详细制作过程.....................5
六、实训总结.................................7
七、.对课程及实训环节的建议..................8
一、网站基础知识
1.网站与网页的关系
网站是一个整体，网页是一个个体，一个网站是由很多网页构建而成。网站和网页的关系就像家庭和家人一样。
网页与网站的区别简单的来说：网站是由网页集合而成的，而大家通过浏览器所看到的画面就是网页，网页说具体了是一个html文件，浏览器是是用来解读这份文件的。也可以这样说：网页是有许多html文件集合而成。至于要多少网页集合在一起才能称作网站，这可就没有规定了，即使只有一个网页也能被称为网站。
而我们想要制作一个网站，就需要单独编辑若干个html文件，然后通过“超链接”把它们连接在一起，这样一个属于自己的网站就制作出来了。总体来说就是网站有网页组成。
2.网站、域名、空间的关系
域名（Domain Name），是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位
网站空间英文名：Webhost。简单地讲，就是存放网站内容的空间，网站空间也称为虚拟主机空间，通常企业做网站都不会自己架服务器，而是选择以虚拟主机空间做为放置网站内容的网站空间。网站空间只能存放网站文件和资料，包括文字、文档、数据库、网站的页面、图片等文件的容量。
所以它们三个的关系是：网站先储存在网络空间中，访问者需要通过IP地址也就是域名来登录这个空间找到网站存放的地址。那么网站就能打开并能够向浏览者展示自己的能容了。
3.网站的制作方式
网站制作通俗的来说就是网站通过页面结构定位，合理布局，图片文字处理，程序设计，数据库设计等一系列工作的总和，也是将网站设计师的图片用HTML方式展示出来，属于前台工程师的一项任务，前台工程师任务包括： 网站设计、网站用户体验、网站JAVA效果、网站制作等工作。网站制作是易雅达网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册查询和主机托管等服务的总称。
一、申请域名[CN域名须审核];
二、申请空间[通过接入商进行ICP备案];
三、定位网站
四、分析网站功能和需求(网站策划)
五、网站风格设计 ;
六、网站代码制作;
七、测试网站;
九、网站维护。 网站制作 需要网站虚拟空间、域名以及动态网站的数据库这三个最基本的条件。网站虚拟空间是用来存放网站文件，如：图片信息，html文件，php文件等，相当于一个硬盘空间，域名即指访问网站的地址。动态网站的数据库用来存放网站数据的空间，这里的网站数据并非网站的html文件、图像信息等，指的是如网站访客提交的留言，个人信息等，传统的静态网站无需数据库支持。随着浏览器和W3C标准一致性的改善，以及无表格网页设计的认同性增加，超文件标示语言与层叠样式表共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。
二、所做网页内容
1.女娲网站
女娲首页以深色调为主，显示Lady King(女娲)品牌女式服装的高贵、魅力。
女娲网站主要包括三个网页，一个首页，两个子页。首页内容包括导航栏，女娲动态，新闻资讯，产品图片，等。新品上市子页主以产品图片为主。来客留言主要有呢称，E-mail，联系方式，备注等。
2.休闲食品项目网站食品页面
休闲食品网页以以绿色主色调，辅助色为白色，黑色。总体呈现热情、鲜明、简洁的特征。网站的标准字体: 以宋体为主，楷体为辅。网站的宣传标语: 休闲生活，自然美味。主要包括一个首页，7个子页。
三、所做网页详解
1.女娲网站所做工作
在photoshop中制作首页，做宽1003px 高：85px的导航栏背景，用渐变填充，用图形工具做出LOGO，做中间的背景图，从资料中选取素材，添加新闻动态的几行文字，右边导入资料中的图片进行修正并输入文字。滚动栏部分从资料中选择4个图片进行裁剪放到合适位置，底栏部分填充颜色并添加文字。
2.休闲食品项目网站所做工作
在photoshop中制作首页，首先用图形工具做出LOGO，接着做宽1003px 高：85px的导航栏背景，用渐变填充，在用文字工具在导航栏做出7个子页的链接。打开标尺，把首页分成四个不烦并在各个区域内注入预定的内容。最后再尾页写入专利号及相关信息。
四、实训网站制作思路
1.女娲网站思路
女娲网页以深色调为主，显示Lady King(女娲)品牌女式服装的高贵、魅力。字体以宋体为主，楷体为辅，主色调以深红色为主，灰色和黑色为辅。以红色调为主是为了彰显品牌服饰的高贵，大气，简单，富有魅力。
2.休闲食品项目网站思路
休闲食品网页以以绿色主色调，辅助色为白色，黑色。总体呈现热情、鲜明、简洁的特征。以天然绿为主色调，让浏览者重回大自然，绿意盎然，食欲大开。主要起到以大自然为主题，休闲美食，品味生活，让购买者有一种眼前一亮的感觉，视觉和味觉的双重冲击。
四、实训网站详细制作过程
1、女娲网站：首页
一、新建PS文件
二、ctrl+alt+0 查看实际像素（只提一遍），在图层面板中新建组top。
三、在top组中新建图层1。
四、做宽1003px 高：85px 颜色：# 8f783e 到 # fbe9ac的线性渐变，（提示：先做选区，再渐变）
五、在top组中新建图层2 用钢笔工具做出网页右上脚的带弧线图，填充颜色为：# 786736 。
（提示：钢笔绘制出的是路径，按ctrl+Enter变成选区后再填充，绘制时注意选择：）
六、在top组中新建图层3，用渐变、蒙版做出斜小条，如果感觉颜色还有差异，可调节色相/饱和度、 曲线、 色彩平衡，
快捷键ctrl+U、ctrl+M、ctrl+B(记忆方法：键盘上三角布局)，（注：简便方法在步骤十二，三十二中均有详细介绍）
七、输入文字：关于女娲 女娲文化 女娲动态 新品上市 会员优惠 来客留言 联系女娲。
八、在top组上边新建组logo。
九、新建图层4，并选择自定义形状工具，Lady King logo的皇冠部分，在图层4上点击右键选择混合选项，做斜面和浮雕，渐变叠加 。
记住把路径变换成选区（注意：矩形工具至自定义形状工具所绘制的是形状或者路径，路径转换为选区在步骤五中已经提及），并填充颜色#ff0000，再做浮雕等效果。
在图层4上点击右键选择混合选项，做斜面和浮雕，渐变叠加。
十、输入文字 女娲（字体为黑体）颜色为#690101 Lady King，颜色纯黑，
并新建图层5做出1像素黑色细线。
十一、新建组middle背景,并新建图层6，如图t20，做一颜色：# cfc49c，大小：1003px-498px的背景图。
十二、新建图层7，做斜条，颜色：# d7cdaa。
确定选中图层7中的条（按住Crrl，左键单击图层7前的小窗口，就可以选择图层7中的条） Ctrl+alt+t,出现变形小框，用键盘的左右键移动变形框，确定位置后，Enter ctrl+alt+shift+t,做出多个条，最后完成整个页面。
十三、新建组左侧图，新建图层8，并制作渐变图（先做选区再渐变）：渐变颜色：纯黑：#000000到纯红：#ff0000 可选择对称渐变，大小位置等自己观察，注意：此红区为两圆角，两直角。可利用圆角矩形工具（自己思考如何做出两圆角，两直角）
十四、打开“资料”中的人物图片z1.jpg,抠图（可根据需要只扣某一部分），并导入到左侧图组中，并用蒙版让鞋子变淡些（因为主题是女装）。
十五、十五、输入文字Lady King 颜色：# fa828。
十六、新建组新闻动态，新建图层10，做纯黑到纯红的渐变条，调节图层模式为正片叠底，如图,
十七、新建图层11，导入“资料“中的z2.Jpg， 放到合适位置，输入文字女娲动态，颜色：# fdefc0
十八、新建图层12，做新闻女娲动态的背景颜色区，颜色:# f9f3e0
十九、新建图层13，做颜色为：# e9debe的条，可参考步骤十二
二十、输入新闻文字：颜色：# 534417
+ 奥运会火炬接力护航车队正式启航
+ 世界最长高铁京沪高铁开工 缓..
+ 美选战：希拉里奥巴马宾州选前..
+ 揭开谜底：Google如何赚钱的？
+ 1号台风“浣熊”捣蛋 19日起我..
+ 开发商群体性钱荒降价自救应对生..
+ 3月广州二手楼价比上月提升3% ..
+ 1号台风“浣熊”捣蛋 19日起我..
+ 开发商群体性钱荒降价自救应对.
以及其对应时间：
08-4-18
08-4-18
08-4-18
08-4-18
08-4-18
08-4-18
08-4-18
08-4-18
08-4-18
二十一、新建组新品上市，新建图层14，导入“资料“中的z1.jpg图片，并调整其大小等，在图层样式中给其描边,颜色：# 97885。
二十二、输入文字：>>红色诱惑系列，颜色#ff0000
二十三、新建图层15，用圆角矩形工具做链接按钮一，颜色为# fbdabe，并描边1像素（颜色：# c5834c），新建图层16，并作同样大小样式的链接按钮，填充颜色：# fbecbe，描边颜色：#c5a74c并输入文字：查看详情（颜色：# ff0000），其他系列（颜色：# 97885e）
字体均为12号，宋体，不加粗，设置消除锯齿的方法为：无（以后我会直接说成无或平滑、浑厚、锐利）。
二十四、新建组滚动产品，新建图层17，做出如下图所示的颜色为：# 97885e的图区。
二十五、新建图层18，做如图所示颜色为的图，然后图层模式改为：饱和度 二十六、新建图层19，导入“资料”中的z3.jpg,填充颜色为：#83744e，并改变其图层模式为：亮光。
二十七、新建图层20，同样做另一个花纹，填充颜色为# eae3c2，然后图层透明度调为：36%。
二十八、输入文字：THINK DIFFERENT SO GIVE DIFFERENT，颜色：#887B57 二十九、导入“资料”中的z4.jpg、 z5.jpg、z6.jpg、z1.jpg，分别给其图层起名为，图层21、图层22、图层23、图层24，调整图片大小位置，并外部描边1像素：# B70310
三十、新建组底图，并新建图层25，在25层中绘制选择区域，并填充颜色：# 786736，Ctrl+D去掉选区。
三十一、新建图层26，绘制选区，并填充颜色：#493B1B
三十二、新建图层27，绘制条，颜色为：# 251A07。 按住Crrl，左键单击图层27前的小窗口，就可以选择图层27中的条。按住ctrl+alt+t ,给选择住的条加变形框，用键盘上的向右键移动变形框，然后enter确认，按住ctrl+alt+shift+t，进行变换复制，
三十三、输入文字：Lady King（颜色正红：#ff0000，宋体，字间距：0，加粗，消除锯齿：无）Copyright (C)2008-2010 版权所有：女娲西安分公司（颜色：# 363636）。
1、女娲网站：子页
一、 首先把我们已经设计好的首页index。Psd复制一份，重命名为products。
Psd，并在photoshop中打开
二、 删除组新品上市，删除组女娲动态中的新闻文字图层和新闻文字背景图
层，如图zt10所示，删除到此的。
三、 删除滚动产品组中的图层21、图层22、图层23、图层24，
四、 在滚动产品组中新建图层21，用选择工具绘出矩形选区，并填充颜色：
# 998347
五、 导入所需图片，以其中一幅图片为例
六、 选择此图片（注：在首页制作中已经讲过如何选择一个图层中的内容了），
在菜单栏选择中扩展选区，并在编辑中给选区描边：# 242913
七、图片下方文字颜色为：# 4B3905 宋体 加粗 消除锯齿：无 到此新品上市子页面设计完成。观察在线留言页面，几乎都是在代码中完成的，这里我们只设计按钮的样子，按钮上的字也可以在代码中完成，我们就在ps中设计。
六、实训总结
很快两周的实训学习结束了，在这两周的学习生活中，不仅仅让我学到了网页设计的相关知识，还让我学会了怎么样团队协作。
这两周实训中我主要学习了如何运用这学期所学的三个制作网页的软件,以及photoshop的一些知识来制作一个网站。网站名称、内容自己选择。这是第一次这样系统地做网站，自己布局，自己做材料。从中学到不少的东西，同时在做网页的过程中，也掌握了一些常用的技巧。整体来看,所做的这个网站所用到的一些东西都是非常简单的，基本上是在dreamweaver的设计里面做的，没写什么代码，所以很多效果也就没有。 在做网页的时候，要严格按照一定的思路，模板是少不了的，模板在以后维护测试的时候就可以很好很快地修改。网页中一些固定不变的文字描述最好是把它做成图片，以后在修改的时候就只需要修改图片就能全部应用，还有就是不管在哪台电脑上都可以看得到这种不变的字体，要是直接写的，在别的没装这个字体的机器上就显示不出来。经过这次的实训，我学到了很多，做网站首先准备工作要做好，资料的搜集，站点建设，站点建设很重要，把站点规划好，做网页的时候就可以节省很多的时间。还有dweamweaver软件一定要熟悉运用。不仅巩固了书本上的知识，同时还学到了许多书本上学不到的知识，对各个知识方面的操作熟练了许多，但是在css样式和层方面还有些不怎么熟练。而且在这次实训中我遇到了几个问题就是在首页中放了几个层、轮
替图象和时间轴，需进一步加强photoshop的知识，但是都在浏览的时候都无法看到效果，到底和浏览器有问题还是其他什么原因，还是一个问号。随着社会进步，科技的发展，人们的要求也越来越高，商务网站的建设是随着这一发展而来的。因此，电子商务网站建设在现实社会中将处于很重要的社会地位，其价值是不可估量的，所以自己要加强这方面的锻炼了。虽然网站已经完成，可这并不是一件轻而易举的事情，在此过程中我遇到了许多以前不曾遇到的问题，多的情况都是自己解决，直到弄懂为止！让我更加清楚地明白老师平日里的良苦用心，也更加清楚地明白了自己以后应该怎样去做事。总之，在本次实训当中，让我受益非浅，也了解到要真正做好一个网站，我们在各方面的知识还有待加强，而且更应该重视平时的动手操作能力，以及加强在网页和photoshop等网站建设方面的探究与练习。
七、 对课程及实训环节的建议
通过在学校的实训可以让学生积累了丰富的实际经验，能够学以致用，适应市场发展需要。可是在这次的实训过程中我考到了自己的不足。在此我希望在以后的教学工作中，来时可以做到以下几点，以此解决电子商务专业学生就业难、就业质量不高的问题，全面提升电子商务专业学生的综合能力。
1、注重案例的解析，让在校的电子商务学生可以初步了解中小企业的运用电子商务的基本状况，以及企业对电子商务专业学生所需具备的技能与素质的要求。
2、提高学生的执行力，使学生自己调查电子商务目前市场及前景。通过老老师的指导，了解电子商务，并对调查结果的分析与总结，撰写调查报告。
3、通过分组进行团队学习，是电子商务学生培养团队协作能力，为毕业后进行工作做好一定的基础。