第3章网页设计与制作
教学目标
（1） 理解网页、网站、主页以及WWW服务器的基本概念；
（2） 掌握网页多媒体素材收集和制作的方法；
（3） 掌握HTML制作网页的方法；
（4） 初步掌握JavaScript制作网页的方法；
（5） 初步掌握Dreamweaver制作网页的方法。
互联网中的任何网站通常是由数十或数百，甚至成千上万的网页构成的。因此，建立网站就是要设计与制作各种网页。本章主要介绍网页、网站、制作网页素材等概念，以及分别使用HTML语言、JavaScript脚本和Dreamweaver可视化制作工具来制作网页。
3.1网页制作基础
网页设计与制作涉及许多内容，而每项内容对网页而言都是不可或缺的。本节主要介绍网站、网页、主页和网络服务器的概念，网页制作的方法和步骤，以及各种网页素材。
3.1.1网站、网页、主页和网络服务器1. 网站网站是指在互联网中根据一定规则，使用HTML、JavaScript、Dreamweaver等计算机语言与软件工具制作的相关网页集合。它是一种全新的交流工具，人们可以通过网站来发布（或接受）各种信息，也可以利用网站来提供（或获取）相关的网络服务。
网站是由互联网中一个或多个网络服务器上的许多数字化资源构成的。网站中通常包含大量的网页文件，这些网页文件之间由超链接技术组织成具有层次结构的有机整体。
网站中包含的网页类型主要有主页、普通页面和弹出页面3种。
（1） 主页。主页又称为首页，专门为访问整个网站资源提供导航和目录索引，并集中代表网站的整体结构。主页中通常包含网站主要栏目的索引，以便灵活访问网站中的其他网页。主页的文件名称通常为index.htm、default.htm或top.htm等。
（2） 普通页面。普通页面是承载网站绝大多数信息的一般页面，可以通过命令按钮或超链接与主页或其他普通页面建立联系。制作普通页面时，要力求达到目标明确、信息丰富、设计美观、图文并茂、风格与主页一致等要求。
（3） 弹出页面。弹出页面通常应用在许多商业网站中，用于发布广告、消息、通知、销售情况等信息。
2. 网页
网页就是网站中的一个可视的“页面”，换句话说，构成网站的基本元素就是网页。如果设计者只有域名和虚拟主机，而没有任何网页，则意味着这是一个没有内容的“空”网站。一个网页通常对应一个文件，文件类型为DHTML、HTM、ASP、ASPX、PHP、JSP等。
网页是信息资源的一种特殊表现方式，主要用HTML或XHTML的标记进行描述，可以由一个或多个超文本文件构成。它的主要特征是通过超文本链接技术在不同网页信息之间实现转移和漫游。
在Edge浏览器中，按组合键Ctrl+U就可以查看到所浏览网页的实际内容，如图31所示。实际上，网页由纯文本内容构成，其中包含各种“标记”，这些标记能够对网页中的文字、图像、表格、声音、超链接等元素进行描述。浏览器会对这些标记进行解释并显示“浏览”效果，用户愿意看到网页文件的“浏览”画面而不是标记内容。
图31所浏览网页的实际内容（局部）
网页要通过在浏览器地址栏里输入网址（指URL形式）进行访问。浏览器识别到用户输入的网址后，会自动访问网址所对应服务器上的网页文件，然后将网页文件传送到用户计算机中，最后由本地机中的浏览器“翻译”网页内容，再显示全部“浏览”效果。
注意： 网页文件中的纯文本内容将以最小存储空间来获得最快的下载效率，本地的浏览器又会分担网络服务器的浏览操作与管理开销。
3. 网页元素
一个网页文件可以由许多网页元素构成，例如文本、图像、超链接、音频、视频、表格、表单等。
（1） 文本。这是构成网页的最基本元素之一，用于表示网页中的主要内容。文本是网页发布信息的主要形式，也是网页中永不过时的重要成分。尽管动画、声音、图像、视频等信息五彩缤纷，但浏览者的主要注意力仍然是页面中的文本信息。据统计，页面中的有效信息超过80%都是由文本表示的。
（2） 图像。网页中的图像可以是静态的图形和图像，也可以是动态图像（即动画）。利用图像的生动和直观特征进行网页修饰后，可以充分表达文字所不能传达的信息。实际上，图像与文本的相互结合与衬托，能够达到图文并茂的效果，从而增加页面的视觉感知能力。另外，图像也可以用于建立超链接。
（3） 超链接。这是网页中的最基本元素之一，也是万维网的根本特征。超链接表示从一个网页指向另一个目标位置的引用，该目标位置中可以存放网页、图像、表格、表单、程序段、视频、电子邮件地址等资源。
（4） 音频与视频。这是网页中有关多媒体内容的描述部分，用于使网页内容更加丰富多彩，感染力更强，适当地运用多媒体素材将会增加网页的感染效果。
（5） 表格。这是组织与控制网页内容的重要形式，是网页布局的常用元素。网页通常使用没有边框线的隐含表格，以便使网页的版面简洁且规范。
（6） 表单。这是表现网页交互功能的Active（活动）控件，如网页上的文本输入、列表信息中的选项、信息提交格式、操作按钮等，都可以使用表单实现。
常用网页元素对应的文件扩展名，如表31所示。表31常用网页元素的文件扩展名
文件及其扩展名说明HTM由HTML（超文本标记语言）构成的网页文件JS由JavaScript脚本语言编写的网页浏览程序CSS由层叠样式表CSS构成的网页内容显示JPG、GIF、PNG各种图像文件SWF由Flash软件生成的动画文件AVI、MPEG、MOV各种视频文件WAV、MP3、MIDI各种音频文件4. 主页
主页通常是整个网站的导航目录，所以主页就是一个网站的起点或主目录。网站的任何更新内容一般需要在主页中进行突出显示，它是网站的重要标志，要能够体现整个网站的性质和风格。主页应该包含的基本元素有： 页头、Email地址、版权信息和联系方式。
（1） 页头。应该准确无误地标识站点和企业标志，如图32所示的是国内外部分知名企业的标志。
图32主页页头
（2） Email地址。给出准确的Email地址，用来接收用户垂询。
（3） 版权信息。清楚声明版权所有者、法律保障、所有权利等。
（4） 联系方式。提供准确的联系方式，如普通邮件地址、固定电话、传真等。
5. 静态网页和动态网页
网页一般分为静态网页和动态网页两大类。其中，静态网页是通过网站设计软件对网页进行重新设计和修改，其内容和格式一般不会发生重大改变，只有网站设计或管理人员才能根据需要更新；动态网页的内容将随用户的互动输入而改变，或者随着用户要求、时间推移、数据变化等而改变。网页内容也可以由程序员通过客户端脚本描述语言（如JavaScript、ActionScript等）来编程而改变。其实，使用服务器端脚本描述语言（如PERL、PHP、ASP、JSP等）来编写程序，也能够“动态”改变网页内容。例如百度贴吧就是通过网站服务器运行应用程序，将网民言论进行自动处理，按照“程控”方式生成相应的网页。
静态网页的具体工作原理描述如下：
（1） 用户在浏览器的地址栏中输入要访问网页的URL地址，浏览器将网络请求发送到指定的网络服务器中；
（2） 服务器接受用户的URL请求，并在数据库系统或内存中查找到相应的HTML文档；
（3） 服务器将网页文件传送给客户端浏览器；
（4） 客户端浏览器将HTML文档“浏览”出来。动态网页的具体工作原理描述如下：
（1） 网络服务器接受用户的URL请求；
（2） 执行服务器处理程序以便处理用户请求；
（3） 实时生成动态网页内容；
（4） 将生成的网页传送到客户端计算机中。
6. 网络服务器
服务器是一种具有较强计算能力、较快传送速度和较大存储空间的计算机，专门提供给多用户共同使用。服务器的正常工作是在服务器操作系统的管理下实现的，服务器操作系统管理和充分利用服务器硬件功能，并提供大量应用软件在服务器上运行。
根据计算能力服务器可以分为工作组级服务器、部门级服务器和企业级服务器3种。服务器与主机系统完全不同，主机是通过终端让用户共同使用的，而服务器是通过网络让客户端用户共同使用的。
3.1.2网站制作过程
网站制作过程一般如下：
（1） 确定网站的目标、主题和风格；
（2） 进行网站总体设计；
（3） 准备网站素材；
（4） 选择网页制作工具；
（5） 建立网站；
（6） 制作具体网页；
（7） 注册域名与申请网页空间；
（8） 网站测试；
（9） 网站发布；
（10） 网站维护等。
1. 确定网站的目标、主题和风格
（1） 确定网站目标。网站制作是展现企业或个人形象、产品、服务和发展前景的重要途径。所以，明确网站制作的目标并做出切实可行的制作方案是非常重要的。主要内容包括： 所提供的服务类型、访问者需求、市场现状、设计者自身情况等，要体现“设计以人为本”的理念，而不仅仅以“美观”为目标进行网站制作。
（2） 确定网站主题。在确定网站目标后，就要确定网站主题，并力争做到主题明确和重点突出。在进行主题设计时，应该考虑如下问题： 主题选材要简洁精确，保证主题内容具有专业性和趣味性，主题定位合理，不能做成“百科全书”式的内容堆积。
在确定网站主页时，应该制作好如下网页元素： 页头标识、版权信息、联系信息和电子邮件，如表32所示。表32网站主页中的网页元素
网 页 元 素说明页头标识能够准确标识网站、企业品牌或个人特征电子邮件提供给访问者进行垂询的简便方法联系信息提供给访问者的普通邮件地址、电话等信息版权信息声明版权所有者和法律保障（3） 确定网站风格。网站风格就是网站整体形象给访问者留下的综合感受，网站既应该与众不同，又不能杂乱无章，最好能使访问者看到任何页面都联想到网页拥有者。要确定网站风格，内容包括版面布局、字号与字体、网站标志、色彩搭配、标语、人机交互、内容价值、存在意义、网站品牌等。例如，迪士尼公司官方网站的主基调是生动活泼的，以便让大众（尤其是儿童和青少年）感到愉快，如图33所示。
图33迪士尼公司官网
2. 进行网站总体设计
网站总体设计包括确立网站结构、设置网站目录结构和设置网站链接结构。
（1） 确立网站结构。确立网站结构非常重要，它是网站设计与制作能否成功的关键。在制作一个有很多页面的大型网站时，首先就要用树状层次结构将全部页面组织起来，并同时要考虑将来可能的扩充。这样可以使以后的网站管理和维护过程简单安全，免得经常对网站内容进行维护。
（2） 设置网站目录结构。网站目录结构是指建立网站的同时所创建的文件目录结构。例如，使用Dreamweaver建立网站时都会隐含建立根目录和Images（图像）子目录。目录结构与访问者并有任何关联，但对于网站管理和维护，以及网页内容的扩充和移植都是非常重要的。
在建立目录结构时应注意如下问题：
① 在每个主目录中分别建立Images子目录来存放图像文件；
② 目录结构的层次最好不要超过5层，即遵循“7±2法则”；
③ 不要将所有网页文件全部存放在根目录下，这样将导致文件管理混乱，并不利于文件的编辑操作；
④ 按栏目内容要求分别建立相应子目录，这样便于网站管理和维护；
⑤ 不要使用中文名称作为目录名；
⑥ 不要使用太长的目录名；
⑦ 尽量使目录名做到“按名知意”。
（3） 设置网站链接结构。网站链接结构是指页面之间进行链接的拓扑结构，它的基础就是目录结构。建立网站链接结构的方法有两种： 树状结构和星形结构。
① 树状结构。用于表示一对一的页面关系，其优点是层次分明和条理清晰，缺点是浏览效率较低，经常进行页面的逐层展开才能找到所需要的内容。
② 星形结构。用于表示一对多的页面关系，许多页面相互之间都进行链接，其优点是方便浏览，缺点是链接太多会导致浏览过程混乱。
在实际网站设计过程中，经常是将树状链接结构和星形链接结构结合使用，以提供方便灵活的访问方法。例如，主页和一级页面之间使用星形链接结构，而一级页面和二级页面之间使用树形链接结构。
3. 准备网站资料
网站素材的准备工作包括搜集、整理、加工、存储等环节，包括文本、图像、超链接、音频、视频、表格、表单等方面的网页素材。
4. 选择网页制作工具
网页制作工具非常多，例如Dreamweaver、JavaScript、HTML等。如果是初学网页制作，则应该使用所见即所得（what you see is what you get，WYSIWYG）的Dreamweaver软件；如果想学习网页程序设计，则应该使用HTML语言和JavaScript脚本语言来编写程序；如果属于专业级别的网站制作，则可以使用CGI、ASP等高级工具。
5. 建立网站
建立网站时要注意两个原则，一是先简单后复杂原则，二是先小后大原则。其中，先简单后复杂原则要求首先制作简单网页，然后制作复杂网页；先小后大原则要求首先制作较小的网页，然后制作较大的网页。这两个原则都将使复杂问题变成简单问题，从而极大地提高网页设计与制作的效率。
6. 制作具体网页
一个网站是由许多网页文件构成的，所以制作具体网页是非常艰巨的一项工作。
7. 注册域名与申请网页空间
目前，很多的ISP服务商提供域名注册和网页空间申请的收费服务，任何用户都可以根据自身情况选择合适的ISP服务商。但是，对于个人网站而言，完全可以通过申请免费网页空间的方法实现域名注册。
8. 网站测试
在建立好一个网站后，应该对网站进行细致周密的测试。一方面，可以利用网页制作软件本身自带的测试功能进行内部测试；另一方面，也可以使用专用工具进行全面测试。这样才能及时发现问题，并进行修改，以便保证正常浏览和使用。
9. 网站发布
网站测试完成后，就可以将其上传到网站空间中。现在网站发布工具非常多，有些网页制作工具本身就具有上传功能，另外还可以利用FTP上传工具，这样就可以方便地将网站发布到自己注册域名与申请网页空间的服务器中。
10. 网站维护
一个优秀的网站是需要经常更新内容和管理维护的。网站只有定期地更新内容，才能不断地吸引更多的浏览者。另外，网站进行良好的管理和及时维护后，才能保证网站安全。
3.1.3网页素材1. 概述网页涉及领域不同，所采用的素材也不同。例如，书刊领域采用的素材是文字、表格和图像，绘画领域采用的素材是图形、文字和色块，摄影领域采用的素材是静止图像和色块，电影电视领域采用的素材是运动图像、声音和色彩。不过，制作网页时需要更多的素材。
所谓网页素材是指从自然界和现实生活中搜索到的、没有经过提炼的网站构建资料，其内容可以分为文字材料和形象资料两大类。其中，文字材料是指文学作品、报刊杂志、历史事件、神话故事等文字构成的素材；形象资料是积累的绘画、素描、速写、雕塑、照片、图像等作品。
在互联网中，个人或机构拥有的独特风格通常可以展示在其拥有的网站中，这些独特风格可能会吸引浏览者停留较多的时间，阅读更多的网页信息。如图34所示为IBM公司的主页。
网站中的独特风格可以通过许多网页素材的设计、使用来形成，其中部分内容应该是有关联的。通过这种关联使网站具有整体感，实现完美的网站风格设计。如图35所示为微软公司的主页。
具体网页素材如表33所示。
图34IBM公司主页
图35微软公司主页
表33网页素材
网 页 素 材说明排版文字编缩、表格结构、框架应用、段落内容等色系文字字形、网页底色、图像色系、网页颜色等内容网站主题、整体实用性、文件关联性、内容切合度、文档必要性等窗口窗口效果，例如全屏幕窗口、特效窗口等特效动态网页应用，例如Flash、JavaScript、Java Applets、HTML等程序网页互动程序，例如XML、ASP、CGI、PHP等架构网页的目录规划、层次分明、选单应用、表单结构等走向对网站的未来规划、网站整体内容走向等2. 网站排版
一个经过精心规划的网站排版使浏览者能迅速找到所需资料，如同一本好书，合适的内容编排会让读者一目了然。而网站排版与图书排版并没有本质不同，只不过表示媒体不同而已。网站排版的主要内容包括段落内容、文字编排、表格设置、表格底色和框架应用。
（1） 段落内容。合理组织段落内容可以使内容丰富。
（2） 文字编排。文字通过内容编排可以产生层次分明、方便阅读等效果。
（3） 表格设置。表格是网站经常用到的编排方式之一，使用表格可以统一整理多段文字，从而保证清楚易懂。
（4） 表格底色。要避免底色或底图与表格文字颜色过于接近以致文字不清。其实，使用表格的目标是表现文字含义，合适的底图或底色是为了加强表现效果。即通过底色或底图的衬饰作用，让文字表现得清楚明白。
（5） 框架应用。设计表格框架时要尽量避免相同网页的重复加载，这样可以加快浏览速度。由于框架会分割整个网页画面，造成浏览空间减少，所以要注意框架中内容的可读性。
3. 网站色系
网站色系是浏览者对网站整体的第一感觉，如果一个网站中的色系保持一致，则会使网站美观大方，内容层次分明。网站色系的要素包括文字字形、网页底色、网页颜色和图像色系等。
（1） 文字字形。以文字为主的网站，合适的文字字形会产生最佳的浏览效果。
（2） 网页底色。这是整个网站风格的关键。例如，以黑色作为网页底色会使浏览者产生稳重的视觉感，不适合构建学校、培训机构等教育类的网站。当然，审美观因人而异，但网站是在互联网发布并浏览的，设计时尽量考虑时尚潮流并满足绝大多数人的需求是非常必要的。
（3） 网页颜色。这是以浏览者角度来观看的，即整体网页偏向何种色系。例如，许多搜寻网站为提高阅读效果，设计网页时尽量让文字颜色和网页底色拥有较高的区分度。
（4） 图像色系。图像的色系可以分为冷色系与暖色系。其中，冷色指青、蓝、紫3种颜色及其组合，暖色指红、橙、黄3种颜色及其组合。初学者要尽量获取优质图像，熟练使用常用的绘图软件和影像处理软件，妥善利用软件及网络中的各种素材资源。
在开始进行网站制作前，就应该对网站色系做好规划和设计，以避免在制作网站过程中出现搭配不合理、设计混乱等情况。另外，要使浏览者获得良好的整体观感，可能需要网站设计者经过多次调色和修正。所以，制作网页时一定要有极大的耐心。
3.2采集与处理网页素材
本节主要介绍网页设计时所使用的各种多媒体素材及其相关操作处理，其中涉及一些工具软件的使用。
3.2.1多媒体素材
多媒体素材是指多媒体网页中所用到的各种听觉、视觉材料。根据素材的文件格式，可将素材划分为文本、声音、图像、动画、视频等类型。
1. 文本
要提高文字的可读性，应该注意如下几点。
（1） 使用合适的字体和字号，如Times New Roman字体就比较容易阅读。
（2） 需要在文字周围留有适当的空白空间，拥挤的文字使人感到压抑。
（3） 使用合适的背景色，差的背景颜色（如橙色和红色）使人阅读困难。
（4） 文字描述应精简并围绕一个主题，以便访问者能够快速获取主要信息和中心思想。
（5） 内容表述客观公正，并允许访问者做出自由选择，或继续留在当前网页上，或去其他网站浏览并寻找信息。
2. 声音
在设计网页时，最好不要使用内联声音。因为，使用声音会使网络下载速度变慢，同时对网页浏览效果并没有什么提高。据统计，人们从网页中获取的文字信息占总量的80%以上。如果网站中必须使用声音或视频，则要保证可以使用通用插件来播放。目前，常用的声音插件包括QuickTime、RealPlay、ShockWave等。
3. 图像
为了下载速度更快，网页中尽量少用图像，同时要保证访问者能够从网站中获得重要信息。据统计，将每个页面内容控制在50KB左右、图像大小控制在30KB左右时，可以保证较理想的下载速度，而每增加50KB会延长1s的下载时间。另外，不要使用横跨整个屏幕的图像，以避免通过滚动屏幕才能看到全图的情况。如果必须将一个较大图像放在网站中，则最好使用图像软件将其缩小，以便提高浏览速度。
4. 动画
有些网站中动画可能是必不可少的，如游戏网站、商务网站、儿童网站等。其他网站在使用动画时要注意两点，其一是要选择使用Flash动画，不能简单堆积大量动画，并尽量不要使用Flash插件，以便保证网络的下载速度；其二是确保动画和文字关系紧密，并与网页组成一个有机整体。
5. 视频
虽然网页应该有多媒体信息，但由于网络带宽的限制，在使用多媒体信息（尤其是视频）表现网站的内容时应该充分考虑客户端的数据传输速度。
3.2.2处理多媒体素材
目前有许多工具软件可用于多媒体素材的处理，如使用UltraEdit 处理文字、使用Photoshop 处理图像、使用Flash处理动画等。
1. 使用UltraEdit处理文字
UltraEdit是一个功能全面的文本编辑器，可以编辑文本、十六进制数据、ASCII码，内含英文单词检查、C++与Visual Basic语句多色突显，可同时编辑多个文件。此外，UltraEdit还具有HTML标记多色显示、查找、替换、还原等功能。
2. 使用Photoshop处理图像
Photoshop是由美国Adobe Systems公司开发的图像处理软件。对于摄影师、图像设计师和图形设计师而言，它是进行图像设计的优秀工具软件；对于计算机图像处理的初学者而言，它能够让用户很快地进入奇妙的图像处理世界中。Photoshop操作灵活且显示直观，是真正的“所见即所得”的图形图像处理软件。其主要功能如表34所示。表34Photoshop的主要功能
功能说明绘图具有许多绘图及色彩编辑功能图像阅览能阅览数十种图像格式文件图像编辑可以编辑扫描图像或光盘图库已有图像，进行放大、裁剪处理等操作扫描图像控制扫描仪扫描图像矢量绘图可使用矢量绘图软件Illustrator文件或保存为Illustrator格式的文件创意设计可以完成镜头或滤镜不可能实现的功能3. 使用Flash处理动画
Flash软件是美国Macromedia公司推出的，专门基于矢量图形的交互式动画设计软件。目前，该软件被广泛应用于网页设计、教学课件制作、MTV制作、电子贺卡设计、广告设计等领域。该软件通过将声音、音乐、动画等多媒体元素融合起来，制作出高品质的动画显示效果。
3.3使用HTML制作网页
HTML严格规定的标记（Markup）、语法和功能。Edge等浏览器在阅读HTML文档后，就可以在显示器上显示出该文档的页面效果。本节主要介绍HTML的常用标记和网页制作方法。
3.3.1HTML的基本知识1. HTML简介HTML不是一种程序设计语言，HTML文件也不是程序文件。一个程序文件一般由过程和函数组成，有时要对一些外部数据进行运算。但是，HTMT文件本身却是一些脚本信息，这些脚本就是HTML规定的各种“标记”。在脚本描述程序中嵌入HTML标记后，Edge浏览器就会将HTML文件显示出来。
从技术角度来看，HTML是按标准通用型标记语言（SGML）中的文档类型定义（DTD）来定义的，所以一个HTML文档可以被认为是SGML文档中的一部分。例如，在传统出版印刷行业中，作者提供手稿，编辑用特殊的编辑符号加上各种排版与印刷的标记，从而规定书稿的印刷字体、印刷格式、版面大小、文本与图像的精确位置等。
2. HTML与本地浏览器
尽管Web浏览器已经在互联网中得到了广泛应用，但是Web网页内容实际上是非常简单的一段脚本而已。用户可以充分利用计算机网络和操作系统环境，以最佳方式完成各种操作。要浏览Web网页，可以使用如下两种方法。
（1） 使用主机上网方式进行浏览。主机上网方式就是让用户计算机通过TCP/IP直接连接到互联网上，这是现在最流行的浏览方式。具体连接方式包括使用局域网与互联网相连接、使用拨号方式通过调制解调器与一个网络服务提供商相连接。
（2） 与大型商业联机服务提供商相连接。Compuserve、American Online和Prodigy等许多大型商业联机服务提供商都提供各种图形Web浏览功能，用户可以从中浏览Web网页信息。
3. 字符实体和置标标记
为了保持HTML文档文件的通用性，HTML语言还可以使用许多非ASCII编码的字符。这些字符可在拉丁字符集—1中找到，所谓字符实体就是一种特殊的代码，浏览器处理并显示预定的特殊字符。这些字符实体前面一般冠有前缀“&”，接着是字符名或字符编号，最后使用分号结束。例如“&IT”用于表示左角括号和等于符号，即数学中的小于等于。
HTML语言中的置标标记是使用“< >”进行分隔的。它们可以单独出现，如标记
用于表示换行。也可以使用<开始标记>对出现，用于表示描述其中所包含的内容，例如网页设计表示使用斜体字显示字符串“网页设计”。另外，规定文本格式的标记、规定超文本链接的标记、规定声音和图像的标记、为交互网页定义输入字段的标记等都是使用<开始标记>对的。
3.3.2页面结构
在下面的各小节中，将详细描述HTML中的各种元素。建立一个网页与传统的书刊排版完全不同。例如，网页的大小一般是不固定的，浏览器将自动对文本进行文字调整以适应显示窗口的宽度，另外允许用户使用滚动条功能来进行辅助调节。而在传统排版时，用户必须规定全部印刷字体、印刷格式、版面大小、文本与图像的精确位置等，而用户在设计网页时，只需要对网页进行初步处理，其他内容由浏览器自动完成。
用户在设计网页时，主要工作就是在网页文件中嵌入各种HTML中的置位标记，这些置位标记是用于描述网页的。一般情况下，HTML标记是与任何显示设备无关的。具体而言，用户可以不考虑访问者应该使用什么字体，也可以不考虑浏览器是如何配置的。只要用户将一个网页文件装到Web服务器中，其他工作由浏览器自动完成。很明显， 网页比纸质页面更方便、更容易修改。
网页的主要特点就在于它是“活”的页面，因为它的显示内容可以不断发生变化。特别是互联网迅速发展的今天，一方面，新用户在不断地改写旧的网页；另一方面，老用户又在不断地编写出新的网页。
1. HTML文件组成
网页是由许多磁盘文件组成的，它们既可能存储在Web服务器中，又可能存储在用户计算机中，一个网页的精确文件位置可以使用URL来表示。网页的内容主要由文本部分和图像部分组成。一般而言，页面的标记文本放在一个文件中，而每个图像则放在另外的文件中。图像文件一般是使用文件名进行访问的，所以同一图像文件可以在同一页面上、不同页面上加以多次使用。
所谓HTML文件就是含有标记文本的网页文件。HTML文件以标记作为开始、作为结束。它被分割成文件头和文件体两部分。文件头部分用于描述文档的总体信息，文件体部分用于描述该文档的具体文本内容。例31就是一个简单HTML文件，它使用置标标记分别定义了文件头部分和文件体部分。
【例31】构造一个简单的HTML文件。1
2这是一个简单的HTML文件
3
4这是一个简单的HTML文件
5
6说明： 程序中的第1行使用标记表示文档类型是HTML文件，以方便浏览器进行识别和处理。第2行中的与标记对用于表示标题及其他有关文档的信息，具体标题内容包含在与标记对的内部。第3行的标记表示文档部分的开始。第4行表示以居中方式显示提示信息“这是一个简单的HTML文件”。第5、6行的和标记分别表示文档部分和HTML文件的结束。在Edge浏览器上运行文件后的结果如图36所示。
图36一个简单的HTML文件
2. 文件头部分
文件头部分所指定的信息就是HTML文档的标题。某些其他说明性的标记也可以写在文件头部分中，如在标记下的关键字、格式说明、图表说明等内容。要注意某些文件头标记是Edge浏览器不支持的。每一个网页都应该有一个标题，并且这个标题应该做到见名知意。在Edge浏览器中，标题将出现在浏览窗口的标题栏位置，即该浏览窗口的顶部。使用标记可以指定页面的背景和文本颜色，从而取代浏览器的默认设置。
注意： 为简单起见，文件头部分中的内容尽量少。
3. 文件体部分
HTML文档的实际内容应该安排在标记内。标记对中可以包含文本的许多段落，小到非常简单的一行，大到若干页面内容。另外，文件体部分还可以包含带编号的列表、带箭头的列表、行列数可变的表格等内容。
HTML页面的文件体部分也可以包含许多非文本型的标记元素。这样，就可以方便地使用图形、图像、数字音乐、视频图像、动画、声音、区域、页面、文件、Web站点、数据库、超链接等。
3.3.3结构标记
前面已经介绍了4个置标标记： 、、和<body>，这一节开始详细介绍结构标记。
1. 置标标记与字符实体
（1） 置标标记。HTML语言的简单性就在于置标标记的广泛使用。一方面，浏览器不能接受置标标记内的拼写错误和附加空白；另一方面，如果用户使用错误的置标标记，则用户不可能得到所希望的浏览效果。例如，如果用户将“</html>”写成“</html”，则浏览器将认为该HTML文件是错误的，并将其中的全部代码作为文本内容直接显示出来，即标记没有发挥效果。
（2） 字符实体。字符实体也是一种特殊的HTML代码，它用于定义那些通常不能通过简单击键来输入的字符。为使所有的文本编辑器（如记事本、UltraEdit等）能够容易编辑HTML文件，可以将这些特殊字符转换成特殊的数字或名称。
字符实体以符号“&”开头，后面接以预定实体的名字或“#”符号，再接以该字符的十进制编号（指拉丁字符集—1），最后用分号终结字符实体。字符实体主要用于表示两类字符： 拉丁字符集—1中的非ASCII编码字符和需要用来标记HTML标记开始与结束的字符。要表示一个字符或置标标记的开始与结束，可用7个字符实体，如表35所示。表35字符实体
字符实体说明字符实体说明&it表示左角括号或小于符号>表示右角括号或大于符号&表示and的符号"表示双引号空格符表示非中断的空格符号表示版权符号“”表示注册商标符号“”2. 标记语法
HTML中的每一个置标标记都有一个标记名字，大多数标记中都包含关于属性的修饰符。例如水平直线标记是<hr>，利用width属性并规定一个值可以定义一条有特定宽度的水平直线。例如，画一条占宽度80%的水平直线，可用语句： <hr width＝80%>。
1） 容器标记与空白标记
（1） 容器标记。指非空内容的标记，它对使用开始标记和结束标记包括的文本起作用。其中，开始标记以符号“<”开始，紧接一个标记名字、一个属性（如果有多个属性的话，则使用空格进行分隔），最后使用符号“>”来封闭该标记；结束标记以符号“<”开始，紧接一个“/”符号和一个标记名字，最后使用符号“>”来终结该标记。
（2） 空白标记。空白标记是指为空内容的标记。如果说容器内部包括要修改的内容，则空白标记内部将没有任何内容。所以，空白标记是孤立出现的，即没有带斜杠符号的结束标记与之配对。例如，<hr>标记表示画一条水平直线，<br>标记表示换行（即后续文本从左边界处开始），<img src＝"example.jpg">标记用于插入一个本地机图像。
【例32】4种容器标记的使用示例。1<html>
2<head><title>4种容器标记的示例
3
4
5这是一个斜体字的浏览效果
6这是一个下画线文字的浏览效果
7这是一个电传打字机字体的浏览效果
8这是一个超链接引用的浏览效果
9
10
11说明： 程序中的第5、6、7、8行使用4种容器标记，分别表示斜体字、下画线文字、电传打字机字体和引用超链接，第4、9行的
空白标记表示画一条水平直线。在Edge浏览器上运行文件后的结果如图37所示。
图37容器标记的示例
2） 置标标记和字符实体的使用
【例33】置标标记和字符实体的使用示例。1
2置标标记和字符实体的使用示例
3
4静夜思
5床前明月光，疑是地上霜。
6举头望明月，低头思故乡。
7
8说明： 程序中的第2行表示浏览窗口的标题栏将显示字符串： “置标标记和字符实体的使用示例”，第4行使用和
标记对指定二级标题为“静夜思”，第5、6行使用和
标记对定义两个自然段。从图38中可以看到浏览器将忽略HTML文件中的ENTER（回车）符号，并按浏览窗口的宽度对文字进行调整。
图38置标标记和字符实体的使用示例
3. 结构标记
HTML标记可以分为格式标记和页面结构标记两大类。其中，格式标记是要改变文本格式的标记，但并不改变页面的版面布局。主要用于在标记过的文本前后指定格式编排信息，如粗体字、斜体字、下画线等；页面结构标记是要改变页面结构的标记，用于在标记过的文本前后指定段落分割功能，从而定义生成页面的版面布局。
属于结构标记类的标记包括规定分段标题、章节、段落、列表、表格等。
1） 分段标题标记
使用分段标题标记可以将文档中的每个分段分隔开，所有的分段标题标记都是容器，并要求对应的结束标记。HTML语言支持6级分段标题，使用标记对、、、、、。这6个标记对可以解决各方面的文档问题，另外用户还可以利用表元素和表格元素生成附加结构。
是最高层的分段标题，通常称为一级分段标题，用于表示页面实体中的第一个元素，并用作该页面的内部标题。很明显，一级分段标题是与定义浏览窗口标题的标记不一样的，因为它是在浏览窗口内部进行显示的。任何分段标题标记本身是内含格式信息的，如字体、章节分割、显示位置等，并使用一定空白来区分不同的分段标题。所以，用户不必为分段标题添加任何格式标记。用户最好按自然分层顺序使用各种分段标题，当然HTML语言也允许使用非自然分层顺序，如<h1>标记后不是<h2>标记，而是<h3>标记。
【例34】使用居中方式显示各级分段标题。1<html>
2<head><title>使用居中方式显示各级分段标题
3
4使用居中方式显示一级分段标题
5使用居中方式显示二级分段标题
6使用居中方式显示三级分段标题
7使用居中方式显示四级分段标题
8使用居中方式显示五级分段标题
9使用居中方式显示六级分段标题
10
11说明： 程序中的第4～9行分别以居中方式显示各级分段标题。由于HTML语言默认规定分段标题是左对齐显示的，所以在分段标题标记中使用align＝"center"属性后，就可以产生居中对齐效果。从图39中，可以看到这6个分段标题对应的字体和字号。
图39使用居中方式显示各级分段标题
注意： 分段标题标记内含许多样式信息，如同Word中的标题1、标题2、标题3、正文等样式。
2） 文档结构标记
HTML页面的初始段用于定义它的总体结构，如标识为HTML文档类型、指定创建HTML页面所用的版本、提供标题信息等。下面分别介绍、和标记。
（1） 总体标记。使用该标记可以将整个HTML文档包括起来，从而让浏览器知道该HTML文档从什么位置开始，到什么位置结束。一个良好的程序设计风格是使用标记开始一个网页，使用标记结束该网页。
（2） 标题标记。该标记用于说明整个标题内容，表36给出的标题元素可以在文档头部分进行引用。表36标题元素
标 题 元 素说明定义文档标题，该标题将出现在浏览窗口顶部的标题栏中<script>定义所使用的脚本描述语言，如JScript、JavaScript、VBScript等<style>定义各种格式表单、串联格式表单等<base>定义用于引用的URL地址<meta>定义总体信息，如说明、关键字、作者等<isindex>用于各种关键字搜索<link>定义标识与其他文档的链接关系（3） 文档体标记<body></body>。该标记内部就是全部文档体内容，其中，分段标题部分可表示各种分段标题，文本元素部分主要用于改变文本格式，块元素部分主要用于定义段落类型。在<body></body>标记中，主要属性如表37所示。表37<body></body>标记中的属性
属性说明text指定文本的显示颜色link指定没有访问的超链接定义显示颜色vlink指定已访问的超链接定义显示颜色alink指定单击过的超链接定义显示颜色bgcolor指定整个文档所用颜色，background属性比bgcolor属性优先background指定背景图像和颜色属性名不区分大写字母与小写字母,但建议标记名、属性名、属性值使用小写字母。尽管用户完全可以随便书写，不过良好的编码风格将增加Web网页代码的可读性。
3） 换行标记与部分公共属性
（1） 换行标记<br>。要结束当前行或在页面最左侧处开始新的一行，用户就可以使用换行标记<br>。凡是需要在标题或表项中占用一行以上时，用户都应该使用<br>标记。<br>是一个空白标记，它与段落标记的区别在于： 它不会加入任何额外的空白内容，仅仅表示换行的意思。所以，用户可以认为它是在文本中插入一个新行。
（2） 属性align。这是一种公共属性（许多标记都可以使用这个对齐属性），用户可以将该属性与本章介绍的许多标记一起使用。align属性具有3种属性值，其中left表示指定内容按左对齐方式（即默认设置），center表示指定内容按居中对齐方式，right表示指定内容按右对齐方式。
【例35】各种定位方法和<br>标记的使用情况。1<html>
2<head><title>各种不同的定位方法和标记的使用情况
3
4静夜思
5唐朝
6作者: 李白
7床前明月光，疑是地上霜。
举头望明月，低头思故乡。
8
9说明： 程序中的第4行以居中方式显示一级标题“静夜思”，第5行以左对齐方式显示四级标题“唐朝”，第6行以右对齐方式显示二级标题“作者： 李白”，第7行显示正文部分，并用换行标记
将正文部分分两行进行显示。在浏览器上运行文件后的结果如图310所示。
图310各种定位方法和
标记的使用情况
4） 块元素标记（
与
）
所谓块元素标记是指普通文本型的段落标记和某些专用型的段落标记，如段落分隔、