网页设计与制作1ppt课件

.,了解网页,一、网页发展历史,网页的发展史就是“超文本”的发展史。天才的构想：范内瓦布什在二战期间，他担任罗斯福总统的科学顾问，需要处理很多的高科技数据，这一痛苦的经历激发他产生了一个新的概念超文本。但他那天才的构想深深影响了后来者提出超文本Hypertext，并且逐渐体现在网页中。追溯网页雏形1969年，IBM公司开发了一种文档描述语言，用来解决不同系统中文档格式不同的问题。IBM把自己这种标识语言称作通用标记语言GenelizedMarkupLanguage，即GML)。GML是IBM许多文档系统的基础，包括Script和Bookmaster。,.,当时IBM并没在GML上做太多工作，直到1986年国际标准化组织ISO认为IBM提出的概念很好，并发布了为生成标准化文档而定义的标记语言标准ISO8879，称为新的语言SGML，即标准通用标记语言。这就是只有简单文字的网页时代，因为没有体现超文本的真正含义，使用户间相互访问信息显得很复杂。而完全将超文本应用到网页上，使得网页变得如此精彩的是万维网的缔造者蒂姆伯纳斯李蒂姆伯纳斯李，英国人，生于伦敦的一个科学世家，是一位富于想像力的研究人员。世界上的许多发明创造往往都有某种偶然性。起初蒂姆伯纳斯李只是为了设计一个供同事们交换资料的线上空间，提出了全球超文本项目计划，目的是能够将各自信息通过超文本传输实现网络共享。一年后，蒂姆伯纳斯李选择了CERN使用的一组SGML的DTD标记标签，在最早的Web浏览器和编辑器NEXUS中，他使用了这些标签和样式表进行排版，并增加了最重要的功能链接，这就是HTML的前身。,.,1991年，蒂姆伯纳斯李在CERN定义了HTML语言的第一个规范，作为万维网的一个组成部分。HTML语言发展很快，已历经HTML1.0、HTML2.0和HTML3.0、HTML4.0多个版本，现在HTML5.0正在测试，但是，目前多数人认为，HTML还不稳定。此外，由于HTML对超链接已支持不足，以及缺乏空间立体描述，处理图形、图像、音频、视频等多媒体能力较弱，图文混排功能简单，没有时间信息，不能表示多种媒体的同步关系，这势必影响HTML的大规模应用以及用于复杂的多媒体数据处理。XML的出现HTML像一个易用的阅读器，简单实用却不精确。XML则不同，它的产生就是来精确地表现信息的各种含义。XML研究的目标是一种更容易解析（因为XML的语法更加严格）的HTML语言。XHTML力求更好地分离内容与表示。XML1.0W3C推荐标准基本上是对HTML4的改写，XML语言无疑将为Web服务掀起下一次IT浪潮，不过，现在XML还需要用XSL或CSS等技术转化成HTML代码，因为大多数浏览器还不支持它，而且XML也还有很多问题。所以HTML短期内应该还是有作为的，而且另一方面，HTML也可以作为XML的补充，HTML语言注重于页面的表现，XML侧重于深层的内容，二者并不矛盾，相辅相成。,.,二、网页的分类按照用途分类:个人网页单纯按照兴趣制作Club网页由共同爱好者组成的团体企业网页以宣传为目的购物网页成为因特网商店按照技术分类:静态网页静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。如html、Flash、JavaScript、VBScript等等，它们不会改变的。动态网页它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。,.,文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。所以，文字性网页一定要注意编排，包括标题的字型、字号，内容的层次样式，是否需要变换颜色进行点缀等等。,网页构成的几个基本元素和注意事项,一、文字,.,1标题一个网页通常都有一个标题，表明本网页的主要内容。标题是醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。2字号网页中的文字不能太大或太小。太大会使得一个网页信息量变，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。3字型在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果。应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不同的字型。但在网页制作上却要慎重。因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就无法得到你预想的浏览效果，甚至适得相反。如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。当文本内容较多时。可以利用表格形式来实现。,.,二、图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用。1菜单按钮网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。2背景图形为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。背景图可以使网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，访问量比较大网站一般都不设置背景图形。,.,三、链接标志链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。四、交互功能Internet区别其他媒体的一个重要标志就是它的交互功能。例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就需要将自己的决定通过Internet告诉这个网站，网站能够自动对该产品的数据库进行检索，及时回应有还是没有，数量、规格、价格等信息。如果用户选择确定，那么网站能够返回确认信息。像这种交互功能其他媒体是无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。,.,网页制作和美化工具网页制作工具1超文本标识语言（HTML）HTML（HypertextMarkupLanguage）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文档的超链接组成。2FrontPageFrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。,.,3DreamweaverDreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。另外，Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页，所以Dreamweaver是网页设计者的首选工具。Dreamweaver支持动态HTML，并采用了RoundtripHTML技术，从而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程中，动态HTML技术能够让用户轻松设计复杂的交互式网页，产生动态效果；而RoundtripHTML技术则可以真正支持HTML源编辑模式，不会产生冗余代码，使网页渲染速度加快。因此，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。,.,网页美化工具为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。1PhotoshopPhotoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。2FireworksFireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。用户可以从站点下载该软件。,.,3FlashFlash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。网页制作的基本步骤整体规划进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。,.,层状结构层状结构（如图1.8所示）类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。,.,线性结构线性结构（如图1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。,.,Web结构Web结构（如图1.10所示）类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。,主页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,图1.10Web结构,页面6,.,1收集整理资料2准备素材3内容规划网页设计与制作1静态网页的设计与制作在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：,.,（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。（3）分辨率应当根据实际需求设定。（4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。,.,（6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。2为网页的添加动态效果静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。,.,测试网页当网页设计人