信息产业I技术培训指定教材网设计实用教程

信息产业IT技术培训指定教材网页设计实用教程耿强主编杜艳红刘建昌副主编中国青年出版社通过本章学习，应该掌握以下内容：认识网页构成网页的基本要素制作网页的基本工具美化网页的基本工具网页制作的基本步骤第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（（HypertextMarkupLanguage））是一一种专专门用用于Web页制制作的的编程程语言言，用用来描描述超超文本本各个个部分分的内内容，，告诉诉浏览览器如如何显显示文文本，，怎样样生成成与别别的文文本或或图像像的链链接点点。HTML文文档由由文本本、格格式化化代码码和导导向其其他文文档的的超链链接组组成。。网网页页制作作工具具1．超超文本本标识识语言言（HTML））Dreamweaver是由由Macromedia公司司推出出的一一款在在网页页制作作方面面大众众化的的软件件，它它具有有可视视化编编辑界界面，，用户户不必必编写写复杂杂的HTML源源代码码就可可以生生成跨跨平台台、跨跨浏览览器的的网页页，不不仅适适合于于专业业网页页编辑辑人员员的需需要，，同时时也容容易被被业余余网友友们所所掌握握。Dreamweaver支持持动态态HTML，并并采用用了RoundtripHTML技技术，，Dreamweaver是一一种可可以满满足多多层次次需求求、功功能强强大的的可视视化专专业级级网页页设计计及制制作工工具。。2．DreamweaverFrontPage是由由Microsoft公公司推推出的的新一一代Web网页页制作作工具具。FrontPage使网网页制制作者者能够够更加加方便便、快快捷地地创建建和发发布网网页，，具有有直观观的网网页制制作和和管理理方法法，简简化了了大量量工作作。FrontPage界面面与Word、、PowerPoint等软软件的的界面面极为为相似似，为为使用用者带带来了了极大大的方方便，，Microsoft公公司将将FrontPage封封装入入Office之中中，成成为Office家家族的的一员员，使使之功功能更更为强强大。。3．FrontPagePhotoshop是由Adobe公公司开发的的图形处理理软件，它它是目前公公认的PC机上最好好的通用平平面美术设设计软件，，它功能完完善、性能能稳定、使使用方便，，所以在几几乎所有的的广告、出出版、软件件公司，Photoshop都是首选选的平面制制作工具。。1.3.2网页页美化工具具1．PhotoshopFireworks是由Macromedia公司开发发的图形处处理工具，，它的出现现使Web作图发生生了革命性性的变化。。因为Fireworks是是第一套专专门为制作作网页图形形而设计的的软件，同同时也是专专业的网页页图形设计计及制作的的解决方案案。作为一一个图像处处理软件，，Fireworks能够自自由地导入入多种格式式的图像进进行处理。。Fireworks还能够自自动切割图图像、生成成光标动态态感应的JavaScript程序等等等，而且且Fireworks具有强强大的动画画功能和一一个相当完完美的网络络图像生成成器。2．FireworksFlash是美国Macromedia公司开开发的矢量量图形编辑辑和动画创创作的专业业软件，它它是一种交交互式动画画设计工具具，用它可可以将音乐乐、声效、、动画以及及富有新意意的界面融融合在一起起，以制作作出高品质质的网页动动态效果。。它主要应应用于网页页设计和多多媒体创作作等领域，，功能十分分强大和独独特，已成成为交互式式矢量动画画的标准，，在网上非非常流行。。Flash广泛应应用于网页页动画制作作、教学动动画演示、、网上购物物、在线游游戏等的制制作中。3．Flash1.4网网页制制作的基本本步骤网站定位要小，，内容要精精。如果要要制作一个个包罗万象象的站点，，把所有精精彩的东西西都放在上上面，结果果往往会事事与愿违，，给人的感感觉是没有有主题，没没有特色，，样样有，，却样样都都很肤浅。。网站的题材材最好选自自己擅长或或者喜爱的的内容。兴兴趣是制作作网站的动动力，没有有热情，很很难设计制制作出优秀秀的网站。。网网站定位进行网站的的整体规划划也就是组组织网站的的内容和设设计其结构构。组织网站的的内容可以以从两个角角度来考虑虑。从设计计者的角度度来考虑，，可以依据据被描述对对象的组织织机构、类类别划分等等来组织内内容；从浏浏览者的角角度来考虑虑，就应该该将各种素素材依据浏浏览者的需需要进行内内容分类，，以便浏览览者可以快快捷地获取取所需要的的信息及其其相关内容容。整整体规划合理的结构构设计对于于网站的规规划也是至至关重要的的。以下是是三种常用用的结构类类型。①层状结构层状结构类类似于目录录系统的树树型结构，，主页页面1页面2页面3②线性结构线性结构类类似于数据据结构中的的线性表，，用于组织织本身的线线性顺序形形式存在的的信息，可可以引导浏浏览者按部部就班地浏浏览整个网网站文件。。主页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题页面6③Web结构构Web结构构类似于Internet的的组成结构构，各网页页之间形成成网状连接接，允许用用户随意浏浏览。通常在进行行网页开发发时，首先先都进行静静态网页的的制作，然然后再在其其中加入脚脚本程序、、表单等动动态内容。。静态网页页仅仅用来来被动地发发布信息，，而不具有有任何交互互功能，它它是Web网页的重要要组成部分分。一个好的网网站首先是是内容丰富富，其次就就是网页设设计美观。。对于网页页的外观设设计，提供供以下建议议：（1）不要先决决定网页的的外观，然然后迫使自自己去适应应它，应该该根据网站站的访问者者对象、要要提供的信信息以及制制作目标得得出一个最最适合的网网页架构。。网网页设计与与制作1．静态网网页的设计计与制作（2）每页排版版不要太松松散或用太太大的字，，尽量避免免访问者浏浏览网页时时要作大幅幅度的滚动动，对于篇篇幅太长的的一页可以以使用内部部链接解决决。（3）切勿以800×600以上的分辨辨率设计网网页，常用用的分辨率率是640×480及800×600。现在国内内的站点基基本上都是是800×600，但是如果果主要是面面向国外访访问者的站站点，建议议使用640×480。（4）不应在每每页中插入入太多的广广告。相信信任何访问问者都不会会喜欢浏览览尽是些广广告的网页页，要考虑虑该页内容容与广告的的比例，广广告太多，，只会令人人烦厌。（5）不要每页页都采用不不同的墙纸纸，以免每每次转页时时都要花费费过多的时时间去下载载。（6）底色或墙墙纸必须与与文字对比比强烈，以以易于阅读读。如果网网页是文章章式或是包包含大量文文字，不妨妨在底色与与文字的搭搭配上下些些工夫，力力求让访问问者能够舒舒适地阅读读网页。（7）不要把图图片白色当当作透明，，要知道别别人的系统统不一定把把内定底色色设为白色色，解决的的办法除了了真的把该该网页的底底色设为白白色之外，，最好还是是用图片编编辑工具将将图片设为为透明颜色色。静态网页制制作完成后后，接下来来的工作就就是为网页页添加动态态效果，包包括一些脚脚本语言程程序和数据据库程序的的设计，以以及加入动动画效果等等。一个真正的的网站，不不仅应该实实现传统媒媒体的电子子化，给用用户提供需需要的内容容，而且还还应该做更更多的事情情，完成比比页面浏览览更高层次次的需求，，例如收集集信息、数数据传递、、数据存储储以及系统统维护等。。2．为网页页的添加动动态效果当网页设计计人员制作作完所有网网站页面之之后，需要要对所设计计的网页进进行审查和和测试，测测试内容包包括功能性性测试和完完整性测试试两个方面面。所谓功能性性测试就是是要保证网网页的可用用性，达到到最初的内内容组织设设计目标，，实现所规规定的功能能，读者可可方便快速速地寻找到到所需的内内容。完整整性测试就就是保证页页面内容显显示正确，，链接准确确，无差错错无遗漏。。1.4.4测试试网页网页设计好好，必须把把它发布到到互连网上上，否则网网站形象仍仍然不能展展现出去。。发布的服服务器可以以是远程，，也可以是是本地，但但必须支持持ASP，，因为动态态程序是建建立在ASP基础上上的。网网页上传发发布网站的宣传传和推广一一般有两种种途径和方方法。一是是通过传统统媒体进行行广告宣传传；另一是是利用Internet自身的特点点向外宣传传。