网页设计与制作课件 项目1：了解网页基础组成和色彩_第1页
网页设计与制作课件 项目1：了解网页基础组成和色彩_第2页
网页设计与制作课件 项目1：了解网页基础组成和色彩_第3页
网页设计与制作课件 项目1：了解网页基础组成和色彩_第4页
网页设计与制作课件 项目1：了解网页基础组成和色彩_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与制作——项目1：了解网页基

础组成和色彩Project1项目1学习目标〓知识目标〓了解网页的基本概念。了解网页设计该用到的软件。掌握网页的布局和色彩。〓技能目标〓学会网页布局版式设计的有哪些。学会网页设计的基础有哪些。学会网页设计中的色彩分类有哪些。〓素质目标〓从基础学起，培养工匠精神，多学多练加强个人的网页设计能力。养自身的审美能力，增加网页设计中的美感。职场情境当我们看到网页时进入眼帘的除了布局以外就是网页的色彩了，为此，小艾想要对网页的基础、布局和色彩部分进行一下初步了解，而同事凯程告诉她，好的网页布局和色彩会令访问者耳目一新，同样也可以使访问者比较容易找到他们所需要的信息，所以网页设计初学者应该对网页的基础、布局和色彩的相关知识有所了解。接下来，大家可以跟随小艾一起走进网页设计之中，来了解网页的基础、布局和色彩。大家可以在本节中了解网页的基本概念、了解网页设计的基础知、掌握网页布局设计与色彩等内容。CONTENTS任务1了解网页的基本概念目录任务2了解网页设计的基础知识任务3掌握网页布局设计与色彩综合实战—绘制国字型网页布局草图综合实战—采集色彩课后习题任务1了解网页的基本概念要学习网页设计，首先要了解一些基本概念，如网页、URL等。本节将首先介绍这些网页的基本概念，从而为后面设计更复杂的网页打下良好的基础。活动1认识网页网页，是指网站中的任何一个页面，通常是HTML格式。进入网站后第一眼看到的即是这个网站的首页任务1了解网页的基本概念要学习网页设计，首先要了解一些基本概念，如网页、URL等。本节将首先介绍这些网页的基本概念，从而为后面设计更复杂的网页打下良好的基础。活动2认识统一资源定位符

URLURL英文全称是

UniformResourceLocator，即统一资源定位符，它是一种通用的地址格式，指出了文件在

Internet中的位置。一个完整的

URL地址由协议名、服务器地址、在服务器中的路径和文件名

4部分组成，浏览器地址栏中显示了完整的

URL地址任务2了解网页设计的基础知识本次任务就带领大家了解一下网页设计的基础知识，为以后的学习做好铺垫。活动1了解网页设计软件网页设计的软件有很多，对于初学者只要了解用于网页的布局、图像处理和动画制作的相关软件就可以了。任务2了解网页设计的基础知识活动2了解网页标记语言

HTMLHTML的任何标记都由“<”和“>”括起来，如<HTML><I>。在起始标记的标记名前加上符号“/”便是其终止标记，如</I>，夹在起始标记和终止标记之间的内容受标记的控制，例如<I>假期愉快</I>，夹在标记“I”之间的“假期愉快”将受标记“I”的控制。HTML文件的基本结构也是如此。任务2了解网页设计的基础知识活动2了解网页标记语言

HTML下面介绍一下HTML文件的基本结构。1.HTML标记<Html>标记用于

HTML文档的最前边，用来标识

HTML文档的开始。而</Html>标记恰恰相反，它放在

HTML文档的最后边，用来标识

HTML文档的结束，两个标记必须一块使用。2.Head标记<head>和</head>构成

HTML文档的开头部分，在此标记对之间可以使用<title></title>、<script></script>等标记对，这些标记对都是描述

HTML文档相关信息的标记对，<head></head>标记对之间的内容不会在浏览器的框内显示出来，两个标记必须一块使用。3.Body标记<body></body>是

