网页设计基础网页设计基础(第一部分)课件.ppt

1、网页网页设计与网站建设设计与网站建设邢芳邢芳 qq 240173862课程考核课程考核总成绩=平时点到（20）+课堂作业（20%）+基础性实验报告（30）设计性实验（30）其中点到次数为随机抽点，每人被抽点总次数为10次，每次2分。课堂作业共4次，当堂完成，如因有事请假讲该堂课不得分，每次5分。基础性实验报告3个，独立完成，每份10分。设计性实验报告1个，3-4人合作完成，参加答辩，总分30分3帮助文档帮助文档1、该课程需要使用的软件：Dreamweaver,Flash,Photoshop,IEtester,firefox,google chrome,记事本，netdown等。2、该课程需要使

2、用的帮助文档：W3Cschool电子书大全，CSS手册+HTML手册等。3、教师邮箱：联系电话：137671008154资料下载与作业上传资料下载与作业上传1、资料下载ftp:/210.35.207.34用户名：1200401743work密码：12、实验报告上传各行政班统一交到行政班班助处，于截止期当日晚上10:00前上交给任课老师FTP对应的文件夹。ftp:/210.35.207.34用户名：1200600021work密码：123451、Internet 和和 WWWInternet(因特网)是世界范围的计算机网络由各种不同类型和规模的独立运行和管理的计算机网络组成。6 Web WWW是

3、指万维网（world wide web），常被称为web。其本质是一种基于超级文本技术的交互式信息浏览检索工具，是Internet提供的应用最普及、功能最丰富、使用方法最简便的信息服务信息服务，用户可通过它在Internet上浏览、编辑、传递超文本格式的文件（即.html格式文件）。在WWW和HTML标准支持下，各种文字、图形、图像、声音形式的多媒体信息能够通过一种统一的友好界面呈现给用户。1）什么是www7Web是由遍布全球的计算机组成的网络所有web中的计算机都可以彼此通信，采用浏览器/服务器工作模式，即客户/服务器模式。所有计算机都使用名为HTTP的通信标准。82）WWW工作原理工作原理

4、web信息存储于被称为网页的文档中信息以页面（或称Web页）的形式存储在被称为Web服务器的计算机上读取网页的计算机称为web客户端web客户端通过称为浏览器的程序来查看网页主要浏览器有Internet Explorer、Mozilla Firefox和google chrome等9浏览器读取页面？浏览器读取页面？浏览器可通过一个请求来读取某个服务器上的一张网页。请求是一个包含页面地址的标准 HTTP 请求。页面地址类似这样：http:/ HTML 标签用于段落的 HTML 标签类似这样：在 HTML 中像这样定义段落：This is a Paragraph113）客户端和服务器）客户端和服务

5、器客户端客户端是指与数据提供者（服务器）通讯的软件和硬件。服务器服务器一般指能向许多客户端提供数据的大型计算机。服务器包括了服务器硬件和软件。它接受客户请求，然后将处理结果返回给请求的客户端。WWWWWW利用这种客户端/服务器方式使数以万计的用户得以访问全世界的站点。WEBWEB服务器服务器是一种能使用HTTP协议与客户端通讯的特殊类型的服务器。协议协议是一种规则标准，它允许客户端和服务器相互通讯。124）浏览器和服务器 浏览器浏览器是客户端的一种软件。用于显示是客户端的一种软件。用于显示HTMLHTML文档（即网文档（即网页）的内容，这些网页通常存放于页）的内容，这些网页通常存放于WebWe

6、b服务器中。服务器中。WebWeb服务器服务器用于存放客户需要浏览的大量网页文件，还存用于存放客户需要浏览的大量网页文件，还存放了一些与客户端交互时需要执行的程序代码。放了一些与客户端交互时需要执行的程序代码。133、URLURL（Uniform Resource Locator的缩写），统统一资源定位符一资源定位符。互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个唯一的URL来进行标识，这样才能方便查找。对于Web来说，可以简单并通俗把URL理解为网址网址。每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。例如，http:/ text marku

