第1章 网页设计制作概述

网页设计与制作教程(第4版）第1章网页设计制作概述•一网页、网站的概念•二Web标准•三网站的规划与设计•四网站开发工作流程•五网站策划书撰写要点•六常用网页制作软件•七实训1.1.1网页、网站和主页网页（WebPage）是存放在Web服务器上供客户端用户浏览的文件，可以在Internet上传输。网页是按照网页文档规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建，能将文字、图片、声音等各种多媒体文件组合在一起，这些文件被保存在特定计算机的特定目录中。HTML语言（HyperTextMarkupLanguage超文本标记语言。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。1.1网页、网站的概念•如果在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址所指向的网络服务器，并出现一个默认的网页（一般为index.html或default.html），这个最先打开的默认页面就被称为“主页”或“首页”。1.1.2静态网页和动态网页静态网页指客户端的浏览器发送URL请求给服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。其页面的内容使用的仅仅是标准的HTML代码，静态网页通常由纯粹的HTML/CSS语言编写。动态网页技术根据程序运行的区域不同，分为客户端动态技术与服务器端动态技术。客户端动态技术不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入到网页中。服务器发送给浏览者后，网页在客户端浏览器上直接响应用户的动作。常见的客户端动态技术包括JavaScript、ActiveX和Flash等。1.1网页、网站的概念1.2.1Web标准的概念Web标准不是某一种标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为三类：结构化标准语言主要包括XHTML和XML，表现标准语言主要为CSS，行为标准主要包括对象模型W3CDOM、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。1.2Web标准内容、结构和表现内容、结构和表现是一个网页必不可少的组成部分。其中，内容是页面传达信息的基础，表现使得内容的传达变得更加明晰和方便，而结构则是内容和表现之间的纽带。一.内容内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。其中不包括修饰的图片、背景音乐等。为了更好地理解，举一个实例的例子。下面就是一个页面的内容部分。•生查子·元夕欧阳修去年元夜时①，花市灯如昼②。月到柳梢头，从约黄昏后。今年元夜时，月与灯依旧。不见去年人，泪满春衫袖。注释①元夜：正月十五为元宵节。这夜称为原夜、元夕。②花市：繁华的街市。赏析这是首相思词，写去年与情人相会的甜蜜与今日不见情人的痛苦，明白如话，饶有韵味。词的上阕写“去年元也”的事情，花市的灯像白天一样亮，不但是观灯赏月的好时节，也给恋爱的青年男女以良好的时机，在灯火阑珊处秘密相会。“月到柳梢有，人约黄昏后”二句言有尽而意无穷。柔情密意溢于言表。下阕写“今年元夜”的情景。“月与灯依旧”，虽然只举月与灯，时机应包括二三句的花和柳，时说闹市佳节良宵与去年一样，景物依旧。下一句“不见去年人”“泪满春衫袖”，表情极明显，一个“满”子，将物是人非，旧情难续的感伤表现的淋漓尽致。•注意：页面的内容之包含所要传达的基本信息，不包含任何修饰的成分，也不包含任何布局和排版的部分。•二.结构虽然在上图中已经完全包括了页面所有要传达的信息，但是这些信息简单地罗列在一起，难于阅读，内容的信息也不能很清晰地传达给阅读者。将上图所示的页面内容进行整理，分成文章标题、作者、文章内容、段落、段落标题、段落内容、列表等各个部分。•三．表现以上虽然从结构上对页面内容进行了分区，但是页面内容的外光并没有改变。“文章标题”、“作者”、“文章内容”等各个部分仍让时一样的字体，一样的颜色，而且内容还依然是简单地罗列在一起。要让阅读者能更好地阅读页面内容，就需要设置内容部分的字体样式、对齐方式、背景修饰等，所有这些外观的效果就成之为表现。•Ｗeb标准的另一个部分行为就是对内容的交互及操作效果。举例来说，内容好比人的身体；结构则标明了身体的各个部分（哪里是头，哪里是脚）；表现好比装扮身体的衣服；行为就是走、跑、跳等动作。1.2.2建立Web标准的目的简单地说，建立Web标准的目的是：•提供最大利益给最多的网站用户；•确保任何网站文档都能够长期有效；•简化代码，降低建设成本；•让网站更容易使用，能适应更多不同用户和更多网络设备；•当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。1.2Web标准1.2.3采用Web标准的优点1．客户端的优点采用Web标准后，客户端的好处主要体现在以下方面：文件下载与页面显示速度更快；内容能被更多的用户所访问2．服务器端的优点采用Web标准后，服务器端的好处主要体现在以下方面：更少的代码和组件，容易维护；带宽要求降低（代码更简洁），成本降低；更容易被搜寻引擎搜索到；1.2Web标准在建设网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的建设方案，这就是网站的规划与设计。网站的规划与设计一般应遵循以下三个原则：•最大限度地满足用户需要；•最有效地进行资源利用；•使用方便，界面友好，运行高效；常规的规划与设计方法一般有以下三种：自顶向下、自底向上、不断增补的设计方法。1.3网站的规划与设计典型的Web开发工作流程包括以下几个阶段。1）规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。2）设置开发环境：包括选择Web应用程序服务器、利用Dreamweaver网页制作软件定义站点及数据源。3）规划页面设计和布局：包括用绘画工具创建页面和界面模型，以及使用Dreamweaver、FrontPage布置页面。4）创建内容资源：包括使用Fireworks、Photoshop和Flash创建图像、视频等。5）组合、测试和部署站点：包括使用Dreamweaver设置文本格式、编译资源，测试代码将站点发布到服务器上。6）维护站点：包括使用Dreamweaver保持内容的更新。1.4网站开发工作流程1.4.7案例一：规划曙光大学网站【案例综述】规划曙光大学网站的结构。【案例展示】本书围绕着一个完整网站的制作作为主要讲解案例，其站点规划结构图及其含义如图1-1所示。1.4网站开发工作流程网站策划书应该尽可能地涵盖网站规划中的各个方面，写作要科学、认真、实事求是。以最常见的企业网站为例，介绍网站策划书的撰写要点。1．前期调研分析2．网站的功能定位3．网站技术解决方案4．网站内容规划5．网页设计6．网站维护7．网站测试8．网站发布与推广9．网站设计日程表10．费用明细1.5网站策划书撰写要点1.6常用网页制作软件1.6.1网页制作工具网页制作工具分为“可视化”和“非可视化”两大类。“可视化”网页编辑器的优点是直观、使用方便、容易学习，在其中制作网页与在Word中编辑相似，缺点是难以精确达到与浏览器完全一致的显示效果。“非可视化”的网页编辑器，因为是用HTML代码来设计的，所以控制精确，但是，工作效率太低。1．Dreamweaver2．FrontPage3．AdobeGoLive4．HomeSite5．VisualStudio2005/20081.6常用网页制作软件1.6.2网页图形图像处理工具使用网页图形图像处理工具可以设计、处理适合网页的图形图像。1．Fireworks2．Photoshop3．CorelDRAW1.6常用网页制作软件1.6.3网页动画制作与特效工具随着网络速度的提高，越来越多的网页中使用了动画效果，这些动态显示的画面不仅吸引了浏览者的注意力，而且也给原本较呆板的画面增添了不少生机。1．Flash2．UleadGIFAnimator1.6常用网页制作软件1.6.4网页上传工具制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。1．CuteFTP2．FlashFXP3．LeapFTP4．其他上传工具（1）UploadNow!上传工具（2）WS-FTP上传工具Dreamweaver软件自身也具有上传网页的功能。1.6常用网页制作软件1.6.5网页设计工具的发展动向2005年4月18日，全球知名的应用软件公司Adobe以34亿美元的价格收购了Macromedia公司，这次收购代表着多媒体产业领域的融合。随着Adobe公司对Macromedia公司进行全新的整合，势必推出更加强大的图形网页应用软件，为图形处理与网页制作开创出新的空间。目前网页制作中的HTML代码与图片都是单独制作的，需要美工人员与网页制作人员共同完成，但是，随着两家公司的合并，极有可能推出新的软件，实现图片与网页的一体化操作，提高网页制作的效率。另外，Fireworks和ImageReady在未来的地位，也很有可能被已经强势的Photoshop和Flash取代。实训一：规划“爱家美食”网站【实训综述】规划“爱家美食”网站的结构。【实训展示】网站的导航条，读者可在此基础上画出网站的栏目结构图。1.7实训1．简述网页、网站和主页的异同。2．Web标准主要由哪3部分组成？分别解释其含义。3．简述网站开发的工作流程。4．简述怎样撰写网站策划书？5．常用的网页制作工具有哪些？分别有哪些特点？1.8习题