网页构图与色彩_第1页
网页构图与色彩_第2页
网页构图与色彩_第3页
网页构图与色彩_第4页
网页构图与色彩_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页构图与色彩第1页，课件共16页，创作于2023年2月第二节页面色彩以及图片格式一、网页用色概述基本要求：要做到有针对性的用色。做公司的网页：应从标准色入手，把表现公司的主体色用上去；接下来是平面设计，搭配色彩的明暗、轻重、冷暖、调和色和对比色。应该针对不同的站点主体来布置颜色。用色还要考虑：浏览者的类别，社会背景，心理需求和场合的差异。关注流行色的发展；网页色彩的使用比处理网页重心更加重要，也更复杂。第2页，课件共16页，创作于2023年2月二、色彩的基本概念自然界的颜色分为：彩色和非彩色。非彩色指黑、白和各种深浅不一的灰色，其它颜色属于彩色。彩色具有三种属性:色相，饱和度，明度。色相似颜色的基本属性，反映颜色的原貌，通过色相人们才能区分各种颜色，人们常说色其实就是指色相。饱和度也叫纯度，指颜色的纯洁程度，饱和度越大，颜色越生动活泼，有很强的视觉冲击力。如果饱和度越小，颜色就不纯净，显得灰暗。明度也叫亮度，体现颜色的深浅。而非彩色只有明度特征，而没有色相和饱和度第3页，课件共16页，创作于2023年2月所有的色彩都可以通过三原色调配出来（红绿蓝）每种颜色可以调配的范围从0-255共计256个色阶。如果用十六进制表示，就是00-FF。FFFFFF代表白色，而000000代表黑色。除了应该对色彩如何调配有所了解之外，网页制作还需要对色彩所表现的内涵有所熟悉。尽量使用淡雅简洁的色彩；背景尽量少用灰暗，深沉的色彩，根据主页面的主体来选择主色调。第4页，课件共16页，创作于2023年2月三、色彩和GIF、JPEG文件格式色彩的载体是图像，图像的载体是文件格式，互联网上使用的最多的是两种格式：GIF、JPEG线条简单、色彩种类比较少的图形或是制作透明图形、动画，使用GIF。若要在网上放置照片，或是处理过的图片，就用JPEG格式。GIF最多使用256色，从00-ff，共8位。JPEG使用24位真彩色，从000000-ffffff有256*256*256种颜色。结论：当图像色彩较少时保存JPEG不合算，文件体积大，且边缘失真。均采用64色GIF时，图像尺寸大幅减小，但图像品质下降。第5页，课件共16页，创作于2023年2月四、web安全调色板 当我们把精美的GIF图像或JPEG图像安插在网页上时，却发现有时候不能完美显示，因为浏览器若没有外挂相应的图形处理接口程序的话就只能正确显示216色。 为了解决这一问题，photoshop5.5中除了采用了24位真彩色调色板外，还带有web安全调色板，只有从web安全调色板上去颜色，才能保证这些颜色在网页上原原本本地显示出来，从而保证图片的显示和在浏览者浏览时看到的一致。第6页，课件共16页，创作于2023年2月安全调色板上的色彩不是连续的而是跳跃的。如果采用了安全调色板以外的颜色，在web上显示时就会产生“抖动”。抖动的原理是：他伪造了那些在颜色有限的调色板上不能显示出来的颜色；在视觉上，紧邻像素倾向于混合而产生在图像中实际不存在的颜色，从而达到一种补偿目的；抖动的图像有很多颗粒，显得非常粗糙。抖动并不是坏现象，在网页上，若想尽量减少ＧＩＦ尺寸，又想让图形文档看起来依旧流畅，就用抖动来实现。第7页，课件共16页，创作于2023年2月第三节页面能构图方法一、页面布局相关的基本概念１．页面尺寸页面尺寸和显示器分辨率有关系，网页设计的局限性就在于无法突破显示其显示的范围，而因为浏览器的界面也占去不少屏幕空间，留下给页面的范围变得非常小。当分辨率在800＊600的情况下，浏览器为标准工具栏时页面的可用显示尺寸为780＊428，分辨率在640＊480情况下，页面的显示尺寸为620＊311，由此看出：分辨率越高可供使用的页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。目前浏览器的窗口都可以取消和增加。第8页，课件共16页，创作于2023年2月２．整体造型 造型就是创造出来的物体形象。这里是指页面的整体形象，图形与文本的结合应该是层叠有序。 同色彩一样，不同的形状代表的意义不同。３．页眉 页眉又可称之为页头，作用是定义页面的主题。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。一般在页眉部分放置站点名字、图片和公司标致及旗帜广告。４．文本 文本在页面中是以行或者块的形式出现的，他们的摆放决定着整个页面布局的可视性。５．页脚 页脚是指在页面最下方的一块空间，和页眉相呼应。页脚放置制作者、版权、导航栏。第9页，课件共16页，创作于2023年2月６．图片 图片和文本时网页的两大构成核心，图片和文本的排列放置关系成了整个页面布局的关键。７．多媒体声音，动画和视频其他媒体在动态网页兴起的今天，其布局也至为重要。第10页，课件共16页，创作于2023年2月二、网页页面布局方法网页布局两工具：纸和计算机１．纸上布局法例如：以一家有关时尚内容的站点的页面为例。步骤１：准备工具步骤２：选择页面尺寸。步骤３：页面总体造型的选择。步骤４：选择一个形状作为整个页面的主题造型。步骤５：选择一个中意的基本结构为整个页面的主题造型。步骤６：开始增加页眉。步骤７：增加文本。步骤８：增加图片。２．软件布局法最为适合的是ｐｈｏｔｏｓｈｏｐ。第11页，课件共16页，创作于2023年2月第四节文本色彩体系若你查看网页的源代码的话，常看到以下的代码：<bodybgcolor=“#000000”text=“#ffffff”link=“#ff0000”vlink=“#00ff00”alink=“#00ffff”>这行代码的作用在于为整个网页规定了色彩体系，包括背景色（bgcolor属性）000000（黑色），文字前景色（text属性）ffffff（白色），超级链接文字（link属性）ff0000（红色），在单击链接（vlink属性）后变成绿色，在单击的瞬间（alink属性）为浅蓝色，整个网页的文本颜色体系基本上就是用这行html语句规定的。十六进制与颜色的对应关系不必背下来，可以借助专用生成颜色的语句的程序得来。这个程序使用javascript编成，整体是一个html页面，在任何平台上都可以运行。初始界面如图3-26所示。第12页，课件共16页，创作于2023年2月

