CSS网站建设布局心得

2016-02-19 13:12 2 1 收藏

下面图老师小编跟大家分享一个简单易学的CSS网站建设布局心得教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

从开始认识CSS(DW4)那时起,我就知道了CSS的强大,但从未用CSS排版过,因为我曾经尝试过学习,但感觉太难了

而且用DW的表格,所见及所得,做起页面来非常的快,排版也容易的多,由于最近求职,很多公司都要求DIV,CSS,所以我再次尝试学习

1.学习方式

我以为,看别人的代码是一个非常好的学习方式(前提是你需要有点基础知识),在查看别人的代码时可以去除一些重复的,或者一些于CSS无关的代码,将更利于我们分析,你可以从中了解到别人是怎么做的,更深一点,你可以考虑为什么要这样做,当然它们做的也不一定全对,就算淘宝,我发现它们的CSS里面也有不少的多余代码,我曾经从淘宝的网页代码里面学到不少的东西,我把基本的框架保留下来,然后分析,并且我将我的分析记录了下来,你可以在这里查看:

http://www.dayanmei.com/blog.php/ID_536.htm

2.练习方式

在了解到一些基本的布局方式,以及一些容器的属性之后,可以尝试自己,编写一些简单的布局,遇到出现问题的时候,可以在google搜索一下,或者想象理想论坛以及其他一些讨论标准化的论坛询问一下,会有很多好心人的哦

3.一本手册

在遇到问题的时候或者对某个属性不是很了解,或者对于属性的兼容性不太清楚的时候,这就有很大的作用了

手册可以去这里下载

http://www.w3cn.org/resource/down/2004/73.html

4.多写多练

你发现自己多写了几个布局,或者出了一些问题并解决后,你已经基本掌握了布局的要点了.

如何学习标准化

1、几本书、几个网站、几篇贴子、几个blog

《网站重构》掀起国内web标准热潮的第一本相关着作。理论性质多一些,全书涉及到具体操作和代码的部分很少。新手初次阅读很可能觉得没有实际用途。建议在阅读学习《CSS网站布局实录》有了一定的技术基础了再回头学习,反思自己之前学习和设计过程中的问题,这样才能有效地提高。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

《样式表中文手册》必备的工具,我一般放在桌面随时查询。里面提供了详细的使用说明和实例。

《CSS网站布局实录》较新的一本标准化着作。告诉你怎么去写符合标准的xhtml和css代码,告诉你一些常见布局和页面效果的代码是什么样子。这本书很适合初学者,基本上都是针对实例的布局、效果的实际操作,比较系统的讲述了如何进行标准化网站制作。这本书只是在讲具体的实现,关于标准化的概念、网站重构的目标这些指导实际操作的理念性东西几乎没有。可以在学习这本书之后读一下《网站重构》,二者结合起来学习效果不错。目前的版本可能因为时间问题,校对很仓促,有不少错别字和有问题的句子没,但涉及到代码到没有发现错误。

《CSS权威指南》详细阐述CSS1.0每个属性的规则和定义,并且展望了CSS2.0许多诱人的东西。对实现web标准化有着重要的意义。通过本书的学习可以深入理解浏览器如何解析属性的规则和定义,为准确实现设计意图提供保障。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

《html和xhtml权威指南》应该是一本权威的工具书,没有必要通读,可以在实际设计制作过程中参考。详细的讲述了html和xhtml的规则定义使用技巧。

《javascript权威指南》作为行为层的主要技术,不学习javascript就不能完整地学习web标准。

网站设计师 最初接触web标准化学习必须访问并且认真阅读的网站。包含教程、资讯、参考资料等重要信息。

渡硐氡曜蓟ò?lt;/a 这个不用说吧,对几位版主热心勤劳在此致敬。不少牛人潜水与此。但近期的学习瘴韵愿≡辏挥猩钊肜斫馔A粼赾ss表现层次的朋友较多。

CSSer.org 这个网站不知道怎么关掉了……有段时间不去看了,等待站长再次开放吧。

网易 作为门户网站里较早采用web标准的站点之一,其最新版本很值得研究。

下面是一些web标准届牛人朋友的blog,跟着他们能学习很多,而且通过blog这样亲切的形式学习效果应该很好。建议静心阅读他们的系列教程。


http://www.realazy.org/blog/

http://www.andymao.com/andy/

http://old9.blogsome.com/

http://www.greengnn.com/

http://blog.pr1984.com/

http://www.loaoao.com/


2、如何学习

读写

读书读上面我推荐的贴子、网站和blog。互联网的宗旨在于共享和传播,那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程。要静下心来,不能仅仅为了一个效果或者一个布局的实现去找答案。而是去理解教程给我们带来的实现思路。要系统地读书也要针对性的搜集某个问题的方法去总结提取。读到的时候就要写,写一些代码片断,一些布局结构,一些效果的实现。哪怕是照着书敲出代码来,加深记忆和理解,效果要比单纯的度过效果要好得多。

改动

改,不是抄袭。把别人的网站另存下来,改动其中的部分内容,看看页面显示有什么变化,在这些变化中去理解你所改动部分代码再实现页面效果中起到了什么作用。这是一个很重要的学习方法。你看到的效果变化

来源:https://www.tulaoshi.com/n/20160219/1603306.html

延伸阅读
标签: Web开发
CSS网页布局中文排版有别于国外所介绍的英文排版,由于汉字的特殊性,所以有一些地方是需要大家注意的。今天webjx.com的这个文章或许对大家对排版的控制有所帮助。 一、如何设定文字字体、颜色、大小  使用font  font-style设定斜体,比如font-style: italic;  font-weight设定文字粗细,比如font-weig...
标签: Web开发
1、导航菜单使用图片、FLASH 导航菜单使用图片、FLASH当然比纯文本来得好看一些,但是搜索引擎并不认识你的图片和FLASH。如果你非要使用漂亮的图片来做导航的话,可以使用背景替换的方法(我会在下次谈到这一个方法的);如果你要使用FLASH做导航,那我就没你办法了。建议做一个导航菜单链接的xml文提交到搜索引擎。 2、不恰当地...
标签: Web开发
基于浮动的布局利用了float(浮动)属性来并排定位元素,并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果,例如环绕在照片周围,但是当你把它应用到一个div标签上时,浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页(或者其他包含块)的一边。任何显示在浮动元素下方的HTML都在网页中上移,并环绕在浮...
标签: Web开发
如果一个网站的HTML代码很容易被人理解,那么他应该也很容易被搜索引擎理解吧,如果容易被搜索引擎理解,那搜索引擎肯定就喜欢这个网站了,所以会较好的推荐这个网站了。 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页...
标签: Web开发
许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。 但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边...

经验教程

276

收藏

22
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部