第一章　网页设计基础知识.

Presentation on theme: "第一章　网页设计基础知识."— Presentation transcript:

1 第一章　网页设计基础知识

2 1.1 internet基础 1.2 网页设计工具 1.3 网站建设流程 1.4 HTML语言

3 1.1 internet基础 1.1.1 INTERNET的概述
网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。

4 1.1.1 INTERNET的概述 Internet最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部高级研究计划署协助开发的ARPANET。最初是只允许国防部人员进入的封闭式网络。到1987年，在美国国家科学基金会的推动下，将之主要从军事用途转向科学研究和民事用途，形成了今天的Internet主干网雏形NSFNET。全球网络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网站这些活动已融入我们的日常生活。

5 1.1.1 INTERNET的概述 从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，在10多年的时间里，中国Internet发生了飞速的发展，截至2006年底，我国网民人数达到了1.37亿，即每十人中就有一人是网民。10%的网民普及率将是互联网发展的高速拐点，突破10%之后，中国互联网将迎来更快速的增长期。另外网站数、IP地址等也迅速增长，分别达到84.3万和9800万。从域名、网站数、IP地址等增长情况来看，我国互联网资源得到了全面提升。 Internet所提供的服务主要是WWW、 、FTP、网上传呼、在线聊天、网上购物等等，而其中WWW和 是最常用的服务。

6 1.1.2　WWW WWW(World Wide Web)简称为Web或万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。如图所示。 internet 浏览器 WEB服务器 客户端 HTTP 网络协议

7 用户通过浏览器访问WEB服务器的网页，那么如何查找这些网页呢？通过在浏览器的地址栏中输入网址，即URL，统一资源定位器。
常用的协议名如下： HTTP：超文本传输协议，用于转换网页。 FTP：文件传输协议，主要用于传输文件，许多提供软件下载的网站使用“FTP”作为下载的网址。 MAILTO：传送 协议，主要用于传输电子邮件。 例如： ftp://ftp.newhua.com

8 1.1.3　网页与网站 构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。 通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。 网站点概念是相对的，大的如新浪、搜狐等大的门户网站，页面非常多，可能分布于多台服务器上；小的如一些个人网站，可能只有几个页面，仅在某台WEB服务器的占据很小的空间。 一个站点的起始页面通常被称为“主页”，主页是一个网站的开始，因此主页的好坏决定了这个网站的访问情况，一般主页的名称是固定的index.htm或index.html等。

9 1.1.4 域名与IP地址 在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。
IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔，比如： 。 网络号 主机号 0 网络号 主机号 网络号 主机号 A类地址的范围为： — B类地址的范围： C类地址的范围： A B C

10 1.1.4　域名与IP地址 IP地址是一串难以记忆的数字，因此在1985年开始，引入了域名的概念，用具有含义的字符来表示网络中的主机，以便于浏览者访问。域名与IP地址如何对应呢？通过DNS域名解析系统将域名解析到相应的IP地址上，实现这二者之间的对应关系。 我们知道新浪网的域名： 域名的分类：域名系统是一个分层的树状结构组织，如图所示。最上面是一个无名的根域，下层为顶级域名，接着是二级……

11 1.1.4 域名与IP地址 Com net org jp cn tw Ibm hp yahoo Com edu net
根域 Com net org jp cn tw Ibm hp yahoo Com edu net Sina ebay alibaba 图1.2　域名结构图

12 表1.1 按组织分类的顶级域名 域名 域名机构 附注：全称 Com 商业机构 Commercial organization Edu
教育机构 Educational institution Gov 政府部门 government Int 国际性机构 International organization Mil 军队 military Net 网络机构 Networking organization Org 非盈利机构 Non-profit organization

13 表1.2 按地理区域分类的项级域名 域名 国家 附注：全称 cn 中国 China ca 加拿大 Canada jp 日本 Japan kr
韩国 Korea ru 俄罗斯 Russia tw 台湾 Taiwan hk 香港 Hong Kong 域名的书写格式为：叶节点名.二级域名.顶级域名 例如：

