大学计算机基础-第5章.ppt

《大学计算机基础-第5章.ppt》由会员分享，可在线阅读，更多相关《大学计算机基础-第5章.ppt（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、大学计算机基础大学计算机基础主讲人主讲人联系方式联系方式第5章 网页设计通过本章的学习，您将会掌握以下知识通过本章的学习，您将会掌握以下知识5.1 5.1 网页制作的语言和工具网页制作的语言和工具5.2 5.2 网页制作步骤网页制作步骤5.3 5.3 网页中的文本和超链接网页中的文本和超链接5.4 5.4 网页中的图像和多媒体网页中的图像和多媒体5.5 5.5 表单的制作表单的制作5.6 5.6 网页版面设计网页版面设计5.7 5.7 网页的特效制作网页的特效制作5.8 5.8 站点发布与管理站点发布与管理武汉科技大学城市学院武汉科技大学城市学院5.1.1 网页制作语言HTML(Hyper T

2、ext Maker Language)是一种超文本标记语言，用来描述WWW上的超文本文件。武汉科技大学城市学院武汉科技大学城市学院HTML文本的基本结构武汉科技大学城市学院武汉科技大学城市学院HTML文本的基本结构武汉科技大学城市学院武汉科技大学城市学院5.1.2 网页制作工具之一 武汉科技大学城市学院武汉科技大学城市学院网站与网页网站与网页万维网(WWW)上用浏览器观看的每个屏幕页面都是“网页”；网站是能够被人用浏览器访问并包含组织好的一组网页，也称为“站点”；网站一般由硬件和软件两部分组成，我们教材中主要讨论这“组织好的一组网页”的软件部分；例如：“google.htm”是网页加上”goo

3、gle.files”才是完整的；演示无”google.files”打开网页的情况；武汉科技大学城市学院武汉科技大学城市学院网站与网页网站与网页网站需要服务器驱动网站需要服务器驱动，网页则只需要服务器空间。网站支持邮件服务器网站支持邮件服务器，网页无法提供该功能。综上所述网站是以数据为核心，以服务器为基础的浏览者-管理员-系统管理员相互关联、相互促进、有机制约的信息化整体。网页则是静态页面各自为政，仅仅提供链接的HTML文件。武汉科技大学城市学院武汉科技大学城市学院网站的制作流程 武汉科技大学城市学院武汉科技大学城市学院网页内容及版面布局的设计美术字：计算机应用基础展示自己的风采显示自己的能力字

4、幕：自己设计网页超级链接：HTML和网页的关系超级链接：网页的设计和制作超级链接：个人网页的发布 一张动画武汉科技大学城市学院武汉科技大学城市学院网页内容的设计HTML文件名：文件名：index.htm网页名称：网页名称：网页的设计和制作网页的设计和制作网页背景：网页背景：带有纹理的灰色大理石带有纹理的灰色大理石网页上有文字：网页上有文字：计算机应用基础课程计算机应用基础课程展示自己的风采展示自己的风采、显示自己的能力显示自己的能力上面两句话之间插入一张恰当的图形上面两句话之间插入一张恰当的图形滚动的字幕内容：滚动的字幕内容：自己制作网页自己制作网页超级勾链文字：超级勾链文字：“HTML和网页

5、的关系和网页的关系”勾链到另一网页：勾链到另一网页：html和网页和网页.htm超级勾链文字：超级勾链文字：“网页的设计和制作网页的设计和制作”勾链到另一网页：勾链到另一网页：设计和制作设计和制作.htm超级勾链文字：超级勾链文字：“个人网页的发布个人网页的发布”勾链到另一网页：勾链到另一网页：网页发布网页发布.htm”武汉科技大学城市学院武汉科技大学城市学院布局注意的原则页面布局的平衡，不要太挤也不要太空；页面布局的平衡，不要太挤也不要太空；页面色彩的平衡，重点突出，不要太单调，也不页面色彩的平衡，重点突出，不要太单调，也不要太花里胡哨；要太花里胡哨；页面不宜过长，不便于观察；页面不宜过长，

6、不便于观察；选用的图像内容要恰当，应该有助于内容的展开；选用的图像内容要恰当，应该有助于内容的展开；适当使用动画可以增加网页页面的美观和生动；适当使用动画可以增加网页页面的美观和生动；等等等等武汉科技大学城市学院武汉科技大学城市学院收集素材网上下载一些材料，特别是适用的图片网上下载一些材料，特别是适用的图片或者从一些光盘的资料库、图片库中挑选，或者从一些光盘的资料库、图片库中挑选，在本例中：在本例中：背景采用文件背景采用文件bg.gif；动画采用文件动画采用文件0861.gif；为了使文字比较美观，采用艺术字表现文字为了使文字比较美观，采用艺术字表现文字可以预先在可以预先在Word软件或软件或

7、PowerPoint软件中制作好，以备软件中制作好，以备使用使用艺术字被粘贴到网页中将变成一张图片艺术字被粘贴到网页中将变成一张图片素材选用的内容在网页制作过程中可以不断改素材选用的内容在网页制作过程中可以不断改变，以期达到最好的效果。变，以期达到最好的效果。武汉科技大学城市学院武汉科技大学城市学院 背景用的bg.jpg动画用的0861.gif用艺术字写的标题文字用艺术字写的左右用文字收集素材武汉科技大学城市学院武汉科技大学城市学院注意事项一般来说这些素材所涉及的文件应该放在同一般来说这些素材所涉及的文件应该放在同一个子目录以及它的下级子目录中一个子目录以及它的下级子目录中便于调用和管理便于调

8、用和管理便于该网页的浏览便于该网页的浏览便于向便于向Web Server上传发布上传发布武汉科技大学城市学院武汉科技大学城市学院5.3 网页中的文本格式与超链接 文本的输入;关于软回车和硬回车文本的粘贴;超连接的类型:内部链接：同一站点内不同页面之间的超级链接;外部链接：当前页面链接到Internet上其他站点;书签（锚点）链接：链接到该网页自身某个特定位置;热区的制作和链接;链接路径：网址或本地链接的文件夹或文件名。武汉科技大学城市学院武汉科技大学城市学院添加文本创建文本插入特殊文本元素换行符、水平线、特殊符号、段落缩进空格和注释编辑文本 添加项目列表和编号列表 武汉科技大学城市学院武汉科技

9、大学城市学院5.3.2 字符格式标记1、设置字体2、添加字体3、设置大小4、设置颜色5、设置样式6、段落格式武汉科技大学城市学院武汉科技大学城市学院2、添加字体的过程武汉科技大学城市学院武汉科技大学城市学院5.4网页中的图像与多媒体5.4.1 在网页中插入图像5.4.2 为图像增加替代文本5.4.3 图像处理5.4.4 插入网页背景图5.4.5 在网页中加入多媒体武汉科技大学城市学院武汉科技大学城市学院网页布局的原则 醒目性：指用户把注意力集中到网页的内容创造性：有鲜明个性，有新的创意造型性：维持整体外型上的稳定感和均衡性明快性：指准确、快速转达网站的构成内容可读性：指网页的内容让人明了归结为统一、协调、流动、强调、均衡。武汉科技大学城市学院武汉科技大学城市学院谢谢！武汉科技大学城市学院武汉科技大学城市学院