前段时间改了个网站,当时那个网站使用的就是bootstrap,从那时起才知道什么是bootsstrap,什么是响应式布局。在改网站的过程中,也写了两篇文章,这两篇文章也主要是使用思路和网站修改中使用bootstrap的功能。文章如下:
【随笔】前端框架Bootstrap在网站开发中的应用
BootStrap弹出层操作
自从网站功能改完后,对bootstrap就产生了兴趣。业余时间学了下bootstrap,正好自己也想推几个关键词试试,做做seo,所以就利用晚上时间做了个网站,网站的前端是使用bootstrap,服务器语言是c#,网站地址:shandongit.com
我对css明白一些,知道元素、熟悉怎么使用。但是我对布局啊、图片啊、颜色搭配啊没什么感觉。所以这个网站是从bootstrap官方提供的实例改版而来。布局双栏,加入头部尾部,再加入网站自身功能相关的元素。由于使用bootstrap,所以网站的前端很快就完成了,然后就是功能。
功能对我来说很简单,我的目的首先是搭建起来,然后是完善功能。所以第一步只是实现了基本功能,也就是动态设置页面标题关键词描述,添加分离,添加关键词,添加文章等。实现这些功能用了不到两个星期,其它的功能再一点一点的加吧。
网站开发总结
1.开发环境,网站使用的是asp.net应用程序,而不是现在流行的mvc。数据库为sql server,使用存储过程来进行数据操作。使用三层架构。
2.网站布局,由于使用bootstrap,css几乎没写几行代码。bootstrap官方有很丰富的使用文档,例如双栏的实现:
<div class="row">
<div class="col-lg-8">
</div>
<div class="col-lg-4">
</div>
</div>
还有分页,bootstrap使用li来显示分页样式
<ul class='pagination'>
<li><a href='#'>«</a></li>
<li class='active'><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li><a href='#'>»</a></li>
<ul>
至于其它的可以看bootstrap官方文档,使用真的太方便了
3.封装常用样式,方便调用。在网站开发时,有些样式时常用的,需要封装在类里,方便调用。常用的代码一定要抽取出来。这一块有些老生常谈,面向对象+重构。
4.如果功能相似,最好将功能封装在一个页面。例如文章的添加、修改应该是一个页面,通过参数来判断相关操作。
5.seo,首先是需要动态的设置网站标题、关键词和描述等。标题和描述经常使用,所以写到了web.config中。关于如何写web.config,可以看这篇文章读写web.config文件 。文章有分类,分类页可以设置关键词描述。而文章的关键词,首先判断表中是否存在,如果不存在就插入,存在就加1,方便以后的统计。关键词也可以设置seo的相关信息。文章也类似。但是我对h1,h2,h3,h4的使用不合理,以后等文章多了再改吧。我一直想把网站标题设置为h1,h2为菜单栏,h3为标题,h4为关键词。但是等等吧。伪静态,方便seo。
6.权限的判断,主要操作来自于这篇文章:asp.net网站的权限判断
7.富文本编辑器使用的是ckeditor,具体使用可看:富文本编辑器CKEditor使用总结 。 使用ckeditor主要原因是不用几乎不用写js代码,减少代码量。
8.类库。一定要建一个自己的类库,开发使用方便。类库的整理很简单,如以前开发中常用的代码,别人分享的代码等。
9.上传操作。上传操作分为两部分,一部分是ckeditor涉及到到上传,另一部分是头像的设置、文章分类的设置等使用单独一个页面。上传使用的主要技术来自于下面的文章:网站开发常用jQuery插件总结(17)上传插件blueimp asp.net图片上传操作总结