网页设计原理 PPT
合集下载
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页设计与制作课件第1章
上一页 返回
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
网页制作(超详细ppt版)
Web浏览器的选用
现在可以得到许多web浏览器，他们遍 及了几乎所有的计算机系统。Web浏览器 的功能是充当与web的接口，它们在 internet上对特定的web页面和文档发出请 求，当它们接收到文件后，就将格式化后 的版本返回html文件并显示到屏幕之上。 安装了web浏览器的计算机还可以处理ftp 等方法的信息请求。
1.网页和网站 2.动态网站和静态网站 3.web1.0和web2.0
三.Html基础及简单页面设计
HTML的编写是指创制和定义html文档 的过程。重要内容:
1.Html标记 2.Html的基本结构 3.创建一个简单页面 4.浏览自己的页面
文档结构和格式的定义是由html元素来 完成的。而html元素是由单个或一对标记 定义的包含范围。一对标记是指一个起始
要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写的。
www是一个全球性的、交互式的、动态的、 多平台的、分布式的、图像超文本的信息系统。
要能在web上四处不遨受游地域，的首访限问先制者，必和网须网站站安上有装的信一息个可 w上e台导b的不浏航限受览制最操器，作简如系。单台统有的客平一了户台方只通机服自法要就构务己互可就成器联以的分，是网布多w交信结保e互息布持b合的、多可浏连过反媒浏以览以新程馈体在览随器，信信w时器w提息息后w随上交，的，地发如各进在行种w更性eb 能w在ind各ows页、上lin移n式ux动等。你可以通图过像和选声择音指、视定频的高亮 度系显统示平台的文字、词或图像从等一个页面移至另一 页面，也可以利用该页的地址或url（uniform resource locator）统一资源定位器来直接移至 该指定页。
网站设计WebDesign01精品PPT课件
网站程序设计语言
• JavaScript和VBScript脚本语言 • Java • CGI • ASP • • PHP • JSP
1.4 常用网站管理与制作软件
HTML和XHTML
HTML HTML（Hyper Text Markup Language）是网页制作 的主要标记语言。可用任何文本编辑器进行编写。 XHTML XHTML（Extensible HTML），是更严谨、更纯净的 HTML，符合Web设计标准，是未来发展的方向软件
Fireworks 主要用于制作网页图像、标志、GIF动画、图像按钮与 导航栏等。 Flash 主要用于制作矢量动画，如广告、网站片头动画、动画 短片、MTV等。
Photoshop 具有的强大功能完全涵盖了网页设计所涉及到的各种需 求（除了多媒体）。
1.4 常用网站管理与制作软件
页面左侧
➢是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网 站的主要内容。
➢如果导航栏内容不多，不超过两排，可以根据网站风格灵活摆放， 上方或左侧等。
➢如果网站栏目很多，可以将导航栏分为多排放置在Logo右侧或下 方。
页面上方
•如果导航栏内容较多的话，尽量使用文字超链接而不 用图片。不过，如果导航栏内容不多，或者网页内容 比较活泼的话，多采用图片或Flash制作导航栏。
图片导航栏
Flash导航栏
1.3 从功能角度分析网页
3.广告条
➢广告条又称Banner，其功能是宣传网站或替其他企业做广告，以 赚取广告费。 ➢Banner的尺寸是有国际标准的，按照标准制作可以使网站更显专 业
• 468*60 • 120*60 • 88*31 • 120*240
1.3 从功能角度分析网页
• JavaScript和VBScript脚本语言 • Java • CGI • ASP • • PHP • JSP
1.4 常用网站管理与制作软件
HTML和XHTML
HTML HTML（Hyper Text Markup Language）是网页制作 的主要标记语言。可用任何文本编辑器进行编写。 XHTML XHTML（Extensible HTML），是更严谨、更纯净的 HTML，符合Web设计标准，是未来发展的方向软件
Fireworks 主要用于制作网页图像、标志、GIF动画、图像按钮与 导航栏等。 Flash 主要用于制作矢量动画，如广告、网站片头动画、动画 短片、MTV等。
Photoshop 具有的强大功能完全涵盖了网页设计所涉及到的各种需 求（除了多媒体）。
1.4 常用网站管理与制作软件
页面左侧
➢是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网 站的主要内容。
➢如果导航栏内容不多，不超过两排，可以根据网站风格灵活摆放， 上方或左侧等。
➢如果网站栏目很多，可以将导航栏分为多排放置在Logo右侧或下 方。
页面上方
•如果导航栏内容较多的话，尽量使用文字超链接而不 用图片。不过，如果导航栏内容不多，或者网页内容 比较活泼的话，多采用图片或Flash制作导航栏。
图片导航栏
Flash导航栏
1.3 从功能角度分析网页
3.广告条
➢广告条又称Banner，其功能是宣传网站或替其他企业做广告，以 赚取广告费。 ➢Banner的尺寸是有国际标准的，按照标准制作可以使网站更显专 业
• 468*60 • 120*60 • 88*31 • 120*240
1.3 从功能角度分析网页
网页设计理论课件
网页设计理论
色彩的色调变化
配色决定印象的三要素 1、色调 2、色相 3、对比
网页设计理论
1、主色 2、背景色 3、融合色 4、强调色
色彩的分类
网页设计理论
特点： 1、内容多，功能多。 2、以点盖面为主。 3、首页一般突出教育文化
布局： 横向布局较多 色彩： 以绿色、蓝色较多 ……
教育类网站
网页设计理论
特点： 1、布局简单，学问多。 2、用户体验很重要。 3、精神感受和粘合度高。
布局： 布局简单，速度快。 色论
CMY （CMYK） -- 减色混合色彩模型 青（Cyan）、品红（Magenta）、黄（Yellow）分别是红（R）、绿（G）、蓝（B）三色的互补色，是硬拷贝设备上输出图形的颜色，如彩 色打印、印刷等。它们与荧光粉组合光颜色的显示器不同，是通过打印彩墨（ink）、彩色涂料的反射光来显现颜色的，是一种减色组合。 由青、品红和黄三色组成的色彩模型，使用时相当于从白色光中减去某种颜色，因此又叫减色系统。 在笛卡儿坐标系中，CMY色彩模型与RGB色彩模型外观相似（如图），但原点和顶点刚好相反，CMY模型的原点是白色，相对的顶点是黑色。 CMY模型中的颜色是从白色光中减去某种颜色，而不是象RGB模型那样，是在黑色光中增加某种颜色。 因此，CMY三种被打印在纸上的颜色，我们可以理解为： 青（C）= 白色光 — 红色光 品红（M）= 白色光 — 绿色光 黄（Y）= 白色光 — 蓝色光 由于白色光是由红、绿、蓝三色光相加得到的，上面的等式可以还原为我们常用的加色等式： 青（C）=（红色光+绿色光+蓝色光）—红色光=绿色+蓝色 品红（M）=（红色光+绿色光+蓝色光）—绿色光=红色+蓝色 黄（Y）=（红色光+绿色光+蓝色光）—蓝色光=红色+绿色
色彩的色调变化
配色决定印象的三要素 1、色调 2、色相 3、对比
网页设计理论
1、主色 2、背景色 3、融合色 4、强调色
色彩的分类
网页设计理论
特点： 1、内容多，功能多。 2、以点盖面为主。 3、首页一般突出教育文化
布局： 横向布局较多 色彩： 以绿色、蓝色较多 ……
教育类网站
网页设计理论
特点： 1、布局简单，学问多。 2、用户体验很重要。 3、精神感受和粘合度高。
布局： 布局简单，速度快。 色论
CMY （CMYK） -- 减色混合色彩模型 青（Cyan）、品红（Magenta）、黄（Yellow）分别是红（R）、绿（G）、蓝（B）三色的互补色，是硬拷贝设备上输出图形的颜色，如彩 色打印、印刷等。它们与荧光粉组合光颜色的显示器不同，是通过打印彩墨（ink）、彩色涂料的反射光来显现颜色的，是一种减色组合。 由青、品红和黄三色组成的色彩模型，使用时相当于从白色光中减去某种颜色，因此又叫减色系统。 在笛卡儿坐标系中，CMY色彩模型与RGB色彩模型外观相似（如图），但原点和顶点刚好相反，CMY模型的原点是白色，相对的顶点是黑色。 CMY模型中的颜色是从白色光中减去某种颜色，而不是象RGB模型那样，是在黑色光中增加某种颜色。 因此，CMY三种被打印在纸上的颜色，我们可以理解为： 青（C）= 白色光 — 红色光 品红（M）= 白色光 — 绿色光 黄（Y）= 白色光 — 蓝色光 由于白色光是由红、绿、蓝三色光相加得到的，上面的等式可以还原为我们常用的加色等式： 青（C）=（红色光+绿色光+蓝色光）—红色光=绿色+蓝色 品红（M）=（红色光+绿色光+蓝色光）—绿色光=红色+蓝色 黄（Y）=（红色光+绿色光+蓝色光）—蓝色光=红色+绿色
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）站内搜索引擎。站内搜索引擎提供了一种主动查 询方式，浏览者只要把自己需要寻找的内容的关键字输 入到搜索引擎中，网站将自动地查找出站内符合条件的 页面，这是一种人性化的做法。 （3）当前浏览位置。所谓“当前浏览位置”就是在网 站的每个页面中加入当前位置的文字说明并逐级加入链 接。
2.网页版块 导航条（常用导航栏）
LOGO是网站的标志、名片，如同商标一样。
在网站设计中logo的设计是不可缺少的一个重要环
节。Logo是网站特色和内涵的集中体现,它作用于
传递网站的定位和经营理念、同时便于人们识别，
会直接影响到客户对网站的判断，特别是网站日后
需要进行全球性推广，优秀的商标设计会吸引来更
多的访问者。
LOGO可以是中文、英文字母，也可以是符号、 图案，还可以是动物或者人物。LOGO的设计创意来
1.2.2 网页页面与版块
1.网页页面大小 标准显示器的屏幕分辨率为1024*768，则不同版本 的IE浏览器的屏幕大小为：
◦ IE6.0：1003*600px ◦ IE8.0（隐藏菜单栏）：1003*626 ◦ IE8.0（不隐藏菜单栏）：1003*598
原则：不出现水平滚动栏
2.网页版块 网站LOGO
表企业形象或栏目内容的标志性图片（即LOGO），用于宣传的广 告（即Banner）等多种形式。 3．超级链接 超级链接是Weቤተ መጻሕፍቲ ባይዱ网页的主要特色，是指从一个网页指向另一个 目的端的链接。这个“目的端”通常是一个网页，也可以是下列 情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、 一个E_Mail地址等。超级链接可以是文本、按钮或图片，鼠标指 向超级链接位置时，会变成小手形状。
1.2.5 网页页面元素设计
4．导航栏 导航栏是一组超级链接，用来方便地浏览站点。导航栏 一般由多个按钮或者多个文本超级链接组成。 5．动画 动画是网页中最活跃的元素，创意出众、制作精致的动 画是吸引浏览者眼球的有效方法之一。 6．表格 表格是HTML语言中的一种元素，主要用于网页内容的布 局，组织整个网页的外观，通过表格可以精确地控制各网页 元素在网页中的位置。
版面典型风格
对称型
偏置型
标题型
1.2.4网页色彩设计原理
色彩的运用在网页中的作用真是太重要了，有 些网页看上去十分典雅、有品位，令人赏心悦目， 但是页面结构却很简单、图像也不复杂，这主要是 色彩运用得当。色彩是人的视觉最敏感的元素，网 页色彩处理得好，可以锦上添花。
网页三原色：red、green、blue 色彩的属性：色相、饱和度、明度 色彩模式：RGB、CMYK Web216安全色
2.网页版块 Banner条（网页广告栏）
一般为广告横幅图片、或者使用JavaScript或 Flash技术制作的动画，用于吸引用户观看
2.网页版块 内容版块
网页的主体
◦ 文本 ◦ 图像 ◦ 动画 ◦ 超链接
2.网页版块 版尾版块
版权信息版块
◦ 制作单位、制作人、时间等
1.2.3 网页版面布局设计
网页设计原理
本章目标
掌握网站的开发流程 掌握网页设计原理 掌握网页设计规范 欣赏优秀的网页，学习他人之长，激发学习网页设
计的兴趣
1.1 网站开发流程
第一个阶段：规划和准备阶段。这个阶段要做的工作包括： （1）市场调查、市场分析； （2）制定网站技术方案； （3）规划网站内容； 第二阶段：网页设计、制作阶段。这个阶段要做的工作包括： （1）网站总体设计（风格、布局、色彩）； （2）设计界面、制作网站中的各个网页； （3）将各个网页通过超级链接进行整合； （4）后台设计。 第三阶段：网站的发布、推广和维护阶段。这个阶段要做的
1.2.5 网页页面元素设计
7．框架 框架是网页的一种组织形式，将互相关联的多个网页的 内容组织在一个浏览器窗口中显示。例如在一个框架内放置 导航栏，另一个框架中的内容可以随着导航栏中的链接而改 变。 8．表单 表单是用来收集访问者信息或实现一些交互作用的网页， 浏览者填写表单的方式是输入文本，选中单选按钮或复选框， 从下拉菜单中选择选项等。 网页中除了上述这些最基本的构成元素外，还包括横幅 广告、字幕、悬停按钮、日戳、计算器、音频、视频、 Java Appplet等元素。
网站设计不是把所有内容放置到网页中就行了，还 需要我们把网页内容进行合理的排版布局，以给浏 览者赏心悦目的感觉，增强网站的吸引力。在设计 布局的时候要注意把文字、图片在网页空间上均匀 分布并且不同形状、色彩的网页元素要相互对比， 以形成鲜明的视觉效果。
常见的布局结构有 “同”字形布局、“国”字形 布局、“匡”字形布局、“三”字形布局和“川” 字形布局、上下框架型、封面型
表1.1 色彩与心理反应
1.2.5 网页页面元素设计
网页是由文本、图像、动画、超级链接等基本元素构成 1．文本 建议用于网页正文的文字一般不要太大，也不要使用过多的字体，
中文字体一般使用宋体，大小一般使用9磅或12像素即可。 2．图像 网页中的图像主要有用于点缀标题的小图片，介绍性的照片，代
1.3 网页设计与开发技术
前台技术
◦ XHTML（网页的结构技术） ◦ CSS（网页的表现技术） ◦ ECMAScript（前身为JavaScript，脚本语言） ◦ Ajax（由JavaScript脚本语言扩展而来） ◦ E4X（ 是ECMAScript的扩展，实现更快的访问XML数据 ） ◦ 切片（网页图形处理）
源是网站的名称和内容。
2.网页版块 网站LOGO
2.网页版块 导航条
导航栏
sh 动画
图像 超链接
2.网页版块
导航条
网站导航的表现形式主要有：菜单、站内搜索引擎、当 前浏览位置等。 （1）菜单。菜单是网站最常见的导航方法，一个好的 菜单系统关键在于能适应网站的层次需要，并且容易让 浏览者理解网站的结构。
工作包括： （1）测试、调试与完善网站； （2）发布与推广网站； （3）维护和更新网站。
1.2 网页的设计原理
1.2.1网页设计的基本原则 （1）用户至上原则 （2）易用性原则
网页中的导航应放置明显、结构清晰、操作简单。网 站的链接结构合理，方便浏览者在不同网页之间跳转快捷、 方便。
（3）实用性原则
2.网页版块 导航条（常用导航栏）
LOGO是网站的标志、名片，如同商标一样。
在网站设计中logo的设计是不可缺少的一个重要环
节。Logo是网站特色和内涵的集中体现,它作用于
传递网站的定位和经营理念、同时便于人们识别，
会直接影响到客户对网站的判断，特别是网站日后
需要进行全球性推广，优秀的商标设计会吸引来更
多的访问者。
LOGO可以是中文、英文字母，也可以是符号、 图案，还可以是动物或者人物。LOGO的设计创意来
1.2.2 网页页面与版块
1.网页页面大小 标准显示器的屏幕分辨率为1024*768，则不同版本 的IE浏览器的屏幕大小为：
◦ IE6.0：1003*600px ◦ IE8.0（隐藏菜单栏）：1003*626 ◦ IE8.0（不隐藏菜单栏）：1003*598
原则：不出现水平滚动栏
2.网页版块 网站LOGO
表企业形象或栏目内容的标志性图片（即LOGO），用于宣传的广 告（即Banner）等多种形式。 3．超级链接 超级链接是Weቤተ መጻሕፍቲ ባይዱ网页的主要特色，是指从一个网页指向另一个 目的端的链接。这个“目的端”通常是一个网页，也可以是下列 情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、 一个E_Mail地址等。超级链接可以是文本、按钮或图片，鼠标指 向超级链接位置时，会变成小手形状。
1.2.5 网页页面元素设计
4．导航栏 导航栏是一组超级链接，用来方便地浏览站点。导航栏 一般由多个按钮或者多个文本超级链接组成。 5．动画 动画是网页中最活跃的元素，创意出众、制作精致的动 画是吸引浏览者眼球的有效方法之一。 6．表格 表格是HTML语言中的一种元素，主要用于网页内容的布 局，组织整个网页的外观，通过表格可以精确地控制各网页 元素在网页中的位置。
版面典型风格
对称型
偏置型
标题型
1.2.4网页色彩设计原理
色彩的运用在网页中的作用真是太重要了，有 些网页看上去十分典雅、有品位，令人赏心悦目， 但是页面结构却很简单、图像也不复杂，这主要是 色彩运用得当。色彩是人的视觉最敏感的元素，网 页色彩处理得好，可以锦上添花。
网页三原色：red、green、blue 色彩的属性：色相、饱和度、明度 色彩模式：RGB、CMYK Web216安全色
2.网页版块 Banner条（网页广告栏）
一般为广告横幅图片、或者使用JavaScript或 Flash技术制作的动画，用于吸引用户观看
2.网页版块 内容版块
网页的主体
◦ 文本 ◦ 图像 ◦ 动画 ◦ 超链接
2.网页版块 版尾版块
版权信息版块
◦ 制作单位、制作人、时间等
1.2.3 网页版面布局设计
网页设计原理
本章目标
掌握网站的开发流程 掌握网页设计原理 掌握网页设计规范 欣赏优秀的网页，学习他人之长，激发学习网页设
计的兴趣
1.1 网站开发流程
第一个阶段：规划和准备阶段。这个阶段要做的工作包括： （1）市场调查、市场分析； （2）制定网站技术方案； （3）规划网站内容； 第二阶段：网页设计、制作阶段。这个阶段要做的工作包括： （1）网站总体设计（风格、布局、色彩）； （2）设计界面、制作网站中的各个网页； （3）将各个网页通过超级链接进行整合； （4）后台设计。 第三阶段：网站的发布、推广和维护阶段。这个阶段要做的
1.2.5 网页页面元素设计
7．框架 框架是网页的一种组织形式，将互相关联的多个网页的 内容组织在一个浏览器窗口中显示。例如在一个框架内放置 导航栏，另一个框架中的内容可以随着导航栏中的链接而改 变。 8．表单 表单是用来收集访问者信息或实现一些交互作用的网页， 浏览者填写表单的方式是输入文本，选中单选按钮或复选框， 从下拉菜单中选择选项等。 网页中除了上述这些最基本的构成元素外，还包括横幅 广告、字幕、悬停按钮、日戳、计算器、音频、视频、 Java Appplet等元素。
网站设计不是把所有内容放置到网页中就行了，还 需要我们把网页内容进行合理的排版布局，以给浏 览者赏心悦目的感觉，增强网站的吸引力。在设计 布局的时候要注意把文字、图片在网页空间上均匀 分布并且不同形状、色彩的网页元素要相互对比， 以形成鲜明的视觉效果。
常见的布局结构有 “同”字形布局、“国”字形 布局、“匡”字形布局、“三”字形布局和“川” 字形布局、上下框架型、封面型
表1.1 色彩与心理反应
1.2.5 网页页面元素设计
网页是由文本、图像、动画、超级链接等基本元素构成 1．文本 建议用于网页正文的文字一般不要太大，也不要使用过多的字体，
中文字体一般使用宋体，大小一般使用9磅或12像素即可。 2．图像 网页中的图像主要有用于点缀标题的小图片，介绍性的照片，代
1.3 网页设计与开发技术
前台技术
◦ XHTML（网页的结构技术） ◦ CSS（网页的表现技术） ◦ ECMAScript（前身为JavaScript，脚本语言） ◦ Ajax（由JavaScript脚本语言扩展而来） ◦ E4X（ 是ECMAScript的扩展，实现更快的访问XML数据 ） ◦ 切片（网页图形处理）
源是网站的名称和内容。
2.网页版块 网站LOGO
2.网页版块 导航条
导航栏
sh 动画
图像 超链接
2.网页版块
导航条
网站导航的表现形式主要有：菜单、站内搜索引擎、当 前浏览位置等。 （1）菜单。菜单是网站最常见的导航方法，一个好的 菜单系统关键在于能适应网站的层次需要，并且容易让 浏览者理解网站的结构。
工作包括： （1）测试、调试与完善网站； （2）发布与推广网站； （3）维护和更新网站。
1.2 网页的设计原理
1.2.1网页设计的基本原则 （1）用户至上原则 （2）易用性原则
网页中的导航应放置明显、结构清晰、操作简单。网 站的链接结构合理，方便浏览者在不同网页之间跳转快捷、 方便。
（3）实用性原则