Web页面制作基础.ppt

第2章Web页面制作基础,2.1HTML语言概述2.2文档的格式与风格2.3加入多媒体与超级链接2.4制作表格2.5制作表单2.6框架结构2.7CSS基础,2.1HTML语言概述,WWW（WorldWideWeb，万维网）拉进了人们彼此间的距离，使得人与人之间的信息交流变得更加简便和快捷。WWW上的信息，大部分是通过HTML语言发布的。,本章首页,2.1HTML语言概述,2.1.1HTML概述HTML是（HyperTextMarkupLanguage，超文本标记语言）的缩写，最早源于SGML语言。HTML用来表示网上信息的符号标记语言。在WWW上，发布信息通常使用HTML，它是Web页面的基础，任何一个Web页面都离不开HTML，而且HTML也是Web应用开发的基础。HTML语言是大多数浏览器都能识别的语言，使用HTML语法规则建立的文本可以运行在不同的操作系统平台上，而且能被大多数用户所接受。,2.1HTML语言概述,2.1.2文档的结构头部信息正文部分,文件开头和结尾由和来标记。和标记头部，用来包含文件的基本信息；和标记正文部分，是整个文件的主体部分。,2.1HTML语言概述,这是标题部分。你好，这是正文部分！,2.1HTML语言概述,2.1.3HTML标记1HTML文档标记格式：功能：标志文档开始和结尾的标记。2HTML文件头标记格式：功能：用于包含文件的基本信息。3HTML文件主体标记格式：功能：文件主体标记。,2.1HTML语言概述,2.1.4常用HTML编辑工具任何一个文档编辑器都是HTML编辑器。为了减少网页设计师的工作，使设计网页更加的方便，很多公司设计了专用的网页编辑器，像Dreamweaver，FrontPage，CutePage，QuickSite等，是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时显示的效果基本一致。,2.2文档的格式与风格,在大多数网页中，文档是核心的内容，只有设置适当的文档格式，才能得到绚丽多彩的网页。设置文档的格式包括：设置标题和文字的字体、字号、字型、颜色，段落格式、文本布局等。,本章首页,2.2文档的格式与风格,2.2.1设置的属性,内容标签名称bodybackground=“1.jpg”“pic/1.jpg”“./pic/1.jpg”“file:/d|/myweb/pic/1.jpg”,2.2文档的格式与风格,2.2.2段落格式化1标题标记格式：，功能：设置各种大小不同标题的标记。2段落标记格式：功能：设置段落标记。3预定义格式标记格式：,2.2文档的格式与风格,4分区显示标记格式：功能：分区显示标记。5换行标记格式：功能：强制换行。6水平线标记格式：功能：插入水平线标记。,7注释标记格式：功能：注释标记。,2.2文档的格式与风格,标记的使用三种标记的使用！我在中间！中间我在左边！左边我在右边！右边,2.2文档的格式与风格,2.2.3建立列表1有序列表格式：type属性：数字（1，2，）、大写英文字母（A，B，）、小写英文字母（a，b，）、大写罗马字母（I，II，）和小写罗马字母（i，ii，），默认的序号是数字。,2.2文档的格式与风格,2.2.3建立列表2无序列表格式：type属性：可以为disc（实心圆点）、circle（空心圆点）、square（方块）和自定义图片，默认为实心圆点。,2.2文档的格式与风格,2.2.3建立列表3自定义列表格式：定义列表；定义列表项，项目会自动换行并左对齐，但项目间没有空行；用来定义语句。,2.2文档的格式与风格,2.2.4字符的格式化1字体设置标记格式：功能：设置字体格式标记。,2.2文档的格式与风格,2.2.4字符的格式化2其他标记,2.3加入多媒体与超级链接,图像的出现为本来单调乏味的网络世界增添了一道亮丽的风景线。图像在网页设计中是必不可少的，所以用户应该掌握在网页中操作图像的方法。,本章首页,2.3加入多媒体与超级链接,插入多媒体的一般形式：格式：功能：在网页中加入图像、视频、动画等。,2.3加入多媒体与超级链接,1插入图像,2.3加入多媒体与超级链接,2插入视频,2.3加入多媒体与超级链接,2.3.2加入超级链接格式：功能：在当前页和其他页间建立超链接。,2.4制作表格,表格可以把文字和图片等内容按照行和列排列起来，可以用来建立主页的框架，使得整个网页更加清晰和条理化，有利于信息的表达。,本章首页,2.4制作表格,2.4.1建立表格格式：,2.4制作表格,2.4.2定制表格格式：。功能：定义表格的一行。格式：。功能：定义单元格。,2.4制作表格,2.4.2定制表格格式：功能：定义表格标题，可以通过align属性设置标题的对齐方式。,2.5制作表单,表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通过表单可以完成用户和计算机或服务器之间进行的信息交换。,本章首页,2.5制作表单,2.5.1表单的结构格式：功能：定义表单。,2.5制作表单,2.5.2FORM中常用的标记1输入域（1）单行输入域。格式：。,2.5制作表单,1）text类型。2）password类型。3）radio类型。4）checkbox类型。5）submit类型。6）reset类型。7）hidden类型。,2.5制作表单,（2）多行输入域。格式为：功能：定义多行文本输入域。,2.5制作表单,2按钮格式：功能：定义按钮。,2.5制作表单,3选择域格式：选项一选项二功能：定义选择栏。,属性：,属性：,2.6框架结构,2.6.1框架结构的文件格式,本章首页,注意：含有框架结构的网页其HTML的形式和一般的HTML文件相似，只是在文档中，若使用了，就不应该有标记。在老版本的浏览器可能不支持框架结构。,2.6框架结构,2.6.2框架结构标记的使用格式：功能：定义一个框架容器。,2.6框架结构,2.6.3FRAME标记格式：功能：在网页中定义框架。,2.6框架结构,2.6.4TARGET属性的使用1用于A标记2用于BASE标记3用于FORM标记,本章首页,2.7CSS基础,2.7.1CSS样式简介CSS（CascadingStyleSheets，层叠样式表），又称格式页，是近几年才发展起来的新技术。它提供了很多的样式定义方式来辅助HTML。,本章首页,2.7CSS基础,CSS样式CSS样式文本！arial，12pt，normal，blue！,本章首页,2.7CSS基础,2.7.2CSS样式表的定义1基本语法:选择符属性:属性值；属性:属性值如:ptext-align:center；color:red；font-family:宋体p,tablefont-size:12pt2.类选择符：标签属性名属性：属性值；属性:属性值或属性名属性：属性值；属性:属性值如:定义p.lefttext-align:left引用.选择符：选择符名称属性：属性值；属性:属性值如：定义#leftfont-size:24;text-align:left引用,本章首页,2.7CSS基础,1通过HTML标记定义定义任何一个HTML标记，定义时在属性和属性值之间用“：”隔开，当有多重属性时，使用“；”进行分隔。2用id属性定义样式表id以（#）开头，把标准的属性和属性值写入大括号内。id属性的作用是：在调用JavaScript语言时，作为一个独立的名称来识别网页中的一个元素，如果不是因为要在网页中使用