 |
| 昵稱：奈薇建站網(wǎng) |
| 論壇積分：108000 |
| 發(fā)貼等級：21 |
    
    |
| 發(fā)貼數(shù)：1156 |
| 回貼數(shù)：1282 |
被砸雞蛋： 1 |
獲贈鮮花： 182 |
|
 |
|
|
發(fā)表時間：2016/4/18 19:46:00 |
樓 主 |
|
 |
|
 |
|
時光商店下載網(wǎng)頁設(shè)計
第一次寫開發(fā)過程==（并不知道應該怎么寫）
寫在前面
如果想成為一個碼農(nóng)，肯定要有良好的代碼習慣以及文件的規(guī)范存放，以便于以后的查看。
網(wǎng)頁的設(shè)計，主要由三部分構(gòu)成，結(jié)構(gòu)（html）、樣式（css）、行為（JavaScript）
開發(fā)前先建立css文件夾，js文件夾，images文件夾（用于存放網(wǎng)頁開發(fā)用到的圖片資源）
以前剛接觸網(wǎng)頁設(shè)計時，并沒有這些良好的習慣，圖片什么的js，css全扔在一起，很不便于復查
所以在這里說一下，給像我一樣的網(wǎng)頁開發(fā)菜鳥一個提醒
同樣的代碼的規(guī)范也很重要，每個主要div模塊的開始與結(jié)束最好做上注釋，這樣對于以后的代碼的檢查非常方便，特別是當你的代碼越寫越多的時候。
最后一點，id或者class等的命名最好是有意義的英文單詞，英語不好的可以打上注釋，看多幾遍就記住了，也方便復查
==之前的我喜歡用W、S等隨意命名，一旦代碼多了，看到這個W的Css樣式也就想不起來這個w是干嘛的
寫了這么多廢話，實在不好意思
——致剛進入網(wǎng)頁開發(fā)的小伙伴們
時光商店app
網(wǎng)頁的設(shè)計，主要由三部分構(gòu)成，結(jié)構(gòu)（html）、樣式（css）、行為（JavaScript）
第一至第三天：結(jié)構(gòu)的設(shè)計
相對于css與js，網(wǎng)頁的結(jié)構(gòu)才是基礎(chǔ)與核心。打好地基尤為重要。
所以這花了我很多天去網(wǎng)上找網(wǎng)頁設(shè)計的模板，去畫設(shè)計草圖。上課的時候也在構(gòu)思，也在畫圖紙。也問朋友這樣子丑不丑。
當確定網(wǎng)頁的基本結(jié)構(gòu)就可以開始進行div的構(gòu)建，并進行命名。
首頁home——服務service——特點character——介紹層floor——下載區(qū)download——關(guān)于我們company——產(chǎn)品開發(fā)設(shè)計design——頁腳foot
第四天至第五天：首頁設(shè)計
首頁home
首頁設(shè)計背景圖片尤為重要，因為可以用于展示app（背景圖片尚未確定，隨便p了一張，比較丑的，希望后期制作的時候這款app的歡迎頁有人設(shè)計出來后，便可以將它加入首頁的背景圖片里）
當時設(shè)計了這兩款（師兄看那兩款好看？？）第二款是參照網(wǎng)頁模板的
兩款home的設(shè)置基本相似
具體css設(shè)置不詳述。
第五至六天：服務模塊設(shè)計
當時也是設(shè)計了兩種（第一種因為當時看了約單的網(wǎng)頁頁面，受了影響，設(shè)計的全是大圖片當背景其實全是大圖片當背景在網(wǎng)頁開發(fā)中用不好容易變丑變丑變丑有木有==特別是當圖片選擇不當時，一股違和感，怎么換都沒感覺。有一陣子一直在找背景，換背景，一直在測試==有點崩潰）
最后選擇了第二種
兩款結(jié)構(gòu)的設(shè)置差不多
都是四格格式
首先一個大的divService，css附上背景
再一個containerdiv來控制內(nèi)容的居中顯示（containerdiv在每個div的設(shè)計中都會用到，可以用于控制內(nèi)容與整個大背景的位置）
接著是四個子div，具有圖片logo，標題h3，段落p，詳細的css不贅述
第六天：特點character
采用三個圖標加上簡潔的文字概括這款app的的特點
簡潔的圖標加上文字概括其實是更有利于訪問者獲取信息的
第七天：介紹層floor
介紹層floor用于詳細介紹這款app的具體功能，目前只有三層，在以后的深入探討中可以加入需要的內(nèi)容
介紹層的格式采用左圖右字——左字右圖——左圖右字——……比較友好的設(shè)計
?。ㄔ?a href="http://zfvayp.cn/" target="_blank" title="網(wǎng)頁設(shè)計">網(wǎng)頁設(shè)計中經(jīng)常會看到這一種，左圖右字，上圖下字之類的，比較方便，有木有。而且代碼可以重復使用，有木有。）
只需設(shè)計一個大的div里面嵌套左右兩個div。進行css控制即可。
<body><!--首頁home--><divclass="home"><divclass="container"><divclass="home-right"><divclass="logo"><ahref="index.html">時光商店App <imgsrc="images/logo.png"></a></div><divclass="home-introduction"><p><br>校園互動服務社交軟件<br>隨時隨地完成自己的時光交易<br>集創(chuàng)意，健康理念，便捷，針對性強，大眾化于一身</p><ahref="#Down">下載</a></div></div><divclass="clearfix"></div></div></div><!--//首頁home--><!--服務service--><divclass="service"><divclass="container"><divclass="bottom-grids"><divclass="col-md-6bottom-grid"><divclass="bottom-left"><imgsrc="images/heart.png"></div><divclass="bottom-right"><h3>發(fā)布需求</h3><p>可以發(fā)布屬于自己的時光需求，即創(chuàng)建一張時光單，在這里，你可以選擇完成時光單的時間，地點，用戶要求。</p></div><divclass="clearfix"></div></div><divclass="col-md-6bottom-grid"><divclass="bottom-left"><imgsrc="images/nav.png"></div><divclass="bottom-right"><h3style="color:18d2ff;">定位</h3><p>時光商店是基于地理位置服務與提供一定時間服務買賣交換功能。用戶能夠搜索用戶位置附近其他用戶互動信息，可看到附近其他用戶銷售的時光單、評論等信息。</p></div><divclass="clearfix"></div></div><divclass="col-md-6bottom-grid"><divclass="bottom-left"><imgsrc="images/people.png"></div><divclass="bottom-right"><h3>互動交流</h3><p>提供雙向互動服務。用戶可在平臺上進行互動交流。</p></div><divclass="clearfix"></div></div><divclass="col-md-6bottom-grid"><divclass="bottom-left"><imgsrc="images/search.png"></div><divclass="bott |
|
 |
 |
 |
|
奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ |
|
|
|
|
|