网站与网页的基本知识要点课件

第一讲——网站与网页的基本知识第一讲——网站与网页的基本知识1课程介绍教学计划参考书目

《DreamweaverMXFlashMXFireworksMX网页设计培训教程》西安电子科技大学出版社乘方工作室《DreamweaverMX2004完美网页设计与制作》中国青年出版社姜楠《PhotoshopCSDreamweaverMX2004FlashMX2004网页设计黄金搭档》中国青年出版社邹婷等课程介绍教学计划2Internet

Internet起源于美国国防部的ARPANET网。目前Internet已成为一个巨大信息资源，1990年，我国正式向Internet管理中心注册了区域名CN，并于1994年开通了Internet的全功能服务。

Internet

Internet起源于美国国防部的ARPA3基本术语网页(WebPage)：由文字、图片、动画、超链接等组成的，通常以html或htm作为文件的扩展名,可以在www网上传输，并被浏览器认识和翻译成页面显示出来的文件。网站(WebSite)：网站就是网页的集合其中包括一个首页和若干个分页。网站设计者先把整个网站结构规划好，然后在分别制作各个网页。首页(HomePage)URL(Uniformresourcelocator)Html(HypertextMarkupLanguage)：超文本标记语言是描述性解释语言，需要在浏览器解释执行，主要用于创建WEB文档。由于它编写制作非常简单，在Internet领域中被广泛应用，成为WWW的核心技术之一。

基本术语4HTTP：超文本传输协议，它是一种常用的网络通讯协议。若想链接到某一特定的网页时，就必须通过HTTP协议。FTP：文件传输协议。与HTTP协议相同，它也是URL地址使用的一种协议名称，以指定传输某一种互联网资源。HTTP协议用于链接到某一网页，而FTP协议则是用于上传或是下载文件的情况。HTTP：超文本传输协议，它是一种常用的网络通讯协议。若想链5FrontpageDreamweaver系Macromedia公司的集网页制作和网站管理的所见即所得的网页制作工具。两者的区别FrontPage占领的是中级市场，比较重视网页的开发效率、易学易用。而Dreamweaver主攻的是网页高级设计市场，所强调的是更强大的网页控制、设计能力及创意的完全发挥。Dreamweaver在功能的完善，使用的便捷上比FrontPage要强些。它囊括了FrontPage的所有基本操作，并开发了许多独具特色的设计新概念，诸如行为（Behaviors）、时间线（Timeline）、资源库（Library）等，支持层叠式样表（CSS）。

网页制作工具Frontpage网页制作工具6Dreamweaver与FrontPage比较，有几下几点优势：1.产生的垃圾代码少，网页可读性好，可以提高网页浏览速度；

2.通过层功能，可以快速制作出复杂的页面，图片定位更容易；

3.可基本解决IE与Netscape的兼容性；

4.设计思路广，内涵丰富，创作随意性强，可充分展现你的创意。Dreamweaver与FrontPage比较，有几下几点优7网页美化工具

为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。1．Photoshop

Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。2．Fireworks

Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。用户可以从http://www.／站点下载该软件。网页美化工具83．Flash

Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。3．Flash9网页制作的基本步骤(一）网站的整体规划和设计进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。网页制作的基本步骤(一）网站的整体规划和设计10主题和名称的确定主题要小而精。定位要小，内容要精。题材最好是你自己擅长或者喜爱的内容。题材不要太滥或者目标太高。定位你的网站CI形象网站标志logo设计网站的标准色彩一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。设计网站的标准字体。设计网站的宣传标语。主题和名称的确定11确定栏目和版块；一定记住要紧扣你的主题设定一个可以双向交流的栏目确定网站的目录结构和链接结构不要将所有文件都存放在根目录下。按栏目内容建立子目录。每个主目录下都建立独立的images目录。目录的层次不要太深。其它需要注意的还有：

1.不要使用中文目录；网络无国界，使用中文目录可能对网址的正确显示造成困难。

2.不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆。

3.尽量使用意义明确的目录；4.网站的首页应该提供整个站点各页面的导航。5.二级页面应一一对应首页的各栏目，而且应该包含到确定栏目和版块；126.同级页面、下一级页面和首页的链接。7.网站中还应有一定的交互信息，如留言簿、Email链接、信息反馈表。网站的目录结构6.同级页面、下一级页面和首页的链接。网站的目录结构13①层状结构

层状结构（如图1.8所示）类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。主页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题图1.8层状结构①层状结构主页页面1页面2页面3页面4页面5页面6页面714②线性结构线性结构（如图1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。主页页面1页面2页面3图1.9线性结构②线性结构主页页页页图1.9线性结构15③Web结构Web结构（如图1.10所示）类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。主页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题图1.10Web结构页面6③Web结构主页页面1页面2页面3页面4页面5页面7页面161．收集整理资料2．准备素材3．内容规划(二）网页设计与制作1．静态网页的设计与制作

一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：1．收集整理资料17（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。（3）切勿以800×600以上的分辨率设计网页，常用的分辨率是640×480及800×600。现在国内的站点基本上都是800×600，但是如果主要是面向国外访问者的站点，建议使用640×480。（4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据18（6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。（7）不要把图片白色当作透明，要知道别人的系统不一定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。2．为网页的添加动态效果

静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。（6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要19（三）

测试网页

当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后,方可正式在Internet上发布。在进行功能性测试和完整性测