大作業(yè)報(bào)告

學(xué)院：**學(xué)院

姓名：

學(xué)號(hào)：

專業(yè):

摘要：摘要：2018年，大學(xué)畢業(yè)的李強(qiáng)回到家鄉(xiāng)鶴壁創(chuàng)辦了名為“初心花店”的線上平臺(tái)，提起創(chuàng)業(yè)的初衷，李強(qiáng)直言“就是希望通過電商運(yùn)營，助力很多像自己母親一樣的傳統(tǒng)經(jīng)營者，開辟網(wǎng)絡(luò)營銷新渠道”。在李強(qiáng)和團(tuán)隊(duì)的努力下，不到1年時(shí)間，工作室就擁有了超過100家的合作花店。為謀求更好地發(fā)展，2019年，李強(qiáng)帶領(lǐng)團(tuán)隊(duì)入駐了京東（鶴壁）數(shù)字經(jīng)濟(jì)產(chǎn)業(yè)園。憑借京東扎實(shí)的基礎(chǔ)設(shè)施、高效的數(shù)智化社會(huì)供應(yīng)鏈，為自身業(yè)務(wù)提供了更專業(yè)的技術(shù)支撐。

有了產(chǎn)業(yè)園在營銷渠道、供應(yīng)鏈金融、人才引進(jìn)等多方面的賦能，“初心花店”的發(fā)展也日益紅火起來。入駐產(chǎn)業(yè)園3年來，“初心花店”的營業(yè)額和規(guī)模都向前邁了一大步，今年一季度的營業(yè)額同比去年增長了100%，團(tuán)隊(duì)成員由最初的2人逐步發(fā)展至60人的規(guī)模。

李強(qiáng)袒露心聲，“創(chuàng)業(yè)4年，總共賣出四五百萬朵鮮花，每一朵都承載了我的初心和夢(mèng)想，是產(chǎn)業(yè)園給了我?guī)椭屛矣袡C(jī)會(huì)去實(shí)現(xiàn)它”?！俺跣幕ǖ辍比招略庐?，但李強(qiáng)創(chuàng)業(yè)的初心始終如一。

受李強(qiáng)開花店創(chuàng)業(yè)的啟發(fā)，我也結(jié)合所學(xué)知識(shí)設(shè)計(jì)了一個(gè)線上花店。

設(shè)計(jì)主要包括以下幾個(gè)版塊：

1.首頁板塊

2.關(guān)于板塊

3.分類板塊

4.特產(chǎn)板塊

5.價(jià)格板塊

6.聯(lián)系板塊

網(wǎng)站規(guī)劃思想

網(wǎng)上花店屬于一種新的店面形式，主要以實(shí)現(xiàn)在線銷售鮮花為主，一般沒有實(shí)體店面，收到顧客訂單后將訂單轉(zhuǎn)手給實(shí)體商戶，具有快速，方便的特點(diǎn)。

美好的事物總是受人們的歡迎，鮮花更是不例外。開花店是不錯(cuò)的選擇，如何開網(wǎng)上花店？開網(wǎng)上花店的人也很多，怎樣才能讓你的鮮花店與眾不同呢？

開網(wǎng)上花店對(duì)于鮮花店投資多少?鮮花店裝修、經(jīng)營以及鮮花店利潤都要有一個(gè)全面的了解才行，這樣你才知道究竟該怎樣開鮮花店。

如何開網(wǎng)上花店?

花的成本較低，一次性進(jìn)貨的數(shù)量不會(huì)很多，所以先期投資不是很大，主要是店鋪的租賃和裝修。如果要開一家規(guī)模較大、格調(diào)高雅、技術(shù)水平較高的花店，那么就需要在店面的基礎(chǔ)上加上一間倉庫。昂貴的鋪位租金、龐大的裝修費(fèi)用、技術(shù)人員培訓(xùn)費(fèi)用和薪金以及較大的流動(dòng)資金算在一起就需要10多萬元。但是如果只是開一家小花店，幾千元也可以搞定。

鮮花店的裝修應(yīng)注意盡量節(jié)省空間,在這個(gè)基礎(chǔ)上在以自己的風(fēng)格來做.花店的布置很重要，精巧、美麗的布置，不但能吸引消費(fèi)者的視線，引領(lǐng)其走進(jìn)花店，而且巧妙的布置可以刺激顧客的購買欲。要在激烈競爭中脫穎而出，花店裝修便成了花店是否能擴(kuò)充顧客。

網(wǎng)站的目錄結(jié)構(gòu)如下：

images ------存放圖片文件

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

music ------------------存放單曲詳情頁

index.html ---------------首頁

tuijian.html -----------推薦頁面

rank.html --------------榜單頁面

