70+排版极简的网页设计配色方案
70+排版极简的网页设计配色方案
标准的网页设计配色最多不超过三种颜色，复杂的配色方案看上去更为花哨，而反之一些极简的网页配色方案也流行起来，最近的Yahoo首页改版也能体验到未来的设计趋势，下面是排版整洁、极简的网页配色设计方案，放在你的项目中能给你带去灵感！
1. Brilliancy
2. OffSet Media
3. PixelBot
4. Pixel Umbrella
5. Kristi Hines
Very clean, yet professional web design.
6 .Made By On
7. Hot Meteor
Hot Meteor specializes in web, print, and branding. Their site looks really professional and clean, good design is one of the best ways how to attract new clients.
8. Mark Boulton Design
Excellent accents leading your eye through whole page in the way author wants it. Follow me to this through – magazine photo + new(s) design is the first point which grabs attention, author explains there what is this site and company about –that first attention grabber is very important. Only then you look at his logo and read further –work, our clients, news, contact sections.
9. BKWLD
10. Concentric-Studio
11. Vitor Lourenco
Visit his homepage –starting from index page you’ll get amazed how effectively Vitor Lourenco uses white space.
12. Forget Foo
13. GetFinch
14. ShaunInMan
15. Arty Papers
Beautiful website using just few very subtle, monochrome colors and only pink color in logo is used to highlight most important links.
16. Vesess
17. SimpleBits
18. DesignWorkPlan
19. MadeBySofa
20. 80/20 Studio
21. Clear Left
精品网页设计欣赏及评析
精品网页设计欣赏及评析 1.商业清爽型 国外现在较流行的风格，国内也有不少模范者，可是往往在色彩调配和细节方面有所欠缺。图一图二特点：利用方框构图，简介明了，图片一般大面积出现，但图片一定要结构清晰，色彩鲜明色彩方面多使用大面积浅灰度和白色，以衬托logo 和配图的色彩鲜艳，配以高明度小小色块（如导航处）。因为结构构图简单，细节方面一定要讲究，不适宜有过于复杂的logo 和点缀出现，多用简洁明快的几何图形结合。一般此类风格背景如果是彩色，都会是低纯度低亮度彩色，以反衬主题图片和logo。在大面积背景压住的情况下，图片明度越高越爽。画面应该有一个主色调。注意图二左下脚的logo，有意与背景色调相同，以免抢了视觉中心，这是很多人常犯的错误。图三注意细节图案的使用，这是大多数设计者弱点所在，细直线条与箭头、方块、园点不要乱用，每个点的存在你都要有理由。 2. 商业门户型现在的商业门户网站在几乎都是三栏，上面是logo＋banner 。其实门户网站因为信息大，更新频繁，在设计时应该充分考虑可扩展性，我认为可以充分利用下拉特性，充分考虑左上位置的设计，主体争取结构明了简洁。下面我们一起来看看几个门户网站的设计。图四所示的这个网站是卡通网站，广告栏很大，但通过精心设计使之醒目而不凌乱。图片统一使用斜角，统一又不呆板。图五所示网站使用曲线与直线的结合，蓝灰色主色，画面沉静而不脏，这里的色彩难度很高，需要细心调试，色块分割，简单明了。图六所示网站主题部分简之又简，在背景上做足了功夫，轻轻的灰度变化，是现在国际流行的风格，高雅，不花，充分烘托主体。图四图五图六 3. IT 企业实用模板图七图八图九图十 4. 时尚企业网站模板图十一图十二 5. 主题型实用网站模板图十三上图所示模板其logo 和图片以及其绿色的主色调与动物园的环境和业务非常贴切。美食业务主题网站，布局合理大方，整体设计“色香味”俱全，主题鲜明，功能齐全。 6. 学校教育型模板图十四图十五 7. 儿童主题型网站模板图十六图十七图十八图十九 8. 个人个性化网站模板 以下的10个网页设计作品是ThemeForest上最受欢迎的优秀企业网站设计模板的其中一小部分。它们风格低调沉稳，几乎只使用黑白灰三种色彩，却不雷同，并且在细节上都非常讲究。ThemeForest是非常值得网页设计师关注的高品质网站，其上的几乎每一个设计模板都称得上是杰出的设计作品，值得我们认真揣摩学习。这篇文章里我将根据自己的观点对这10个设计模板的设计思路和方法做一总结，列出其中的要点，挖掘值得我们在网页设计中值得借鉴的东西，希望能够对大家有所帮助。
《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式
《HTML5+CSS3网站设计基础教程》_教学大纲
《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
极简主义设计风格
论文题目：“极简主义设计风格”在今后环艺设计中的发展及前途 开题报告（选题研究的意义及主要内容）： (一)、选题研究的意义 随着社会的发展，住房条件不断改善，越来越多的人已经不满足于房子的功能仅仅是满足居住行为而已。现代人离传统的大家庭居住模式越来越远，体现自我价值、突显住户个性的小户型近年来受到很多人的追捧，特别是受到年轻人的追捧。这些人不再介意空间是宽敞，交通是否便利，小区的规划是否合理，他们在乎的是室内设计一定要简洁、明快、充满时尚感。极简主义设计风格恰恰迎合了这些需求，他创造了安静、淡定的空间环境，是一种设计风格。 （二）、主要内容 一、极简主义的概念 二、极简主义的四个特点 三、现代家庭极简装修风格的含义 四、极简主义风格背景 五、极简主义的空间运用 六、极简主义在今后环艺设计中的发展及前途 七、总结
“极简主义设计风格”在今后环艺设计中的发展及前途【中文摘要】：现代人面临着城市的喧嚣和污染，激烈的竞争压力，还有忙碌的工作和紧张的生活。因而，更加向往着清新自然、随意轻松的居室环境。越来越多的都市人开始摒弃繁缛豪华的装修，力求拥有一种自然简单的居室空间。人们在这繁忙的生活中，渴望得到一种能彻底放松、以简洁和纯净来调节转换精神的空间，这是人们在互补意识支配下，所产生的欲摆脱繁琐、复杂、追求简单和自然的心理。 【关键词】极简主义；室内设计；放松空间 一、极简主义的概念 极简主义(Minimalism)又可被称为低限主义，它是在早期的结构主义的基础上发展而来的一种艺术门类。它起源于60年代美国艺术史上的重要变革，最初是对抽象表现主义的一种反应，主张一种形式上的客观与单纯，最初表现在绘画和雕塑，后来遍及整个艺术领域，包括服饰界的 Calvin Klein 都是受极简主义影响下产生的一种简约风格。极简主义亦在近几年的室内设计上造成一股风潮，强调纯粹空间的单纯性，除去多余的装饰，将空间简化至光、墙及体，意谓着运用最简单的构成原理，造成空间的流动与不同层次的穿透性，而极简主义的精随也在于此. 极简主义风格的居室设计极简主义(Minimalism)，并不是现今所称的简约主义，作为对抽象表现主义的反动而走向极至，以最原初的物自身或形式展示于观者面前为表现方式，意图消弥作者借着作品对观者意识的压迫性，极少化作品作为文本或符号形式出现时的暴力感，开放作品自身在艺术概念上的意像空间，让观者自主参与对作品的建构，最终成为作品在不特定限制下的作者。 极简主义是一种设计风格，感官上简约整洁，品味和思想上更为优雅。 极简主义设计已经被描述为最基本的设计，别除了多余的元素、色彩、形状和纹理。 它的目的是使内容被突出出来并成为焦点。从一个视觉的角度来说，极简主义设计意味着平静和思想带回本真。 二、极简风格有这四个特点： 1.功能主义特征。强调功能为设计的中心和目的，而不再以形式为设计的出发点，讲究设计的科学性，重视设计实施时的科学性与方便性。 2.形式上提倡非装饰的简单几何造型。受到艺术上的立体主义影响，推广六面建筑和幕墙架构，提倡标准化原则、中性色彩计划与反装饰主义立场。 3.在具体设计上重视空间的考虑，特别强调整体设计，反对在图板上、预想图上
配色方案
色彩标准 红RED 品红、洋红Magenta（热情）CMYK：C15 M100 Y20 K0 RGB: R207 G0 B112 胭脂红Carmine（大胆）CMYK: C0 M100 Y60 K10 RGB: R215 G0 B64 宝石红Ruby（富贵）CMYK: C20 M100 Y50 K0 RGB: R200 G8 B82 玫瑰红Rose-red（典雅）CMYK: C0 M95 Y35 K0 RGB: R230 G28 B100 山茶红Camellia（微笑）CMYK: C0 M75 Y35 K10 RGB: R220 G91 B111 玫瑰粉Rose-pink（女人味）CMYK: C0 M60 Y20 K0 RGB：R238 G134 B154 浓粉Spinel-red（娇媚）CMYK: C0 M55 Y30 K0 RGB: R240 G145 B146 紫红色Opera-mauve（优美）CMYK: C10 M50 Y0 K0 RGB: R225 G152 B192 珊瑚粉Coral-pink（温顺）CMYK：C0 M50 Y25 K0 RGB: R241 G156 B159 火烈鸟Flamingo（可爱）CMYK: C0 M40 Y20 K10 RGB: R245 G178 B178 淡粉Pale-pink（雅致）CMYK: C0 M30 Y10 K0 RGB: R247 G200 B207 贝壳粉Shell-pink（纯真）CMYK:C0 M30 Y25 K0 RGB:R248 G198 B181 淡粉，婴儿粉（美丽动人）CMYK:C0 M15 Y10 K0 RGB:R252 G229 B223 鲑鱼粉Salmon-pink（有趣）CMYK:C0 M50 Y40 K0 RGB：R242 G155 B135 朱红Vermilion（积极）CMYK:C0 M85 Y85 K0 RGB:R233 G71 B41 绯红，绛红scarlet（生命力）CMYK:C0 M100 Y100 K0 RGB：R230 G0 B18 深红Strong-red（华丽）CMYK:C0 M100 Y100 K10 RGB:R216 G0 B15 绯红Cardinal-red（威严）CMYK:C0 M100 Y65 K40 RGB:R164 G0 B39 酒红Buraunby（充实）CMYK:C60 M100 Y80 K30 RGB:R102 G25 B45
网页设计作品设计说明
湖南软件职业学院《网页设计》期末作品设计说明书 课程名称：网页设计期末作品设计说明书 设计题目：某律师团队专业法律服务网 专业班级： 学生姓名： 指导教师： 起止日期：
某律师团队专业法律服务网网站制作说明 一、网站开发目的和功能简介 随着网络技术的发展与互联网的普及，网站建设与网页制作越来越来成为各行各业以及个人宣传自己的有利工具。门户网站越来越称为律师行业进行…………（略） 二、网站的总体设计 2.1网站名称：某律师团队专业法律服务网 2.2网站栏目划分： 根据本网站的目的和功能规划网站内容，包括如下信息： （1）关于我们：介绍相关律师信息，事务所信息，收费标准…………（略） （2）法律服务：…………（略） （3）法律文书：…………（略） （4）律师手记：…………（略） （5）经典案例：…………（略） （6）在线服务：…………（略） 具休如下图示：
2.3网站导航应用于所有页面提高网站的操作友好性。 2.4网站的风格与色彩选择：页面以浅绿色为背景，黑白灰三色为主体。浅绿色体现了本律师事务所的活力，字体用黑、白、灰色给人一种清析、稳重的感觉。所有页面色调统一，布局相似。 2.5网站目录结构设计合理：不同素材采用不同学文件夹分开存放。如声音放在sound 文件夹、图片放在images文件夹，照片放在photos、FLASH动画放在flash文件夹、样式表文件放在CSS文件夹中、作业成果图放在works等。 三、网站的总体设计 3.1 LOGO设计 Logo应体现律师行业庄重、严谨的形象。本LOGO以暗绿色为背景，金黄色为前景，…………（略） 3.2首页的制作过程 版面分栏结构，即页头、导航栏、FLASH展示、相关内容、版权（如下图）
网页设计经典作品欣赏
____________________________________________________________________________________________ 网页设计经典作品欣赏 大同小异的网页设计已经让你视觉疲劳了吧，加入不规则几何形状的网页设计也许能让你的眼睛重获新鲜感。几何元素的融入不仅让网页变得高大上，也在无形中突出了网页中的某些内容，这样的突出方式并不单薄无力，反而让网页看起来更自然。一网学，致力于网页设计培训、UI设计培训、淘宝美工培训，平面设计培训，是最好的远程设计培训学校。 没有人会对沉闷的网页产生兴趣，而几何图形恰巧能在增强视觉体验的同时营造出活跃的氛围。我们为大家找到了14个融入了几何元素的网页设计，尽情享受吧！ Ondo Ondo的网站选用了较为鲜艳的色彩，再加以特别的效果，让用户在浏览时得到了一种别样的视觉感受。如果上一个案例表达了宁静的主题，那么Ondo表达的就是城市中的现代繁华。 Wildlife 这个网站中的几何元素体现在各方各面，既有设计师的设计，同时，局部也拼凑了一些包含几何元素的真实图片。我们可以看出该设计师对不规则元素十分热爱，图片本身的形状也不是传统的中规中矩，让整个页面多了一种拼贴感。
____________________________________________________________________________________________ Wixel Wixel的网站运用了几何元素，增加了现代化元素。
____________________________________________________________________________________________ Kinder Fotografie 几何元素的叠加使用使画面富有层次感，大小不一的正六边形更是增添了活力。 LIGAYA SCAFF 几何元素的作用比较多元化，随着周围坏境色彩的变化，它也能随之显现出完全不同的效果。在这个案例中，几何元素释放了它的神秘感。半透明的图片设计让网页有了重叠感，而规则的几何也不会让网页很繁复。
实验一HTML、CSS网页制作实验
实验一HTML、CSS网页制作实验 一、做出网页1.html，效果如下图所示： 要求如下： 1、诗的题目格式为红色、加粗、居中显示。 2、作者格式为红色、斜体、居右显示。 3、诗的内容字体格式从上到下分别是
，诗的第一行和第三行内容为蓝色字体。 二、做出网页2.html，效果如下图所示。 要求如下： 1、图像加边框。 2、图像相对于文字左对齐。 三、做出网页3.html，效果如下图所示： 要求如下： 文字颜色正常是#3c3c3c、白色背景，鼠标经过时变为#FF8400、#EDEEF0色背景。
，诗的第一行和第三行内容为蓝色字体。 二、做出网页2.html，效果如下图所示。 要求如下： 1、图像加边框。 2、图像相对于文字左对齐。 三、做出网页3.html，效果如下图所示： 要求如下： 文字颜色正常是#3c3c3c、白色背景，鼠标经过时变为#FF8400、#EDEEF0色背景。
四、请做出网页4.html，效果如下图所示。 五、请做出以下网页，效果如下图所示，保存为5.html： 六、请做出网页6.html，效果如下图所示： 要求如下：
1、使用内嵌式引入CSS样式表。 2、使用类选择器定义元素。 （1）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px 字体； 第二个字母“o”设置为红色、加粗、60px字体； 第三个字母“o”设置为黄色、加粗、60px字体； 第四个字母“g”设置为蓝色、加粗、60px字体。 （2）剩余字母“le”按默认样式输出。 七、请做出网页7.html，效果如下图所示。 要求如下： 1、设置所有文本为宋体、12像素、绿色字体，“春季”字体颜色设为红色。 2、设置标题“春天”为16像素、红色、加粗、居中、上划线的效果。 3、设置文本首行缩进2个字符。 八、请做出网页8.html，效果如下图所示： 要求如下： 1、设置所有文本为微软雅黑、14像素、黑色字体。 2、新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期为绿色字体。 3、设置标题为16像素、左对齐、下划线的效果。 4、设置文本“-百度快照-评价”为灰色、下划线的效果。
实用配色方案模板
转载 实用配色方案目录附录配色方案及色标01 配色方案及色标02 配色方案及色标03 配色方案及色标04 配色方案及色标05 1. 基本配色――奔放藉由使用象朱红色这种一般最令人熟知的色彩，或是它众多的明色和暗色中的一个，都能在一般设计和平面设计上展现活力与热忱。中央为红橙色的色彩组合最能轻易创造出有活力、充满温暖的感觉。这种色彩组合让人有青春、朝气、活泼、顽皮的感觉，常常出现在广告中，展示精力充沛的个性与生活方式。把红橙和它的补色――蓝绿色――搭配组合起来，就具有亲近、随和、活泼、主动的效果，每当应用在织品、广告和包装上，都是非常有效。 1. 基本配色――奔放 1. 基本配色――奔放 1. 基本配色――奔放 2. 基本配色――传统传统的色彩组合常常是从那些具有历史意义的色彩那里仿来的。蓝、暗红、褐和绿等保守的颜色加上了灰色或是加深了色彩，都可表达传统的主题。例如，绿，不管是纯色或是加上灰色的暗色，都象征财富。狩猎绿（hunter green）配上浓金或是暗红或是黑色表示稳定与富有。这种色彩常出现在银行和律师事务所的装潢上，因为它们代表恒久与价值。 2. 基本配色――传统 2. 基本配色――传统 2. 基本配色――传统 3. 基本配色――低沉不同于其它色彩展现柔和，低沉之美的灰紫色没有对比色。灰紫色调合了红紫色、灰色和白色，是个少见的彩色。任何颜色加上少许的灰色或白色，能表达出的柔和之美，有许多种包括灰蓝色、灰绿色等。但若灰紫色本身被赋其它彩度或亮度，则可能掩盖了原颜色的原有意
境。使用补色，或比原色更生动的颜色，可使这些展现柔和之美的颜色顿时生意昂然，但要保持自然的柔美，亮度的变化应尽少使用。 3. 基本配色――低沉 3. 基本配色――低沉 3. 基本配色――低沉 4. 基本配色――动感最鲜艳的色彩组合通常中央都有原色――黄色。黄色代表带给万物生机的太阳，活力和永恒的动感。当黄色加入了白色，它光亮的特质就会增加，产生出格外耀眼的全盘效果。高度对比的配色设计，像黄色和它的补色紫色，就含有活力和行动的意味，尤其是出现在圆形的空间里面。身处在黄色或它的任何一个明色的环境，几乎是不可能会感到沮丧的。 4. 基本配色――动感 4. 基本配色――动感 4. 基本配色――动感 5. 基本配色――丰富要表现色彩里的浓烈、富足感可藉由组合一个有力的色彩和它暗下来的补色。例如，深白兰地酒红色就是在红色中加了黑色，就像产自法国葡萄园里陈年纯美的葡萄酒，象征财富。白兰地酒红色和深森林绿如果和金色一起使用可表现富裕。这些深色、华丽的色彩用在各式各样的织料上，如皮革和波纹皱丝等等，可创造出戏剧性、难以忘怀的效果。这些色彩会给人一种财富和地位的感觉。 5. 基本配色――丰富 5. 基本配色――丰富 5. 基本配色――丰富 6. 基本配色――高雅高雅的色彩组合只会使用最淡的明色。例如，少许的黄色加上白色会形成粉黄色，这种色彩会给全白的房间带来更温馨的感觉。自然光造成柔和的阴影，并且凸显建筑上的细微部分，如此，将能达到设计出幽雅的目的。在服装设计上，米色色调高雅的亚麻、丝绸、羊毛和丝绒能轻描淡写地表示古典、高贵的气质，给人一种雍
平面设计常见的配色方案及色标最精典最全的色板
平面设计常见的配色方案及色标 粉红代表浪漫。粉红色是把数量不一的白色加在红色里面，造成一种明亮的红。象红色一样，粉红色会引起人的兴趣与快感，但是比较柔和、宁静的方式进行。 浪漫色彩设计，藉由使用粉红、淡紫和桃红（略带黄色的粉红色），会令人觉得柔和、典雅。和其它明亮的粉彩配合起来，红色会让想起梦幻般的６月天和满满一束夏日炎炎下娇柔的花朵。
流行——基本配色． 今天“流行”的，明天可能就“落伍”了。流行的配色设计看起来挺舒服的，但却有震撼他人目光的效果。 淡黄绿色（chartreuse）就是一个很好的例子，色彩醒目，适用于青春有活力且不寻常的事物上。 从棒球运动鞋到毛衣，这种鲜明的色彩在流行服饰里创造出无数成功的色彩组合。黄绿或淡黄绿色和它完美的补色——苯胺红（magenta）搭配起来，就是一种绝妙的对比色彩组合。
基本配色——平静 ----------------------------------------------------------------------------------- 在任何充满压力的环境里，只要搭配出一些灰蓝或淡蓝的明色色彩组合，就会制造出令人平和、恬静的效果。 中间是淡蓝的配色设计，会给人安心的感觉，因为它看起来诚实、直接。 带着明色的寒色可保持安宁、平和的感觉。补色和这些强调平静的色彩在明暗度方面一定要类似，这点很重要，因为要是色彩太鲜明，会制造出不必要的紧张。
基本配色——强烈 ----------------------------------------------------------------------------------------- 最有力的色彩组合是充满刺激的快感和支配的欲念，但总离不开红色；不管颜色是怎么组合，红色绝对是少不了的。 红色是最终力量来源——强烈、大胆、极端。力量的色彩组合象征人类最激烈的感情：爱、恨、情、仇，表现情感的充分发泄。 在广告和展示的时候，有力色彩组合是用来传达活力、醒目等强烈的讯息，并且总能吸引众人的目光。
精美网页设计欣赏
精美网页设计欣赏 篇一：40个精美网站设计欣赏 40个精美网站设计欣赏 这组网页设计有各种行业的，大家可以从中找下感觉，学习学习高手们是怎么构图，怎么用色的。 篇二：2015年度最受欢迎的的优秀网页设计网站! 2015 年度最受欢迎的的优秀网页设计网站！ 作者: 一网学最后更新时间：2015-12-17 10:20:27 小编：才看完2015最网页设计丑排行榜，有没有伤到各位的眼睛？在2015年快要结束的时候，我们一起来欣赏一组2015优秀的网页设计，每个网页都各具自己的独特风格。 下面，是 Designmodo 团队评选出的2015最佳网页设计作品： BBQ Cultures BBQ Cultures 的页面设计证明了关乎烧烤的餐饮业网站也可以设计得高大上。设计手法上，设计师结合流行的设计趋势，用足以取悦用户的设计手法来完成设计，包括高清而充满气质的图片，精心制作的视频，漂亮的装饰图形和微妙的交互和动效。尤其是微动效和微交互，让整个站都充满了活力。 In Pieces In Pieces 的页面展示了第一流的动态展示效果是怎样的，设计师巧妙地使用
JS和 CSS将多边形融入页面不同的元素中，让多边形元素赋予了页面全 新的生命力。 Trippeo Trippeo 展示了如何使用现代的解决方案来呈现即将到来的产品。 这个网站采用了经典的横向布局，本质上接近单页滚动式页面设计，所以页面中的滚动动效设计地非常不错，给用户深刻的印象。 Be More by Reebok Reebok 的这个网页采用了经典的单页式的设计，有效地收纳了全部 的相关信息。风格化明显的Grunge 风元素让整个页面的质感极为 突出，动态效果的执行力也极强，赋予了页面良好的用户体验。 The DNA Project The DNA Project 是一个极为创新的音乐网站项目，它为用户提供 了截然不同的音乐制作流程，时尚又不同凡响。每首歌都被划分为 关键的音乐节点、 音轨背后的故事和参与的音乐家等几个部分，这个项目让用户与音 乐人们一同制作音乐。 ACME Experience 网站以更加视觉化的方式来践行这家公司的口号“我们是未来先锋”，这个页面采用率非对称式布局，多层布局技术和微妙的动效，配合这色调活泼的背景，许多有趣的小技巧在页面中各自发挥出独 特的功用，充分展现了“先锋”这一特色。 Weltrade
设计师最常用网站汇总
设计师最常用网站汇总（附带专业点评，设计师必备收藏，持续更 新…） 素材网站 昵图网：（种类齐全、设计师的拼图家园，你懂得） 素材中国：（免费素材网站） 三联素材网：（是一个以提供经典设计素材为主的资源网） 站长素材：（国内最大的建站素材库、互联网人必备网站） 素材库：（分类比较详细，但是数量不是很多，选择少） 素材公社：（上传原创素材可以赚人民币的网站） 图酷：(海量国外矢量素材) 佳木中国：（专注于网站模板和网页素材） 天天素材：（感觉和素材中国太像了……一般的素材还是能够找到的） 创意产业电商交易模式网站 视觉中国：(前身为视觉中国网，目前定位于图片分享及设计产品社会化电商平台) 亚洲CI：（设计公司品牌宣传、视觉设计网络互动平台） 牛社网：(致力于设计师品牌包装、宣传、作品展示与接单，用户可以为自己的网上工作室设置 个性二级域名便于对外宣传) 中国包装设计网：（过去以交流学习为主，目前倾向于包装设计电商发展模式） 插画中国：（全国最大的插画动漫征稿接稿及人才招聘的网站） 网页设计联盟：（致力于网页设计师品牌宣传包装） 哇塞网：（中国领先的手工、原创设计、艺术品、传统工艺品在线交易平台。） 欣赏交流 站酷：（国内最活跃的原创设计交流平台） 红动中国：（设计交流、作品展示平台）
视觉同盟：（专注于中国设计行业及中国设计教育的网络媒体） 中国艺术设计联盟：（拥有大量国内外最新行业资讯和设计大赛） 蓝色理想：（网站设计与开发工作者的交流平台） 中国设计网：（设计师交流学习平台，一个比较早的设计网站） 中国设计之窗：（主要是以资讯和竞赛动态为主的网站） 字体下载网站 找字网：（分类齐全、直接展示字体效果，更方便你查找字体） 字体中国：（专业字体网站） 设计无限：（可以在线预览字体网页效果，更适合网页设计的同学使用） 中国设计网.字体频道：（欣赏学习字体设计） dafont: (英文字体很多、分类详细、唯一缺点是中文字体较少) urbanfonts: (英文字体很多、分类详细) myfonts:（网站最大特色是可根据图片来判断字体，再也不用在群里喊这是什么字体了） 图片分享网站 视觉中国：(前身为视觉中国网，目前定位于图片分享及设计产品社会化电商平台) 花瓣网：（快速收集网络上的图片、视频和网页） 牛社网：(可以上传原创作品出售你的设计服务，同时具备类似花瓣网的图片网络搜藏功能)
html+css网页设计复习题
1、单选题 （1）要使单选框或复选框默认为已选定，要在input标签中加（）属性 A、selected B、disabled C、type D、checked （2）要使表单元素（如文本框）在预览时处于不可编辑状态，显灰色，要在input中加（）属性 A、selected B、disabled C、type D、checked （3）下列哪一项表示的不是按钮。（） A．type="submit" B．type="reset" C ．type="image" D．type="button" （4）下面哪一个属性不是文本的标签属性（） A．nbsp;B．align C．color D．face （5）下面哪一项的电子邮件链接是正确的（） A． B．xxx@ C．xxx@com（6）当链接指向下列哪一种文件时，不打开该文件，而是提供给浏览器下载。（） A．ASP B．HTML C．ZIP D．CGI （7）下面说法错误的是( ) A、CSS样式表可以将格式和结构分离 B、CSS样式表可以控制页面的布局 C、CSS样式表可以使许多网页同时更新 D、CSS样式表不能制作体积更小下载更 快的网页 （8）CSS样式表不可能实现( )功能。 A、将格式和结构分离 B、一个CSS文件控制多个网页 C、控制图片的精确位置 D、兼容所有的浏览器 （9）若要在网页中插入样式表,以下用法中，正确的是（）。 A、 B、 C、 D、
web期末设计大作业经典作品
网站开发技术课程设计报告 题目：兄弟依旧 专业： 班级： 学号： 姓名： 老师： 成绩：_____________________
一、网站设计要求 ?站点题目：自定 ?具体内容自行设计； ?具体要求： 按照Fireworks作效果图—〉切图—〉页面布局的过程进行； 须提交完整的Fireworks页面效果图； 必须用CSS+DIV页面布局； 页面中必须包含JavaScript编程； 页面中必须包含Flash动画（须提交Flash源文件.fla）； 二、信息等相关素材收集 基于设计网站的的要求，其内所包含的图片与文字信息皆来自互联网。并且其选材比较贴合电影说体现的主题，再加上其内的色彩调用，很会让人为之动容并有一种身临其境的感觉。 三、个人网站的总体规划和步骤 1、设计的目的 又一年毕业季，又是一个让彼此动容的季节，在向这段充满欢笑、充满浪漫、充满豪情壮志、也充满酸涩与淡淡忧郁的学生时代告别之际。为此做了个网站以怀念曾经的你和我、曾经一起奋斗的日子、以及那个他或者她。还有此刻的美丽,以及无限的未来向往。 2、设计布局 在网站的右上角有一个音乐播放器，重复播放着BEYONGD的代表作（光辉岁月），在其下面有一个利用JavaScript制作的一个图片轮显效果的界面。写满了对大学四年的怀念图片。网站的左上角用flash制作的一个标题，并在其下方有一个用户登录栏，主要是为了方便用户对网页进行操作。最后一个网站的右下角是主题介绍的大学毕业的微电影链接。 3、网站具体设计过程 首先选定本网页制作工具是网页三剑客：Adobe Dreamweaver CS3+Adobe Fireworks CS3+Adobe Flash CS3
网页设计-页面布局篇(Css+Div)
网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决各种浏览器之间的兼容性(暂不讨论)
第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图： 主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下：
常用RGB颜色表及配色方案
R G B值R G B值R G B值黑色0 00#000000黄色2552550#FFFF00浅灰蓝色176224230#B0E0E6象牙黑413633#292421香蕉色22720787#E3CF57品蓝65105225#4169E1灰色192192192#C0C0C0镉黄25515318#FF9912石板蓝10690205#6A5ACD 冷灰128138135#808A87dougello23514285#EB8E55天蓝135206235#87CEEB 石板灰112128105#708069forum gold255227132#FFE384 暖灰色128128105#808069金黄色2552150#FFD700青色0255255#00FFFF 黄花色218165105#DAA569绿土569415#385E0F 白色255255255#FFFFFF瓜色227168105#E3A869靛青84684#082E54古董白250235215#FAEBD7橙色255970#FF6100碧绿色127255212#7FFFD4天蓝色240255255#F0FFFF镉橙255973#FF6103青绿色64224208#40E0D0白烟245245245#F5F5F5胡萝卜色23714533#ED9121绿色02550#00FF00白杏仁255235205#FFFFCD桔黄2551280#FF8000黄绿色1272550#7FFF00 cornsilk255248220#FFF8DC淡黄色245222179#F5DEB3钴绿色6114564#3D9140蛋壳色252230201#FCE6C9翠绿色020187#00C957花白255250240#FFFAF0棕色1284242#802A2A森林绿3413934#228B22 gainsboro220220220#DCDCDC米色163148128#A39480草地绿1242520#7CFC00 ghostWhite248248255#F8F8FF锻浓黄土色1385415#8A360F酸橙绿5020550#32CD32蜜露橙240255240#F0FFF0锻棕土色1355136#873324薄荷色189252201#BDFCC9
模型用丙烯配色方案(最实用)
熟褐色=柠檬黄+纯黑色+玫瑰红粉玫瑰红=纯白色+玫瑰红 朱红色=柠檬黄+玫瑰红 暗红色=玫瑰红+纯黑色 紫红色=纯紫色+玫瑰红 褚石红=玫瑰红+柠檬黄+纯黑色 粉蓝色=纯白色+天蓝色 蓝绿色=草绿色+天蓝色 灰蓝色=天蓝色+纯黑色 浅灰蓝=天蓝色+纯黑色+纯紫色 粉绿色=纯白色+草绿色 黄绿色=柠檬黄+草绿色 墨绿色=草绿色+纯黑色 粉紫色=纯白色+纯紫色 啡色=玫瑰红+纯黑色 粉柠檬黄=柠檬黄+纯白色 藤黄色=柠檬黄+玫瑰红 桔黄色=柠檬黄+玫瑰红 土黄色=柠檬黄+纯黑色+玫瑰红 玫红色+黄色=大红(朱红、桔黄、藤黄) 朱红色+黑色少量=啡色
天蓝色+黄色=草绿、嫩绿 天蓝色+黑色+紫=浅蓝紫 草绿色+少量黑色=墨绿 天蓝色+黑色=浅灰蓝 天蓝色+草绿色=蓝绿 白色+红色+黑色少量=禇石红 天蓝色+黑色（少量）=墨蓝 白色+黄色+黑色=熟褐 玫红色+黑色（少量）=暗红 红色+黄+白=人物的皮肤颜色 玫红色+白色=粉玫红 蓝色+白色=粉蓝 黄色+白色=米黄 白色、红色、黄色、蓝色、黑色、银色、珍珠白、金色、透明红、透明黄、透明蓝、烟色（也叫透明黑） 调合：普通色系： 1或0.几在这里是代表百份比 橙红色＝1红色+1黄色 绿色＝1蓝色+1黄色 紫色＝1蓝色+1红色 灰色＝1白色+1黑色 德国灰+＝1白色+1黑色+0.3蓝色
黄绿色＝1.5黄色+0.7蓝色 苹果绿＝1白色+1黄色+1蓝色 肉色＝1白+0.4黄色+0.4红色 赭褐色＝1黄色+1红色+0.2黑色 土褐色＝1黄色+1红色+0.6~0.8的黑色 紫罗兰色＝1蓝色+0.7红色+0.2黑色 粉红色＝1白色+0.7红色 天蓝色＝1白色+0.7蓝色 浅黄色＝1白色+0.7黄色 透明色系： 透明绿＝1透明黄色+1透明蓝色 透明橙＝1透明红色+1透明黄色 透明紫=1明红色+1透明蓝色 金属色系： 黑铁色＝1银色+1黑色 烧铁色＝1银色+1黑色+0.4金色 香滨金色＝1银色+0.9金色 哑铝色＝1银色+0.6消光剂 黄铜色＝0.8金色+1.2透明橙色 金叶色＝0.8金色+1透明黄色 金属红＝1银色+1红色（或透明红）加后者更亮金属蓝＝1银色+1蓝色（或透明蓝）加后者更亮
经典网页设计欣赏
经典网页设计欣赏 1. 蓝色代表海洋，宇宙，大海。是一种博大的颜色。此网页采用主色为蓝色。代表了一种博大的精神。也代表了本公司的科技领域强项。不同的蓝色的转换给人一种轻松的感觉。网页右边加以黄色区域来烘托出产品的外形，以及独特。网页整体简单明了。正是这种公司所需要的。 2. 网页采用主色浅蓝色，给人特别轻松的感觉，不是那么的压抑。还有不同的黄色给人的感觉很温暖很平和，黄色的背面是淡淡的绿色，给人清新的感觉。网页的整体似乎让我们知道了这就是生活。是那么舒适安逸。点缀的红色更是画龙点睛。 3.
网页是一则汽车的网页，和传统汽车网页一样采用黑色的背景，凸显出一种高贵，科技的感觉。文章的文字部分采用高明度灰色，体现了主题。汽车轮子处的火，表现了激情，兴奋。使主题更加生化一步。给人庄重稳重的同时，不失激情活跃的一面。 4. 网页主色为黑色，整体为暗色主调。给人神秘的感觉网页主题以黄色明调强调，体现出主题的所有内容。主人物以稍微亮点的色包围，能更好的表现出人物。整体的设计风格让人感到非常的神秘。很让人去向往其中的世界，设计的母=目的体现的淋漓酣至，至善至美。
5. 红色主题永远给人激情的一面。此网页是一则体育网页，红色永远是体育方面的主色调。因为他代表的精神是其他颜色所无法比拟的。白色的文字在红色的界面更加的醒目。文字的编排也很有形式感。页面将主人物和次人物的安排的很恰当。整体给人就是体育激情的一面。 6.
黑色为主色。整体色调为暗色。黑色也是高贵的颜色。整体的黑色就是为了体现出主人物。网页的布局突显出高贵的一面。文字颜色的使用恰到好处。局部的图片处理很恰当。设计风格给人耳目一新的感觉。 7.
基于CSS DIV方式的网页设计的心得体会
基于CSS+DIV方式的网页设计的心得体会 现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具，现在的网民也在不断的增多，所以，了解和学习网络知识是我们作为一名大学生迫切所需的。我利用这一学期的时间，对网页设计进行了初步的认识和了解。综合网站技术和设计人员的体会，CSS+DIV网站建设具有以下优势和不足，其中CSS网页布局的优点体现在如下方面： 一、使页面载入得更快 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 二、降低流量费用 页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率 由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS 的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。 说了这么多CSS网页布局的优点，同时也不能轻视CSS网页布局的副作用： 一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。 二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。 四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能