电子商务网站设计报告

1、 设计报告一、设计目标：通过电子商务设计的学习，学会用dreamweaver等软件来对一个进行系统的设计，从理论知识的掌握，转向操作技能的提高，进而提高个人总体计算机网络水平的提高。二、理论知识的准备：1.为了满足爷面制作的目标，应该注意哪些问题？A网页结构 网页结构要清晰，易于导航，思路和脉络要符合访问者的想法。可采取的措施有：采用框架结构表现主题，索影和正文；网页的大小一般控制在50KB以；在网页的尾部放上联系方式，如E-MAIL，以方便访问者能建立联系，反馈必要的信息 B页面容 一般情况下，网页都要以容为主，不必过分的追求复杂的表现形式，但必须写好简介，要有特色，避免太空，泛泛而谈。页面

2、本身要简单，结构复杂的网页不仅要花费很多的精力，而且由于超连接复杂，让浏览者阅读时也感觉困难C文字 在以容为主的前提下，应当尽量把形式与容结合起来。既不要把页面弄的花哨，也不呀只讲容完全不讲究文字和图片的安排，要容易阅读。要注意：网页的标题要简洁，明确，能反映整个文档的容；在文本叙述部分使用水平线分割不同的部分；对重点的文章和段落要使用强调字体表达D图形 设计好图形并合理使用能给网页增色。网页中插入的图形尽量要小，网页中图形要附加文字说明，使人在图形出来之前了解相关容；不要为图形加太长的交互文本，也不要把所有的超连接放在图上；控制页面中的图的数量，不要滥用图象GIF2. 设计的过程中，最中要的

3、一个原则是什么？为什么？最重要的原则是创意。虽然的主要目的是传送给人们它的信息，但在传递信息的同时还把他的文化传递给获取信息的这些人。软件的掌握是短期就能速成的，而且新的软件成出不穷，功能越来越强大，但是使用这些软件必须要有良好的设计概念才能创造优秀的，这是制作的核心。的制作是按一定的步骤进行的，不同的设计着对有不同的见解和看法，但是有个共同观点：仅会输入文本，制作超级连接，排列图片不是真正意义上的网页制作，因为网页制作最重要的一个原则是创意。3.动态网页的工作原理动态网页是与静态网页相对应的，也就是说，网页 URL的后缀是.htm、.html、.shtml、.xml等静态网页的常见形动态网页

4、制作专家式，而是以.aspx.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号“?”。动态网页的工作原理与静态网页比较类似，但是在服务器端有很大差别。服务器端接到客户端发出的请求后，首先会找到所要浏览的动态网页文件，然后解释执行其中的程序代码，将含有程序代码的动态网页转化为标准的静态网页，然后将静态网页发送给客户端。三、软硬件需求准备（1）计算机一台（2）Dreamweaver开发工具和运行环境（3）此网页用360安全浏览器进行预览（4）图形处理工具，如photoshop。四、总体分析与设计1.介绍1.1主题：柔软时光小店 暖手宝1.2风格：

5、粉色温暖1.3页面结构以与相关功能简介 本网页提供者消费者相比同类品种较多的暖手宝选择。消费者能在我们上查看新品，热卖和超值特卖等各种为消费者量身打造的宝贝。 本的设计结构包括导航栏、Globallink模块、left模块、main模块、tips模块等。 具体设计：导航栏模块展示我们的店名Globallink模块：主要是为了消费者能在各类商品之间进行切换Left模块：提供者消费者一个登录界面和各种不同用途、风格、价位的宝贝的选择Main模块：根据具体需要设计不同的界面2.大概设计纲要：1.首页2.店铺介绍给消费者一些我们店铺的基本介绍3.新品上市把新品全部展示出来供消费者选择4热卖商品展示热卖

6、中的商品5超值特卖给消费者提供一些性价比高的产品6.买家评价展示给消费者所有其他买家对我们的评价，更具有真实性，另外提供一个供消费者与我们沟通和提出意见的平台。主要代码有7.联系我们提供给消费者我们的联系方式，以便于更好的沟通和提供客户更优质的服务。代码设计： 亲,你可以24小时联系我们的客服哦，我们会随时为您解答您想知道的我们店铺和产品相关的问题哦。 我们的客服是： 您还可以访问我们的留言店长空间 回答很简单的问题就能访问哦。 8.CSS部分设计：本站CSS部分的设计主要作用：利用相应代码来组织各模块之间的布局。提供一个整体上比较美观的网页设计。省去主页中药用代码写入才能改变的复杂工作。主要

