网页基础知识.pptx

1、21世纪高等院校规划教材,网页设计与制作实用技术,齐建玲 主编郭铁柱 刘博涛 何丽娟 副主编,中国水利水电出版社,通过本章学习，应该掌握以下内容：1.认识网页构成网页的基本要素制作网页的基本工具美化网页的基本工具网页制作的基本步骤,第1章 网页制作初识,1.1一个校园网的制作示例,主要网页画面网页的基本功能1.2网页的基本要素1.2.1 文字文字是网页发布信息所用的主要形式，由文字制作 出的网页占用空间小，当用户浏览时，可以很快的展 现在用户面前。另外，文字性网页还可以利用浏览器 中“文件”菜单下的“另存为”功能将其下载。但是 没有编排点缀的纯文字网页，又会给人带来死板不活 泼的感觉，使得人们

2、不愿意再往下浏览。,文字性网页一定要注意编排，包括标题得字型字,号，内容的层次样式，是否需要变换颜色进行点缀 等。标题一个网页通常都有一个标题，表明本网页的主要内 容。标题是否醒目，是吸引浏览者能否注意的一个关 键，因此对标题的设计是很重要的。字号网页中的文字不能太大或太小。太大会使得一个网 页信息量变小，太小又使人们浏览时感到费劲。一个 优秀网页中的文字，应统筹规划，大小搭配适当，给 人以生动活泼之感觉。,在网页适当的位置采用不同的字体字型，也能使 网页产生吸引人的效果。应该注意的是在报刊上变换 字体字型非常普遍，它可以在不同的地方使用不同的 字型。但在网页制作上却要慎重。因为有些美丽的字

3、型在制作网页的计算机上有，但将来别人浏览你的网 页时，浏览者的计算机上未必装有这种字体。这样浏 览者就无法得到你预想的浏览效果，甚至适得相反。如果只是标题或少量的文字，可以将采用的特殊 字体制作成图形方式，就可避免其他浏览者看不到的 尴尬局面了。,3字型,1.2.2表格,当文本内容较多时，可以利用表格形式来实 现。表格是在网页上的一行或多行单元格，用来 组织网页的布局或系统地布置数据，用户可以放 置任何东西在表格的单元格中，包括文字、图形 和表单等。表格具有容量大、结构严谨和效果直 观等多个优点，是网页中不可缺少的记录或总结 工具。表格还可以用来控制网页中信息的布局方式许。多大型的网站都是使用

4、表格来进行页面布局的,使页面看起来更加直观和有条理。,1.2.3图形,这里的图形概念是广义的，它可以是普通的绘制图 形，可以是各种图像，还可以是动画。一幅优秀的网 页除了有能吸引浏览者的文字形式和内容外，图形的 表现功能是不能低估的。网页上的图形格式一般使用 JPEG和GIF，这两种格式具有跨平台的特性，可以在 不同操作系统支持的浏览器上显示。图形在网页中通 常有如下应用：,1菜单按钮,网页上的菜单按钮有一些是由图形制作，通常有 横排和竖排两种形式，由此可以转入不同的页面。2背景图形为了加强视觉效果，有些网页在整个网页的 底层放置了图形，称作背景图。背景图可以使网 页更加华丽，使人感到界面友好

5、。但由于这是一 个比较大的图形，需要占据较大的空间，致使网 页的显示速度明显变慢，所以，近期的网页以及 比较著名的访问量比较大网站一般都不设置背景 图形。,1.2.4链接标志,网页上的菜单按钮有一些是由图形制作，通 常有横排和竖排两种形式，由此可以转入不同的 页面。链接是网页中一种非常重要的功能，是网 页中最重要、最根本的元素之一。通过链接可以 从一个网页转到另一个网页，也可以从一个网站 转到另一个网站。链接的标志有文字和图形两种制。作一些精美的图形作为链接按钮，使它和整个网 页融为一体。,1.2.5交互功能,Internet区别其他媒体的一个重要标志就是 它的交互功能。网页的交互功能其他媒体

6、是无法 比拟的。通常网页的交互功能都是利用表单来实现的表。单是网页中站点服务器处理的一组数据输入域当，访 问者单击按钮或图形来提交表单后，数据就会传 送到服务器上。,1.3网页制作和美化工具,1.3.1网页制作工具1超文本标识语言（HTML）HTML（Hypertext Markup Language）是一种 专门用于Web页制作的编程语言，用来描述超文本 各个部分的内容，告诉浏览器如何显示文本，怎样 生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文 档的超链接组成。,Dreamweaver是由Macromedia公司推出的一款 在网页制作方面大众化的软件，它具有可视化

7、编辑 界面，用户不必编写复杂的HTML源代码就可以生成 跨平台、跨浏览器的网页，不仅适合于专业网页编 辑人员的需要，同时也容易被业余网友们所掌握。Dreamweaver支持动态HTML，并采用了 Roundtrip HTML技术，Dreamweaver是一种可以 满足多层次需求、功能强大的可视化专业级网页设 计及制作工具。,2Dreamweaver,FrontPage是由Microsoft公司推出的新一代 Web网页制作工具。FrontPage使网页制作者能够更 加方便、快捷地创建和发布网页，具有直观的网页 制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint

8、等软件的 界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。,3FrontPage,1.3.2网页美化工具,1PhotoshopPhotoshop是由Adobe公司开发的图形处理软 件，它是目前公认的PC机上最好的通用平面美术设 计软件，它功能完善、性能稳定、使用方便，所以 在几乎所有的广告、出版、软件公司，Photoshop 都是首选的平面制作工具。,Fireworks是由Macromedia公司开发的图形处理 工具，它的出现使Web作图发生了革命性的变化。因 为Fireworks是第一套专

