作者：王德永张少龙主编

出版社：职业教育出版分社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

PHP+CMS+Dreamweaver网站设计实例教程试读：

前言

Dreamweaver是1997年由Macromedia公司推出的Web应用开发工具，历经多次升级。2005年Adobe公司收购Macromedia公司，从此，Dreamweaver归Adobe所有。它不仅能帮助初学者迅速成长为网页制作高手，而且为专业设计师提供了强大的开发工具和无穷的创作灵感。因此，Dreamweaver备受业界人士的推崇，在众多专业网站和企业应用中都将其列为首选工具。

织梦内容管理系统（DedeCMS）是国内PHP开源网站管理系统，以简单、实用、开源而闻名，也是使用用户最多的PHP类CMS系统DedeCMS免费版的主要目标用户锁定在个人站长，功能更专注于个人网站或中小型门户的构建，当然也不乏有企业用户和学校等在使用。DedeCMS基于PHP+MySQL的技术架构，完全开源加上强大稳定的技术架构，无论是打算做个小型网站，还是想让网站在不断壮大后仍能得到随意扩充都有充分的保证。Dreamweaver+DedeCMS（PHP+MySQL）是当前专业网站公司开发网站的主流开发工具，在保障快速开发网站的同时，为技术安全、技术支持等多方面提供强大的支持。

为了适应高等职业教育改革，落实校企合作、工学结合，增加学生项目制作经验，同时夯实基础知识，我们会同专业公司技术骨干利用当前主流技术 Dreamweaver+DedeCMS （PHP+MySQL），以企业真实的网站开发项目“平顶山韩创教育咨询有限公司”网站为载体，依据网站项目开发流程来编写教材。课程教学采用“项目导向、任务驱动”的方法，课下在教师指导下完成合作企业网站项目的“工学交替、学做融合”教学过程，整体采用“教A做B”的教学模式，按照认知规律，逐步递进，让学生能在实际经历网站开发制作流程和技术规范的同时，养成良好的团队协作职业素质，胜任网站开发岗位的各项工作。

本书按照任务驱动的方式编写，首先进行任务描述和展示，然后学习相关知识，再进行任务实施，最后进行任务考核。每章都采用实际案例，对教育网站进行详讲并带领学生课堂完成，每一章均配有拓展实训用于学生课外拓展训练，并配有相关习题，满足网页设计师考取证书的需求。通过任务的实施，体验网站设计师整个工作过程，完成从认知到实践，达到教学目标的要求。

本书配套光盘中包含了书中所有案例的源代码和最终效果文件。另外，为方便教学，本书配备了 PPT 课件等教学资源，任课老师可登录人民邮电出版社教学服务与资源网（www.ptpedn.com.cn）免费下载使用。

本书由王德永、张少龙担任主编，杜暖男、何福男、贾如春担任副主编，马莹莹、王聪、刘艺培、孟庆兰参与了编写，北京京胜世纪科技有限公司王喜胜总经理、中国平煤神马集团计算机通讯分公司别深杰提供了实际网站作为项目参考，并对本书的编写提出了宝贵意见，在此一并感谢。作者2013年9月第1章教育网站规划与设计

网站建设是教育类企业信息化建设的重要方面，是加大宣传与交流力度提高教学、科研、管理效率的重要途径。平顶山韩创教育咨询公司计划搭建企业网站作为对外宣传的窗口，展示该公司师资培训的内容。

本章主要学习网站建设第一步网站规划与设计。首先要完成的是网站规划书的撰写和网站开发环的配置。1.1 任务一 网站规划书撰写

1.1.1 任务描述

网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。网站规划书应该尽可能涵盖网站规划中的各个方面，网站规划书的写作要科学、认真、实事求是。

1.1.2 相关知识

1．PHP网站开发流程

