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