7、代码：（1）margin主要用于控制模块之间的间距 （2）padding主要用于模块部元素的漂移（3）background用来控制模块的背景（4）border主要控制块的边缘和图片等的边框（5）font-family控制字体（6）#主要用于CSS中，用来找到网页模块的位置，从而进行控制9. . Microsoft Access数据库的建立。9.1依次选择菜单命令开始程序Microsoft Access就可以启动Access2003,点击“文件”在下拉菜单中选择“新建”，选择“空数据库”，指定后保存路径后出现如下所示对话框：9.2实用设计器创建表选项，出现下图所示对话框：说明:（1）字段名称可以

8、用中文，也可以用字母、数字和下划线，命名规则和变量类似，考虑系统的兼容的问题，建议不要用中文。（2）至于数据类型，常用的有“文本”、“备注”、“数字”、“日期/时间”、“是/否”和“自动编号”等。其中“文本”用于比较短的字符串（最长255个字符）；“备注”用于比较长的字符串，最长可以容纳65535个而字符；“是/否”用于布尔类型，只有True（真）或False（假）；“自动编号”是个特殊的类型，它可以自动的递增或随机产生一个数字，经常用它产生一个唯一的编号。9.3正确输入所有字段后，单击Access主窗口的保存按钮，就会弹出下图所示的另存为对话框，在其中输入表的名称，然后单击确定按钮即可。9.

9、4保存表9.5双击表1可以在表中输入数据，当你建表完毕后，觉得数据不合理，想修改数据也可以双击表1进行修改，如果想修改表的字段，就右击表1，选择“设计视图”，就可以进行修改10.存取数据库。存取数据库是开发网络程序中最重要也最常用的部分，.NET框架提供了，利用它就可以方便的存取数据库。准确的说，是由很多类组成的一类库。这些类库提供了很多对象，分别用来完成和数据库的连接、查询记录、插入记录、更新记录和删除记录等操作。其中主要包括如下5个对象。（1）Connection对象：用来连接到数据库。（2）Command对象：用来对数据库执行SQL命令。（3）DataReader对象：用来从数据库返回只

10、读数据。（4）DataAdapter对象：用来从数据库返回数据，并送到DataSet对象中，还要负责保证DataSet对象中的数据和数据库中的数据保持一致。（5）DataSet对象：它可以看做是存中的数据库。实用OLEDB的数据库，需要在页面中导入相关的名称空间：存取数据库：（1）首先利用Connection对象建立和数据库的连接。语法为：“Provider=OLEDB 驱动程序；Data Source=数据库文件物理路径”（2）然后建立Command对象，执行SQL语句命令。（3）利用Command对象的ExecuteReader方法建立DataReader对象，从数据库获取数据。（4）Da

11、taReader对象返回的数据在记录集移动指针就可依次显示所有记录。（5）利用Command对象的Executenonquery()方法可插入记录和更新记录。（6）与数据库相连登陆程序，当登陆成功时则直接跳转到的主页，其主要代码如下： Dim conn As New OleDbConnection(Provider=.4.0; Data Source= + () Dim strSql As String strSql = Select * From link Where username= & & And mypassword= & & Dim cmd As New OleDbCommand(

12、strSql, conn) () Dim dr As OleDbDataReader = () If ()=True Then () (主页.aspx) Else () = 您必须输入有效的用户名和密码，还没注册？ End If 当点击注册按钮时，跳转到注册页面，主要程序代码如下： Protected Sub Button1_Click(ByVal sender As Object, ByVal e As ) (注册.aspx) End Sub注册界面在数据库中插入新注册用户信息主要代码如下： Dim strSql As String strSql = Insert Into link(use

13、rname,mypassword,age,email,submit_date) Values( & user_ & , & & , & & , & & ,# & Now() & #) 当注册成功时，则跳回登陆界面，主要代码如下： Dim cmd As New OleDbCommand(strSql,conn) Dim Exp As Exception Try () () () (登陆.aspx) Catch Exp = 发生错误，可能是用户名已经被人使用。 End Try五、的运行与实现 安装Dreamweaver后，打开软件，新建一个，将制作好的文件（后缀为html）包括建设好的css和需要添加的图片，全部复制放到一个文件夹中，用360安全浏览器进行预览。六、建设心得体会虽然之前有上过类似课程 但是用dreamweaver制作还是第一次，可能刚开始会感觉很困难，但是其实只要多去琢磨一段时间，把课本上的知识和老师讲的知识结合起来，并进行多次实际操作，就能比较好的运用这门知识。通过对这个网页的设计，了解到自身还存在很多不足，希望能在今后的学习和生活中好好提高。在设计过程中，我了解到网页设计的一些布局，连接，还有一些图形处