大学计算机基础教程(第2版)：第11章 网页制作（标准屏）课件.pptxVIP

第11章 网页制作华南理工大学计算机公共基础教研室内容提要修饰美化网页发布网页网页的结构与内容网页制作概述网站设计概述网页布局与排版制作网页特效华南理工大学计算机公共基础教研室11.1 网页制作概述网页的概念 网页就是在浏览器上看到的一个个页面，它是一种独立的超文本文件，通常以HTML语言编写而成。与普通文本相比，超文本具有两个特点：一是不仅含有简单文本，还可加入表格、图像、动画、声音和视频等多种内容，在浏览器页面上呈现效果；二是能够提供索引式链接，可从一个页面跳转到另一页面，得以实现与网络上的各种网页相连。华南理工大学计算机公共基础教研室11.1 网页制作概述网页的种类华南理工大学计算机公共基础教研室11.1 网页制作概述静态网页 静态网页的内容以及所呈现的效果与事先设计的完全一致，且不能发生信息交互的网页。 通常使用HTML语言编写。华南理工大学计算机公共基础教研室11.1 网页制作概述DHTML动态网页 DHTML（英文Dynamic HTML的缩写）动态网页只需在浏览器中解释、运行就能够实现人机交互和动态显示效果，故亦称“客户端动态网页”。 通常使用CSS（层叠样式表）、JavaScript（脚本语言）、DOM（文本对象模型）与HTML相结合制作而成。华南理工大学计算机公共基础教研室11.1 网页制作概述动态网页 客户端与服务器端能够发生交互信息的网页。网页内容能够自动更新。 动态网页通常采用ASP、PHP、JSP等技术制作，由服务器解释、执行，生成相应的HTML代码，返回用户端的浏览器呈现用户所需的信息。 华南理工大学计算机公共基础教研室11.1 网页制作概述网页制作工具 目前制作网页的工具很多，从功能上主要分为三种：代码编辑工具、“所见即所得”可视化编辑工具和混合型编辑工具。华南理工大学计算机公共基础教研室11.1 网页制作概述 采用代码编辑工具，用户便于控制代码，能够较好地实现HTML代码在浏览器中的显示效果，网页的代码做得较为精炼。缺点是只适用于对网页制作语言比较熟悉的用户。代码编辑工具华南理工大学计算机公共基础教研室11.1 网页制作概述 采用可视化编辑工具的优点是应用系统提供的各种工具选项，可直观地对网页显示效果进行排版，制作效率较高；代码由系统自动生成，用户即便不熟悉网页制作语言也可制作出较好的网页。其缺点是代码由系统自动生成，难免产生一些冗余的代码。可视化编辑工具华南理工大学计算机公共基础教研室11.1 网页制作概述 混合型工具的功能比较全面。除了兼有上述两种工具特点外，一般还具有创建、管理站点文件等功能，适用于整个网站的建设和管理。具有代表性的软件如Dreamweaver等。混合型编辑工具华南理工大学计算机公共基础教研室11.1 网页制作概述网页制作基本方法1. 使用记事本（文本编辑器）制作网页制作步骤： （1）打开记事本。 （2）输入代码。 （3）保存为网页文档。 （4）使用浏览器测试网页效果。华南理工大学计算机公共基础教研室11.1 网页制作概述网页制作基本方法2. 使用Dreamweaver（混合型编辑器）制作网页制作步骤： （1）启动Dreamweaver软件。 （2）新建HTML文档，先保存并命名文件。 （3）选择“设计”或“拆分”方式，加入各种元素并设置其属性。 （4）按F12预览网页效果。华南理工大学计算机公共基础教研室11.2 网页的结构与内容1. HTML基本语法HTML标签（标记） html head title古诗一首/head body h3登鹳雀楼/h3 h4——王之涣/h4 p 白日依山尽， 黄河入海流。br 欲穷千里目， 更上一层楼。br /p /body /html 一个HTML文件是由许多文字及标签组合而成。标签是用尖括号括起来的字符或者单词，例如titleh3p等。 当浏览器阅读HTML时，它会解析包围文本的所有标签，标签告诉浏览器文本的结构和意义，哪些文本是标题，哪些文本是段落，哪些需要强调，甚至哪里需要放置图片。 因此，一个HTML文件只要经过浏览器的解读，密密麻麻的HTML代码就能转变为图文并茂的网页。华南理工大学计算机公共基础教研室11.2 网页的结构与内容1. HTML基本语法剖析标签/h3是用来结束h3标题的结束标签，它之所以是个结束标签，因为它出现在内容的后面，而且在h3前面有/，所有结束标签都带有/表示标签的结束。通常在部分内容的周围添加标签。这里使用h3/h3标签告诉浏览器“登鹳雀楼”是三级标题。这里是用来标记标题的开始标签。h3登鹳雀楼/h3标签通常由尖括号及标签名组成，尖括号即“”和“”。我们称一对开始和结束标签为匹配标签（双标签）。整个语句称为一个元素，在这里我们称其为h3元素。一个元素由闭合标签及它们之间的内容组成。即：元素=开始标签+内