本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
豪斯课堂又一力作，耗时3个月。 让人受益匪浅的主题设计教程，版式调整下~！主体立刻突现！赞！把之前设计的一些迷惑的地方都给找出来了。 网友评论： 感触大发，突然就有了灵感！！！ 完全的干货，干的拧不出水，看的时候非常感动，不禁在想楼主为此篇教程到底做了多少努力，看完之后有种肃然起敬的感觉。 非常好，理解很容易。最后修改一些同学的图片，我觉得真是大神，修改后的…
蓝色是三原色之一，波长过短，纯正的蓝色RGB值分别为0、0、255，给人一种平静、平和、美丽、文静、安详与洁净的感觉。 蓝色与红、橙色相反，是典型的冷色，也是常见的后退色和收缩色，表示沉静、冷淡、理智、高深、透明等含义。 1. 蓝色性格特点 蓝色博大、永恒、平静、理智、纯净、遥远，就像辽阔的天空和大海。我国少数民族多使用靛蓝、普蓝作染料，因此，靛蓝、普蓝似乎…
网页设计中的细节通常是束缚我们想像和内容设置的枷锁。要提升网页设计品质，特别是活动或专题页面的视觉效果，请学习网页设计师必须知道的设计技巧：减法、分块、加法。 1.减法 网页设计中原先的细节经常是束缚我们想像和内容设置的枷锁。保留梁柱和承重墙是必需的，这便是我们在网页设计方法中提到的特征。 2.分块 在功能划分前，进行网页分区前所要做的信息消化。比如我们希望…
【时间要求】 2 学时（ 45 分钟× 2=90 分钟） 【上机内容】 中融宝企业网站制作 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握表单及表单元素的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、表单制作 3 、HTML及CSS的使用 【上机难点】 1、网页布局 2、CSS的定义和使用 【…
微信扫一扫 
支付宝扫一扫