html 西式甜品网制作

合集下载

基于Web的网上蛋糕订购系统的设计与实现

基于Web的网上蛋糕订购系统的设计与实现摘要:随着现代信息技术的极快发展，互联网技术的普及，传统线下订购蛋糕模式不能满足市场的需求。

为了跟上互联网经济的发展,网上蛋糕订购系统应运而生。

本文主要采用Java、JSP、MySQL 等技术，设计并实现了一个基于B/S模式的网上蛋糕订购系统。

本系统主要分用户模块和管理员模块。

管理员模块主要实现商品更新、处理顾客订单、管理顾客信息等功能。

用户模块主要是浏览、购买蛋糕等功能。

该系统可以在当今时代满足顾客购买蛋糕方便快捷的需求。

关键词：网络购物；蛋糕订购系统；JavaAbstract:With the rapid development of the modern information technology and the popularity of internet technology, the traditional offline ordering cake model cannot meet the needs of the market. In order to keep up with the development of the internet economy, online cake ordering system came into being. In this paper, the technologies of the Java, JSP and MySQL are used to realize an online ordering cake system which is based on the B/S mode. The system is mainly divided into user modules and administrator modules. The administrator module mainly realizes the function of updating product, processing customers' orders and managing customers' information. The user module mainly realizes the function of browsing and buying cakes. The system can meet the needs of customers in buying cakes in the current era.Key words：Online shopping; Cake ordering system ;Java目录摘要 (I)Abstract (I)目录............................................................................................................................................... I I 1绪论 (1)1.1 研究背景及意义 (1)1.2 研究手段 (1)1.3 系统开发环境与相关技术 (1)1.3.1 Java简介 (2)1.3.2 JSP简介 (2)1.3.3 MySQL简介 (2)1.4 本文结构 (2)2 系统分析 (3)2.1 可行性分析 (3)2.1.1 技术可行性分析 (3)2.1.2 经济可行性分析 (3)2.1.3 社会可行性分析 (3)2.2 需求分析 (4)2.2.1 系统需求分析 (4)2.2.2 系统性能要求 (5)2.3 系统流程分析 (5)2.3.1 前台流程分析 (6)2.3.2 后台流程分析 (6)3 系统设计 (7)3.1 系统功能模块设计 (7)3.2 数据库设计 (7)3.2.1 系统E-R图 (8)3.2.2 数据表设计 (9)4 系统实现 (11)4.1 前台销售页面实现 (11)4.1.1 登录注册模块实现 (11)4.1.2 用户搜索功能模块实现 (13)4.1.3 购物车功能实现 (13)4.1.4 订单功能实现 (14)4.2 后台管理模块的实现 (14)4.2.1 后台登录实现 (14)4.2.2 后台商品管理功能实现 (15)4.2.3 后台订单管理功能实现 (16)5 系统测试 (17)5.1 测试目的 (18)5.2 测试方法。

蛋糕店网页课程设计

蛋糕店网页课程设计一、课程目标知识目标：1. 让学生掌握网页设计的基本概念和原理，包括网页结构、布局和样式表的运用。

2. 培养学生运用HTML和CSS相关知识，完成一个具有基本功能的蛋糕店网页。

3. 使学生了解网络营销策略，并能将其应用于蛋糕店网页设计中，提高网页的吸引力。

技能目标：1. 培养学生运用网页制作软件（如Dreamweaver）进行网页设计和布局的能力。

2. 培养学生运用Photoshop等图像处理软件进行网页图像处理和美化的能力。

3. 提高学生的团队协作和沟通能力，通过分组合作完成课程项目。

情感态度价值观目标：1. 培养学生对网页设计的兴趣和热情，激发他们的创造力和想象力。

2. 培养学生的审美观念，提高他们对网页美工和用户体验的认识。

3. 引导学生关注网络营销策略，培养他们的商业意识和市场洞察力。