9、门为制作网页图形而设计的 软件，同时也是专业的网页图形设计及制作的解决方 案。作为一个图像处理软件，Fireworks能够自由地 导入多种格式的图像进行处理。Fireworks还能够自动切割图像、生成光标动态 感应的JavaScript程序等等，而且Fireworks具有强 大的动画功能和一个相当完美的网络图像生成器。,2Fireworks,Flash是美国Macromedia公司开发的矢量图形编 辑和动画创作的专业软件，它是一种交互式动画设计 工具，用它可以将音乐、声效、动画以及富有新意的 界面融合在一起，以制作出高品质的网页动态效果它。主要应用于网页设计和多媒体创作等领域，功能十分 强大和

10、独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学 动画演示、网上购物、在线游戏等的制作中。,3Flash,1.4网页制作的基本步骤,1.4.1网站定位网站定位要小，内容要精。如果要制作一个包罗 万象的站点，把所有精彩的东西都放在上面，结果 往往会事与愿违，给人的感觉是没有主题，没有特 色，样样有，却样样都很肤浅。网站的题材最好选自己擅长或者喜爱的内容。兴趣是制作网站的动力，没有热情，很难设计制作 出优秀的网站。,进行网站的整体规划也就是组织网站的内容和 设计其结构。组织网站的内容可以从两个角度来考虑。从设计 者的角度来考虑，可以依据被描述对象的组织机构类

11、、别划分等来组织内容；从浏览者的角度来考虑，就 应该将各种素材依据浏览者的需要进行内容分类以，便 浏览者可以快捷地获取所需要的信息及其相关内容。,1.4.2整体规划,合理的结构设计对于网站的规划也是至关重要的 以。下是三种常用的结构类型。层状结构层状结构类似于目录系统的树型结构，,主 页,页 面 1,页 面 2,页 面 3,线性结构,线性结构类似于数据结构中的线性表，用于组 织本身的线性顺序形式存在的信息，可以引导浏览 者按部就班地浏览整个网站文件。,主页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,页面6,Web结构,Web结构类似于Internet的组成结构

12、，各网页 之间形成网状连接，允许用户随意浏览。,1.4.3网页设计与制作,1静态网页的设计与制作通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等动态内 容。静态网页仅仅用来被动地发布信息，而不具有 任何交互功能，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美 观。对于网页的外观设计，提供以下建议：（1）不要先决定网页的外观，然后迫使自己去适 应它，应该根据网站的访问者对象、要提供的信息 以及制作目标得出一个最适合的网页架构。,每页排版不要太松散或用太大的字，尽量 避免访问者浏览网页时要作大幅度的滚动，对于篇 幅太长的一页可以使用内部

13、链接解决。切勿以800600以上的分辨率设计网页，常用的分辨率是640480及800600。现在国内 的站点基本上都是800600，但是如果主要是面向 国外访问者的站点，建议使用640480。不应在每页中插入太多的广告。相信任何 访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦 厌。,不要每页都采用不同的墙纸，以免每次转 页时都要花费过多的时间去下载。底色或墙纸必须与文字对比强烈，以易于 阅读。如果网页是文章式或是包含大量文字，不妨 在底色与文字的搭配上下些工夫，力求让访问者能 够舒适地阅读网页。不要把图片白色当作透明，要知道别人的 系统不一定把内定底色设

14、为白色，解决的办法除了 真的把该网页的底色设为白色之外，最好还是用图 片编辑工具将图片设为透明颜色。,静态网页制作完成后，接下来的工作就是为网页 添加动态效果，包括一些脚本语言程序和数据库程 序的设计，以及加入动画效果等。一个真正的网站，不仅应该实现传统媒体的电子 化，给用户提供需要的内容，而且还应该做更多的 事情，完成比页面浏览更高层次的需求，例如收集 信息、数据传递、数据存储以及系统维护等。,2为网页的添加动态效果,当网页设计人员制作完所有网站页面之后，需要 对所设计的网页进行审查和测试，测试内容包括功 能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到 最初的内容组

15、织设计目标，实现所规定的功能，读 者可方便快速地寻找到所需的内容。完整性测试就 是保证页面内容显示正确，链接准确，无差错无遗 漏。,1.4.4测试网页,网页设计好，必须把它发布到互连网上，否则网 站形象仍然不能展现出去。发布的服务器可以是远 程，也可以是本地，但必须支持ASP，因为动态程 序是建立在ASP基础上的。,1.4.5网页上传发布,网站的宣传和推广一般有两种途径和方法。一 是通过传统媒体进行广告宣传；另一是利用 Internet自身的特点向外宣传。可用来宣传的传统媒体包括：电视、广播、报纸 广、告牌、海报和黄页等。在Internet上宣传网站的方法也是多种多样的，如可以将网址和网站信息

16、发布到搜索引擎、网上黄 页、新闻组、邮件列表上进行宣传推广，也可以与 其他同类网站交换宣传广告。,1.4.6网站的宣传与推广,现在的网站注重信息的不断更新和交互性，只 有这样才能吸引更多的浏览者来访问和参与。如何 知道哪些网页内容需要调整、更新和修改，网页需 要增加那些内容呢？这些不能靠主观臆断来确定，而是需要得到访问者的反馈意见，也可根据不同网 页的被访次数来分析。获得用户反馈信息的方法很多，常用的有计数器留、言板、调查表等，也可以建立系统日志来记录网页 的被访情况。,1.4.7网站的反馈与评价,网站要注意经常维护更新内容，保持内容的新鲜不，要做好就放到服务器永远不变了，只有不断地补充、更新内容，才能够吸引浏览者。维护更新时可以 充分利用Dreamweaver提供的模板和库技术，以提 高工作效率。,1.4.8网站的更新与维护,E N D,