1、题 目： 服装网站的设计与实现 专 业： 计算机网络技术 I摘要在当今的信息化产业时代，Internet 迅速发展的今天，网络已经普及到世界各个领域，在如今的大中型商业网当中，构建商业网用以方便顾客选购和了解。而能够构建一套完整而又简练的商业网设计方案，已经成为当今所有的网络公司发展的客观需要。因此，一套完善的商业网设计方案，能够帮助社会，发挥其最优质的选购服务。本系统是运用 ASP技术开发，实现了网站的动态管理，使得对信息的管理更加及时、高效，提高了工作效率，具有一般网站系统的功能，主要包括前台管理和后台管理，可为服装网站提供新闻发布与管理的服务。前台管理给浏览者更多的视觉冲击和空间想象力，
2、内容和版式、颜色、系统有自己的风格；后台管理具有简单易用、功能强大，性价比高、扩展性好，安全性高、稳定性好的系统。【关键词】ASP、网页设计、DreamweaverAbstract：In todays information industry era, the rapid development of the Internet today, the network has spread to world each field, in todays large and medium-sized business network of building business network for t
3、he convenience of our customers choose and buy and understanding. And can build a complete set and succinct business network design, has become the most all of the network company of the objective need of development. Therefore, a set of perfect business network design,can help the society, play the
4、 most the choose and buy of high quality service.This system is using ASP technology development, realize the dynamic management of the web site, which makes the information management more timely, efficient, and improve work efficiency and a general web site the function of the system, including th
5、e front desk management and management background, but to the clothing web site provides news release and management service. Front desk management to your visitors more visual impact and space imagination, the content and format, the color, the system has its own style; Background management has si
6、mple to use, powerful, high performance/price ratio, scalability, good, high security, stability, and good system.【 key words 】 ASP, web design, DreamweaverII目 录1 引言 - 1 -1.1 课题背景 - 1 -1.2 本课题的国内外研究背景 - 1 -2 网站设计 - 1 -2.1. 网站建设的意义及规则 - 1 -2.2. 网站建设的目的 - 2 -2.3. 文件的设置 - 2 -3 技术综述 - 2 -3.1 技术概论 - 2 -3
7、.2 系统功能概述 - 3 -3.3 系统框架图 - 3 -3.4 页面风格设计 - 4 -4 系统调试与测试 - 6 -4.1 程序调试 - 6 -4.2 程序的测试方法 - 6 -4.3 Dreamweaver 测试站点和用 IIS 测试本地站点 - 6 -5 总结 - 7 -6 附录：本系统的功能特色 - 7 -参 考 文 献 - 8 -致谢 - 9 - 1 -1 引言1.1 课题背景伴随着计算机技术在各行各业日益广泛和深入的应用，网络的概念早已深入人心。由于 web页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便，客户信息反
8、馈方便了企业与客户之间信息交流，因此服装企业纷纷建设具有自己独特风格的网站，以增强企业知名度企业建立网站。因此，对于一家服装商店来说，拥有一个属于自己的网站是至关重要的。在构建服装网站的过程当中，网站内容的前期设计是不可缺少的一项，本文中，首先会探讨到一些该网站的功能，简要的阐述一下网页的 Logo设计和网页的 Banner设计，因为网页的前台美观设计部分不属于该论文的探讨范围之内。在构建的主要内容，首先会涉及到数据表的结构设计 3。之后，文章中会详细的介绍该服装网站中的代码的编写内容，每一个细节环节都会被纳入之内。在整个网站完成设计之后，会有相关的测试工作，以便更加的使得网站的正常运营。文中
9、会合理地运用 ASP的相关语法、关键字的功能以便构建出相对完善的服装网站。1.2 本课题的国内外研究背景目前国内商业网站自身的确存在不少问题，主要表现在：第一，规模小、联系不紧密，处于各自为政的分散状态；第二，国内网站在首页页面上通常会放置太多内容，也存在很多广告，使整体版面过于杂乱；第三，安全性低。国内只有交易、银行等网站才会注意到安全连接的问题。相比而言，国外许多网站的设计都很时尚和有自身的特点，行业明确，功能全面，安全性高等。举例说明：欧美用户不习惯艳丽、花哨的色彩和设计风格，他们比较钟情于简洁、平淡而严谨的风格；国外传统网站比较讲究网站的实用性和便利性，他们会花很多时间去制作很多周到实
10、用的细节，功能虽然大多平实但很有效。而韩国网站设计在世界也是相当有影响力的。韩国的商业站点在框架结构、内容排版、色彩搭配、图片运用上达到了非常和谐的统一，设计师拥有较大的设计空间。2 网站设计2.1. 网站建设的意义及规则(1) 系统建立友好的界面，既能操作简单、直观、灵活，又易于学习和掌握。(2) 系统应一、提供对外查询发达接口，方便友好查询。(3) 系统在友好输入管理员姓名、管理员密码时，应具有自动识别的功能，以帮助友好改正错误。(4) 系统在却确定用户和密码后，应具有自动连接数据库的功能。 命名规则：全部文件名均用小写，以便日后整个网站升级之用，按英文缩写简称名文件和目录；文件名按日期划
11、分，所有图形文件的后缀用*.gif 或*.jpg；页面的标题、文字、图案排列整齐并保持所要求的风格，整个制作有专业美工的创意；图像需要作适当的 PS处理，调整好适当的尺寸；美化图片上不必要的图片文字解释；各页面不能添加无关的信息，不将空链接挂在各页面上；页面的后台数据库统一使用 MS-SQL。- 2 - 推广：将网站登陆各大中英文搜索引擎，由于首页使用 menu，使上网的人更容易通过输入关键字可以找到网站的 URL及首页。适当在国内知名的 ICP（如：搜狐、网易等）投放文字链接或广告条。通过不定期的推广活动，如商品有奖活动、对商品有优惠等提高网站知名度。2.2. 网站建设的目的建立一个高效率、
12、低成本的网络以满足顾客日益增长的需求是设计这个网络的目标，为此必须对用户的需求做详细的调查。1网页浏览用户通过自己的 PC上的浏览器方便地浏览网页，从而获取信息，这是商业网对终端用户最直接的作用，固定内部 IP地址，免去许多不必要的操作，方便网管对内部用户的控制和管理，而且能起到网络安全控制的作用；另外通过应用层代理网关，使内外以防火墙为界，既可保证内部访问网站的健康性，有可以直接在服务器上过滤外来的侵入。 2.资源共享资源共享指的是顾客利用奇缘电子器材网提供的空间，可以浏览自己所需要的资源。这就要求有对共享资源读、写、编、删的操作和与该用户相应的验证机制，以便用户查看相关资源，公司专门设置一
13、个 FTP站点，用户通过验证即可对资源空间进行查看。网站的目标定位，做好网站的资源共享与顾客的放心使用，是公司的首要任务。网站的功能定位：公司简介 产品展示 留言板等本网站是面向广大顾客的方便采购的资源网站，网站的价值取向是“一切为了顾客” ，充分发挥了顾客购物方便快捷的宗旨。2.3. 文件的设置1在网站根目录中开设 images一个子目录，根据需要再开设 images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等。在 media子目录中放flash，ps 等多媒体文件，2文件数量不多，可将所有的文件都和 images放在同一文件夹里，文件数量比较多
14、了，原则上就应该在根目录中按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个 images 和 media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。3除非特殊情况，目录、文件的全部用小写英文字母、数字、下划线的组合，其中不得包括汉字、空格、和特殊字符，目录的命名应尽量用英文，不到万不得已的时候不要以拼音为目录名称，根据经验，用拼音命名的目录往往过几个星期之后自己都看不懂。3 技术综述3.1 技术概论网站实现方式有两种：一种是静态 HTML页面，更新信息时需要重新制作页面然后上传页面并修
15、改相应链接；另一种是基于 ASP和脚本语言，将动态网页和数据库结合，通过应用程序来处理页面。前台开发工具应用 ASP、Dreamweaver、flash 动画等，建立富有动态效果的网站。后台应用 Access建立数据库，进行数据管理，保持数据的完整性。- 3 -1. Dreamweaver网页编辑站点的设计和页面创建；网页布局模式：对称形、T 形、口字形、海报形；界面的组成：对象工具栏、属性面板、发射器；版面设计工具：表格、框架、模板 ；效果设计：层、时间轴、行为的运用。2. Flash网页动画设计 a) 网页动画与时尚动画（渐变动画、逐帧动画） ；b) Flash界面构成模式（工具及控制面板
16、的使用） ； c) 网页交互按钮的设计：变幻按钮、隐形按钮；d) 效果实例：引导层（滚动广告栏） 遮盖层（水波飘浮文本）行为的运用（鼠标跟随、运动背景的设定） ； e) Flash文件的导出模式：HTML、影片、Auto if。3. Photoshop网页图像处理（1） Photoshop基础：功能、界面组成及应用 ；（2） Logo（标志） 、banner（广告条） 、导航栏、按钮、艺术文本的制作； （3） 图片输出处理：切片、优化 ；（ 4） Photoshop文件导出模式：PSD、GIF、JPEG、Auto if。3.2 系统功能概述在前台管理部分可以分为五个信息浏览功能窗口，分别是“首
17、页” 、 “促销信息” 、 “品牌风格”、 “服装展示” 、 “新闻资讯 ”、 “客户服务” 和“登录注册”这六大功能。关于首页中主要介绍了关于品牌的基本信息；品牌故事主要介绍企业的创立过程；品牌风格主要介绍服装风格定位、年龄定位、顾客层次定位；服装展示向浏览者介绍公司开展的主要服装范围和品牌类型；新闻资讯主要是用于浏览公司发布的最新新闻和与企业相关的重要新闻；客户服务主要是收集关于客户需要的服务要求和建议的提交信息；登录注册主要是用于会员注册。管理员操作部分：本网站的主要信息都可以通过后台管理来进行管理。后台管理主要包括新闻管理、产品管理、基本信息、管理员管理、用户注册这五个部分。新闻管理是
18、网站的新闻发布管理系统；产品管理是根据商品的分类来对商品进行添加、修改和删除管理；基本信息用来对网站的客户提交意见信息进行处理；管理员管理是用来对后台管理员进行权限分配管理和添加后台管理员的操作；用户管理是用来对前台用户所注册的资料进行修改与删除操作；用户注册包括注销登陆和修改密码两个部分。3.3 系统框架图1. 前台系统框架图，如图 3-1图 3-1 前台系统框架图2. 后台系统框架图，如图 3-2- 4 -图 3-2 后台系统框架图3.4 页面风格设计本网站为了拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目，网站风格可以从以下几个
19、方面说明，而每一项都是有关联性的： 1. 色系：网页的底色、文字字型、图片的色系、颜色等等。2. 排版：表格、框架的应用、文字缩排、段落等等。3. 窗口：窗口效果，例如：全屏幕窗口、特效窗口等。4. 程序：网页互动程序，例如：ASP、PHP 、XML 、CGI 等等。5. 特效：让网页看起来生动活泼的各种应用，如：Flash、JavaScript、Java Applets、DHTML 等等。6. 架构：目录规划、层次浅显易懂、选单应用等等。7. 内容：网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。8. 走向：对于网站的未来规划、网站整体内容走向等。 以上这些项目都与网页
20、风格有密切的关系，网页的风格不是某一项相同，网站就是有整体感，而是要各项目的配合应用，才能达到完美的网站风格设计。图 3-3为好依丽服装网站的首页，图 3-4为好依丽服装网站的后台登录界面，图 3-5为服装网站的后台界面。- 5 -图 3-3 好依丽 服装网站首页图 3-4 服装网站后台登录界面- 6 -图 3-5 服装网站后台界面4 系统调试与测试 4.1 程序调试 很多人在编写网页程序的时候用的是 Dreamweaver，直接用记事本也大有人在，没有专门的开发环境就给程序的调试增加了难度，不像许多高级语言那样直接就可以在开发环境中运行、调试，但是我们可以拿浏览器来充当网页程序的调试工具，或
21、者使用 ASP专业调试工具。4.2 程序的测试方法 1. 链接测试：所有链接是否按指示的那样确实链接到了该链接的页面，所链接的页面是否存在；测试工具：HTML Link Validator2. 表单测试：确保提交按钮能正常工作；3. Cookies测试：检查 Cookies是否起作用；如果使用 Cookies来统计次数，验证次数累计正确；4. 数据库测试：一致性错误和输出错误。一致性错误主要是由于用户提交的表单信息不正确而造成的，而输出错误主要是网络速度或程序设计等问题等引起的；5. 导航测试：是否易于导航；导航是否直观；主要部分是否通过主页存取；6. 图形测试：图片尺寸要尽量地小；验证所有页
22、面字体的风格是否一致，要确保图形有明确的用途。4.3 Dreamweaver 测试站点和用 IIS 测试本地站点Dreamweaver MX提供了全面检测站点的功能，它比检测链接更全面。全面地检测内部、外部链接、去除错标签、空标签、多余的标签等，它的使用相当简单，使用全面检测站点功能如下：1. 对工作流方面的信息进行检测；对 HTML文件的信息作出检查；- 7 -2. 把制作好的网站文件复制到 D:wampwwwshop090242 文件夹中，可以打开浏览器，在地址栏中输入 http:/localhost/shop090242/就会看到网站了。5 总结这次服装网站开发制作过程，综合使用了目前因特网上比较流行的各种静态制作方法及交互式动态网站的制作设计手段，并对初步理由后台程序完成了网站的动态响应与生成网页的技术。同时也从中学习了对静态网页的处理风格，色彩搭配，页面导航方面有了一定经验。在交互式网页设计学会了如何使用 Access简历数据库，以及对数据库浏览，修改，添加，查询。如何用 ASP编写程序来方便用户在网上查看网站各方面的信息和交流。由于设计网站的经验不足，在网站的整体设计及各模块功能可能设计的不够完全，有待于进一步的完善和改进。6 附录：本系统的功能特色
