CSS布局教程

基于web标准的网站设计指南

2010年4月30日

“变化之美”网站制作案例之页面内容区与底部版权编码

页面内容区包括文档标题和文档正文，—，该区域是本案例页面的核心内容。但页面编码比较简洁，看下面的XHTML编码。
<div id="container">
  <h1>简洁布局之变幻的CSS</h1>
  <p>天津网站建设编码中添加适当的注释可以辅助编码，使XHTML代码有更加清晰的结构。本案例页面结构相对简单，不难看出div结束标记是针对哪一个元素。面对团队其他成员或者页面结构复杂，无法快速看出相应的结束标记是属于哪一个元素，页面的结构会相对混乱，给Web开发工作带来不便。虽然Adobe Dreamweaver提供“选择父标签”工具，但不是每一位Web开发人员都使用此软件。所以通过简单的注释标识这些信息，可以让XHTML代码更加清晰易读。为了减小文件大小，在最终发布时可以去掉这些额外的注释信息。</p>
...

Tags: “变化之美”网站制作案例之页面内容区与底部版权编码  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:

2010年4月29日

“变化之美”网站制作案例之页面头部与导航编码

    有了页面总体布局，下面开始各个页面元素的完善。首先从头部header层开始。这一区域主要有4个组成部分，分别是网站LOGO、网站标语、搜索框及网站导航菜单。下面依次

序开始编码。
<p id="logo">我爱天津网站建设</p>
上面网站LOGO部分的XHTML代码将链接文字包含在段落p里面，通过给链接元素a设置CSS样式应用背景图片，将LOGO图片显示出来，然后再合理地隐藏掉链接文字。有些做法是将LOGO图片通过img标签直接引用进来，然后给图片增加超链接。毛这里不否定这样的方法，但当用户禁用图片与CSS样式时，可能无法确定所在站点的名称。而以为链接文字的方法，但当用户禁用图片与CSS样式时，可能无法确定所在站点的名称。而以为链接文字：设置背景图片的方式引入LOGO，能够适应更多的浏览环境，即使图片不显示、CSS样式被禁用，站点名称都不会丢失，具有更强的适应性。网站标语的XHTML编码如下。
...

Tags: “变化之美”网站制作案例之页面头部与导航编码  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:

2010年4月28日

”变化之美“案例网站制作xhtml编码

准备好图片，已进行详细的规划，下面开始编写XHTML代码。让代码具有语义是每一位Web开发人员的追求，应该特别注意恰当地使用XHTML标签。编写代码时注意运用一些小技巧以提高天津网站建设的开发效率；当多人团队协作开发时，应注意协同一致，要有标准的命名规范与文件结构，这样可以让团队成员清晰明了地查看XHTML代码。页面具有良好的XHTML结构是CSS布局的重点，以准确的XHTML标签来组织页面是必须重视的环节。天津网站制作在实际编码中不断地总结经验，对照相关资料权衡、斟酌，以最恰当的标签来组织页面。这样的环节往往容易被网页制作人员所忽视，总是认为将页面组织起来就行，是不是具有良好的结构、语义，也不管嵌套是否合理，这会给将来的重构工作带来灾也没有准确、有效地理解内容与表现分离的思想。首先写出页面主体元素的结构，再进一步深人对各个区域内的元素进行细化。也就是先描出大体框架，再向框架内填相应的内容，最终完成全部XHTML代码的编写。页面总体布局需要建立5个div层，分别是header、main、container、sider和footer。其中main层作为“包围层”以实现内容区与侧边栏的居中。页面主体元素XHTML编码如下:
...

Tags: ”变化之美“案例网站制作xhtml编码  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:

2010年4月26日

简洁布局的css网站制作之布局规划

目前的社会分工越来越细，天津网站制作人员的工作不再贯穿于天津网站建设的全部流程，页面设计人员（美工）可以从美学的角度进行更加规范化、更具专业的设计。而网页制作人员的工作则是对页面效果图进行分块、切割，编写XHTML与CSS代码，最终形成网页。首先要细致地分析效果图，做到胸有成竹，然后再根据页面的特点及版式需要进行详细的规划。
...

Tags: 简洁布局的css网站制作之布局规划  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:

2010年4月25日

CSS编码精简与合并

