《网页设计与制作》

大作业报告

学院：**学院

姓名：

学号：

专业:

摘要：摘要：2018年，大学毕业的李强回到家乡鹤壁创办了名为“初心花店”的线上平台，提起创业的初衷，李强直言“就是希望通过电商运营，助力很多像自己母亲一样的传统经营者，开辟网络营销新渠道”。在李强和团队的努力下，不到1年时间，工作室就拥有了超过100家的合作花店。为谋求更好地发展，2019年，李强带领团队入驻了京东（鹤壁）数字经济产业园。凭借京东扎实的基础设施、高效的数智化社会供应链，为自身业务提供了更专业的技术支撑。

有了产业园在营销渠道、供应链金融、人才引进等多方面的赋能，“初心花店”的发展也日益红火起来。入驻产业园3年来，“初心花店”的营业额和规模都向前迈了一大步，今年一季度的营业额同比去年增长了100%，团队成员由最初的2人逐步发展至60人的规模。

李强袒露心声，“创业4年，总共卖出四五百万朵鲜花，每一朵都承载了我的初心和梦想，是产业园给了我帮助，让我有机会去实现它”。“初心花店”日新月异，但李强创业的初心始终如一。

受李强开花店创业的启发，我也结合所学知识设计了一个线上花店。

设计主要包括以下几个版块：

1.首页板块

2.关于板块

3.分类板块

4.特产板块

5.价格板块

6.联系板块

网站规划思想

网上花店属于一种新的店面形式，主要以实现在线销售鲜花为主，一般没有实体店面，收到顾客订单后将订单转手给实体商户，具有快速，方便的特点。

美好的事物总是受人们的欢迎，鲜花更是不例外。开花店是不错的选择，如何开网上花店？开网上花店的人也很多，怎样才能让你的鲜花店与众不同呢？

开网上花店对于鲜花店投资多少?鲜花店装修、经营以及鲜花店利润都要有一个全面的了解才行，这样你才知道究竟该怎样开鲜花店。

如何开网上花店?

花的成本较低，一次性进货的数量不会很多，所以先期投资不是很大，主要是店铺的租赁和装修。如果要开一家规模较大、格调高雅、技术水平较高的花店，那么就需要在店面的基础上加上一间仓库。昂贵的铺位租金、庞大的装修费用、技术人员培训费用和薪金以及较大的流动资金算在一起就需要10多万元。但是如果只是开一家小花店，几千元也可以搞定。

鲜花店的装修应注意尽量节省空间,在这个基础上在以自己的风格来做.花店的布置很重要，精巧、美丽的布置，不但能吸引消费者的视线，引领其走进花店，而且巧妙的布置可以刺激顾客的购买欲。要在激烈竞争中脱颖而出，花店装修便成了花店是否能扩充顾客。

网站的目录结构如下：

images ------存放图片文件

js -------存放js文件

music ------------------存放单曲详情页

index.html ---------------首页

tuijian.html -----------推荐页面

rank.html --------------榜单页面

category.html-----------分类页面

style.css ------CSS文件

Lightbox.css ----------css文件

1. index.html 是网站的首页，内置的链接有about.html、category.html、speacials.html、details.html、contact.html、cart.html。网页中head，footer及右侧侧边栏可以通用到其他页面，节省了其他页面的编写时间。

2.detail.html是商品的详细页，中间左侧内容为商品的详细信息介绍。

3. cart.html 是购物车的界面，绘制了一张表格完成了运费和总价的计算。

4. category.html 是关于页面，简介“初心花店”创始人李强的卖花创业故事。

5. speacials.html 是特色爆款页面，主要介绍本店主打的爆款鲜花。

6. Contact.html 是联系页面，提供了一个留言表单。

网页总体布局和版式设计：

其中header、footer和右侧侧边栏的版式是固定不变的，各个页面的主体内容根据所要表达的主题内容采取多种灵活地版式设计。网页整体采取淡雅、自然、温馨的和鲜花颜色映衬的色系。

网页所采用的技术

在制作过程中，使用的ide是HBuilderX，网站初步测试事在Chrome浏览器上完成。开始时候并不顺手，随着课堂的深入以及知识的学习，慢慢熟悉起来。

网页采用了纯html+css+jquery，在完成网页的过程中，顺便补充了jquery方面的知识，方便自己编写动画特效，发现相对于js，jquery封装之后的使用的确方便了许多，许多方面本来应该十分繁复的地方，jquery封装之后再进行使用就变得十分的轻便，而且解释起来也十分的方便。

在运用js的过程中也调用了课上教的一部分内容。

CSS样式用的最多的是文字以及布局的一些设置，常常因为一个样式的大小位置调来调去。

整体的HTML，采用了网页互通，串成了一个整体。

主要网页截图

1.首页（index.html）

本页面用了做了页头，中间，和页尾部分。中间主体内容是介绍主打产品和产品，采用div+css的布局实现，截图如下：

页头包含logo、背景图片和网页导航三部分，其中网页导航采用横向列表实现，截图如下：

中间右侧分类导航栏（含滚动字幕）及页尾是采用div+css布局实现的。

2 详情页（details.html）

详情页是参考了淘宝等商城商品的布局实现的。截图如下：

3 购物车（cart.html）和分类（category.html）

购物车和分类页面主体内容均使用表格布局实现，截图如下：

心得与体会：

1.首先个人感觉HTML以及CSS，JS，jQuery等学习使比较琐碎的，对于这门课程的学习，死记硬背不太适用，需要在尝试中不断学习。学习ps的时候，老师给我们讲ps是选择的艺术，我觉得这门课程也有着选择的重要性，要在选择尝试中不断改进，使得成果更让人赏心悦目。在最后一次大作业的完成中，我们小组内就是通过不断地修改，不断地尝试完成的，虽然画面不是很美观，但是整个过程也变得更加熟练了。

2.要勤奋要勤奋要勤奋，重要的事情说三遍。只要和代码相关的东西，我觉得勤奋是必不可少的。一定要自己亲手练习，多多尝试，才会将知识记在自己的脑子里。

以上两点都是个人学习后的感想，接下来还会继续分享学习过程中的心得体会。