HTML基础与层叠样式单CSS.ppt

第2章HTML基础与层叠样式单CSS 学习要点 1 了解HTML文档的基本结构 2 掌握HTML文档的各种常用标记 3 熟练使用各种HTML控件标记以及帧标记 浮动帧标记 4 了解CSS的特点 5 掌握CSS中各种选择符的定义及使用方法 HTML基础与层叠样式单CSS 学习Web开发技术 必须首先熟悉HTML的常用标记 熟悉其含义和作用 另外每一个HTML标记或者称为HTML元素 有时也称HTML标签 都可看成一个在浏览器中显示的对象 层叠样式单CSS的作用就是为网页上的HTML元素精确地定位 控制HTML元素的外观显示 可以把网页上的显示内容和显示外观相分离 第2章HTML基础与层叠样式单CSS 2 1HTML基础2 2层叠样式单CSS 案例名称 HTML网页框架 案例名称 HTML网页框架程序名称 2 01 htm 这是一段最基本的HTML标识 任何HTML文档都是由一个和标记包含的 然后分为和两大部分 页面的标识一般都是在标识中定义的 HTML文件不区别大小写 浏览器认为和是一样的 在使用的时候需要保持风格的完整性 HTML文件的扩展名可以是 htm或者 html都可以 现在已经没有区别了 原来在Linux操作系统上用html作为文件的扩展名 而在Windows操作系统上用 htm 因为早期的Windows操作系统不支持三个以上字母的文件扩展名 HEAD头元素 HEAD头元素主要包括该页面的一些基本描述语句 META的属性包括 Description 网页的描述信息 Keywords 关键字 当搜索引擎查找时 按此关键字查找 Content type 用来设置该网页的编码 Author 用来设置该网页的作者姓名 Refresh 用来设置网页的自动更新 当CONTENT 3 URL 时 该网页打开3秒钟后 就自动的转到网站 HTML的常用标记 HTML的常用标记有一些共同特点 都放在BODY标记里面 常用的标记有字体标记 图片标记 超级链接 列表 表格和表单等 字体标记 处理文字时通常利用如 xx 的标记定义字符xx的字体显示为隶书 字号是40 颜色是红色 程序2 03 htm说明如何使用文字格式 图片标记 利用 格式可以插入一张图片 myimage jpg文件必须和该HTML文件放在同一个目录下 IMG是HTML的一个标记 是IMAGE的缩写 SRC属性给出要连接的图片的路径和文件名 超级链接 使用超级链接的基本的语法是 XX XX是一个超级链接 连接到Address htm文件 是单词Anchor的缩写 中文的意思是 锚 功能是从一个页面链接到另一个页面 属性HREF定义的是链接到哪一页 书签链接 如果某个页面很大 为了加强层次感 需要引入书签链接 使用的方法和超级链接类似 电子邮件链接 电子邮件链接提供了当点击页面上的链接时 将自动打开默认的邮件发送程序发邮件 列表 列表有两种方式 一种是有序列表 另一种是无序列表 无序列表是所有的行之前都有一个小圆圈 而有序列表是自动排序的 前面有序号 有序列表标记 有序列表使用编号 而不是项目符号来编排项目 列表中的项目采用数字或英文字母开头 通常各项目间有先后的顺序性 在有序列表中 主要使用和两个标记 基本语法项目一项目二项目三 语法解释在有序列表中 使用作为有序的声明 使用作为每一个项目的起始 无序列表标记 在无序列表中 各个列表项之间没有顺序级别之分 它通常使用一个项目符号作为每个列表项的前缀 无序列表主要使用 几个标记和type属性 基本语法项目一项目二项目三 语法解释在无序列表中 使用作为无序的声明 使用作为每一个项目的起始 基本表格 是表格的基本标记 代表表格的行 代表表格的列 定义一个三行两列的表格如程序2 09 htm所示 表格的灵活应用 1 ROWSPAN和COLSPAN属性的使用方法 利用ROWSPAN属性设置该单元格占用多行 利用COLSPAN属性设置该单元格是占用多列 Cellpadding和Cellspacing 2 Cellpadding和Cellspacing属性的使用方法 Cellpading的意思是单元格的边距 指的是字与单元格边框的距离 Cellspacing的意思是单元格间距 指的是单元格之间的距离 表格的样式 BORDERCOLOR属性设置表格边框的颜色 BGCOLOR属性设置背景颜色 ALIGN属性设置表格的对齐方式 标记是将内部的文字加粗显示 显示的结果 表单 表单的功能是收集用户信息实现系统与用户交互 比如E mail信箱的注册页面就是一个十分典型的表单页面 表单信息的处理过程为 当单击表单中的提交按钮时 表单中的信息就会上传到服务器中 然后由服务器端的应用程序 例如CGI ASP PHP或JSP等 进行处理 处理后将用户提交的信息存储在服务器端的数据库中 或者将有关信息返回到客户端浏览器上 1 表单头及其属性 表单的通用格式是 XX 表单元素包含在标记中 有两个重要的属性 METHOD Post 或 Get Post和Get方式的区别在于Post是一种邮寄的方式 在浏览器的地址栏中不显示提交的信息 这种方式传送的数据量的大小没有限制 Get方式将信息传递到浏览器的地址栏上 最大传输的信息量是2KB 当不指明是哪种方式时 默认为Get方式 Action属性是设置利用哪个文件来处理所提交的数据 2 表单中常用控件 在常用的表单制作过程中 经常遇到的是按钮制作 输入元素的制作等 常见的表单控件包括文本框 文本域 密码框 多选框 单选框和下拉列表框 等等 除了文本域和下拉列表 其他只要修改TYPE属性就可以了 使用方法如程序2 13 htm所示 块级元素 块级元素包括DIV和SPAN两种标记 DIV称为层标记 有时也称为块标记 利用DIV标记和CSS的定位技术可以做出相当出色的效果 SPAN标记和DIV标记的基本语法是一样的 但SPAN标记和DIV标记的区别还是很大的 使用方法如程序2 14 htm所示 预排版标记 包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上 HTML文件中的英文空格一般不起作用 但是在预排版标记中空格可以显示出来 语法如程序2 15 htm文件所示 设计网页框架 设计网页时 经常用到的一种格式是框架 基本网页框架分成两种 左右框架和上下框架 语法如程序2 16 htm文件所示 帧技术又叫框架技术 迄今为止 我们所提到的所有网页都能链接到其他网页 但是每次只能显示一个网页 为了能够在同一浏览器中显示多个页面 则必须使用帧技术 分帧式网页起始于开始标记 帧集有两个重要属性 即cols属性 列属性 和rows属性 行属性 其中cols属性给出了帧集页面的纵向布局 而rows属性则给出了帧集页面的横向布局 这两个属性会指定每个帧的宽度 或像素值 或所占屏幕的百分比 例如告诉浏览器该网页有两个帧 第一个从屏幕左侧扩展了110个像素点 第二个帧填充了屏幕的剩余部分 帧集标记只说明在一个浏览器中可以有多少个页面 但是每个页面该如何表达 是标记无法实现的 因此在 内必须将每个帧的内容表达出来 HTML是通过在 内嵌套来实现的 帧标记常用的格式为 name属性是标识帧 而src则表示在该帧中建立一个超链接 帧标记往往与下面的格式一起使用 其作用是在name属性为 main 的帧中加载页面link html 而 标记对也是放在 标记对之间 用来在那些不支持帧的浏览器中显示文本或图像信息 Iframe标记 浮动帧标记 可用它将一个HTML文档嵌入在一个HTML中显示 它不同于Frame标记 IFRAME最大的特征是所引用的HTML文件不是与另外的HTML文件相互独立显示 而是可以直接嵌入在一个HTML文件中 与这个HTML文件内容相互融合 成为一个整体 另外 还可以多次在一个页面内显示同一内容 而不必重复写内容 一个形象的比喻即 画中画 电视 Iframe标记的使用格式是 在脚本语言与对象层次中 包含Iframe的窗口我们称之为父窗体 而浮动帧则称为子窗体 弄清这两者的关系很重要 因为要在父窗体中访问子窗体或相反都必须清楚对象层次 才能通过程序来访问并控制窗体 Iframe虽然内嵌在另一个HTML文件中 但它保持相对的独立 是一个 独立王国 在单一HTML中的特性同样适用于浮动帧中 通过Iframe标记 可将那些不变的内容以Iframe来表示 这样 不必重复写相同的内容 这有点象程序设计中的过程或函数 节省了很多繁琐的操作 它使页面的修改更为方便 不必因为版式的调整而修改每个页面 只需修改一个父窗体的版式即可了 有一点要注意 Nestscape浏览器不支持Iframe标记 例如 案例2 2使用框架 一般情况下工程的主页面都采用这种框架格式 在上面的页面放置网站的图片 右边放置主页面 左边放一个下拉菜单 可以像对普通Windows窗口一样操作网页框架 可以最大化窗口页可以最小化窗口 修改案例2 2右框架的代码 如案例2 3所示 MARQUEE标记 使用的基本语法是 xx 显示的效果是xx就会从屏幕一边跑到另外一边 啦啦啦 我从右向左移 啦啦啦 我从左向右移 啦啦啦 我一圈一圈绕着走 啦啦啦 我只走一次就歇了 啦啦啦 我来回走 啦啦啦 我走一步 停一停 作业1制作网站相册 制作网站相册 有很多种形式 包括个人网站相册 公司产品展示 网站图库 公司产品展示 主要是产品展示系统的制作 提供产品图片及产品说明 网站图库提供了很多精美图片素材 供爱好者欣赏及下载 而本课堂练习讲述的则是个人网站相册的制作 有许多个人网站都有自己的相册栏目 其实将几十个甚至几百个相片制作成网页格式的相册非常简单 可以通过Dreamweaver8自带的 创建网站相册 命令来制作自己的网站相册 通过该命令创建的相册以普通的HTML网页格式出现 并且具有导航功能 可以方便地浏览查看照片 可以自动生成一个Web站点 该站点展示位于给定文件夹中图像的 相册 Dreamweaver8使用Fireworks来为该文件夹中的每个图像创建一个缩略图和一个较大尺寸的图像 然后 Dreamweaver8创建一个Web页 它包含所有缩略图以及指向较大图像的链接 作业2制作友情链接页面 友情链接包括文字链接和图片链接 文字链接一般是网站的名称 图片链接包括LOGO链接和BANNER链接 也就是通常所说的广告条 CSS概述 1998年5月12日 CSSlevel2才成为W3C的标准 它是一组样式 样式中的属性在HTML元素中依次出现 并显示在浏览器中 样式可以定义在HTML文档的标志里 也可以在外部附加文档作为外加文档 CSS的功能无比强大 W3C也极力向世界推广这一先进技术 HTML是一种标记语言 而CSS是这种标记的一种重要扩展 可以进一步美化页面 换句话说 CSS是一种用来装饰HTML的标记集合 为什么要使用CSS呢 原因主要有如下四点 1 弥补HTML对网页格式化功能的不足 比如段落间距 行距等 2 字体变化和大小 3 页面格式的动态更新 4 排版定位等 例如 HTML标记选择符 直接用HTML标记或HTML元素名称作为CSS选择符 例如 td input select body font family Verdana font size 12px form body margin 0 padding 0 select body textarea background fff font size 12px select font size 13px textarea width 540px border 1pxsolid 718da6 img border none a text decoration underline cursor pointer h1 color ff0000 例如 用户定义的类选择符 使用类选择符能够把相同的标记分类定义成不同的样式 定义类选择符时 在自定义类的名称前面加一个点号 假如你想要两个不同的段落 一段落向右对齐 一个段落居中 你可以先定义两个类 p right text align right p center text align center 如果要用在不同的段落里 只要在HTML标记里加入前面定义的类 这个段落向右对齐的这个段落是居中排列的用户定义的类选择符的一般格式是 selector classname property value 定义超级链接样式 可以指定A标记以不同的方式显示 一个超级链接有几种不同的状态 未被访问链接 Link 已访问链接 Visited 和鼠标移动过 Hover 可以定义超级链接文字的颜色 可以定义字体的大小 一般超级链接都有下划线 可以利用 TEXT DECORATION NONE 将超级链接的下划线去掉 加载CSS样式的三种方式 使用CSS来格式化网页 共有三种方式 在HEAD中引用方法A 标签在BODY中引用方法B 行内样式作为文件来引用方法C 外部样式表 链接或导入 链入外部样式表 链入外部样式表是把样式表保存为一个CSS文件 在HTML的头信息标识符里添加标记链接到这个CSS文件即可使用 外部样式表不能含有任何像或这样的HTML标记 仅仅由样式规则或声明组成 并且只能以 CSS为扩展名 标记放置在HTML文档头部 属性主要有rel href type media 导入外部样式表 导入外部样式表是指在HTML文件头部的 标记之间 利用CSS的 import声明引入外部样式表 import mystyle css 表示导入mystyle css样式表 注意使用时外部样式表的路径 方法和链入样式表的方法很相似 但导入外部样式表输入方式更有优势 因为除了导入外部样式外 还可添加本页面的其他样式 注意 import声明必须放在样式表的开始部分 其他的CSS规则应仍然包括在Style元素中 例子 首页博客设计相册论坛关于 基本信息 body font 12pxTahoma margin 0px text align center background FFF a link a visited font size 12