网页设计学习PPT
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
VI包括：企业名称、企业标志、企业造型、标准字、 标准色、象征图案、宣传口号等。
第一章 网页设计基础
6-32
第一章 网页设计基础
网站内容 网站所有内容由3类信息组成：
文本 多媒体 图像
第一章 网页设计基础
栏目
栏目的实质是一个网站的大纲索引，索引应该将网 站的主体（题）明确显示出来。 一般的网站栏目安排要注意以下几个方面：
网页制作中色彩的运用技巧：
确定主色 利用相近色 黑白灰运用
R: 210 G: 144 B: 212
R: 117 G: 45 B: 119
R: 255 G: 91 B: 91
R: 158 G: 0 B: 26
R: 211 G: 211 B: 211
R: 122 G: 128 B: 131
R: 101 G: 174 B: 255
需求分析工作是网站建设中重要的一步，也是决定 性的一步。只有通过需求分析，才能把网站功能的 总体概念描述为具体的网站功能描述书，从而奠定 网站开发的基础。
需求分析的目的是完整、准确地描述用户的需求， 跟踪用户需求的变化，将用户的需求准确地反映到 系统的分析和设计中，并使系统的分析、设计与用 户的需求保持一致。
第一章 网页设计基础
www制定一套标准
是用于万维网服务器传输超文本到本地浏 览的传送协议。 用于要取得的Internet资源的位置与方式。 在Internet通常使用的发布语言，能够使 大多数计算机或者浏览器能够识别的语言。
第一章 网页设计基础
IP地址和域名
IP（Internet Protocol）地址，即用Internet 协议语言表示的地址，由4组数字构成，每组8位， 共32位。
统一
第一章 网页设计基础
和谐
第一章 网页设计基础
易读
第一章 网页设计基础
易找
第一章 网页设计基础
清晰
第一章 网页设计基础
• 7、色彩处理
•
色彩总的应用原则应该是“总体协调，
局部对比”，也就是说，主页的整体色彩效果应
该是和谐的，只有局部的、小范围的地方可以有
一些强烈色彩对比。
第一章 网页设计基础
第一章 网页设计基础
与软件工程中的螺旋模型类似，一个网站项目从 意向开始，到最后的规范化批量设计过程是螺旋 推进的。
第一章 网页设计基础
网站设计需要的知识
1、确定网站的主题和名称 一般来说定位网站的主题，应该从以下几方面 考虑：网上求职、网上聊天/即时信息、网上社 区/讨论/邮件列表、计算机技术、网页/网站开发 素材、娱乐、旅行、参考/资讯、家庭/教育、生 活/时尚10大类。
（1）一定要紧扣主题 （2）设置一个最近更新或网站指南栏目 （3）设定一个可以双向交流的栏目 （4）设一个下载或常见问题回答栏目
第一章 网页设计基础
• 版块
版块比栏目的概念要大一些，每个版块都有自己 的栏目。注意以下几点：
（1）各版块要有相对独立性 （2）各版块要相互关联 （3）版块的内Fra Baidu bibliotek要围绕站点主题
主页 一个网站中的首页，一个特殊的单独的页面，
它作为一个组织或个人在WWW上开始点的页面， 整个网站的起点和汇总点。浏览者浏览网站的入 口。 内页
主页中包含指向其它页面的超链接。
第一章 网页设计基础
网页布局
三种布局
国字型布局 拐角型布局 封面型布局
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
什么是网站
网站是一个存放在网络服务器上的完整信 息的集合体。它包含一个或多个网页，这些 网页以一定的形式链接在一起，成为一个整 体。
常见的网站有网易、新浪、搜狐、百度、 腾讯等。
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
网站设计前期工作
网站项目的规模 网站的规模是不同的。有些网站的规模相当庞大， 而有些网站的规模却很小。
第一章 网页设计基础
5、版面编排 （1）主次要分明，中心要突出 （2）大小要搭配，相互要呼应 （3）图文要并茂，相得要益彰 （4）动静要有度，平衡要对称
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
6、 网页风格
分割
分割
第一章 网页设计基础
第一章 网页设计基础
使用快速原形法进行网站需求分析
在软件开发过程中，最关键的步骤就是确切定义出 需求，明确软件要实现的功能是什么，而这恰恰也是 最困难的过程。因为许多用户在初期只有一个隐约的、 大致的考虑，提不出具体明确的需求。在这种情况下， 使用快速原型法进行反复交流、细化需求，就成为一 种有效的方法。
3、确定网站的整体风格和创意设计 风格是抽象的，是指站点的整体形象给浏览者 的感受。 风格是独特的，是站点不同于其他网站的地方， 或色彩，或技术，或交互方式。 风格是有人性的，通过网站的外观、内容、文 字、交流，可以概括出一个站点的个性和情趣， 是温文儒雅，是执着热情、是活泼易变、还是放 任不羁。
第一章 网页设计基础
第一章 网页设计基础
规划站点内容
• 明确网页制作的目的和意义。下面列出在 规划站点内容阶段要做的具体事项。
• 描述网页的服务对象 • 确定制作网页的目的 • 具体确定网页的信息内容、浏览界面和信
息设置 • 具体确定网页的制作时间和软硬件环境
•
第一章 网页设计基础
配置站点
• 做好上面几步后,接下来的工作就是根据 上面的规划创建一个完整的站点。
网站设计基础
第一章 网页设计基础
课程内容
网站制作 基础知识
CSS 层叠样式表
DREAMWEAVER 网页设计软件
HTML 超文本标记
语言
第一章 网页设计基础
Internet概述
Internet即国际计算机互联网，在中国也称 “因特网”或“国际互联网。它是目前全世界 最大的网络，包含着丰富多彩的信息，并提供 方便快捷的服务。它缩短了人们之间的距离。 通过Internet，用户可以与接入Internet的任 何一台计算机进行交流，如发邮件、聊天、通 话等。
第一章 网页设计基础
需求所涉及的内容非常广泛，以下列出的都是 网站项目的需求：
(1)网站的色彩必须以红色为主； (2)网站界面设计必须简洁； (3)网站访问速度必须在全球范围内都较快； (4)网站必须能够提供在线销售、在线付款的功能； (5)网站中必须有公司总经理一家的合影。
第一章 网页设计基础
规模庞大的网站 结构复杂，人员众多，其所涉及到的技术也很复杂， 并且与网站背后的传统业务有着紧密的联系。
规模较小的网站 结构简单，参与建设、维护的设计人员较少，对维 护和更新的要求不高，信息发布的平率和数量并不 大。
第一章 网页设计基础
6-25
第一章 网页设计基础
6-26
第一章 网页设计基础
网站项目的需求分析
树立网站风格可以分4个步骤：
风格是建立在有价值内容之上的。 需要清楚自己希望站点给人的印象是什么。 在明确自己的站点的印象以后，开始努力建立和 加强这种印象。 风格的形成不是一次定位的，而是在实践中不断 强化、调整和修饰的。
第一章 网页设计基础
4、网站创意 （1）创意是传达信息的一种特别方式
创意思考的过程分5个阶段：准备期、孵化期、 启示期、验证期、形成期。 （2）创意是将现有的要素重新组合
第一章 网页设计基础
Internet服务器的主要信息服务有：
万维网（WWW） 电子邮件服务（E-mail） 电子公告板服务（BBS） 网上购物 网上会议 网上聊天
第一章 网页设计基础
什么是WWW
www是一种分布式客户服务系统WWW是 World Wide Web的缩写，又称3W或Web， 中文译名为“万维网”。它作为Internet上的新 一代用户界面，摒弃了以往纯文本方式的信息交 互手段，采用超文本（Hypertext）方式工作。 利用该技术可以为企业提供全球范围的多媒体信 息服务，使企业获取信息的手段有了根本性的改 善，与之密切相关的是浏览器（Browser）。
7-65
第一章 网页设计基础
7-66
第一章 网页设计基础
7-67
第一章 网页设计基础
7-68
第一章 网页设计基础
7-69
第一章 网页设计基础
设计
开发
规 划
网站开发工作流程
发布
维护
第一章 网页设计基础
网站制作步骤
收集整理资源 规划站点内容 配置站点 创建页面 测试站点 发布站点 站点维护更新
成是一个单一体，是网站的一个元素。 ➢ 网页中包含的元素有：文本和图像、动画、声
音和视频、超级链接、表格、表单、导航栏以 及其他常见元素。
第一章 网页设计基础
第一章 网页设计基础
网页的分类
按照网页的表现形式不同，可将网页分为静态 网页和动态网页。
按照网页在网站中所处位置不同，可将网页分 为主页和内页。
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
•9 网站导航系统设计
（1）导航系统的两个作用： 指向作用 示向作用
7-63
第一章 网页设计基础
• （2）网站中常见的导航模式 集合导航模式 层次导航模式 线形导航模式 上下文导航模式 随机导航模式
7-64
第一章 网页设计基础
在IP地址的4组数字中，包含了两部分信息，即 网络代号（NetID）和主机代号（HostID）。
第一章 网页设计基础
域名是IP地址的一种英文替代。
域名系统采用层次结构，按地理域或机构域进 行分层。
域名的一般格式为：
➢ 主机名.机构名.类别名.地区名。
第一章 网页设计基础
什么是网页 ➢ 网页是网站的组成部分，是一张页面，可以看
R: 0 G: 60 B: 12
R: 138 G: 202 B: 136
R: 36 G:124 B: 34
选择适合内容风格的颜色
页面的色彩搭配
第一章 网页设计基础
第一章 网页设计基础
• 8、网站的分类 • 四种分类
门户网站 职能网站 专业网站 个人网站
第一章 网页设计基础
第一章 网页设计基础
网站功能分析
网站基本功能： （1）新的信息展示平台 （2）新的业务和交流平台 （3）新的工作平台
第一章 网页设计基础
6-30
第一章 网页设计基础
网站视觉形象分析
每一个政府部门、公司，甚至是个人都具有自己特 定的形象。这些形象要素构成了一整套的识别体系， 即CI设计体系。对于网站，最直接的设计要素应该 是视觉要素VI。
第一章 网页设计基础
(1)合理选题
主题要小而精。 题材最好是自己擅长或者喜爱的内容。 题材不要太滥或者目标太高。
(2)精选网站名称
名称要正气。 名称要易记。 名称要有特点。
第一章 网页设计基础
2、确定网站CI形象
（1）设计网站的标志
（2）选择网站的标准色彩 （3）选择网站的标准字
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
静态网页 是指这个网页不论在何时何地浏览，都将
显示相同的画面和内容，且用户仅能浏览，而无 法提供信息给网站，让网站作出响应。 动态网页
是网页能够按照用户的需求作出动态响应， 如网页上常见的留言板、论坛等。
第一章 网页设计基础
• 定义本地站点：就是在自己机器的硬盘上 建立一个目录,然后将所有制作网页相关的文 件都存放在里面,以便进行网页的制作和管理， 因此，站点可以理解成同属于一个web主题 的所有文件的存储地点。
第一章 网页设计基础
创建页面
• 一个页面美不美观，能不能吸引浏览者，创 建页面是关键的一步。
自顶向下的设计方法 自底向上的设计方法
第一章 网页设计基础
6-32
第一章 网页设计基础
网站内容 网站所有内容由3类信息组成：
文本 多媒体 图像
第一章 网页设计基础
栏目
栏目的实质是一个网站的大纲索引，索引应该将网 站的主体（题）明确显示出来。 一般的网站栏目安排要注意以下几个方面：
网页制作中色彩的运用技巧：
确定主色 利用相近色 黑白灰运用
R: 210 G: 144 B: 212
R: 117 G: 45 B: 119
R: 255 G: 91 B: 91
R: 158 G: 0 B: 26
R: 211 G: 211 B: 211
R: 122 G: 128 B: 131
R: 101 G: 174 B: 255
需求分析工作是网站建设中重要的一步，也是决定 性的一步。只有通过需求分析，才能把网站功能的 总体概念描述为具体的网站功能描述书，从而奠定 网站开发的基础。
需求分析的目的是完整、准确地描述用户的需求， 跟踪用户需求的变化，将用户的需求准确地反映到 系统的分析和设计中，并使系统的分析、设计与用 户的需求保持一致。
第一章 网页设计基础
www制定一套标准
是用于万维网服务器传输超文本到本地浏 览的传送协议。 用于要取得的Internet资源的位置与方式。 在Internet通常使用的发布语言，能够使 大多数计算机或者浏览器能够识别的语言。
第一章 网页设计基础
IP地址和域名
IP（Internet Protocol）地址，即用Internet 协议语言表示的地址，由4组数字构成，每组8位， 共32位。
统一
第一章 网页设计基础
和谐
第一章 网页设计基础
易读
第一章 网页设计基础
易找
第一章 网页设计基础
清晰
第一章 网页设计基础
• 7、色彩处理
•
色彩总的应用原则应该是“总体协调，
局部对比”，也就是说，主页的整体色彩效果应
该是和谐的，只有局部的、小范围的地方可以有
一些强烈色彩对比。
第一章 网页设计基础
第一章 网页设计基础
与软件工程中的螺旋模型类似，一个网站项目从 意向开始，到最后的规范化批量设计过程是螺旋 推进的。
第一章 网页设计基础
网站设计需要的知识
1、确定网站的主题和名称 一般来说定位网站的主题，应该从以下几方面 考虑：网上求职、网上聊天/即时信息、网上社 区/讨论/邮件列表、计算机技术、网页/网站开发 素材、娱乐、旅行、参考/资讯、家庭/教育、生 活/时尚10大类。
（1）一定要紧扣主题 （2）设置一个最近更新或网站指南栏目 （3）设定一个可以双向交流的栏目 （4）设一个下载或常见问题回答栏目
第一章 网页设计基础
• 版块
版块比栏目的概念要大一些，每个版块都有自己 的栏目。注意以下几点：
（1）各版块要有相对独立性 （2）各版块要相互关联 （3）版块的内Fra Baidu bibliotek要围绕站点主题
主页 一个网站中的首页，一个特殊的单独的页面，
它作为一个组织或个人在WWW上开始点的页面， 整个网站的起点和汇总点。浏览者浏览网站的入 口。 内页
主页中包含指向其它页面的超链接。
第一章 网页设计基础
网页布局
三种布局
国字型布局 拐角型布局 封面型布局
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
什么是网站
网站是一个存放在网络服务器上的完整信 息的集合体。它包含一个或多个网页，这些 网页以一定的形式链接在一起，成为一个整 体。
常见的网站有网易、新浪、搜狐、百度、 腾讯等。
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
网站设计前期工作
网站项目的规模 网站的规模是不同的。有些网站的规模相当庞大， 而有些网站的规模却很小。
第一章 网页设计基础
5、版面编排 （1）主次要分明，中心要突出 （2）大小要搭配，相互要呼应 （3）图文要并茂，相得要益彰 （4）动静要有度，平衡要对称
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
6、 网页风格
分割
分割
第一章 网页设计基础
第一章 网页设计基础
使用快速原形法进行网站需求分析
在软件开发过程中，最关键的步骤就是确切定义出 需求，明确软件要实现的功能是什么，而这恰恰也是 最困难的过程。因为许多用户在初期只有一个隐约的、 大致的考虑，提不出具体明确的需求。在这种情况下， 使用快速原型法进行反复交流、细化需求，就成为一 种有效的方法。
3、确定网站的整体风格和创意设计 风格是抽象的，是指站点的整体形象给浏览者 的感受。 风格是独特的，是站点不同于其他网站的地方， 或色彩，或技术，或交互方式。 风格是有人性的，通过网站的外观、内容、文 字、交流，可以概括出一个站点的个性和情趣， 是温文儒雅，是执着热情、是活泼易变、还是放 任不羁。
第一章 网页设计基础
第一章 网页设计基础
规划站点内容
• 明确网页制作的目的和意义。下面列出在 规划站点内容阶段要做的具体事项。
• 描述网页的服务对象 • 确定制作网页的目的 • 具体确定网页的信息内容、浏览界面和信
息设置 • 具体确定网页的制作时间和软硬件环境
•
第一章 网页设计基础
配置站点
• 做好上面几步后,接下来的工作就是根据 上面的规划创建一个完整的站点。
网站设计基础
第一章 网页设计基础
课程内容
网站制作 基础知识
CSS 层叠样式表
DREAMWEAVER 网页设计软件
HTML 超文本标记
语言
第一章 网页设计基础
Internet概述
Internet即国际计算机互联网，在中国也称 “因特网”或“国际互联网。它是目前全世界 最大的网络，包含着丰富多彩的信息，并提供 方便快捷的服务。它缩短了人们之间的距离。 通过Internet，用户可以与接入Internet的任 何一台计算机进行交流，如发邮件、聊天、通 话等。
第一章 网页设计基础
需求所涉及的内容非常广泛，以下列出的都是 网站项目的需求：
(1)网站的色彩必须以红色为主； (2)网站界面设计必须简洁； (3)网站访问速度必须在全球范围内都较快； (4)网站必须能够提供在线销售、在线付款的功能； (5)网站中必须有公司总经理一家的合影。
第一章 网页设计基础
规模庞大的网站 结构复杂，人员众多，其所涉及到的技术也很复杂， 并且与网站背后的传统业务有着紧密的联系。
规模较小的网站 结构简单，参与建设、维护的设计人员较少，对维 护和更新的要求不高，信息发布的平率和数量并不 大。
第一章 网页设计基础
6-25
第一章 网页设计基础
6-26
第一章 网页设计基础
网站项目的需求分析
树立网站风格可以分4个步骤：
风格是建立在有价值内容之上的。 需要清楚自己希望站点给人的印象是什么。 在明确自己的站点的印象以后，开始努力建立和 加强这种印象。 风格的形成不是一次定位的，而是在实践中不断 强化、调整和修饰的。
第一章 网页设计基础
4、网站创意 （1）创意是传达信息的一种特别方式
创意思考的过程分5个阶段：准备期、孵化期、 启示期、验证期、形成期。 （2）创意是将现有的要素重新组合
第一章 网页设计基础
Internet服务器的主要信息服务有：
万维网（WWW） 电子邮件服务（E-mail） 电子公告板服务（BBS） 网上购物 网上会议 网上聊天
第一章 网页设计基础
什么是WWW
www是一种分布式客户服务系统WWW是 World Wide Web的缩写，又称3W或Web， 中文译名为“万维网”。它作为Internet上的新 一代用户界面，摒弃了以往纯文本方式的信息交 互手段，采用超文本（Hypertext）方式工作。 利用该技术可以为企业提供全球范围的多媒体信 息服务，使企业获取信息的手段有了根本性的改 善，与之密切相关的是浏览器（Browser）。
7-65
第一章 网页设计基础
7-66
第一章 网页设计基础
7-67
第一章 网页设计基础
7-68
第一章 网页设计基础
7-69
第一章 网页设计基础
设计
开发
规 划
网站开发工作流程
发布
维护
第一章 网页设计基础
网站制作步骤
收集整理资源 规划站点内容 配置站点 创建页面 测试站点 发布站点 站点维护更新
成是一个单一体，是网站的一个元素。 ➢ 网页中包含的元素有：文本和图像、动画、声
音和视频、超级链接、表格、表单、导航栏以 及其他常见元素。
第一章 网页设计基础
第一章 网页设计基础
网页的分类
按照网页的表现形式不同，可将网页分为静态 网页和动态网页。
按照网页在网站中所处位置不同，可将网页分 为主页和内页。
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
•9 网站导航系统设计
（1）导航系统的两个作用： 指向作用 示向作用
7-63
第一章 网页设计基础
• （2）网站中常见的导航模式 集合导航模式 层次导航模式 线形导航模式 上下文导航模式 随机导航模式
7-64
第一章 网页设计基础
在IP地址的4组数字中，包含了两部分信息，即 网络代号（NetID）和主机代号（HostID）。
第一章 网页设计基础
域名是IP地址的一种英文替代。
域名系统采用层次结构，按地理域或机构域进 行分层。
域名的一般格式为：
➢ 主机名.机构名.类别名.地区名。
第一章 网页设计基础
什么是网页 ➢ 网页是网站的组成部分，是一张页面，可以看
R: 0 G: 60 B: 12
R: 138 G: 202 B: 136
R: 36 G:124 B: 34
选择适合内容风格的颜色
页面的色彩搭配
第一章 网页设计基础
第一章 网页设计基础
• 8、网站的分类 • 四种分类
门户网站 职能网站 专业网站 个人网站
第一章 网页设计基础
第一章 网页设计基础
网站功能分析
网站基本功能： （1）新的信息展示平台 （2）新的业务和交流平台 （3）新的工作平台
第一章 网页设计基础
6-30
第一章 网页设计基础
网站视觉形象分析
每一个政府部门、公司，甚至是个人都具有自己特 定的形象。这些形象要素构成了一整套的识别体系， 即CI设计体系。对于网站，最直接的设计要素应该 是视觉要素VI。
第一章 网页设计基础
(1)合理选题
主题要小而精。 题材最好是自己擅长或者喜爱的内容。 题材不要太滥或者目标太高。
(2)精选网站名称
名称要正气。 名称要易记。 名称要有特点。
第一章 网页设计基础
2、确定网站CI形象
（1）设计网站的标志
（2）选择网站的标准色彩 （3）选择网站的标准字
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
静态网页 是指这个网页不论在何时何地浏览，都将
显示相同的画面和内容，且用户仅能浏览，而无 法提供信息给网站，让网站作出响应。 动态网页
是网页能够按照用户的需求作出动态响应， 如网页上常见的留言板、论坛等。
第一章 网页设计基础
• 定义本地站点：就是在自己机器的硬盘上 建立一个目录,然后将所有制作网页相关的文 件都存放在里面,以便进行网页的制作和管理， 因此，站点可以理解成同属于一个web主题 的所有文件的存储地点。
第一章 网页设计基础
创建页面
• 一个页面美不美观，能不能吸引浏览者，创 建页面是关键的一步。
自顶向下的设计方法 自底向上的设计方法