电子商务网站建设论文.docx
《电子商务网站建设论文.docx》由会员分享，可在线阅读，更多相关《电子商务网站建设论文.docx（18页珍藏版）》请在冰豆网上搜索。
电子商务网站建设论文
东南大学成贤学院
电子商务网页设计与网站建设论文
题目 美食网站的建设
学生姓名：
高月
学 号：
2０331１112
专 业:
电子商务
班 级：
电商1班
指导教师:
张琰
完成日期：
2０13/5/29
第一章绪论3
1。
1研究背景3
1．２研究的思路内容ﻩ３
第二章开发技术简介ﻩ４
2。
１Drｅamweavｅｒ……………………………………………………………………………………5
2.２Asp简介…………………………………………………………………………………………5
2。
３iｉｓ简介……………………………………………………………………………………………．6
2．4简单数据库officeaｃcess简要介绍．６
2。
4．1access组件介绍……………………………………………………………………………．……………7
第三章 网站制作过程…………………………………………………………………。
。
7
3．1网页布局基本概念………………………………………………………………………….８
３．2网页布局及系统实现1１
3．2。
2用户登录………………………………………………………………………………………………………14
3.2．３用户注册……………………………………………………………………………………………………… 15
3.2.4表单提交………………………………………………………………………………………………………15
３．3。
1首页页头和导航的设计ﻩ16
3.３．２网站正文的设计ﻩ17
3。
3.3网站分网页设计详解………………………………………………………………..17
第四章网站制作的常见问题ﻩ16
4。
1常见问题的解析ﻩ2０
第五章 结束语２１
5。
1 全文总结ﻩ２1
第一章 绪论
1。
１研究背景
在Iｎｔｅrｎeｔ飞速发展的今天,电子数字计算机是２0世纪重大科技发明之一，而互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
网页设计是将网站策划案中的内容、网站的主题模式，结合网页设计师的认识，通过艺术设计的手法表现出来;而网页制作通常是根据网页设计师制作的设计稿，按照W4C规范语言将其制作成网页格式。
优秀的网页设计师对网页设计与网页制作两道工序都是十分了解的，这样才可以保证网页制作人员在充分掌握设计要素的前提下,制作规范化、符合用户使用习惯、带来良好用户体验的网站.
因此网站建设与维护在Ｉｎterｎｅt应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视.为了让更多人更容易的搜索到更多的健康的美食食谱。
所以，开发美食天下的网站是必须的。
本次设计我计划通过Ｄｒeamweaｖer美图秀秀，ｐｓ像处理软件、Flaｓh等工具共同来制作完成信息学院网站的设计。
当然，这次的制作过程中还需要绑定数据库，最终的完成需要众多软件相互使用。
网站主要介绍了一些有利于人们身心健康的食物，希望可以给忙碌的人们带来一点小小的帮助。
１.2研究的内容
通过网站,全面宣传,展示健康美食、美食食谱，发布美食信息咨询和与广大爱好美食者建立良好互动的平台，使社会各界人士增加对美食有更深刻的认识，在Iｎｔeｒnｅt网上,让爱好美食者及时得到美食网发布的重要信息。
提高了办事效率，给美食爱好者者与各种美食之间建立了一种美好的桥梁。
希望给各位爱好美食的人带来方便。
本论文主要以实践为基础,利用软件Dｒｅamweaver为工具,设计了一个美食网。
论文以美食网为参考开展了研究，分析了系统建设过程中的相关技术，对所涉及的软件平台、软件系统、安全系统的进行理论分析，对系统规划实施中的需求分析、系统结构设计、硬件集成、软件配置等各环节进行研究，并提出性能测试。
其中此论文主要研究了以下内容:
第一章，主要是对本论文的结构做了一个介绍。
其中主要包括网站研究的背景和网站研究的内容。
第二章,介绍了网站建设的开发技术研究
第三章，介绍美食网首页的具体设计步骤。
其中主要包括设计网站的代码和网站的效果图。
我的美食网主要介绍了一些基本的美食书普、茶文化、甜点派对以及人们都感兴趣的健康食品等等。
第四章，解答了一些网站制作中常见的问题。
如：
为什么在Ｄrｅａmｗeaver中按Enｔer键换行时，与上一行的距离却很大?
等等.
第五章，对全文做了一个小小的总结,并对以后指出了进一步的研究方向。
希望在以后可以更加的完善自己的网站
第二章开发技术简介
2。
1Ｄｒeａmweaｖｅr
可视化的网页设计和网站管理工具,支持最新的Wｅb技术,包含HTML检查、HTML格式控制、HＴMＬ格式化选项、HomeSite／BＢEdiｔ捆绑、可视化网页设计、图像编辑、全局查找替换、全ＦTP 功能、处理Fｌaｓh和Shocｋwａｖe等富媒体格式和动态ＨTＭL、基于团队的Ｗeb创作。
在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式.
Ｄreａmweaveｒ ＭX 2０04 的十大新特性：
1。
动态跨浏览器验证:
自动检测标签和CSS规则来适应所有主流浏览器!
2．更强大的CSS支持!
3。
内建的图形编辑引擎:
修剪，改变大小,尺寸，旋转角度，调节明暗度都不需要离开Ｄreａｍweａver环境,因为它本身集成了FW的基本图形编辑技术。
（这一点有模仿FrｏntＰａge的嫌疑,但这个功能确实很实用）!
4。
安全FTＰ：
完全加密传输保证文件和帐号信息的安全！
5。
增强对当今技术的支持：
支持当今主流的开放环境:
ColdFusion,J２EE,PHP,．ＮET，和其他主流的服务器技术.Ｄreamwｅaｖer现在加入了ＸMＬ命名
空间支持,AＳＰ.ＮET表单控件对象,新的参考书内容和新的PHP服务器端行为6．无缝整合外部文件和代码：
直接将Ｗord和Ｅxｃｅｌ文档复制和粘贴到Dｒeａmｗeａver中,会保留字体，颜色，ＣSS样式表信息.使用,使用系统支持的编码保存任何字体,包括双字节字符集。
7.紧密整合MM的其他工具：
加强了和MM其他几款产品的协同工作能力。
例如:
你可以通过DＷ直接设置Flash组件的参数。
8.基本支持改良:
插入条,表格工具都有改进。
9。
增强代码编写工具:
编辑代码更省时,例如右键编写代码工具,增强的查找和替换，高效的属性面板。
１０．改进的设计开放环境：
一个改良的用户界面，更高的实用性，非常亲切和有逻辑,让你快速找到你想要的东西，一个新的开始屏幕让你快速访问最近的文件和教程资源。
２．2 Asp简介
Active Ｓｅrver Pages（ASＰ）是服务器端脚本编写环境，使用它可以创建和运行动态、交互的 Web 服务器应用程序。
使用 ＡSP 可以组合 HTML页、ＶBＳcｒipt脚本命令和ＪavａＳcriｐt脚本命令等,以创建交互的 Wｅb 页和基于 Ｗeｂ 的功能强大的应用程序.
由于脚本程序是在服务器上而不是在客户端运行，传送到浏览器上的 Web 页是在 Ｗｅb 服务器上生成的.所以不必担心浏览器能否处理脚本：
Weｂ 服务器已经完成了所有脚本的处理，并将标准的 HTML 页面传输到浏览器。
由于只有脚本的结果返回到浏览器，所以服务器端脚本不易被别人复制。
用户看不到创建他们正在浏览的页的脚本命令。
a. AＳP的运行环境：
ASP只能用于下列Web Serｖer ·IIＳ
·Microｓoft Persｏnal Ｗeｂ Seｒver b。
ASP的编程语言：
ＡＳP可以使用VＢScｒipｔ和JａvaScrｉpt进行程序编写. c． ASP文件
ＡSP的文件后缀名为。
aｓp，以区别于同样可以包含Scripｔ的ＨTML 文件.一个.ａｓp文件是一个文本文件,
可以包括下列元素的任意组合：
·文本（teｘt） ·ＨTML标志（tags） ·Sｃripｔ命令
d. AＳP:
不需要任何HTMＬ的tａg，保存在文件中，起个好听的名字，文件名的后缀一定要改为 .asp ，然后上传到服务器上一个有执行权的目录下（例如ｗwwroｏt），接下来的问题是，怎么执行这个AＳＰ程序。
2.3 IＩS简介
IIＳ是Intｅrｎet Inｆormatiｏn Server的缩写,它是微软公司主推的Web服务器， 最新的版本是Winｄows20００里面包含的ＩＩＳ 5.０，ＩIS与WiｎdoｗNＴ Sｅｒveｒ完全集成在一起, 因而用户能够利用Wｉndoｗs NT Ｓerver和NTFS（NT Ｆｉle Sｙsｔem，NT的文件系统）内置的安全特性, 建立强大、灵活而安全的Iｎterｎet和Ｉntrａnet站点. IＩＳ的一个重要特性是支持ＡＳP。
IIS 3．0版本以后引入了AＳP,可以很容易的张贴动态内容和开发基于Web的应用程序。
IIS的安装,管理和配置都相当简单。
２。
4简单数据库oｆfiｃe access的简要介绍
Accｅｓs数据库是集成在miｃｒosoft公司开发的产品更新换代ofｆice系统中的集成软件。
Access是一个数据库管理系统,它之所以被集成到Ｏｆfｉcｅ中而不是Ｖisual Studio中，是因为它与其它的数据库管理系统（如Vｉｓuaｌ ＦoxPrｏ）相比更加简单易学，一个普通的计算机用户即可掌握并使用它。
而且最重要的一点是，Accｅss的功能足够强大，足以应付一般的数据管理及处理需要。
ODBC（Open Ｄataｂase Coｎｎｅcｔivity开放式数据库互联）是微软推出的一种工业标准,一种开放的独立于厂商的API应用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统。
ODBC作为一个工业标准,绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ＯDBC接口或提供了ODBＣ支持，这其中就包括常用的ＳQL SERＶER、ORＡＣＡL、INＦORMIX等,当然也包括了Acceｓs。
ASP访问数据库的几种方式：
在ASP脚本中可以通过三种方式访问数据库:
a. ＩDＣ（Ｉnｔeｒnet Dａtabasｅ Coｎnector）方式; b. ＡDO（ActiveX Ｄaｔａ Objeｃｔs）方式; c. ＲDS（Rｅmote Ｄata Ｓerｖice）方式；
这三种访问方式对数据库的访问是由Internet Informatｉoｎ Server来完成的.Web浏览器用HTTP协议向Ｉnteｒnｅｔ信息服务器（IIＳ）递交请求。
Inｔｅｒｎet信息服务器执行访问数据库的操作,并以一个ＨTML格式的文档作为回答。
在本程序中我使用的是第二种方式,即ADＯ方式。
2。
4．1 Aｃｃesｓ 组件介绍
我们在Ｗeb服务器运用Web应用程序进行的最常见和最实用的任务就是访问服务器端的数据库.而ＡSP内建的Dａtabｓe Aｃcess组件使得我们能够轻而易举地通过AcｔiexX Ｄａta Objeｃts（ADO）访问存储在服务器端的数据库或其他表格化数据结构中的信息.ＡDO是对当前微软所支持的数据库进行操作的最有效和最简单直接的方法，它是一种功能强大的数据访问编程模式，从而使得大部分数据源可编程的属性得以直接扩展到Actiｖe Server页面上．可以使用AＤＯ去编写紧凑简明的脚本便连接到Opeｎ Daｔａse Connetｉｖiｔｙ（ＯＤＢC）兼容的数据库和OLE DＢ兼容的数据源,这样ASP程序员就可以访问任何与OＤBC兼容的数据库，包括MS SＱL SＥRＶER Avcｃess Ovraｃlｅ等.如果您是一个对数据库连接有一定了解的脚本编写人员，那将发现ＡDＯ命令语句并不复杂而且容易掌握,同样地，如果您是一个经验丰富的数据库编程人员,将会正确认识ADO的先进的与语言无关性和查询处理功能.熟悉VB数据库编程的朋友会发现AＤＯ与RＤO有某中类似的地方。
但是据说AＤO的访问的速度更快,内存需要更小.
第三章网站的制作过程
网站主页就好象是宣传栏或者店面——对访问者产生第一印象，都希望尽量给人留下好的印象。
一般来说，好的网站应该给人有这样的感觉：
干净整洁；条理清楚;
专业水准；引人入胜。
3．1网页布局的基本概念
网页基础知识
（1）内容的编排与使用
•以醒目为上
•突出重点，力求简洁
•重视文本
•在广度和深度之间求取平衡
•及时更新
构建静态页面
（１）构建页面
·插入图像
·插入普通图像
·插入鼠标经过图像
（2）使用超链接
•创建超链接的方法
–使用“属性"面板创建超链接
–使用“指向文件”按钮创建超链接
•“属性”面板中拖动“链接”文本框右边的“指向文件"按钮,拖动鼠标时会出现一条带箭头的细线,指向链接文件后释放鼠标,即会链接到该文件
·创建下载文件链接
·创建电子邮件链接
·创建图像热区链接
·创建锚点链接
（３）使用表格
·插入表格
·设置表格属性
·表格的基本操作
·利用表格布局网页
构建动态页面
（1）插入ｆlaｓｈ动画
•将光标放在插入ｆlash动画的位置
•执行“插入记录”中“媒体”“Flash”命令，在弹出的“选择文件”对话框中选择制作好的ｆｌａｓｈ文件,点击确定
•选中flaｓｈ，在“属性”面板中进行
（２）插入flash按钮
·在需要的位置插入一个6行１列的表格
•将光标置于第1行单元格中，执行“插入记录”中“媒体”“Fｌasｈ按钮”命令
•在弹出的“插入Flash按钮”对话框中设置
–点击“获取更多样式”可从网上获得更多的样式
CSS样式表
•使用“ＣSS样式"面板
–附加样式表
–新建CSS样式
–编辑样式表
–删除CSS样式
•创建新的CＳS样式
–在“CSS样式"面板底部单击“新建CSＳ样式”按钮，在弹出的“新建CSS规则”对话框中设置
•选择器类型:
选择“标签”
•标签:
输入“tｄ”
•定义在:
选择“新建样式表文件"
–点击确定，保存新建的样式表,即可创建CSS样式表
·自定义
–选中套用样式的文字,在“CＳS样式"面板中选中新建的样式，单击鼠标右键,在弹出的菜单中选择“套用”选项
·插入背景音乐
插入—媒体-插件
构建交互式页面
（1）表单的使用
•创建表单
–执行“插入记录"中“表单”的“表单”命令
–页面中出现一条红色虚线，选中虚线，在“属性”面板中设置
·插入单行文本域
·插入密码域
·插入单选按钮
·插入复选框
·插入列表和菜单
·插入多行文本域
·插入表单按钮
（2）高级表单
•点击“常用”工具条上的“脚本”按钮
•在弹出的窗口中设置：
–语言：
tｅst／jaｖascrｉpｔ
–内容:
输入如下代码
–funｃtiｏntest（ｆorm1）
–{
–if（fｏrm1。
name．value＝="”）
–｛
– ａlert（”请输入您的姓名”）;
– forｍ1．ｎamｅ。
ｆｏcｕs（）;
– ｝
–ｅｌseｉf（form1。
sｈuomｉnｇ．valｕe．inｄeｘOf（'@'，0）＝=—１）
–｛
– alert（”说明不正确，请重新输入"）；
–｝
– eｌseform1。
subｍit（）；
– ｝
•点击确定，在文档窗口中出现脚本图标
•选中“提交"按钮，在“行为”面板中将起动作改为“无”
•点击“行为”面板中的“＋"按钮，在弹出的菜单中选择“调用JavaScｒiｐｔ”
•在弹出的“调用ＪａvａScript"对话框中输入函数名“ｔest（form1）”
•行为默认为“oｎＣlｉｃk”
3。
７ASＰ
（1）IＩS的配置
•配置IIＳ的虚拟目录
·鼠标右击“默认网站”,在菜单中选择“新建”“虚拟目录”命令,打开“虚拟目录创建向导”，单击“下一步”,打开“虚拟目录别名”对话框
·在“别名”中输入虚拟目录的名称
•点击“下一步”,在“目录"中添加文件的物理路径
•点击“下一步”，打开“访问权限"对话框，选中“读取”、“运行脚本”和“写入”选项
•点击“下一步",单击完成，此时在“Inteｒnet信息服务”窗口中可以浏览创建的虚拟目录
（２）数据库的基本操作
•启动Aｃｃess
•点击右上角的“开始工作”在菜单中选择“新建文件"
•点击“空数据库”，在“文件新建数据库”对话框中设置数据库的名称和保存路径，点击确定
•选择“使用设计器创建表”
•在打开的“表１”中输入关键字段、数据类型，并设置属性，将“UｓerIＤ”设置为“主键"
•设置完成后保存表１，并为表1设置名称
（３）登陆与注册模块
–建立工作目录，拷贝数据库
–定义IIS站点
–定义Dreamｗｅaveｒ8站点
–在Drｅaｍweaver8中建立数据库连接
•使用ODBC连接
•使用OLEDB连接:
连接字符串（Drｉver=｛Microsoft AccessDriver（*。
mdb）}；ＤBQ=Ｇ:
/03３11１20/regｉｓter。
mdｂ;
•注册页面ｒｅgister．asｐ
•注册成功页面RegＳuccess．htm
•注册失败页面RegFａiｌ．htｍ
•登陆页面logｉn.asp
•登陆成功页面main.htｍ
•登陆失败页面ＬoginＦaiｌ。
ｈtm
3.2网页布局的方法
网页布局图
3.２.2用户登录图
３.2.3用户注册图
3.２.4高级表单图
高级表单绿色为背景，主题鲜明
3。
3网站首页设计
在此网站的首页我们可以看到许多美食的食谱,还有许多美丽的图片。
给人很好的视觉感。
3。
3．1首页页头和导航的设计
本网站的首页由一张简单的动画图组成，给人一种舒服的感觉。
页头上几个大字，让人对本网站的功能一目了然。
网站的导航包含有四个选项分别是美食贴士,甜点制作，家常菜制作,儿童特区，绿色清新,新颖醒目,每个导航都有下拉菜单，鼠标滑过就显现出来
效果图为：
解析：
四个导航栏,鼠标滑过出现下拉菜单链接其他网页
眉头插入背景音乐ｓleeｐｙday，，轻松愉快···
３。
3。
2 网站正文的设计
网站正文由三大部分组成及右部以及上下部。
其中上部又由二部分组成（左、右）,下部由一组闪动的图片组成。
网站的右部分有导航栏。
如左图
解析：
由FLASＨ按钮组成，链接其他子网页
首页效果图展示为
解析：
插入音乐插件，图片皆为动图，FLASH动画，图片上有热区链接，点击转到其他页面
整体简洁，一目了然，方便观看，以绿色为主题，代表健康清新天然的美食,贴切自然
３。
3。
3网站分网页的设计
１。
甜品小站
解析:
眉头由FＬASＨ精美动画构成,
文字套用ＣSＳ，并有锚点连接!
2。
家常菜
解析:
眉头由FLＡSＨ精美动画构成，文字套用CSＳ,并有锚点连接！
套用层
3儿童特区
运用了时间轴，图片均由PS或美图秀秀处理过的动图,文字套用层，清新简洁可爱
４营养知识
解析：
运用了时间轴，以青白色彩,清新自然，文字套用CSS层,并有锚点连接
5茶道文化
青色为背景,符合茶的给人清新的感觉，图片精美，讲解详细，文字套用ＣSＳ层，并有锚点链接。
第四章 网站制作的常见问题
4。
1常见问题的解析
网站中常见的问题有:
（1） 为什么网站的首页文件名一般命名为inｄex.htｍ或index.aｓp？
网站的首页文件名为indｅx．htm或iｎｄｅx．asp,这是一种网站首页命名规范。
在浏览器地址栏输入网址，即使不输入inｄｅx。
htｍ或inｄｅｘ。
asp，浏览器也能正确找到该文件并正确显示出来，因为Weｂ服务器默认的首页文件名是iｎdeｘ。
ｈtｍ或inｄex。
asp。
此外，通过设置，Web服务器常用的默认首页文件名格式有ｉndex．hｔｍ、dｅfａｕlt．htm、inｄeｘ。
aｓｐ、defａult.ａsｐ等。
（2）巧妙设置分辨率
在制作网站时,有时会发现，制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机上浏览时却发现网页的布局乱套了，这是因为各个计算机的分辨率不同所致.在Dreamweaver文档窗口中的右下角,显示当前文档的分辨率大小。
单击当前分辨率数字,在弹出的菜单中可以为当前的页面指定显示分辨率，通过修改可以使网页更具灵活性.
（3）打开文件及插入网页图像的快速方法
在Dreamweaver里，进行网页编辑时，不必通过菜单栏里的【打开】命令来打开文件，一个更快的方法是利用【文件】面板,打开相关文件，直接用鼠标拖动文件到文档编辑窗口即可;同样,要在网页上插入图像等元素，也可直接通过【文件】面板将图像文件拖动到网页上。
（4）怎样仅仅复制文字而不想要其格式？
当从Dreamweaveｒ中复制文字到另一个应用程序中时,HTＭL代码和文字一起被复制过去了。
此时一般都用快捷键【Ctｒｌ+Ｃ】来复制，如果在复制的时候多按一个【C】键则只复制选中的文字。
从外部文档中粘贴时,如果只要文字而不想要其格式，可以选择菜单中的【编辑】︱【粘贴文本】命令,不要直接用快捷键【Cｔrl＋V】。
（５） 如何巧妙隐藏标签？
如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一个与之相应的元素标签，以便于选择不可见元素。
但如果不想显示时，也可以隐藏标签,方法是按【Ｃtrl＋U】键打开【首选参数】对话框，在【分类】中选中【不可见元素】，在面板的右边将会出现所有的元素标签.只要将不需要的元素标签前的勾去掉，以后它就不会再出现了.
（6）Dｒeaｍweavｅｒ自动创建样式功能
文本属性面板可以设置当前所选文本的样式和格式。
使用属性面板设置文本样式和格式时，Dｒeａmweaveｒ将跟踪为每个文本元素指定的格式属性，并使用命名约定为每个元素指定一个标签：
Stylｅ1、Styｌe2、Ｓtyle３、……、Ｓｔylen。
如果将同一格式属性指定给两个或更多文本元素,Dreamweaｖer将使用相同的标题标记这些元素，消除冗余的样式名称。
（7） 字体【格式】与【大小】有什么区别？
在【文本】属性面板中,【格式】与【大小】都可以设置字体大小,但二者有一定的区别，选择【格式】,字体改变大小的同时变为粗体;如果只想改变文字大小，而不想让字体变为粗体,可以用【大小】属性。
此外，【大小】只对选中文本起作用,而【格式】对整段文字起作用.
（8）为何我无法在文字中输入多个空格字符？
在做网页的时候，有时需要输入空格，但在有些时候却无法输入，导致无法正确输入空格的原因可能是输入法的错误，只有正确使用输入法才能够解决这个问题.解决的方法有以下几种。
●切换到代码视图，在需要添加空格的位置，输入代码&nｂsｐ；,就会出来空格，输入几次代码就会出来几个空格。
●如果使用智能AＢC输入法,按Sｈifｔ+空格键,这时输入法的属性栏上的半月形就变成了圆形，然后再按空格键,空格就出来了.
●切换到【文本】插入栏，在【字符】下拉列表选择【不换行空格】选项,就可直接输入空格。
（9）为什么在Drｅamwｅaver中按Ｅnteｒ键换行时，与上一行的距离却很大？
在Dreamwｅａvｅr中
升级会员 