在建设一个网站之前，首先要了解网站建设的开发流程来策划、设计、制作和发布网站。通过使用开发流程确定制作步骤，以确保每一步顺利完成。好的开发流程能帮助设计者解决策划网站的繁琐行，减小项目失败的风险。本项目采用的是 PHP（Personal Home Page）技术。常用的PHP网站开发流程，如图1-1 所示。图1-1 PHP网站开发流程

2．常用前台技术网站开发技术

前台技术是用于显示层的技术，或者是面向浏览者的技术，主要进行Web前端架构及静态页面制作。其中，静态网页不包含任何服务器端脚本，代码都是在放置到Web服务器前由网页设计人员编写的，文件扩展名为.htm或.html。（1）HTML。HTML（Hyper Text Markup Language，超文本标记语言）是利用标记（Tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任何文本剪辑器都可以对它进行编辑。HTML与VB、C++等编程语言有着本质的区别，使用一些网页编辑软件（如Dreamweaver）可以快速地生成HTML代码。（2）ECMAScript。ECMAScript技术是由ECMA（European Computer Manufactures Association Internation，欧洲计算机制作商协会）制定的标准化脚本语言，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的扩展。

JavaScript是一种脚本语言，通过嵌入或整合在标准HTML中实现，也就是说，JavaScript的程序直接加入在 HTML文档里，当浏览器读取到 HTML文件中的 JavaScript程序，就立即解释并执行有关的操作，无需编译器。利用JavaScript技术可以制作动态按钮、滚动字幕等网页特效。（3）XHTML。XHTML（Extensible Hyper Text Markup Language，可扩展的超文本标记语言）是由HTML语言发展起来的一种标记语言。XHTML实际上是HTML 4的后续版本，在W3C网页标准化体系中，XHTML属于网页的结构技术。（4）CSS。CSS（Cascading Style Sheets，层叠样式表）是一种数据表文件，在该数据表中存储了网页结构语言的各种样式以及显示方式等内容，并通过表的ID、标签以及类等选择器供XHTML调用。利用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精密的控制。对相应的代码做一些简单的修改，就可以改变统一页面的不同部分，或者改变不同页数页面的外观和格式。在W3C网页标准中，CSS属于网页的表现技术。（5）切片技术。切片技术是应用于网页图形处理的一种技术，可将整张图片切割为几张小图片，并输出一个网页，图片会作为网页表格或层中的内容。切片技术的出现，提高了平面转换为网页设计的效率。目前，可以使用切片技术的图像处理软件有 Photoshop、Fireworks、Illustrator和Coreldraw等。

3．常用后台技术网站开发技术

后台技术是面向网站数据管理的技术，主要用于开发动态网页。动态网页与静态网页之间区别在于：动态网页中的动态内容通常存放在网站后台的数据库里，通过运行ASP等语言编写服务器端程序，自动生成网页再送往浏览器。这样做有利于浏览者的互动，内容的更新也更方便。动态网页与静态网页文件扩展名不同，对于动态网页来说，其文件扩展名不再是.htm或.html，而是与所使用的 Web 应用开发技术有关。例如，使用 ASP 技术时网页文件扩展名是.asp，使用ASP.NET技术时网页文件扩展名是.aspx等。目前交互式动态网页实现技术主要是PHP、ASP、JSP和ASP.NET等。（1）PHP。PHP（Hypextes Preprocessor，起文本预处理）是一种跨平台服务器解释执行的脚本语言，与ASP类似，它也是基于服务器端用于产生动态网页而且可嵌入HTML中的脚本程序语言。ASP虽然功能强大，但是只能在微软的服务器软件平台上运行，而大量使用 UNIX/Linux 的用户要制作动态网站则首选PHP技术。PHP用C语言编写，可运行于UNIX/Linux和Windows9x/NT/2000/2003下。（2）ASP。ASP（Active Server Page，动态服务器页面）是Microsoft开发的动态网页技术标准，它类似于HTML、Script与CGI的结合体，但是其运行效率却比CGI更高，程序编制比HTML更方便、灵活，程序安全及保密性也比Script好。（3）JSP。JSP（JavaServerPages，Java服务器页面）是由Java语言的创造者Sun 公司提出，多家公司参与制订的动态网页技术标准，它通过在传统的 HTML 网页“.htm”、“.html”中加入Java代码和JSP标记，最后生成后缀名为“.JSP”、的JSP网页文件。（4）ASP.NET。ASP.NET 是建立在微软新一代.NET 平台架构上，利用普通语言运行时（Common Language Runtime）在服务器后端为用户提供建立强大的企业级 Web 应用服务的编程框架。ASP.NET拥有更好的语言支持，一整套新的控件，基于XML的组件以及更好的用户身份验证。ASP.NET 代码不完全向后兼容 ASP。目前，ASP.NET 的开发语言有 C#、Visual Basic.NET等。