在颜色设置指导选项组中包含数项调整项，开发人员可以针对某种类型的文本进行调整，直接拉动分别代表rgb三个色彩分量的滑块就可以改变相应的文本颜色了。最下方的示范文字用来预览显示效果，说明如下：所有的普通文字的色彩：显示正常文本颜色。Link颜色示范：显示未访问的超链接颜色。Vlink颜色示范：显示已经访问的超链接颜色。Alink颜色示范：显示超链接被激活时的颜色。第13页，课件共16页，创作于2023年2月 当所有颜色都设置好后，在中间的文本框中的html源码即为当前颜色体系的html源代码。 你可以选择一种设计，然后把下面的源代码拷贝到自己的html文档中去，使其遵循该颜色体系。注意：并非所有颜色都可以在网页上得到完美显示，因为浏览器可能显示不出用户的颜色而发生抖动，在生成html源码时有个按钮“makesafe”。这样就可以生成基于安全色的色彩体系了。同时可以选择所生成的是为html还是css使用，只要把选项改为相应的类别即可。比如为html生成的html源代码为：第14页，课件共16页，创作于2023年2月

<bodybgcolor=“#ffffcc”text=“#000000”link=“#009900”alink=“#003300”vlink=“#cc6600”>只需要将这段html代码把目标文件中的<body>标记替换即可。若改成css生成代码，只需要把选项改为css后，生成如下代码：<style>body{background:#ffffcc;color:#000000}a:link{color:#009900}a:active{color:#003300}a:visited{color:#cc6600}</style>只要把这段代码拷贝到<head>,</head>标记即可。利用ｒｇｂ颜色体系可以设计一些颜色组合，

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论