14 1.2　网页制作工具 目前网页制作工具较多，大多数网页制作工作都是通过“所见即所得”的编辑工具完成的，在网页制作过程，还需要进行素材的创作和加工，即图形和动画制作工具。

15 1.2.1 网页编辑工具 网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是notepad(记事本)、Ultraedit等。
1.2.1　网页编辑工具 网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是notepad(记事本)、Ultraedit等。 所见即所得型的编辑软件主要有：微软的Frontpage和Dreamweaver。其中Frontpage继承了OFFICE系列软件的界面通用、操作简单的特点，十分适合初学者使用。但与MacroMedia公司的Dreamweaver相比，在HTML源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，因此我们这本教材主要介绍的网页编辑工具是Dreamweaver。

16 1.2.2 图形和图像处理工具 目前常用的图形和图像处理工具主要：Photoshop及Firework。
1.2.2　图形和图像处理工具 目前常用的图形和图像处理工具主要：Photoshop及Firework。 Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了Image Ready，能够实现各种专业化的图像处理、动画的制作等。 Fireworks是由MacorMedia公司出品的首选WEB图形图像处理软件。它的独特之处在于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成Firework HTML，直接导入到网页中，使用非常方便。本教材将在以后的章节做详细的介绍。

17 1.2.3　动画制作工具 Flash是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。本教材将在以后的章节做详细的介绍。

18 1.3　网站建设流程 要建设一个优秀的网站，通常应该遵循以下工作流程：确定站点的核心－网站的规划－网站外观的设计－网页具体制作－网站性能测试－网站发布－网站更新与维护。 规划 设计 维护 发布 开发

19 1.3.1　网站规划 一个网站的成功与否与建站前的网站规划有着极为重要的关系。在建立网站前应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有详细的规划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。 1．明确建立网站的目标和用户需求 2．确定网站的风格 3．网站的技术问题

20 1.3.2 网站设计 对网站进行详细的规划之后，就可进入到设计阶段。
1.3.2　网站设计 对网站进行详细的规划之后，就可进入到设计阶段。 好的Web站点要做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题。调动一切手段充分表现网站点的个性和情趣，突出网站的特点。 1．网站的版式设计 2．色彩在网页设计中的作用 3．网页形式与内容相统一 4．三维空间的构成和虚拟现实 5．多媒体功能的利用

21 1.3.3　网页制作 静态网页的制作：采用HTML（超文本标记语言）生成的网页，供浏览者浏览。此阶段需要根据设计阶段制作的示范网页，通过去Dreamweaver等软件在各个具体网页中添加实际内容，如：文字、图像、FLASH动画、多媒体文件等。这类静态网页缺少动态的交互，因此还需添加网页的交互性，即动态网页的制作。 动态网页的制作：动态网页的编程目前常用的技术为.ASP\.PHP\.JSP等，实现客户端与服务器的交互。比如说：会员注册、信息查询、产品选购、留言、论坛等。

22 1.3.4　站点的测试和上传 网站制作完毕，在本机上进行测试，查看网站上是否存在某些错误，如网站是否存在链接的错误，图片是否正常显示，网页程序代码是否有错等。 测试完毕，后用上传工具传到WEB服务器上。 1.3.5　站点更新和维护 要充分发挥网站的市场功能，及时更新最新的产品信息。一个企业要有专业的网站维护人员或交给专业的网络公司来承担这项工作。

