.网页设计简介

《.网页设计简介》由会员分享，可在线阅读，更多相关《.网页设计简介（51页珍藏版）》请在金锄头文库上搜索。

1、Company name 网页设计与开发清华大学出版社第1章 网页设计简介序言l网页制作的基本概念和基础知识，对每个处于 入门阶段的初学者而言，都是应该了解和掌握 的，也是开始学习网页制作的前提，掌握这些 基本概念、网页制作的技术、制作常用工具使 用，有助于初学者从总体上对网页制作、设计 有个清晰的认识和了解，为后续的网页制作、 网站的创建打下基础。主要内容 了解万维网的用途 了解网页设计的基本概念 认识HTML、CSS、JavaScriptlInternet的历史?1957前苏联发 射世界上第一 颗人造卫星ARPA成 立1969年， ARPAnet的 诞生1971年， Email程序Ray

2、TomlinsonE1989年，www的诞生， HTML、URL 、HTTPTim Berners-Lee 1978年BBS开放1992年，诞生了Mosaic浏览器Marc Andreessen1.1 万维网概述 lWWW（World Wide Web）是一个基于超文本 （Hypertext）方式的信息检索服务工具。lWWW系统已在教育、科学技术、商业广告、公共 关系、大众媒体和娱乐等多方面起着愈来愈重要的 作用 。lWWW的应用成为Internet上最受欢迎的应用之 一，它的出现极大的推动了Internet的推广。lWWW获得成功的秘诀在于它制定了一套标准的、 易于人们掌握的超文本开发语言H

3、TML、信息资源 的统一定位格式URL 和超文本传送通信协议HTTP ，用户掌握后可以很容易地建立自己的网站。1.2 HTML语言lHTML是Hypertext Markup Language的英文 缩写，即超文本标记语言，它是构成Web页面（ Page）的主要工具。l用HTML编写的超文本文档称为HTML文档，它是 由很多标记组成的一种文本文件，HTML标记可以 说明文字、图形、动画、声音、表格、链接等 。l使用HTML语言描述的文件，能独立于各种操作系 统平台（如UNIX，WINDOWS等），访问它只需 要一个WWW浏览器，我们所看到的网页，是浏览 器对HTML文件进行解释的结果。 1.2

4、 HTML语言l新浪网的首页可以通过浏览器直接查看一个页面的HTML源代码，例如 在IE浏览器菜单栏上选择“查看源文件”即可。1.3 网页设计相关概念l超链接 超链接(Hyper Link)是特殊的文字标识，它指向了 WWW中的资源，例如一个网页、声音、文件、网页的一 个段落或者WWW中的其他资源等，这些资源均可放在任 何一个服务器上。在网页中，一个超链接可以是一些文 字也可以是一张图片。1.3 网页设计相关概念(1)l统一资源定位器统一资源定位器(Uniform Resource Locator，URL)用 于描述Internet上资源的位置和访问方式。下面是新华网一个网页的网址： http

5、:/ 02/28/content_10918112.htm1.3 网页设计相关概念(2)l基本语法：scheme:/host.domain:port/path/filename l语法说明：URL通常包括三个部分，第一部分是Scheme，告诉浏览器该如何工作，第二 部分是文件所在的主机，第三部分是文件的路径和文件名。 Scheme：定义因特网服务的类型，告诉浏览器如何解析将要打开的文件 内容。最流行的类型是 http，其他的如ftp。host（主机）：定义此域中的主机。如果被省略，缺省的支持 http 的主 机是 www，上例中是news。domain（域）：定义因特网域名，比如：。 port

6、(端口)：定义服务的端口号，端口号通常是被省略的。http默认的 端口号是 80。 path（路径）：定义服务器上的路径（一个辅助的路径）。如果路径被 省略，资源（文档）会被定位到网站的根目录，上例中是“zlft/2009- 02/28/”。 filename（文件名）：定义文档的名称。上例中是 “content_10918112.htm”。URL例子（1）http:/，用http协 议和缺省端口号（80）访问微软公司服务器 。这里没有指定路径和文件 名，所以访问的结果是把一个缺省主页送给浏览器 。（2）ftp:/ windows/winvn926.zip，用FTP协议访问北京 大学FTP服务

7、器上路径名为pub/ms-windows、 文件名为winvn926.zip的文件。1.3 网页设计相关概念(3)l网站网站(Web Site)是一个存放网络服务器上的完整信息的 集合体。它包含一个或多个网页，这些网页以一定的方 式链接在一起，成为一个整体，用来描述一组完整的信 息或达到某种期望的宣传效果。l网页网页(Web pages)是网站的组成部分，制作者可以将需 要公布的信息按照一定的方式分类，放在每个网页上， 网页里可以有文字、图象、声音及视频信息等。网页可 以看成是一个单一体，是网站的一个元素。 1.3 网页设计相关概念(4)l首页 首页(Home page)，也可以称之为主页，它

8、是一个单独 的网页，和一般网页一样，可以存放各种信息，同时又 是一个特殊的网页，作为整个网站的起始点和汇总点， 是浏览者访问一个网站的第一个网页。 1.3 网页设计相关概念(5)l静态网页是指只能在客户端运行，没有后台数据库、不含程序、不具有交互性的纯HTML格式的网页文件，其文 件后缀一般为.html、.htm、.shtml、.xml等。特点：l静态网页每个网页都有一个固定的URL，且网页URL以 .htm、.html、.shtml等常见形式为后缀，而不含有 “?”；l网页内容一经发布到网站服务器上，无论是否有用户访问 ，每个静态网页的内容都是保存在网站服务器上的，也就 是说，静态网页是实实

