下面我们可以编辑网页的内容的代码 ... 在网页代码模式后面是这个网页的视图模式，它可以实时预览网页的变化 ... 相当于我们用浏览器打开了这张网页 。
在网页的主体部分，先输入一组 <body> 标签 ...
在这组标签里，我们再去实施页头部分和其它部分的设计。在前面我们看到了，页头这排内容分成两块，左边是标志，右边是搜索栏 ...
对于一个区域的头部内容，我们可以使用 <header> 标签来标记。先输入一组 <header> 标签 ...
然后我们可以设计这部分内容的布局，这里我们可以使用 Bootstrap 架构设计好的布局形式 ...
先输入一组 <div> 标签 ... 然后在这组标签上添加一个 .container 类 ... bootstrap 定义了这个类的样式 ...
在它的里面再输入一组 <div> 标签 ... 在这组标签上，添加一个 .row 类。然后在这组标签里我们可以再添加两组 <div> 标签 ...
在第一组 <div> 标签里添加 标志 内容，第二组 <div> 标签里添加搜索框 ...
Bootstrap 把一排内容的宽度分成了12份，这里我们让这两组 <div> 标签各占一半的宽度。
12 除以 2 等于 6，在第一组 <div> 标签里，添加一个 span6 的类 ... 这样这组 <div> 标签会占用12份宽度的6份，也就是占用一半的宽度。
同样在第二组 <div> 标签里，也添加一个 span6 类 ...
在第一组 <div> 标签里，我们添加标志的图像 ...
在网页中插入图像，可以使用 <img> 标签，输入 <img src="images/logo.png" alt="凤凰社">
src 属性的值就是l图像的位置 ... 我们的l标志图像相对于这个网页来说是在 images 目录下面 ...
后面 alt 属性是图像的替代文字，为 <img> 标签添加一个 alt 属性，简单的描述一个图像的内容 ...
如果你想让用户点击这个图像链接到某个位置，可以在它的周围添加一组 <a> 标签 ...
<a> 标签的 href 属性可以定义链接到的位置，这里我们先用一个 # 号代替，你可以把 # 号替换成任何位置 ... 在 <a> 标签里，我们还可以添加一个 title 属性，描述一下这个链接会把用户带到哪里去 ...
输入 title="回到首页" ...
搜索框
下面我们来设计一下搜索框，Bootstrap 框架设计了一些很漂亮的表单元素， 我们可以先去看一下 ....
打开 twitter.github.com/bootstrap ... 打开 Base CSS ... 然后点击 Forms ... 在这里你可以查看 Bootstrap 为表单相关的设计 ...
找开一个合适的设计 ...
比如这个 ... 一个简单的文本框，加上一个漂亮的按钮 ... 想要同样的效果，我们可以复制一下这个设计的代码结构 ...
回到我们的网页 ...
找到 <header> 部分里面的第二组 <div> 标签 ... 把刚才复制的代码粘贴过来 ...
修改一下按钮文字 ... 输入 搜索 ，在这个 <input> 元素上使用了一个 span2 的类，这个类决定了文本框的长度，这里我们改成 span3 ...
现在，页面中会显示一个标志，还有一个搜索框 ... 下面视频我们修改下这页头部分的样式 ...