4．网站的逻辑结构

网站逻辑结构是指页面之间相互链接的拓扑结构。一般的链接结构有以下几种。（1）树型链接结构。树型链接结构（见图 1-2）是一种一对一的形式，类似物理目录结构。首页链接指向一级页面，一级页面链接指向二级页面。浏览这样的链接结构时，一级级进入，一级级退出。其优点是条理清晰，访问者明确知道自己在什么位置，不会迷路；其缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。图1-2 树型链接结构（2）星状链接结构。星状链接结构（见图 1-3）是一种一对多的形式。每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面，缺点是链接太多，页面之间的层次结构不清晰，容易使浏览者迷路，搞不清自己在什么位置。图1-3 星状链接结构（3）混合链接结构。混合链接结构就是将以上两种结构混合起来。为了浏览者既可以快速方便地到达目标页面，又可以清楚地知道自己的位置，可在首页和一级页面之间采用星状链接结构，在一级和二级页面之间采用树状链接结构。

网站的逻辑链接结构的设计在实际的网页制作中是非常重要的一环。采用什么样的链接结构直接影响到版面的布局。随着网站竞争的日趋激烈，对链接的要求已经不仅局限于可以快速方便地浏览，而且更加注重其个性化和相关性。如何尽可能留住浏览者，是网站设计者必须考虑的问题。图1-4 混合链接结构

1.1.3 任务实施

1．网站简介

平顶山韩创教育咨询有限公司网站（以下简称：韩创教育网站）是一个典型的在职教育类门户网站，作为该公司对外宣传的窗口，也是展示该公司师资培训内容，加强校内外联系、师生交流、互相学习、共同发展的阵地。

2．市场分析（1）现今教育网站数量及发展情况。

查找相关数据资料，如中国互联网络信息中心（CNNIC）的相关报告，了解目前国内互联网发展情况，再寻找教育网站的数据。得到结论，网站建设业务在不断发展，行业市场规模巨大，同时也有越来越多的网络公司参与到市场竞争中来。（2）网站建设必要性。

网站建设是学校教育信息化建设的重要方面，是适应现代教育技术和信息技术的发展，加大学校对外交流与宣传力度，提高教学、科研、管理效率的重要途径。

3．网站目的及功能定位（1）建站目的。

教育网站致力于以先进的互联网络为载体，搭建一个以宣传推广企业形象，提高企业知名度的窗口，让广大消费群体更容易、更方便、更便捷地了解公司。（2）网站功能定位。

为达到建站目的，网站计划提供最新的“平顶山韩创教育咨询有限公司”重要业务通知和新闻公告，并通过本网站公布公司各个方面的相关资料和介绍。

4．网站内容设计与规划

根据甲方企业的基本要求，结合乙方多年以来从事网站建设的经验，策划平顶山教育网站整体基本栏目和内容。首先，本网站是一个动态网站。（1）网站名称：平顶山韩创教育咨询有限公司。（2）网站主题：通过网站宣传，树立企业形象，提高企业知名度。（3）网站语言：简体中文。（4）网站风格：以蓝色调为主，体现简洁大方正式，主题鲜明突出（公司宣传，业务推广），要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点。（5）栏目设置。

