第一章网页设计基础知识

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
3.3 网站名称和CI形象
2. 设计与制作பைடு நூலகம்点
(1)网站名称 ① 网站名称要合法、合理、合情,不能用反动的、色情的、 迷信的、危害社会安全的名词语句。 ② 网站名称要简明扼要、容易记忆。
字数应该控制在6个字以内,例如“XX天地”“XX设计室”“XX网” 等。 一般六个字宽度是78像素左右,友情链接的小标志尺寸是88X31像素。
三、主页欣赏及页面分析
3.6 色彩运用
1.色彩的相关概念 (4)对比色调
对比色调即色性完全相反的色彩搭配。---可产生强烈的视觉效果。
配色时应注意把握“总体协调,局部对比”的原则,是总体色调统一和 谐,局部是钱强烈对比,避免产生刺眼的不良效果。
三、主页欣赏及页面分析
3.3 网站名称和CI形象 1. CI,本是广告术语,意思是通过视觉来 统一企业的形象。
三、主页欣赏及页面分析
3.3 网站名称和CI形象
CI形象包括:设计网站的标志,网站的标准色彩、网站的 标准色彩: 标准字体、网站的宣传标语等方面
网站的标 志
宣传标语
绿色
标准字体: 英文
三、主页欣赏及页面分析
③明度:也叫亮度,指颜色的深浅。
三、主页欣赏及页面分析
3.6 色彩运用
1.色彩的相关概念 (2)色彩的三原色
色彩的三原色指的是红、绿、蓝。通过调整这三个基色 RGB(红、绿、蓝)就可以调整出其他的颜色。
三、主页欣赏及页面分析
3.6 色彩运用
1.色彩的相关概念 (3)色彩的感觉
代表热情、奔放、喜悦,使人产生冲动、愤怒、热情和活力的感觉。 代表高贵、富有,明度高,具有快乐、希望、智慧和轻快的个性。
(2)CI形象设计---网站的CI形象设计包括标志、色彩、字体和标语。 ④ 标语---也可以成为banner广告设计,大多数为GIF图形。是网页内
容宣传的最主要的方式。 设计时应注意以下几点: 1)图像模式设为RGB模式,防止无法直接到处GIF格式的文件 2)注意度量单位为像素(px) 3)标志设计常用规格:88×31px,120×60px,120×90px 。 4)banner广告设计规格:480×60px,150×68px,88×31px。
②色彩—网页标准色的颜色:蓝色、黄/橙色、黑/灰/白色三大系列色。 ③字体—标准字体指用于标志、标题、主菜单的特有字体。
一般网页默认的字体是宋体,但为了体现站点特有风格,可根据网站所 表达的内涵可以选择和整体形象更贴切的其他字体。
三、主页欣赏及页面分析
3.3 网站名称和CI形象
2. 设计与制作要点
1.2 WWW

1.什么是WWW (1)WWW又称万维网,简称为Web或3W,是 一种建立在Internet上的、庞大的、基于超文本的 网络信息系统。 具有全球性、交互性、动态性、跨平台、分布式 等特点。 (2)常用浏览器: Internet Explorer和Netscape
1.2 WWW
2. WWW浏览器与服务器 (1) WWW浏览器:它是WWW的窗口或翻译器, 是专门用来定位和访问web信息的应用程序或工具 软件。 (2) WWW服务器:是对浏览器的请求提供服务的 计算机及其相应的服务程序。网页设计者将制作 好的网页存放在服务器上供用户浏览。
1.5 网页与网站
2、网站 网站:也称为站点,是包括主页在内的多 个网页的集合。
网站制作流程
1.规划阶段 (网站策划) 2. 设计阶段 (页面美工) 3.实施阶段 (网页制作)
详细流程
1.站点策划 2.构思草图 3.美工设计 4.图形制作 5.脚本编程 6.图形页面整合 7.测试发布
三、主页欣赏及页面分析
3.4 设计风格
2.设计与制作要点
①明确网站的服务对象,建立有价值的内容 ②明确设计的想法与目的,追求适当的艺术效果。--主题、内容、色彩、标志、文字、布局等方面考虑。 ③努力去建立和加强效果。---特色、体现网站风格, 并加以重点宣传 例如:突出标准色彩(文字连接色彩、图片的主色 彩、背景色等)、强化标志于每个页面、设计醒目 的宣传标语、统一的图片处理效果、统一的语气和 人称等等
三、主页欣赏及页面分析
“三”型布局 设计时 常使用水平、垂直和弧形导线使整体页面更醒目
三、主页欣赏及页面分析
POP 布局
三、主页欣赏及页面分析
3.6 色彩运用
1.色彩的相关概念 (1)色彩的基本概念 自然界中色彩可分为非色彩和色彩两大类。
非色彩指黑色、白色和灰色。其他的颜色均属于彩色。 ①色相:也叫色泽,是颜色的基本特征,反映颜色的基本面貌。 ②饱和度:也叫纯度,指颜色纯洁程度。





