web前端课程HTML+CSS+DIV

专业的web前端开发工程师教程,侧重前端与后端交接

课程大纲1.前端设计师与后端程序员协同工作 2.前端设计师设计网页注意事项 3.如何制作网页

专业的web前端开发工程师教程,侧重前端与后端交接

前端设计师与后端程序员协同工作切图工作应该由谁来完成？我们经常对Web designer(网页设计师)和Web developer(网页开发者，也称程序员)傻傻分不清 楚，其实他们之间有着巨大的差异。两者之间的差异主要表现在：一个是有关网站的视觉或美学方面， 被称为“前端”;另一个则是看不见的编码方面的设计，被称为“后端“。简而言之，漂亮的网站界面

都是出自网页设计师之手，而牛逼强大的功能则是网页开发者的杰作……

专业的web前端开发工程师教程,侧重前端与后端交接

分析需求工单1,程序员分析

如何策划数据库(维护性，拓展性，易用性等…)如何加强安全(SQL注入，数据加密等…) 如何节约资源(高并发，压缩代码，优化JS等…)

专业的web前端开发工程师教程,侧重前端与后端交接

分析需求工单2,前端设计师分析

页面数量(首页，二级页面，三级页面，额外页面…)设计风格(分析客户，分析网站主题，参考类似网站…) 页面策划(模块摆放，内容展示，网页交互…)

专业的web前端开发工程师教程,侧重前端与后端交接

该做什么？3,前后端合作有两种方式：1. 前端交付页面静态页面DEMO,后端在DEMO页面中编写模板输出 内容，完成后再Check页面的Xhtml及交互部分的功能。 2. 后端给出数据集合的字段描述说明文档，前端编写模板输出。大部分工作流程是第一种居多，因为这样属于各施其职，工作流程会比较有序，但程序员要了解一定的 CSS知识。第二种方式则需要前端具有程序编写能力，同时工作量会额外剧增。根据经验，推荐第一种 方式。

专业的web前端开发工程师教程,侧重前端与后端交接

该做什么？4,协同工作时完整交付(时间充裕，小型站点/专题) 部分交付(时间不够充裕，大型站点)先切主要页面，让程序实现主要功能(OA),先上线主要页面，例如首 页，列表页，内容页或客户指定页面。

专业的web前端开发工程师教程,侧重前端与后端交接

该做什么？5,优化网站嵌套程序时可能出现的几种情况1.缺少页面或缺少功能页面 2.样式出错(浏览器兼容性) 3.客户需求修改

专业的web前端开发工程师教程,侧重前端与后端交接

优化网站6,样式出错1.要对各个浏览器对解析网站的样式有所了解，因为不同的浏览器对同一段代码有不同的解析，

造成页面显示效果不统一的情况，浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。这里主要针对IE6,IE8。 2.国内做网站主要针对，IE浏览器，火狐，谷歌，但国内用户往往偏喜欢用360,猎豹浏览器， 遨游浏览器。 3.如何减少这个问题，精确按照设计图开发，可以说是精确到1px的，设计图要按照网页标准 来设计，熟悉各个浏览器的BUG,掌握浏览器HACK,静态代码编写能力要过关。

专业的web前端开发工程师教程,侧重前端与后端交接

优化网站7,优化网站过程如何协同工作1.使用注释符备注修改处，(<

!--注释内容-->,/*CSS注释*/等…)目的是减少编程人员代码

编写中的语法错误，并通过增强代码的通读性和易懂性，使得代码修改和程序维护相对简单。2.实际应用中，前端人员必须对修改处做详细记录，可以用TXT文档记录修改的位置，内容。 这样让程序员知道应该覆盖那一块内容。(程序员需要修改CSS时，尽量让设计师修改，切勿自己动手， 除了小修改。) 3.备份修改前的网页。

专业的web前端开发工程师教程,侧重前端与后端交接

小结前端设计师与后端程序员协同工作1.分析需求工单，各个人员各施其职。 2.评估时间 3.交付DEMO代码 4.优化网站

专业的web前端开发工程师教程,侧重前端与后端交接

前端设计师设计网页注意事项网页设计很糟糕的10个原因以及如何解决它1、留白太少 留白是网页设计中一个重要部分。它有助于防止用户在浏览网站时变得疲惫，它可以在

内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他设计元素 提供间隔和缓冲的空间。

专业的web前端开发工程师教程,侧重前端与后端交接

网页设计很糟糕的10个原因以及如何解决它

2、字体设置过多

通常来说一个网页中最好不要超过三种字体。

专业的web前端开发工程师教程,侧重前端与后端交接

网页设计很糟糕的10个原因以及如何解决它

3、色彩太多

文本、背景、框架等各为不同的颜色，虽然看似鲜艳但是，多重渐变、几种鲜艳的色彩

和大量有鲜明对比的色调及饱和度，会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色 调(如蓝色),再搭配反相的单色(白、灰、黑)以获得一个漂亮的搭配。

专业的web前端开发工程师教程,侧重前端与后端交接

网页设计很糟糕的10个原因以及如何解决它

4、内容过于堆叠

网页的内容繁多，各种分支信息占据的空间过多，没有突出关键的主题。它有助于

在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩、 价值和线性透视三原则和其他艺术指导。在网页设计中，没有特别奉行的准则，但以直观的方式组织你

的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。

专业的web前端开发工程师教程,侧重前端与后端交接

网页设计很糟糕的10个原因以及如何解决它

5、没有重视用户电脑的屏幕显示效果

也许某个分辨率对你的电脑效果特别好，但是用在用户电脑上

就不一定如此了。虽然这种分辨率的显示器正在减少，但采用更小的分辨率的手机设备也来了。现在的 网页设计宽度标准是960像素，虽然没有照顾到每一种分辨率，但在主流分辨率上可以呈现的最好。假

如你希望面对大量的手机用户，最好考虑一个手机版设计。

专业的web前端开发工程师教程,侧重前端与后端交接

网页设计很糟糕的10个原因以及如何解决它

6、没有考虑对比效果

你有没有试过两种对比色彩的运用或者大小的变化，有些方式之所以比其他的

更好，其原因就是这是一种眼睛感知

到对比的方式。如果你很难舒服的阅读文字，考虑一下改变字体大 小或方式。成为一个大师级网页设计师的秘诀：对比，对比，对比。