9、在在保存在服务器上的文件，每个 网页都是一个独立的文件；l静态网页的内容相对稳定，因此容易被搜索引擎检索；l静态网页没有数据库的支持，在网站制作和维护方面工作 量较大，因此当网站信息量很大时完全依靠静态网页制作 方式比较困难；l静态网页的交互性差，在功能方面有较大的限制。l 动态网页是指网页文件中不仅包含HTML标记，而且还包 含了需要在服务器上执行的程序代码，通过后 台数据库与Web服务器进行信息交互，由后台数 据库提供实时数据更新和数据查询服务。 特点：l动态网页以数据库技术为基础，可以大大降低 网站维护的工作量。 l采用动态网页技术的网站可以实现更多的功能 ，如用户注册、用户登录、在线调

10、查、用户管理 、订单管理等等。 l动态网页实际上并不是独立存在于服务器上的 网页文件，只有当用户请求时服务器才动态生成 一个完整的网页，并以静态的形式返回客户端浏 览器。网站赏析l网站赏析（四大门户网站，个人网站，教育网站， 商业网站）门户网站l 这类网站是一种综合性网站，涉及领域非 常广泛，包含文学、音乐、影视、体育、新 闻和娱乐等方方面面的内容，具有论坛、搜 索和短信等功能。门户网站lNO.1 腾讯 QQ号注册人数达5y NO.2 网易 邮箱注册人数达3.2y NO.3 新浪 新浪号注册人数达2.5y NO.4 搜狐 搜狐号注册人数达1.5y 杨锦麟，时事评论员，著名专栏作家，出生于福建

11、厦门，毕业于厦门大学历史系。2002年10月加盟凤 凰卫视，主持有报天天读和周刊点点评， 广受欢迎。2011年6月1日，离职凤凰卫视，出任香 港卫视副总裁兼执行台长。 北大副教授夏业良l夏业良曾在安徽大学、复旦大学、北京大学、加拿 大多伦多大学、加州伯克利大学、斯坦福大学等校 学习和交流访问，并先后在政府部门、研究机构和 高校工作。 个人网站l个人网站具有较强个性化，是以个人名义开 发创建的网站，其内容、样式、风格等都是 非常有个性的。lDavid Lowe毕业于斯坦福大学，导师是Thomas Binfold，最有影响力的研究成果：SIFT。他是SIFT特征点检测的发明人。由于SIFT具有对于

12、图像平移、旋转和尺度变化不变性的优点，使得SIFT成为近十年来最流行的图像特征点检测方法，被广泛用于图像匹配、物体识别、分类等领域。企业网站专业网站专业网站1.4网页制作开发工具l编辑工具 HTML代码可以使用Windows操作系统中自带的记事本进 行编辑。如果你正在使用的话，你可以使用它自带的记 事本（Notepad）程序，依次点击“开始菜单程序 附件”找到该程序 1.4网页制作开发工具1.4网页制作开发工具这是一个简单的HTML代码，从菜单选择“文件另存为”，将该文本文件命名为 “1-1.html”。在文件夹中双击“index.html”，用IE浏览器打开该网页文 件我们的班级主页欢迎来到

13、我们的班级网站这是我们开发的第一个网页1.4网页制作开发工具l文本编辑器不仅在记事本中可以编写HTML代码，任何文本编辑器都可以编写 HTML。比如写字板、记事本等，但保存的时候必须保存为.html或 .htm格式。1.4网页制作开发工具lEditPlus是一款非常好用的 HTML 编辑器，它除了支持颜色标记 、HTML 标记，同时支持 C、C+、Perl、Java等其他语 言，另外，它还内建完整的HTML & CSS 指令功能，对 于习惯用记事本编辑网页的朋友，它可帮你节省一半以 上的网页制作时间. 1.4网页制作开发工具lDreamweaver是一款专业的HTML编辑器，用于设计网页和WE

14、B应用程 序，它提供了很多实用工具，利用这些工具，我们可以 更加方便、快速地制作网页. l版本：任何版本都无所谓，软件而已，为了赚钱而 升级。所以，版本与版本的差异与我们的使用没有 太大的关联。1.4网页制作开发工具l浏览工具 浏览器产品有很多可供选择，它们都可以浏览WWW上的 内容。目前， 最普及的浏览器当属微软（Microsoft） 公司的Internet Explorer（俗称“IE”），它是和 windows系统绑定在一起的，其他的一些浏览器包括 Opera、Mozilla Firefox（俗称“火狐狸”或“火狐”）等 等。 1.5 网页制作相关技术l CSS CSS就是一种叫做样式表

15、（Style Sheet）的技术。也有 的人称之为层叠样式表（Cascading Style Sheet）。 在主页制作时采用CSS技术，可以有效地对页面的布局 、字体、颜色、背景和其它效果实现更加精确的控制l JavaScript JavaScript是由 Netscape公司开发的一种脚本语言（ scripting language）。在HTML基础上，使用JavaScript可以开发交互式Web网 页，例如可以在线填写各类表格、联机编写文档并发布 等。 基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys 医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护所需知识小结lHtml、CSS、JavaScript是制作网页的三大法 宝。他们在网页设计中扮演了重要的角色。Html 是基础架构，CSS用来美化页面，而JavaScript 用来实现网页的动态性、交互性。lDreamweaver 安装Company name 网页设计与开发清华大学出版社