HTML文档的主体部分，在此标记对之间可包含<p></p>、<h1></h1>、<br></br>等众多的标记对，它们所定义的文本、图像等将会在浏览器内显示出来，两个标记必须一块使用。4.Title标记使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“标题”，要将网页的标题显示到浏览器的顶部其实很简单，只要在<title></title>标记对之间加入要显示的文本即可。任务2了解网页设计的基础知识活动3了解网页组成网页设计时页面中的主要组成元素有文字、图片及超级链接等项目，其中文字及图片是用来表达页面中的资料内容。但是网站中当然不可能只有一个页面，此时“超级链接”就负起了各个网页之间链接的工作。文字、图片与超级链接是网页的主要组成组件。网页效果的技术一日千里，单纯的文字及图片已经无法满足设计及浏览者的需求，背景音乐、Animate动画等多媒体交互式特效是目前网页设计的主流素养小课堂在网页设计的最初阶段，要结合自身对网页的学习与理解去创造属于自己的网页内容，网页中不应出现违反相关规定的文本、图片以及视频等等。将正能量有序的去传播去普及。任务3掌握网页布局设计与色彩活动1掌握网页布局设计设计网页页面时需要根据不同的网站性质和页面内容选择合适的布局形式，通过不同的页面布局形式可以将常见的网页分为以下几种类型。1.“国”字型布局“国”字型：这种布局是网页上使用最多的一种布局类型，是综合性网站常用的版式，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列小条内容，通常情况下左边是主菜单，右面放友情链接等次要内容，中间是主要内容，与左右一起罗列到底，最底端是网站的一些基本信息、联系方式、版权声明等。这种版面的优点是页面充满、内容丰富、信息量大；缺点是页面拥挤、不够灵活。2.拐角型布局拐角型，又称T字型布局，这种结构和上一种只是形式上的区别，其实是很相近的，就是网页上边和左右两边相结合的布局，通常右边为主要内容，比例较大。在实际运用中还可以改变T布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图像或导航栏。这种版面的优点是页面结构清晰、主次分明，易于使用；缺点是规矩呆板，如果细节色彩上不到位，很容易让人“看之无味”。3．框架型布局框架型布局一般分成上下或左右布局，一栏是导航栏目，一栏是正文信息。复杂的框架结构可以将页面分成许多部分，常见的是三栏布局。左边一栏显示导航栏，右边显示正文信息。4.封面型布局这种类型的页面设计一般很精美，通常出现在时尚类网站、企业网站或个人网站的首页，优点显而易见、美观吸引人；缺点是速度慢。5.Html5型布局Html5型是目前非常流行的一种页面形式，由于Html5功能的强大，页面所表达的信息更加丰富，且视觉效果出众。6.标题正文型布局这种类型即上面是标题，下面是正文，一些文章页面或注册页面多属于此类型。任务3掌握网页布局设计与色彩活动2掌握网页色彩网页色彩与人的心理感觉和情绪有一定的关系，利用这一点可以在设计时形成自己独特的色彩效果，给浏览者留下深刻印象，加大产品的售出概率。不同的色系在网页中也会拥有自己的独特之处，网页色彩分类主要有按照色相分类和按印象分类两种。1.按照色相分类色彩常见的色彩搭配按照色相的顺序归类。每类都以该色相为主，配以其他色相或者同色相的，应用对比和调和的方法，并按照从轻快到浓烈的顺序排序。红色配色方案橙色配色方案任务3掌握网页布局设计与色彩黄色配色方案绿色配色方案蓝色配色方案紫色配色方案任务3掌握网页布局设计与色彩活动2掌握网页色彩网页色彩与人的心理感觉和情绪有一定的关系，利用这一点可以在设计时形成自己独特的色彩效果，给浏览者留下深刻印象，加大产品的售出概率。不同的色系在网页中也会拥有自己的独特之处，网页色彩分类主要有按照色相分类和按印象分类两种。2.按印象分类色彩色彩搭配看似复杂，但并不神秘。既然每种色彩在印象空间中都有自己的位置，那么色彩搭配得到的印象可以用加减法来近似估算。如果每种色彩都是高亮度的，那么它们的叠加，自然会是柔和、明亮的；如果每种色彩都是浓烈的，那么它们叠加，就会是浓烈的。当然在实际设计过程中，设计师还要考虑到乘除法，例如同样亮度和对比度的色彩，在色环上的角度不同，搭配起来就会得到千变万化的感觉。因此，色彩除了按色相的搭配外，还可以将印象作为搭配分类的方法。任务3掌握网页布局设计与色彩任务3掌握网页布局设计与色彩任务3掌握网页布局设计与色彩任务3掌握网页布局设计与色彩任务3掌握网页布局设计与色彩拓展知识既然是学习了网页设计中的色彩了，就要对网页安全色有一个初步的了解。网页安全色是当红色、绿色、蓝色色彩数字信号值为0、51、102、153、204、255时构成的色彩组合，它一共有6×6×6=216种色彩（其中彩色为210种，非彩色为6种）。216网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的色彩集合（调色板），也就是说，这些色彩在任何终端浏览用户显示设备上的显示效果都是相同的。所以在网页设计中使用216网页安全色可以避免原有的色彩失真的问题。

