本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
上一篇《从零开始做APP界面设计二：App界面设计尺寸》我们学习了app界面设计尺寸规范，今天中国网页设计给大家分享App界面设计中字体的选用、字号设置及配色方案。 App界面设计标准色: 背景用色、文字用色、图标用色 App界面设计标准字： IOS:中文使用苹方字体 英文和数字使用Helvetica Android:中文使用思源黑体 英文和数字使用Rob…
前端文档 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web 前端社区 GitHub stackoverflow 掘金 JS 学习资源 现代 JavaScript 教程：https://zh.javascript.info/ 阮一峰 JS教程：https://wangdoc.com/javascript…
网上学习如何制作网页的教程很多，但是都很杂乱，没有一个体系。这篇文章，是给大家梳理一下制作网页所需要学习的内容，新手可以按照这个流程，一步一步的学习，当然，如果你一直看下去，我们会有惊喜给大家。
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时，PRD里只有交互稿，尚未有视觉稿。…
设计≠艺术，设计从诞生之初就是为“解决问题”而存在。在体验设计场景，如果业务方是“需求提出者”，那产品经理和设计师就是从不同视角切入的“问题解决者”，而用户既是“需求源头”，又是“方案验证者”和最终“价值创造者”。下面我们详细解读设计价值与业务/用户/产品三方的关系.
微信扫一扫 
支付宝扫一扫