网页设计基础知识
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
7/6/2014
网页设计的相关知识
11 、 、
2、
网页设计的知识结构
网页设计的基本原则 网页设计的一般步骤
3、
4、
网页制作的常用工具
7/6/2014
网页设计的知识结构
第二部分： 多媒体设计
第四部分： 数据库设计
第一部分：网页 布局与构架设计 第三部分： 动态网站程 序设计
7/6/2014
一、网页布局与构架设计
例如：ftp://222.22.49.189
7/6/2014
IP地址
IP地址用来标识连接到Internet上电脑的指定 编号，每一个IP地址对应一台电脑，这与用电话 号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电 脑上以十进制数值来显示，一组数值分为4部分， 每一部分均不能大于255，中间用“.”分隔，如 61.139.2.69。
7/6/2014
按类型分类—内容型
7/6/2014
按类型分类—内容型
7/6/2014
按类型分类—内容型
7/6/2014
按类型分类—内容型
7/6/2014
按类型分类—电子商务型
3 电子商务型
以从事电子商务为主 的站点，要求安全性 高，稳定性高。比较 考验网站中运行的程 序。一般该类站点设 计要简洁大方，又不 失热闹有人气的感觉，
7/6/2014
万维网（www）
• 全球范围内网络的网络
• Internet 的一部分 • 由包含各种信息的文档组成
7/6/2014
浏览器
浏览器是用于阅读网页中信息的一种 软件工具，就像使用电脑必须有操作系统 一样。
• Internet Explorer（IE） • Netscape Navigator（NE） • 腾讯TT浏览器
7/6/2014
按表现形式分类
静态页面和动态页面的区别： 首先体现在处理方面上。
当用户访问一个 html时，服务 器会直接把这 个文件发给用 户。
当用户访问一个asp时，服务器 会对动态页面进行解析，运行 其中的代码，这些代码是在服 务器上运行的，执行完成后的 结果是生成一个html文件，然 后发给用户，用户最终看到的 还是一个html文件。
• • • • 门户网站（中华人民共和国中央人民政府门户网站） 职能网站（郑州大学人事处网站） 专业网站（中国农村专业技术协会网站） 个人网站
7/6/2014
什么是网页和网站？
网页的概念 是由HTML（超级文本标识语言）或者其他语 言编写的，通过浏览器编译后供用户获取信息的 页面，它又称为Web页。 网页的构成 文字与图片是构成一个网页的两个最基本的 元素。你可以简单的理解为：文字，就是网页的 内容。图片，就是网页的美观。除此之外，网页 的元素还包括动画、音乐、程序等等。
7/6/2014
考核方式：
1、阶段性的作业及出勤、回答情况以及个人 项目设计（40％）
2、书面考试 （60%）
7/6/2014
什么是互联网？
• 中文名称：互联网 • 英文名称：internet • 定义：由多个计算机网络相互连接而成，而不论采用何种 协议与技术的网络。 互联网，即广域网、局域网及单机按照一定的通讯协 议组成的国际计算机网络。 互联网是指将两台计算机或者是两台以上的计算机终 端、客户端、服务端通过计算机信息技术的手段互相联系 起来的结果，人们可以与远在千里之外的朋友相互发送邮 件、共同完成一项工作、共同娱乐。
例如：http://www.sohu.com/index.html 协议代码 主机地址 具体的文件名
7/6/2014
统一资源定位符（URL）
语法规则： Scheme://host.domain:port/path/filename 说明：
(1)scheme:定义因特网服务器的类型。最流行的类型是http。因特网服务 器类型。 (2)host(主机):定义此域中的主机。如果被省略，默认支持http的主机是 www。 (3)domain(域):定义因特网域名，比如sohu.corn。 (4)port(端口):定义主机的端口号。端口号通常是被省略的。默认的端口号 是80。 (5)path(路径):定义服务器上的路径(一个辅助的路径)。如果路径被省略， 资源(文档)会被定位到网站的根目录。 (6)filename(文件名):定义文档的名称。默认的文件名一般是default.aspx或 者index.html，或者依据Web服务器设置的其他文件名。
常更加注重网站与用户之间的
交流．例如一般门户型网站也 会提供信息的发布平台，与用 户的交流平台等．
7/6/2014
按类型分类—门户型
7/6/2014
按类型分类—门户型
7/6/2014
网页中的常用术语
• 万维网（www） • 浏览器 • 统一资源定位符（URL） • 文件传输协议（FTP） • IP地址
一、网页布局与构架设计
2、网页布局的基本类型
• • • • •
左右型 左中右型 上下型 上中下型 混合型
7/6/2014
一、网页布局与构架设计
• 上下型
7/6/2014
一、网页布局与构架设计
• 左右型
7/6/2014
一、网页布局与构架设计
• 混合型
7/6/2014
一、网页布局与构架设计
第一部分：网页布局与构架设计
7/6/2014
什么是网页和网站？
网站是由网页集合而成的
网站 网页 网页
网页是构成网站 的基本元素，是承载 各种网站应用的平台。 通俗的说，网站就是 由网页组成的。
网页
7/6/2014
什么是网页和网站？
网站的概念
网站就是一个或多个网页的集合。从广义上 讲，网站就是当网页发布到Internet上以后，能通 过浏览器在Internet上访问的页面 。 网站的类型
• 域名
• 超文本传输协议 • 超级文本标记语言
7/6/2014
万维网（www）
万维网（www）是World Wide Web的中文简称，也称 为3W网，万维网是一个以Internet为基础的计算机网络， 它的本质是一种基于超级文本技术的交互式信息浏览检索 工具，它允许用户在一台计算机上通过Internet存取另一 台计算机上的信息。 万维网是Internet提供的应用最普及、功能最丰富、 使用方法最简便的信息服务，是Internet上那些支持www 协议和超文本传输协议的客户机与服务器的集合，通过它 可以存取世界各地的超媒体文件，内容包括文字、图形、 声音、动画、资料库，以及各式各样的软件。
三、动态网站程序设计
第三部分：动态网站程序设计
JSP
ASP
ASP.NET
PHP
语言无优劣，差别在于应用范围与实用性。 asp:通用级，适合于小型信息系统，对很多中小型企业有吸引力，配 合mssqlserver. php:维护麻烦，适用范围窄，功能强大，网上很多论坛都是php的。 配合mYsql jsp:企业级，功能强大，投入高，很多电子商务网站都是jsp做的。 配合oracle.
1、页面尺寸： 由于页面尺寸和显示器大小及分辨率有关系，网页 的局限性就在于你无法突破显示器的范围，而且因为浏 览器也将占去不少空间，留下给你的页面范围变得越来 越小。
显示器分辨率
页面的设计尺寸
1024X768 800x600 640x480
7/6/2014
1007x600 780x428 620X311
7/6/2014
超级文本标记语言（HTML）
HTML是一种规范，一种标准，它通过标记符号来标记 要显示的网页巾的各个部分。网页文件本身是一种文本文 件，通过在文本文件中添加标记符，可以告诉浏览器如何 显示其中的内容(如文字如何处理、画面如何安排、图片 如何显示等)。 浏览器按顺序阅读网页文件，然后根据标记符解释和 显示其标记的内容，对书写出错的标记将不指出其错误， 且不停止其解释执行过程，编制者只能通过显示效果来分 析出错原因和出错部位。但需要注意的是，不同的浏览器， 对同一标记符可能会有不完全相同的解释，因而可能会有 不同的显示效果。
7/6/2014
文件传输协议（FTP）
FTP（File Transfer Protocol）是一种广泛使用 的文件传输协议，是快速、高效和可靠的信息传 输方法。 FTP是基于客户/服务器模型的TCP/IP的应用， 所以只要在客户端和服务器之间建立了TCP/IP连 接，无论两台电脑的位置远近、连接方式的异同 以及使用的操作系统的异同，都能通过FTP协议进 行文件的传输。
7/6/2014
动态页面执行过程演示
Web 服务器处理请求并返回 请求的页面 Web 服务器 HTTP 负责请求和响应
向服务器发送页面请求
7/6/2014
按类型分类—展示型
1、展示型
主要以展示形像为 主，艺术设计成份 比较高，内容不多，
多见于从事美术设
计方面的工作室．
7/6/2014
按类型分类—展示型
7/6/2014
什么是网页和网站？
网页的分类：
按所处位置分类 按表现形式分类 按照类型分类
7/6/2014
按所处位置分类
按网页在网站中所处的位置可将网页分 为主页和子页两类。
主页 子页
7/6/2014
按表现形式分类
按网页的表现形式可将网页分为： 静态网页和动态网页。
静态网页示意图
动态网页示意图
网页设计基础知识
主要内容：
• 学习方法、课程要求及考核方式
• 什么是互联网？
• 什么是网页和网站？
• 网页的分类
• 网页中的常用术语
• 网页设计的相关知识
7/6/2014
网页设计基础知识
课 堂 讲 解
上 机 实 战
课 后 自 学
课程要求：
11 、 、 上课认真听讲。
2、 3、 4、
5、
课后积极寻找资料，完成规定作业。 学习的20%在课堂，80%在课后。 注意动手能力的培养，设计网页是一种实战 性很强的工作，同时也是培养编程能力的一 门基础课程。 学无止境；它山之石可以攻玉；善于使用网 络、辅导书籍等，真正的老师是自我实践的 过程，这也是计算机学科的特点。
7/6/2014
域名
域名就是常说的网址，它也具有惟一性，如
百度的网址www.baidu.com、网易的网址 www.163.com等就是一个域名。 域名由汉语拼音或英文字符加上数字表示， 在访问网络时，域名将通过域名服务器转换成IP 地址，这种转换是在后台完成的。
7/6/2014
超文本传输协议
HTTP是超文本转移协议，是客户端浏览器或其他程序 与Web服务器之间的应用层通信协议。在Internet的web服 务器上存放的都是超文本信息，客户机需要通过HTTP协议 传输所要访问的超文本信息。HTTP包含命令和传输信息， 不仅可用于Web访问，也可以用于其他因特网／内联网应 用系统之间的通信，从而实现各类应用资源超媒体访问的 集成。
7/6/2014
超级文本标记语言（HTML）
HTML（Hyper Text Markup Language） 是一种嵌入式语言。通过定义标记标签使 浏览器解析页面并进行显示。 HTML是一种用户与电脑之间进行交流 的文本技术，各种网页均是用HTML语言 来描述的，用HTML语言编写的网页文件 的扩展名一般为“*.htm”或“*.html”。
HTML 页面 表单 字体 表格 布局 框架 图像 媒体
XHTML
CSS 标签
ＣＬAＳＳ
伪类和元素 容器 盒模型
DIV
客户端程序设计 JavaScript(JS) VBScript(VS)
7/6/2014
二、多媒体设计
第二部分：多媒体设计
FireWorks
PhotoShop
Flash
7/6/2014
7/6/2014
按类型分类—展示型
7/6/2014
按类型分类—展示型
7/6/2014
按类型分类—内容型
2 内容型
站点以内容为重点，用内容吸 引人。例如：普通的公司网站， 用于发布公司产品、公司动态、 招聘信息等。一些从事信息服 务性的站点，如文学站，下载
站，新闻站等等．一般该wk.baidu.com站
点以设计以简洁大方为主，不 需要太多太花翘的东西转移读 者的视线。
7/6/2014
统一资源定位符（URL）
• URL（Uniform Resource Locator）是专为标识 Internet网上资源位置而设的一种编址方式，主要 是用来指定协议（如HTTP或FTP）以及对象、文档、 万维网网页或其他目标在Internet的位置和存取方 式，通常所说的网页地址指的即是URL。
颜色多用蓝等表现信
任感。
7/6/2014
按类型分类—电子商务型
7/6/2014
按类型分类—电子商务型
7/6/2014
按类型分类—门户型
4 门户型
该类站点类似内容型，但又不 同于内容型，因其站上的内容 特别丰富，内容比较综合，一 般内容型网站内容比较集中于
某一专业，或自己的领域，或
自己的公司，工作室等小范围 的内容，而门户型一般来说除 了表现更为丰富的内容外，通
网页设计的相关知识
11 、 、
2、
网页设计的知识结构
网页设计的基本原则 网页设计的一般步骤
3、
4、
网页制作的常用工具
7/6/2014
网页设计的知识结构
第二部分： 多媒体设计
第四部分： 数据库设计
第一部分：网页 布局与构架设计 第三部分： 动态网站程 序设计
7/6/2014
一、网页布局与构架设计
例如：ftp://222.22.49.189
7/6/2014
IP地址
IP地址用来标识连接到Internet上电脑的指定 编号，每一个IP地址对应一台电脑，这与用电话 号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电 脑上以十进制数值来显示，一组数值分为4部分， 每一部分均不能大于255，中间用“.”分隔，如 61.139.2.69。
7/6/2014
按类型分类—内容型
7/6/2014
按类型分类—内容型
7/6/2014
按类型分类—内容型
7/6/2014
按类型分类—内容型
7/6/2014
按类型分类—电子商务型
3 电子商务型
以从事电子商务为主 的站点，要求安全性 高，稳定性高。比较 考验网站中运行的程 序。一般该类站点设 计要简洁大方，又不 失热闹有人气的感觉，
7/6/2014
万维网（www）
• 全球范围内网络的网络
• Internet 的一部分 • 由包含各种信息的文档组成
7/6/2014
浏览器
浏览器是用于阅读网页中信息的一种 软件工具，就像使用电脑必须有操作系统 一样。
• Internet Explorer（IE） • Netscape Navigator（NE） • 腾讯TT浏览器
7/6/2014
按表现形式分类
静态页面和动态页面的区别： 首先体现在处理方面上。
当用户访问一个 html时，服务 器会直接把这 个文件发给用 户。
当用户访问一个asp时，服务器 会对动态页面进行解析，运行 其中的代码，这些代码是在服 务器上运行的，执行完成后的 结果是生成一个html文件，然 后发给用户，用户最终看到的 还是一个html文件。
• • • • 门户网站（中华人民共和国中央人民政府门户网站） 职能网站（郑州大学人事处网站） 专业网站（中国农村专业技术协会网站） 个人网站
7/6/2014
什么是网页和网站？
网页的概念 是由HTML（超级文本标识语言）或者其他语 言编写的，通过浏览器编译后供用户获取信息的 页面，它又称为Web页。 网页的构成 文字与图片是构成一个网页的两个最基本的 元素。你可以简单的理解为：文字，就是网页的 内容。图片，就是网页的美观。除此之外，网页 的元素还包括动画、音乐、程序等等。
7/6/2014
考核方式：
1、阶段性的作业及出勤、回答情况以及个人 项目设计（40％）
2、书面考试 （60%）
7/6/2014
什么是互联网？
• 中文名称：互联网 • 英文名称：internet • 定义：由多个计算机网络相互连接而成，而不论采用何种 协议与技术的网络。 互联网，即广域网、局域网及单机按照一定的通讯协 议组成的国际计算机网络。 互联网是指将两台计算机或者是两台以上的计算机终 端、客户端、服务端通过计算机信息技术的手段互相联系 起来的结果，人们可以与远在千里之外的朋友相互发送邮 件、共同完成一项工作、共同娱乐。
例如：http://www.sohu.com/index.html 协议代码 主机地址 具体的文件名
7/6/2014
统一资源定位符（URL）
语法规则： Scheme://host.domain:port/path/filename 说明：
(1)scheme:定义因特网服务器的类型。最流行的类型是http。因特网服务 器类型。 (2)host(主机):定义此域中的主机。如果被省略，默认支持http的主机是 www。 (3)domain(域):定义因特网域名，比如sohu.corn。 (4)port(端口):定义主机的端口号。端口号通常是被省略的。默认的端口号 是80。 (5)path(路径):定义服务器上的路径(一个辅助的路径)。如果路径被省略， 资源(文档)会被定位到网站的根目录。 (6)filename(文件名):定义文档的名称。默认的文件名一般是default.aspx或 者index.html，或者依据Web服务器设置的其他文件名。
常更加注重网站与用户之间的
交流．例如一般门户型网站也 会提供信息的发布平台，与用 户的交流平台等．
7/6/2014
按类型分类—门户型
7/6/2014
按类型分类—门户型
7/6/2014
网页中的常用术语
• 万维网（www） • 浏览器 • 统一资源定位符（URL） • 文件传输协议（FTP） • IP地址
一、网页布局与构架设计
2、网页布局的基本类型
• • • • •
左右型 左中右型 上下型 上中下型 混合型
7/6/2014
一、网页布局与构架设计
• 上下型
7/6/2014
一、网页布局与构架设计
• 左右型
7/6/2014
一、网页布局与构架设计
• 混合型
7/6/2014
一、网页布局与构架设计
第一部分：网页布局与构架设计
7/6/2014
什么是网页和网站？
网站是由网页集合而成的
网站 网页 网页
网页是构成网站 的基本元素，是承载 各种网站应用的平台。 通俗的说，网站就是 由网页组成的。
网页
7/6/2014
什么是网页和网站？
网站的概念
网站就是一个或多个网页的集合。从广义上 讲，网站就是当网页发布到Internet上以后，能通 过浏览器在Internet上访问的页面 。 网站的类型
• 域名
• 超文本传输协议 • 超级文本标记语言
7/6/2014
万维网（www）
万维网（www）是World Wide Web的中文简称，也称 为3W网，万维网是一个以Internet为基础的计算机网络， 它的本质是一种基于超级文本技术的交互式信息浏览检索 工具，它允许用户在一台计算机上通过Internet存取另一 台计算机上的信息。 万维网是Internet提供的应用最普及、功能最丰富、 使用方法最简便的信息服务，是Internet上那些支持www 协议和超文本传输协议的客户机与服务器的集合，通过它 可以存取世界各地的超媒体文件，内容包括文字、图形、 声音、动画、资料库，以及各式各样的软件。
三、动态网站程序设计
第三部分：动态网站程序设计
JSP
ASP
ASP.NET
PHP
语言无优劣，差别在于应用范围与实用性。 asp:通用级，适合于小型信息系统，对很多中小型企业有吸引力，配 合mssqlserver. php:维护麻烦，适用范围窄，功能强大，网上很多论坛都是php的。 配合mYsql jsp:企业级，功能强大，投入高，很多电子商务网站都是jsp做的。 配合oracle.
1、页面尺寸： 由于页面尺寸和显示器大小及分辨率有关系，网页 的局限性就在于你无法突破显示器的范围，而且因为浏 览器也将占去不少空间，留下给你的页面范围变得越来 越小。
显示器分辨率
页面的设计尺寸
1024X768 800x600 640x480
7/6/2014
1007x600 780x428 620X311
7/6/2014
超级文本标记语言（HTML）
HTML是一种规范，一种标准，它通过标记符号来标记 要显示的网页巾的各个部分。网页文件本身是一种文本文 件，通过在文本文件中添加标记符，可以告诉浏览器如何 显示其中的内容(如文字如何处理、画面如何安排、图片 如何显示等)。 浏览器按顺序阅读网页文件，然后根据标记符解释和 显示其标记的内容，对书写出错的标记将不指出其错误， 且不停止其解释执行过程，编制者只能通过显示效果来分 析出错原因和出错部位。但需要注意的是，不同的浏览器， 对同一标记符可能会有不完全相同的解释，因而可能会有 不同的显示效果。
7/6/2014
文件传输协议（FTP）
FTP（File Transfer Protocol）是一种广泛使用 的文件传输协议，是快速、高效和可靠的信息传 输方法。 FTP是基于客户/服务器模型的TCP/IP的应用， 所以只要在客户端和服务器之间建立了TCP/IP连 接，无论两台电脑的位置远近、连接方式的异同 以及使用的操作系统的异同，都能通过FTP协议进 行文件的传输。
7/6/2014
动态页面执行过程演示
Web 服务器处理请求并返回 请求的页面 Web 服务器 HTTP 负责请求和响应
向服务器发送页面请求
7/6/2014
按类型分类—展示型
1、展示型
主要以展示形像为 主，艺术设计成份 比较高，内容不多，
多见于从事美术设
计方面的工作室．
7/6/2014
按类型分类—展示型
7/6/2014
什么是网页和网站？
网页的分类：
按所处位置分类 按表现形式分类 按照类型分类
7/6/2014
按所处位置分类
按网页在网站中所处的位置可将网页分 为主页和子页两类。
主页 子页
7/6/2014
按表现形式分类
按网页的表现形式可将网页分为： 静态网页和动态网页。
静态网页示意图
动态网页示意图
网页设计基础知识
主要内容：
• 学习方法、课程要求及考核方式
• 什么是互联网？
• 什么是网页和网站？
• 网页的分类
• 网页中的常用术语
• 网页设计的相关知识
7/6/2014
网页设计基础知识
课 堂 讲 解
上 机 实 战
课 后 自 学
课程要求：
11 、 、 上课认真听讲。
2、 3、 4、
5、
课后积极寻找资料，完成规定作业。 学习的20%在课堂，80%在课后。 注意动手能力的培养，设计网页是一种实战 性很强的工作，同时也是培养编程能力的一 门基础课程。 学无止境；它山之石可以攻玉；善于使用网 络、辅导书籍等，真正的老师是自我实践的 过程，这也是计算机学科的特点。
7/6/2014
域名
域名就是常说的网址，它也具有惟一性，如
百度的网址www.baidu.com、网易的网址 www.163.com等就是一个域名。 域名由汉语拼音或英文字符加上数字表示， 在访问网络时，域名将通过域名服务器转换成IP 地址，这种转换是在后台完成的。
7/6/2014
超文本传输协议
HTTP是超文本转移协议，是客户端浏览器或其他程序 与Web服务器之间的应用层通信协议。在Internet的web服 务器上存放的都是超文本信息，客户机需要通过HTTP协议 传输所要访问的超文本信息。HTTP包含命令和传输信息， 不仅可用于Web访问，也可以用于其他因特网／内联网应 用系统之间的通信，从而实现各类应用资源超媒体访问的 集成。
7/6/2014
超级文本标记语言（HTML）
HTML（Hyper Text Markup Language） 是一种嵌入式语言。通过定义标记标签使 浏览器解析页面并进行显示。 HTML是一种用户与电脑之间进行交流 的文本技术，各种网页均是用HTML语言 来描述的，用HTML语言编写的网页文件 的扩展名一般为“*.htm”或“*.html”。
HTML 页面 表单 字体 表格 布局 框架 图像 媒体
XHTML
CSS 标签
ＣＬAＳＳ
伪类和元素 容器 盒模型
DIV
客户端程序设计 JavaScript(JS) VBScript(VS)
7/6/2014
二、多媒体设计
第二部分：多媒体设计
FireWorks
PhotoShop
Flash
7/6/2014
7/6/2014
按类型分类—展示型
7/6/2014
按类型分类—展示型
7/6/2014
按类型分类—内容型
2 内容型
站点以内容为重点，用内容吸 引人。例如：普通的公司网站， 用于发布公司产品、公司动态、 招聘信息等。一些从事信息服 务性的站点，如文学站，下载
站，新闻站等等．一般该wk.baidu.com站
点以设计以简洁大方为主，不 需要太多太花翘的东西转移读 者的视线。
7/6/2014
统一资源定位符（URL）
• URL（Uniform Resource Locator）是专为标识 Internet网上资源位置而设的一种编址方式，主要 是用来指定协议（如HTTP或FTP）以及对象、文档、 万维网网页或其他目标在Internet的位置和存取方 式，通常所说的网页地址指的即是URL。
颜色多用蓝等表现信
任感。
7/6/2014
按类型分类—电子商务型
7/6/2014
按类型分类—电子商务型
7/6/2014
按类型分类—门户型
4 门户型
该类站点类似内容型，但又不 同于内容型，因其站上的内容 特别丰富，内容比较综合，一 般内容型网站内容比较集中于
某一专业，或自己的领域，或
自己的公司，工作室等小范围 的内容，而门户型一般来说除 了表现更为丰富的内容外，通