网页制作与网站建设初学者必看教程(免费下载)_图文

发布于:2021-05-11 05:20:17

第1章 网页设计与制作基础

知识技能要点
? 互联网、Web浏览器 ? 网页的类型 ? 网页设计的基本流程

2

1.1 互联网技术
?

随着Internet/Intranet的不断普及和 发展,越来越多的公司、企业和个人 正在开始建设自己的Web站点、编写 Web网页,以一种新的方式向外界发 布信息,供人们去浏览、阅读和应用。 因此,网页制作已经受到越来越多的 专业人员的重视。

3

网页
?

网页是指通过Internet向全球提供信 息的一些文档文件,包括个人信息、 商业、娱乐等内容。

4

5

6

?

网页是在浏览因特网时看到的一个个的 画面;
?

文字、图片和动画等

?

网站则是指存放在网络服务器上的完整信
息的集合体,它包含一个或多个网页,这些 页以超链接方式连接在一起,形成一个整体, 描述一组完整的信息。

?

首页(主页):构成网站的第一页

7

? 网页是利用超文本标记语言

?

HTML(HyperText Markup Languge)编 写的,存放在Internet/Intranet上的 Web服务器中,供访问者使用浏览器来 阅读。 利用HTML语言编写出来的网页又称为 超文本,即网页中包含有文本、图形、 声音、图像和超链接(HyperLink)等多媒 体信息。
通常我们看到的网页,都是以 htm 或 html 后 缀结尾的文件,称 HTML 文件。
8

?

2006.12-2010.6中国网站规模变化
?

第26次中国互联网发展状况统计报告 (2010.7.15)

9

1.1.2 互联网的应用技术
?

现在的网络资源及各种业务、应用日 趋丰富。电子政务、远程教育、远程 医疗、移动短信、在线数字内容等网 上各类业务日新月异,电子商务交易 额快速增长,信息交流更加便捷高效。

10

?

Internet 提供的服务:
WWW服务(网上冲浪) ? 电子邮件服务(Email) ? 网上传呼(OICQ、QQ) ? 文件传输(FTP) ? BBS ? ......
?

11

?万维网(WWW)
?

WWW 是 World Wide Web (环球 信息网)的缩写,简称为 Web,中文 名字为“万维网”。通过万维网,人 们可以使用很简单的方法,就可以很 迅速方便地取得丰富的信息资料。 是 当前Internet上最受欢迎、最为流行、 最新的信息检索服务系统。

12

?
?

?

蒂姆· 伯纳斯-李(Tim Berners-Lee)于 1990年创建了 World Wide Web (WWW)。 Web 最初的构想和研发的目的是为了满足 在世界各个大学、不同研究所工作的科学家 信息共享的需求。 WWW 的基本概念是把所有个人计算机、 计算机网络和超文本整合成一个功效强大并 且易于使用的全球信息系统。

13

“互联网之父”

14

1.2 浏览器

15

?浏览器
?

浏览器是获取WWW服务的基础,它的基本 功能就是对网页进行显示,目前使用最广 泛的浏览器是微软公司推出的Internet Explorer浏览器, 还有火狐浏览器Firefox 等等。

16

17

浏览器之战

18

1.2.3 网页制作工具
1. 记事本

19

步骤如下:
? ?

?

?

? ?

单击“开始”按钮,选择“程序/附件/记事 本”。 在“记事本”的窗口中输入HTML代码。 输入代码结束后,选择“文件”菜单中的 “保存”或“另存为”命令,则弹出图1-1所 示的另存为对话框。 在“文件名”框中键入Web页的名称,注意 文件名必须以.html或.htm为扩展名。如果需 要,应在“保存在”列表框中定位到特定的 目录。 单击“保存”按钮,即创建了一个Web页。 见图1-2。 进入到你的文件架,单击,进行测试,你的 HTML的网页就完成了。

20

“另存为”对话框

21

单击ie图标,进行测试

22

?

例: <html> <head> <title>网站制作</title> </head> <body>文本内容</body> </html>

23

运行效果如图

24

25

26

一个典型的HTML文本的基本结构形式如下:
<html>

开始标记

<head> <title>网页标题</ title > 文件头 </head>

<body> 网页的主要内容 </body>

文件主体

</html>

结束标记

① HTML标签,(HTML Tag)都是由一对 “<>”括起来的,成对出现。
?

<标记名> </标记名>表示标记的开始和 结束,例如(<html></html>)

② HTML语言正是通过这些标签来设置网 页的结构、网页元素的位置和类别, 网页元素的显示效果等。

28

标记符属性
1.属性是用来描述对象特征的特性。例如, 一个人的身高、体重就是人这个对象的属 性。 2.在HTML中,所有的属性都放置在开始标记 符里,多个属性之间用空格分开。 如:<body bgcolor=“blue“ text=“white”>

29

关于颜色
1. 颜色值是一个关键字或一个RGB格式的 数字。 2. aqua,black, blue,fuchsia, gray, green, lime,maroon,navy,olive, purple,red,silver,teal,white, yellow

30

