web前端课程HTML+CSS+DIV

课程大纲1.前端设计师与后端程序员协同工作2.前端设计师设计网页注意事项3.如何制作网页前端设计师与后端程序员协同工作切图工作应该由谁来完成？我们经常对Webdesigner（网页设计师）和Webdeveloper（网页开发者，也称程序员）傻傻分不清楚，其实他们之间有着巨大的差异。两者之间的差异主要表现在：一个是有关网站的视觉或美学方面，被称为“前端”；另一个则是看不见的编码方面的设计，被称为“后端“。简而言之，漂亮的网站界面都是出自网页设计师之手，而牛逼强大的功能则是网页开发者的杰作……分析需求工单1，程序员分析如何策划数据库（维护性，拓展性，易用性等…）如何加强安全（SQL注入，数据加密等…）如何节约资源（高并发，压缩代码，优化JS等…）分析需求工单2，前端设计师分析页面数量（首页，二级页面，三级页面，额外页面…）设计风格（分析客户，分析网站主题，参考类似网站…）页面策划（模块摆放，内容展示，网页交互…）该做什么？3，前后端合作有两种方式：1.前端交付页面静态页面DEMO，后端在DEMO页面中编写模板输出内容，完成后再Check页面的Xhtml及交互部分的功能。2.后端给出数据集合的字段描述说明文档，前端编写模板输出。大部分工作流程是第一种居多，因为这样属于各施其职，工作流程会比较有序，但程序员要了解一定的CSS知识。第二种方式则需要前端具有程序编写能力，同时工作量会额外剧增。根据经验，推荐第一种方式。该做什么？4，协同工作时完整交付（时间充裕，小型站点/专题）部分交付（时间不够充裕，大型站点）先切主要页面，让程序实现主要功能(OA)，先上线主要页面，例如首页，列表页，内容页或客户指定页面。该做什么？5，优化网站嵌套程序时可能出现的几种情况1.缺少页面或缺少功能页面2.样式出错（浏览器兼容性）3.客户需求修改优化网站6，样式出错1.要对各个浏览器对解析网站的样式有所了解，因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。这里主要针对IE6,IE8。2.国内做网站主要针对，IE浏览器，火狐，谷歌，但国内用户往往偏喜欢用360，猎豹浏览器，遨游浏览器。3.如何减少这个问题，精确按照设计图开发，可以说是精确到1px的，设计图要按照网页标准来设计，熟悉各个浏览器的BUG，掌握浏览器HACK，静态代码编写能力要过关。优化网站7，优化网站过程如何协同工作1.使用注释符备注修改处，（!--注释内容--，/*CSS注释*/等…）目的是减少编程人员代码编写中的语法错误，并通过增强代码的通读性和易懂性，使得代码修改和程序维护相对简单。2.实际应用中，前端人员必须对修改处做详细记录，可以用TXT文档记录修改的位置，内容。这样让程序员知道应该覆盖那一块内容。（程序员需要修改CSS时，尽量让设计师修改，切勿自己动手，除了小修改。）3.备份修改前的网页。小结前端设计师与后端程序员协同工作1.分析需求工单，各个人员各施其职。2.评估时间3.交付DEMO代码4.优化网站前端设计师设计网页注意事项网页设计很糟糕的10个原因以及如何解决它1、留白太少留白是网页设计中一个重要部分。它有助于防止用户在浏览网站时变得疲惫，它可以在内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他设计元素提供间隔和缓冲的空间。网页设计很糟糕的10个原因以及如何解决它2、字体设置过多通常来说一个网页中最好不要超过三种字体。网页设计很糟糕的10个原因以及如何解决它3、色彩太多文本、背景、框架等各为不同的颜色，虽然看似鲜艳但是，多重渐变、几种鲜艳的色彩和大量有鲜明对比的色调及饱和度，会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色)，再搭配反相的单色(白、灰、黑)以获得一个漂亮的搭配。网页设计很糟糕的10个原因以及如何解决它4、内容过于堆叠网页的内容繁多，各种分支信息占据的空间过多，没有突出关键的主题。它有助于在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩、价值和线性透视三原则和其他艺术指导。在网页设计中，没有特别奉行的准则，但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。网页设计很糟糕的10个原因以及如何解决它5、没有重视用户电脑的屏幕显示效果也许某个分辨率对你的电脑效果特别好，但是用在用户电脑上就不一定如此了。虽然这种分辨率的显示器正在减少，但采用更小的分辨率的手机设备也来了。现在的网页设计宽度标准是960像素，虽然没有照顾到每一种分辨率，但在主流分辨率上可以呈现的最好。假如你希望面对大量的手机用户，最好考虑一个手机版设计。网页设计很糟糕的10个原因以及如何解决它6、没有考虑对比效果你有没有试过两种对比色彩的运用或者大小的变化，有些方式之所以比其他的更好，其原因就是这是一种眼睛感知到对比的方式。如果你很难舒服的阅读文字，考虑一下改变字体大小或方式。成为一个大师级网页设计师的秘诀：对比，对比，对比。网页设计很糟糕的10个原因以及如何解决它7、同一件事情做的不够多，或做的太多(过犹不及)某个主题过于突出或者某个主题被完全冷落了，在页脚加一个”返回顶部”的按钮也很好。但是，太多指向同一目标的途径会降低可用性。让你的奶奶用下你的网站，如果她搞不定，想想哪些东西让初次访问的用户拒绝使用这个网站。网页设计很糟糕的10个原因以及如何解决它8、不一致网页内容过于杂乱，没有统一的框架把他们合并到一个中心主旨上。它是把网页设计组织在一起的方式，可以创造一种紧密结合的感觉。在网站页面互相链接的情况下，它可以帮助用户把所有页面都联系在一起。如果你在整个网站持续改变字体、大小和色彩，用户很快会觉得不知所措。网页设计很糟糕的10个原因以及如何解决它9、没有足够的文字间距间距过小是造成网页缺陷的一个重要原因。网页一个是行距，可以用CSS直接调整，关系到两行文字之间的距离。这些有助于区分行与段落，使用户更容易阅读文字。网页设计很糟糕的10个原因以及如何解决它10、贫乏的尺寸大小标准做法是h1的文字大于h2的文字，头部文字大于段落文字。尽量保持一致的尺寸，因为它有助于一致性(第8条)和内容层次(第4条)。保持文字的可读性，但不要太大，让字体的大小表现信息的重要性。还有，10像素以下的尺寸对大量阅读的人来说太小了。在平时设计网页过程中，如果能够多加注意到这些问题，从而避免不该犯的错误，就能在整体设计的基础上加分，此外，加上自己特色的创意，真正为用户考虑，才能真正做到优秀的网页设计。切图和设计注意事项1.使用直角DIV，尽量避免使用圆角DIV。2.尽量避免使用PNG图片，使用gif代替。3.注意分辨率问题，最小适应为1024分辨率，除非响应式布局。4.字体大小常用12px，14px，16px，18px，24px。少用特殊字体。5.JS特效不能过多。6.少用动画，FLASH特效7.设计图内容块有图片时应该把图片控制在内容区范围内。避免超出。切图和设计注意事项8.注意内容模块长度，对文字列表行高要有一定数值的控制。9.设计图应当考虑到网页鼠标点击或经过的效果图制作，切图时会用到全部效果。10.能用代码替代的尽量不要使用图片11.CSS3尽管使用方便且现在较为流行，但天朝是一个神奇的国度，别忘记IE浏览器的存在。12.积累一定的代码库，css特效，js特效，大大节约切图时间。如何制作网页HTML是什么呢？html又称为超文本标记语言（英文：HyperTextMarkupLanguage，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。如何制作网页内联元素内联元素[1]（html规范中的概念）英文：inlineelement，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素，通常会涉及到的属性是display:inline；这个属性能够修复著名的IE双倍浮动边界问题。如何制作网页内联元素1、和其他元素都在一行上；2、高度、行高和顶以及底边距都不可改变；3、宽度就是它的文字或图片的宽度，不可改变。总的来说，内联元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用，常见内联元素有“a、b、br、span”等。如何制作网页块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。它独占一行，高度取决于内容，或用css控制。熟悉HTML“常用”标签!--...--标签注释标签用来在源文档中插入注释。注释会被浏览器忽略。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。熟悉HTML“常用”标签link标签link标签定义文档与外部资源的关系。link标签最常见的用途是链接样式表。headlinkrel=stylesheettype=text/csshref=theme.css//head熟悉HTML“常用”标签script标签script标签用于定义客户端脚本，比如JavaScript。script元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件。必需的type属性规定脚本的MIME类型。scripttype=text/javascriptdocument.write(HelloWorld!)/script熟悉HTML“常用”标签style标签style标签用于为HTML文档定义样式信息。在style中，您可以规定在浏览器中如何呈现HTML文档。type属性是必需的，定义style元素的内容。唯一可能的值是text/css。style元素位于head部分中。熟悉HTML“常用”标签htmlheadstyletype=text/cssh1{color:red}p{color:blue}/style/head/html熟悉HTML“常用”标签body标签body元素定义文档的主体。body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）熟悉HTML“常用”标签div标签div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记div，那么该标签的作用会变得更加有效。熟悉HTML“常用”标签用法div是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是div固有的唯一格式表现。可以通过div的class或id应用额外的样式。不必为每一个div都加上类或id，虽然这样做也有一定的好处。可以对同一个div元素应用class或id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。熟悉HTML“常用”标签p标签p标签定义段落。p元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。pThisissometextinaveryshortparagraph/p熟悉HTML“常用”标签a标签指向w3school的超链接：ahref=熟悉HTML“常用”标签b标签b标签呈现粗体文本效果。b标签是基于内容的样式标签strong的物理版本，但它没有后者的扩展意义。b标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体。如果某种加粗的字体不可用，浏览器将使用一些其他的表现方法，例如反相显示或者加下划线等。熟悉HTML“常用”标签span标签span标签被用来组合文档中的行