网页设计与制作项目教程项目3 “网上花店”专题页制作

网上花店网页设计摘要随着因特网技术的迅速发展，各种各样的网站已经深入到日常生活的各个角落，越来越多的公司都建立了自己的网站，电子商务大行其道，个人网站也如雨后春笋般的发展起来。

因特网的发展状况可以用日新月异来形容，通过电子商务来完善对商品的采购就给人们的生活带来了很多方便。

它节省了物流消耗和一般商务对时间和地点的依赖。

在这种形式之下，购买鲜花的人越来越多，也越来越广，全国各地都有购买者。

这么大的一个市场，只是利用实物店铺是远远不够的，虽只能满足本地消费者的需求，但却不能面向远处的消费者需求。

为了迎合市场的需求，为了开拓市场提高自身在同行中的竞争能力，开发一个网上鲜花销售系统也是很有必要的。

本网上花店系统，主要实现的功能是：实现用户在线注册功能、登录功能、查询功能、购物车功能、定单等。

在后台能实现管理员的登录、管理员对商品的分类发布、商品的管理、用户信息的管理、订单管理、管理员管理等。

真正实现从商品的发布到商品的购买一系列的网上销售鲜花的功能。

本系统基于Internet的互联网网络，以B/S形式实现的。

本系统是采用ASP技术，以ACCESS作为数据库，使用Dream wear MX 作开发平台，利用网络来实现网上销售鲜花的功能性网站。

具有最大的优点是，界面优美，可视性强，设计成本投入性小，利润见效快，系统安全性好，系统维护与管理方便快捷，目标明确，可操作性强等特点。

网上鲜花销售管理系统主要以实现在线销售鲜花为主。

全部的设计这以此为核心来展开。

从商品发布，到商品的销售；从用户的注册，到商品的购买等等都是围绕销售而展开的，以达到网上鲜花销售的方便与快捷。

关键词：网上鲜花销售，订单，在线注册，购物车Web design of flowers shop onlineAbstractThe modern age is the knowledge time, also is the competitive time, the survival of the fittest. In order to strengthen own knowledge and the technical level, we on unceasing buy the flower "the charge”, enriches oneself state-of-art. Under this kind of form, more and more people purchase flowers, also is more and more broad, each place all has the buyer. As a big market, only is the use in kind shop is by far insufficient, although only can meet the local reader’s need, but actually cannot face the distant place the reader demand. In order to cater to the market the demand, in order to develop the market to enhance oneself in colleague's competitive ability, develops an on-line flowers sales system also has the necessity very much.This on-line flowerstore system, the main realization function is: Realization user on-line registration function; Registers the function; Inquiry function; Shopping vehicle function; Order form and so on. Can realize manager's registering in the backstage; Manager to commodity classified issue; Commodity management; User information management; Order form management; Manager management and so on. True realization from commodity issue to commodity purchase a series of on-line sales flowers function.This system based on Internet network, by B/S form realization. This system uses the ASP technology, to ACCESS takes the database, uses Dream wear MX to do develop the platform, and realizes the on-line sales flowers function website using the network. Has the biggest merit is, contact surface exquisite, invisibility strong, design cost investment small, profit effective quick, system security good, system maintenance and management convenience quick, the goal is clear about, but operational is strong and soon the characteristic.The on-line flowers sale management system management system mainly realizes the on-line sales flowers primarily. Complete design this launches take this as the core. Issued from the commodity, to commodity sale; From user's registration, and so on all is revolves to the commodity purchase, achieves the on-line flowers sale which the sale launches the convenience and quickly.Keywords：On-line flowers sale, Order form, On-line registration, Shopping cart目录1 绪论 (1)1.1网上花店系统的设计背景 (2)1.2网上花店系统开发工具简介 (2)1.2.1 ASP程序设计语言特点介绍 (3)1.2.2 Access数据库及其特点简介 (3)1.2.3 Dreamweaver开发工具及其特点介绍 (4)2 需求分析与总体设计 (6)2.1需求分析的基本任务 (6)2.2网上花店系统需求分析 (6)2.2.1 系统业务流程分析 (6)2.2.2 数据流程分析 (8)2.2.3 数据字典 (9)2.3系统总体设计 (12)2.4网上花店系统的总体结构设计 (13)2.5系统开发工具 (15)3 系统网络数据库的建立 (16)3.1系统数据源的设置 (16)3.2表、关系模型和数据库的概述 (17)3.3范式与建立表格的规范化 (18)3.4系统数据库的详细建立 (19)3.4.1 用户信息数据表（RegUser） (19)3.4.2 管理员信息表（Manage_User） (19)3.4.3 商品大类表（Class_1） (20)3.4.4 商品小类表（Class_2） (20)3.4.5 商品表（Product） (20)3.4.6 购物车表（Shop List） (21)3.4.7 订单表（Order List） (21)4 主要功能详细设计 (22)4.1客户端主要功能的实现 (22)4.1.1 主页面设计 (22)4.1.2 购物车功能的实现 (22)4.1.3 会员注册功能的实现 (26)4.1.4 商品查询功能的实现 (29)4.1.5 订单查询功能的实现 (30)4.2后台管理主要功能实现 (31)4.2.1 商品添加功能的实现 (32)4.2.2 商品审查功能的实现 (39)4.2.3 订单审查功能的实现 (42)4.2.4 会员审查功能的实现 (44)4.2.5 管理员添加功能的实现 (45)4.2.6 管理员审查功能的实现 (46)5 系统的配置安装与测试 (48)5.1后台服务器和数据库配置 (48)5.1.1 后台服务器配置 (48)5.1.2创建ASP应用程序 (48)5.1.3 后台数据库的配置 (49)5.2系统的测试 (50)5.2.1 软件测试的目标 (51)5.2.2 系统的具体测试 (51)结论 (52)参考文献 (53)致谢 (54)1 绪论在Web的空间里，几十万乃至几百万的站点相互进行着激烈的竞争，都想获取用户的主意。

