网页设计
何如利 2012.3nnf课程安排n• 本门课程学习主要以视觉艺术设计和网页设计理论基础结合 以视觉艺术设计和网页设计理论基础结合讲解网 以视觉艺术设计和网页设计理论基础结合 页设计，培养网页设计的知
何如利 2012.3nnf课程安排n• 本门课程学习主要以视觉艺术设计和网页设计理论基础结合 以视觉艺术设计和网页设计理论基础结合讲解网 以视觉艺术设计和网页设计理论基础结合 页设计，培养网页设计的知识与设计能力。nn• 理论与实际相结合，展示大量的案例及布置主题性的网页设计作业， 加强大家的实践动手操作能力。nnf主题作业nn• 为“川音绵阳艺术学院造型与设计艺术系 造型与设计艺术系”设计 造型与设计艺术系 一张首页nn• 为“王蒙文学艺术馆”设计一张首页nnf欣赏与思考nnffffffff本课内容nn• 网站 • 网页 • 网页设计 • 网页设计的常用工具nnfWebn• World Wide Web （世界宽边网络） 世界宽边网络） 的缩写，也可以简称为Web，中文名 的缩写，也可以简称为 ， 字为“万维网” 字为“万维网”。 • Web采用浏览器 服务器工作模式。 采用浏览器/服务器工作模式 采用浏览器 服务器工作模式。 信息以页面（或称Web页）的形式存 信息以页面（或称 页 储在Web服务器中，通过浏览器为用 服务器中， 储在 服务器中 户提供方便的信息浏览界面。 户提供方便的信息浏览界面。 • 统一资源定位器 统一资源定位器URL。 。 • 超链接。 超链接。nnfWEB1.0nnWEB2.0 博客、QQ空间nnWEB3.0（未出现） WEB3.0（未出现）nn<想了解更多请在百度搜索>nnf客户机 服务器nnf站点n• 将网页文件和素材文件 网页文件和素材文件，有条理地放置站点文件夹里，这些文件 网页文件和素材文件 与文件夹就构成了网站的实质内容 网站的实质内容。 网站的实质内容nn• 站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中 所谓素材就是网页中 所用到的图像、声音、视频等， 所用到的图像、声音、视频等，这些内容是以单独文件的形式存 在。nnfURLnn• •nn– URL（Uniform Resource Locator），即统一资源定位符 统一资源定位符。 统一资源定位符 – URL是对能从Internet上得到的资源的位置和访问方法的一种 简洁的表示 ； – 标准的URL由3部分组成：服务器类型、主机名和路径及文件 名 http：//www.nankai.edu.cn/index.html 协议类型 主机名 路径及地址nnfIP地址 地址n• IP地址是Internet地址的一种表示形式；nn• 一台Internet主机至少有一个IP地址，而且这个IP地址是全网唯 一的。nn• IP地址长度为32位，采用x.x.x.x的格式来表示，每个x为8位。例 如，202.113.29.119，每个x的值为0～255。这种格式的地址被称 为点分十进制地址；nnf域名nn• 如果WWW服务器地址 IP地址用点分十进制表示，例如为 202.113.19.122，那么用户很难记住； – 如果告诉用户WWW服务器地址用字符表示为 www.nankai.edu.cn，每个字符
都有一定的意义，并且书写有 一定的规律，这样地址用户就容易理解，又容易记忆，因此 提出了域名的概念； – Internet的域名结构是由TCP/IP协议集的域名系统（DNS）定 义的； – 域名系统也与IP地址的结构一样，采用的是典型的层次结构；nnf域名n– 域名系统将整个Internet划分为多个顶级域，并为每个顶级域规 定了通用的顶级域名；nn顶级域名 com edu gov int mil net com 国家代码nn域名类型 商业组织 教育机构 政府部门 国际组织 军事部门 网络支持中心 各种非赢利性组织 各个国家nnf域名n• 我国的域名机制 – 中国互联网信息中心（CNNIC）负责管理我国的顶级域，它将 cn域划分为多个二级域； – Internet主机域名的格式为：四级域名.三级域名.二级域名.顶级 域名。例如，主机域名cs.nankai.edu.cn 代表中国南开大学计 算机系的主机。nnf我国的域名机制nn二级域名 ac com edu gov int net com 行政区代码nn域名类型 科研机构 商业组织 教育机构 政府部门 国际组织 网络支持中心 各种非赢利性组织 我国的各个行政区nnf• 首页n• 首页是网站的门户。 首页是网站的门户。 • 访问某个网站，首先打开的第一个网页就是首页。例如，要访问搜狐 访问某个网站，首先打开的第一个网页就是首页。 公司的网站，在IE地址栏中输入：www.sohu.com，打开的第一个页 面就是www.sohu.com/index.html。 • 首页起网站索引的作用，通过首页的导航功能去访问网站中其他的网 首页起网站索引的作用， 页。 • 一般首页的取名为index.htm或default.htm，“index”的意思是“索 引”，“default”的意思是“默认”。nnf超链接n• 浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针 浏览网页时，当鼠标指针指向某段文本或是某个图像， 变成小手状， 变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网 这就是超链接。 站，这就是超链接。nn• 采用超链接技术可以将不同的网站、网站中的不同网页、网页中 采用超链接技术可以将不同的网站、网站中的不同网页、 的不同位置彼此串在一起，实现相互间的跳转， 的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览 和查找。 和查找。人们通过超链接可以很方便很迅速地访问分布于全球计 算机上的海量资源，实现在互联网中的漫游。nn• 超链接能使Web服务存在广泛和持久的生命力，超链接可以说是 超链接可以说是 Web的灵魂。 的灵魂。 的灵魂nnfHTTP协议 协议: 协议n超文本传输协议，是www服务器使用的主要协议；另有https协议， 是一种具有安全性的ssl加密传输协议，需要CA申请证书。nnFTP协议 ： 协议n文件传输的用户级
协议。通过FTP，用户与存有大量文件的远程计算 机（FTP服务器）连接，查看远程计算机上的文件，然后把文件从远 程计算机上复制到本地的计算机上（称为下载），或者把本地计算机 上的文件传送到远程计算机上去（称为上传）。nnf什么是网页？？ 什么是网页？？nn• 究竟什么是网页？ • 网页使用来干什么？ • 他有什么作用？nnffHTML 静态网页 JavaScript VBScriptn应该熟练掌握网页开发工 具和相关工具（图像处理、 Flash、FireWork等）nnJavanORACLEnnSQLnAccessn/SQL Servernn动态网页nC# 应该熟练掌握网页语言， 主要通过程序设计实现动 态服务页面的开发。nnJSPnnASP.netnnf静态网页n• 静态网页，就是该网页文件里没有程序代码，只有 该网页文件里没有程序代码， 标记， 该网页文件里没有程序代码 只有HTML标记， 标记 这种网页文件的后缀为.htm或.html。静态网页一经制成，内容就 这种网页文件的后缀为 或 。 不会再变化，不管何时何人访问，显示的都是一样的内容，如果要 修改有关内容，就必须修改源代码，然后重新上传到服务器上。 • 静态网页的工作原理如下：当你在浏览器里输入一个网址回车后， 就向服务器端提出了一个浏览网页的请求。服务器端接到请求后， 就会找到你要浏览的静态网页文件，然后发送到你的浏览器上显示 出来。nnff动态网页n• 动态网页，就是该网页文件不仅含有 该网页文件不仅含有HTML标记，而且含有程序 标记， 该网页文件不仅含有 标记 代码，这种网页的后缀一般根据不同的程序设计语言来定， 代码，这种网页的后缀一般根据不同的程序设计语言来定，如 ASP文件的后缀为 文件的后缀为.asp。动态网页能够根据不同的时间、不同的 文件的后缀为 。 来访者而显示不同的内容，还可以根据用户的即时操作和即时请求， 动态网页的内容发生相应的变化。如常见的BBS、留言板、聊天室 等就是用动态网页来实现的。 • 动态网页的工作原理与静态网页有很大的不同。当你在浏览器里 输入一个动态网页网址回车后，就向服务器端提出了一个浏览网页 的请求，服务器端接到请求后，首先会找到你要浏览的动态网页文 件，然后就执行网页文件中的程序代码，将含有程序代码的动态网 页转化为标准的静态网页，最后将静态网页发送给你。nn�SP :Active Server Pages 动态服务器主页，常用vbscript或 javascript为设计语言，脚本语言，代码被ASP引擎解释执行。工作 原理：当访问者发出浏览请求时，服务器自动将ASP的程序代码解释 为标准html格式的网页内容，再将其发送到访问者的浏览器上显示出 来。ASP比HTML灵活性大。 PHP :Hypertext preprocessor
超文本预处理器，优势在于运行效 率高，并且是全开放的。 JSP ：使用java语言，代码被编译成server并由java虚拟机运行。nnff网页与网站nn网站是由网页集合而成 • 信息资源以网页的形式存储在WWW服务器中； • 用户通过浏览器向WWW服务器发出请求，服务器根据客户请求内 容，将保存在WWW服务器中的某个页面发送给客户； • 用户可以通过页面中的链接，方便地访问位于其他WWW服务器中 的页面，或其他类型的网络信息资源； • 主页（home page）是一种特殊的Web页面，是指包含个人或机构 基本信息的页面，用于对个人或机构进行综合性介绍，是访问个人 或机构详细信息的入口点。nnf网页包含的基本元素： 网页包含的基本元素：n• 文本（text）：最基本的元素，就是通常所说的文字；nn• 图像（image）：WWW浏览器一般只识别GIF与JPG两种图像格式；nn• 表格（table）：类似于Word中的表格，表格单元内容一般为字符类型；nn• 超链接（hyperlink）：用于将HTML与其他主页相连。nnf网页是丰富多彩的nn久久音乐网、一听音乐网等，同样是音乐， 给我们的感觉是否完全相同？nnf什么是网页设计？？ 什么是网页设计？？nn定义 一个成功的网页设计n– 首先，在观念上要确立活跃的思维方式nn特点nn– 其次，要有效地将图形引入网页设计之中，增加人们浏览网页的兴趣nn在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。nnf前台（界面设计，所谓平面设计） 前台（界面设计，所谓平面设计） 后台（程序处理，专业计算机操作） 后台（程序处理，专业计算机操作）nn网页设计制作一般分三阶段： 网页设计制作一般分三阶段：n设计：网页美化工具（图像），Photoshop Fireworks Photoshop和Fireworks Photoshop Fireworks等 布局：网页排版工具，DreamWeaver FrontPage DreamWeaver和FrontPage DreamWeaver FrontPage等。 动画的添加：网页美化工具，Flash Swish Flash和Swish Flash Swish等，复杂网页要涉足到脚 本程序。nnf• 网页设计软件n– – – – FrontPage Dreamweaver Flash Fireworksnn• 其他技术n– VBScript、JavaScript – ASP、JSP、PHP – CGI（通用网关接口，如Delphi、C 等）、IDC（网络数据 库接口）、ADO（ActiveX Data Object） – XML（可扩展标记语言） – VRML（虚拟现实模型语言）nnf网页设计 设计与交互设计nUI(U nterface,用户界面 用户界面) UI(User Interface,用户界面) UE或者UX (User Experience,用户体验) UX (U Experience,用户体验) perience,用户体验 UEnn网页设计要注意一下几个方面： 网页设计要注意一下几个方面：n•内容及框架结构(Frame Sets) •图象区块(Image Maps)与flash •特效等nnf交互设计n• 交互设计是人工制品、环境和
系统的行为，以及传达这种行为的 外形元素的设计与定义。 • 不像传统的设计学科主要关注形式，则是关注内容和内涵，而交 互设计首先旨在规划和描述事物的行为方式，然后描述传达这种 行为的最有效形式。nn交互设计是一门特别关注以下内容的学科： 交互设计是一门特别关注以下内容的学科： • 定义与产品的行为和使用密切相关的产品形式。 • 预测产品的使用如何影响产品与用户的关系，以及用户对产品的 理解。 • 探索产品、人和物质、文化、历史之间的对话。nnfHTML：HyperText Markup Language 超文本标记语 ： 言n常见的网页一般以.htm/.html为后缀的文件，还有就是 ASPPHPJSP等后缀的多种类型。 nn语言标记： 语言标记： 首部 主体
nnnn nnf• HTML语言是页面制作的基础语言，CSS、JAVASCRIPT、PHP、 语言是页面制作的基础语言， 语言是页面制作的基础语言 、 、 、 ASP、JSP等页面语言都是以 、 等页面语言都是以HTML为基础，嵌入到HTML页面中按 为基础，嵌入到 页面中按 等页面语言都是以 为基础 照服务器端和客户端分类； 照服务器端和客户端分类；HTML、CSS、JAVASCRIPT是基于浏览 器的客户端语言；PHP、ASP、JSP是基于WEB服务器的服务器端 语言。 • 用HTML编写的超文本文档称为 编写的超文本文档称为HTML文档，它能独立于各种操作 文档， 编写的超文本文档称为 文档 系统平台（ 系统平台（如UNIX，WINDOWS等）。 ， 等）。自1990年以来HTML就一直 被用作World Wide Web上的信息表示语言，用于描述网页的格式设 计和它与WWW上其它网页的连结信息。 • HTML语言是通过各种标记（tags）来标识文档的结构以及标识超 语言是通过各种标记（ ） 语言是通过各种标记 链接的信息。 链接的信息。HTML语言描述了文档的结构格式，但并不能精确地定 义文档信息必须如何显示和排列，最终在用户面前的显示结果取决于 Web浏览器本身的显示风格及其对标记的解释能力。nnfhtml 标记及其属性n• HTML标记的格式为：<标记>内容 • 标记属性的语法是：<标记 属性1=〝属性值1〞 属性2=〝属性值2 〞…> – 标记只是规定这是什么信息，如文本、图片、表格等，但是如何 控制这些信息，就需要相关的属性值来表示。 – 各属性之间无先后次序，属性也可省略（即取默认值），如单标 记表示在文档当前位置画一条水平线（horizontal line），一 般是从窗口中当前行的最左端一直画到最右端。nnfHTML页面框架 页面框架n• 每个html都有一个基本的框架结构，网页结构.htm格式为： – – –
nnf链接n• 格式为：链接文字 nn表格n• 一对| 标记定义列 • 格式为： < table > |
| 单元格内容 |