网站的栏目设置如表1-1所示。表1-1 教育网站栏目结构（6）网站拓扑图。

本网站的拓朴图如图1-5所示。图1-5 平顶山教育网站拓扑图（7）栏目描述。

组成网站的栏目的共同特点主要在于信息的动态性与实时性。不同版块之间，同时在页面上显示的信息是相互独立的。这些信息是通过后台的管理中心分版块来动态管理的。也就是说，在后台将某条信息添加在哪个版块，该条信息就显示在页面上的相对应的版块上。而且在后台，可将不同的版块分配给不同的管理者来管理。

所有信息的发布均通过数据库程序自动进行，在各版块信息录入模板中设置一条信息所需要的各项字段的编辑录入框，网站管理员只需按要求将各项字段进行录入提交，即可完成信息发布工作。

录入提交后的信息内容，保存在网站数据库中，在网页中通过数据库程序调用，可以实现在网页的任一位置按某一指定形式/风格显示指定的新闻内容。

网站系统图如图1-6所示。图1-6 教育网站系统图

该网站是由不同的独立信息版块组成，每一个独立信息版块均具有以下特点。

专业高效，突出时效——每条信息都基于时间来管理，明确标明发布时间；

信息列表，自动排序——信息次序以时间自动排序，无需人工操作；

图文并茂，强化主题——每条信息都可以附带相关图片，加深渲染效果；

信息维护，简单易行——维护信息只需填写信息主题、内容即可发布；

随意更改，便于管理——可随时通过维护界面增加、修改、删除每条信息，强化信息管理；

分类详尽，便于阅读——利于用户按目的查找信息，直奔主题；

搜索功能，准确快捷——以关键字、时间、类别等方式查找信息节约时间；

两层分类，不限数量——信息按需求分类（无数量限制），自定义类别性质，一级类别下可再次分类；

后台维护，轻松管理——随时可以通过后台维护页面，如更改、删除类别、名称、各条信息内容，轻松直观。（8）网站功能设计。

网站新闻动态发布功能：将网页上的某些需要经常变动的信息，类似新闻、教育服务信息发布和行业动态等更新信息集中管理，并通过信息的某些共性进行分类，最后系统化、标准化发布到网站上的一种网站应用程序。网站信息通过一个操作简单的界面进入数据库，然后通过已有的网页模板格式与审核流程发布到网站上。

该功能大大地减轻了网站更新维护的工作量，通过网络数据库的引用，将网站的更新维护工作简化到只需录入文字和上传图片，从而使网站的更新时间大大缩短，大大加快了信息的传播速度，也吸引了更多的长期用户群，时时保持网站的活动力和影响力。

全站搜索功能：提供对全站的信息进行搜索的功能。站内搜索系统提供了对信息进行多种类型检索的支持。由于系统信息的储存方式有两种，文件系统的静态。html和装入数据库的信息，因此系统采用两种搜索引擎，一种是针对文件系统的全文检索功能，另一种是针对数据库系统的全文检索功能。

维护、管理栏目内容：通过维护界面增加、修改、删除每条信息。提供全面的所发布信息的内容描述，学员可以充分了解所有发布信息内容，并灵活地从网站发布的信息中进行选择。

在线留言系统：主要是为网站浏览者和学员提供对于网站的具体内容和对公司的建议与意见的收集，为网站浏览者和学员加深对“平顶山韩创教育咨询有限公司”的了解提供便利，提高网站的互动性，更好地促进企业服务的职能。

后台操作功能：该系统拥有两个方面的功能，一方面，通过该系统分配不同的栏目或者文档的权限给不同的人，从而界定每个编辑人员的工作程序和权限，实现工作的有序化和系统化；另一方面，根据不同的访问者、不同数据对象可以设定不同的权限。韩创教育网站后台系统权限如表1-2所示。表1-2 韩创教育网站后台系统权限

对于程序中调用的数据库登陆密码，采用密钥处理，在程序源代码中看不到明文。系统程序根据操作人员不同的权限来开放相应的模块操作权限。

