 |
| 昵称：奈薇建站网 |
| 论坛积分：108060 |
| 发贴等级：21 |
    
    |
| 发贴数：1159 |
| 回贴数：1282 |
被砸鸡蛋： 1 |
获赠鲜花： 182 |
|
 |
|
|
发表时间：2016/4/18 19:46:00 |
楼 主 |
|
 |
|
 |
|
时光商店下载网页设计
第一次写开发过程==（并不知道应该怎么写）
写在前面
如果想成为一个码农，肯定要有良好的代码习惯以及文件的规范存放，以便于以后的查看。
网页的设计，主要由三部分构成，结构（html）、样式（css）、行为（JavaScript）
开发前先建立css文件夹，js文件夹，images文件夹（用于存放网页开发用到的图片资源）
以前刚接触网页设计时，并没有这些良好的习惯，图片什么的js，css全扔在一起，很不便于复查
所以在这里说一下，给像我一样的网页开发菜鸟一个提醒
同样的代码的规范也很重要，每个主要div模块的开始与结束最好做上注释，这样对于以后的代码的检查非常方便，特别是当你的代码越写越多的时候。
最后一点，id或者class等的命名最好是有意义的英文单词，英语不好的可以打上注释，看多几遍就记住了，也方便复查
==之前的我喜欢用W、S等随意命名，一旦代码多了，看到这个W的Css样式也就想不起来这个w是干嘛的
写了这么多废话，实在不好意思
——致刚进入网页开发的小伙伴们
时光商店app
网页的设计，主要由三部分构成，结构（html）、样式（css）、行为（JavaScript）
第一至第三天：结构的设计
相对于css与js，网页的结构才是基础与核心。打好地基尤为重要。
所以这花了我很多天去网上找网页设计的模板，去画设计草图。上课的时候也在构思，也在画图纸。也问朋友这样子丑不丑。
当确定网页的基本结构就可以开始进行div的构建，并进行命名。
首页home——服务service——特点character——介绍层floor——下载区download——关于我们company——产品开发设计design——页脚foot
第四天至第五天：首页设计
首页home
首页设计背景图片尤为重要，因为可以用于展示app（背景图片尚未确定，随便p了一张，比较丑的，希望后期制作的时候这款app的欢迎页有人设计出来后，便可以将它加入首页的背景图片里）
当时设计了这两款（师兄看那两款好看？？）第二款是参照网页模板的
两款home的设置基本相似
具体css设置不详述。
第五至六天：服务模块设计
当时也是设计了两种（第一种因为当时看了约单的网页页面，受了影响，设计的全是大图片当背景其实全是大图片当背景在网页开发中用不好容易变丑变丑变丑有木有==特别是当图片选择不当时，一股违和感，怎么换都没感觉。有一阵子一直在找背景，换背景，一直在测试==有点崩溃）
最后选择了第二种
两款结构的设置差不多
都是四格格式
首先一个大的divService，css附上背景
再一个containerdiv来控制内容的居中显示（containerdiv在每个div的设计中都会用到，可以用于控制内容与整个大背景的位置）
接着是四个子div，具有图片logo，标题h3，段落p，详细的css不赘述
第六天：特点character
采用三个图标加上简洁的文字概括这款app的的特点
简洁的图标加上文字概括其实是更有利于访问者获取信息的
第七天：介绍层floor
介绍层floor用于详细介绍这款app的具体功能，目前只有三层，在以后的深入探讨中可以加入需要的内容
介绍层的格式采用左图右字——左字右图——左图右字——……比较友好的设计
（在网页设计中经常会看到这一种，左图右字，上图下字之类的，比较方便，有木有。而且代码可以重复使用，有木有。）
只需设计一个大的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>集创意，健康理念，便捷，针对性强，大众化于一身</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>发布需求</h3><p>可以发布属于自己的时光需求，即创建一张时光单，在这里，你可以选择完成时光单的时间，地点，用户要求。</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 |
|
 |
 |
 |
|
奈薇建站网致力于，让每个中国人、每个中国企业都拥有自己的“官方网站”！ |
|
|
|
|
|