23 1.4 HTML语言 网页的本质是HTML，HTML-超文本标记语言，超文本使网页之间具有跳转能力，使浏览者可以选择阅读路径。
使用HTML编写的WEB页面称之为HTML文件，这种文件一般以“.html”或者“.htm”为扩展名，可以使用记事本、Altraedit标记型软件编辑，也可使用Dreamweaver、Frontpage等所见即所得类网页制作工具来快速创建HTML文件。 HTML文件通常分为头部和主体两部分，头部（HEAD）包含了编写页面的说明信息，如页面的类型、使用的字符集、使用的编写工具以及页面的标题等，这部分内容不会显示在网页中；主体（BODY）则包含希望表达的信息，可以是正文、图像、指向另一个WEB页面的超链接指针等。

24 一、HTML标签的格式 HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下： <标签>HTML语言元素</标签> 1）标签分为成对标签和非成对标签，比如：<title>、<table>、<font>等属于成对标签，而<br>、<hr>等属于非成对标签，标签忽略大小写，书写格式非常灵活。 2）可使用标签的属性来进一步限定标签，一个标签可以有多个属性项，各属性项的次序不限定，各属性项间用空格来进行分隔。 例如：<img src="images/girl.gif" width="100" height="87"> 3）HTML中使用的注释语句为<!—注释内容-->，注释内容可插入文本中任何位置，注释内容不会显示在网页中。

25 二、常见标签如下介绍 1）<HTML>…</HTML> 标识HTML文件的开始与结束。中间是一些HTML语言的元素。它允许网络浏览器把文件内容确认为HTML文件。 2）<HEAD>…</HEAD> 头部标签，其中的信息不会出现在网页中。但其中包含了许多网页的属性信息，例如网页的题目、关键词、网页类型和语言内码等。 （1）<title>…<title>标题标签，网页的标题将会显示在浏览器的标题栏上。 （2）<meta …>meta标签，包括了Mime字符集信息、网页关键字、网页说明信息等，这些信息有助于网站的推广。

26 3）<BODY>和</BODY>
主体标签，它是文档的主干，包含了文档的内容。可以通过多种途径来表现这些内容。例如，对于可视浏览器，可以把主体想象成一张画布，在画布上出现文字、图像、颜色和图案等。 （1）<P>…</P> 段落标签，中间是一段文字的内容，可以设置其属性来对文字进行排版。 （2）<FONT>…</FONT> 字体标签，可通过设置其属性来美化字体。 （3）<IMG> 图像标签，设置网页中图像的来源、尺寸、对齐方式和说明等。 （4）<A>…</A> 超链接标签，设置超链接的链接目标和名字等。

27 （5）<table>…</table>
表格标签，通过表格可以对网页中的其它元素进行排版。构成表格标签的基本标签有： <caption>…</caption>表格标题标签，定义表格的标题 <tr>…</tr>表格的行标签，定义表格中的一行 <td>…</td>定义表格行中的一个单元格

28 本章小结 　　本章主要介绍了网页设计基础知识： 1．网络基础知识： 1）internet的起源与发展、国内internet的发展现状 2)WWW的概念，WWW的访问方式及网络协议 3）域名及IP地址的概念，域名和IP地址之间的关系 2．网页制作工具：网页编辑工具、图像及动画制作工具 3．网站建设流程 1）如何规划好一个商业网站？ 2）设计商业网站时所要考虑的因素有哪些？ 3）网站制作、测试、上传及维护更新等。 4．HTML语言的简介

29 练习题 1．思考题： 如何创建一个优秀的电子商务网站，应考虑哪些因素？ 2．练习题：
1）什么是Internet？叙述Internet的产生与发展。 2）什么是WWW？如何访问WWW？ 3）IP地址与域名之间的关系如何？ 4）简述网站建设的流程。 5）简述网站规划的原则。 6）HTML文件中的标签是否区分大小写？格式有无严格要求？ 上机实训 1. 打开浏览器，打开某个网页，查看其源代码，了解HTML代码的含义。 2．打开记事本，试用HTML编写一个简单的网页。 3. 上网浏览不同的电子商务网站，比如：淘宝网、联想等，分析不同网站在站点风格和站点实现方面的特点。 课时安排：1课时