实例讲解HTML5制作一个时尚类网站http:///view/fashion 一个网页的构成分为3部分: 1:html (内容) 2:css (表现) 3:JavaScript (行为) 一般大家说的行为和表现从内容上分离,就是说css和JavaScript从html文档里面分离开来,比如css另建一个style.css的专门文件,或者js.js的专门文件。 css用来控制内容的表现(就是你看到的丰富的效果),而JavaScript用来控制页面的动态交互的行为(就是你操作中的动态的交互)。 好了,大致就是这样,很简单吧? 再对照着看这个案例 http:///view/fashion 整个网站的左上角是logo和导航,当点击导航的具体内容右侧会弹出内容( 你可以先试试)。在网站的底部有一个页脚。 大致也是这样3块:头部,内容区域,页脚 所以我们按照上次说的那样先把整个页面的大框架定下来: <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>一个时尚类的网站</title> <!--[if lt IE 9]> <script src="http://html5shiv./svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header></header> <section></section> <footer></footer> </body> </html> (在接下去的部分,我只把在<body></body>标签里面的内容写出来,这样方便浏览。) 在logo区域,只有一个logo和一句简单的描述,于是我这样写: <header> <h1>banLab</h1> <em>design for fashion</em> </header> (你在网站上看到的不是这样的,因为当时我是设计和前端一起做的,一开始是想拟一个副标题的,所以当时是这样写的: <header> <hgroup> <h1>banlab</h1> <h1>副标题</h1> </hgroup> </header> 这里<hgroup>标签用来包裹连续的标题标签(<h1> 至<h6>),它是一个html5才有的新标签。不过我们看到网站上design for fashion的意思更像是一句补充的说明,所以我用了一个<em>强调的标签来描述。这样从内容上看起来,也更符合语义了,你觉得是不是? 在头部的下面有一个导航,我们用<nav>标签。接下去你先把导航全部内容展开,你是否看到,这个导航是个2级导航,每个一级导航下面都有一个子分类。 对于这样的关系,我们一个一个的插子<nav>标签会觉得很吃力,因为还有更好的html(5)标签来处理这种关系。于是我这样写: <nav> <dl> <dt>Works</dt> <dd>Web Design</dd> <dd>Web Developemnt</dd> <dd>Graphic Design</dd> <dt>Catelogo1</dt> <dd>Catelogo1_item1</dd> <dd>Catelogo1_item2</dd> <dt>Catelogo2</dt> <dd>Catelogo2_item1</dd> <dd>Catelogo2_item2</dd> <dt>Catelogo3</dt> <dd>Catelogo3_item1</dd> <dd>Catelogo3_item2</dd> </dl> </nav> 以上Catelog是我自定的名字,如果你们喜欢的话,可以下载之后,然后更改具体的栏目名称。 <dt>和<dd>用来定义一个“定义列表”,它与"<ul>和<li>"以及"<ol>和<li>"这两个组合不同,形象点的解释就是: <dd>标签里面的内容是<dt>标签内容的说明,他们必须有这样的关系。如果两个区域的内容毫不相干,那么就不适用<dt>和<dd>来处理。其他标签的用法一样,虽然几乎任何合法的html5标签都能实现同样的效果,但是我们也希望我们写的html5代码读起来更像一篇语义正确的文章。 而且需要注意的是:<dt>后面不能缺少<dd>标签,而且他们都必须包裹在<dl>标签内部,这样才是一个合法的完整的"定义列表"。 我当初没有把<nav>放在<header>内部,也是由于当时一开始做的时候他们不是组合在一起的缘故,后来(当然是)懒得改了。 但是从最终的效果来看,似乎把logo和导航组合一起写更合适: <header> <h1>banLab</h1> <em>design for fashion<em> <nav> <dl> <dt>Works</dt> <dd>Web Design</dd> <dd>Web Developemnt</dd> <dd>Graphic Design</dd> <dt>Catelogo1</dt> <dd>Catelogo1_item1</dd> <dd>Catelogo1_item2</dd> <dt>Catelogo2</dt> <dd>Catelogo2_item1</dd> <dd>Catelogo2_item2</dd> <dt>Catelogo3</dt> <dd>Catelogo3_item1</dd> <dd>Catelogo3_item2</dd> </dl> </nav> </header> 当然,在每个可以点击的地方,我都插入了一个<a>标签,用来说明这是一个链接,可以点击,这样整个头部和导航就完成了。 接下去是内容区域,因为导航有4大块:work,catelog1,catelog2,catelog3. 所以我写了对应的4个并列的<section>,并且都给他们用唯一的#id来命名。他们是这样的: <section id="work"></section> <section id="catelog1"></section> <section id="catelog2"></section> <section id="catelog3"></section> 这就是4块具体的内容。当然如果想让整个HTML的DOM结构更加清晰,还可以在这4个<section>外面再用一个<section>标签包裹,于是是这样的: <header> <h1>banLab</h1> <em>design for fashion<em> <nav> <dl> <dt>Works</dt> <dd>Web Design</dd> <dd>Web Developemnt</dd> <dd>Graphic Design</dd> <dt>Catelogo1</dt> <dd>Catelogo1_item1</dd> <dd>Catelogo1_item2</dd> <dt>Catelogo2</dt> <dd>Catelogo2_item1</dd> <dd>Catelogo2_item2</dd> <dt>Catelogo3</dt> <dd>Catelogo3_item1</dd> <dd>Catelogo3_item2</dd> </dl> </nav> </header> <section id="content"> <section id="work"></section> <section id="catelog1"></section> <section id="catelog2"></section> <section id="catelog3"></section> </section> 接下去,我们写4大块内容的具体内容,他们与导航的4大分类的子菜单对应,完整的是这样的: <section id="content"> <section id="work"> <section id="work_design"></section> <section id="work_web"></section> <section id="work_graphic"></section> </section> <section id="catelog1"> <section id="catelog1_item1"></section> <section id="catelog1_item2"></section> </section> <section id="catelog2"> <section id="catelog2_item1"></section> <section id="catelog2_item2"></section> </section> <section id="catelog3"> <section id="catelog3_item1"></section> <section id="catelog3_item2"></section> </section> </section> 而具体的内容则在这些内部的区域里面,看到他们像列表,于是我们可以用<ul>和<li>标签来写,说明这是一个无序列表。我们就写其中的第一个,因为其他的都是相同的,所以到时候可以直接复制: <section id="work_design"> <ul> <li></li> <li></li> <li></li> </ul> </section> 继续在列表内部写每个具体的项目: <section id="work_design"> <ul> <li> <div> <a href=""> <figure> <img src="image/work/thumb/pic1.jpg"> <figcaption>pic1</figcaption> </figure> </a> </div> </li> <li> <div> <a href=""> <figure> <img src="image/work/thumb/pic2.jpg"> <figcaption>pic2</figcaption> </figure> </a> </div> </li> <li> <div> <a href=""> <figure> <img src="image/work/thumb/pic3.jpg"> <figcaption>pic3</figcaption> </figure> </a> </div> </li> </ul> </section> 你可以看到在这里我用<div>标签来包裹每一个具体的项目,因为在这里似乎<section>反而不合适,它缺少上下文的语境,只是用来布局的。 在<div>内部,我用了一个<a>标签来包裹图片,而具体的图片<img>和图片的说明<figcaption>都放在<figure>内部。 接下去里面的内容可以直接复制到其他的区域了,因为他们都有相同的样式(css)以及结构上的位置也相同。 最后写页脚: 我们看到有一个版权的说明以及一组导航。于是我们可以这样写: <footer> <p>© 2012 BANLAB ™</p> <nav> <h1>关注我们:</h1> <ul> <li>Google+</li> <li>微薄</li> <li>Twitter</li> <li>Facebook</li> <li>Tumblr</li> <li>腾讯微薄</li> <li>豆瓣<li> </ul> <a href="#">更多?</a> </nav> </footer> © 显示出来的就是?,当然你也可以直接输入?,而™显示出来的效果就是显示在左上角的商标样式:TM。但是要注意的是:在使用这样的命名字符时候,末尾必须有分号" ; ",不然在w3验证网站上验证后会显示错误。 我把"更多?"从底部的社交网络导航内部分离出来,因为它不是他们其中的一员。就像员工车辆前面的司机,身份与车厢内的同事还是有一点点区别的。(我不是歧视的意思,抱歉!),但是不管如何,他们都在同一辆车上。 到此为止,所有的结构都完成了。 接下去我们写样式(css),由于css3的某些新的选择器IE6几乎都不支持(包括IE8可能少部分都不支持),所以在实际操作当中,如果你很介意IE6用户的话,我说的内容可能不是很适合。 css3引入了很多新的选择器,借助这些新的选择器可以让html5文档看起来更加整洁干净。 还是从头开始,我们先写头部和导航的区域: 由于<header>和<section id="content">,<footer>都是属于<body>的子元素: <body> <header></header> <section id="content"></section> <footer></footer> </body> 看到了吗? 需要说明的是css里面的子元素指的是往下第一级的元素。 于是我们可以这样写: body > header {} body > section{} body > footer{} 就是这样!body>header就是特指这个header,而在页面内部section或者article出现的其他<header>标签都不在选择范围,由于在一个html(5)文档中,<body>标签是唯一的,所以他们的意思就是选择body下的(第一级)子元素:header,section,footer. 这样我们就可以在html5文档里面省去为这3个元素添加class(类)或者id(名)了,html(5)文档看起来也会更加干净整洁。 根据同样的方法,我们可以选择<header>标签内部的<nav>,以及<nav> 内部的每一条具体的导航栏目,给他们设置对应的样式。 不过由于在这个<header>内部只有唯一的一个<nav>,所以我们也可以省略">",因为有时候太多">"(子选择器)看起来也是烦人的(就像我平常自己工作中一样)。 所以我们 对照上面的html结构,可以这样写导航的样式: body> header{} body> header h1{} body> header em{} body>header nav{} body>header nav dl{} body>header nav dl dt{} ( 或者:body>header nav dt{} ) body>header nav dl dd {} ( 或者:body>header nav dd {} ) 如上小括内的,由于dt和dd都是nav下面唯一dl内部元素(即:没有另外一个并列的(样式不同的)dl定义列表),所以可以省略了dl, css越过dl层级直接找到他们。 导航区域的样式关系理清之后,然后再写内容区域的,根据上文的html结构: 我们这样写css言样式的结构 body>section{} body>section>section{} (指:id="work",id="catelog1",id="catelog2",id="catelog3") body>section>section>section{} (指上面区域内部的子区域) body>section>section>section>ul{} body>section>section>section>ul li{} body>section>section>section>ul li div{} body>section>section>section>ul li div a{} body>section>section>section>ul li div a figure{} body>section>section>section>ul li div a figure img{} body>section>section>section>ul li div a figure figcaption{} 在这里,前面几个section的关系必须非常清楚的确定他们有父子的关系,不然可能会出错,比如: body section{} body section section{} body section section section{} 第一个section内部的属性(我说的属性就是样式)会延伸下去,第二个section会继承第一个section内部的属性( 除非相同的属性覆盖),而第三个section又会从第一个和第二个两个里面都得到继承。 而后面的ul 以及内部的元素都是从第3个section(body>section>section>section>)开始之后唯一的,所以他们不会存在继承的关系,就没有其他相同元素可以相互影响了。 由于本案例html5结构的关系,我们可以这样首先确定每个相同层级的元素的样式。 说明:相同层级指在DOM结构中属于同一个层级,他们是树状的,DOM结构也像公司的员工职位结构。比如一个公司有2个部门:网络部,市场部。网络部又分为几个职位:网页设计,程序开发。假设市场部下面只有一个职位:销售。 那么在这个公司: 网页设计,程序开发和销售都是属于不同部门的相同级别。 同样,假设公司是<body>,那么老板就是<header>, 而网络部和市场部就是<section id="content">内部的两个同级区域<section id="dev">和<section id="sale">,而设计师和程序开发就是在<section id="dev">里面的元素,销售则是<section id="sale">里面的元素。虽然不在同一个<section>(部门),但是他们所处的位置相同。 在css中也是这样,所以我们用上面那些关系先写出这些相同层级(不同区域)的样式,这些样式会赋给所有同级的元素。 然后我们可以根据每个id(名)写每个区域内特有的样式。这样,就不会相互串门,相互影响了。 同样页脚的部分就可以这样写: body>footer {} body>footer p{} (这是唯一的p,所以可以省略">"子选择器符号) body>footer nav{} body>footer ul{} body>footer li{} body>footer a{} body>footer nav a{} 不过在这里,基本上只说了css子选择器" > "的用法,以及css书写的结构。好了,有点累了,下次再写。 |
|