1. 在 HTML 中对于颜色的定义可以用6位 十六进制数。 2. 电脑屏幕的色彩是由rgb(红、绿、蓝) 三种色光所合成的,通过调整这三个 基色就可以调配出其它的颜色。
? 每2位数代表一种颜色的浓度,三种颜色 的顺序为红、绿、蓝,00代表颜色浓度最 小,FF代表颜色浓度最大。

3. #000000代表纯黑、#FFFFFF代表纯白、

31

d
1. 图中所示是部分颜色的RGB代码:
例:为页面设置背景色:

<body bgcolor=“#FFFF33”>

32

2. 网页编辑器
?

用FrontPage或者Dreamweaver工具
FrontPage和Dreamweaver是最著名 的网页编辑工具。FrontPage是微软 的Office中的一件组件,是入门时很 容易掌握的工具。

?

33

2. 网页编辑器
?

Dreamweaver是Macromedia公司出 品的网页三剑客其中的一个软件,是 专业网页制作软件。

34

Dreamweaver

35

美化网页的基本工具
?
?

Photoshop
Photoshop是由Adobe公司开发的图形 处理软件,它是目前公认的PC机上最好 的通用*面美术设计软件,它功能完善、 性能稳定、使用方便,所以在几乎所有 的广告、出版、软件公司,Photoshop 都是首选的*面制作工具。

36

?
?

Fireworks
Fireworks是由Macromedia公司开发的图 形处理工具。 第一套专门为制作网页图形而设计的软件, 同时也是专业的网页图形设计及制作的解决 方案。

?

37

?
? ?

Flash
Flash是美国Macromedia公司开发 Flash 是交互式矢量图和 Web 动画的标准。 使用 Flash 可创作出既漂亮又可改变尺寸 的导航界面以及其它奇特的效果。它易学、 易用,可以做出有很多动画的网站。

38

39

1.2.4 网页的基本构成元素
?

一个构思奇妙、制作精美的网页会使 整个网站形象地位得到提高。网页制 作是一个可简单、可复杂的过程。制 作一个优秀的网页不仅需要有艺术的 修养,懂得必要的网络语言,还要对 图形图像、音频、视频制作,传输技 术等有很深刻的理解。

40

设计页面时经常使用的一些元素:
? ? ? ? ? ? ? ?

文字 图形 菜单按钮、链接、表单、数据交换... 背景 表格 颜色 多媒体元素 页面布局

41

1.文字(标题、字号、字型...)
?

文字是网页发布信息所用的主要形式。 在网页中可以通过字体、颜色、底纹、 边框等来设置文本的属性。

42

1.文字(标题、字号、字型...)
?

?

在网页制作中,文字都可以很方便地设置 成各种字体和大小,文字不要太大,也不 要使用过多的字体,中文文字使用宋体,9 像素或者12像素左右即可,因为过大的字 在显示器显示时,线条不够*滑。另外, 颜色也不要使用太多,以免让人看起来眼 花缭乱。 Web本身对文本和字体的格式化能力并不 强,在Web页面中,可以指定文本尺寸、 如果需要使用某种特殊字体,可以把这些 字画在图片上,然后将图片插入到页面中。
43

44

2.图形
?

图形(网页上经常使用的图片格式: Jpg、Gif...),可以使用 Photoshop、Firework等图像处理 工具制作完成。

45

?

?

?

GIF在颜色数很少(256)的情况下,产生 的文件很小。 JPG最主要的优点是能支持*偻蛑盅 色,从而可以用来表现照片 PNG 可移值网络图形。Macromedia公 司的Fireworks的默认存盘格式就是PNG。 它集合了GIF和JPG格式的优点。

46

3.交互功能
?

交互功能(菜单按钮、链接、表单、 数据交换...),帮助浏览者在Web 内导航。

47

4.多媒体元素
?

多媒体元素:包括声音、动画、视 频片断、背景音乐等。例如,动画 可以使用flash等工具制作完成。

48

1.3 网站的设计、建设

49

1.3.2 网站类型的划分
?

网站有很多种类型,如门户型网站、 电子商务网站、个人网站等等。如果 依据传达信息内容的特点来进行类型 的划分,可以分为以下6种形式:

50

1. 信息查询类:
?

像新浪、网易、搜狐等门户网站。这 类站点将为访问者提供大量的信息, 而且访问量较大。

51

2. 大众媒体类:
?

具代表性的就属各大门户网站的新闻 版块,传统媒体在网络空间的拓展— —报刊杂志的电子版。

52

3. 宣传窗口类:
?

?

宣传窗口类型的网页具有内容专一,形式多样的 特点。尤其是企业的网页,具有企业形象传达的 作用,可以看作CI设计的延伸。 个人网站也成为这种类型的重要组成部分,因此 格外受到重视。

53

4. 电子商务类:
?

电子商务的出现使单向的信息传送变 成了双向的交互服务,从真正意义上 实现了网络的交互性。

54

5. 交流*台类:
?

各种论坛、BBS、聊天室

55

6. 网络社区类:
?

