《网页设计语言基础》_第1页
《网页设计语言基础》_第2页
《网页设计语言基础》_第3页
《网页设计语言基础》_第4页
《网页设计语言基础》_第5页
已阅读5页,还剩13页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

网页设计语言基础注意:本章涉及的程序代码比较多,但是HTML语言是网页设计人员必须掌握的基本知识,也是网页设计和制作的基础,所以希望大家能够熟练地掌握本章的知识点,至少要熟悉常用的HTML语言。精选ppt2.1HTML语言简介HTML语言是一种在使用转义码文档中应用的格式化语法。其提供一些语法标记,再由浏览器解释生成相应的页面。下面是一个简单的HTML语言的例子。<html><head><title>第一个主页</title></head><body><p>大家好!</p></body></html>运行效果(点击)精选ppt2.2基本页面布局页面的布局也是编写HTML文档的一个重要内容,良好的布局能够产生良好的视觉效果,这也是网页设计人员所追求的一个设计目标。精选ppt2.2.1HTML文档的基本结构HTML文档包括文件头、表头和主体三部分。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>这儿是标题部分</title></head><body><p>这里是主体部分</p></body></html>运行效果精选ppt2.2.2常用页面标记1.基本标记:<html>和</html>,<head>和</head>,<body>和</body>,<title>和</title>2.<meta>特殊信息标记3.<hn>网页子标题标记例2-2运行效果4.<p>段落标记和<br>换行标记例2-3运行效果5.<hr>水平线标记例2-4运行效果6.<pre>原文显示标记例2-5运行效果精选ppt2.2.3页面布局综合实例下面将介绍设计一个基本页面布局的综合实例,在这个实例中综合运用了<hr>、<hn>、<br>、<p>、<pre>等标记。注意这个实例中各种标记的使用情况,并结合前面的介绍深入掌握它们的用法。例2-6运行效果精选ppt2.3文本修饰为了使网页内容更加丰富多彩,文本的修饰是一个重要的环节。通过文本修饰,可以突出文档中的重点内容,避免整个文档外观上的单一化,从而产生良好的视觉效果。精选ppt2.3.1文本修饰的主要标记最主要的几种标记包括<font>、<b>、<i>、<u>、<align>等标记。<font>基本字体标记例2-7运行效果2.字体效果<b>、<i>、<u>例2-8运行效果3.align对齐方式左对齐:align=left右对齐:align=right居中对齐:align=center精选ppt2.3.2文本修饰的其他标记<blockquote>换行引用标记2.<code>程序代码标记3.<sup>上标字和<sub>下标字4.<marquee>活动字幕标记例2-9运行效果5.特殊字符注意:HTML语言不区分大小写,所以在使用标记和对应的参数时,无论大小写,对应的都是相同的内容。精选ppt8.3.3文本修饰的综合实例在这个实例中,采用对主标题变字体、变颜色的方式,对次标题则采用加粗变斜体等方式,突出了文档的主题。加水平线有助于分隔文档,加活动字幕则增加整个文档的动感。例2-10运行效果精选ppt2.4超链接前面学习了基本的页面布局和文本修饰,虽然已经能够制作简单的独立页面,但是这种页面严格来说还不能称之为HTML页面,因为这种页面缺少HTML中最有特色、功能最强大的元素:超链接。精选ppt2.4.1超链接的基本概念超链接是由链接文字、图像及目标块组成。超链接的类型主要有两种,即文本超链接和图像超链接。链接的目标可以是图像、文字、页面及其他格式的文件。在定义一个超链接的地点时可以选用两种方式,绝对路径和相对路径。精选ppt2.4.2创建超链接的方法由<a>标记的语法结构可以看出,由于HTML语言的超链接性,在设定一个超链接时有很多参数可供选择,并能实现不同的链接效果。下面介绍一下几个参数的含义:(1)class和id属性:该属性用于设定链接点所属的类型和分配的ID号,通常不加以设定。(2)href属性:该属性用于设定链接地址,但是链接地址必须为URL地址,如果没有给出具体路径,则默认路径和当前页的路径相同。(3)target属性:该属性可以在一个新窗口里打开链接文件。(4)title属性:该可以让鼠标指针悬停在超链接上的时候,显示该超链接的文字注释。例2-11

例2-12精选ppt2.5.1图像的基本知识图像的种类:GIF格式和JPG格式GIF格式:支持256色模式,采用无损压缩格式,图像与原来的效果完全相同,但不支持真彩色图像。JPG格式:支持16位真彩模式,采用有损压缩模式,图像质量比原来稍差一些,但压缩比最大。2.内部图像和外部图像精选ppt2.5.2HTML中的图像标记<img>基本图像标记例2-14运行效果例2-15运行效果2.<area>地图作用区域标记3.<map>设定地图标记运行效果精选ppt2.6表格表格是HTML页面中十分重要的组成部分。首先,表格能够把有关数字或信息集中起来,直观地反映给用户;其次,通过表格的使用,可以更好地组织页面,使图像、文字的混合排列变得更加容易,效果也好得多精选ppt2.6.1表格的基本概念一个基本的网页表格通常由表格的标题、表栏、数据项、数据等元素组成。标题表示了这个表格的主要内容;表栏是指表格中一个个小的矩形区域,它用来存放数据等;数据项,又称表头,表示数据

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论