第1章 网页制作初识

21世纪高等院校规划教材网页设计与制作实用技术（第二版） 主编齐建玲杨艳杰 副主编赵丽王欢殷生斗 中国水利水电出版社www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com通过本章学习，应该掌握以下内容：认识网页构成网页的基本要素制作网页的基本工具美化网页的基本工具网页制作的基本步骤第1章网页制作初识www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.1初识网页和网站1.1.1网页与网站的概念1．网页网页(web)是网站上的某一个页面，它是一个纯文本文件，是向访问者传递信息的载体。2．网站网站(Website)是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页集合。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.1.2浏览网页的工具——浏览器浏览器是用于打开网页的软件。IE浏览器傲游浏览器世界之窗浏览器火狐狸浏览器Opera浏览器GreenBrowser浏览器360安全浏览器腾讯TT浏览器搜狗浏览器www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1．网址(URL)网址即网页地址，是用于定位某一网页的一串字符。例如搜狐网的网址为：http://www.sohu.com2．主页主页是一个网站的核心。进入该网站之后，首先映入眼帘的是网站的主页，也叫首页。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.1.3网页的类型1．静态网页静态网页是基于HTML和HTTP底层技术编写的HTML文档。注意：静态网页并非是没有动画的页面2．动态网页动态网页是由网页应用程序反馈至浏览器上生成的网页，它是服务器与用户进行交互的界面。一般采用ASP、JSP等技术www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.2一个校园网的制作示例1.2.1主要网页画面1.2.2网页的基本功能1.3网页的基本要素1.3.1文本文本是网页发布信息所用的主要形式。由文字制作出的网页占用空间小，当用户浏览时，可以很快的打开；文本能包含更多的信息，并更能准确地表达信息的内容和含义。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com文本性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等。1．标题一个网页通常都有一个标题，表明本网页的主要内容。标题是否醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。网页中的文字不能太大或太小。太大会使得一个网页信息量变小，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。2．字号www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果。应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不同的字型。但在网页制作上却要慎重。因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就无法得到你预想的浏览效果，甚至适得相反。如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。3．字型www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.3.2表格当文本内容较多时，可以利用表格形式来实现。表格是在网页上的一行或多行单元格，用来组织网页的布局或系统地布置数据，用户可以放置任何东西在表格的单元格中，包括文字、图形和表单等。表格具有容量大、结构严谨和效果直观等多个优点，是网页中不可缺少的 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 或总结工具。表格还可以用来控制网页中信息的布局方式。许多大型的网站都是使用表格来进行页面布局的,使页面看起来更加直观和有条理。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.3.3图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用：www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1．菜单按钮网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。2．背景图形为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。背景图可以使网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com3．动画动画在网页中的作用是有效地吸引访问者更多的注意。用户在设计制作网页时可以通过在页面中加入动画使页面更加活泼www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.3.4超链接超链接是从一个网页指向另一个目的端的链接，超链接的目的端可以是网页，也可以是图片、电子邮件地址、文件和序等。当网页访问者单击页面中某个超链接时，将根据自身的类型以不同的方式打开该目的端。超链接的标志有文字和图形两种。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.3.5交互功能Internet区别其他媒体的一个重要标志就是它的交互功能。网页的交互功能其他媒体是无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.3.6音频和视频音频和视频也是网页的一个重要组成部分，尤其是多媒体网页，更是离不开音频和视频。一般来说，不要使用音频文件作为背景音乐，那样会影响网页的下载速度。但可以在网页中添加一个打开音频文件的链接，使声音变得可以控制。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.4网页制作和美化工具HTML（HypertextMarkupLanguage）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文档的超链接组成。1.4.1网页制作工具1．超文本标识语言（HTML）www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comDreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。Dreamweaver支持动态HTML，并采用了RoundtripHTML技术，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。2．Dreamweaverwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comFrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 ，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。3．FrontPagewww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comPhotoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。1.4.2网页美化工具1．Photoshopwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comFireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 。作为一个图像处理软件，Fireworks能够自由地导入多种格式的图像进行处理。Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。2．Fireworkswww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comFlash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 ，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。3．Flashwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com1.5网页制作的基本步骤网站定位要小，内容要精。如果要制作一个包罗万象的站点，把所有精彩的东西都放在上面，结果往往会事与愿违，给人的感觉是没有主题，没有特色，样样有，却样样都很肤浅。网站的题材最好选自己擅长或者喜爱的内容。兴趣是制作网站的动力，没有热情，很难设计制作出优秀的网站。1.5.1网站定位www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com进行网站的整体规划也就是组织网站的内容和设计其结构。组织网站的内容可以从两个角度来考虑。从设计者的角度来考虑，可以依据被描述对象的组织机构、类别划分等来组织内容；从浏览者的角度来考虑，就应该将各种素材依据浏览者的需要进行内容分类，以便浏览者可以快捷地获取所需要的信息及其相关内容。1.5.2整体规划www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com合理的结构设计对于网站的规划也是至关重要的。以下是三种常用的结构类型。①层状结构层状结构类似于目录系统的树型结构，www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com二级标题一级标题页面7页面6页面5页面4页面3页面2页面1主页②线性结构线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com③Web结构Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com网页布局决定网页是否美观。合理的布局，可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排网页空间，优化网页的页面效果和下载速度。1.5.3网页设计与制作1．网页的布局（1）π型布局（2）T型布局（3）“三”型布局（4）框架布局（5）POP型布局（6）Flash型布局www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等动态内容。静态网页仅仅用来被动地发布信息，而不具有任何交互功能，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：2．静态网页的设计与制作www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太3长的一页可以使用内部链接解决。（3）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com（4）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载。（5）底色或墙纸必须与文字对比强烈，以易于阅读。如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。（6）不要把图片白色当作透明，要知道别人的系统不一定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。一个真正的网站，不仅应该实现传统媒体的电子化，给用户提供需要的内容，而且还应该做更多的事情，完成比页面浏览更高层次的需求，例如收集信息、数据传递、数据存储以及系统维护等。3．为网页的添加动态效果www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。1.5.4测试网页www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的。1.5.5网页上传发布www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com网站的宣传和推广一般有两种途径和方法。一是通过传统媒体进行广告宣传；另一是利用Internet自身的特点向外宣传。可用来宣传的传统媒体包括：电视、广播、报纸、广告牌、海报和黄页等。。在Internet上宣传网站的方法也是多种多样的，如可以将网址和网站信息发布到搜索引擎、网上黄页、新闻组、邮件列表上进行宣传推广，也可以与其他同类网站交换宣传广告。1.5.6网站的宣传与推广www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com现在的网站注重信息的不断更新和交互性，只有这样才能吸引更多的浏览者来访问和参与。如何知道哪些网页内容需要调整、更新和修改，网页需要增加那些内容呢？这些不能靠主观臆断来确定，而是需要得到访问者的反馈意见，也可根据不同网页的被访次数来 分析 定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析 。获得用户反馈信息的方法很多，常用的有计数器、留言板、调查表等，也可以建立系统日志来记录网页的被访情况。1.5.7网站的反馈与评价www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com网站要注意经常维护更新内容，保持内容的新鲜，不要做好就放到服务器永远不变了，只有不断地补充、更新内容，才能够吸引浏览者。维护更新时可以充分利用Dreamweaver提供的模板和库技术，以提高工作效率。1.5.8网站的更新与维护www.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comENDwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.comwww.189288.comwww.189286.comwww.189287.comwww.oemgc.comwww.oemdg.com