大学信息技术实用教程

第5章网页设计与制作万维网（World Wide Web，WWW）是Internet提供的服务之一，它是由许多互相链接的网页组成的信息资源网络，以丰富的文字资料、光彩夺目的图像以及生动活泼的动画效果等，吸引着无数的用户。 本章将介绍HTML、CSS、JavaScript以及如何使用Dreamweaver CS6制作网页。首先概述网页设计的相关知识、工作模式、网站设计流程，然后讲解HTML的文档结构、常见标签及属性、Dreamweaver CS6工作界面、CSS语法及其在HTML文件中的添加方法、两种常见网页布局方法（表格布局和Div布局）、JavaScript语法及其在HTML文件中的添加方法，并以Dreamweaver CS6为例设计一些相关的实验。*后，介绍下一代HTML标准，即HTML5。 5.1网页设计概述〖1〗5.1.1网站与网页〖*4/5〗1. 简介WWW由遍布世界各地的Web服务器组成，而Web服务器又由许多网页（如图51所示）构成，网页中的超链接可将其链接到其他网页，构成万维网纵横交织的结构。 图51网页示例 实际上，网页就是一个纯文本文件，通常是HTML格式，扩展名为html或htm，存放在互联网上某个位置的某台计算机中。浏览网页时，在网页上右击，在弹出的快捷菜单中选择“查看源文件”命令，如图52所示，即可看到网页的实际内容。 图52“查看网页源代码”菜单项 网页通过网址来识别与存取，当我们在浏览器的地址栏中输入网址后按Enter键或单击超链接后，经过一段复杂而又快速的程序，网页文件会被传送到我们的计算机中，*终通过浏览器解释、展示出来。 通过超级链接连接在一起的一系列逻辑上可视为一体的页面，称为网站。其中，作为一个组织或个人在WWW上开始的页面，称为首页或主页。 2. 工作模式 WWW采用浏览器/服务器（Brower/Server，B/S）工作模式，如图53所示。服务器是指驻留在Internet上某台计算机上的程序，通常用于存储用户所需信息，并能在用户需要时运行脚本和程序。其任务是等待客户机的连接，监听客户机的请求并为这些请求提供服务。而浏览器是指访问Web的客户端软件，将WWW上的网页文件翻译成网页形式呈现出来。 图53B/S模式 〖1〗〖3〗大学信息技术实用教程第5章网页设计与制作〖3〗〖3〗浏览器是用户与服务器进行通信的软件，常见的有微软的Internet Explorer、谷歌的Chrome浏览器、腾讯的QQ浏览器等。 3. 网站设计流程 网站设计主要有3个阶段: 规划准备阶段、网页设计实现阶段、网站发布维护阶段。 (1） 规划准备阶段: 包括需求分析、搜集资料、规划网站结构和页面内容。 (2） 网页设计实现阶段: 包括网页总体设计、各页面设计制作、链接各页面。 (3） 网站发布维护阶段: 包括测试网站、发布网站、维护更新网站。 5.1.2HTML HTML（Hypertext Markup Language），即超文本标记语言，通过标记符号来标记网页中的各个部分，告诉浏览器如何显示其中的内容，例如文字如何处理、画面如何安排、图片如何显示等。浏览器按顺序阅读网页文件，然后根据标记符来解释和显示其标记的内容，对书写出错的标记不指出其错误，也不停止其解释执行过程，只能通过显示效果来分析出错原因和出错部位。 需要注意的是，不同的浏览器可能对同一标记符会有不完全相同的解释，因此在不同浏览器中打开网页可能会有不同的显示效果。 1. HTML文档结构 一个网页对应于一个HTML文件，HTML文件以html或htm作为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来编写HTML文件。 标准的HTML文件具有一个基本的整体结构，即HTML文件的开头标记与结尾标记，其中又包括HTML的头部与实体两大部分。有3个双标记符用于页面整体结构的确认，如图54所示。 图54HTML文档基本结构 标记符说明该文件是用HTML来描述的，是文件的始标记。而则表示该文件的结束，是文件的尾标记。 用于表示头部信息的开始，用于表示头部信息结束。头部中包含的标记有页面的标题、序言、说明等内容，一般不作为内容来显示，但影响网页显示的效果。 标记页面正文的开始，标记页面正文的结束。 由于HTML是纯文本文件，使用记事本程序即可编写网页。当然，也可选用所见即所得软件，如Dreamweaver、Frontpage等制作网页。使用这些软件可以在不熟悉甚至不懂HTML的情况下进行网页设计。 【实验51】用记事本编写网页——制作**个网页。 操作步骤: 【步骤1】打开记事本，输入内容如下: 这是我的**个网页 大家好! 【步骤2】将文件保存为网页文件。 执行“文件”→“保存”命令，在打开的“另存为”对话框中，选择保存类型为所有文件(*.*)，文件名为51.html，并修改保存路径，如图55所示。 图55保存为网页文件 【步骤3】在所保存路径中找到51.html文件，双击文件图标，用浏览器打开，效果如图56所示。 图56**个网页需要注意的是，用于定义网页的标题，它的内容显示在网页窗口的标题栏中。 2. 常见标签 (1） HTML标题是通过、、、、、定义。 (2） HTML段落是通过标签定义。 (3） HTML链接是通过标签定义。 (4） HTML图像是通过标签定义。 3. 属性 可以在需要时为HTML标签添加属性，属性一般以名称/值对的形式出现在开始标签中。 例如: 是将段落居中对齐。 是将网页背景颜色设置为黑色。 是将bg.jpg作为网页的背景图片，如果图片较小，则会在屏幕上平铺。 【实验52】常见标签及属性。 操作步骤: 【步骤1】打开记事本，输入如下内容: 这里是标题 1 这里是标题 2 这里是标题 3 这里是标题 4 这里是标题 5 这里是标题 6 **段 第二段 **个网页 其中，href属性指明了超链接的目标链接。 在中，src属性指定所显示图片的文件名，width属性指定所显示图片的宽度，height属性指定所显示图片的高度。 【步骤2】将文件保存为52.html。 【步骤3】用浏览器打开52.html，效果如图57所示，并测试网页中的超链接。 图57预览网页 需要注意的是，为保证能正常链接，须将51.html文件和52.html文件放在同一路径下。 5.1.3Dreamweaver CS6简介 Dreamweaver是Macromedia公司开发的可视化网页制作工具，使用所见即所得的界面，也有HTML编辑的功能，与Flash、Fireworks合在一起称为网页设计三剑客。其中，Dreamweaver用于制作网页文件、Flash用于制作网页动画、Fireworks用于处理网页中的图片。 2005年，Macromedia被 Adobe公司收购，更名为Adobe Dreamweaver（之前称为Macromedia Dreamweaver），随后相继推出Dreamweaver CS3、Dreamweaver CS4、Dreamweaver CS5、Dreamweaver CS5.5和Dreamweaver CS6等版本。 本章以Dreamweaver CS6为例，执行“开始”按钮→“程序”→Adobe Dreamweaver CS6命令，启动Dreamweaver CS6。显示如图58所示欢迎屏幕，可以根据需要打开已有网页文件或新建网页文件。 图58Dreamweaver CS6欢迎屏幕 打开编辑窗口后，Dreamweaver CS6工作界面如图59所示，该窗口包括菜单栏、插入面板、文档区、属性面板、状态栏、面板组等。 图59Dreamweaver CS6工作界面 1. 菜单栏 Dreamweaver CS6的工作界面主要包含10个菜单: 文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助，网页制作所用到的所有功能都包含在菜单中。 2. “插入”面板 “插入”面板包含“常用”“布局”“表单”“数据”、Spry、jQuery Mobile、InContext Editing、“文本”“收藏夹”9个选项卡，如图510所示。 图510“插入”面板 3. 文档区 文档区显示当前创建和编辑的网页文档，是用户的主要工作区。在该工作区中可以输入文字、插入图片、设置超链接等。 文档顶端是文档窗口标题栏，显示当前打开网页文档的文件名。如果打开多个网页文件，单击各文件名可以切换文档。 文档窗口有3种视图: 设计视图、代码视图、拆分视图，可以通过“文档”工具栏（如图511所示）进行视图间的切换。 图511“文档”工具栏 4. 状态栏 位于文档窗口的下方，提供与当前文档有关的一些信息，如图512所示。状态栏左侧显示HTML标记的部分是标签选择器，显示环绕当前选定内容的标签的层次结构。 图512状态栏 单击该层次结构中的任何标签即可选择该标签及其全部内容，例如单击标签则选择整个文档。 5. “属性”面板 不同的对象具有不同的属性，“属性”面板用于查看和更改当前所选对象的属性。双击“属性”面板中的“属性”标签，可以折叠或展开属性面板。属性面板中的内容根据选定的元素会有所不同，如图513所示为表格中单元格的属性。 图513“属性”面板 6. 面板组 在Dreamweaver CS6工作界面的右侧是面板组。每个面板都集成了不同类型的功能，通过“窗口”菜单可以对这些面板进行打开和关闭控制。 【实验53】用Dreamweaver CS6设计网页。 操作步骤: 【步骤1】新建网页文件53.html。 打开Dreamweaver，执行“文件”→“新建”命令，打开“新建文档”对话框，如图514所示。选择空白页，页面类型为HTML，布局为，单击“创建”按钮，即可新建一个网页文件，默认文件名为Untitled1.html。可执行“文件”→“保存”命令，将其另存为53.html。 图514“新建文档”对话框 【步骤2】设置网页标题。 将“文档”工具栏右侧标题文本框内输入“李白介绍”，如图515所示。 图515设置网页的标题 【步骤3】输入文本。 可在“文档”工具栏中，单击“拆分”按钮，将文档视图转换成拆分视图，此时文档区域左侧显示代码视图，右侧显示设计视图。 在右侧设计视图中输入如下内容，如图516所示。 图516拆分视图下输入文本 李白 字太白，号青莲居士，唐朝诗人，有“诗仙”之称。代表作有《静夜思》《梦游天姥吟留别》《将进酒》等。 【步骤4】将**段内容修改为标题1。 选中**段内容“李白”，单击“插入”面板中“文本”选项卡内的h1按钮，如图517所示，将**段文字设置为标题1。 图517“文本”选项卡 在左侧代码视图中查看，可见: “李白”已经改为“李白”。 【步骤5】设置页面背景颜色为#FFFFCC。 单击“属性”面板中的“页面属性”按钮，如图518所示，打开“属性”对话框。 图518“属性”对话框 选择分类为外观（HTML），在“外观（HTML）”中设置背景为#FFFFCC，单击“确定”按钮即可，如图519所示。 图519“页面属性”对话框