第1章 HTML入门.ppt

Web系统设计第一章 HTML入门本章知识点回顾Internet 和万维网（WWW）Dreamweaver 相关的概念如何创建网站如何制作简单网页描述 HTML 文档的结构使用基本的 HTML 标签特殊字符Internet 和万维网全球范围内网络的网络Internet 的一部分由包含各种信息的文档组成万维网 2-1Web 服务器客户端客户端HTTP协议协议协议用于访问 Web 上资源的一组规则HTTP 是 Web 协议 万维网 2-2站点地址或 URLBODYHTML语言用于制作网页Web 服务器万维网 2-2Web 服务器客户端客户端向服务器发送页面请求Web 服务器处理请求并返回请求的页面HTTP 负责请求和响应Web相关术语网网站：站：万维网上相关网页的集合网网页：页：文件后缀名通常为*.html 或*.htm的页面HTML：用于制作网页的超文本标记语言(Hyper Text Mark-up Language)HTML文档的编写方法1.手工直接编写记事本等，存成.htm.html格式2.使用可视化HTML编 辑 器Frontpage、Dreamweaver等网页文件命名1.*.htm或*.html2.无空格3.无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字4.区分大小写5.首页文件名默认为：index.htm 或 index.htmlDreamweaver MX 2004一款用于设计、开发网站和 Web 应用程序的专业HTML 编辑器 用户可以选择使用布局单元格或框架来设计页面的布局可用于创建文本、插入动态图像、提供网页超链接、创建 Flash 文本和 Flash 按钮等可用于组合由某些软件（如 Photoshop、ImageReady 和 Flash 等）制作的图形、动画和按钮Dreamweaver 概念静静态网页：只能浏览，态网页：只能浏览，不能实现客户端和服务器端的交流互动动动态网页：态网页：网站页面随用户的输入而变化，能与客户端交流互动 本地站点：本地站点：一个在我们自己的计算机上，存储网站所有文件的临时文件夹远远程站点：位于程站点：位于远程Web 服务器上，与本地站点相对应根根文件夹：文件夹：用于存储网站文件的本地根目录Dreamweaver 工作区Dreamweaver MX 2004 提供以下两种工作区布局可供选择：设计者代码编写者设计人员工作区Dreamweaver 2004 MX 提供了一个集成所有面板和窗口的集成工作区 文档窗口“属性”检查器面板组“插入”选项卡创建网站步骤：选择新建站点，然后为其命名选择服务器技术（如果适用）选择在本地计算机上编辑本地副本的选项选择用于存储网站文件的文件夹选择连接到远程服务器的选项制作网页步骤：在面板组中选择站点，然后新建一个文件重命名该文件并将其打开 为页面指定一个标题在页面上键入文本或插入图像保存页面HTML文件的基本结构HTML文档的结构我的第一个网页我的第一个网页 Hello World!HTML 网页头部部分主体部分网页标题网页内容，可以是文本、图像等HTML元素.元素：是HTML语言的基本组成部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。标准的HTML 文件结构(Document Structures)HTML HTML 文件的正文文件的正文文件的正文文件的正文 HTML元素属性HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。元素属性 我的第一个网页 Hello World!元素元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。这个网页很漂亮,那么如何知道是谁写的呢?网网页标题页标题元素元素网网页标题页标题网页页面中出现乱码，那如何消除乱码使其正常显示？简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1可以避免页面中的乱码我编写的网页如何被搜索引擎搜索到呢?元素 网网页标题页标题BBS中的3秒钟后自动跳转到首页是如何实现的呢?元素网网页标题页标题练习编写一个网页，要求3秒钟后自动跳转到M的网站。my first page 三秒钟后本网页将自动跳转到微软首页 元素及元素属性1元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。元素及元素属性2元素中有下列元素属性：bgcolorbgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#FFCCFF”。Hello World!HTML对颜色的控制HTML使用16进制的RGB颜色值对颜色进行控制。十进制0123456789十六进制0123456789ABCDEF颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码元素及元素属性元素中有下列元素属性：backgroundbackground属性标志HTML文档的背景图片。如：background=“images/bg.gif。可以使用的图片格式为GIF，JPG Hello World！元素及元素属性元素中有下列元素属性：bgpropertiesbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。Hello World！元素及元素属性元素中有下列元素属性：texttext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。Hello World！元素及元素属性元素中有下列元素属性：leftmargintopmargin设置网页主体内容距离网页顶端和左端的距离如：leftmargin=20 topmargin=30“文字标签属性文字属性标记color指定颜色 .#=RRGGBB 16 进制数码文字标签属性文字属性标记文字大小.#=1,2,3,4,5,6,7 or+#,-#3为默认字体+,-是针对于默认字体调整.大小颜色字体.手机充手机充值值、IP卡卡/电话电话卡卡 移移动动 | 100| 联联通通| 50 Copyright©2007"淘宝网淘宝网"All rights.特殊符号特殊字符转义码空格 引号(“”)"小于()>版权号()©例子例子字体、字号相关标签标题标签.#=1,2,3,4,5,6 说明：到字体大小依次递减 一一级标题级标题 二二级标题级标题 三三级标题级标题 四四级标题级标题 五五级标题级标题 六六级标题级标题 例子例子段落标签段(Paragraph)(可以看作是空行)换行标签换行 .淘宝集市淘宝集市欢欢迎您！迎您！淘宝网首届翠友会！淘宝网首届翠友会！行的控制相关标签换段了换段了换行了换行了例子例子文字布局文字布局行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。不换行 字符格式化标签学学习习 HTML这这很有趣很有趣足球是最令人喜足球是最令人喜爱爱的运的运动动之一。之一。信息技信息技术术是是发发展的关展的关键键。水的分子式是水的分子式是 H 2 O。3 2 等于等于 9。基本组成部分HTML注释HTML文档可以插入注释。注释内容不会在浏览器窗口显示HTML注释的格式为：文字的分区显示.(#=left,center,right)元素在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。与在CSS定义中属于一个行内元素，而是块级元素，我们可能通俗地理解为为大容器，大容器当然可以放一个小容器了,就是小容器。3.HTML段落与分行控制居中-元素元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似例如：居中段落3.HTML段落与分行控制标尺线：设定线宽：设定线长：设定对齐方式#=left,right ：设定线的颜色如何使用内容分隔标签线的厚度值线的宽度 标签用于在页面上绘制水平线 线的颜色语法语法例子例子