- 第一步：规划网站，本教程将以图示为例构建网站；
- 第二步：创建html模板及文件目录等；
- 第三步：将网站分为五个div，网页基本布局的基础；
- 第四步：网页布局与div浮动等；
- 第五步：网页主要框架之外的附加结构的布局与表现；
- 第六步：页面内的基本文本的样式(css)设置；
- 第七步：网站头部图标与logo部分的设计；
- 第八步：页脚信息(版权等)的表现设置；
- 第九步：导航条的制作(较难)；
- 第十步：解决ie浏览器的显示bug；
第一步：规划网站，本教程将以图示为例构建网站
1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图： Webjx.Com
网页教学网主要由五个部分构成：
网页教学网
1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px
Webjx.Com2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px
Webjx.Com
3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px
Webjx.Com
26个ASP.NET常用性能优化方法
数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连- 网站设计：页面设定制作过程
任务： 为乌克兰的“Nissan”粉丝俱乐部创建徽标和网站设计。 - jQuery技巧
一、简介 1.1、概述 随着WEB2.0及 ajax思想在互联网上的快速发展传播，陆续 - 介绍我知道的hack方法
现在浏览器多了，做web页面还是比较痛苦的，当然，如果你不在乎自己做的页面在有些浏 - DIV CSS布局浏览器兼容的问题
刚学css div布局，总会遇到很多浏览器兼容的问题，这个问题困扰了一段时间，只到看了 - 如何实现FireFox文本自动换行
FireFox文本自动换行处理，如何实现FireFox文本自动换行 文本自动换行IE中解决方法 - CSS教程：行高line-height属性(2)
相关文章： CSS教程：行高line-height属性(1) 7.3.3 行高的计算与继承 以em、ex和 - CSS：闭合元素和浮动元素的差别
提示：本文不是教程，而是对闭合浮动元素的方法在某个特定情况下的现象的讨论，涉及 - 理解(X)HTML的文档结构
CSS通过与(X)HTML的文档结构相对应的选择器（selector）来达到控制页面表现的目的，而 - CSS教程：理解继承属性及应用
4.5 继承 在本书的[3.3.2继承与层叠]一节曾经简要介绍过继承：(X)HTML元素可以从其
用CSS建设网站的实例
作者:佚名 来源:不详 录入:神说 更新时间：2008-1-17 7:39:55 点击数：69
本教程主要参考Creating a CSS Layout from scratch，由Jorux翻译，以意译为主，其间加入了不少Jorux的个人观点，省略了一些多余的说明，请读者明鉴。
目录： Webjx.Com
+ 频道推荐图文
| 10个经典的web2. | 《墨攻》日文官方 | 曼联官方网站 | ANNA SUI官方网站 | Web 2.0 的视觉设 |
+ [网 页]·频道头条关注
网站推荐&内容
- 夜的第四章—八月UI秀(四) - 2008-01-15
这一位网名:太美丽,uirss官方群会员 http://www.toomo.com/zsj/ 很不错的作品. 手绘的这个不错 石子儿 上海的一位设计师,不清楚专业是什么 - 十九岁的天空 - 2008-01-15
姓名：步果断 网名：KIDAUBIS 生活地：江苏南京 学校：南京艺术学院 专业：动画 出生：88年4月17日 网址: http://www.kidcomic.net 这是站长KD - eicodesign新网站 - 2008-01-15
顶尖设计团队eicodesign新网站上线 - 德国设计师LD-Sign作品 - 2007-07-31
来自德国柏林18岁年轻的网页设计师Ld-sign - 德国大众网站设计 - 2007-07-05
最近事情一直比较多，但是今天无意中逛到德国大众的网站马上被他简洁大气的网页给吸引住了，所以就算忙也还是给大家截几个图，给大家分享一下。 - 华丽丽的插画站 - 2007-06-20
华丽的插画站 http://www.drawcaliber.com/ ,话不多说,看图吧. - eyeos网页操作系统 - 2007-06-20
现在好多种桌面的服务正在向网络上转移，EYEOS这个做得相当不错，推荐试用。界面十分美观，有点类似MAC系统风格。界面很精致与使用。上面都是一些简单的 - 劳力士官方网站----永恒的奢华 - 2007-06-20
劳力士官方网站----永恒的奢华 www.rolex.com 劳力士官方网站，几乎全部为FLASH,据估计可能是通过AS+JSP+XML来实现连接数据库。我们先来
网站声明
·尊重是互相的,本人时间有限,所以不可能面面俱到,请原谅!
·拼搏在于希望,快乐在于分享！
·您任意可以传播与复制本站设计界面,
但是【界面版权】仍规属于本站所有.
·您可以任意的修改本界面以及界面的html和css代码,
但是请不要用于商业用途.
·本站所有内容采用创作共用授权--署名和非商业用途。
·拼搏在于希望,快乐在于分享！
·您任意可以传播与复制本站设计界面,
但是【界面版权】仍规属于本站所有.
·您可以任意的修改本界面以及界面的html和css代码,
但是请不要用于商业用途.
·本站所有内容采用创作共用授权--署名和非商业用途。
[网 页]·其他信息