web网页界面设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</html>
网页设计
Dreamweaver
理论 操作 实训 作业
五、HTML基本结构的有关标签和标签属性—HEAD
HEAD标签——1
<head>标签出现在文档的开头部分。<head>与</head>之间的内容 不会在浏览器的文档窗口显示，但是其间的标签有特殊重要的意义。
<title>标签——2
<title>标签定义HTML文档的标题。<title>与</title>之间的内容将显 示在浏览器窗口的标题栏。 制作标题网页案例
网页设计
Dreamweaver
四、基本组成部分——HTML标签属性
• HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
理论 操作 实训 作业
• 属性总是以名称/值对的形式出现，标签属性 出现在元素的< >内，并且和元素名之间有一 个空格分隔；属性值用“”引起来。比如： name=“value”。
网页设计
Dreamweaver
Leabharlann Baidu理论 操作 实训 作业
三、HTML 文档 = 网页
• HTML 文档描述网页 • HTML 文档包含 HTML 标签和纯文本 • HTML 文档也被称为网页 • Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们
。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容： • 网页文件命名: *.htm或*.html
网页设计
Dreamweaver
实例
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
网页设计
Dreamweaver
网页制作 基础知识
理论 操作 实训 作业
一、什么是 HTML
1、HTML 是用来描述网页的一种语言
网页设计
Dreamweaver
五、HTML基本结构的有关标签和标签属性—HEAD HEAD标签——2标签---语言字符集(Charsets)的信息
meta标签的http-equiv属性语法格式是：＜meta httpequiv=“参数” content=“参数变量值”＞ ；
理论 操作 实训 作业
<meta http-equiv="Content-Type" content="text/html;charset=#"> #= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-macce,iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80,x-euc-tw, x-cns11643-1, xcns11643-2, big5 例如：<meta http-equiv="content-type" content="text/html; charset=utf-8" />--告诉浏览器等设备，文件为html文件， 且使用了utf8编码
• <body align=“center” bgcolor=“#000000”>121231</body>
• 属性总是在 HTML 元素的开始标签中规定。
网页设计
Dreamweaver
理论 操作 实训 作业
四、基本组成部分——HTML标签属性
属性实例
<html> <head> <title>my first page</title> </head> <body> <p align="center">This is my first homepage!</p> </body>
• 无空格 • 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英
文、数字 • 区分大小写 • 首页文件名默认为：index.htm 或 index.html • 例子解释 • <html> 与 </html> 之间的文本描述网页; • <body> 与 </body> 之间的文本是可见的页面内容 ; • <h1> 与 </h1> 之间的文本被显示为标题 ; • <p> 与 </p> 之间的文本被显示为段落;
– 文本（Text）意味着它是自解释的（self-explanatory）。 – 标记（Markup）指的是你怎么处理文本。对文本作标记的方式，跟你在文
本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。 – 语言（Language）。HTML就是一种语言，它使用了许多英文单词。
网页设计
Dreamweaver
《WEB界面设计》 HTML基础一
主讲人： 洪小平
1
网页设计
Dreamweaver
HTML第一讲
教学目标
掌握Dreamweaver CS5的HTML源代码
编辑功能。掌握快速标签编辑器、标签选
理论
择器和标签编辑器的使用方法。
操作
掌握HTML文档的基本结构和头部标记的
实训
使用
作业
测试地址：http://www.w3school.com.cn/tiy/t.asp?f=html_preformattedtext
• HTML 指的是超文本标记语言 (Hyper Text Markup Language) • HTML 不是一种编程语言，而是一种标记语言 (markup
language) • 标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页
– 超（Hyper）是相对于线性（linear）来说的。在很久以前，那时计算机程 序还是线形运行的：当计算机程序执行完一个动作以后，转向下一行，这行 结束后，继续下移，依次类推。但HTML则不同，你可以在任何时候跳转到 任何地方。比方说，你在浏览HTML.net之前，不必先去浏览MSN.com。
• HTML 文档和 HTML 元素是通过 HTML 标签进行标记的;
• HTML 标签由开始标签和结束标签组成:开始标签是被括号 包围的元素名 \结束标签是被括号包围的斜杠和元素名 ;
• 文字格式化标签<font>、段落格式化标签 [<p>\<br/>\<marquee>]、列表标签[<ol>\<ul>\<li>]、图像 标签[<img>、表格标签[<table>\<tr>\<td>\<th>]、表单标 签<input>
二、HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
理论 操作 实训 作业
• HTML 标签是由尖括号包围的关键词，比如 <html>;
• HTML 标签通常是成对出现的，比如 <b> 和 </b> , 某些 HTML 元素没有结束标签，比如 <br/> ;
• 开始和结束标签也被称为开放标签和闭合标签 ;
网页设计
Dreamweaver
理论 操作 实训 作业
五、HTML基本结构的有关标签和标签属性—HEAD
HEAD标签——1
<head>标签出现在文档的开头部分。<head>与</head>之间的内容 不会在浏览器的文档窗口显示，但是其间的标签有特殊重要的意义。
<title>标签——2
<title>标签定义HTML文档的标题。<title>与</title>之间的内容将显 示在浏览器窗口的标题栏。 制作标题网页案例
网页设计
Dreamweaver
四、基本组成部分——HTML标签属性
• HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
理论 操作 实训 作业
• 属性总是以名称/值对的形式出现，标签属性 出现在元素的< >内，并且和元素名之间有一 个空格分隔；属性值用“”引起来。比如： name=“value”。
网页设计
Dreamweaver
Leabharlann Baidu理论 操作 实训 作业
三、HTML 文档 = 网页
• HTML 文档描述网页 • HTML 文档包含 HTML 标签和纯文本 • HTML 文档也被称为网页 • Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们
。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容： • 网页文件命名: *.htm或*.html
网页设计
Dreamweaver
实例
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
网页设计
Dreamweaver
网页制作 基础知识
理论 操作 实训 作业
一、什么是 HTML
1、HTML 是用来描述网页的一种语言
网页设计
Dreamweaver
五、HTML基本结构的有关标签和标签属性—HEAD HEAD标签——2标签---语言字符集(Charsets)的信息
meta标签的http-equiv属性语法格式是：＜meta httpequiv=“参数” content=“参数变量值”＞ ；
理论 操作 实训 作业
<meta http-equiv="Content-Type" content="text/html;charset=#"> #= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-macce,iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80,x-euc-tw, x-cns11643-1, xcns11643-2, big5 例如：<meta http-equiv="content-type" content="text/html; charset=utf-8" />--告诉浏览器等设备，文件为html文件， 且使用了utf8编码
• <body align=“center” bgcolor=“#000000”>121231</body>
• 属性总是在 HTML 元素的开始标签中规定。
网页设计
Dreamweaver
理论 操作 实训 作业
四、基本组成部分——HTML标签属性
属性实例
<html> <head> <title>my first page</title> </head> <body> <p align="center">This is my first homepage!</p> </body>
• 无空格 • 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英
文、数字 • 区分大小写 • 首页文件名默认为：index.htm 或 index.html • 例子解释 • <html> 与 </html> 之间的文本描述网页; • <body> 与 </body> 之间的文本是可见的页面内容 ; • <h1> 与 </h1> 之间的文本被显示为标题 ; • <p> 与 </p> 之间的文本被显示为段落;
– 文本（Text）意味着它是自解释的（self-explanatory）。 – 标记（Markup）指的是你怎么处理文本。对文本作标记的方式，跟你在文
本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。 – 语言（Language）。HTML就是一种语言，它使用了许多英文单词。
网页设计
Dreamweaver
《WEB界面设计》 HTML基础一
主讲人： 洪小平
1
网页设计
Dreamweaver
HTML第一讲
教学目标
掌握Dreamweaver CS5的HTML源代码
编辑功能。掌握快速标签编辑器、标签选
理论
择器和标签编辑器的使用方法。
操作
掌握HTML文档的基本结构和头部标记的
实训
使用
作业
测试地址：http://www.w3school.com.cn/tiy/t.asp?f=html_preformattedtext
• HTML 指的是超文本标记语言 (Hyper Text Markup Language) • HTML 不是一种编程语言，而是一种标记语言 (markup
language) • 标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页
– 超（Hyper）是相对于线性（linear）来说的。在很久以前，那时计算机程 序还是线形运行的：当计算机程序执行完一个动作以后，转向下一行，这行 结束后，继续下移，依次类推。但HTML则不同，你可以在任何时候跳转到 任何地方。比方说，你在浏览HTML.net之前，不必先去浏览MSN.com。
• HTML 文档和 HTML 元素是通过 HTML 标签进行标记的;
• HTML 标签由开始标签和结束标签组成:开始标签是被括号 包围的元素名 \结束标签是被括号包围的斜杠和元素名 ;
• 文字格式化标签<font>、段落格式化标签 [<p>\<br/>\<marquee>]、列表标签[<ol>\<ul>\<li>]、图像 标签[<img>、表格标签[<table>\<tr>\<td>\<th>]、表单标 签<input>
二、HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
理论 操作 实训 作业
• HTML 标签是由尖括号包围的关键词，比如 <html>;
• HTML 标签通常是成对出现的，比如 <b> 和 </b> , 某些 HTML 元素没有结束标签，比如 <br/> ;
• 开始和结束标签也被称为开放标签和闭合标签 ;