ᠰᠦᠯᠵᠢᠶ᠎ᠡ ᠬᠢᠬᠦ ᠮᠡᠷᠭᠡᠵᠢᠯ ᠤᠨ ᠦᠨᠳᠦᠰᠦᠨ ᠮᠡᠳᠡᠯᠭᠡ html教程--第二章-1.pptx

第一章 网页设计与网站建设的基础知识 第二章 HTML超文本标记语言 第三章 网页设计工具Dreamweaver 第四章 CSS层叠样式表 第五章 JavaScript脚本编程,HTML超文本标记语言,第二章,主要内容,,,,,,,,,,HTML文档机构,,头部及主体标记,,文字、段落、列表及图片标记,,,,,超链接、多媒体及表格标记,,,框架及表单标记,,文本 最重要的信息载体与交流工具，是网页发布信息所用的主要形式。 1．标题 2．字号 3．字型 4. 颜色,网页中常见的元素,图形 这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。 1．菜单按钮 2．背景图片 3．动画,网页中常见的元素,网页中常见的元素,超链接 超链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者相同网页的不同位置。 超链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一,网页中常见的元素,表格 表格用来控制网页中信息的布局方式 表单 网页区别于其他媒体的一个重要标志就是它的交互功能。 通常网页的交互功能都是利用表单来实现的,网页中常见的元素,声音和视频 声音是多媒体网页的一个重要组成部分。 网页的声音文件格式很多，常用的有MIDI、WAV、MP3和AIF等,HTML概念,HTML ︵Hyper Text Markup Language 超文本标识语言︶ 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文件称为HTML文件，也称Web文件。,HTML文档的编写方法,手工直接编写 记事本等，存成.htm .html格式 使用可视化HTML编 辑 器 Frontpage、Microsoft SharePoint Designer、Dreamweaver等 由Web 服务器 ︵或称HTTP 服务器︶ 一 方实时动态地生成。,网页文件命名,*.htm或*.html 无空格 无特殊符号 ︵例如&符号︶ ，只可以有下划线“_”，只可以为英文、数字 区分大小写 首页文件名默认为：index.htm 或 index.html,HTML 文件结构,从功能的角度来看，整个html文件可分为两层： 外层：由所标识，作为一个html文件的标志。 内层：由头区域和主体区域组成。 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记 ︵如︶ ，也有一个结束的标记 ︵如︶ 。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。 HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来,Document Structures, html 文件的正文 ,头区域,由及其之间的内容所组成，用于描述网页的一些相关信息，如标题、关键字等。 一般情况下，位于头部的内容都不会在网页上直接显示，而是通过另外的方式起作用。 主要包含、、、、等标记,主体区域,由之间的内容所组成，是网页内容的显示部分。包含、、、、等标记,第一张网页, 第一张网页 欢迎光临我的主页︕ ,头区域,,头区域,标题标记 基本语法 ᠁ ᠁ 语法解释 标记之间的内容就是页面的标题,头区域,元信息标记 主要用于设置字符集、网页关键字及描述信息、页面的刷新及跳转等内容 可以在一个页面中使用任意数量的,头区域,设定关键字 基本语法 语法解释 keywords为“关键字”定义，content中定义“关键字”的内容。 例如： ,头区域,设定描述 基本语法 语法解释 discription为“描述”定义，content中定义“描述”的内容。 例如： ,头区域,设置自动刷新 基本语法 语法解释 http-equiv传送HTTP通信协议标头，refresh表示刷新功能， content 中设定刷新间隔的秒数。,头区域,设置自动刷新 设定页面的自动刷新 本页面每隔3秒自动刷新一次 ,头区域,设置自动跳转 基本语法 语法解释 http-equiv传送HTTP通信协议标头，refresh表示刷新功能， content 中设定跳转间隔的秒数以及打开的文件,头区域,设置自动跳转 设定页面的自动跳转 本页面3秒钟后跳转到新浪网 ,头区域,、、标记将放在后面的CSS和javascript编程中分别介绍,,,主体区域,页面的主体标记的作用: 一是对页面的各种属性的进行设置； 二是包含所有需要在浏览器中显示的内容,主体区域,,主体区域,正文颜色text 基本语法 语法解释 color_value指定文字的颜色值。 颜色值的书写可以是英文颜色名或十六进制的RGB ︵#号加六位十六进制数如#ffffff，表示白色︶ 两种方式。,主体区域,常见颜色代码,主体区域, 设置页面的正文颜色 设定页面的正文颜色为蓝色 本课程主要是学习如何创建个人或企业网站。其中重点介绍了Web开发的核心HTML语言以及Javascript、CSS和目前最受欢迎的网页制作工具Dreamweaver ，并在此基础上，介绍了网站建设、发布、测试与维护等知识，目的是使学生掌握网站建设的一整套技术，而非仅仅停留在网页“设计”上。 ,主体区域,背景颜色 bgcolor 基本语法 语法解释 color_value指定背景颜色的值。,主体区域, 页面的背景颜色 设定页面的背景颜色为深蓝色,文字颜色为白色 ,主体区域,背景图像 background 基本语法 语法解释 img_file_url指定图像文件所在的路径。,绝对路径和相对路径,绝对路径: 指文件的完整路径 文件相对路径：指相对于当前文件的路径 文件相对路径有以下几种：,背景图像固定属性bgproperties,基本语法 语法解释 默认情况下，背景图像是不固定的；fixed设置背景图像为固定效果,主体区域,连接文字颜色 基本语法 语法解释 link：设定默认的没有单击过的链接文字颜色；alink：设定鼠标按下链接文字时的链接文字颜色；vlink：设定单击过后的链接文字颜色。 color_value指定链接文字的颜色值。,主体区域, 设置页面链接文字的颜色 设定不同的链接颜色 默认的链接颜色 正在按下的链接颜色 访问过后的链接颜色 ,主体区域,设置页面边距 基本语法 语法解释 topmargin设置到顶端的距离 leftmargin设置到左边的距离 rightmargin设置到右边的距离 bottommargin设置到底边的距离 单位为像素,小结,头部标记主要用于设置页面的相关信息，如标题、关键字等。所有头部标记都包含在标记对中，在这个标记对之间，常见的有设置标题的标记、设置元信息的标记、进行链接外部文件的标记、设置CSS的标记以及设置脚本的标记 主体标记的作用有两个:一是用于设置页面属性，如正文颜色、链接文字颜色、页面背景图象等；二是包含所有需要在浏览器中显示的内容,上机练习,创建一个网页，并按如下要求进行设置。 ︵1︶ 网页标题：设置网页相关信息 ︵2︶ 网页关键字：title, meta ︵3︶ 网页描述信息：这是一个关于介绍html语言的网站 ︵4︶ 网页正文颜色设置为红色，设置任意背景图片 ︵5︶ 网页内容与浏览器的上边框和左边框间距分别为30个像素 ︵6︶ 任意输入内容 ︵7︶ 网页停留10s后自动跳转到工大首页。,,,文字标记,文字标记主要用于设置网页中的所有有关文字方面的内容，具体包括普通文字、特殊字符、标题字、字体以及文字格式等方面的设置,文字标记,网页中涉及到的文字主要包括:普通文字、特殊符号以及页面的注释语句 普通文字的输入: 直接在和标记之间输入 特殊字符的输入: 在源代码中特殊字符使用其对应的符号码代替.,文字标记,注释语句 基本语法 ᠁ ᠁ 语法解释 上述两种表示法皆可代表注释语句 ；注释 语句不会显示在浏览器中,文字标记,例子 文字内容标记示例 对于页面中的普通文字直接在主体标记对之间输入即可。 北京工业大学计算机学院版权所有 2014 ,文字标记,标题字标记 所谓标题字就是以某几种固定的字号去显示文字，一般用于强调段落要表现的内容或作为文章的标题 具有加粗显示并与下一行产生一空行的特性 根据字号的大小分为六级，分别用标记H1~H6表示，字号的大小随数字增大而递减,文字标记, 标题字标记综合示例 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,文字标记,文字的修饰标记 用于对文字进行格式化 常用的修饰标记如下：,文字标记, 使用修饰标记设置文字格式 一个人的成功 ︵粗体标记b︶ 15%属于专业知识， ︵粗体标记strong︶ 85%靠人际沟通和处事技巧等综合因素 一个人的成功 ︵斜体标记i︶ 15%属于专业知识， ︵斜体标记em︶ 85%靠 ︵斜体标记cite︶ 人际沟通和处事技巧等综合因素 一个人的成功 ︵大字号标记big︶ 15%属于专业知识， ︵小字号标记small︶ 85%靠人际沟通和处事技巧等综合因素 一个人的成功 ︵下划线标记u︶ 15%属于专业知识，85%靠人际沟通和处事技巧等综合因素 一个人的成功 ︵删除线标记s︶ 15%属于专业知识， ︵删除线标记strike︶ 85%靠人际沟通和处事技巧等综合因素 代数方程式1 ︵上标标记sup︶ :3x2+9x+3=31 代数方程式2 ︵下标标记sub︶ :9x1+6x2=63 ,文字标记,字体标记 作用：设置文字的字体、字号及颜色 基本语法 ᠁ ,文字标记, 使用字体标记设置文字字体 使用字体族设置文字，并将文字颜色设置为#ffcc00 这 是 一本 专业 详尽 的 DHTML 书籍 谢谢 购买 ,,,段落标记,所谓段落，指得是一段格式上统一的文本 基本语法 语法解释 从开始处创建一个段落。使用双标记将使所包含的段落与上下文都有一空行的间隔；使用单标记将只使段落与上文有一空行的间隔,换行标记,作用: 产生一个换行效果 基本语法 ,居中标记,基本语法 ᠁ ᠁ 作用：使标记对之间的文字在浏览器窗口中居中对齐,段落、换行及居中标记综合示例, 创建并设置段落 这是第一行文本，没有使用任何标记进行设置 这是第二行文本，使用了p双标记，被设置为一个段落 这是第三行文本，没有使用任何标记进行设置 这是第四行文本，使用了p单标记，被设置段落居中对齐 这是第五行文本，使用了p单标记，被设置段落居右对齐 这是第六行文本，没有使用了p标记 ,预格式化标记,基本语法 ᠁ ᠁ 语法解释 预格式化，是指保留之间的文字在源代码中的格式，使其在页面中显示的效果和源代码中的效果几乎完全一致,预格式化标记示例,,水平线标记 ,水平线用于段落与段落之间的分隔，使文档结构更加清晰，使文字的编排更加整齐 基本语法 常用属性,水平线标记示例, 水平线综合示例 主流的网页设计软件 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，现在追求的是网页的动态效果和交互性。 现在Macromedia公司的网页设计软件Dreamweaver正是交互性网页设计的杰出代表 前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设 ,上机练习,使用文字标记、水平线标记、段落及换行标记创建如图模板的html页面。,