在前面应用CSS样式进行天津网站制作编码时，将CSS样式分别写在首页与内页HTML文件的<head>内，这样的方式被称为文档级样式表。此方式一方面有利于案例的讲解；另一方面也利于读者朋友在编码时形成清晰的思路。在初学或对CSS不够熟悉时，推荐以此方式进行编码实践、支练习，在最终完成全部编码后再进行精简与合并。备份原有编码，新建一个CSS文件，命名为maln.css。复制首页的CSS样式并保存该皮件，分别删除首页与与内页<head>内CSS编码并建立外部CSS样式链接，<head>内加载外部样式表的方式被称为链接式外部样式表，在大多数时候都是以这样的方式将CSS引入HTML文档的。在本案例中，首页与内页的container层和linkarea层的CSS编码有很多重复，显得过于臃肿，针对这部分CSS编码进行精简与合并。在main.css文件中，已经保存有首页的全部CSS样式编码，现在仅需要重新定义内页与之有区别的属性即可。对于重复的属性，CSS将实现继承、层叠和优先性的原则。将具有特殊性的CSS属性作用于内页的相关HTML标签。conminer层在首页与内页的定义区别很大，不再进行精简，直接复制到main.css文件。天津软膜天花，container层hl元素的CSS编码在首页与内页分别如下。在main.css文件中添加上述编码后，未作设置的编码，将继承从首页复制到的main.css文件的CSS样式。对于有区别的属性，新添加的编码将层叠作用于container层hl元素。也是其他页面元素精简与合并的思路。两者除了宽度不同，其他属性都一样，只需要针对内页container层段落p设置一条属性时间作者信岩息的h6标签在首页中不存在，直接复制CSS编码至main.css文件。linkarea层的定义在首页与内页区别很大，不再进行精简，直接复制到main.css文件中。linkarea层内的dl、dt和dd有很多重复，CSS编码在首页与内页分别如下。dt和dd属性设置除了了dl的外边距有区别外，其他属性均相同。编码的精简已绍的继三的特点在天津网站建设中并未能完全展现，仅作为一种编码思路。撇开内页新增加的h6标签，仅重新定义11个属性就让网页“改头换面”了，可以看到CSS强大的功能与无限魅力。

...
Tags: CSS编码精简与合并  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:

2010年4月24日

hellow world 内页css样式

天津网站制作中内页内容区container层和三个栏目介绍链接linkarea层是左右结构，形成“两列”布局。对contain CSS设置，编码如下hello world"内页主体内容css样式
#show #main #container {
 float:left;
 width:510px;
...

Tags: hellow world 内页css样式  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:

2010年4月23日

”hello world“案例之页面布局css样式

”hello world“案例之页面布局css样式
XHTML编码完成后，CSS将发挥它的强大作用，天津软膜天花将结构化的XHTML文档定义成与效果图一致的页面。先编写页面布局，再细化页面元素，一步一步实现。
页面的主体结构由4层构成，分别是top、header、main和footer，这其中还包含logoarea、banner、container和linkarea这4个嵌套在内部的层。由于首页与内页的外观有很大差别，为了便于讲述，暂时将CSS样式分别写在首页与内页HTML文件的<head>区域，完成所有CSS样式编码以后再进行合并与优化。进行整体布局声明。选择body标签，定义外边距margin和内边距padding都为0，文本颜色设置为黑色(#000)。将内外边距声明为0可以消除部分浏览器的默认边距属性。进行整体布局声明的CSS代码编写如下。
...

Tags: ”hello world“案例之页面布局css样式  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:

2010年4月22日

hello world 案例xhtml编码

完成上面的准备工作后就可以开始XHTML编码了，根据规划的提示一步一步地深入编写，首先是整体的页面结构，然后往里面填内容。无论是首页还是内页，主体结构都由4部分组成：top, header, main和footer。这4部分中的header层包括logoarea和banner，main层包括container和linkarea。它们的嵌套关系与结构如图所示。首页与内页的container层有所区别，首页中由文章标题与文章内容索引两块组成，可以用hl和p标签。内页中由文章标题、文章内容和作者时间信息3块组成。在后面编写内页的XHTML代码时需要将这部分内容加进去。依据上面的思路，编写如下主体结构XHTML代码。
...

Tags: hello world 案例xhtml编码  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:

2010年4月21日

web布局实例"hello world"——案例效果图分析

从规划、切图到XHTML编码，再到编写CSS样式组建网页，直至最终对CSS编码进行精简，本案例给出了CSS网页布局的一般工作流程。布局简单也富有变化是本案例的特点，首页可以看成“一列式”布局，而内页变换成为“两列式”布局，这一切仅需要CSS—编码即可实现。下面就从Hello World开始进入CSS的精彩世界，一起感受CSS的无限魅力吧！
页面制作人员（Web Page Building）在切割图片以及进行HTML、CSS编码以前，应当对页面效果图进行详细的观察与分析，将页面各元素的组成关系理顺，在脑海中形成大概的轮廓。然后根据这样的思路去切割图片，编写页面的HTML文件，最后应用CSS样式将HTML页面还原成与效果图一致的效果。
...

Tags: web布局实例hello world——案例效果图分析  
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:
分页:[«]1[»]

日历

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号