网页设计语言基础.ppt

《网页设计语言基础.ppt》由会员分享，可在线阅读，更多相关《网页设计语言基础.ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计语言基础网页设计语言基础2.1HTML语言简介HTML语言是一种在使用转义码文档中应用的格式化语法。其提供一些语法标记，再由浏览器解释生成相应的页面。下面是一个简单的HTML语言的例子。第一个主页大家好！运行效果（点击）2.2基本页面布局页面的布局也是编写HTML文档的一个重要内容，良好的布局能够产生良好的视觉效果，这也是网页设计人员所追求的一个设计目标。2.2.1 HTML文档的基本结构HTML文档包括文件头、表头和主体三部分。这儿是标题部分这里是主体部分运行效果2.2.2常用页面标记1.基本标记：和，和，和，和2.特殊信息标记3.网页子标题标记例2-2运行效果4.段落标记和换行标记

2、例2-3运行效果5.水平线标记例2-4运行效果6.原文显示标记例2-5运行效果2.2.3页面布局综合实例下面将介绍设计一个基本页面布局的综合实例，在这个实例中综合运用了、等标记。注意这个实例中各种标记的使用情况，并结合前面的介绍深入掌握它们的用法。例2-6运行效果2.3文 本 修 饰为了使网页内容更加丰富多彩，文本的修饰是一个重要的环节。通过文本修饰，可以突出文档中的重点内容，避免整个文档外观上的单一化，从而产生良好的视觉效果。2.3.1文本修饰的主要标记最主要的几种标记包括、等标记。1.基本字体标记例2-7运行效果2.字体效果、例2-8运行效果3.align对齐方式左对齐：align=lef

3、t 右对齐：align=right居中对齐：align=center2.3.2文本修饰的其他标记1.换行引用标记2.程序代码标记3.上标字和下标字4.活动字幕标记例2-9运行效果5.特殊字符注意：HTML语言不区分大小写，所以在使用标记和对应的参数时，无论大小写，对应的都是相同的内容。8.3.3文本修饰的综合实例在这个实例中，采用对主标题变字体、变颜色的方式，对次标题则采用加粗变斜体等方式，突出了文档的主题。加水平线有助于分隔文档，加活动字幕则增加整个文档的动感。例2-10运行效果2.4超链接前面学习了基本的页面布局和文本修饰，虽然已经能够制作简单的独立页面，但是这种页面严格来说还不能称之为H

4、TML页面，因为这种页面缺少HTML中最有特色、功能最强大的元素：超链接。2.4.1超链接的基本概念超链接是由链接文字、图像及目标块组成。超链接的类型主要有两种，即文本超链接和图像超链接。链接的目标可以是图像、文字、页面及其他格式的文件。在定义一个超链接的地点时可以选用两种方式，绝对路径和相对路径。2.4.2创建超链接的方法由标记的语法结构可以看出，由于HTML语言的超链接性，在设定一个超链接时有很多参数可供选择，并能实现不同的链接效果。下面介绍一下几个参数的含义：（1）class和id属性：该属性用于设定链接点所属的类型和分配的ID号，通常不加以设定。（2）href属性：该属性用于设定链接地

5、址，但是链接地址必须为URL地址，如果没有给出具体路径，则默认路径和当前页的路径相同。（3）target属性：该属性可以在一个新窗口里打开链接文件。（4）title属性：该可以让鼠标指针悬停在超链接上的时候，显示该超链接的文字注释。例例2-11 例例2-12 2.5.1图像的基本知识1.图像的种类：GIF格式和JPG格式GIF格式：支持256色模式，采用无损压缩格式，图像与原来的效果完全相同，但不支持真彩色图像。JPG格式：支持16位真彩模式，采用有损压缩模式，图像质量比原来稍差一些，但压缩比最大。2.内部图像和外部图像2.5.2HTML中的图像标记1.基本图像标记例2-14运行效果例2-15

6、运行效果2.地图作用区域标记3.设定地图标记运行效果2.6表格表格是HTML页面中十分重要的组成部分。首先，表格能够把有关数字或信息集中起来，直观地反映给用户；其次，通过表格的使用，可以更好地组织页面，使图像、文字的混合排列变得更加容易，效果也好得多2.6.1表格的基本概念一个基本的网页表格通常由表格的标题、表栏、数据项、数据等元素组成。标题表示了这个表格的主要内容；表栏是指表格中一个个小的矩形区域，它用来存放数据等；数据项，又称表头，表示数据项所对应的名称；数据是指存放在表栏中的文字、数字等信息。2.6.2简单表格简单表格1.基本表格标记2.表格标题标记3.行标记4.单元格标记5.表头设计标记运行效果