7、p language:html(hyper text markup language:超文本标记语言超文本标记语言)编写而成。网页也称编写而成。网页也称htmlhtml文文件，它是一个纯文本文件。件，它是一个纯文本文件。网站（网站（Web Site,Web Site,即即 WEB WEB站点）站点）形容那些放置网形容那些放置网页供浏览者浏览的计算机。页供浏览者浏览的计算机。每个每个WEBWEB站点包含了很多网页站点包含了很多网页，其中有一个起始，其中有一个起始网页，称为主页。主页是链接到网页，称为主页。主页是链接到webweb服务器上时服务器上时显示的第一个网页，主页名通常为显示的第一个网页，

8、主页名通常为index.htmindex.htm或或index.htmlindex.html。编写编写HTMLHTML文档很麻烦，于是出现了很多可视化文档很麻烦，于是出现了很多可视化的网页制作工具，如的网页制作工具，如DreamweaverDreamweaver。21二、二、网页的基本结构1、网页中的文本 通常网页中的信息以文本为主2、图像和动画 图像也是网页中最主要的元素之一。3、声音和视频 声音是多媒体网页的一个重要组成部分。格式非常多，常用的MIDI、WAV、MP3和AIF等。MIDI、WAV、AIFMP3 和和RM224、表单 通常用来接收用户在浏览器端的输入内容，然后将信息发送到用户

9、设置的目标端 表单通常分为用户反馈表单、留言薄表单、搜索表单和用户注册表单等类型。23留言薄表单留言薄表单搜索表单搜索表单24注册表单注册表单25登陆表单登陆表单265、超链接、超链接是从一个网页指向另一个目的端的链接。6、表格、表格用来控制信息的布局方式7、其他元素、其他元素各种特效27网页的基本构成网页的基本构成28网站的分类网站的分类一、基本常识1、网页：静态:用html语言编写的网页，扩展名为html或htm。动态:用ASP、PHP、JSP等程序生成的网页，使用ASP技术时，扩展名为.asp；使用JSP技术时，扩展名为.jsp。主页:首页,一般用index.html,default.h

10、tml等命名。内页:与主页关联的页面29网站的分类网站的分类2、网站：由单个或多个网页组成的集合门户网站：一种综合性网站，包括很多网页频道。如http:/个人网站：具有较强的个性化色彩，是以个人名义开发创建的网站，其内容、样式、风格都是非常有个性的。如：http:/ 30专业网站专业网站：针对现实生活和工作中某一行业而创建的网站。如：http:/职能网站：职能网站：具有专门的功能，如政府职能网站。如：http:/网站的分类网站的分类313、网页制作中的专业术语、网页制作中的专业术语超文本标记语言超文本标记语言：Hyper Text Markup Language Hyper Text Mark

11、up Language 简称简称HTMLHTML。超链接超链接：通过单击网页中的超链接可以转到相应的：通过单击网页中的超链接可以转到相应的页面上进行浏览。页面上进行浏览。导航条导航条：多个超链接的集合，能有效实现超链接功：多个超链接的集合，能有效实现超链接功能能。网站的分类网站的分类32表单表单：用于填写申请或提交信息时的交互页：用于填写申请或提交信息时的交互页面。面。LogoLogo：网站的标志，通常以图像的形式表现：网站的标志，通常以图像的形式表现。网站的分类网站的分类33网站的页面构形网站的页面构形一、骨骼型 骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向

12、通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上 则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。34网站的页面构形网站的页面构形满版型 版面以图像充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图像上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。35网站的页面构形网站的页面构形上下分割型 把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。36网站的页面构

13、形网站的页面构形左右分割型 把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。37网站的页面构形网站的页面构形中轴型 将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感38网站的页面构形网站的页面构形曲线型 图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。39网站的页面构形网站的页面构形倾斜型 页面主题形象或多幅图片、文

14、本内容倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。40网站的页面构形网站的页面构形重心型 重心有三种概念。1、直接以独立而轮廓分明的形象占据版面中心。2、向心：视觉元素向版面中心聚拢的运动。3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。41网站的页面构形网站的页面构形自由型 自由行结构是无规律的、随意的编排构成，有活泼、轻快之感。42网页的色彩搭配原始基本色相：红、橙、黄（原色）绿、蓝、紫（间色）120度以内间色180度以内补色60度以内邻近色43新中国成立60周年时的腾讯网网页的色彩搭配44汶川大地震哀悼日时的搜狐网网页的色彩搭配4