category.html-----------分類頁面

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

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

1. index.html 是網(wǎng)站的首頁，內(nèi)置的鏈接有about.html、category.html、speacials.html、details.html、contact.html、cart.html。網(wǎng)頁中head，footer及右側(cè)側(cè)邊欄可以通用到其他頁面，節(jié)省了其他頁面的編寫時(shí)間。

2.detail.html是商品的詳細(xì)頁，中間左側(cè)內(nèi)容為商品的詳細(xì)信息介紹。

3. cart.html 是購物車的界面，繪制了一張表格完成了運(yùn)費(fèi)和總價(jià)的計(jì)算。

4. category.html 是關(guān)于頁面，簡介“初心花店”創(chuàng)始人李強(qiáng)的賣花創(chuàng)業(yè)故事。

5. speacials.html 是特色爆款頁面，主要介紹本店主打的爆款鮮花。

6. Contact.html 是聯(lián)系頁面，提供了一個(gè)留言表單。

網(wǎng)頁總體布局和版式設(shè)計(jì)：

其中header、footer和右側(cè)側(cè)邊欄的版式是固定不變的，各個(gè)頁面的主體內(nèi)容根據(jù)所要表達(dá)的主題內(nèi)容采取多種靈活地版式設(shè)計(jì)。網(wǎng)頁整體采取淡雅、自然、溫馨的和鮮花顏色映襯的色系。

網(wǎng)頁所采用的技術(shù)

在制作過程中，使用的ide是HBuilderX，網(wǎng)站初步測(cè)試事在Chrome瀏覽器上完成。開始時(shí)候并不順手，隨著課堂的深入以及知識(shí)的學(xué)習(xí)，慢慢熟悉起來。

網(wǎng)頁采用了純html+css+jquery，在完成網(wǎng)頁的過程中，順便補(bǔ)充了jquery方面的知識(shí)，方便自己編寫動(dòng)畫特效，發(fā)現(xiàn)相對(duì)于js，jquery封裝之后的使用的確方便了許多，許多方面本來應(yīng)該十分繁復(fù)的地方，jquery封裝之后再進(jìn)行使用就變得十分的輕便，而且解釋起來也十分的方便。

在運(yùn)用js的過程中也調(diào)用了課上教的一部分內(nèi)容。

CSS樣式用的最多的是文字以及布局的一些設(shè)置，常常因?yàn)橐粋€(gè)樣式的大小位置調(diào)來調(diào)去。

整體的HTML，采用了網(wǎng)頁互通，串成了一個(gè)整體。

主要網(wǎng)頁截圖

1.首頁（index.html）

本頁面用了做了頁頭，中間，和頁尾部分。中間主體內(nèi)容是介紹主打產(chǎn)品和產(chǎn)品，采用div+css的布局實(shí)現(xiàn)，截圖如下：

頁頭包含logo、背景圖片和網(wǎng)頁導(dǎo)航三部分，其中網(wǎng)頁導(dǎo)航采用橫向列表實(shí)現(xiàn)，截圖如下：

中間右側(cè)分類導(dǎo)航欄（含滾動(dòng)字幕）及頁尾是采用div+css布局實(shí)現(xiàn)的。

2 詳情頁（details.html）

詳情頁是參考了淘寶等商城商品的布局實(shí)現(xiàn)的。截圖如下：

3 購物車（cart.html）和分類（category.html）

購物車和分類頁面主體內(nèi)容均使用表格布局實(shí)現(xiàn)，截圖如下：

心得與體會(huì)：

1.首先個(gè)人感覺HTML以及CSS，JS，jQuery等學(xué)習(xí)使比較瑣碎的，對(duì)于這門課程的學(xué)習(xí)，死記硬背不太適用，需要在嘗試中不斷學(xué)習(xí)。學(xué)習(xí)ps的時(shí)候，老師給我們講ps是選擇的藝術(shù)，我覺得這門課程也有著選擇的重要性，要在選擇嘗試中不斷改進(jìn)，使得成果更讓人賞心悅目。在最后一次大作業(yè)的完成中，我們小組內(nèi)就是通過不斷地修改，不斷地嘗試完成的，雖然畫面不是很美觀，但是整個(gè)過程也變得更加熟練了。

2.要勤奮要勤奮要勤奮，重要的事情說三遍。只要和代碼相關(guān)的東西，我覺得勤奮是必不可少的。一定要自己親手練習(xí)，多多嘗試，才會(huì)將知識(shí)記在自己的腦子里。

以上兩點(diǎn)都是個(gè)人學(xué)習(xí)后的感想，接下來還會(huì)繼續(xù)分享學(xué)習(xí)過程中的心得體會(huì)。