web鲜花网站课程设计一、课程目标知识目标：1. 学生能理解并掌握网站设计的基本概念，包括网页结构、样式表和客户端脚本。

2. 学生能够了解和使用HTML5和CSS3的常用标签和属性，设计出结构合理、样式美观的网页。

3. 学生能够掌握基础的JavaScript编程，实现简单的交互功能。

技能目标：1. 学生能够独立完成一个简单的web鲜花网站的设计和开发，包括主页、产品展示页和联系页等。

2. 学生能够运用所学知识解决网站开发过程中遇到的问题，如布局调整、样式兼容性问题等。

3. 学生能够通过团队协作，有效沟通，共同完成项目任务。

情感态度价值观目标：1. 培养学生对于网站开发的兴趣和热情，激发他们的创造力和创新意识。

2. 培养学生具备良好的审美观念，注重网站的美观性和用户体验。

3. 培养学生具备合作精神，学会分享和尊重他人的意见，共同进步。

本课程针对高年级学生，他们在前期课程中已经掌握了计算机基础和网络知识，具备一定的编程能力。

课程性质以实践为主，理论为辅，注重培养学生的动手能力和解决问题的能力。

教学要求强调理论与实践相结合，以项目驱动的形式进行教学，使学生在实践中不断巩固和拓展所学知识，提高实际操作技能。

通过本课程的学习，希望学生能够具备独立开发简单网站的能力，为将来的学习和工作打下坚实基础。

二、教学内容本课程教学内容主要包括以下几部分：1. 网站设计基础知识- 网页结构、样式表和客户端脚本的概念及作用- HTML5和CSS3的常用标签和属性2. 网站设计实践操作- 网站结构规划与设计- 布局与排版技巧- 响应式设计原理及实践3. JavaScript编程基础- 数据类型、变量和运算符- 控制结构与函数- 事件处理与DOM操作4. 项目实战：web鲜花网站开发- 网站需求分析与功能规划- 页面设计与实现- 交互功能开发与调试教学内容安排与进度：1. 第1-2周：网站设计基础知识学习，了解HTML5和CSS3的基本用法2. 第3-4周：布局与排版技巧，掌握响应式设计方法3. 第5-6周：JavaScript编程基础，学习事件处理与DOM操作4. 第7-8周：项目实战，分组进行web鲜花网站的设计与开发5. 第9-10周：项目总结与展示，相互评价与反馈本课程教学内容与课本紧密关联，以《Web前端开发技术》教材为基础，结合实际案例进行教学。

web鲜花网站课程设计一、课程目标知识目标：1. 学生理解Web前端开发的基本概念，掌握HTML、CSS和JavaScript的基础知识。

2. 学生能够运用所学知识构建一个功能齐全的鲜花网站。

3. 学生了解网站设计的基本原则，掌握网站布局、色彩搭配和用户体验的基本技巧。

技能目标：1. 学生熟练运用HTML搭建网站结构，使用CSS进行页面样式设计和布局调整。

2. 学生掌握JavaScript的基本用法，实现网站的动态交互效果。

3. 学生能够运用调试工具进行网站调试，解决常见的问题。

情感态度价值观目标：1. 培养学生团队协作精神，提高沟通与协作能力。

2. 激发学生创新思维，培养独立思考和解决问题的能力。

3. 引导学生关注用户体验，提升对美的感知力和审美素养。

课程性质：本课程为信息技术课程，以实践操作为主，注重培养学生的动手能力和实际应用能力。

学生特点：学生为初中年级，对新鲜事物充满好奇，具备一定的计算机操作基础，喜欢动手实践。

教学要求：教师需结合学生特点，采用案例教学、分组合作等方式，引导学生掌握Web前端开发技术，培养其独立构建网站的能力。

在教学过程中，注重理论与实践相结合，关注学生的个性化发展，提高其信息技术素养。

通过本课程的学习，使学生能够将所学知识应用于实际生活，激发其继续探索信息技术的兴趣。

二、教学内容1. 网站基础知识：介绍Web前端开发的基本概念，包括HTML、CSS和JavaScript的作用和关系，引导学生了解网站的工作原理。

教材章节：第一章 网站基础知识2. HTML基础：讲解HTML的基本语法，标签的使用，网站结构的搭建。

