分享
 
 
 

div+css入门思想引导

王朝网站推广·作者佚名  2011-12-04
窄屏简体版  字體: |||超大  

随着W3C网页标准的影响和优势组件深入人心,国内许多门户网站纷纷转为用div+css技术来重新编写网站页面,而对于许多已经习惯table布局的程序员来说,要一下子转换自己的思维,用一种全新的思维方法来面对布局这一工作的时候,是有困难的。为了克服这种困难感,笔者在此谈谈自己的一些心得体会。

过去,在拿到设计师设计好的网页PSD文件后,通常我们都是切图,然后使用Dreamweaver等软件,表格创建好框架后导图,然后开始具体代码的编写,现在我们应该暂时遗忘这种方法,当拿到一个PSD文件后,先在白纸上画清楚这个网页的结构层次,并给每个模块赋予相应的名字。

一般来说,一个普通的网页,大致可以分为以下几个大模块:头部,logo区、导航区、内容区、友情链接区、底部说明区。这些大模块里面又可能划分成若干个小模块,以内容区为例,可以按上下关系,分成第一部分焦点区(ID:focus)、第二部分图片区(ID:photo)、第三部分评论区(ID:review)等等,而里面的每个模块又可以继续细分小模块,一直细分到表现不同内容功能的元素。

任何一个html页面,都是由表现不同功能、具有不同层次的模块和元素组成的。最基本的集中元素分别是:标题(h1-h6)、段落(p)、图片(img)、动画(swf)、音频(mp3)、视频(mpeg、rm)等。在一个网页上,具有相同或相似表现效果的,尽量用相同的元素名称去定义,既可以有效减少代码,又便于日后的网页改版。

与此同时,划分网页模块的过程,也是一个给模块和元素命名的过程,以模块的命名为例,每个模块一般都要加上它的父模块名称作为前缀,比如说,focus区里面的左侧区,则命名为focus_left,这个子模块里面的图片子模块,则命名为focus_left_photo.通过添加父模块名称的前缀来命名,既可以明确标注每个模块的从属关系,又可以让其他后来跟进的人员可以快速理解该模块的含义,从而便于管理和维护。(当然这个不是一定的,根据个人习惯需求来书写。)

在初期的学习中,可以挑选10个左右不同复杂程度的现成网页,花几天时间,从简单的页面开始,逐一秒素清楚每个网页的结构层次,每个模块应该如何命名,最底层的元素如何定义,可以说,随着网页结构层次的逐渐解剖和各个模块、元素的逐一命名,一个完整的css+div网页代码,至少已经写完了1/3,再逐渐学习css的属性,和兼容性,我想,这样循序渐进的过程,很快就可以掌握div+css网页布局的技术了。

转载请注明出处:北京网站建设 http://www.beijingjianzhan.com-西西弗斯工作室。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有