15、5 韩国饮料营养500网页的色彩搭配网页的色彩搭配46韩国某食品品牌网页的色彩搭配网页的色彩搭配47以上几个网页得出结论：以上几个网页得出结论：如果网页中要用到多种颜色，这些颜色最好为同一个色系。如果出现两种不同色系的颜色，最好是互为补色。如果网页中使用一种主色调，其他颜色应该由主色调派生出来。48注意的事项：1、不要将所有的颜色都用到，要控制在一定范围之内。2、背景和前文的对比要大一些，这样能更好的突出文字内容49网页色彩三要素色相：指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色，绿色，黄色等等都代表了不同的色相。同一色相的色彩，调整一下亮度，或

16、者纯度很容易搭配，比如，深绿，暗绿，草绿，亮绿。50色相色相反差大人眼容易辨认51网页色彩三要素明度：也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏类网站，充满神秘感；一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格。有明度差的色彩更容易调和。52明度明度对比强人眼容易辨认53网页色彩三要素纯度(饱和度)：指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。纯度底的色彩暗淡，含灰色。54饱和度饱和度高人眼容易辨认55色彩所传达的涵义红色：热情、浪漫、

17、吉祥、幸福、暴力、侵略、停止、警告、禁止。橙色：秋天、活跃、新鲜、愉快、能量、食欲。黄色：高贵、明亮、希望、疾病、懦弱。绿色：自然、稳定、成长、柔和、青春、安逸。蓝色：忠诚、安全、保守、宁静、冷漠、悲伤、深远、理智。56色彩所传达的涵义紫色：浪漫、优雅、魅力、忠诚、神秘、稀有。黑色：能力、精致、现代感、死亡、病态、邪恶。白色：纯洁、天真、洁净、真理、和平、冷淡、贫乏。灰色：消极、阴暗、寂寞、失落。57网页安全色网页安全色是指在任何终端浏览用户显示设备上的现实效果都是相同的。所以使用网页安全色进行网页配色可以避免原有的颜色失真问题。网页顏色共216色红色分為0，51，102，153，204，25

18、5绿色分為0，51，102，153，204，255,蓝色分為0，51，102，153，204，255.然后就是组合了，6*6*6216色了。5822种真正安全的网页安全色59是不是一定要用网页安全色？本人觉得216种颜色毕竟有限，仅仅为了保持统一严谨而采用安全色，会严重限制了创作发挥，也扼杀很多精彩纷呈的网页。25625625616777216 216 所以网页安全色要用，但不必过分追求60艺术规律色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。61艺术规律色彩的

19、艺术性：网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。色彩搭配的合理性色彩要根据主题来确定，不同的主题选用不同的色彩。62颜色搭配方法颜色搭配方法主色：根据页面风格以及产品本身的诉求确定主色，主色一般用标准色。如：吉百利食品网站63同种色彩搭配 同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。特点：色相相同、明度或纯度不同 优劣：对比效果统一、文静、雅致、含蓄、稳重，但易产生单调、呆板的弊病64相

20、近色色彩搭配特点：色相环上相邻二至三色对比,色相环上60度以内 优劣：效果感觉柔和、和谐、雅致、文静，但感觉单调、模糊、乏味、无力，必须调节差来加强效果65间色对比搭配 间色：又称二次色，是由三原色中的两原色调配而成的。如：橙、绿。特点：色相对比距离120度左右，为强对比类型 优劣：效果强烈、醒目、有力、活泼、丰富，但也不易统一而感杂乱、刺激、造成视觉疲劳。一般需要采用多种调和手段来改善对比效果66补色色彩搭配 是广义上的对比色。在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。特点：色相对比距离180度左右 优劣：两种颜色互为补色的时候，一种颜色占的面积远大于另一种颜色的面积的时候，

21、就可以增强画面的对比，使画面能够很显眼。一般情况下，补色运用有得有失。67暖色与冷色色彩搭配 暖色色彩搭配 是指使用红、橙、黄色集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。冷色色彩搭配 冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点色彩与白色搭配一般会获得较好的视觉效果。68搭配消色 所谓的消色，就是指黑白灰（也有说是黑白金银灰），这类颜色由于本身没有色性，所以可以说是万用搭配色。当然，说是说万用搭配色，但是也是有一些需要注意的地方：首先，由于本身没有色性，他们必须和色性比较强的颜色搭配会比较出效果；其次，消色与其他颜色搭配的时候，比例一定要控制好，尤其是灰色，灰色是一种很“高档”的颜色，但是问题是使用的过多，会使得页面灰蒙蒙没有质感。