项目14 编写HTML代码创建网页.pptVIP

* * 项目十四 编写HTML代码创建网页 情 境 设 置 经过前面若干项目的制作，大家已经可以熟练的使用Dreamweaver制作出图文并茂的网页。这得益于Dreamweaver方便易学的操作，以及它所见即所得的编辑界面。然而，即使不用Dreamweaver而是用Windows附件中的记事本也能做出一个网页。这是什么原因？这是由于网页本质上是一个用HTML语言写成的文本文件，只不过文件的扩展名不是.txt，而是.html。如果会使用这种语言的话，就可以直接在记事本中编写网页。而我们前面项目利用Dreamweaver制作完成的网页， Dreamweaver实际上在幕后还是要将其保存成HTML语言格式的文本文件。本项目中，我们要亲自用HTML语言编写代码的方式，来完成一个网页的制作。并以此来学习网页的本质，也就是网页的编写语言——HTML。 项 目 展 示 本项目完成后的大体效果如下 项 目 目 标 能够掌握网页的文档结构 能够知道和使用常见的HTML标签 能够使用Dreamweaver的代码编辑窗口编辑网页源代码 项 目 分 析 具体工作任务： 1.新建一个空白网页index.html，并将编辑窗口切换到代码模式 2.设置网页的标题为“求职” 3.利用 h1插入标题文本 4. 利用p插入段落文本 5.利用img插入图片 6.利用table插入表格 7.利用form插入表单 8.用a制作超链接 实 施 步 骤 步骤一：新建一个站点，并在站点根文件夹中建立一个images子文件夹和index.html空白网页。 步骤二：利用标签插入标题文本和其他网页内容。这一步中将要用到HTML语言中的几个标签，如h1pimgtable forma等。 步骤三：保存并预览。 知 识 链 接 一、HTML语言的基本语法知识 HTML是一种包含大量的标签的语言，称为超文本标记语言。每个标签都有一定的意义，可以使用这些标签在网页中插入各种元素信息，标签不在网页浏览器中显示，它们仅用来描述那些需要显示的元素信息的格式，如文本元素以何种字体和颜色显示，是否居中对齐，是否是超链接等等。当用户浏览网页时，浏览器会自动解释这些标签的含义，并按照标签指定的样式显示它所标记的元素信息，如当浏览器碰到h1/h1时，就会将里面的字体加黑加粗显示，碰到table/table时就会知道画一个表格。 网页本质上就是用HTML语言的这些标签并按照一定格式编写成的文本文件，因此有时也把网页文档叫做HTML文档。 知 识 链 接 一、HTML语言的基本语法知识 HTML的标签都由尖括号括着标签名构成，标签按照是否成对出现，可以分成单标签和双标签。标签都有若干个属性，用来具体定义所描述元素信息的样式，当然属性也可以省略，此时会按照默认的样式显示。 标签的基本书写格式为如下。 单标签: 标签名 属性1=值 属性2=值 ……或标签名 属性1=值 属性2=值 ……/。 双标签： 标签名 属性1=值 属性2=值 ……内容/标签名。 标签可以嵌套时使用，比如aimg/a,tdform…/form/td等等，来达到不同的功能和样式需求。 知 识 链 接 二、网页文档的基本结构 html head 文档头部分 /head body 文档体部分 /body /html 知 识 链 接 三、HTML中的其他主要标签介绍 font/font ul/ul ul/ul ol/ol frameset/frameset 知 识 链 接 四、利用好Dreamweaver在编写代码中的方便功能 我们说过，学会了HTML语言后，完全可以采用记事本之类的普通文本编辑器，直接编写代码创建网页，但即使如此，最好也采用Dreamweaver。该软件为喜欢编写代码的人提供了专业的编辑器，它不但可以为我们自动插入基本标签（如html/html），把文档结构创建好，而且在输入其他标签及标签的属性时，它会弹出下拉菜单，提示标签和属性的名字，也可以通过直接选择的方式输入代码，这是普通文本编辑软件所没有的。 这些功能大大减少了代码书写量，并帮助我们正确书写各种标签。 知 识 拓 展 项目展示 知 识 拓 展 制作要点提示 建立页面文件“index.html”。 用标签h1建立标题文本。 用标签ul制作列表文本。 插入table制作表格。 在单元格中用img插入图像。 小 结 网页本质上是用HTML语言编写的文本文档。本项目我们学习了该语言的基本语法知识，认识了一些常用标签，并对网页文档的基本结构作了阐