教材章节：第二章 HTML基础3. CSS样式设计：介绍CSS的基本用法，包括选择器、样式属性、布局技巧等，使学生掌握网页美化的方法。

教材章节：第三章 CSS样式设计4. JavaScript基础：讲解JavaScript的基本语法，函数、事件处理等，引导学生实现网页的动态交互。

《网页设计》课程标准一、课程定位《网页设计》是虚拟现实应用技术专业的专业学习领域课。

该课程实现Web程序开发知识、方法及工具，着重介绍在Web开发过程用到的HTML5基础知识，用于美化Web页面的样式表知识。

是一门用途广泛、前景良好的计算机行业课程，是适应计算机虚拟现实应用技术专业课程的需要。

该课程的学习可为后续《JavaScript脚本语言》等课程奠定一定的职业能力基础。

二、课程目标通过《网页设计》课程的学习，使学生具备Web应用开发的基本知识，为学习和掌握专业知识和职业技能打下基础。

1．知识目标（1）理解网站的基本概念和HTML5网页编程语言基础；（2）掌握搭建开发环境、网站的搭建（3）掌握HTML5中文字和段落的设置和常用标签；（4）掌握列表标签的使用；（5）掌握超级链接标签的使用；（6）掌握表格标签的设计和使用；（7）掌握框架页面布局；（8）掌握表单的设计；（9）掌握网页中多媒体的应用；（10）掌握层叠样式表CSS3的基本知识；（11）掌握一到多款网页设计软件的运用。

2．能力目标（1）能运用HTML5标签设计网页；（2）能使用CSS3设计网页；（3）会网页设计工具设计网页。

3．素质目标（1）具有自我学习的能力；（2）具备规范化、标准化的代码编写习惯，一定速度的代码编写能力；（3）养成忠于职守、认真负责、精益求精的敬业精神；（4）具备良好的沟通能力；（5）具备良好的团队合作精神以及自我展示能力。

三、课程设计1、设计思想（1）教学内容框架课程按照以能力为本位，紧密围绕在使用HTML5标签，利用CSS3 +DIV布局制作网页过程中遇到的实际需要和应该掌握的技术，全面介绍HTML5标签设计网页的内容和技巧。

（2）总体设计思路以完整的网页制作工作过程为导向，重构教学内容。

根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力素质要求，按照网页设计与制作的过程和学生的学习认知规律，打破原有的功能化知识体系，对教学内容从简单到复杂，从入门到深化进行科学安排，循序渐进的实现教学目标，课程内容与项目开发内容一致，理论与实践一体化，实现学习和工作的深度融合。

《网页设计与制作》《网页设计与制作》第三章制作页面3.1实例：制作一个旅游网站该网站实例包含了若干个网页，在网页中添加文本、插入图像、建立超链接，涉及到的知识点有以下几点：页面属性的设置及文本的修饰；插入图像，插入图像对象实现特效；多个网页之间建立超链接。

“修改”菜单>“页面属性”命令，或单击“属性”面板中的“页面属性”按钮。

弹出“页面属性”对话框：外观选项卡：设置背景颜色及背景图像，另外还可设置文本\链接\访问过的链接\活动链接\页边距等。

标题/编码选项卡:设置网页的标题，输入请到西部来旅游。

显示在浏览器的标题栏中,如果未定义,则显示为“UntitledDoc ument”编码选项卡：选择文档编码。

跟踪图像选项卡：跟踪图像是为网页排版的一种辅助手段，在HTML文档不显示。

选择跟踪图像的路径及不透明度。

3.3文本的修饰操作文本是最基本的网页制作技能，例如：字体的修饰、段落的对齐方式等。

输入和修改文本软回车（换行，shift+回车键）和硬回车（另起一个自然段）输入连续的空格：切换到中文全角状态；或是在源代码中输入“&nb sp”或是在插入栏中“字符选项”中单击“不换行空格”按钮输入特殊字符插入栏中文本选项中的“字符”选项，单击要输入的字符。

另外还有一种方法，利用WORD进行特殊字符的输入，并通过WORD可获得大量文本内容。

选择、复制、移动文本拷贝HTML，直接将文件的HTML源代码拷贝至剪贴板。

CTRL+Z是撤消,CTRL+Y重做检查拼写错误：文本菜单|“检查拼写”命令。

查找和替换文字“编辑”菜单|“查找和替换”命令设置文字属性选中文本，在“属性”面板进行文字的设置,或是使用插入栏|“文本”选项中的某个按钮进行修饰；更多的可选择“文本”菜单|“样式”命令进行修饰。

设置段落选中文本，“属性”面板中,对段落进行修饰,对齐方式、文本缩进等.列表(有序列表\无序列表)选中文本，在“属性”面板中,单击“列表”按钮,再单击列表项目，弹出“列表属性”对话框，对列表进行样式的修饰.建嵌套列表:进行文本缩进,输入嵌套列表.3.4设置超级链接超链接是组成网站的基本元素，通过超链接将多个网页组成一个网站，浏览者通过超链接选择阅读路径。