用户登录：用户通过密码认证进入网站管理后台，不同的登录用户名拥有不同的管理权限，权限由系统管理员分配。

用户组管理：系统管理员添加、删除用户组，或者修改组属性，分配给特定组不同的信息维护权限。

用户管理：系统管理员创建后台用户账号并分配相应的管理权限。用户权限包括：信息发布员，对某个栏目的某类信息的添加、编辑、删除权限和时间权限；栏目管理员：对某个栏目的信息发布员管理、栏目信息的添加、编辑、删除权限和时间权限；超级管理员：用来管理注册用户或者具有一定权限的其他管理员，维护网站的运行。（9）网站的非功能性需求。

① 技术需求。

软硬件环境需求。

系统应可运行于Windows平台。

系统采用B/S架构，可通过浏览器访问，可使用IE6.0或更高版本的IE浏览器以及其他主流浏览器。

系统运行于Internet网络中。

系统数据库使用MySQL数据库。

性能需求。

本系统在正常的网络环境下，应能够保证系统的及时响应。

网站栏目相应功能响应时间不超过15s。

安全保密需求。

本系统的系统架构以及权限机制可以保证系统的安全性。

本系统采用B/S模型，服务器数据源与客户端分离，保证了数据的物理独立性。

用户授权机制通过角色的定义管理实现，通过定义某些角色能进行的操作权限，限定用户的操作权限，实现对用户的授权。

可维护性和可扩展性。

本系统的应用平台设计中选择B/S结构，采用基于PHP技术，使系统具有良好的可维护性和可扩展性。

② 网站首页界面。

网站首页界面大致如图1-7所示。图1-7 教育网站首页示意图

5．网页设计（1）网站整体风格。教育网站首页设计将采用具有教育行业特征的图文版形式，突出网站商业化、专业化、榜样化、规模化等感觉。配之以形象、精致的LOGO徽标以及特有的图案，塑造网站整体专业、规模的形象。在整体形象上要表现出主题突出、内容精干、形式严肃简洁、整体大方的特点，让人有耳目一新之感。网站整体风格统一，以文字为主体，同时配以精巧静态或动态图片，以吸引访问者的注意力，表达创新精神以及上升动力。在网站的整体设计上，强调人性化和参与意识，为访问者尽可能地提供更多的在线服务和沟通渠道，充分利用互联网的交互功能，呈现整体友好的界面结构。（2）首页风格。网站首页的设计体现性质和风格，也代表着教育企业整体的品牌形象，所以首页设计在本项目工程中占有十分重要的位置。

首页的设计，将确定平顶山韩创教育咨询有限公司整体形象设计规划，网站所有的页面将具有统一风格。采用Flash、GIF动画等技术增强网站的活力。在版面上，力争简洁、清爽的风格效果，简化页面，摒弃大量图形点缀的模式，以求速度和风格兼具。（3）栏目页风格。栏目页整体风格和首页风格一致，并且为了将丰富的含义和多样的形式组织成统一的页面结构，形式、语言必须符合页面内容，灵活运用各种手段，通过空间、文字、图形之间的相互关联建立整体的均衡状态，产生和谐的美感。点、线、面相结合，充分表达完美设计意境，向浏览者传达相应的信息。

6．网站技术解决方案、维护及测试

韩创教育网站关键技术如表1-3所示。表1-3 韩创教育网站关键技术一览表