课程性质：本课程为信息技术与商业营销相结合的实践性课程，注重培养学生的实际操作能力和团队协作能力。

学生特点：六年级学生具有一定的计算机操作基础和审美能力，对新鲜事物充满好奇心，喜欢动手实践。

教学要求：结合学生特点和课程性质，注重理论与实践相结合，以项目为导向，引导学生主动参与，提高他们的实际操作能力和解决问题的能力。

通过课程学习，使学生能够独立完成一个具有吸引力的蛋糕店网页设计，并具备一定的网络营销意识。

二、教学内容1. 网页设计基础知识：包括网页的结构、布局、色彩搭配和字体选择等基本概念。

- 教材章节：第一章网页设计概述- 内容：网页的基本结构、网页布局方法、色彩搭配原则、字体选择与应用。

2. HTML和CSS基础：教授HTML标记语言和CSS样式表的运用。

- 教材章节：第二章 HTML与CSS基础- 内容：HTML标签、属性、文本格式化；CSS选择器、属性、盒模型、浮动布局。

3. 网页制作软件应用：介绍Dreamweaver等网页制作软件的使用方法。

- 教材章节：第三章网页制作软件- 内容：软件界面与功能、创建和管理网站项目、使用可视化编辑器。

HTML5+CSS3网站设计教程第16章制作餐饮类网站页面

源文件位置：光盘\ 素材\第16章\16-7.html 视频位置：光盘\ 视频\第16章\16-7.swf
16.6.1 问题1——在网页中插入多媒体对象后，在 HTML语言中会生成什么标签
当在网页中插入多媒体对象后，HTML语言中会生成<embed>标签；另外，若在网页中插入一些特殊对象，HTML语言中则会生成<object> 标签。多媒体对象插入标签<embed>的基本语法是<embed src=#></embed>，其中“#”代表URL地址。
视频位置：光盘\视频\第16章\16-1.swf 素材位置：光盘\素材\第16章\16-1.html
通过本实例的制作，读者应掌握如何对图像与文字进行适当的排版，以及使用Div+CSS布局的知识点制作网页，为以后制作出更加美观、丰富多彩的网页打下坚实基础。
通过本书前面的学习和本章节的实际操作过程，相信读者已经熟悉掌握了网页制作的过程，和一些相关内容的属性，那么接下来思考一下，下面的问题。
本网站页面利用Div+CSS的布局方式制作，分为上、中、下三个部分，在中间的部分又划分为多个小部分，整个页面看起来内容丰富而不杂乱，浏览者可以清晰地浏览到想要浏览的内容。
top:flash01
top:top_right
center:left
center:middle
center:right
bottom
餐饮类网站页面一般采用清新自然的色彩，营造了一副美好、清新的画面效果。该网站页面在页面布局结构上以公司食品展示为主，充分吸引浏览者的目光，勾起浏览者极大的食欲，达到很到的宣传效果。
实例制作的是餐饮类的网站页面，开头以一个卡通插画展示，让浏览者感到休闲自在，不会带来浏览负担，该网页整体色调运用清新的淡绿色，充分体现了该产品无污染、环保自然的特色，并使用两个Flash动画来丰富和活跃画面氛围，使得页面更加富有生机。

PHP的美食食谱网站设计与实现

