通过本章学习,应该掌握以下内容:
1,认识网页
2,构成网页的基本要素
3,制作网页的基本工具
4,美化网页的基本工具
5,网页制作的基本步骤
第 1章 网页制作初识
1.1 一个校园网的制作示例
1.1.1 主要网页画面
1.1.2 网页的基本功能
1.2 网页的基本要素
1.2.1 文字
文字是网页发布信息所用的主要形式, 由文字制作出的网
页占用空间小, 因此, 当用户浏览时, 可以很快的展现在用户面
前 。 另外, 文字性网页还可以利用浏览器中, 文件, 菜单下的
,另存为, 功能将其下载, 便于以后长期阅读, 也可对其进行编
辑打印 。 但是没有编排点缀的纯文字网页, 又会给人带来死板不
活泼的感觉, 使得人们不愿意再往下浏览 。 所以, 文字性网页一
定要注意编排, 包括标题得字型字号, 内容的层次样式, 是否需
要变换颜色进行点缀等等 。
1.标题
一个网页通常都有一个标题,表明本网页的主要内容。标题是
醒目,是吸引浏览者能否注意的一个关键,因此对标题的设计是
很重要的。
2.字号
网页中的文字不能太大或太小。太大会使得一个网页信息量变,
太小又使人们浏览时感到费劲。一个优秀网页中的文字,应统筹
规划,大小搭配适当,给人以生动活泼之感觉。
3.字型
在网页适当的位置采用不同的字体字型,也能使网页产生吸引
人的效果。应该注意的是在报刊上变换字体字型非常普遍,它可
以在不同的地方使用不同的字型。但在网页制作上却要慎重。因
为有些美丽的字型在制作网页的计算机上有,但将来别人浏览你
的网页时,浏览者的计算机上未必装有这种字体。这样浏览者就
无法得到你预想的浏览效果,甚至适得相反。
如果只是标题或少量的文字,可以将采用的特殊字体制作成
图
形方式,就可避免其他浏览者看不到的尴尬局面了。
当文本内容较多时。可以利用表格形式来实现。
1.2.2 图形
这里的图形概念是广义的, 它可以是普通的绘制图形, 可以是
各种图像, 还可以是动画 。 一幅优秀的网页除了有能吸引浏览者
的文字形式和内容外, 图形的表现功能是不能低估的 。 网页上的
图形格式一般使用 JPEG和 GIF,这两种格式具有跨平台的特性, 可
以在不同操作系统支持的浏览器上显示 。 图形在网页中通常有如
下应用 。
1,菜单按钮
网页上的菜单按钮有一些是由图形制作, 通常有横排和竖排两
种形式, 由此可以转入不同的页面 。
2,背景图形
为了加强视觉效果, 有些网页在整个网页的底层放置了图形, 称
作背景图 。 背景图可以使网页更加华丽, 使人感到界面友好 。 但
由于这是一个比较大的图形, 需要占据较大的空间, 致使网页的
显示速度明显变慢, 所以, 近期的网页以及比较著名的访问量比
较大网站一般都不设置背景图形 。
1.2.3 链接标志
链接是网页中一种非常重要的功能, 是网页中最重要, 最根
本的元素之一 。 通过链接可以从一个网页转到另一个网页, 也可
以从一个网站转到另一个网站 。 链接的标志有文字和图形两种 。
制作一些精美的图形作为链接按钮, 使它和整个网页融为一体 。
1.2.4 交互功能
Internet区别其他媒体的一个重要标志就是它的交互功能 。
例如在商务网站的页面上, 人们经过浏览, 选择了某一个产品,
就需要将自己的决定通过 Internet告诉这个网站, 网站能够自动
对该产品的数据库进行检索, 及时回应有还是没有, 数量, 规格,
价格等信息 。 如果用户选择确定, 那么网站能够返回确认信息 。
像这种交互功能其他媒体是无法比拟的 。
通常网页的交互功能都是利用表单来实现的 。 表单是网页中
站点服务器处理的一组数据输入域, 当访问者单击按钮或图形来
提交表单后, 数据就会传送到服务器上 。
1.3 网页制作和美化工具
1.3.1网页制作工具
1,超文本标识语言 ( HTML)
HTML( Hypertext Markup Language) 是一种专门用于 Web页制
作的编程语言, 用来描述超文本各个部分的内容, 告诉浏览器如何
显示文本, 怎样生成与别的文本或图像的链接点 。
HTML文档由文本, 格式化代码和导向其他文档的超链接组成 。
2,FrontPage
FrontPage是由 Microsoft公司推出的新一代 Web网页制作工具 。
FrontPage使网页制作者能够更加方便, 快捷地创建和发布网页,
具
有直观的网页制作和管理方法, 简化了大量工作 。
FrontPage界面与 Word,PowerPoint等软件的界面极为相似,
为使用者带来了极大的方便, Microsoft公司将 FrontPage封装入
Office之中, 成为 Office家族的一员, 使之功能更为强大 。
3,Dreamweaver
Dreamweaver是由 Macromedia公司推出的一款在网页制作方面大
众化的软件, 它具有可视化编辑界面, 用户不必编写复杂的 HTML源
代
码就可以生成跨平台, 跨浏览器的网页, 不仅适合于专业网页编辑
人
员的需要, 同时也容易被业余网友们所掌握 。 另外, Dreamweaver的
网页动态效果与网页排版功能都比一般的软件好用, 即使是初学者
也
能制作出相当于专业水准的网页, 所以 Dreamweaver是网页设计者的
首选工具 。
Dreamweaver支持动态 HTML,并采用了 Roundtrip HTML技术, 从
而奠定了在网页高级设计功能方面的领先地位 。 在进行网页设计过
程
中, 动态 HTML技术能够让用户轻松设计复杂的交互式网页, 产生动
态
效果;而 Roundtrip HTML技术则可以真正支持 HTML源编辑模式, 不
会产生冗余代码, 使网页渲染速度加快 。 因此, Dreamweaver是一种
1.3.2网页美化工具
为了使制作的网页更为美观, 用户在利用网页制作工具制作网
页时, 还需利用网页美化 工具对网页进行美化 。
1,Photoshop
Photoshop是由 Adobe公司开发的图形处理软件, 它是目前公认
的 PC机上最好的通用平面美术设计软件, 它功能完善, 性能稳定,
使用方便, 所以在几乎所有的广告, 出版, 软件公司, Photoshop
都是首选的平面制作工具 。
2,Fireworks
Fireworks是由 Macromedia公司开发的图形处理工具, 它的出
现使 Web作图发生了革命性的变化 。 因为 Fireworks是第一套专门为
制作网页图形而设计的软件, 同时也是专业的网页图形设计及制作
的解决方案 。
作为一款为网络设计而开发的图像处理软件, Fireworks还能
够自动切割图像, 生成光 标动态感应的 JavaScript程序等等, 而
且 Fireworks具有强大的动画功能和一个相当完美的 网络图像生
成器 。
用户可以从 http://www,macromedia.com/站点下载该软件 。
3,Flash
Flash是美国 Macromedia公司开发的矢量图形编辑和动画创作的
专业软件, 它是一种交互式动画设计工具, 用它可以将音乐, 声
效, 动画以及富有新意的界面融合在一起, 以制作出高品质的网
页动态效果 。 它主要应用于网页设计和多媒体创作等领域, 功能
十分强大和独特, 已成为交互式矢量动画的标准, 在网上非常流
行 。 Flash广泛应用于网页动画制作, 教学动画演示, 网上购物,
在线游戏等的制作中 。
1.4 网页制作的基本步骤
1.4.1 整体规划
进行网站的整体规划也就是组织网站的内容和设计其结构 。 网
页制作者在明确网页制作的目的及要包括的内容之后, 接下来就
应该对网站进行规划, 以确保文件内容条理清楚, 结构合理, 这
样不仅可以很好地体现设计者的意图, 也将使网站可维护性与可
扩展性增强 。
① 层状结构
层状结构 ( 如图 1.8所示 ) 类似于目录系统的树型结构, 由网站
文件的主页开始, 依次划分为一级标题, 二级标题等等, 逐级细
化, 直至提供给浏览者具体信息 。
主 页
页面 1 页面 2 页面 3
页面 4 页面 5 页面 6 页面 7
一级标题
二级标题
图 1.8 层状结构
② 线性结构
线性结构 ( 如图 1.9所示 ) 类似于数据结构中的线性表, 用于
组织本身的线性顺序形式存在的信息, 可以引导浏览者按部就班地
浏览整个网站文件 。 这种结构一般都用在意义是平行的页面上 。
通常情况下, 网站文件的结构是层状结构和线性结构相结合的
。 这样可以充分利用两种结构各自的特点, 使网站文件既具有条理
性, 规范性, 又可同时满足设计者和浏览者的要求 。
主
页
页
面
1
页
面
2
页
面
3
图 1.9 线性结构
③ Web结构
Web结构 ( 如图 1.10所示 ) 类似于 Internet的组成结构, 各网页
之间形成网状连接, 允许用户随意浏览 。
主 页
页面 1 页面 2 页面 3
页面 4 页面 5 页面 7 页面 8
一级标题
二级标题
图 1.10 Web结构
页面 6
1,收集整理资料
2,准备素材
3,内容规划
1.4.2 网页设计与制作
1,静态网页的设计与制作
在开始制作网页之前, 建议应用少量时间对自己要制作的主页
进行总体设计, 例如希望主页是怎样的风格, 应该放一些什么信息
,其他网页如何设计, 分几层来处理等等 。
通常在进行网页开发时, 首先都进行静态网页的制作, 然后再
在其中加入脚本程序, 表单等 。 静态网页仅仅用来被动地发布信息
,而不具有任何交互功能的网页, 它是 Web网页的重要组成部分 。
一个好的网站首先是内容丰富, 其次就是网页设计美观 。 对于
网页的外观设计, 提供以下建议:
( 1) 不要先决定网页的外观, 然后迫使自己去适应它, 应该根据
网站的访问者对象, 要提供的信息以及制作目标得出一个最适合
的网页架构 。
( 2) 每页排版不要太松散或用太大的字, 尽量避免访问者浏览网
页时要作大幅度的滚动, 对于篇幅太长的一页可以使用内部链接
解决 。 须知, 在一页的上部是显眼而宝贵的地方, 不要只放几个
粗大的字或图片 。
( 3) 切勿以 800× 600以上的分辨率设计网页, 常用的分辨率是
640× 480及 800× 600。 现在国内的站点基本上都是 800× 600,但
是如果主要是面向国外访问者的站点, 建议使用 640× 480。
( 4) 不应在每页中插入太多的广告 。 相信任何访问者都不会喜欢
浏览尽是些广告的网页, 要考虑该页内容与广告的比例, 广告太
多, 只会令人烦厌 。
( 5) 不要每页都采用不同的墙纸, 以免每次转页时都要花费过多
的时间去下载, 采用相同的底色或墙纸还可以增强网页一致性,
以树立自己的风格 。
( 6) 底色或墙纸必须与文字对比强烈, 以易于阅读 。 这并不是要
求永远使用鲜亮的背景搭配深色的文字, 但深色背景常要求与主
题配合, 有较多的顾虑, 如果网页是文章式或是包含大量文字,
不妨在底色与文字的搭配上下些工夫, 力求让访问者能够舒适地
阅读网页 。
( 7) 不要把图片白色当作透明, 要知道别人的系统不一定把内定
底色设为白色, 解决的办法除了真的把该网页的底色设为白色之
外, 最好还是用图片编辑工具将图片设为透明颜色 。
2,为网页的添加动态效果
静态网页制作完成后, 接下来的工作就是为网页添加动态效果,
包括一些脚本语言程序和数据库程序的设计, 以及加入动画效果
等 。
1.4.3 测试网页
当网页设计人员制作完所有网站页面之后, 需要对所设计的网
页进行审查和测试, 测试内容包括功能性测试和完整性测试两个方
面 。
所谓功能性测试就是要保证网页的可用性, 达到最初的内容组
织设计目标, 实现所规定的功能, 读者可方便快速地寻找到所需的
内容 。 完整性测试就是保证页面内容显示正确, 链接准确, 无差错
无遗漏 。
如果在测试过程中发现了错误, 就要及时修改, 在准确无误后,
方可正式在 Internet上发布 。 在进行功能性测试和完整性测试后,
有的还需要掌握整个站点的结构以备日后的修改 。
1.4.4 网页上传发布
网页设计好, 必须把它发布到互连网上, 否则网站形象仍然不
能展现出去 。 发布的服务器可以是远程, 也可以是本地, 但必须支
持 ASP,因为动态程序是建立在 ASP基础上的 。
1,认识网页
2,构成网页的基本要素
3,制作网页的基本工具
4,美化网页的基本工具
5,网页制作的基本步骤
第 1章 网页制作初识
1.1 一个校园网的制作示例
1.1.1 主要网页画面
1.1.2 网页的基本功能
1.2 网页的基本要素
1.2.1 文字
文字是网页发布信息所用的主要形式, 由文字制作出的网
页占用空间小, 因此, 当用户浏览时, 可以很快的展现在用户面
前 。 另外, 文字性网页还可以利用浏览器中, 文件, 菜单下的
,另存为, 功能将其下载, 便于以后长期阅读, 也可对其进行编
辑打印 。 但是没有编排点缀的纯文字网页, 又会给人带来死板不
活泼的感觉, 使得人们不愿意再往下浏览 。 所以, 文字性网页一
定要注意编排, 包括标题得字型字号, 内容的层次样式, 是否需
要变换颜色进行点缀等等 。
1.标题
一个网页通常都有一个标题,表明本网页的主要内容。标题是
醒目,是吸引浏览者能否注意的一个关键,因此对标题的设计是
很重要的。
2.字号
网页中的文字不能太大或太小。太大会使得一个网页信息量变,
太小又使人们浏览时感到费劲。一个优秀网页中的文字,应统筹
规划,大小搭配适当,给人以生动活泼之感觉。
3.字型
在网页适当的位置采用不同的字体字型,也能使网页产生吸引
人的效果。应该注意的是在报刊上变换字体字型非常普遍,它可
以在不同的地方使用不同的字型。但在网页制作上却要慎重。因
为有些美丽的字型在制作网页的计算机上有,但将来别人浏览你
的网页时,浏览者的计算机上未必装有这种字体。这样浏览者就
无法得到你预想的浏览效果,甚至适得相反。
如果只是标题或少量的文字,可以将采用的特殊字体制作成
图
形方式,就可避免其他浏览者看不到的尴尬局面了。
当文本内容较多时。可以利用表格形式来实现。
1.2.2 图形
这里的图形概念是广义的, 它可以是普通的绘制图形, 可以是
各种图像, 还可以是动画 。 一幅优秀的网页除了有能吸引浏览者
的文字形式和内容外, 图形的表现功能是不能低估的 。 网页上的
图形格式一般使用 JPEG和 GIF,这两种格式具有跨平台的特性, 可
以在不同操作系统支持的浏览器上显示 。 图形在网页中通常有如
下应用 。
1,菜单按钮
网页上的菜单按钮有一些是由图形制作, 通常有横排和竖排两
种形式, 由此可以转入不同的页面 。
2,背景图形
为了加强视觉效果, 有些网页在整个网页的底层放置了图形, 称
作背景图 。 背景图可以使网页更加华丽, 使人感到界面友好 。 但
由于这是一个比较大的图形, 需要占据较大的空间, 致使网页的
显示速度明显变慢, 所以, 近期的网页以及比较著名的访问量比
较大网站一般都不设置背景图形 。
1.2.3 链接标志
链接是网页中一种非常重要的功能, 是网页中最重要, 最根
本的元素之一 。 通过链接可以从一个网页转到另一个网页, 也可
以从一个网站转到另一个网站 。 链接的标志有文字和图形两种 。
制作一些精美的图形作为链接按钮, 使它和整个网页融为一体 。
1.2.4 交互功能
Internet区别其他媒体的一个重要标志就是它的交互功能 。
例如在商务网站的页面上, 人们经过浏览, 选择了某一个产品,
就需要将自己的决定通过 Internet告诉这个网站, 网站能够自动
对该产品的数据库进行检索, 及时回应有还是没有, 数量, 规格,
价格等信息 。 如果用户选择确定, 那么网站能够返回确认信息 。
像这种交互功能其他媒体是无法比拟的 。
通常网页的交互功能都是利用表单来实现的 。 表单是网页中
站点服务器处理的一组数据输入域, 当访问者单击按钮或图形来
提交表单后, 数据就会传送到服务器上 。
1.3 网页制作和美化工具
1.3.1网页制作工具
1,超文本标识语言 ( HTML)
HTML( Hypertext Markup Language) 是一种专门用于 Web页制
作的编程语言, 用来描述超文本各个部分的内容, 告诉浏览器如何
显示文本, 怎样生成与别的文本或图像的链接点 。
HTML文档由文本, 格式化代码和导向其他文档的超链接组成 。
2,FrontPage
FrontPage是由 Microsoft公司推出的新一代 Web网页制作工具 。
FrontPage使网页制作者能够更加方便, 快捷地创建和发布网页,
具
有直观的网页制作和管理方法, 简化了大量工作 。
FrontPage界面与 Word,PowerPoint等软件的界面极为相似,
为使用者带来了极大的方便, Microsoft公司将 FrontPage封装入
Office之中, 成为 Office家族的一员, 使之功能更为强大 。
3,Dreamweaver
Dreamweaver是由 Macromedia公司推出的一款在网页制作方面大
众化的软件, 它具有可视化编辑界面, 用户不必编写复杂的 HTML源
代
码就可以生成跨平台, 跨浏览器的网页, 不仅适合于专业网页编辑
人
员的需要, 同时也容易被业余网友们所掌握 。 另外, Dreamweaver的
网页动态效果与网页排版功能都比一般的软件好用, 即使是初学者
也
能制作出相当于专业水准的网页, 所以 Dreamweaver是网页设计者的
首选工具 。
Dreamweaver支持动态 HTML,并采用了 Roundtrip HTML技术, 从
而奠定了在网页高级设计功能方面的领先地位 。 在进行网页设计过
程
中, 动态 HTML技术能够让用户轻松设计复杂的交互式网页, 产生动
态
效果;而 Roundtrip HTML技术则可以真正支持 HTML源编辑模式, 不
会产生冗余代码, 使网页渲染速度加快 。 因此, Dreamweaver是一种
1.3.2网页美化工具
为了使制作的网页更为美观, 用户在利用网页制作工具制作网
页时, 还需利用网页美化 工具对网页进行美化 。
1,Photoshop
Photoshop是由 Adobe公司开发的图形处理软件, 它是目前公认
的 PC机上最好的通用平面美术设计软件, 它功能完善, 性能稳定,
使用方便, 所以在几乎所有的广告, 出版, 软件公司, Photoshop
都是首选的平面制作工具 。
2,Fireworks
Fireworks是由 Macromedia公司开发的图形处理工具, 它的出
现使 Web作图发生了革命性的变化 。 因为 Fireworks是第一套专门为
制作网页图形而设计的软件, 同时也是专业的网页图形设计及制作
的解决方案 。
作为一款为网络设计而开发的图像处理软件, Fireworks还能
够自动切割图像, 生成光 标动态感应的 JavaScript程序等等, 而
且 Fireworks具有强大的动画功能和一个相当完美的 网络图像生
成器 。
用户可以从 http://www,macromedia.com/站点下载该软件 。
3,Flash
Flash是美国 Macromedia公司开发的矢量图形编辑和动画创作的
专业软件, 它是一种交互式动画设计工具, 用它可以将音乐, 声
效, 动画以及富有新意的界面融合在一起, 以制作出高品质的网
页动态效果 。 它主要应用于网页设计和多媒体创作等领域, 功能
十分强大和独特, 已成为交互式矢量动画的标准, 在网上非常流
行 。 Flash广泛应用于网页动画制作, 教学动画演示, 网上购物,
在线游戏等的制作中 。
1.4 网页制作的基本步骤
1.4.1 整体规划
进行网站的整体规划也就是组织网站的内容和设计其结构 。 网
页制作者在明确网页制作的目的及要包括的内容之后, 接下来就
应该对网站进行规划, 以确保文件内容条理清楚, 结构合理, 这
样不仅可以很好地体现设计者的意图, 也将使网站可维护性与可
扩展性增强 。
① 层状结构
层状结构 ( 如图 1.8所示 ) 类似于目录系统的树型结构, 由网站
文件的主页开始, 依次划分为一级标题, 二级标题等等, 逐级细
化, 直至提供给浏览者具体信息 。
主 页
页面 1 页面 2 页面 3
页面 4 页面 5 页面 6 页面 7
一级标题
二级标题
图 1.8 层状结构
② 线性结构
线性结构 ( 如图 1.9所示 ) 类似于数据结构中的线性表, 用于
组织本身的线性顺序形式存在的信息, 可以引导浏览者按部就班地
浏览整个网站文件 。 这种结构一般都用在意义是平行的页面上 。
通常情况下, 网站文件的结构是层状结构和线性结构相结合的
。 这样可以充分利用两种结构各自的特点, 使网站文件既具有条理
性, 规范性, 又可同时满足设计者和浏览者的要求 。
主
页
页
面
1
页
面
2
页
面
3
图 1.9 线性结构
③ Web结构
Web结构 ( 如图 1.10所示 ) 类似于 Internet的组成结构, 各网页
之间形成网状连接, 允许用户随意浏览 。
主 页
页面 1 页面 2 页面 3
页面 4 页面 5 页面 7 页面 8
一级标题
二级标题
图 1.10 Web结构
页面 6
1,收集整理资料
2,准备素材
3,内容规划
1.4.2 网页设计与制作
1,静态网页的设计与制作
在开始制作网页之前, 建议应用少量时间对自己要制作的主页
进行总体设计, 例如希望主页是怎样的风格, 应该放一些什么信息
,其他网页如何设计, 分几层来处理等等 。
通常在进行网页开发时, 首先都进行静态网页的制作, 然后再
在其中加入脚本程序, 表单等 。 静态网页仅仅用来被动地发布信息
,而不具有任何交互功能的网页, 它是 Web网页的重要组成部分 。
一个好的网站首先是内容丰富, 其次就是网页设计美观 。 对于
网页的外观设计, 提供以下建议:
( 1) 不要先决定网页的外观, 然后迫使自己去适应它, 应该根据
网站的访问者对象, 要提供的信息以及制作目标得出一个最适合
的网页架构 。
( 2) 每页排版不要太松散或用太大的字, 尽量避免访问者浏览网
页时要作大幅度的滚动, 对于篇幅太长的一页可以使用内部链接
解决 。 须知, 在一页的上部是显眼而宝贵的地方, 不要只放几个
粗大的字或图片 。
( 3) 切勿以 800× 600以上的分辨率设计网页, 常用的分辨率是
640× 480及 800× 600。 现在国内的站点基本上都是 800× 600,但
是如果主要是面向国外访问者的站点, 建议使用 640× 480。
( 4) 不应在每页中插入太多的广告 。 相信任何访问者都不会喜欢
浏览尽是些广告的网页, 要考虑该页内容与广告的比例, 广告太
多, 只会令人烦厌 。
( 5) 不要每页都采用不同的墙纸, 以免每次转页时都要花费过多
的时间去下载, 采用相同的底色或墙纸还可以增强网页一致性,
以树立自己的风格 。
( 6) 底色或墙纸必须与文字对比强烈, 以易于阅读 。 这并不是要
求永远使用鲜亮的背景搭配深色的文字, 但深色背景常要求与主
题配合, 有较多的顾虑, 如果网页是文章式或是包含大量文字,
不妨在底色与文字的搭配上下些工夫, 力求让访问者能够舒适地
阅读网页 。
( 7) 不要把图片白色当作透明, 要知道别人的系统不一定把内定
底色设为白色, 解决的办法除了真的把该网页的底色设为白色之
外, 最好还是用图片编辑工具将图片设为透明颜色 。
2,为网页的添加动态效果
静态网页制作完成后, 接下来的工作就是为网页添加动态效果,
包括一些脚本语言程序和数据库程序的设计, 以及加入动画效果
等 。
1.4.3 测试网页
当网页设计人员制作完所有网站页面之后, 需要对所设计的网
页进行审查和测试, 测试内容包括功能性测试和完整性测试两个方
面 。
所谓功能性测试就是要保证网页的可用性, 达到最初的内容组
织设计目标, 实现所规定的功能, 读者可方便快速地寻找到所需的
内容 。 完整性测试就是保证页面内容显示正确, 链接准确, 无差错
无遗漏 。
如果在测试过程中发现了错误, 就要及时修改, 在准确无误后,
方可正式在 Internet上发布 。 在进行功能性测试和完整性测试后,
有的还需要掌握整个站点的结构以备日后的修改 。
1.4.4 网页上传发布
网页设计好, 必须把它发布到互连网上, 否则网站形象仍然不
能展现出去 。 发布的服务器可以是远程, 也可以是本地, 但必须支
持 ASP,因为动态程序是建立在 ASP基础上的 。