7．网站发布与推广（1）利用自己的服务对象资源推广。网站建好后，首先将它介绍给公司的服务对象。他们对公司的网站是最感兴趣的。他们通过公司的网站可以更方便快捷地了解和查询到相关的信息，可以更加方便地与公司沟通。这些对象是网站的忠实访问者。（2）通过搜索引擎推广。网站做好后，就去中文雅虎、新浪、搜狐、网易等网站上进行搜索引擎登记，让更多检索、帮助同行业的人查找到公司的网站。（3）利用自己的网站推广。网站建好后，不断更新自己的网站内容，把自己的各种服务做到网上，让人们产生访问兴趣，这样会给访问者留下好的印象，增加回头率。（4）利用其他网站推广。与相关网站交换首页广告、友情链接，在全国各大能发布信息、广告、留言及论坛的网站上发布广告信息。（5）利用传统媒体推广。适当在报刊、电台、路牌等传统媒体发布网站广告，还可将网址打印在公益广告等宣传资料上，让更多的人了解公司的网站。

通过上述的宣传和推广，可以提高网站的访问率。访问率越高，了解的人就越多。就可以更好地服务社会，最终达到利用网站产生良好社会影响的目的。

1.1.4 任务评价

本任务的考核是通过教育的网站规划书完成结果为最终考核，考核的主要内容是了解网站开发流程，掌握网站规划书的书写规范，学会完成教育网站规划书的撰写。表1-4所示为本任务考核标准。表1-4 本任务考核标准

续表

1.1.5 任务小结

本任务主要了解网站开发流程，明确网站规划书在网站开发中的地位，掌握网站规划主要内容和格式，掌握网站规划书撰写规范，最终完成教网站规划书的撰写。1.2 任务二 网站开发项目准备

1.2.1 任务描述

本任务主要介绍网站开发前网站开发工具的安装知识。安装的过程其实是熟悉软件环境的过程，除安装软件开发工具之外，整个开发环境对开发工具也有很多要求，包括对工具使用的方便程度、软件的熟悉程度、软件间的兼容性等，在网站开发之前就要完成开发环境的搭建，下面针对教育网站建设所需的软件，介绍其安装方法。

1.2.2 相关知识

1．phpStudy 2011

phpStudy 2011 是一个PHP调试环境的程序集成包。

该程序包集成最新的 Apache+PHP+MySQL+PhpMyAdmin+ZendOptimizer，一次性安装，无需配置即可使用，是非常方便、好用的PHP调试环境。该程序不仅包括PHP调试环境，还包括了开发工具、开发手册等。

2．织梦内容管理系统（DedeCMS）

织梦内容管理系统（DedeCMS）以简单、实用、开源而闻名，是国内最知名的PHP开源网站管理系统，也是使用用户最多的PHP类CMS系统，经历了几年的发展，目前的版本无论在功能方面，还是在易用性方面，都有了长足的发展，DedeCMS免费版的主要目标用户锁定在个人站长，功能更专注于个人网站或中小型门户的构建，当然也不乏企业用户和学校等使用本系统。织梦内容管理系统（DedeCMS）基于PHP+MySQL的技术架构，完全开源加上强大稳定的技术架构，使用户无论是目前打算做个小型网站，还是想让网站在不断壮大后仍能得到随意扩充都有充分的保证。

1.2.3 任务实施（1）双击phpStudy2011 程序安装包中setup.exe图标，显示安装向导界面，如图1-8 所示。图1-8 phpStudy 2011安装向导界面（2）单击“下一步”按钮，进入用户许可协议条款界面，选择“我接受”，如图1-9所示。图1-9 phpStudy 2011许可协议界面（3）单击“下一步”按钮，选择软件安装的路径，如图1-10所示。完成后单击“下一步”按钮，选择PHP程序存放目录，如图1-11所示。图1-10 phpStudy 2011安装路径界面图1-11 选择PHP程序存放目录（4）单击“下一步”按钮，选择安装组件，如图1-12所示。图1-12 phpStudy 2011选择组件界面（5）单击“下一步”按钮，选择开始菜单文件夹，如图1-13所示。图1-13 phpStudy 2011选择开始菜单文件夹界面（6）单击“下一步”按钮，准备安装，如图1-14 所示。图1-14 phpStudy 2011准备安装界面（7）单击“安装”按钮，开始安装，如图1-15和图1-16所示，安装完成出现提示窗口。图1-15 phpStudy 2011正在安装界面图1-16 phpStudy 2011安装完成界面