php的美食食谱网站设计与实现
contents
目录
• 网站需求分析 • 网站设计 • 网站实现 • 网站测试与优化 • 网站部署与维护
01
网站需求分析
目标用户群体分析
家庭主妇
家庭主妇是美食食谱网站的主要用户群体，她们需要寻找适合家庭制作的食谱，满足家庭成员的口味和营养需求。
烹饪爱好者
烹饪爱好者是另一重要的用户群体，他们喜欢尝试新的菜肴和烹饪技巧，追求美食的口感和品质。
数据库部署
03
选择合适的数据库管理系统，如MySQL、PostgreSQL等，并
部署数据库。
网站安全设置
防火墙配置
配置服务器防火墙，限制非法访问，提高网站安全性。
密码策略
设置强密码策略，要求用户定期更换密码，提高账户安全。
安全漏洞检测与修复
定期进行安全漏洞扫描，发现漏洞及时修复，确保网站安全。
网站日常维护与更新
提高网站的响应速度，减少用户等待时间。
导航优化
优化网站导航结构，提高用户查找内容的效率。
05
网站部署与维护
网站服务器部署
选择合适的服务器
01
根据网站规模和访问量，选择适合的服务器配置，确保网站运
行流畅。
安装Web服务器软件
02
在服务器上安装如Apache、Nginx等Web服务器软件，配置好
服务器环境。
内容更新
定期更新美食食谱内容，保持网站内容的新鲜度和吸引力。
服务器监控
监控服务器运行状态，及时发现和处理服务器故障。
备份数据
定期备份网站数据，防止数据丢失，确保网站正常运行。
感谢您的观看
THANKS
注册功能

软件专业毕业设计-我的蛋糕店网站设计与实现

目录第一部分设计任务 (2)1.1设计目标 (2)1.2.主要内容 (2)1.3. 设计思路 (2)第二部分设计说明 (3)2.1技术路线 (3)2.2 工具设备要求 (3)2.3. 技术规范 (4)第三部分设计成果 (4)3.1测试结果 (4)3.2程序代码 (6)第四部分结束语 (14)第五部分致谢 (15)第六部分参考文献 (15)第一部分设计任务1.1设计目标蛋糕屋是一个用户和商家相互交流的在线的购物系统，用来网上购买，实现一个基本的蛋糕网店。

商家可以对自己的蛋糕店进行管理，比如，对注册了该网站的用户的查看，密码重置；对该店的商品进行增删改查的管理等。

客户可以在该网站对商品的购买，和商家进行交流等；1.2.主要内容该网站拥有七大模块：登录、角色管理、管理员、客户管理、商品管理、购物车管理、留言管理模块。

系统分为前端的客户信息浏览及查询和后台管理两大部分：前台销售管理的用户是通过Internet访问网站的客户，实现客户的注册登录，店铺消息的展示，购物车功能，客户反馈留言。

后台管理系统的用户是通过Internet访问的后台管理员，实现客户帐号管理，商品详情管理，反馈留言管理，店铺消息管理。

1.3. 设计思路1 完成项目中的servlet包对网页设计和功能的整合，完成项目中网页与网页之间的跳转和传递参数，网页和数据库的链接，比如登入，注册功能的实现等。

2 完成项目中的util包，对购物车的实现，比如讲货物加入购物车，拿出购物车，对购物车中商品价格的计算等。

第二部分设计说明2.1技术路线此次我完成web开发中的MVC模式中的c（servlet）层模式，和购物车的代码，以及文件的上传。

Servlet主要是对jsp页面的跳转。

购物车则完成对商品添加到购物车和吧商品拿出购物车，对购物车商品中的价格的计算。

如下图所示，我完成的是一个网站中的服务层，编写业务逻辑，调用dao操作，实现对jsp页面的跳转。

