网页制作与HTML语言基本结构简介.ppt

第三章网页制作与HTML语言基本结构简介 本章提要静态网页与动态网页DreamweaverMX制作网页HTML语言的基本结构 3 1网页制作概述 3 1 1静态网页与动态网页1 静态网页由超级文本标志语言HTML的标志代码构成 用记事本 FrontPage Dreamweaver Fireworks可以制作 2 动态网页与asp 动态网页中 服务器端可以实时处理浏览器端的请求 然后将处理结果返回给浏览器端ASP是在普通HTML中嵌入VBSCript或JavaScript代码的文件 只能在服务器端运行 3 1 2认识网页 1 网页的基本元素文字图像超链接 2 网页设计原则 兼容性原则简洁性原则 3 网页的设计 确定主题收集材料布局规划制作网页 3 1 3网页制作工具简介 FrontpageDreamweaver 3 2Dreamweaver2004概览 Dreamweaver2004界面输入与编辑文本超级链接使用图像表格创建交互表单页面布局 3 3使用Dreamweaver制作主页框架 基本操作步骤主页框架的制作 3 4HTML语言基本结构 HTML简介HTML文件的基本结构HTML的 HTML简介 HTML的英语意思是 HypertextMarkedLanguage 即超文本标记语言 是一种用来制作超文本文档的简单标记语言 用HTML编写的超文本文档称为HTML文档 它能独立于各种操作系统平台 所谓超文本 是因为它可以加入图片 声音 动画 影视等内容 事实上每一个HTML文档都是一种静态的网页文件 这个文件里面包含了HTML指令代码 这些指令代码并不是一种程序语言 它只是一种排版网页中资料显示位置的标记结构语言 易学易懂 非常简单 HTML的基本结构 HTML的基本结构一个HTML文档是由一系列的元素和标签组成 元素名不区分大小写 HTML用标签来规定元素的属性和它在文件中的位置 HTML超文本文档分文档头和文档体两部分 在文档头里 对这个文档进行了一些必要的定义 文档体中才是要显示的各种文档信息 HTML的基本结构开始标签一个简单的HTML示例头部标签欢迎光临我的主页文件主体这是我第一次做主页结尾标签 例1 1 在文档的最外层 文档中的所有文本和html标签都包含在其中 它表示该文档是以超文本标识语言 HTML 编写的 是HTML文档的头部标签 在浏览器窗口中 头部信息是不被显示在正文中的 在此标签中可以插入其它标记 用以说明文件的标题和整个文件的一些公公属性 和是嵌套在头部标签中的 标签之间的文本是文档标题 它被显示在浏览器窗口的标题栏 标记一般不省略 标签之间的文本是正文 是在浏览器要显示的页面内容 上面的这几对标签在文档中都是唯一的 HEAD标签和BODY标签是嵌套在HTML标签中的 三 HTML的标签与属性 HTML的标签分单标签和成对标签两种 成对标签是由首标签和尾标签组成的 成对标签的作用域只作用于这对标签中的文档 单独标签的格式 单独标签在相应的位置插入元素就可以了 换行换行 三 HTML的标签与属性 作为一般的原则 大多数属性值不用加双引号 但是包括空格 号 号等特殊字符的属性值必须加入双引号 为了好的习惯 提倡全部对属性值加双引号 如 字体设置 2 2主体标签及属性 颜色的设定 一 html的主体标签在和中放置的是页面中所有的内容 如图片 文字 表格 表单 超链接等设置 标签有自己的属性 设置标签内的属性 可控制整个页面的显示方式 一 html的主体标签 标签的属性 格式 bady的属性实例设定不同的连接颜色测试body标签默认的连接颜色正在按下的连接颜色 访问过后的连接颜色 返回 二 颜色的设定颜色值是一个关键字或一个RGB格式的数字 RGB颜色可以有四种表达形式 rrggbb 如 00cc00 rgb 如 0c0 rgb x x x x是一个介乎0到255之间的整数 如 rgb 0 204 0 rgb y y y y是一个介乎0 0到100 0之间的整数 如 rgb 0 80 0 例 白色 ffffff红色 ff0000 二 颜色的设定WindowsVGA 视频图像阵列 形成了16各关键字 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white andyellowaqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white andyellow 文字版面的编辑 3 1换行标签换行标签是个单标签 也叫空标签 不包含任和内容 在html文件中的任何位置只要使用了标签 当文件显示在浏览器中时 该标签之后的内容将显示下一行 无换行示例无换行标记 登鹳雀楼白日依山尽 黄河入海流 欲穷千里目 更上一层楼 有换行标记 登鹳雀楼白日依山尽 黄河入海流 欲穷千里目 更上一层楼 例 3 1html 3 2换段落标签及属性 由标签所标识的文字 代表同一个段落的文字 不同段落间的间距等于连续加了两个换行符 也就是要隔一行空白行 用以区别文字的不同段落 它可以单独使用 也可以成对使用 单独使用时 下一个的开始就意味着上一个的结束 良好的习惯是成对使用 格式 其中 ALIGN是标签的属性 属性有三个参数left center right 这三个参数设置段落文字的左 中 右位置的对齐方式 实例 3 2html测试分段控制标签花儿什么也没有 它们只有凋谢在风中的轻微 凄楚而又无奈的吟怨 就像那受到了致命伤害的秋雁 悲哀无助地发出一声声垂死的鸣叫 或许 这便是花儿那短暂一生最凄凉 最伤感的归宿 而美丽苦短的花期却是那最后悲伤的秋风挽歌中的瞬间插曲 3 3原样显示文字标签要保留原始文字排版的格式 就可以通过标签来实现 方法是把制作好的文字排版内容前后分别加上始标签和尾标签 实例 3 3html原样显示文字标签白日依山尽 黄河入海流 欲穷千里目 更上一层楼 3 4居中对齐标签文本在页面中使用标签进行居中显示 是成对标签 在需要居中的内容部分开头处加 结尾处加实例 3 4html居中对齐标签 送孟浩然之廣陵 故人西辭黃鶴樓 煙花三月下揚州 孤帆遠影碧山盡 惟見長江天際流 3 5水平分隔线标签标签是单独使用的标签 是水平线标签 实例 3 5html测试水平分隔线标签春晓春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少 3 6字体属性标签3 6 1文字格式控制标签格式 实例 3 6 1html控制文字的格式盼望着 盼望着 东风来了 春天脚步近了 一切都像刚睡醒的样子 欣欣然张开了眼 山朗润起来了 水涨起来了 太阳的脸红起来了 小草偷偷地从土里钻出来 嫩嫩的 绿绿的 园子里 田野里 瞧去一大片一大片满是的 坐着 躺着 打两个滚 踢几脚球 赛几趟跑 捉几回迷藏 风轻悄悄的 草软绵绵的 3 6 2标题文字标签标签用于设置网页中的标题文字 被设置的文字将以黑体或粗体的方式显示在网页中 标题标签的格式 实例3 6 2html设定各级标题一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 3 6 3特定文字样式标签实例3 6 3htrml字体的逻辑类型em标签 用于强调的文本 一般显示为斜体字strong标签 用于特别强调的文本 显示为粗体字cite标签 用于引证和举例 通常是斜体字code标签 用来指出这是一组代码small标签 规定文本以小号字显示big标签 规定文本以大号字显示samp标签 显示一段计算机常用的字体 即宽度相等的字体kbd标签 由用户输入文本 通常显示为较粗的宽体字var标签 用来表示变量 通常显示为斜体字dfn标签 表示一个定义或说明 通常显示为斜体字sup标签 122 144sub标签 硫酸亚铁的分子式是Fe2SO4 3 7列表标签在html页面中 合理的使用列表标签可以起到提纲和格式排序文件的作用 列表分为两类 一是无序列表 一是有序列表 无序列表就是项目各条列间并无顺序关系 纯粹只是利用条列来呈现资料而已 此种无序标签 在各条列前面均有一符号以示区隔 而有序条列就是指各条列之间是有顺序的 比如从1 2 3 一直延伸下去 3 7 1无序列表格式1 格式1 第一项第二项第三项格式2第一项第二项第三项的属性type有三个选项 这三个选项都必须小写 disc实心园circle空心园square小方块 示例3 7 1 html无序列表默认的无序列表加 实心园 默认的无序列表 实心园 默认的无序列表 实心园 无序列表square加方块无序列表square加方块无序列表square加方块无序列表circle加空心园无序列表circle加空心园无序列表circle加空心园 3 7 2有序列表格式 第1项第2项第3项 实例 3 7 2 html有序列表默认的有序列表默认的有序列表默认的有序列表第1项第2项第3项第4项第1项第2项第3项 3 8注释标签注释标签的格式有如下 实例 3 8html注释标签 3 9建立超链接的标签为和格式为 超链接名称属性 HREF 定义了这个链接所指的目标地址 目标地址是最重要的 一旦路径上出现差错 该资源就无法访问TARGET 该属性用于指定打开链接的目标窗口 其默认方式是原窗口 其值可为 parent blank self topTITLE 该属性用于指定指向链接时所显示的标题文字 实例 3 9 1 html链接到http 绝对路径链接新浪首页清华大学北京大学上海外国语学院 3 9 2链接路径绝对路径如 相对路径如 news index html根路径如 d web news index html 发送E mail实例 发送邮件向笨笨猫的好友发送邮件 抄送笨笨猫 3 10图像的处理 3 10 1背景图像的设定实例 3 10 1 html设置背景图像盼望着 盼望着 东风来了 春天脚步近了 3 10 2网页中插入图片标签的格式及一般属性设定 3 11表格制作 标签描述 用于定义一个表格开始和结束 定义一行标签 一组行标签内可以建立多组由标签所定义的单元格 定义单元格标签 一组标签将将建立一个单元格 标签必须放在标签内 实例 3 11 html一个简单的表格第1行中的第1列第1行中的第2列第1行中的第3列第2行中的第1列第2行中的第2列第2行中的第3列 表格标签有很多属性 最常用的属性有 实例 3 11 1 html无标题文档第1行中的第1列第1行中的第2列第1行中的第3列第2行中的第1列第2行中的第2列第2行中的第3列 表格行的设定 实例 311 3 html姓名性别年龄专业咚咚男18学生楠楠女17学生 单元格的设定例如 实例 3 11 4 html单元格的设定姓名性别年龄专业笨笨猫女18学生 设定跨多行多列单元格跨多列的语法 跨多行的语法 实例 3 11 5 html学生基本信息成绩姓名性别专业课程分数咚咚男计算机程序设计68喃喃女89 3 12多视窗口框架 3 12 1框架的含义和基本构成框架就是把一个浏览器窗口划分为若干个小窗口 每个窗口可以显示不同的URL网页 语法格式 3 12 2框架集控制 1 左右分割窗口属性 cols如 将窗口分为40 40 20 将100像素以外的窗口平均分配将窗口分为三等份2 上下分割窗口属性 rows上下分割窗口的属性设置和左右窗口的属性设定是一样的 参照上面所述就可以了 3子窗口标签的设定常用属性 例3 12 1 例3 12 2 例3 12 3