网页设计摘要
浅谈网页的设计与制作技巧
浅谈网页的设计与制作技巧摘要：文章对网页设计的总体要求与常用工具进行了介绍，并总结了网页在设计过程中需要注意的问题。
关键词：网页设计制作1、前言网页就是包含了文字、图片、动画、声音等内容的一个文件，可以在网上传输的界面。
它可以用来共享信息、宣传自己、服务用户等，且随着计算机互联网络的发展，已经成为人们浏览信息不可或缺的媒质之一。
而这种优质的传媒作用是否能够取得预期的效果往往取决于网页的设计与制作是否精良。
2、网页的设计网页设计，是一种建立在新型媒体之上的新型设计。
是在平面设计的基础上，适应网络传播与网页浏览的需求，所从事的视觉传达工作。
它具有艺术与技术高度结合的特点。
网页设计是网站的视觉内容部分，它是浏览者进入站点内第一时间接收到的视觉信息。
它可以给浏览者一个概念，一种印象，这种印象有时候是致命的。
一个可用性强的、独特创新的网页设计是网站长期发展的必要条件之一。
一个成功的网页设计，首先在观念上要确立活跃的思维方式，其次，要有效地将图形引入网页设计之中，增加人们浏览网页的兴趣，在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。
3、网页设计与制作的技巧3.1 设计前要有筹划设计主页也许并不是很困难，但这一工作与编制传统的宣传品一样，都需要我们谨慎处理和筹划。
换言之，我们必须首先确定自己需要传达的主要信息，然后细意斟酌、把所有意念合情合理地组织起来；之后是设计一个页面式样，试用于有代表性的用户，接着重复修订，务求尽善尽美。
3.2 选择内容要有新鲜感万维网上不断有新事物出现、每天都有新花样。
如果主页从不改变，用户很快会厌倦。
因此网页内容的选择要不落俗套，要重点突出一个“新”字，这个原则要求在设计网站内容时不能照抄别人的内容，要结合自身的实际情况创作出一个独一无二的网站。
3.3 内容相对实用性大一个网页尽管设计得趣味盎然，引人入胜，但这不是吸引用户最好的理由，要想最大限度地留住用户首要的是要让它有用处。
web课程设计摘要
web课程设计摘要一、课程目标知识目标：使学生掌握Web开发基础，了解HTML、CSS和JavaScript的基本概念及用法；理解网页结构、样式与行为的分离原则；学会运用Web标准进行页面布局和设计；掌握常见Web前端技术的应用。
技能目标：培养学生独立完成静态网页设计与制作的能力；能够运用HTML、CSS和JavaScript编写符合Web标准的网页；熟练使用主流Web开发工具，提高编程效率；培养解决问题的能力和团队协作精神。
情感态度价值观目标：激发学生对Web开发的兴趣，培养其探究精神；引导学生关注互联网行业发展，树立正确的网络安全意识；通过课程学习，使学生认识到技术改变生活的力量，增强社会责任感和创新意识。
课程性质：本课程为信息技术课程，旨在帮助学生掌握Web开发基本技能，提高其信息技术素养。
学生特点：六年级学生具备一定的计算机操作基础，对新鲜事物充满好奇，但注意力容易分散，需要结合实际案例和互动教学激发兴趣。
教学要求：注重理论与实践相结合，强调实际操作，鼓励学生自主探究和团队协作；关注个体差异，因材施教，确保每位学生都能达到课程目标。
通过分解课程目标为具体学习成果，为教学设计和评估提供依据，以提高课程实用性。
二、教学内容依据课程目标，教学内容分为四个模块：模块一：Web开发基础1. 网页设计与制作概述2. HTML基本结构与常用标签3. CSS基本语法与选择器4. 网页布局与排版模块二：Web前端技术1. JavaScript基本语法与事件处理2. DOM操作与应用3. 常用前端框架与库（如Bootstrap、jQuery）模块三：Web开发工具与技巧1. 常用Web开发工具介绍（如Visual Studio Code、Sublime Text）2. 版本控制工具Git的使用3. 网页调试与优化技巧模块四：项目实战与团队协作1. 项目需求分析与规划2. 网页设计与制作分工合作3. 项目测试与部署4. 团队协作与沟通技巧教学内容科学系统，涵盖Web开发基础、前端技术、开发工具与项目实战。
web网页设计报告
web网页设计报告报告人：XXX报告时间：20XX年XX月XX日摘要：本报告详细介绍了本次Web网页设计项目的设计思路、实现方法及效果展示。
首先，我们从用户需求入手，确定了网站的整体风格和布局，并在设计过程中充分考虑了用户体验和页面交互性。
其次，我们采用了响应式设计的技术，确保网站能够同时适配不同的设备尺寸和分辨率。
最后，我们通过对网站的性能优化和SEO优化，提高了网站的访问速度和搜索引擎排名，从而实现了网站的目标：吸引更多的访问量，提高用户黏性。
正文：一、项目情况概述本次Web网页设计项目的客户为一家有限公司，旨在提升其品牌知名度和服务效果。
为此，我们的设计团队对客户需求进行了深入的分析和调研，确定了网站的主要功能和设计目标，制定了详细的设计方案。
二、设计思路和实现方法1. 网站整体风格和布局根据客户需求和行业特点，我们确定了网站的整体风格和色彩搭配，并设计了首页、产品展示页、新闻资讯页、联系我们页等多个页面。
2. 用户体验和页面交互性为了提高用户体验和页面交互性，我们在设计过程中充分考虑了用户的心理和使用习惯，采用了人性化的设计理念和技术手段。
例如，我们采用了鼠标悬浮、逐屏滚动、弹出框等技术，增强了网站的趣味性和互动性，提高了用户黏性。
3. 响应式设计为了解决不同设备分辨率和尺寸带来的显示问题，我们采用了响应式设计技术。
通过对网站的自适应尺寸和布局进行优化，确保网站在不同的设备和平台上都能呈现良好的显示效果和用户体验。
4. 性能和SEO优化为了提高网站的访问速度和搜索引擎排名，我们对网站进行了性能和SEO优化。
例如，我们采用了CDN加速、图片懒加载、缓存技术等优化手段，提高了网站的响应速度和性能表现。
同时，我们对网站的内容和关键词进行了优化，提升了网站在搜索引擎上的排名和曝光度。
三、效果展示经过数月的设计和开发，本次Web网页设计项目已经圆满完成。
最终呈现出一个具有高品质和高性能的网站，得到了客户的充分肯定和好评。
毕业论文电影网页摘要1
本科生毕业设计说明书（毕业论文）题目：电影网站的设计学生姓名：学号：专业：计算机科学与技术班级：指导教师：毕业设计说明书（毕业论文）毕业设计说明书（毕业论文）II 电影网站的设计摘 要在IT 行业迅速发展的今天，电影网站的建立已经成为电影发展必不可少的趋势。
本设计将建立一个以宣传类型为目的的网站，将专注于针对电影的宣传与推广，让更多的网友能通过互联网了解、关注、支持电影以及电影事业的发展。
的网友能通过互联网了解、关注、支持电影以及电影事业的发展。
电影网站作为一个新兴事物，是电影管理现代化发展的必然趋势。
本网站在研究建立的同时，主要考虑的问题是：在“爱电影”网站的建立工作中，如何将传统的方式和现代化的方式更加有机的结合，使电影服务体系更完善。
现代化的方式更加有机的结合，使电影服务体系更完善。
本网站制作并实现了一个电影网站的前台设计。
此次设计主要就是完成电影网站中前台页面的设计，尽可能的将电影宣传信息第一时间发布，让浏览者更加清晰和详细的了解电影详情，也尽可能详细的展示、介绍不同类型的电影，同时为爱电影的人提供一个交流的平台。
在“爱电影”网站的设计过程中使用了HTML 、DIV+CSS 、JavaScript等开发工具，开发软件为Dreamweaver8 、PhotoshopCS5、Fireworks8。
通过对“爱电影”网站的需求分析、总体设计、详细设计和测试，最终完成了首页、各分类页、详情展示页、注册页、登录页等，完成了“爱电影”网站的前台设计。
展示页、注册页、登录页等，完成了“爱电影”网站的前台设计。
关键词：电影网页设计；电影网页设计；网站测试网站测试；查询电影资讯；JavaScript ；毕业设计说明书（毕业论文）毕业设计说明书（毕业论文）III The design and implementation of the front desk of the"love movie" websiteAbstractIn the rapid development of IT industry, the establishment of the film website has become an essential trend in the film development. This design will establish a range of publicity for the purpose of the site, will focus on the publicity and promotion for the movie, let more users can learn through the Internet, pay attention to and support for the film and film career development. As a new thing, movie website is the inevitable trend of the film management modernization. This web site established at the same time, considering the main problems is: in "love movie" website establishment, how will the traditional methods and modern way more organic combination of, the film service system more perfect. This website produced and realized a movie website design of the front desk. This design is mainly to complete the front page design, as much as possible to the film newsletter information for the first time released, let visitors more clear and detailed understanding of the movie details, also as far as possible with the display, describes different types of film, and love movies provide an exchange platform. In the "love movie" website design process using HTML, JavaScript, DIV+CSS and other development tools, the development of software for Dreamweaver8, Fireworks8, PhotoshopCS5. Through the "love movie" website needs analysis, overall design, detailed design and testing, the final completion of the home page, category pages, details show page, register, login page, etc., to complete the "love movie" stage of the website design. Keywords : Movie web design; Web testing; Query movie information; JavaScript;毕业设计说明书（毕业论文） 毕业设计说明书（毕业论文）4 。
网页设计与制作(毕业设计论文)
毕业设计（论文）专业：计算机及应用考生姓名：付晓杰准考证号XXXXXXX2014年7月20日【中文摘要】随着计算机技术和通信技术的飞速发展，信息化的浪潮席卷全球，互联网成为人们快速获取、发布和传递信息的重要渠道。
作为占有全社会大约80%信息的政府，如何将海量的信息提供给有需求者，并且能够保证24小时随时查询和下载，在众多媒体中，政府网站是成本低廉和行之有效的方法。
论文详细描述了一个基于ASP技术和ACCESS数据库系统的网站的开发过程。
网站包括两个模块：新闻发布和互动交流。
其中新闻发布系统包括组织机构、部门信息、政策法规、网站公告、后台管理等子模块。
互动交流系统包括网上办事、互动交流、下载中心等子模块。
主页面提供本网站的一个宏观样式，并让各模块与之配合联系，构成一个完整的网站系统。
【关键词】政府网站ASP 技术ACCESS 数据库【目录】【前言】 (3)【正文】 (3)第一章概述 (4)1.1网站建设背景 (4)1.2网站建设意义 (4)1.3开发工具简介 (5)1.3.1.网页图像设计工具——Photoshop、Fireworks (5)1.3.2.动画制作工具——Flash MX 2004 (5)1.3.3.网页排版工具—— Macromedia Dreamweaver 8 (5)第二章可行性分析 (6)2.1B/S结构介绍 (6)2.2ACCESS 数据库 (6)2.3ASP 技术 (6)第三章网站需求分析 (7)3.1总体功能需求分析 (7)3.1.1.功能需求 (7)3.1.2.功能结构图 (7)3.2网站具体功能模块需求分析 (8)3.2.1.网站首页新闻发布等功能块 (8)3.2.2.领导讲话功能 (8)3.2.3.政务公开功能 (8)3.2.5.政策法规功能 (9)3.2.6.网上办事功能 (9)3.2.7.互动交流功能 (9)3.2.8.专题专栏功能 (9)3.2.9.联系我们功能 (9)3.2.10.友情链接功能 (9)3.2.11.网站功能板块 (9)3.2.12.网站结构图 ·······························································错误！未定义书签。
【计算机网页设计毕业论文】 网页设计毕业论文范文
《【计算机网页设计毕业论文】网页设计毕业论文范文》摘要：rvrrx(\"r"r("l")"\")"，l"r("l")" rr b lrr",,,，r("l")""r("l")""技术交式页设计运用、技术简介技术（v rvr g动态页）是微软公司推出种用以取代g（ g r通用关接口）技术目前r上许多基平台b已开始应用替换g简单地讲是位器端脚运行环境通这种环境用户可以创建和运行动态交式b器应用程序如交式动态页包括使用l表单收集和处理信息上传与下等等通常情况下用户通浏览器看到页多是静态目前r 上许多仍然提供"静态"（）主页容所谓"静态"指就是主页容是"固定不变"当浏览器通r 协议向器(b rvr)要提供主页容器收到要就传送原已设计静态l 件数据给浏览器"静态"若要更新主页容必须手动更新其l件数据而随着b应用发展用户希望能够看到根据要而动态生成主页例如响应用户询数据库要、生成报表等当浏览器上填表单(r)输入数据以提供要可以器执行应用程序而不只是l 件器收到要执行应用程序分析表单(r)输入数据将执行结以l格式传送给浏览器根据用户请生成动态主页传统方法有g、等g是根据浏览器端请激活响应进程每请对应进程当有很多请程序挤占系统造成效率低下；针对这缺进行改进利用ll（动态链接库）技术以线程代替进程提高了性能和速但要考虑线程步问题而且开发步骤烦琐这两种技术和另普遍使用开发动态页技术v都还存着另外问题那就是开发困难程序开发和l写作是两完全不程要专门程序员开发而较简单开发技术如vr和(r b r)等功能有限不敷使用使用vx技术基开放设计环境用户可以己定义和制作组件加入其使己动态页几乎具有无限扩充能力这是传统g等程序所远远不及地方与常见l端实现动态主页技术如v l、vx rl、vbr、vr等不命令和r语句都是由器释执行执行结产生动态生成b页面并送到浏览器；而l端技术r命令则是由浏览器释执行由是器端释执行开发者可以不必考虑浏览器是否支持；由它器端执行开发者也不必担心别人下程序从而窃取编程逻辑通缀名件实现件相当可执行件因必须放b器上有可执行权限目录下当用户从浏览器输入了件地浏览器就将这rl请发给b rvr如b rvr上装了就调用出相应件释并执行命令动态生成l页面回传b rvr然b rvr再把结发送给浏览器件制作和l类似且和l开发集成可以程完成利用将可以执行脚嵌入到l件(将l件缀名改)这使得l件编写与脚开发融合起通置对象、器组件（rvr ）可以完成非常复杂任而且用户还可以己开发或利用别人开发器组件完成专门任比较关及器扩展模式有着以下优()完全与l件融合起；()容易创建不要其它编译、链接程序；(3)面向对象并通vx rvr对象可扩展二、电子商数据访问方式电子商是指通电子方式并络基础上实现物、人员程协调以便商业交换活动电子商系统b提供了与客户进行通信络有效手段利用b技术实现b器与数据库系统连接完成对数据处理与询用户可以通操作简单易学浏览器询处理所要各种数据实现b器与数据库连接般有两种方法种是利用件技术两者建立连接和通信如g(通用关接口)和(应用程序编程接口)b器通调用g程序实现与b浏览器交即g程序接受浏览器发给b器信息进行处理将相应结再送回给b器通b器将信息传送给浏览器但g程序响应速和利用等方面有较局限性客户端每请g程序器端便打开进程当请数量较容易引起瓶颈现象开发人员常利用编程扩展器功能程序占系统少运行效率较高但它编程较g程序更复杂；另种是由浏览器v应用程序(v l)通浏览器访问b器上数据库利用了b(v b v)技术它通b 提供实现对b rvr访问由v l身局限性目前多数应用是基件技术也是属件种模式但平台上它比较关及器扩展模式有着较优关特是它平台无关性但关程序通常较难编写和改变关程序通常是独立程序并不和l件融合起它要用如、、vb、rl等语言编写独立应用程序而应用改变了这使用不仅可以取和 ql rvr数据库而且还可以取其他b（ b 开放式数据库）兼容数据库访问数据库是通(vx b b活动数据对象)及事处理语句实现是种操作r所支持数据库方法是项容易使用并且可扩展将数据库访问添加到 b 页技术对象使用与（数据访问对象）、r（远程数据对象）方式相似可以看作是器组件更简单说是系列对象应用这些功能强对象即可轻松完成对数据库复杂操作三、电子商应用电子商对用户而言进行上信息询目是寻己要产品或而对商品或提供者说其目则是向用户推销己产品或因让用户通浏览器询器端数据库是许多b提供者必有通置b组件实现这功能可以使用编写紧凑简明脚以便连接到b 兼容数据库和 l b 兼容数据具体操作步骤可以归纳以下几步① 创建数据库名（） b通b工作因要b设置（数据名）打开"控制面板"双击"b"图标然选择"件 "属性页单击添加选择数据库驱动程序然单击"下步"按照屏幕指示键入数据件名称然单击"下步"再单击"完成"创建数据②创建数据库链接链接用以保持些关正访问数据动态信息以及链接者信息利用b成员函数和先前设定与数据库连接其语法如下 rvrrb("b") \"创建了链接对象("；r；r") \"打开链接数据名；r用户名；r用户口令③创建数据对象数据对象通常保存是询结rr 是复杂对象有许多属性和方法灵活运用可以达到许多效其创建方法如下 rr x(qr) \"创建并打开了对象rr qr是串代表条标准ql语句例如 qlr"lr b" rr x(qlr) 这条语句执行对象rr就保存了b所有记录④操作数据库可利用x方便地执行数据插入、修改、删除等操作如执行插入操作 qlr"r bvl(,)" x(qlr)⑤关闭数据对象和链接使用了对象定要关闭数据对象和链接通调用方法l实现关闭关闭创建数据对象rr l rr g 关闭创建链接对象 l g 完整程序片段产生组件实例％rvrrb("b")连接数据库(";r;r")执行询qll＊rbl rx(ql) ％显示结％l r％％r(l)％％rvxl％上述是用访问数据库全程由应用面向对象思想所有操作都比较简单用户要仅是对数据结构了、当前所操作对象及对象属性等等只要对这些有了清晰认识再加上强功能络上使用数据库实现用户与页面交换信息就再也不是什么难事了[xg]四、主要功能程序段、打开数据库xl,r,b,rb"b#b" 数据库路径rvrrb("b")r"rvrrlb0; r" rvr(""b"")r．数据库询操作类讯 rrvrrb("brr")只方式打开r "l l,l r l",,,l rrr " rvrrx(\"r"r("l")"\")"r(r("l"))" "rvxlrl类询rrrvrrb("brr")r "l l,l r l r l"r("l")" rr b lrr",,, l rrr " rl?"r("l")""r("l")""r(r("l"))" "rvxl．3 添加记录操作rrvrrb("brr")可写方式r "l bk,r,zg,zgr r ",,,3r 添加条新记录r("bk")bk 添加相应记录r("r")r…………r("zg")6r("zgr")0r 更新数据库．删除记录操作从表删除匹配记录; x "l r r "rqqrrg("")．5 记录修改和看rrvrrb("brr")r "l r bk r bk"bk,,,3r("l")(rq("l")) 修改各项记录………………rrl五、结束语随着b技术发展基r电子商系统无疑较传统商有着更应用前景如何提系高这种电子商统数据访问效率及事处理能力仍是当前人们所关问题。
（完整版）网页设计毕业论文
网站的设计与制作目录第一章 前言第二章1．1课题来源1．2 网站开发项目需求分析1．3 软件1．4 软件运行环境第二章 网站制作2．1做网页的步骤2. 2做网页的要素2．3 系统各模块功能实现第三章 网站的设计3．1 主页的要求3．2 子页的要求第四章 结束语参考文献摘 要汽车网站是一个结合了汽车销售等多功能浏览的汽车网站，我所使用的软件是Macromedia 公司推出的一款用于网页设计的软件——dreamweaver8。
在网页的制作与链接中，我学到了很多。
关键词： 超链接外观性能第一章 前言1．1课题来源随着二十一世纪新兴科技的飞速发展，如今的电子信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。
就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。
可喜的是在这几十年的发展中我们有了互联网。
互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。
以往，人们出行都以自行车居多，后来公交事业发展壮大，人们便乘坐公交汽车，现如今，随着人们生活水平的提高，越来越多的家庭已经拥有或者想拥有自己的私家车。
正是因为人们的这些需求，越来越多的汽车网站出现在网络上，使人们可以随时了解自己想知道的汽车方面的新闻，真正的做到足不出户，便知天下事。
把汽车销售与网络连接起来，是今后汽车销售发展的必然方向之一。
1．2 网站开发项目需求分析一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。
面对对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。
因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。
网页设计文献综述
文献综述题目个人博客网站设计与实现学生姓名XXX专业班级计算机网络技术网页设计 09级1班学号XXX院（系）软件职业技术学院指导教师(职称) XXX完成时间 XX年5月 20 日个人博客网站的设计与实现摘要在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用.因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
现阶段，个人网站已成为世界互联网中的一只重要力量，而这次我所选择的个人网站建设与友情链接的课题，正是互联网与个人学习生活之间的紧密关系的体现，现今的社会，人们已经离不开了网络，网络已经成为人与人，人与社会之间交流的一种重要形式，他能够把事情的复杂化转为简单化。
而个人网站，恰好是世界互联网迅猛发展过程中的必然产物，人们通过设计一个个人网站，不管其定位是传播一些技术，展示一些商品，还是介绍自己的个人情况，都为人与人，人与社会之间提供了一个沟通交流的平台，缩短了人与人、人与社会之间的距离。
关键词个人网站；沟通交流；1前言随着计算机网络技术的高速发展，传统的桌面系统、C/S架构系统已经不能满足社会的需要。
当今社会是一个网络社会，电子商务系统、企业信息系统已经走进了网络应用系统阶段。
如何快速开发出适应社会各个行业发展的网络应用系统是摆在人们前面的一个难题。
选择什么样的开发平台、开发工具、开发语言、开发技术直接影响行业的信息化建设。
.NET的问世给开发人员带来了一种全新的开发框架，它已经成为一种令人激动的、具有革命性和发展性的新技术。
.NET为行业的信息化提出了彻底解决方案，不论Web开发者、组件开发者、数据开发者、VB GUI开发者，还是任何基于Windows平台的开发者，.NET都以一种全新的开发模式使开发人员更好、更快速的完成工作。
本课题重点以.NET和为开发平台，综合利用ASP.NE T的WEB开发技术[1]和XML跨平台技术，通过开发一个通用网站，真正体验.NET新一代软件开发全新模式，实现网站快速开发和部署。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
流式布局一、百分号计算目标元素宽度÷上下文元素宽度=百分比宽度二、em计算1、浏览器的默认字体大小是16px2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算1 ÷父元素的font-size ×需要转换的像素值 = em值3、这一种千万要慢慢理解，不然很容易与第二点混了。
如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：1 ÷父元素的font-size ×需要转换的像素值 = em值那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：1 ÷元素自身的font-size ×需要转换的像素值 = em值首页、列表页、内容页面等拆分图纸网页的版式、颜色，做原料分离，包括尺寸坐标、颜色、背景图、装饰性的线框、特殊字体、装饰图片等；1、分离颜色，配色提取包括基本配色、普通链接配色和导航部分配色。
1）基本配色：页面、分栏、表格等的背景色。
2）普通配色：普通文字中间出现的链接，包括内容目录和文字内出现的链接等；3）导航部分配色：页面内栏目及导航条部分的配色。
2、提取出组装页面用的布局尺寸、背景图、边框及装饰线、特殊插图等元件。
1）提取尺寸：CSS盒模型中的边界（margin）、边框（border）、填充（padding）、宽度（width）、高度（height）以及XY坐标等。
2）分离背景图：背景图一般包括大面积的重复图案区，还有一种情况是特殊样式的边框、阴影、装饰线等。
3）分离图片：包括装饰性大图、特殊字体的标题或者导航菜单、特殊的小图标。
浏览器兼容1、d iv的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px;然后插入文字，就垂直居中了。
缺点是要控制内容不要换行。
2、m argin加倍的问题，浮动IE产生的双倍距离设置为float的div在IE下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);3、I E与CSS宽度和CSS高度的问题divIE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{width: auto; height: auto;min-width: 80px; min-height: 35px;}4、页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。
但IE不认得这个，而它实际上把 width当做最小宽度来使。
为了让这一命令在IE上也能用，可以把一个<div>放到<body> 标签下，然后为div指定一个类,然后CSS这样设计：#container{min-width: 600px;width:expression_r(document.body.clientWidth<600?"600px":"auto");} 第一个min-width是正常的；CSS制作但第2行的width使用了Javascript，这只有IE 才认得，这也会让你的HTML文档不太正规。
它实际上通过Javascript的判断来实现最小宽度。
5、D IV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位。
右边对象内的文本会离左边有3px的间距#box{float:left; width:800px;}#left{float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}<div id="box"><div id="left"></div><div id="right"></div></div>6、I E捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。
页面结构尽量简单。
7、f loat的自适应高度作为外部 wrapper 的 div 不要定死高度,div CSS制作为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE 下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}8、高度不能自适应高度不能自适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。
例：#box {background-color:#eee; }#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }<div id="box"><p>p对象中的内容＜/p></div>解决技巧：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
9、I E6下为什么图片下有空隙产生改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top。
10、如何对齐文本与文本输入框加上 vertical-align:middle;input {width:200px;height:30px;border:1px solid red;vertical-align:middle;} 11、无法定义1px左右高度的容器IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden zoom:0.08 line-height:1px12、超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A13、BOX模型解释不一致问题在FF和IE中的BOX模型解释不一致导致相差2px解决技巧：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反，important这个属性IE不能识别，但别的浏览器可以识别。
14、FF下文本无法撑开容器的高度去掉height设置min- height:200px;这里为了照顾不认识min-height的IE6可以这样定义:{height:auto!important;height:200px;min-height:200px;}15、浏览器对不同关键字的支持!important 可被FireFox和IE7识别* 可被IE6、IE7识别_ 可被IE6识别*+ 可被IE7识别16、CSS控制透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);FireFox：opacity:0.6;17、FireFox设置Padding属性后会相应的增加Width和Height属性值IE不会用!important方法多定义一套Height和Width18、当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展一个高度为1的空格,代码如下<div id="parent"><div id="content"></div><div style="font: 0px/0px sans-serif;clear: both;display: block"></div> </div>19、CSS的优先性div< .class <div.class< #id <div#id< #id.class<div#id.class20、IE6下overflow:hidden失效当父元素的直接子元素或者下级子元素为position:relative属性的时候，父元素的overflow:hidden属性失效。
解决方法:对父元素同样设置position:relative可以解决该BUG21、FF和OPERA中按钮的行高属性button的行高在Chrome/Safari/IE8等浏览器解析正确的line-height(用户自定的值“50px”);而在Firefox和Opera解析的line-height却是默认的值，只有“15px”。
答案便是加上padding22、定义链接的四种状态要注意先后顺序: Link Visited Hover Active23、用CSS控制cellspacing、cellpaddingtable{border:0;margin:0;border-collapse:collapse;}table td{padding:0;}24、Line-height行高：文本行的基线间的距离。