三、主页欣赏及页面分析
3.2 表现主题 (1)观察与分析
思考:从图片上的网页效果可知网页的 主题是什么? 用什么题材反映出主题?
主题:儿童娱乐天地
主题:精美咖啡文化
三、主页欣赏及页面分析
3.2 表现主题 (2)主题选择的应该注意一下几点:

定位小,内容精。 挖掘有特色的主题。 主题贴近生活。
1.1 Internet

2.什么是Internet Internet即“因特网”,它是目前全球最大 的、开放的计算机互联网络。是一个基于 TCP/IP的网络,由分布在各个国家的数以 万计的网络互联设备组成。
1.1 Internet

2.什么是Internet (1) Internet起源于美国国防部的高级研究计划 局,最初主要用于军事。 20世纪70年代迅速壮大,发展成科研和教育机构 服务的网络。 (2) Internet提供的服务:WWW服务(网页浏 览服务)、电子邮件、文件传输(FTP)、在线 聊天、网上购物、网络炒股、联网游戏等等。
三、主页欣赏及页面分析
3.6 色彩运用
1.色彩的相关概念 (3)色彩的配色方案
① 暖色调:即红色、橙色、黄色等色彩,可使主页呈现温馨、和煦和
热情的氛围。
② 冷色调:即情色、了白色和紫色等色彩,可是主页呈现宁静、清凉
和高压的氛围。
③相近色:将色彩按“红-黄-绿-蓝-红”依次过度渐变可以得到一个色
彩环,即红、橙、橙黄、黄、黄绿、青绿、蓝绿、蓝、蓝紫、紫、紫 红、红。
应用协议类型:指获取信息的通信协议,即数据的传输方 式。例如:HTTP、FTP、NEWS等协议类型。 主机域名:指资源所在服务器的地址,可以是IP地址,也 可以是域名地址。例如:IP地址:218.30.66.101;域名 地址:www.sina.com.cn。 路径:指信息资源在web服务器上的目录。 文件名:指要访问的文件名。
三、主页欣赏及页面分析
3.5 版式设计-网页页面布局 1.网页页面模块包括:网站标志、广告条、 主菜单、新闻、搜索、友情链接、邮件列 表、计数器、版权等等。
三、主页欣赏及页面分析
“口”型布局
三、主页欣赏及页面分析
对称布局 (色彩对比: 一半深色, 一半浅色)
三、主页欣赏及页面分析
“T”结构
顶部为横条 网站标志和 广告条 下方左侧为 主菜单 右侧为显示 内容

