网页制作与网站建设初学者必看教程(免费下载)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
31
d
1. 图中所示是部分颜色的RGB代码:
例：为页面设置背景色：
<body bgcolor=“#FFFF33”>
32
2. 网页编辑器
用FrontPage或者Dreamweaver工具
FrontPage和Dreamweaver是最著名 的网页编辑工具。FrontPage是微软 的Office中的一件组件，是入门时很 容易掌握的工具。
13
“互联网之父”
14
1.2 浏览器
15
•浏览器
浏览器是获取WWW服务的基础，它的基本 功能就是对网页进行显示，目前使用最广 泛的浏览器是微软公司推出的Internet Explorer浏览器， 还有火狐浏览器Firefox 等等。
16
17
浏览器之战
18
1.2.3 网页制作工具
1. 记事本
43
44
2.图形
图形（网页上经常使用的图片格式： Jpg、Gif...），可以使用 Photoshop、Firework等图像处理 工具制作完成。
45
GIF在颜色数很少(256)的情况下，产生 的文件很小。 JPG最主要的优点是能支持上百万种颜 色，从而可以用来表现照片 PNG 可移值网络图形。Macromedia公 司的Fireworks的默认存盘格式就是PNG。 它集合了GIF和JPG格式的优点。
50
1. 信息查询类：
像新浪、网易、搜狐等门户网站。这 类站点将为访问者提供大量的信息， 而且访问量较大。
51
2. 大众媒体类：
具代表性的就属各大门户网站的新闻 版块，传统媒体在网络空间的拓展— —报刊杂志的电子版。
52
3. 宣传窗口类：
宣传窗口类型的网页具有内容专一，形式多样的 特点。尤其是企业的网页，具有企业形象传达的 作用，可以看作CI设计的延伸。 个人网站也成为这种类型的重要组成部分，因此 格外受到重视。
46
3.交互功能
交互功能（菜单按钮、链接、表单、 数据交换...），帮助浏览者在Web 内导航。
47
4.多媒体元素
多媒体元素：包括声音、动画、视 频片断、背景音乐等。例如，动画 可以使用flash等工具制作完成。
48
1.3 网站的设计、建设
49
1.3.2 网站类型的划分
网站有很多种类型，如门户型网站、 电子商务网站、个人网站等等。如果 依据传达信息内容的特点来进行类型 的划分，可以分为以下6种形式：
如：
主页
个人简历
我的相册
作品展示
心情随笔
Biblioteka Baidu
家 庭 相 册
个 人 相 册
网 站 作 品
平 面 作 品
涂 鸦 作 品
60
1.3.3 网站设计的基本流程
3、页面设计 根据事先规划的结构，利用平面图片 的形式设计你想要的最终效果。
61
4、网页测试 5、网页上传 6、网站推广与维护
62
1.4.1 Web站点主页的基本成分
在网页制作中，文字都可以很方便地设置 成各种字体和大小，文字不要太大，也不 要使用过多的字体，中文文字使用宋体，9 像素或者12像素左右即可，因为过大的字 在显示器显示时，线条不够平滑。另外， 颜色也不要使用太多，以免让人看起来眼 花缭乱。 Web本身对文本和字体的格式化能力并不 强，在Web页面中，可以指定文本尺寸、 如果需要使用某种特殊字体，可以把这些 字画在图片上，然后将图片插入到页面中。
63
标题 d
站标
导航栏
64
d
页脚信息区
65
d 标题
站标
导航栏
66
1.4.2 版式布局
整体布局合理化、有序化、整体化
字体的大小、型号、字间距、行间距， 以及配色等表现功能。 将文字、图形图像、色彩、动画、视频 图像等网页的传达要素，根据特定的内 容和主题，在网页所限定的范围中，运 用造型元素和形式原理进行视觉的关联 与配置，从而将设计意图以视觉形式表 现出来。
首页(主页):构成网站的第一页
7
网页是利用超文本标记语言
HTML(HyperText Markup Languge)编 写的，存放在Internet／Intranet上的 Web服务器中，供访问者使用浏览器来 阅读。 利用HTML语言编写出来的网页又称为 超文本，即网页中包含有文本、图形、 声音、图像和超链接(HyperLink)等多媒 体信息。
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
20
“另存为”对话框
21
单击ie图标，进行测试
22
例： <html> <head> <title>网站制作</title> </head> <body>文本内容</body> </html>
23
运行效果如图
24
25
26
一个典型的HTML文本的基本结构形式如下：
<html>
开始标记
<head> <title>网页标题</ title > 文件头 </head>
53
4. 电子商务类：
电子商务的出现使单向的信息传送变 成了双向的交互服务，从真正意义上 实现了网络的交互性。
54
5. 交流平台类：
各种论坛、BBS、聊天室
55
6. 网络社区类：
即虚拟网上生活。从网上交流发展到网络社区， 网络已成为人们生活、存在的新空间，在网络社 区可以充分的消遣、放松，获得深入交往并享有 充分自由的理想场所。
通常我们看到的网页，都是以 htm 或 html 后 缀结尾的文件，称 HTML 文件。
8
2006.12-2010.6中国网站规模变化
第26次中国互联网发展状况统计报告 (2010.7.15)
9
1.1.2 互联网的应用技术
现在的网络资源及各种业务、应用日 趋丰富。电子政务、远程教育、远程 医疗、移动短信、在线数字内容等网 上各类业务日新月异，电子商务交易 额快速增长，信息交流更加便捷高效。
36
Fireworks
Fireworks是由Macromedia公司开发的图 形处理工具。 第一套专门为制作网页图形而设计的软件， 同时也是专业的网页图形设计及制作的解决 方案。
37
Flash
Flash是美国Macromedia公司开发 Flash 是交互式矢量图和 Web 动画的标准。 使用 Flash 可创作出既漂亮又可改变尺寸 的导航界面以及其它奇特的效果。它易学、 易用，可以做出有很多动画的网站。
文字 图形 菜单按钮、链接、表单、数据交换... 背景 表格 颜色 多媒体元素 页面布局
41
1.文字（标题、字号、字型...）
文字是网页发布信息所用的主要形式。 在网页中可以通过字体、颜色、底纹、 边框等来设置文本的属性。
42
1.文字（标题、字号、字型...）
30
1. 在 HTML 中对于颜色的定义可以用6位 十六进制数。 2. 电脑屏幕的色彩是由rgb（红、绿、蓝） 三种色光所合成的，通过调整这三个 基色就可以调配出其它的颜色。
每2位数代表一种颜色的浓度，三种颜色 的顺序为红、绿、蓝，00代表颜色浓度最 小，FF代表颜色浓度最大。
3. #000000代表纯黑、#FFFFFF代表纯白、
38
39
1.2.4 网页的基本构成元素
一个构思奇妙、制作精美的网页会使 整个网站形象地位得到提高。网页制 作是一个可简单、可复杂的过程。制 作一个优秀的网页不仅需要有艺术的 修养，懂得必要的网络语言，还要对 图形图像、音频、视频制作，传输技 术等有很深刻的理解。
40
设计页面时经常使用的一些元素：
页面标题（说明网站的性质与内容） 网站标识
LOGO都是被精心设计的, Logo 的作用很多，最重要的就是表达网站的 理念、便于人们识别，广泛用于站点的连接、宣传等。一个绝妙的 Logo不但会使首页蓦然生辉，而且会成为整个网站的形象大使。
页眉（用来放置最希望浏览者看到的内容） 导航栏（栏目索引） 内容 页脚（联系方式、版权信息等）
56
1.3.3 网站设计的基本流程
1、整体规划 例如，网站主题、风格、页面元素、 逻辑结构等。 2、资料收集 例如，收集与主题相关的文字图片资 料，一些优秀的页面风格，下载一些 你喜欢的交互页面，开放的源代码等。
57
如：
主页
页面1
页面2
页面3
一级标题
页面4
页面5
页面6
页面7
页面8
二级标题
58
59
3
网页
网页是指通过Internet向全球提供信 息的一些文档文件，包括个人信息、 商业、娱乐等内容。
4
5
6
网页是在浏览因特网时看到的一个个的 画面；
文字、图片和动画等
网站则是指存放在网络服务器上的完整信
息的集合体，它包含一个或多个网页，这些 页以超链接方式连接在一起，形成一个整体， 描述一组完整的信息。
19
步骤如下：
单击“开始”按钮，选择“程序/附件/记事 本”。 在“记事本”的窗口中输入HTML代码。 输入代码结束后，选择“文件”菜单中的 “保存”或“另存为”命令，则弹出图1-1所 示的另存为对话框。 在“文件名”框中键入Web页的名称，注意 文件名必须以.html或.htm为扩展名。如果需 要，应在“保存在”列表框中定位到特定的 目录。 单击“保存”按钮，即创建了一个Web页。 见图1-2。 进入到你的文件架，单击，进行测试，你的 HTML的网页就完成了。
67
网页的版式设计有创造性、艺术性
68
69
用表格排版，
70
71
72
由于人们习惯于将视线从左到右、 从上到下移动，因而视区中的不同 位置注目程度不同。
73
网页中最常见的构图布局
74
http://www.floridahospital.com/
<body> 网页的主要内容 </body>
文件主体
</html>
结束标记
① HTML标签，（HTML Tag）都是由一对 “<>”括起来的，成对出现。
<标记名> </标记名>表示标记的开始和 结束，例如(<html></html>)
② HTML语言正是通过这些标签来设置网 页的结构、网页元素的位置和类别， 网页元素的显示效果等。
第1章 网页设计与制作基础
知识技能要点
互联网、Web浏览器 网页的类型 网页设计的基本流程
2
1.1 互联网技术
随着Internet／Intranet的不断普及和 发展，越来越多的公司、企业和个人 正在开始建设自己的Web站点、编写 Web网页，以一种新的方式向外界发 布信息，供人们去浏览、阅读和应用。 因此，网页制作已经受到越来越多的 专业人员的重视。
33
2. 网页编辑器
Dreamweaver是Macromedia公司出 品的网页三剑客其中的一个软件，是 专业网页制作软件。
34
Dreamweaver
35
美化网页的基本工具
Photoshop
Photoshop是由Adobe公司开发的图形 处理软件，它是目前公认的PC机上最好 的通用平面美术设计软件，它功能完善、 性能稳定、使用方便，所以在几乎所有 的广告、出版、软件公司，Photoshop 都是首选的平面制作工具。
12
蒂姆· 伯纳斯-李（Tim Berners-Lee）于 1990年创建了 World Wide Web (WWW)。 Web 最初的构想和研发的目的是为了满足 在世界各个大学、不同研究所工作的科学家 信息共享的需求。 WWW 的基本概念是把所有个人计算机、 计算机网络和超文本整合成一个功效强大并 且易于使用的全球信息系统。
10
Internet 提供的服务：
WWW服务（网上冲浪） 电子邮件服务（Email） 网上传呼（OICQ、QQ） 文件传输（FTP） BBS ......
11
•万维网（WWW）
WWW 是 World Wide Web （环球 信息网）的缩写,简称为 Web，中文 名字为“万维网”。通过万维网，人 们可以使用很简单的方法，就可以很 迅速方便地取得丰富的信息资料。 是 当前Internet上最受欢迎、最为流行、 最新的信息检索服务系统。