Web page design and production final assignment report - College Students' online flower shop

《 Web design and production 》

Big job report

college ：** college

full name ：

Student number ：

major :

Abstract ： Abstract ：2018 year , Li Qiang, who graduated from college, returned to his hometown Hebi and founded a company called “ Chuxin flower shop ” The online platform , Bring up the original intention of entrepreneurship , Li Qiang said frankly “ I just hope to operate through e-commerce , Help many traditional operators like their mothers , Open up new channels of network marketing ”. With the efforts of Li Qiang and his team , Less than 1 Year time , The studio has more than 100 Home's cooperative flower shop . For better development ,2019 year , Li Qiang led the team to Jingdong （ Hebi ） Digital economy industrial park . With Jingdong's solid infrastructure 、 Efficient digital intelligent social supply chain , It provides more professional technical support for its own business .

With the industrial park in the marketing channel 、 Supply chain finance 、 Talent introduction and other aspects of empowerment ,“ Chuxin flower shop ” The development of has become increasingly prosperous . Settled in the industrial park 3 Over the years ,“ Chuxin flower shop ” Our turnover and scale have taken a big step forward , The turnover in the first quarter of this year increased compared with last year 100%, The team members consist of the original 2 People gradually develop to 60 Human size .

Li Qiang reveals his heart ,“ Start a business 4 year , A total of 45 million flowers were sold , Each flower carries my original heart and dream , It was the industrial park that helped me , Let me have a chance to realize it ”.“ Chuxin flower shop ” change rapidly , But Li Qiang's original intention of starting a business is consistent .

Inspired by Li Qiang's opening a flower shop , I also designed an online flower shop based on my knowledge .

The design mainly includes the following sections ：

1. Homepage section

2. About the plate

3. Classification plate

4. Specialty plate

5. Price segment

6. Contact plate

Website planning ideas

Online flower shop is a new form of store , Mainly to achieve online sales of flowers , Generally, there is no physical store , After receiving the customer's order, transfer the order to the entity merchant , With fast , Convenient features .

Good things are always welcome , Flowers are no exception . Opening a flower shop is a good choice , How to open an online flower shop ？ Many people open online flower shops , How can you make your flower shop different ？

How much do you invest in opening an online flower shop ? Fresh flower shop decoration 、 We should have a comprehensive understanding of the operation and profit of the flower shop , Only in this way can you know how to open a fresh flower shop .

How to open an online flower shop ?

The cost of spending is low , The quantity of one-time purchase will not be very large , So the initial investment is not very big , Mainly the rental and decoration of the store . If you want to open a large-scale 、 Elegant style 、 Flower shops with high technical level , Then we need to add a warehouse to the storefront . Expensive rent for berths 、 Huge decoration costs 、 Technical personnel training costs and salaries, as well as a large amount of working capital, need to be calculated together 10 More than ten thousand yuan . But if you just open a small flower shop , A few thousand yuan can be done .

The decoration of the fresh flower shop should save space as much as possible , On this basis, we are doing it in our own style . The layout of the flower shop is very important , Exquisite 、 Beautiful layout , It can not only attract the attention of consumers , Lead them into the flower shop , And clever arrangement can stimulate customers' desire to buy . Stand out from the fierce competition , Flower shop decoration has become whether the flower shop can expand customers .

The directory structure of the website is as follows ：

images ------ Store picture files

js ------- Deposit js file

music ------------------ Store the single details page

index.html --------------- home page

tuijian.html ----------- Recommendation page

rank.html -------------- List page

category.html----------- Category page

style.css ------CSS file

Lightbox.css ----------css file

1. index.html It's the homepage of the website , The built-in links are about.html、category.html、speacials.html、details.html、contact.html、cart.html. In the web page head,footer And the right sidebar can be used for other pages , Save time on other pages .

2.detail.html It is the detailed page of the product , The content on the left side in the middle is the detailed information of the product .

3. cart.html It is the interface of shopping cart , Draw a table to complete the calculation of freight and total price .

4. category.html It's about the page , brief introduction “ Chuxin flower shop ” Founder Li Qiang's story of selling flowers and starting a business .

5. speacials.html It is the featured pop page , It mainly introduces the popular flowers of our store .

6. Contact.html Is the contact page , Provides a message form .

Overall layout and layout design of web pages ：

among header、footer And the layout of the right sidebar is fixed , The main content of each page adopts a variety of flexible layout designs according to the subject content to be expressed . The whole web page is elegant 、 natural 、 Warm color system against the color of flowers .

The technology used in web pages

In the process of making , The use of ide yes HBuilderX, The preliminary test of the website is Chrome Complete... On the browser . It wasn't easy at first , With the deepening of the classroom and the learning of knowledge , Gradually get familiar with .

The web page uses pure html+css+jquery, In the process of completing the web page , By the way jquery Knowledge of , Easy to write their own animation effects , Find relative to js,jquery It is really convenient to use after packaging , Many aspects should have been very complicated ,jquery It becomes very light to use after packaging , And it is very convenient to explain .

Using js Part of the content taught in the class is also called in the process of .

CSS The most commonly used styles are text and layout settings , Often because of the size and position of a style .

Holistic HTML, Web page interworking is adopted , Strung into a whole .

Screenshots of main web pages

1. home page （index.html）

This page uses as the page header , middle , And the footer . The main content in the middle is to introduce the main products and products , use div+css Layout implementation of , The screenshot is as follows ：

Header contains logo、 Background image and web page navigation , The web page navigation is realized by horizontal list , The screenshot is as follows ：

Middle right category navigation bar （ With scrolling subtitles ） And the footer is div+css Layout implemented .

2 Details page （details.html）

The details page is realized by referring to the layout of commodities in shopping malls such as Taobao . The screenshot is as follows ：

3 The shopping cart （cart.html） And classification （category.html）

The main contents of shopping cart and classification page are realized by table layout , The screenshot is as follows ：

Experience and experience ：

1. First of all, I feel HTML as well as CSS,JS,jQuery Wait for learning to make more trivial , For the study of this course , Rote learning doesn't work well , You need to learn through trial and error . Study ps When , The teacher told us ps Is the art of choice , I think this course also has the importance of choice , Make constant improvements in your choice attempts , Make the results more pleasing to the eye . In the completion of the last big assignment , In our group, it is through constant revision , Constantly trying to accomplish , Although the picture is not very beautiful , But the whole process has become more skilled .

2. Be diligent. Be diligent , Important things are to be repeated for 3 times . Just something related to the code , I think diligence is indispensable . Be sure to practice by yourself , Try more , Will keep the knowledge in your mind .

The above two points are my personal feelings after learning , Next, I will continue to share my experience in the learning process .