(3)网页的延伸:包括网站的主题定位和浏览群的定位、 只能交互、制作策划和形象包装等。 突出网页的使用性能和社会功能,是网页设计潜在的第一 要义。
三、主页欣赏及页面分析
3.1 页面的构成元素
设计是一个思考过程,制作是将思考表现出来。也就是说 设计师网页的核心和灵魂。结合网页设计的过程,按照网 页页面所包含的各个构成元素分类阐述: 表现主题 网站名称和CI形象 设计风格 版式设计 色彩运用 网页导航 视听元素
③ 网站名称要有特色---能给浏览者留下深刻的第一印象,并赋予更
多的感官冲击力和空间想象力。
三、主页欣赏及页面分析
3.3 网站名称和CI形象
2. 设计与制作要点
(2)CI形象设计---网站的CI形象设计包括标志、色彩、字体和标语。 ①标志设计—使用图像处理软件和动画制作软件可以完成标志的设计。
Web的标志设计常用规格: 88×31像素---是Internet上最普遍的标志标准 120×60像素---一般用于一般大小的标志 120×90像素---一般用于大型标志
1.4 搜索引擎
搜索引擎:是一个对Internet上信息资源进 行搜集整理、供用户快速查询的系统。
1.5 网页与网站
1、网页 (1)网页的本质----HTML源代码。 网页是用HTML写成的文档,在Internet中可以 通过浏览器程序进行浏览。 (2)网页分类:静态网页与动态网页
静态网页:运行于客户端的浏览器,只能固定显示事先设 计好的网页的内容,无法与WWW服务器进行动态交互。 网页后缀名:.htm .html等。 动态网页:是指用ASP、PHP、JSP、CGI、ASP.NET等 技术制作的网页。 网页是否需要经过服务器端运行,是判断网页是否属于动 态网页的重要标志。
三、主页欣赏及页面分析
3.1 页面的构成元素
页面设计包括:版式、视听元素、延伸设计三部分组成。 (1)网页的版式:是在有限的屏幕空间中将视听元素进行 有机的排列组合,在表现理性思维的同时,通过具有个人 风格和艺术特色的视听传达方式传达信息,并产生感官上 的美感和精神上的艺术享受。 (2)视听元素:范例:weiwei个人网站的欣赏、浮沉、阿景の小屋欣赏
第一章 网页设计基础知识
主讲人:于丹
一、什么是网页
网页是用HTML语言编写的,通过WWW网 传输,并被Web浏览器翻译成可以显示出 来的集合文本、图片、声音和数字电影等 新形势的页面文件。
1.1 Internet

1、计算机网络与网络协议 计算机网络:是Internet的基础,是多台计 算机通过特定的链接方式构成的一个计算 机集合体。 网络协议:可以理解网络中的设备互相 “打交道”是共同遵循的一套规则,即以 何种方法获得所需的信息。
介于冷暖两色之间,富有生命和生机,从而显得和睦、宁静健康的感觉
代表欢快、甜美与收获,具有轻快、欢乐、热烈、温馨和时尚的感觉。 体现凉爽、清新更新的感觉。
代表严肃、夜晚、沉着,具有深沉、神秘、寂静、悲哀和压抑的感觉。
代表纯洁、简单,具有洁白、明快、纯真和清洁的感觉。
代表敏感、消极,具有中庸、平凡、温和、谦让、中立和高雅的感觉。
二、网页设计常用的工具
2.2 网页美化工具 1.Photoshop---美化网页常用工具 2.Fireworkes---是专门为制作网页图形而设计 的软件,它能自动生成切割图像、生成光 标动态感应的JAVA程序,具有强大的动画 功能和一个相当完美的网络图像生成器。 3.Flash---它可以讲声音、音效、动画等融合 在一起,以制作出高品质的网页动态效果。 它主要应用于网页动画制作、教学动画演 示,瓦部分也设计、多媒体创作领域等。

WWW服务器采用客户机/服务器的工作模式。
1.3 统一资源定位器URL
(1)URL:是对Internet上资源的一种准确 定位机制,它以一种全世界统一的、唯一 标识来确定某个网络资源,可以访问 Internet任何一台主机或者主机上的文件。
1.3 统一资源定位器URL
(2)URL的组成:检索资源所使用的协议类型、存 放资源的主机域名、资源所在的路径名与文件名。 (3)URL的地址格式:应用协议类型://主机域名/ 路径/文件名

详细流程
1.站点策划 2.构思草图 3.美工设计 4.图形制作 5.脚本编程 6.图形页面整合 7.测试发布

二、网页设计常用的工具
2.1 网页制作工具 1.文本编辑器---网页制作通常使用HTML语言, HTML文档可以使用多种文件编辑器进行编辑。 例如记事本、word、写字板等。 2.FrontPage---是由微软公司推出的网页制作工具。 其界面与word极为相似。 3.Dreamweaver---具有可视化编辑界面,用户不必 编写HTML源代码就可生成跨平台、跨浏览器的 网页,即使是初学者也能制作出专业水准的网页, 是网页设计者的首选工具。
三、主页欣赏及页面分析
3.4 设计风格 风格是指Web站点的整体形象给浏览者的综合感
受。可以通过版面布局、显示方式 、交互方式、 文字风格等多种形式体现出来。
三、主页欣赏及页面分析
3.4 设计风格 1.观察与分析
思考: 以下网页的风格是什么?
三、主页欣赏及页面分析
三、主页欣赏及页面分析
三、主页欣赏及页面分析
相关文档
最新文档