第一章网页制作基础知识
2015-3-31
网页制作技术
20
1.4.2 网站设计——设计首页
首页是网站的门户，是网站的脸面，是网站中的最 重要的一个页面。设计首页时需要遵循网站规划制 定的基本原则。 在设计首页时需要注意，首页上往往包括以下部分： 网站徽标、网站的层次结构（即导航系统）、搜索 功能、吸引注意力的东西（例如主题图片）、实时 内容（例如“新闻”、“最近更新”等）、商业信 息（例如广告）、快捷方式（提供访问某些页面或 功能的快速链接）、注册登录功能等。
符合用户的需求
网 页 设 计 原 则
有效地使用资源
生成一个一致的、令人愉快的、有
效的网页外观和感观 在制作网页之前，应该明确目的、 任务、要求。 网页设计要有自己的风格 网页不必太花哨
2015-3-31
网页制作技术
14
1.3 网页制作方法与设计原则
科学性、艺术性、技术性
个 人 主 页 设 计 原 则
—确定
2015-3-31
网页制作技术
29
编辑网页
6种视图使用 自动建立文件夹和网页 在文件夹中双击首页 index.htm 格式—主题
2015-3-31
网页制作技术
30
编辑网页
四个显示模式： 设计—一般编辑使用 代码—专业编辑 拆分—两种兼顾 预览—观看实际效果
2015-3-31 网页制作技术 31
2015-3-31
网页制作技术
22
1.4.2 网站设计——网页中的颜色
在网页制作过程中，通常可以使用 6 位数字的十六进制数值来构造出 颜色值。最好使用标准网络安全色。 在网页中使用颜色的一般要点：
保持一致性；
注意可读性；
2015-3-31
网页制作技术
23
1.4.2 网站设计——文字、图像、及多媒
2015-3-31
网页制作技术
33
插入表格
表格—插入-表格； 设置行列数； 保存。
2015-3-31
网页制作技术
34
添加导航栏
先设定位置后在表格中 插入—导航—导航栏—基 于导航结构的导航栏—下 一步 使用页面主题—下一步 选择方向—完成 选择层和主页
2015-3-31 网页制作技术 35
2015-3-31
网页制作技术
24
1.4.3 网页制作
设计阶段完成后，进入网页制作阶段。 首先根据设计结果制作出若干示范网页。 然后通过 Dreamweaver 等软件制作具体页面， 在网页中添加实际内容，包括：文本、图像、声音、 Flash 电影以及其他多媒体信息等。
2015-3-31
按故事板修改标题和内容
双击录入文字 选择图片或文字 修改页面内容—复制粘贴 插入--图片—来自文件 保存时必须更改文件夹， 将图片放入images文件夹 中。
2015-3-31 网页制作技术 32
添加一个页面
在文件夹视图的文件夹列表中 单击右键—新建—网页 命名为英文小写，后缀为.htm 在导航栏中设它的位置
(可选用任何一种文字处理软件)
用工具软件制作
FrontPage
Dreamwaver
要制作一个完整的网页，单靠网页编辑工具是远远不够的，还需要 一些其他的软件制作出相关的文件来完善网页，例如制作图像效果、 Flash 动画等。
2015-3-31
网页制作技术
13
1.3 网页制作方法与设计原则
2015-3-31 网页制作技术 4
1.1 网站与网页
首页的概念 “主页”是网站中的一个特殊页面，它是作为一个组 织或个人在 WWW 上开始点的页面，通常也称为首 页，主页中通常包括指向其他相关页面或其他主页的 超链接。 主页是进入一个网站的门户，是整个网站的第一页。 通常主页的名称是固定的，一般叫做 index.htm 或 index.html 等（.htm 或 .html 后缀表示 HTML 文档）。
2015-3-31
网页制作技术
10
1.2 网页的本质——HTML
HTML的基本语法
HTML文件由标记（Tag） 、文本和URL组成。 HTML的控制标记对大小写不敏感，同时控制标记用 “< > ”进行区分。大多数成对出现。 格式为：<标记 [属性值] > 受标记影响的内容 </ 标记>
2015-3-31
文字或图片创建超链接
插入—超链接 外部录入网址： 内部直接选网页文件 目标框架—设网页框内位置或新 开页面。
高水准的网页—美观漂亮；
网页设计方向—特定群族；
充实网页内容—收集资料；
与网友的互动—留言共建；
推销您的网站—广泛宣传。
2015-3-31
网页制作技术
15
1.4 网站开发流程
1.4.1 1.4.2 1.4.3 1.4.4 布 1.4.5 网站规划 网站设计 网页制作 测试与发 网站维护
2015-3-31
网页制作技术
19
1.4.2 网站设计——设计页面布局
设计页面布局 首先，确定页面中要放置什么内容，包括导航 栏、文本、图像或其他多媒体信息的详细数目。 然后，在纸上或是图像处理软件（例如 Photoshop、Fireworks 等）中绘制出页面的 布局效果。 最后选择使用什么排版技术，例如表格、层或 是框架，对内容进行排版。
FrontPage简介
与OFFICE紧密集成，是一种面向大众 的网页设计和网站创建和管理软件。 它简单易学，操作灵活，功能强大。
2015-3-31
网页制作技术
28
开始创建一个网站
启动Frontpage程序 开始—程序— MicrosoftFrontpage 文件—新建—个人站点—选地址
2015-3-31 网页制作技术 5
1.1 网站与网页
网站中的文件结构 任何一个网站都是由若干个文件组成的，包括网页 文件、图像文件、媒体文件等多种类型。这些文件 通过一定的方式以文件夹的形式组织起来，构成了 网站的根文件夹。 图1是 Dreamweaver “文件”面板中显示的一个典 型网站中包含的各种文件，表1则列出了网站中各种 常用文件类型的扩展名。
2015-3-31
网页制作技术
16
1.4.1 网站规划
在网站建设开始时对站点进行详细规划和组织会大大方 便以后的工作。网站规划通常包括以下内容： 确定目标 用户分析与需求分析 确定网站风格 考虑技术因素 （各种技术因素，包括网页下载速度、浏览器、分辨 率、插件等。 ）
2015-3-31
2015-3-31 网页制作技术 3
1.1 网站与网页
网页:Web上提供的超媒体文档. 超文本与超媒体
超文本（ Hypertext）由节点和链组成。其结构类似 于人的联想记忆结构，是一种非线性网状结构。
A D
B
E
C F
超文本的表现形式仅是文字的，把多媒体信息引入了 超文本，就产生了多媒体超文本，即超媒体。
网页制作技术
25
1.4.4 测试与发布
在将所有的网页制作完毕后，就可以将网站发布到 Internet 上，但是在发布之前必须对网站进行测试。 在测试网站时，除了对所有影响页面显示的细节因 素进行一次测试外，页面中的超链接能否正常跳转 是一个值得重视的问题。 发布网站时一般需要两步工作：申请网页空间和上 传网页。
2015-3-31
网页制作技术
26
1.4.5 网站维护
随着网站的发布，我们应根据访问者的建议，不断 修改或是更新网站中的信息，并从浏览者的角度出 发，进一步完善网站。这时网站建设工作又返回到 了流程中的第一步，这样周而复始，就构成了网站 的维护过程。
2015-3-31
网页制作技术
27
1.5 用Frontpage制作网页
体的使用
中文网页最好使用用户通用的基本字体。例如“宋 体”、“黑体”等。另外，可以使用CSS 样式表确 保整个网站字体风格的一致性。 网页中的图像、图形以及其他多媒体对象的数量和 质量是限制页面快速下载的主要因素。不过合理地 使用它们也是网页制作的一种趋势，只要找到一个 平衡点，使大多数目标用户能够接受即可。因为要 制作出一个让所有人都满意的网页几乎是不可能的。
网页制作技术
11
Байду номын сангаас.2 网页的本质——HTML
HTML文件的基本结构一般可描述如下： <!DOCTYPE> <HTML> <HEAD> <TITLE> 网页的标题 </TITLE >
HTML文件的基本结构
[1] <!DOCTYPE>
声明HTML文件的版本信
息。
[2] <HTML> </HTML>
网页文档标记
2015-3-31 网页制作技术 6
1.1网站与网页
图1
2015-3-31
网页制作技术
7
1.1网站与网页
表1
2015-3-31
网页制作技术
8
1.2 网页的本质——HTML
HTML（HyperText Markup Language，超文本 标记语言）是一种专用的文档处理语言，是表示网 页的一种标准。用于编制要通过WWW显示的超文 本文件的页面(网页). 通过在网页中添加标记符，可以告诉浏览器如何显 示网页，即确定网页内容的格式。浏览器按顺序阅 读网页文件（HTML 文件），然后根据内容周围的 HTML 标记符解释和显示各种内容。 通过结合使用其他 Web 技术（如CSS 样式表、 JavaScript 脚本程序等），就可以创建出功能更 加强大的网页。
