本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
网站设计草图是对页面元素布局、页面造型设计、交互表现形式等所做的手绘草图说明，是对用户需求沟通的图形表现，以便更准确无误地与用户确认需求，也对网站风格设计过程起指导作用。
【时间要求】 2 学时（ 45 分钟× 2=90 分钟） 【上机内容】 使用DIV+CSS制作网页——个人站点制作 【上机目的】 1、 掌握CSS盒模型 2、掌握网页元素的定位 3、掌握DIV+CSS布局的方法和技巧 【上机重点】 1 、网页元素的定位 2、DIV+CSS布局的方法和技巧 【上机难点】从表格布局向DIV+CSS布局的转变 【上机教学方法】 1…
接到一个网站开发项目怎么去完成？ 今天125建站网给大家讲解开发一个网站有哪些流程，学过软件工程中瀑布模型的童鞋可能感觉会很熟悉。 网站的开发流程 【网站需求分析】⇓【制定网站建设方案】⇓【网站制作计划】⇓【页面设计和程序开发】⇓【网站测试】⇓【发布网站】⇓【推广和维护】 网站需求分析： 不管是对个人网站还是商业网站，网站需求分析都是很重要的。比如要为一个公…
【时间要求】 2 学时（ 45 分钟× 2=90 分钟） 【上机内容】 川厨小巷 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握行为的使用 3、掌握javascript(网页特效)的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、javascript(网页特效)的使用 【上机难点】 javascript(网页特效)的使用 【上…
CRAP是四项基本设计原理，包括对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密（Proximity） 对比（Contrast） 避免页面上的元素太过相似、如果元素不相同，就让它们截然不同元素包含字体、颜色、大小、线宽、形状、空间等根本目的：增强页面效果， 有助于信息的组织如何实现：通过字体选择、线宽、颜色、形状…
微信扫一扫 
支付宝扫一扫 
