21世纪高等院校规划教材网页设计与制作实用技术齐建玲 主编郭铁柱 刘博涛 何丽娟 副主编中国水利水电出版社通过本章学习，应该掌握以下内容：
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 表格当文本内容较多时,可以利用表格形式来实现 。 表格是在网页上的一行或多行单元格,用来组织网页的布局或系统地布置数据,用户可以放置任何东西在表格的单元格中,包括文字,图形和表单等 。 表格具有容量大,结构严谨和效果直观等多个优点,是网页中不可缺少的记录或总结工具 。
表格还可以用来控制网页中信息的布局方式 。
许多大型的网站都是使用表格来进行页面布局的,
使页面看起来更加直观和有条理 。
1.2.3 图形这里的图形概念是广义的,它可以是普通的绘制图形,可以是各种图像,还可以是动画 。 一幅优秀的网页除了有能吸引浏览者的文字形式和内容外,图形的表现功能是不能低估的 。 网页上的图形格式一般使用
JPEG和 GIF,这两种格式具有跨平台的特性,可以在不同操作系统支持的浏览器上显示 。 图形在网页中通常有如下应用：
1,菜单按钮网页上的菜单按钮有一些是由图形制作,通常有横排和竖排两种形式,由此可以转入不同的页面 。
2,背景图形为了加强视觉效果,有些网页在整个网页的底层放置了图形,称作背景图 。 背景图可以使网页更加华丽,使人感到界面友好 。 但由于这是一个比较大的图形,需要占据较大的空间,致使网页的显示速度明显变慢,所以,近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形 。
1.2.4 链接标志网页上的菜单按钮有一些是由图形制作,通常有横排和竖排两种形式,由此可以转入不同的页面 。 链接是网页中一种非常重要的功能,是网页中最重要,最根本的元素之一 。 通过链接可以从一个网页转到另一个网页,也可以从一个网站转到另一个网站 。 链接的标志有文字和图形两种 。
制作一些精美的图形作为链接按钮,使它和整个网页融为一体 。
1.2.5 交互功能
Internet区别其他媒体的一个重要标志就是它的交互功能 。 网页的交互功能其他媒体是无法比拟的 。
通常网页的交互功能都是利用表单来实现的 。
表单是网页中站点服务器处理的一组数据输入域,
当访问者单击按钮或图形来提交表单后,数据就会传送到服务器上 。
1.3 网页制作和美化工具
HTML（ Hypertext Markup Language） 是一种专门用于 Web页制作的编程语言,用来描述超文本各个部分的内容,告诉浏览器如何显示文本,怎样生成与别的文本或图像的链接点 。
HTML文档由文本,格式化代码和导向其他文档的超链接组成 。
1.3.1 网页制作工具
1,超文本标识语言 （ HTML）
Dreamweaver是由 Macromedia公司推出的一款在网页制作方面大众化的软件,它具有可视化编辑界面,用户不必编写复杂的 HTML源代码就可以生成跨平台,跨浏览器的网页,不仅适合于专业网页编辑人员的需要,同时也容易被业余网友们所掌握 。
Dreamweaver 支持动态 HTML,并采用了
Roundtrip HTML技术,Dreamweaver是一种可以满足多层次需求,功能强大的可视化专业级网页设计及制作工具 。
2,Dreamweaver
FrontPage是由 Microsoft公司推出的新一代
Web网页制作工具 。 FrontPage使网页制作者能够更加方便,快捷地创建和发布网页,具有直观的网页制作和管理方法,简化了大量工作 。
FrontPage界面与 Word,PowerPoint等软件的界面极为相似,为使用者带来了极大的方便,
Microsoft公司将 FrontPage封装入 Office之中,成为 Office家族的一员,使之功能更为强大 。
3,FrontPage
Photoshop是由 Adobe公司开发的图形处理软件,
它是目前公认的 PC机上最好的通用平面美术设计软件,它功能完善,性能稳定,使用方便,所以在几乎所有的广告,出版,软件公司,Photoshop都是首选的平面制作工具 。
1.3.2 网页美化工具
1,Photoshop
Fireworks是由 Macromedia公司开发的图形处理工具,它的出现使 Web作图发生了革命性的变化 。 因为 Fireworks是第一套专门为制作网页图形而设计的软件,同时也是专业的网页图形设计及制作的解决方案 。 作为一个图像处理软件,Fireworks能够自由地导入多种格式的图像进行处理 。
Fireworks还能够自动切割图像,生成光标动态感应的 JavaScript程序等等,而且 Fireworks具有强大的动画功能和一个相当完美的网络图像生成器 。
2,Fireworks
Flash是美国 Macromedia公司开发的矢量图形编辑和动画创作的专业软件,它是一种交互式动画设计工具,用它可以将音乐,声效,动画以及富有新意的界面融合在一起,以制作出高品质的网页动态效果 。
它主要应用于网页设计和多媒体创作等领域,功能十分强大和独特,已成为交互式矢量动画的标准,在网上非常流行 。 Flash广泛应用于网页动画制作,教学动画演示,网上购物,在线游戏等的制作中 。
3,Flash
1.4 网页制作的基本步骤网站 定位要小,内容要精 。 如果要制作一个包罗万象的站点,把所有精彩的东西都放在上面,结果往往会事与愿违,给人的感觉是没有主题,没有特色,样样有,却样样都很肤浅 。
网站的题材最好选自己擅长或者喜爱的内容 。
兴趣是制作网站的动力,没有热情,很难设计制作出优秀的网站 。
1.4.1 网站定位进行网站的整体规划也就是组织网站的内容和设计其结构 。
组织网站的内容可以从两个角度来考虑 。 从设计者的角度来考虑,可以依据被描述对象的组织机构,
类别划分等来组织内容；从浏览者的角度来考虑,
就应该将各种素材依据浏览者的需要进行内容分类,
以便浏览者可以快捷地获取所需要的信息及其相关内容 。
1.4.2 整体规划合理的结构设计对于网站的规划也是至关重要的 。
以下是三种常用的结构类型 。
① 层状结构层状结构类似于目录系统的树型结构,
主 页页面 1 页面 2 页面 3
页面 4 页面 5 页面 6 页面 7
一级标题二级标题主页页面
1
页面
2
页面
3
② 线性结构线性结构类似于数据结构中的线性表,用于组织本身的线性顺序形式存在的信息,可以引导浏览者按部就班地浏览整个网站文件 。
主 页页面 1 页面 2 页面 3
页面 4 页面 5 页面 7 页面 8
一级标题二级标题页面 6
③ Web结构
Web结构类似于 Internet的组成结构,各网页之间形成网状连接,允许用户随意浏览 。
通常在进行网页开发时,首先都进行静态网页的制作,然后再在其中加入脚本程序,表单等动态内容 。 静态网页仅仅用来被动地发布信息,而不具有任何交互功能,它是 Web网页的重要组成部分 。
一个好的网站首先是内容丰富,其次就是网页设计美观 。 对于网页的外观设计,提供以下建议：
（ 1） 不要先决定网页的外观,然后迫使自己去适应它,应该根据网站的访问者对象,要提供的信息以及制作目标得出一个最适合的网页架构 。
1.4.3 网页设计与制作
1,静态网页的设计与制作
（ 2） 每页排版不要太松散或用太大的字,尽量避免访问者浏览网页时要作大幅度的滚动,对于篇幅太长的一页可以使用内部链接解决 。
（ 3） 切勿以 800× 600以上的分辨率设计网页,
常用的分辨率是 640× 480及 800× 600。 现在国内的站点基本上都是 800× 600,但是如果主要是面向国外访问者的站点,建议使用 640× 480。
（ 4） 不应在每页中插入太多的广告 。 相信任何访问者都不会喜欢浏览尽是些广告的网页,要考虑该页内容与广告的比例,广告太多,只会令人烦厌 。
（ 5） 不要每页都采用不同的墙纸,以免每次转页时都要花费过多的时间去下载 。
（ 6） 底色或墙纸必须与文字对比强烈,以易于阅读 。 如果网页是文章式或是包含大量文字,不妨在底色与文字的搭配上下些工夫,力求让访问者能够舒适地阅读网页 。
（ 7） 不要把图片白色当作透明,要知道别人的系统不一定把内定底色设为白色,解决的办法除了真的把该网页的底色设为白色之外,最好还是用图片编辑工具将图片设为透明颜色 。
静态网页制作完成后,接下来的工作就是为网页添加动态效果,包括一些脚本语言程序和数据库程序的设计,以及加入动画效果等 。
一个真正的网站,不仅应该实现传统媒体的电子化,给用户提供需要的内容,而且还应该做更多的事情,完成比页面浏览更高层次的需求,例如收集信息,数据传递,数据存储以及系统维护等 。
2,为网页的添加动态效果当网页设计人员制作完所有网站页面之后,需要对所设计的网页进行审查和测试,测试内容包括功能性测试和完整性测试两个方面 。
所谓功能性测试就是要保证网页的可用性,达到最初的内容组织设计目标,实现所规定的功能,读者可方便快速地寻找到所需的内容 。 完整性测试就是保证页面内容显示正确,链接准确,无差错无遗漏 。
1.4.4 测试网页网页设计好,必须把它发布到互连网上,否则网站形象仍然不能展现出去 。 发布的服务器可以是远程,也可以是本地,但必须支持 ASP,因为动态程序是建立在 ASP基础上的 。
1.4.5 网页上传发布网站的宣传和推广一般有两种途径和方法 。 一是通 过传统媒体进 行广告宣传； 另一是利 用
Internet自身的特点向外宣传 。
可用来宣传的传统媒体包括：电视,广播,报纸,
广告牌,海报和黄页等 。。
在 Internet上宣传网站的方法也是多种多样的,
如可以将网址和网站信息发布到搜索引擎,网上黄页,新闻组,邮件列表上进行宣传推广,也可以与其他同类网站交换宣传广告 。
1.4.6 网站的宣传与推广现在的网站注重信息的不断更新和交互性,只有这样才能吸引更多的浏览者来访问和参与 。 如何知道哪些网页内容需要调整,更新和修改,网页需要增加那些内容呢？ 这些不能靠主观臆断来确定,
而是需要得到访问者的反馈意见,也可根据不同网页的被访次数来分析 。
获得用户反馈信息的方法很多,常用的有计数器,
留言板,调查表等,也可以建立系统日志来记录网页的被访情况 。
1.4.7 网站的反馈与评价网站要注意经常维护更新内容,保持内容的新鲜,
不要做好就放到服务器永远不变了,只有不断地补充,更新内容,才能够吸引浏览者 。 维护更新时可以充分利用 Dreamweaver提供的模板和库技术,以提高工作效率 。
1.4.8 网站的更新与维护
E N D
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 表格当文本内容较多时,可以利用表格形式来实现 。 表格是在网页上的一行或多行单元格,用来组织网页的布局或系统地布置数据,用户可以放置任何东西在表格的单元格中,包括文字,图形和表单等 。 表格具有容量大,结构严谨和效果直观等多个优点,是网页中不可缺少的记录或总结工具 。
表格还可以用来控制网页中信息的布局方式 。
许多大型的网站都是使用表格来进行页面布局的,
使页面看起来更加直观和有条理 。
1.2.3 图形这里的图形概念是广义的,它可以是普通的绘制图形,可以是各种图像,还可以是动画 。 一幅优秀的网页除了有能吸引浏览者的文字形式和内容外,图形的表现功能是不能低估的 。 网页上的图形格式一般使用
JPEG和 GIF,这两种格式具有跨平台的特性,可以在不同操作系统支持的浏览器上显示 。 图形在网页中通常有如下应用：
1,菜单按钮网页上的菜单按钮有一些是由图形制作,通常有横排和竖排两种形式,由此可以转入不同的页面 。
2,背景图形为了加强视觉效果,有些网页在整个网页的底层放置了图形,称作背景图 。 背景图可以使网页更加华丽,使人感到界面友好 。 但由于这是一个比较大的图形,需要占据较大的空间,致使网页的显示速度明显变慢,所以,近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形 。
1.2.4 链接标志网页上的菜单按钮有一些是由图形制作,通常有横排和竖排两种形式,由此可以转入不同的页面 。 链接是网页中一种非常重要的功能,是网页中最重要,最根本的元素之一 。 通过链接可以从一个网页转到另一个网页,也可以从一个网站转到另一个网站 。 链接的标志有文字和图形两种 。
制作一些精美的图形作为链接按钮,使它和整个网页融为一体 。
1.2.5 交互功能
Internet区别其他媒体的一个重要标志就是它的交互功能 。 网页的交互功能其他媒体是无法比拟的 。
通常网页的交互功能都是利用表单来实现的 。
表单是网页中站点服务器处理的一组数据输入域,
当访问者单击按钮或图形来提交表单后,数据就会传送到服务器上 。
1.3 网页制作和美化工具
HTML（ Hypertext Markup Language） 是一种专门用于 Web页制作的编程语言,用来描述超文本各个部分的内容,告诉浏览器如何显示文本,怎样生成与别的文本或图像的链接点 。
HTML文档由文本,格式化代码和导向其他文档的超链接组成 。
1.3.1 网页制作工具
1,超文本标识语言 （ HTML）
Dreamweaver是由 Macromedia公司推出的一款在网页制作方面大众化的软件,它具有可视化编辑界面,用户不必编写复杂的 HTML源代码就可以生成跨平台,跨浏览器的网页,不仅适合于专业网页编辑人员的需要,同时也容易被业余网友们所掌握 。
Dreamweaver 支持动态 HTML,并采用了
Roundtrip HTML技术,Dreamweaver是一种可以满足多层次需求,功能强大的可视化专业级网页设计及制作工具 。
2,Dreamweaver
FrontPage是由 Microsoft公司推出的新一代
Web网页制作工具 。 FrontPage使网页制作者能够更加方便,快捷地创建和发布网页,具有直观的网页制作和管理方法,简化了大量工作 。
FrontPage界面与 Word,PowerPoint等软件的界面极为相似,为使用者带来了极大的方便,
Microsoft公司将 FrontPage封装入 Office之中,成为 Office家族的一员,使之功能更为强大 。
3,FrontPage
Photoshop是由 Adobe公司开发的图形处理软件,
它是目前公认的 PC机上最好的通用平面美术设计软件,它功能完善,性能稳定,使用方便,所以在几乎所有的广告,出版,软件公司,Photoshop都是首选的平面制作工具 。
1.3.2 网页美化工具
1,Photoshop
Fireworks是由 Macromedia公司开发的图形处理工具,它的出现使 Web作图发生了革命性的变化 。 因为 Fireworks是第一套专门为制作网页图形而设计的软件,同时也是专业的网页图形设计及制作的解决方案 。 作为一个图像处理软件,Fireworks能够自由地导入多种格式的图像进行处理 。
Fireworks还能够自动切割图像,生成光标动态感应的 JavaScript程序等等,而且 Fireworks具有强大的动画功能和一个相当完美的网络图像生成器 。
2,Fireworks
Flash是美国 Macromedia公司开发的矢量图形编辑和动画创作的专业软件,它是一种交互式动画设计工具,用它可以将音乐,声效,动画以及富有新意的界面融合在一起,以制作出高品质的网页动态效果 。
它主要应用于网页设计和多媒体创作等领域,功能十分强大和独特,已成为交互式矢量动画的标准,在网上非常流行 。 Flash广泛应用于网页动画制作,教学动画演示,网上购物,在线游戏等的制作中 。
3,Flash
1.4 网页制作的基本步骤网站 定位要小,内容要精 。 如果要制作一个包罗万象的站点,把所有精彩的东西都放在上面,结果往往会事与愿违,给人的感觉是没有主题,没有特色,样样有,却样样都很肤浅 。
网站的题材最好选自己擅长或者喜爱的内容 。
兴趣是制作网站的动力,没有热情,很难设计制作出优秀的网站 。
1.4.1 网站定位进行网站的整体规划也就是组织网站的内容和设计其结构 。
组织网站的内容可以从两个角度来考虑 。 从设计者的角度来考虑,可以依据被描述对象的组织机构,
类别划分等来组织内容；从浏览者的角度来考虑,
就应该将各种素材依据浏览者的需要进行内容分类,
以便浏览者可以快捷地获取所需要的信息及其相关内容 。
1.4.2 整体规划合理的结构设计对于网站的规划也是至关重要的 。
以下是三种常用的结构类型 。
① 层状结构层状结构类似于目录系统的树型结构,
主 页页面 1 页面 2 页面 3
页面 4 页面 5 页面 6 页面 7
一级标题二级标题主页页面
1
页面
2
页面
3
② 线性结构线性结构类似于数据结构中的线性表,用于组织本身的线性顺序形式存在的信息,可以引导浏览者按部就班地浏览整个网站文件 。
主 页页面 1 页面 2 页面 3
页面 4 页面 5 页面 7 页面 8
一级标题二级标题页面 6
③ Web结构
Web结构类似于 Internet的组成结构,各网页之间形成网状连接,允许用户随意浏览 。
通常在进行网页开发时,首先都进行静态网页的制作,然后再在其中加入脚本程序,表单等动态内容 。 静态网页仅仅用来被动地发布信息,而不具有任何交互功能,它是 Web网页的重要组成部分 。
一个好的网站首先是内容丰富,其次就是网页设计美观 。 对于网页的外观设计,提供以下建议：
（ 1） 不要先决定网页的外观,然后迫使自己去适应它,应该根据网站的访问者对象,要提供的信息以及制作目标得出一个最适合的网页架构 。
1.4.3 网页设计与制作
1,静态网页的设计与制作
（ 2） 每页排版不要太松散或用太大的字,尽量避免访问者浏览网页时要作大幅度的滚动,对于篇幅太长的一页可以使用内部链接解决 。
（ 3） 切勿以 800× 600以上的分辨率设计网页,
常用的分辨率是 640× 480及 800× 600。 现在国内的站点基本上都是 800× 600,但是如果主要是面向国外访问者的站点,建议使用 640× 480。
（ 4） 不应在每页中插入太多的广告 。 相信任何访问者都不会喜欢浏览尽是些广告的网页,要考虑该页内容与广告的比例,广告太多,只会令人烦厌 。
（ 5） 不要每页都采用不同的墙纸,以免每次转页时都要花费过多的时间去下载 。
（ 6） 底色或墙纸必须与文字对比强烈,以易于阅读 。 如果网页是文章式或是包含大量文字,不妨在底色与文字的搭配上下些工夫,力求让访问者能够舒适地阅读网页 。
（ 7） 不要把图片白色当作透明,要知道别人的系统不一定把内定底色设为白色,解决的办法除了真的把该网页的底色设为白色之外,最好还是用图片编辑工具将图片设为透明颜色 。
静态网页制作完成后,接下来的工作就是为网页添加动态效果,包括一些脚本语言程序和数据库程序的设计,以及加入动画效果等 。
一个真正的网站,不仅应该实现传统媒体的电子化,给用户提供需要的内容,而且还应该做更多的事情,完成比页面浏览更高层次的需求,例如收集信息,数据传递,数据存储以及系统维护等 。
2,为网页的添加动态效果当网页设计人员制作完所有网站页面之后,需要对所设计的网页进行审查和测试,测试内容包括功能性测试和完整性测试两个方面 。
所谓功能性测试就是要保证网页的可用性,达到最初的内容组织设计目标,实现所规定的功能,读者可方便快速地寻找到所需的内容 。 完整性测试就是保证页面内容显示正确,链接准确,无差错无遗漏 。
1.4.4 测试网页网页设计好,必须把它发布到互连网上,否则网站形象仍然不能展现出去 。 发布的服务器可以是远程,也可以是本地,但必须支持 ASP,因为动态程序是建立在 ASP基础上的 。
1.4.5 网页上传发布网站的宣传和推广一般有两种途径和方法 。 一是通 过传统媒体进 行广告宣传； 另一是利 用
Internet自身的特点向外宣传 。
可用来宣传的传统媒体包括：电视,广播,报纸,
广告牌,海报和黄页等 。。
在 Internet上宣传网站的方法也是多种多样的,
如可以将网址和网站信息发布到搜索引擎,网上黄页,新闻组,邮件列表上进行宣传推广,也可以与其他同类网站交换宣传广告 。
1.4.6 网站的宣传与推广现在的网站注重信息的不断更新和交互性,只有这样才能吸引更多的浏览者来访问和参与 。 如何知道哪些网页内容需要调整,更新和修改,网页需要增加那些内容呢？ 这些不能靠主观臆断来确定,
而是需要得到访问者的反馈意见,也可根据不同网页的被访次数来分析 。
获得用户反馈信息的方法很多,常用的有计数器,
留言板,调查表等,也可以建立系统日志来记录网页的被访情况 。
1.4.7 网站的反馈与评价网站要注意经常维护更新内容,保持内容的新鲜,
不要做好就放到服务器永远不变了,只有不断地补充,更新内容,才能够吸引浏览者 。 维护更新时可以充分利用 Dreamweaver提供的模板和库技术,以提高工作效率 。
1.4.8 网站的更新与维护
E N D
