电子商务网站建设论文.docx
《电子商务网站建设论文.docx》由会员分享，可在线阅读，更多相关《电子商务网站建设论文.docx（21页珍藏版）》请在冰点文库上搜索。
电子商务网站建设论文
东南大学成贤学院
电子商务网页设计与网站建立论文
题目美食网站的建立
学生姓名：
高月
学号：
203311112
专业：
电子商务
班级：
电商1班
指导教师：
张琰
完成日期：
2013/5/29
access组件介绍…………………………………………………………………………….……………7
第三章网站制作过程…………………………………………………………………..7
………………………………………………………………………….8
………………………………………………………………………………………………………14
………………………………………………………………………………………………………15
………………………………………………………………………………………………………15
网站分网页设计详解………………………………………………………………..17
第一章绪论
1.1研究背景
在Internet飞速开展的今天，电子数字计算机是20世纪重大科技创造之一，而互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
网页设计是将网站筹划案中的内容、网站的主题模式，结合网页设计师的认识，通过艺术设计的手法表现出来；而网页制作通常是根据网页设计师制作的设计稿，按照W4C标准语言将其制作成网页格式。
优秀的网页设计师对网页设计与网页制作两道工序都是十分了解的，这样才可以保证网页制作人员在充分掌握设计要素的前提下，制作标准化、符合用户使用习惯、带来良好用户体验的网站。
因此网站建立与维护在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建立中的重要组成局部，从而倍受人们的重视。
为了让更多人更容易的搜索到更多的安康的美食食谱。
所以，开发美食天下的网站是必须的。
本次设计我方案通过Dreamweaver美图秀秀，ps像处理软件、Flash等工具共同来制作完成信息学院网站的设计。
当然，这次的制作过程中还需要绑定数据库，最终的完成需要众多软件相互使用。
网站主要介绍了一些有利于人们身心安康的食物，希望可以给忙碌的人们带来一点小小的帮助。
1.2研究的内容
通过网站，全面宣传，展示安康美食、美食食谱，发布美食信息咨询和与广阔爱好美食者建立良好互动的平台，使社会各界人士增加对美食有更深刻的认识，在Internet网上，让爱好美食者及时得到美食网发布的重要信息。
提高了办事效率,给美食爱好者者与各种美食之间建立了一种美好的桥梁。
希望给各位爱好美食的人带来方便。
本论文主要以实践为根底，利用软件Dreamweaver为工具，设计了一个美食网。
论文以美食网为参考开展了研究，分析了系统建立过程中的相关技术，对所涉及的软件平台、软件系统、平安系统的进展理论分析，对系统规划实施中的需求分析、系统构造设计、硬件集成、软件配置等各环节进展研究，并提出性能测试。
其中此论文主要研究了以下内容：
第一章，主要是对本论文的构造做了一个介绍。
其中主要包括网站研究的背景和网站研究的内容。
第二章，介绍了网站建立的开发技术研究
第三章，介绍美食网首页的具体设计步骤。
其中主要包括设计网站的代码和网站的效果图。
我的美食网主要介绍了一些根本的美食书普、茶文化、甜点派对以及人们都感兴趣的安康食品等等。
第四章，解答了一些网站制作中常见的问题。
如：
为什么在Dreamweaver中按Enter键换行时，与上一行的距离却很大？
等等。
第五章，对全文做了一个小小的总结，并对以后指出了进一步的研究方向。
希望在以后可以更加的完善自己的网站
第二章开发技术简介
2．1Dreamweaver
可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。
在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。
Dreamweaver MX 2004 的十大新特性：
1.动态跨浏览器验证:
自动检测标签和CSS规那么来适应所有主流浏览器!
2.更强大的CSS支持!
3.内建的图形编辑引擎:
修剪,改变大小,尺寸,旋转角度,调节明暗度都不需要离开Dreamweaver环境,因为它本身集成了FW的根本图形编辑技术.（这一点有模仿FrontPage的嫌疑,但这个功能确实很实用）!
4.平安FTP:
完全加密传输保证文件和帐号信息的平安!
空间支持,ASP.NET表单控件对象,新的参考书内容和新的PHP效劳器端行为6.无缝整合外部文件和代码:
直接将Word和Excel文档复制和粘贴到Dreamweaver中,会保存字体,颜色,CSS样式表信息.使用,使用系统支持的编码保存任何字体,包括双字节字符集。
7.严密整合MM的其他工具:
加强了和MM其他几款产品的协同工作能力.例如:
你可以通过DW直接设置Flash组件的参数。
8.根本支持改进:
插入条,表格工具都有改进。
9.增强代码编写工具:
编辑代码更省时,例如右键编写代码工具,增强的查找和替换,高效的属性面板。
10.改进的设计开放环境:
一个改进的用户界面,更高的实用性,非常亲切和有逻辑,让你快速找到你想要的东西,一个新的开场屏幕让你快速访问最近的文件和教程资源。
Asp简介
Active Server Pages〔ASP〕是效劳器端脚本编写环境，使用它可以创立和运行动态、交互的 Web 效劳器应用程序。
使用 ASP 可以组合 HTML页、VBScript脚本命令和JavaScript脚本命令等，以创立交互的 Web 页和基于 Web 的功能强大的应用程序。
由于脚本程序是在效劳器上而不是在客户端运行，传送到浏览器上的 Web 页是在 Web 效劳器上生成的。
所以不必担忧浏览器能否处理脚本：
Web 效劳器已经完成了所有脚本的处理，并将标准的 HTML 页面传输到浏览器。
由于只有脚本的结果返回到浏览器，所以效劳器端脚本不易被别人复制。
用户看不到创立他们正在浏览的页的脚本命令。
a. ASP的运行环境：
ASP只能用于以下Web Server ·IIS
·Microsoft Personal Web Server b. ASP的编程语言：
ASP可以使用VBScript和JavaScript进展程序编写。
c. ASP文件
ASP的文件后缀名为.asp，以区别于同样可以包含Script的HTML 文件。
一个.asp文件是一个文本文件，
可以包括以下元素的任意组合：
·文本〔text〕 ·HTML标志〔tags〕 ·Script命令
d. ASP：
不需要任何HTML的tag,保存在文件中，起个好听的名字，文件名的后缀一定要改为 .asp ，然后上传到效劳器上一个有执行权的目录下〔例如wwwroot），接下来的问题是，怎么执行这个ASP程序。
2．3 IIS简介
IIS是Internet Information Server的缩写，它是微软公司主推的Web效劳器， 最新的版本是Windows2000里面包含的IIS 5.0，IIS与WindowNT Server完全集成在一起， 因而用户能够利用Windows NT Server和NTFS〔NT File System，NT的文件系统〕内置的平安特性， 建立强大、灵活而平安的Internet和Intranet站点。
IIS的一个重要特性是支持ASP。
IIS 3.0版本以后引入了ASP，可以很容易的张贴动态内容和开发基于Web的应用程序。
IIS的安装，管理和配置都相当简单。
2．4简单数据库office access的简要介绍
Access数据库是集成在microsoft公司开发的产品更新换代office系统中的集成软件。
Access是一个数据库管理系统，它之所以被集成到Office中而不是Visual Studio中，是因为它与其它的数据库管理系统〔如Visual FoxPro〕相比更加简单易学，一个普通的计算机用户即可掌握并使用它。
而且最重要的一点是，Access的功能足够强大，足以应付一般的数据管理及处理需要。
ODBC〔Open Database Connectivity开放式数据库互联〕是微软推出的一种工业标准，一种开放的独立于厂商的API应用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统。
ODBC作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ODBC接口或提供了ODBC支持，这其中就包括常用的SQL SERVER、ORACAL、INFORMIX等，当然也包括了Access。
ASP访问数据库的几种方式：
在ASP脚本中可以通过三种方式访问数据库：
a. IDC〔Internet Database Connector〕方式; b. ADO〔ActiveX Data Objects〕方式; c. RDS〔Remote Data Service〕方式;
这三种访问方式对数据库的访问是由Internet Information Server来完成的。
Web浏览器用HTTP协议向Internet信息效劳器〔IIS〕递交请求。
Internet信息效劳器执行访问数据库的操作，并以一个HTML格式的文档作为答复。
在本程序中我使用的是第二种方式，即ADO方式。
Access 组件介绍
Access组件使得我们能够轻而易举地通过ActiexX Data Objects（ADO）访问存储在效劳器端的数据库或其他表格化数据构造中的信息.ADO是对当前微软所支持的数据库进展操作的最有效和最简单直接的方法,它是一种功能强大的数据访问编程模式,从而使得大局部数据源可编程的属性得以直接扩展到Active Datase Connetivity（ODBC）兼容的数据库和OLE DB兼容的数据源,这样ASP程序员就可以访问任何与ODBC兼容的数据库,包括MS SQL SERVER Avccess Ovracle等.如果您是一个对数据库连接有一定了解的脚本编写人员,那将发现ADO命令语句并不复杂而且容易掌握,同样地,如果您是一个经历丰富的数据库编程人员,将会正确认识ADO的先进的与语言无关性和查询处理功能.熟悉VB数据库编程的朋友会发现ADO与RDO有某中类似的地方.但是据说ADO的访问的速度更快,内存需要更小.
第三章网站的制作过程
网站主页就好象是宣传栏或者店面——对访问者产生第一印象，都希望尽量给人留下好的印象。
一般来说，好的网站应该给人有这样的感觉：
干净整洁；条理清楚；
专业水准；引人入胜。
3.1网页布局的根本概念
网页根底知识
〔1〕内容的编排与使用
•以醒目为上
•突出重点，力求简洁
•重视文本
•在广度和深度之间求取平衡
•及时更新
构建静态页面
〔1〕构建页面
·插入图像
·插入普通图像
·插入鼠标经过图像
〔2〕使用超链接
•创立超链接的方法
–使用“属性〞面板创立超链接
–使用“指向文件〞按钮创立超链接
•“属性〞面板中拖动“链接〞文本框右边的“指向文件〞按钮，拖动鼠标时会出现一条带箭头的细线，指向链接文件后释放鼠标，即会链接到该文件
·创立下载文件链接
·创立电子邮件链接
·创立图像热区链接
·创立锚点链接
〔3〕使用表格
·插入表格
·设置表格属性
·表格的根本操作
·利用表格布局网页
构建动态页面
〔1〕插入flash动画
•将光标放在插入flash动画的位置
•执行“插入记录〞中“媒体〞“Flash〞命令，在弹出的“选择文件〞对话框中选择制作好的flash文件，点击确定
•选中flash，在“属性〞面板中进展
〔2〕插入flash按钮
·在需要的位置插入一个6行1列的表格
•将光标置于第1行单元格中，执行“插入记录〞中“媒体〞“Flash按钮〞命令
•在弹出的“插入Flash按钮〞对话框中设置
–点击“获取更多样式〞可从网上获得更多的样式
CSS样式表
•使用“CSS样式〞面板
–附加样式表
–新建CSS样式
–编辑样式表
–删除CSS样式
•创立新的CSS样式
–在“CSS样式〞面板底部单击“新建CSS样式〞按钮，在弹出的“新建CSS规那么〞对话框中设置
•选择器类型：
选择“标签〞
•标签：
输入“td〞
•定义在：
选择“新建样式表文件〞
–点击确定，保存新建的样式表，即可创立CSS样式表
·自定义
–选中套用样式的文字，在“CSS样式〞面板中选中新建的样式，单击鼠标右键，在弹出的菜单中选择“套用〞选项
·插入背景音乐
插入-媒体-插件
构建交互式页面
〔1〕表单的使用
•创立表单
–执行“插入记录〞中“表单〞的“表单〞命令
–页面中出现一条红色虚线，选中虚线，在“属性〞面板中设置
·插入单行文本域
·插入密码域
·插入单项选择按钮
·插入复选框
·插入列表和菜单
·插入多行文本域
·插入表单按钮
〔2〕高级表单
•点击“常用〞工具条上的“脚本〞按钮
•在弹出的窗口中设置：
–语言：
test/javascript
–内容：
输入如下代码
–functiontest（form1）
–{
–if（form1.name.value==""）
–{
–alert（"请输入您的姓名"）;
–form1.name.focus（）;
–}
–elseif（form1.shuoming.value.indexOf（'@',0）==-1）
–{
–alert（"说明不正确，请重新输入"）;
–}
–elseform1.submit（）;
–}
•点击确定，在文档窗口中出现脚本图标
•选中“提交〞按钮，在“行为〞面板中将起动作改为“无〞
•点击“行为〞面板中的“+〞按钮，在弹出的菜单中选择“调用JavaScript〞
•在弹出的“调用JavaScript〞对话框中输入函数名“test（form1）〞
•行为默认为“onClick〞
3.7ASP
〔1〕IIS的配置
•配置IIS的虚拟目录
·鼠标右击“默认网站〞，在菜单中选择“新建〞“虚拟目录〞命令，翻开“虚拟目录创立向导〞，单击“下一步〞，翻开“虚拟目录别名〞对话框
·在“别名〞中输入虚拟目录的名称
•点击“下一步〞，在“目录〞中添加文件的物理路径
•点击“下一步〞，翻开“访问权限〞对话框，选中“读取〞、“运行脚本〞和“写入〞选项
•点击“下一步〞，单击完成，此时在“Internet信息效劳〞窗口中可以浏览创立的虚拟目录
〔2〕数据库的根本操作
•启动Access
•点击右上角的“开场工作〞在菜单中选择“新建文件〞
•点击“空数据库〞，在“文件新建数据库〞对话框中设置数据库的名称和保存路径，点击确定
•选择“使用设计器创立表〞
•在翻开的“表1〞中输入关键字段、数据类型，并设置属性，将“UserID〞设置为“主键〞
•设置完成后保存表1，并为表1设置名称
〔3〕登陆与注册模块
–建立工作目录，拷贝数据库
–定义IIS站点
–定义Dreamweaver8站点
–在Dreamweaver8中建立数据库连接
•使用ODBC连接
•使用OLEDB连接：
连接字符串〔Driver={MicrosoftAccessDriver（*.mdb）};DBQ=G:
/03311120/register.mdb;
•
•
•
•
•
•
3.2网页布局的方法
网页布局图
儿童特区
用户注册
甜点制作
儿童特区
家常菜制作
用户意见反应留言
美食制作小贴士
茶道文化
家常菜制作
首页
甜点制作
用户登录
营养知识
儿童特色饭
.2用户登录图
用户注册图
高级表单图
高级表单绿色为背景，主题鲜明
3.3网站首页设计
在此网站的首页我们可以看到许多美食的食谱，还有许多美丽的图片。
给人很好的视觉感。
3.3.1首页页头和导航的设计
本网站的首页由一张简单的动画图组成，给人一种舒服的感觉。
页头上几个大字，让人对本网站的功能一目了然。
网站的导航包含有四个选项分别是美食贴士，甜点制作，家常菜制作，儿童特区，绿色清新，新颖醒目，每个导航都有下拉菜单，鼠标滑过就显现出来
效果图为：
解析：
四个导航栏，鼠标滑过出现下拉菜单链接其他网页
眉头插入背景音乐sleepyday，,轻松愉快···
3.3.2网站正文的设计
网站正文由三大局部组成及右部以及上下部。
其中上部又由二局部组成〔左、右〕，下部由一组闪动的图片组成。
网站的右局部有导航栏。
如左图
解析：
由FLASH按钮组成，链接其他子网页
首页效果图展示为
解析：
插入音乐插件，图片皆为动图，FLASH动画，图片上有热区链接，点击转到其他页面
整体简洁，一目了然，方便观看，以绿色为主题，代表安康清新天然的美食，贴切自然
3.3.3网站分网页的设计
解析：
眉头由FLASH精巧动画构成，
文字套用CSS，并有锚点连接！
解析：
眉头由FLASH精巧动画构成，文字套用CSS，并有锚点连接！
套用层
3儿童特区
运用了时间轴，图片均由PS或美图秀秀处理过的动图，文字套用层，清新简洁得意
4营养知识
解析：
运用了时间轴，以青白色彩，清新自然，文字套用CSS层，并有锚点连接
5茶道文化
青色为背景，符合茶的给人清新的感觉，图片精巧，讲解详细，文字套用CSS层，并有锚点链接。
第四章网站制作的常见问题
4.1常见问题的解析
网站中常见的问题有：
〔1〕为什么网站的首页文件名一般命名为index.htm或index.asp？
网站的首页文件名为index.htm或index.asp，这是一种网站首页命名标准。
在浏览器地址栏输入网址，即使不输入index.htm或index.asp，浏览器也能正确找到该文件并正确显示出来，因为Web效劳器默认的首页文件名是index.htm或index.asp。
此外，通过设置，Web效劳器常用的默认首页文件名格式有index.htm、default.htm、index.asp、default.asp等。
〔2〕巧妙设置分辨率
在制作网站时，有时会发现，制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时却发现网页的布局乱套了，这是因为各个计算机的分辨率不同所致。
在Dreamweaver文档窗口中的右下角，显示当前文档的分辨率大小。
单击当前分辨率数字，在弹出的菜单中可以为当前的页面指定显示分辨率，通过修改可以使网页更具灵活性。
〔3〕翻开文件及插入网页图像的快速方法
在Dreamweaver里，进展网页编辑时，不必通过菜单栏里的【翻开】命令来翻开文件，一个更快的方法是利用【文件】面板，翻开相关文件，直接用鼠标拖动文件到文档编辑窗口即可；同样，要在网页上插入图像等元素，也可直接通过【文件】面板将图像文件拖动到网页上。
〔4〕怎样仅仅复制文字而不想要其格式？
当从Dreamweaver中复制文字到另一个应用程序中时，HTML代码和文字一起被复制过去了。
此时一般都用快捷键【Ctrl＋C】来复制，如果在复制的时候多按一个【C】键那么只复制选中的文字。
从外部文档中粘贴时，如果只要文字而不想要其格式，可以选择菜单中的【编辑】︱【粘贴文本】命令，不要直接用快捷键【Ctrl＋V】。
〔5〕如何巧妙隐藏标签？
如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一个与之相应的元素标签，以便于选择不可见元素。
但如果不想显示时，也可以隐藏标签，方法是按【Ctrl＋U】键翻开【首选参数】对话框，在【分类】中选中【不可见元素】，在面板的右边将会出现所有的元素标签。
只要将不需要的元素标签前的勾去掉，以后它就不会再出现了。
〔6〕Dreamweaver自动创立样式功能
文本属性面板可以设置当前所选文本的样式和格式。
使用属性面板设置文本样式和格式时，Dreamweaver将跟踪为每个文本元素指定的格式属性，并使用命名约定为每个元素指定一个标签：
Style1、Style2、Style3、……、Stylen。
如果将同一格式属性指定给两个或更多文本元素，Dreamweaver将使用一样的标题标记这些元素，消除冗余的样式名称。
〔7〕字体【格式】与【大小】有什么区别？
在【文本】属性面板中，【格式】与【大小】都可以设置字体大小，但二者有一定的区别，选择【格式】，字体改变大小的同时变为粗体；如果只想改变文字大小，而不想让字体变为粗体，可以用【大小】属性。
此外，【大小】只对选中文本起作用，而【格式】对整段文字起作用。
〔8〕为何我无法在文字中输入多个空格字符？
在做网页的时候，有时需要输入空格，但在有些时候却无法输入，导致无法正确输入空格的原因可能是输入法的错误，只有正确使用输入法才能够解决这个问题。
解决的方法有以下几种。
●切换到代码视图，在需要添加空格的位置，输入代码 ，就会出来空格，输入几次代码就会出来几个空格。
●如果使用智能ABC输入法，按Shift+空格键，这时输入法的属性栏上的半月形就变成了圆形，然后再按空格键，空格就出来了。
●切换到【文本】插入栏，在【字符】下拉列表选择【不换行空格】选项，就可直接输入空格。
〔9〕为什么在Dreamweaver中按Enter键换行时，与上一行的距离却很大？
在Dreamweaver中按Enter键换行时，与上一行的距离却很远这是因为按下Enter键时默认的是一个段落，而不是一般的单纯的换行所造成的。
因此假设要换行，那么先按下Shift键不放，然后再按下Enter键，这样两行间的距离就不会差一大段了。
〔10〕如何使用3种类型的CSS样式？
CSS样式表在网页制作中一般有3种方式的用法，那么具体在使用时该采用哪种用法呢？
当有多个网页要用到CSS，采用外联CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页中使用的CSS，采用文档头部方式；只在一个网页一两个地方才用到的CSS，采用行内插入方式。
第五章完毕语
5.1全文总结
总而言之，这次作业使我改善了自己的缺乏，我会好好努力，使之成为我自己的知识。
也让我把学会的东西更加熟练地掌握，更为熟练的应用。
我会将不断完善，不断改进自己在论文完成之际，我的心情无法平静，从开场进入课题到论文的顺利完成，教师，同学、朋友给了我很多的帮助，在这里请承受我诚挚的谢意。
致谢
【本文档内容可以自由复制内容或自由编辑修改内容期待你的好评和关注，我们将会做得更好】
升级会员 