本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
中国具有五千年文字历史，文字中所包涵的精髓，值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征，并能灵活运用字体进行编排设计，才能使作品的内容更清晰、更有条理地传达给读者。
考查目的 一、专业能力目标 ①检验学生对《web开发技术》课程的理解与掌握情况 ②锻炼学生运用所学知识解决实际问题，进行项目开发的能力。 ③掌握web项目的开发流程，网站建设的技术和方法，具备一定的网站设计能力及网页制作能力。 ④培养学生网站规划建设、发布，以及管理维护的基本技能。 ⑤培养学生掌握项目开发的的思想和方法，树立严肃认真的工作作风。 二、技能目标…
字体主要分为衬线字和无衬线字。网站制作中，选用什么样的字体是比较重要。 衬线字和无衬线字的区别：左边的中文和英文字属于衬线字，右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。 如宋体，观察比划可以看到横细竖粗的特点，这就是典型的称线字。 无衬线字体没有这些额外的装饰，而且笔画的粗细差不多。比如微软雅…
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时，PRD里只有交互稿，尚未有视觉稿。…
文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面，然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…
微信扫一扫 
支付宝扫一扫 