即虚拟网上生活。从网上交流发展到网络社区, 网络已成为人们生活、存在的新空间,在网络社 区可以充分的消遣、放松,获得深入交往并享有 充分自由的理想场所。

56

1.3.3 网站设计的基本流程
1、整体规划 例如,网站主题、风格、页面元素、 逻辑结构等。 2、资料收集 例如,收集与主题相关的文字图片资 料,一些优秀的页面风格,下载一些 你喜欢的交互页面,开放的源代码等。
57

如:
主页

页面1

页面2

页面3

一级标题

页面4

页面5

页面6

页面7

页面8

二级标题

58

59

如:
主页

个人简历

我的相册

作品展示

心情随笔

家 庭 相 册

个 人 相 册

网 站 作 品

* 面 作 品

涂 鸦 作 品

60

1.3.3 网站设计的基本流程
3、页面设计 根据事先规划的结构,利用*面图片 的形式设计你想要的最终效果。

61

4、网页测试 5、网页上传 6、网站推广与维护

62

1.4.1 Web站点主页的基本成分
?页面标题(说明网站的性质与内容) ?网站标识
? LOGO都是被精心设计的, Logo 的作用很多,最重要的就是表达网站的 理念、便于人们识别,广泛用于站点的连接、宣传等。一个绝妙的 Logo不但会使首页蓦然生辉,而且会成为整个网站的形象大使。

?页眉(用来放置最希望浏览者看到的内容) ?导航栏(栏目索引) ?内容 ?页脚(联系方式、版权信息等)

63

标题 d

站标

导航栏

64

d

页脚信息区

65

d 标题

站标
导航栏

66

1.4.2 版式布局
?

整体布局合理化、有序化、整体化
?

字体的大小、型号、字间距、行间距, 以及配色等表现功能。 将文字、图形图像、色彩、动画、视频 图像等网页的传达要素,根据特定的内 容和主题,在网页所限定的范围中,运 用造型元素和形式原理进行视觉的关联 与配置,从而将设计意图以视觉形式表 现出来。
67

?

网页的版式设计有创造性、艺术性
?

68

69

用表格排版,

70

71

72

?

由于人们*惯于将视线从左到右、 从上到下移动,因而视区中的不同 位置注目程度不同。

73

网页中最常见的构图布局

74

http://www.floridahospital.com/

层次分明

75

http://www.komodomedia.com/portfolio/

这个网站用了宽大的边框分隔内容 和背景,在背景处布置了大面积的 图案。页面的宽度符合阅读*惯, 而扩展出来的背景又在视觉上饱满 了屏幕尺寸

76

http://www.washington.edu/

77

?http://www.volvocars.com/intl/top/about/corporate/career/pages/businessareas.asp

2014-4-25

78

?SGI silicon graphics,inc

http://www.sgi.com/

2014-4-25

79

? 网站内不同页面的设计风格要有所统一。 有些是色彩和布局都统一;有些则是布局 统一,色彩跳跃。

2014-4-25

80

色彩和布局都统一

2014-4-25

81

http://www.stephaneguillot.com/

布局不同而色调一致

2014-4-25

82

布局相同,色彩跳跃

2014-4-25

83

2014-4-25

84

2014-4-25

85

2014-4-25

86

推荐学*网站之网页素材
?

网页制作大宝库 http://www.dabaoku.com/sucai/
素材精品屋 http://www.sucaiw.com/index.asp 黑马网页素材 http://sucai.heima.com/ 遐思素材屋 http://www.zzi.cc/index1.htm
87

?

? ?

推荐学*网站之网页特效
?

网页特效集 http://www.helpor.net/
网页特效 http://free.2259.com/ 七色风网页特效 http://www.7wind.net/wytx/wytx.htm

?

?

88

推荐学*网站之技术文章
?

太*洋学院 http://www.pconline.com.cn/pcedu/sj/wz/
蓝色理想 http://www.blueidea.com/ 天极网-----网页陶吧 http://homepage.yesky.com/ 网页设计师联盟 http://www.68design.net/

? ?

?

89

本章重点内容小结
?
? ? ? ? ? ?

网页、网站 万维网、浏览器 网页制作工具(包括网页制作语言HTML) 网页中的基本元素 网页中颜色的定义 网站建设流程 网页版式布局

90

1.5 练*题课本P15
1.接入Internet的计算机必须共同遵守()
A.CPI/IP协议 B.PCT/IP协议 C.PTC/IP协议 D.TCP/IP协议

2.万维网的网址以http为前导,表示遵从()协议
A.纯文本 B.超文本传输 C.TCP/IP协议 D.POP协议

3.URL的组成格式为()
A.资源类型、存放资源的主机域名和资源文件名 B.资源类型、资源文件名和存放资源的主机域名 C.主机域名、资源类型、资源文件名 D.资源文件名、主机域名和资源类型

4.URL的使用是()
A.定位主机的地址 B.定位资源的地址 C.域名与IP地址的转换 D.表示电子邮件的地址

5.使用记事本,用HTML语言编写如下图所示效果的页面。

91

网 页 标 题

92


猜你喜欢

友情链接