{"ops":[{"insert":"《網(wǎng)頁設(shè)計與制作》"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"大作業(yè)報告"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"學(xué)院：**學(xué)院"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"姓名："},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"學(xué)號："},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"專業(yè):"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"摘要：摘要：2018年，大學(xué)畢業(yè)的李強回到家鄉(xiāng)鶴壁創(chuàng)辦了名為“初心花店”的線上平臺，提起創(chuàng)業(yè)的初衷，李強直言“就是希望通過電商運營，助力很多像自己母親一樣的傳統(tǒng)經(jīng)營者，開辟網(wǎng)絡(luò)營銷新渠道”。在李強和團(tuán)隊的努力下，不到1年時間，工作室就擁有了超過100家的合作花店。為謀求更好地發(fā)展，2019年，李強帶領(lǐng)團(tuán)隊入駐了京東（鶴壁）數(shù)字經(jīng)濟產(chǎn)業(yè)園。憑借京東扎實的基礎(chǔ)設(shè)施、高效的數(shù)智化社會供應(yīng)鏈，為自身業(yè)務(wù)提供了更專業(yè)的技術(shù)支撐。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"有了產(chǎn)業(yè)園在營銷渠道、供應(yīng)鏈金融、人才引進(jìn)等多方面的賦能，“初心花店”的發(fā)展也日益紅火起來。入駐產(chǎn)業(yè)園3年來，“初心花店”的營業(yè)額和規(guī)模都向前邁了一大步，今年一季度的營業(yè)額同比去年增長了100%，團(tuán)隊成員由最初的2人逐步發(fā)展至60人的規(guī)模。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"李強袒露心聲，“創(chuàng)業(yè)4年，總共賣出四五百萬朵鮮花，每一朵都承載了我的初心和夢想，是產(chǎn)業(yè)園給了我?guī)椭?，讓我有機會去實現(xiàn)它”。“初心花店”日新月異，但李強創(chuàng)業(yè)的初心始終如一。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"受李強開花店創(chuàng)業(yè)的啟發(fā)，我也結(jié)合所學(xué)知識設(shè)計了一個線上花店。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"設(shè)計主要包括以下幾個版塊："},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"1.首頁板塊"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"2.關(guān)于板塊"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"3.分類板塊"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"4.特產(chǎn)板塊"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"5.價格板塊"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"6.聯(lián)系板塊"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"網(wǎng)站規(guī)劃思想"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"網(wǎng)上花店屬于一種新的店面形式，主要以實現(xiàn)在線銷售鮮花為主，一般沒有實體店面，收到顧客訂單后將訂單轉(zhuǎn)手給實體商戶，具有快速，方便的特點。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"美好的事物總是受人們的歡迎，鮮花更是不例外。開花店是不錯的選擇，如何開網(wǎng)上花店？開網(wǎng)上花店的人也很多，怎樣才能讓你的鮮花店與眾不同呢？"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"開網(wǎng)上花店對于鮮花店投資多少?鮮花店裝修、經(jīng)營以及鮮花店利潤都要有一個全面的了解才行，這樣你才知道究竟該怎樣開鮮花店。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"如何開網(wǎng)上花店?"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"花的成本較低，一次性進(jìn)貨的數(shù)量不會很多，所以先期投資不是很大，主要是店鋪的租賃和裝修。如果要開一家規(guī)模較大、格調(diào)高雅、技術(shù)水平較高的花店，那么就需要在店面的基礎(chǔ)上加上一間倉庫。昂貴的鋪位租金、龐大的裝修費用、技術(shù)人員培訓(xùn)費用和薪金以及較大的流動資金算在一起就需要10多萬元。但是如果只是開一家小花店，幾千元也可以搞定。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"鮮花店的裝修應(yīng)注意盡量節(jié)省空間,在這個基礎(chǔ)上在以自己的風(fēng)格來做.花店的布置很重要，精巧、美麗的布置，不但能吸引消費者的視線，引領(lǐng)其走進(jìn)花店，而且巧妙的布置可以刺激顧客的購買欲。要在激烈競爭中脫穎而出，花店裝修便成了花店是否能擴充顧客。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"網(wǎng)站的目錄結(jié)構(gòu)如下："},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"images ------存放圖片文件"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"js -------存放js文件"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"music ------------------存放單曲詳情頁"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"index.html ---------------首頁"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"tuijian.html -----------推薦頁面"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"rank.html --------------榜單頁面"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"category.html-----------分類頁面"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"style.css ------CSS文件"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"Lightbox.css ----------css文件"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"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é)省了其他頁面的編寫時間。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"2.detail.html是商品的詳細(xì)頁，中間左側(cè)內(nèi)容為商品的詳細(xì)信息介紹。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"3. cart.html 是購物車的界面，繪制了一張表格完成了運費和總價的計算。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"4. category.html 是關(guān)于頁面，簡介“初心花店”創(chuàng)始人李強的賣花創(chuàng)業(yè)故事。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"5. speacials.html 是特色爆款頁面，主要介紹本店主打的爆款鮮花。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"6. Contact.html 是聯(lián)系頁面，提供了一個留言表單。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"網(wǎng)頁總體布局和版式設(shè)計："},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"其中header、footer和右側(cè)側(cè)邊欄的版式是固定不變的，各個頁面的主體內(nèi)容根據(jù)所要表達(dá)的主題內(nèi)容采取多種靈活地版式設(shè)計。網(wǎng)頁整體采取淡雅、自然、溫馨的和鮮花顏色映襯的色系。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"網(wǎng)頁所采用的技術(shù)"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"在制作過程中，使用的ide是HBuilderX，網(wǎng)站初步測試事在Chrome瀏覽器上完成。開始時候并不順手，隨著課堂的深入以及知識的學(xué)習(xí)，慢慢熟悉起來。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"網(wǎng)頁采用了純html+css+jquery，在完成網(wǎng)頁的過程中，順便補充了jquery方面的知識，方便自己編寫動畫特效，發(fā)現(xiàn)相對于js，jquery封裝之后的使用的確方便了許多，許多方面本來應(yīng)該十分繁復(fù)的地方，jquery封裝之后再進(jìn)行使用就變得十分的輕便，而且解釋起來也十分的方便。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"在運用js的過程中也調(diào)用了課上教的一部分內(nèi)容。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"CSS樣式用的最多的是文字以及布局的一些設(shè)置，常常因為一個樣式的大小位置調(diào)來調(diào)去。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"整體的HTML，采用了網(wǎng)頁互通，串成了一個整體。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"主要網(wǎng)頁截圖"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"1.首頁（index.html）"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"本頁面用了做了頁頭，中間，和頁尾部分。中間主體內(nèi)容是介紹主打產(chǎn)品和產(chǎn)品，采用div+css的布局實現(xiàn)，截圖如下："},{"attributes":{"align":"justify"},"insert":"\n\n\n\n"},{"insert":"頁頭包含logo、背景圖片和網(wǎng)頁導(dǎo)航三部分，其中網(wǎng)頁導(dǎo)航采用橫向列表實現(xiàn)，截圖如下："},{"attributes":{"align":"justify"},"insert":"\n\n\n\n"},{"insert":"中間右側(cè)分類導(dǎo)航欄（含滾動字幕）及頁尾是采用div+css布局實現(xiàn)的。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"2 詳情頁（details.html）"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"詳情頁是參考了淘寶等商城商品的布局實現(xiàn)的。截圖如下："},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"3 購物車（cart.html）和分類（category.html）"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"購物車和分類頁面主體內(nèi)容均使用表格布局實現(xiàn)，截圖如下："},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"心得與體會："},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"1.首先個人感覺HTML以及CSS，JS，jQuery等學(xué)習(xí)使比較瑣碎的，對于這門課程的學(xué)習(xí)，死記硬背不太適用，需要在嘗試中不斷學(xué)習(xí)。學(xué)習(xí)ps的時候，老師給我們講ps是選擇的藝術(shù)，我覺得這門課程也有著選擇的重要性，要在選擇嘗試中不斷改進(jìn)，使得成果更讓人賞心悅目。在最后一次大作業(yè)的完成中，我們小組內(nèi)就是通過不斷地修改，不斷地嘗試完成的，雖然畫面不是很美觀，但是整個過程也變得更加熟練了。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"2.要勤奮要勤奮要勤奮，重要的事情說三遍。只要和代碼相關(guān)的東西，我覺得勤奮是必不可少的。一定要自己親手練習(xí)，多多嘗試，才會將知識記在自己的腦子里。"},{"attributes":{"align":"justify"},"insert":"\n\n"},{"insert":"以上兩點都是個人學(xué)習(xí)后的感想，接下來還會繼續(xù)分享學(xué)習(xí)過程中的心得體會。"},{"attributes":{"align":"justify"},"insert":"\n"},{"insert":"\n"}]}