网页设计基础及技术课件

1、,网页设计与网站建设,第二讲 网页设计基础及技术,研究室: 软件支持技术 教 师: 王红滨,1,PPT学习交流,学习目标,掌握HTML的基本语法。 掌握简单的HTML代码编写。 掌握数据库的创建方法。 掌握连接数据库的ODBC方法。,2,PPT学习交流,内容概述,HTML 数据库,本章将介绍HTML语言及其编写，再介绍数据库技术及其连接方法。,3,PPT学习交流,内容概述,HTML 数据库,本章将介绍HTML语言及其编写，再介绍数据库技术及其连接方法。,4,PPT学习交流,1.HTML,1.1 HTML语言简介 1.2 HTML的基本语法 1.3 HTML代码的编写 1.4 标签选择器,HTM

2、L是一种网页制作语言，通过标记可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显示出来。网页基本上都是由HTML语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。,5,PPT学习交流,1.HTML,1.1 HTML语言简介 1.2 HTML的基本语法 1.3 HTML代码的编写 1.4 标签选择器,HTML是一种网页制作语言，通过标记可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显示出来。网页基本上都是由HTML语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。,6,PPT学习交流,1.1 HTML语言简介,HTML是英文H

3、yperText Markup Language的缩写，其含义是“超文本标记语言”用它编写的文件扩展名是“.html”或“.htm”，它们都是可供浏览器解释浏览的文件格式。 在制作网页时，大都采用一些专门的网页制作软件，如FrontPage，Dreamweaver等。这些软件都是所见即所得的，非常方便。使用这些编辑软件可以像使用word一样来制作网页，而不用编写代码。在不熟悉HTML语言的情况下，照样可以制作网页，这是网页编辑软件的最大成功之处；但它们的最大不足之处是受软件自身的约束，将产生一些垃圾代码，这些垃圾代码将会增大网页体积，降低网页的下载速度。,7,PPT学习交流,1.HTML,1.

4、1 HTML语言简介 1.2 HTML的基本语法 1.3 HTML代码的编写 1.4 标签选择器,HTML是一种网页制作语言，通过标记可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显示出来。网页基本上都是由HTML语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。,8,PPT学习交流,1.2 HTML的基本语法,HTML的任何标记都由“”围起来。 单标记 只需单独使用就能完整地表达意思，这类标记的语法是： 最常用的单标记是，它表示换行。 双标记 它由“始标记”和“尾标记”两部分构成，必须成对使用，始标记前加一个斜杠（/）即成为尾标记。这类标记的语法是： 内容

5、 其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在 标记中： 第一：,9,PPT学习交流,标记属性 许多单标记和双标记的始标记内可以包含一些属性： 各属性之间无先后次序，属性也可省略（即取默认值），例如单标记表示在文档当前位置画一条水平线，一般是从窗口中当前行的最左端一直画到最右端。带一些属性： 其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对“”号括起来的百分数，表示相对于充满整个窗口的百分比），

6、也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是100%。,10,PPT学习交流,1.HTML,1.1 HTML语言简介 1.2 HTML的基本语法 1.3 HTML代码的编写 1.4 标签选择器,HTML是一种网页制作语言，通过标记可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显示出来。网页基本上都是由HTML语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。,11,PPT学习交流,HTML的基本结构分为三部分： HTML标记 标记用于HTML文档的最前边，用来标识HTML文档的开始。而标记恰恰相反，它放在HTML文档的最后边，

7、用来标识HTML文档的结束，两个标记必须一起使用。 事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有标签，也不对该标签做任何操作。但是，为了提高文档的适用性，使编写的HTML文档能适应日新月异的Web浏览器，还是应该养成使用这个标签的习惯。,1.3 HTML代码的编写,12,PPT学习交流,head标记 和构成HTML文档的开头部分，在此标记对之间可以使用 ， 等标记对，这些标记对，这些标记对都是描述HTML文档相关信息的标记对，两个标记必须一块使用。 Body标记 是HTML文档的主体部分，在此标记对之间可包含、 、等众多标记，它们所定义的文本、图像等将会在浏览器内显示出

8、来，两个标记必须一块使用。,13,PPT学习交流,从上述讲解中可以看出HTML文档的基本结构如下图所示：,14,PPT学习交流,区段格式标记 此类标记的主要用途是将HTML文件中得某个区段文字，以特定格式显示，增加文件的可看度。主要的有： .：网页标题。 .：i=1,2,.,6, 标题。 ：产生水平线。 ：强迫换行。 .：文件段落。 .：以原始格式显示。 .：标注联络人姓名、电话、地址等信息。 .：区段引用标记这部分内容表示引用文字，一般每一行会向内缩进一定的距离。引用可以嵌套使用，造成多层缩进的效果。,15,PPT学习交流,字符格式标记 用来改变HTML文件文字的外观，增加文件的美观程度。主

9、要有： .：粗体字。 .：斜体字。 ：下划线。 .：改变字体设置。 .：居中对齐。 .：标记内的文字比前边大一号的字体显示。 .：标记内文字比前边小一号字体显示。 .：引文内容一般用斜体表示。 和：上标和下标。,16,PPT学习交流,链接标记 链接可以说是html超文本文件的命脉，html通过链接标记来整合分散在世界各地的图、文、影、音等信息。此类标记的主要用途为标示超文本文件链接： .：建立超级链接。 本标记对的href属性是必不可少的。href的值可以是URL形式，即网址或相对路径。 例：哈尔滨工程大学 表示点击“哈尔滨工程大学”链接则进入http:/这个网页中。 例：我的主页,17,PP

10、T学习交流,多媒体标记 此类标记用来显示图像数据。主要有： ：嵌入图像。 ：嵌入多媒体对象。 ：背景音乐。 例： alt：无法显示图片时的替代文字。 例： 例： ,18,PPT学习交流,表格标记 最后要讲的是表格，这也是一组十分重要的标记，一方面可以制作列表形式的输出，另一方面可用作屏幕区域的划分。表格的标记是： . ：定义表格 . ：表格行 . ：表格列 标记比较重要的参数有： border=边框线宽度，可以显示表格边框线。 width=表格宽度，如果是一个正整数，表示以屏幕点数为单位的表格宽度；如果是一个百分数，表示表格宽度占浏览器宽度的百分比。,19,PPT学习交流, 表格标记 下面是表

11、格标记的示例： 左上格 右上格 左下格 右下格 ,带有width、height属性,20,PPT学习交流,1.HTML,1.1 HTML语言简介 1.2 HTML的基本语法 1.3 HTML代码的编写 1.4 标签选择器,HTML是一种网页制作语言，通过标记可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显示出来。网页基本上都是由HTML语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。,21,PPT学习交流,1.4 标签选择器,很多程序员习惯手工编码，为此，Dreamweaver特意制作了标签选择器和标签编辑器。使用【标签选择器】可以将 Dreamweaver标签库中的任何标签插入页面中，具体步骤如下。 选择【查看】/【代码】命令，切换到代码视图，确定插入点在代码中的位置，单击鼠标右键，在弹出的快捷菜单