手把手教你用Bootstrap开发网站(demo)

作为一个web前端攻城狮，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。 

作为一个后端攻城狮，这个框架也是再适合不过去学习的了。简单上手，也能做出很专业、美观的页面，极大地提高了工作效率。

像下面这些漂亮的网站就是基于Bootstrap来开发的： 
http://expo.bootcss.com/

Bootstrap的中文文档地址在这里  

Bootstrap 中文文档http://v3.bootcss.com/，目前主流版本为 3.3.x。


  
注意  

  因为文档的内容结构比较零散讲解的比较详细，只是从头到尾把一个个组件拆开来讲一遍，缺乏趣味性和实战性， 

  我会手把手教你开发几个完整案例，在实践的过程中来学习和理解 Bootstrap这个前端开发框架的知识。




一个企业网站的基本结构

企业网站是十分常见的一种页面形式。一般包括

一个展示企业形象的首页、 
几个介绍企业资料的文章页 
一个“关于”页面。
如下就是最终的首页顶部效果，是不是感觉效果还不错，那么接下来就跟我进入开发的世界吧！ 



  
项目结构与页面规划


我们先创建站点目录，例如放在 web 站点 bootstrapCase下，在里面新建一个 Template目录，用于存放页面 html 文件，新建一个 assets目录，存放图片、自定义样式表等静态资源文件，以及一个 js目录，存放自己写的 javascript 代码。 


然后在Template目录里，把这个项目的所有文件创建好：

首页(index.html) 

客户案例详情(case.html) 

联系方式及意见反馈表单(about.html)

javaEE能做什么?
javaEE主要用来做一些大型网站的后台的开发.
http协议：用于从服务器传递数据到本地浏览器的协议。

www：万维网，全称:环球信息网。能够让我们通过浏览器访问web服务器上的一个页面。

网站结构优化的基本方法
网站结构优化就是对网站页面的存储方式（物理结构）、内部链接关系（逻辑结构）进行合理的调整，以减少网站的目录层级，优化普通页面与重要页面之间的链接深度，增加重要页面的链接入口，最后达到所有页面都能被搜索引擎方便地收录，并且合理分配网站内部页面权重的目的。
物理结构优化的基本方法
物理结构优化主要是减少网站页面的目录存储深度，一般以URL的目录层次作为标准。在通常情况下，网站物理结构优化包括以下两点：
— 建立含关键词的子目录
一般说来，网站建设者在优化物理结构时，不提倡将所有文件都存放在根目录下，而应该按栏目内容建立子目录，并且尽量使用意义明确的目录名称，比如image、css、js、post、bbs等，但是注意目录名称不宜太过冗长，URL应该越短越好。
目录和文件命名可以适当使用关键词，如果是关键词组，需要用分隔符分开。现在很多CMS直接提供以关键词拼音的方式建立文件夹，如图3.5所示。
 
— 有条件地缩短目录的深度、长度
虽然建议在优化物理目录时，创建一定的子目录来进行页面的分类和整理，但是网站的目录层级一般建议不要超过3层。比如，很多CMS默认生成的页面存储结构如下：
Http://www.xxx.com/html/seo/seo.html
Http://www.xxx.com/html/sem/sem.html
Http://www.xxx.com/html/chuangye/chuangye.html
在物理结构优化中，应该去掉上述目录中的“HTML”，产生以下的URL：
Http://www.xxx.com/seo/seo.html
Http://www.xxx.com/sem/sem.html
Http://www.xxx.com/chuangye/chuangye.html
优化目录的深度其实不单单为SEO，还有很多其他好处，比如，较少层级的目录更容易被访问者记忆，更容易被传播，更容易交换链接等有益于用户体验的地方。
优化物理结构的长度其实就是在允许的情况下，对网站目录的改写、缩写或者同义替换。举例来说，如果网站的一个目录是“SEO”，那么一般没有必要将“SEO”这个目录改成“sousuoyinqingyouhua”，因为搜索引擎看得懂“SEO”这个词的意思。
逻辑结构优化的基本方法
逻辑结构优化主要是减少页面之间的链接深度，包括减少普通页面与重要页面之间、重要页面与重要页面之间的链接深度，以及为网站中相对重要的页面增加更多的链接入口等方面。
— 增加重要页面中的链接数量
在相对重要的页面中，如果存放更多的链接指向其他页面，不但可以减少页面之间的链接深度，还可以引导搜索引擎抓取网站中更多的页面，传递权重。
网站首页一般是最重要的，在网站首页中，适当地增加内页的指向链接，有助于搜索引擎抓取内页。在现在的CMS系统中，网站首页一般都会产生最新更新的内容链接，这样就能让搜索引擎快速发现网站的最新页面，并且快速收录，如图3.6所示。
 
— 增加重要页面的链接入口
在更多的网站内部页面中增加指向重要页面的链接，可以有效增加网站中相对重要页面的链接入口，从而增加这些页面的链接权重。
在网站的结构优化中，片面地理解物理结构和逻辑结构的优化都是不行的，应当综合考量。比如，不管内容页所处的目录层级有多深，只要该页有一个或者大量来自其他网站的外部链接和内部网站的大量内部链接，它同样会被搜索引擎快速发现，并给予较高的权重。
 
本文选自《实战SEO——实用技法与案例剖析 》一书
图书详细信息:http://blog.csdn.net/broadview2006/article/details/6790348
 

文章目录
网页的基本结构
一.网页的浏览器结构
二.Html网页的文档结构
三.快捷键：
四.标签和元素

网页的基本结构
一.网页的浏览器结构
网页主要由导航栏、栏目、正文内容组成的.
导航栏相当于网站的菜单一样；栏目是网页中存放相同性质内容的区域，帮助用户快速获取信息；正文内容是指主体内容，相当于文章本身。
二.Html网页的文档结构
<metacharset=“utf-8” />
meta标签只有1个标签，单标签。
charset=“utf-8”，叫标签属性，写在开始标签中，格式：属性名 = 属性值;
charset编码格式，字符集。
3.1   中国： gb2312。
3.2   美国： ASCII。
3.3   万国码： utf8。
三.快捷键：
1.注释快捷键: ctrl + / 。注释的作用：用来解释说明，不属于代码的一部分。

2.保存快捷键：ctr+s 。

3.运行快捷键：ctr+r（run） + 1 。
四.标签和元素
标签：用一对尖括号括起来的就叫标签。
元素：一对标签就叫1个元素，单标签也叫1个元素。
元素嵌套（标签嵌套）：
Html元素叫做head元素和body元素的父元素。
Head元素和body元素叫做html元素的子元素。
Head元素和body元素是兄弟元素。