2.2 工具设备要求前端：Javascript后台：SQL Servlet后台工具:oracle开发工具:MyEclipse Oracle数据库服务器:Tomcat6.02.3. 技术规范框架：JSP+server+OracleJDBC：定义接口方法，并用实现类实现方法JSP：文件全放入WebRoot目录第三部分设计成果3.1测试结果我完成的程序结果如下：登入：注册：购物车：3.2程序代码将商品加入购物车：Addcakepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {SmartUpload su = new SmartUpload();su.initialize(this, request, response);su.upload();SmartRequest req = su.getRequest();int id = Integer.parseInt( req.getParameter("id"));String name = req.getParameter("name");double price=Double.parseDouble( req.getParameter("price"));int amount= Integer.parseInt( req.getParameter("amount"));int pid= Integer.parseInt( req.getParameter("pid"));String pic;SmartFiles files = su.getFiles();SmartFile file = files.getFile(0);Stringfilename=System.currentTimeMillis()+"."+file.getFileExt();file.saveAs("/img/"+filename);pic=filename;Cake cake=new Cake ( id, name, price, amount, pic, pid);CakeDAO bd=new CakeDAO();bd.addcake(cake);response.sendRedirect("CShowCake");} catch (Exception e) {e.printStackTrace();}}}删除购物车的商品：Deletecakepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {int id=Integer.parseInt( request.getParameter("id") );CakeDAO md=new CakeDAO();md.deleteCake(id);response.sendRedirect("CShowCake");} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}登入界面的跳转：public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {request.setCharacterEncoding("UTF-8");String name = request.getParameter("name");String pwd = request.getParameter("pwd");HttpSession session = request.getSession();PuserDAO mud=new PuserDAO();Puser user=mud.islogin(name,pwd);if(user!=null){session.setAttribute("user",user);response.sendRedirect("index.jsp");}else{session.setAttribute("error","用户名或者密码错误");response.sendRedirect("Login.jsp");}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}注册页面的跳转：public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {request.setCharacterEncoding("UTF-8");String name= request.getParameter("name");String pwd = request.getParameter("pwd");String sex = request.getParameter("sex");String y= request.getParameter("publish_y");String m= request.getParameter("publish_m");String d= request.getParameter("publish_d");String date=y+"-"+m+"-"+d;SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");java.util.Date utdate=sdf.parse(date);Date brith=new java.sql.Date(utdate.getTime());String email = request.getParameter("email");String phone = request.getParameter("phone");String address=request.getParameter("address");Puser puser=newPuser(name,pwd,sex,brith,email,phone,address);PuserDAO pd=new PuserDAO();boolean addPuser = pd.addPuser(puser);if(addPuser==true){response.sendRedirect("Login.jsp");}else{response.sendRedirect("register.jsp");}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}留言的查看，发表，和修改AddMessagepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {request.setCharacterEncoding("UTF-8");String content=request.getParameter("content");String name=request.getParameter("name");Message m=new Message();m.setContent(content);m.setName(name);MessageDAO md=new MessageDAO();md.addMeaage(m);response.sendRedirect("ShowMessage");} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}DeleteMessagepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {int id=Integer.parseInt( request.getParameter("id") );MessageDAO md=new MessageDAO();md.deleteMessage(id);response.sendRedirect("ShowMessage");} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}UpdateMessagepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {int id= Integer.parseInt(request.getParameter("id"));MessageDAO md=new MessageDAO();Message m=md.queryById(id);request.setAttribute("message", m);request.getRequestDispatcher("other/updatemessage.jsp").forward(r equest, response);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}第四部分结束语经过一个月的学习和工作，我终于完成了蛋糕网店设计，从开始收到项目的题目，再到项目的完成，每走一步对于我来说都是新的尝试和挑战。

西式甜品网页设计分析与思考

西式甜品网页设计分析与思考
西式甜品是一种非常受欢迎的食品类别，其网页设计需要体现出其美味与精致的特点。

以下是对西式甜品网页设计的分析与思考：
1. 颜色搭配：西式甜品网页设计应该选取和食品有关的颜色进行搭配，例如浅粉色、浅绿色、浅黄色等。

这些颜色不仅能彰显西式甜品的美味，还能营造出平和、温暖的氛围，让顾客有一种轻松、舒适的感觉。

2. 布局设计：西式甜品网页的布局要简洁，让顾客能够快速找到想要的产品。

一般来说，主页应该将比较热门的西式甜品图片及口味等信息呈现出来，以吸引顾客的注意力。

此外，在商品列表中应该设计好分类标签和较完整的筛选菜单，方便顾客进行选择。

3. 产品展示：西式甜品网页的产品展示需要非常精细和具体。

展示图片要选取高清晰度、诱人食欲的图片，同时要配以详细的文字描述，包括口味、口感等信息。

这样能够让顾客更好地理解和感受西式甜品的优点，提高购买率。

4. 营销促销：西式甜品网页还应该加入一些优惠促销活动，例如折扣、满减等活动，这能够吸引更多的顾客。

同时也需要将这些信息集中在一个位置，以便顾客快速地看到。

5. 用户评价：在西式甜品网页中加入用户评价是很有必要的。

这样不仅可以让顾客了解其他消费者的反馈，还能增加网站的可信度和用户黏性。

总的来说，西式甜品网页的设计需要简洁、精致、清新、美食感十足，并且充分体现出营销和用户评价的作用。

HTML蛋糕网源代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>蛋糕屋</title><TITLE>tip</TITLE><STYLE></STYLE><TITLE>tip</TITLE><STYLE></STYLE></head><body background="框架/0162.gif"><table align="center"><tr><td><img src="20110824xingren.jpg" width="900" /></td></tr><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" background="框架/0105.gif"><tr align="center"><td><font size="+2"><b> <a href="#">主页</a></b></font></td><td><font size="+2" ><b><a href="#">简介</a></b></font></td><td><font size="+2" ><b><a href="#">产品</a></b></font></td><td><font size="+2" ><b><a href="#">精品</a></b></font></td><td><font size="+2" ><b><a href="#">客服</a></b></font></td><td><font size="+2" ><b><a href="#">鲜花</a></b></font></td><td><font size="+2" ><b><a href="#">特惠</a></b></font></td><td><form><select name="" size=""><option value="1">抹茶蛋糕<option value="2">水果蛋糕<option value="3">奶油蛋糕<option value="4">巧克力蛋糕<option value="5">鲜花配送<option value="6">祝寿蛋糕<option value="7">提拉米苏<option value="8">主页<option value="9">欢庆礼包</select></td><tr><table align="center" border="0" width="900" bgcolor="#FFFFFF"><tr><td ><img src="框架/100003575267999.gif"/></td><td><table border="0" cellpadding="0" cellspacing="0" height="333" width="165"><tr><td align="center"><font size="+2">鲜花花语</font> </td></tr><tr><td ><font size="-1"><ul><li>新年祝福语</li><br /><li>情人节祝福语</li><br /><li>三八节祝福语</li><br /><li>开业祝福语</li><br /><li>感恩节祝福语</li><br /><li>母亲节祝福语</li><br /><li>端午节祝福语</li><br /><li>朋友生日祝福语</li><br /><li>圣诞节祝福语</li></ul></td></tr></table></td></tr></table><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td width="300"><font face="宋体" size="-1"><b>账号  <input type="password" name="text1" size="" />      <input name="b1" type="button" id="c1" value="注册" /><br /><br />密码  <input type="password" name="text1" /> &nbsp    <input name="b1" type="button" id="c1" value="忘记" /><br /><br />    <input name="b1" type="button" id="c1" value="登陆" />         <input name="b1" type="button" value="取消"/></font></td><td width="324" align="center" ><img src="框架/logo.gif" /></td><td><table align="center" border="0" align="center" width="250" background="框架/0133.gif" ><tr><td align="center" background="框架/0105.gif"><b>新闻</b></td></tr><tr><td ><a href="#">最专业的鲜花速递服务商</a><br /><a href="#">荣获中国B2C电子商务第一名</a><br /><a href="#">中国花卉协会会员</a><br /><a href="#">足不出户，网络、电话均可订购</a><br /><a href="#">中国市区内最快2小时即可送达</a><br /><a href="#">采用昆明顶级花材，保证新鲜</a><br /></td></tr></table></tr></table></tr></table></tr></table><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" background="框架/0325.gif"><tr><td width="200"><img src="footerrx.jpg"</td><td><font size="-1">按用途：<a href="#"> 全部</a> <a href="#"> 生日蛋糕</a> <a href="#"> 祝寿蛋糕</a> <a href="#"> 情侣蛋糕</a> <a href="#"> 节日蛋糕</a> <a href="#"> 庆典蛋糕</a> <a href="#"> 儿童蛋糕</a><br /><br />按材料：<a href="#"> 全部</a> <a href="#"> 鲜奶蛋糕</a> <a href="#"> 水果蛋糕</a> <a href="#"> 巧克力蛋糕</a> <a href="#"> 穆斯蛋糕</a> <a href="#"> 冰激凌蛋糕</a> <a href="#"> 抹茶蛋糕</a> <a href="#"> 芝士蛋糕</a> <a href="#"> <a href="#"> 提拉米苏</a> <a href="#"> 黑森林</a> <br /><br />按对象：<a href="#">全部</a><a href="#"> 恋人</a> <a href="#"> 长辈</a> <a href="#"> 领导</a> <a href="#">朋友</a> <a href="#">客户</a> <a href="#"> baby </a><br /><br />按造型：<a href="#"> 全部</a> <a href="#"> 心形蛋糕</a> <a href="#"> 方形蛋糕</a> <a href="#"> 圆形蛋糕</a> <a href="#"> 多层蛋糕</a> <a href="#"> 艺术蛋糕</a> <a href="#"> 生肖蛋糕</a> <br /></font></td></tr></table><table border="0" align="center" width="900" cellpadding="0" cellspacing="0"bgcolor="#FFFFFF"><tr><td width="600"><img src="框架/headerps.jpg" /></td><td ><img src="框架/donghua.gif" /></td></tr></table><table border="0" width="900" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" ><td height="2"><tr ><td width="200"><table align="center" border="0" width="230" height="625" background="框架/0325.gif"><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按用途<b></font></td></tr><tr><td height="66" ><font size="-1"><a href="#">生日蛋糕</a> | <a href="#">祝寿蛋糕</a> | <a href="#"> 情侣蛋糕</a><br /><br /> <a href="#">节日蛋糕</a> | <a href="#">庆典蛋糕</a> | <a href="#"> 儿童蛋糕</a><br /></font></td></tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按材料<b></font></td></tr><tr><td height="66" ><font size="-1"><a href="#">鲜奶蛋糕</a> | <a href="#">水果蛋糕</a> | <a href="#"> 巧克力蛋糕</a><br /><br /><a href="#">穆斯蛋糕</a> | <a href="#">抹茶蛋糕</a> | <a href="#"> 冰激凌蛋糕</a><br /><br /><a href="#">芝士蛋糕</a> | <a href="#"> 提拉米苏</a> | <a href="#"> 黑森林</a><br /></font></td></tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按造型<b></font> </td></tr><tr><td height="66"><font size="-1"><a href="#"> 心形蛋糕</a> | <a href="#">方形蛋糕</a> |<a href="#"> 圆形蛋糕</a><br/><br /><a href="#"> 多层蛋糕</a> | <a href="#"> 艺术蛋糕</a> | <a href="#"> 生肖蛋糕</a></font></td> </tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按对象<b> </font></td></tr><tr><td height="66"><font size="-1"><a href="#">恋人</a> | <a href="#"> 长辈</a> | <a href="#"> 领导</a><br /><br /><a href="#"> 朋友</a> | <a href="#"> 客户</a> | <a href="#"> baby</a><br /></font></td></tr><tr><td><img src="框架/dingyue.jpg"</td></tr><tr><td><input type="password" name="text1"/>邮箱地址</td></tr></table></td><td><table border="0" width="670" cellpadding="0" cellspacing="0" style="border-color:#FFFFFF" style="background-color:#B6F1FC" background="框架/0266.gif"><tr><td colspan="3"><font size="+2" color="#0000FF"><b>分类产品</b></font></td></tr> </tr><tr><td><table border="1" align="center"><td align="center"><img src="蛋糕/701002175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/701050175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/701060175228.jpg" /></td></table></td></tr><tr><td align="center"><font face="宋体">奇思妙想<font color="#FF0000">[￥219元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">月光<font color="#FF0000">[￥248元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">荷塘月色<font color="#FF0000">[￥189元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td></tr><tr><td><table border="1" align="center"><td align="center"><img src="蛋糕/805011175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/803001175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/803005175228.jpg" /></td></table></td></tr><tr><td align="center"><font face="宋体">缘分天空<font color="#FF0000">[￥318元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">幸福时光<font color="#FF0000">[￥219元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">爱之舞<font color="#FF0000">[￥179元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td> </tr><tr><td colspan="3" align="center" style="font:"宋体"" style="font-style:inherit"><a href="#">1 </a><a href="#">2 </a><a href="#">3 </a><a href="#">4 </a><a href="#">5 </a><a href="#">6 </a><a href="#">7 </a><a href="#">8 </a><a href="#">9 </a><a href="#">上一页</a> <a href="#">下一页</a></td></tr></table></td></table><table align="center" width="900"><tr><td><img src="框架/footimg.gif" /></td></tr></table> <br /><br /><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Copyright ⓒ [2012 Year] [] </font></td></tr></table></body></html>。

网页制作 —— Macarons(马卡龙)

课程名称：互联网软件应用及开发报告题目：网页制作班级：电子商务1102学号：110304060234姓名：薛明秋时间：网页制作——Macarons（马卡龙）随着科技的不断发展，计算机技术的不断更新，网络技术的不断完善，Web建站技术的提高。

用以网站建设的软件种类繁多。

其中以ASP技术使用最为广泛，ASP是当今流行的web应用程序技术之一。

作为一种服务器端脚本编写环境，它将HTML语言、脚本代码和服务器组件有机地结合在一起。

可以用来创建交互式的动态网页和具有数据库访问功能的web应用程序。

利用数据库和VisualStudio等工具制作。

本网站以西式糕点为主题，以近几年深受青少年喜爱的糕点做宣传。

Macarons这个网站以鲜艳的色彩为主，体现出马卡龙（Macarons）的主色调，让人感觉心情愉悦轻松。

整个版面简洁明了没有过多的修饰，适合各年龄段人群。

本网站主页有用户登录,专属的BANNER 设计。

导航分为四栏，分别为历史简介、做法、和口味系列展示。

充分让大家在了解马卡龙的同时又体会到动手去做美食的乐趣。

首页放有一张图片，这张图片主要是为了展示出马卡龙的经典口味。

历史简介这一子页面利用漫画版的马卡龙来制造轻松好玩的Feel。

做法这一子页面利用一个个步骤图片向人们展示了马卡龙的做法，更简单明了让人们容易接受，容易制作，从而引起人们的兴趣。

口味展示这一子页面，利用小图片和文字，简单明了，给人清新的Feel。

制作的时候，先创建了模板页，生成首页。

又分别制作了子页，通过导航链接形成一个简单网站。

再开始制作后台和数据库。

开发周期我是这样做的：1、先结合马卡龙的特点确定网站的整体色调，框架，风格，样式，栏目等网站建设基本要素等。

2、配合用户搜集网站建设基本要素中所需的文字，图片，视频等素材，并进行初期整理和编辑。

3、自己通过搜集和一些网上糕点师沟通了解，以及通过他们的建议对网站大纲主题做了个确定。

4、根据首页所确定的网站框架，严格按照网站设计的流程设计出各个内页的内容等，并将效果图转换格式，和改变大小。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

“西式甜品网”首页面制作一、案例描述1、考核知识点➢盒子模型➢元素的浮动与定位2、练习目标➢掌握盒子的相关属性。

➢掌握元素的浮动与定位。

3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。

4、案例展示效果如图4-1所示。

图4-1“西式甜品网”效果展示二、布局及定义基础样式1、效果分析（1）HTML结构分析“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。

头部导航及banner产品分类产品展示版权信息图4-2“西式甜品网”结构分析（2）CSS样式分析页面中的各个模块居中显示，页面的版心为980px。

另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。

2、页面布局新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">3<html xmlns="/1999/xhtml" xml:lang="en">4<head>5<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">6<title>西式甜品网</title>7</head>8<body>910<div class="head"></div>111213<div class="nav"></div>141516<div class="banner"></div>171819<div class="list"></div>202122<div class="content"></div>232425<div class="footer"></div>2627</body>28</html>在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。

3、定义公共样式为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。

在index04.html文件所在的文件夹内新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。

然后定义页面的基础样式，具体如下：/*重置浏览器的默认样式*/*{margin:0; padding:0;border:0; background:none;}/*全局控制*/body{font-family:"微软雅黑";font-size:16px;}三、案例制作1、制作头部模块（1）HTML结构分析“头部”模块整体由一个大盒子<div>进行控制。

内部嵌套<img>和<div>分别用来搭建左侧logo和右侧文字内容部分。

“头部”模块的具体结构如图4-3所示。

<div><img><div>图4-3“头部”模块结构图（2）样式分析“头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。

左侧logo 和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。

（3）搭建结构在index04.html文件内书写“头部”模块的HTML结构代码。

具体如下：12<div class="head">3<img class="logo" src="images/logo.jpg" />4<div class="login"><span>登录</span> | <span>注册</span></div>5</div>6（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。

具体如下：1.head{2width:980px;3height:80px;4margin:0 auto;5position: relative;6}7.logo{8position: absolute;9left:100px;10top:15px;11}12.login{13position: absolute;14right:100px;15top:34px;16color:#ff9c00;17cursor: pointer;18font-size: 18px;19}上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。

保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。

图4-4“头部”模块效果图2、制作导航及banner模块（1）HTML结构分析“导航”及“banner”模块分别由一个大盒子<div>进行控制。

导航内容部分由<span>标记定义，banner 图由<img>标记定义。

“导航”及“banner”模块的具体结构如图4-5所示。

<div><div><span><span><span><span><span><img><div>图4-5“导航”及“banner”模块结构图（2）样式分析“导航”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。

定义<span>标记左浮动，并定义相关的文字样式。

最后还需设置“banner”模块的图片在页面中居中显示。

（3）搭建结构在index04.html文件内书写“导航”及“banner”模块的HTML结构代码。

具体如下：12<div class="nav">3<div class="nav_in">4<span>首页</span>5<span>公司简介</span>6<span>美食甜品</span>7<span>用户留言</span>8<span class="last" >联系我们</span>9</div>10</div>111213<div class="banner"><img src="images/banner.jpg" /></div>14（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“导航”及“banner”模块。

具体如下： 1.nav{2width:100%;3height:50px;4background: #ff9c00;5}6.nav_in{7width:820px;8margin:0 auto;9line-height: 50px;10color:#fff;11padding-left: 160px;12}13.nav_in span{14float: left;15padding:0 38px;16color:#9c5132;17cursor: pointer;18}19.banner {text-align: center;}上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显示。

保存index04.html与style04.css文件，刷新页面，效果如图4-6所示。

图4-6“导航”及“banner”模块效果图3、制作产品分类模块（1）HTML结构分析“产品分类”模块主要由<div>标记定义。

“产品分类”模块的具体结构如图4-7所示。

<div><div><div><div><div><div><div>图4-7“产品分类”模块结构图（2）样式分析“产品分类”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。

定义每一个分类模块的<div>标记左浮动，并定义相关的文字样式。

（3）搭建结构在index04.html文件内书写“产品分类”模块的HTML结构代码。

具体如下：12<div class="list">3<div class="list_in">4<div class="list1">提拉米苏</div>5<div class="list2">甜甜圈</div>6<div class="list3">芝士蛋糕</div>7<div class="list4">马卡龙</div>8<div class="list5">西式甜点</div>9</div>10 </div>11（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“产品分类”模块。