1.2.4 任务评价

本任务的考核以是否能完成网站开发软件Photoshop CS5、Dreamweaver CS5和phpStudy 2011的正确安装为最终考核标准，考核的主要内容是了解常用的PHP网站开发工具软件，并掌握其安装步骤，完成网站开发软件的安装。表1-5所示为本任务考核标准。表1-5 本任务考核标准

1.2.5 任务小结

本任务概括性地介绍了几款网站开发工具的功能，并对其安装过程进行了详细描述，通过本任务的学习，大家可以顺利地搭建网站开发环境，为后面教育网站的具体开发奠定基础。1.3 任务三 HTML认识

1.3.1 任务描述

HTML（Hyper Text Mark-up Language）即超文本标记语言，是一种通用的Web页面描述语言。HTML语言是由HTML标记组成的描述性文本，HTML标记可以说明文字、图形、动画、声音、表格、链接等。本任务通过学习HTML语言文档格式及常用的HTML标记等内容，最终完成一个简单的网页制作。

1.3.2 相关知识

1．HTML语言

HTML是超文本标记语言（Hyper Text Mark-up Language）的简称，是一种简单易学、与操作系统平台无关的通用页面描述语言。自1990年以来，HTML就一直被用作WWW（WordWideWeb）上的信息表示语言，用于描述网页的格式设计和它与WWW上其他网页的连接信息。

2．HTML文档的基本结构

网页内容

① HTML文件以开头，以结尾。

②…：表示这是网页的头部，用来说明文件命名和与文件本身的相关信息。可以包括网页的标题部分：。

③ …：表示网页的主体即正文部分。

④ HTML 语言并不要求在书写时缩进，但为了程序的易读性，建议网页设计制作者使标记的首尾对齐，内部的内容向右缩进几格。

3．HTML文档常用标记（1）排版标记。

常见的排版标记为、

、
、

：像很多电脑语言一样，HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不做显示。

：称为段落标记。作用：为字、画、表格等之间留一空白行。

例1-1：使用

标记对段落进行换行。代码如下所示，实例源文件位于本书素材文件中的“第1章源码\1-1.html”，效果如图1-17所示。

这是段落标记p

这是段落标记p

：称为换行标记。作用：令字、画、表格等显示于下一行。

例 1-2：使用
标记对段落进行换行。代码如下所示，实例源文件位于本书素材文件中的“第1章源码\1-2.html”效果如图1-18所示。

这是段落标记br

这是段落标记br图1-17 使用

标记对段落进行换行图1-18 使用
标记对段落进行换行

例1-3：添加一个水平线。实例源文件位于本书素材文件中的“第1章源码\1-3.html”，效果如图1-19所示。

例1-4：对文字居中排版。实例源文件位于本书素材文件中的“第1章源码\1-4.html”，效果如图1-20所示。

常用的字体标记为、

、

、

、

、

、

、、等。

：可以用这个元素及其属性来设定字体的大小、颜色和字体风格。

例 1-5：用字体大小属性（size）来设定字体的大小。实例源文件位于本书素材文件中的“第 1章源码\1-5.html”，效果如图1-21所示。

这一段的字体大小的值是2。

例1-6：用face属性来设定字体风格。实例源文件位于本书素材文件中的“第1章源码\1-6.html”，如图1-22所示。

这一段体字体为黑

例1-7：用颜色属性（color）来设定字体颜色。实例源文件位于本书素材文件中的“第1章源码\1-7.html”，效果如图1-23所示。

这一段的字体颜色是红色

、

、

、

、

、

：这些是标题标记，由

～

变粗、变大、加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。

例 1-8：使用

～

修饰标题，实例源文件位于本书素材文件中的“第 1 章源码\1-8.html”，效果如图1-24所示。

Header Level 1

Header Level 2

Header Level 4

Header Level 5

Header Level 6

试读结束[说明：试读内容隐藏了图片]

下载完整电子书