任务3掌握网页布局设计与色彩活动3掌握网页中的色彩推移网页页面中采用色彩推移的方式组合色彩，这通常是构成页面统一色调的最好方法之一。色彩推移是将色彩按照一定规律有秩序地排列、组合的一种作品形式。种类有色相推移、明度推移、纯度推移、互补推移和综合推移等。设计师可以通过色彩推移的方法使页面色彩看起来更加统一、和谐。色彩推移同样可以运用到局部图像上。任务3掌握网页布局设计与色彩活动3掌握网页中的色彩推移1．色相推移

色相推移是将色彩按色相环的顺序，由冷到暖或由暖到冷进行排列、组合的一种渐变形式。为了使画面丰富多彩、变化有序，色彩可选用色相环，从一种色彩推移到另一种色彩，也可以选择灰度色相环，从白色到黑色或从黑色到白色。2．明度推移明度推移是将色彩按明度等差级系列的顺序，由浅到深或由深到浅进行排列、组合的一种渐变形式。一般都选用单色系列组合，也可选用两个色彩的明度系列，但也不宜择用太多，否则易乱易花，效果适得其反。3．纯度推移纯度推移是将色彩按等差级数系列的顺序，由鲜到灰或由灰到鲜进行排列、组合的一种渐变形式。4．互动推移互补推移是处于色相环通过圆心180度两端位置上一对色相的纯度组合推移形式。5．综合推移综合推移是将色彩将色相、明度、纯度推移进行综合排列、组合的渐变形式，由于色彩三要素的同时加入，其效果要比单项推移复杂、丰富得多。综合实战—绘制国字型网页布局草图实战训练求掌握在Photoshop软件中新建网页文档的方法掌握在Photoshop软件中绘制矩形的方法键入对应文本实战素材素材文件：无任务单项目编号1-1项目名称综合实战—绘制国字型网页布局草图1学时时间地点目的：实践网页设计前期的布局构图课堂实践：在Photoshop软件中新建文档、绘制矩形、键入文本，完成一个国字型页面的布局。考核标准：在Photoshop软件中新建文档，设置宽度与高度为1024像素*768像素。10分绘制不同色彩的矩形。10分键入不同区域的文字10分内容可粘贴：评价评分：指导教师签字：综合实战—绘制国字型网页布局草图实战效果图效果文件：源文件/项目1/综合实战—绘制“国”字型网页布局草图，如图综合实战—吸取颜色实战训练要求掌握使用Photoshop打开文档的方法掌握吸管工具的使用吸取颜色变为前景色设置应用于网页的Web颜色实战素材素材文件：素材/项目1/精油，如图任务单项目编号1-2项目名称综合实战—采集色彩

时间地点目的：实践网页设计中图片的色彩吸取流程课堂实践：在Photoshop中打开素材、设置吸管工具、吸取颜色设置前景色、查看Web颜色，完成一个网页图片的颜色吸取。考核标准：打开网页图片。10分选择吸管工具。10分设置前景色10分查看Web颜色10分内容可粘贴：评价评分：指导教师签字：综合实战—吸取颜色实战效果图效果文件：源文件/项目1/综合实战—色彩采集，如图。

课后习题一．判断题1.()首页是指网站中的任一页面。2.()网站架构图是网站内容的组织结构。3.()网页设计时的色彩可以随意的进行搭配。二．填空题1..通常浏览者进入网站时，最先看到网页界面被称为

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

温馨提示

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

最新文档

评论

0/150

提交评论