网页设计与制作(初级).ppt

网页设计与制作 2 什么是HTML HTML是用来描述网页的一种语言 HTML指的是超文本标记语言 HyperTextMarkupLanguage HTML不是一种编程语言 而是一种标记语言 markuplanguage 标记语言是一套标记标签 markuptag HTML使用标记标签来描述网页 HTML标签 HTML标记标签通常被称为HTML标签 HTMLtag HTML标签是由尖括号包围的关键词 比如HTML标签通常是成对出现的 比如和标签对中的第一个标签是开始标签 第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签 3 HTML HTML文档 网页HTML文档描述网页HTML文档包含HTML标签和纯文本HTML文档也被称为网页 4 HTML的基本结构 FirstPageMyFirstHeadingMyfirstparagraph 5 例子解释 与之间的文本描述网页与之间的文本是可见的页面内容与之间的文本被显示为标题与之间的文本被显示为段落 6 什么是HTML标签 HTML文档和HTML元素是通过HTML标签进行标记的HTML标签由开始标签和结束标签组成开始标签是被括号包围的元素名结束标签是被括号包围的斜杠和元素名某些HTML元素没有结束标签 比如注释 开始标签的英文翻译是starttag或openingtag 结束标签的英文翻译是endtag或closingtag 7 HTML元素 HTML元素指的是从开始标签 starttag 到结束标签 endtag 的所有代码 注释 开始标签常被称为开放标签 openingtag 结束标签常称为闭合标签 closingtag 8 HTML元素语法 HTML元素以开始标签起始HTML元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些HTML元素具有空内容 emptycontent 空元素在开始标签中进行关闭 以开始标签的结束而结束 大多数HTML元素可拥有属性 9 嵌套的HTML元素 大多数HTML元素可以嵌套 可以包含其他HTML元素 HTML文档由嵌套的HTML元素构成 10 HTML提示 使用小写标签 HTML标签对大小写不敏感 等同于 许多网站都使用大写的HTML标签 建议使用的是小写标签 因为万维网联盟 W3C 在HTML4中推荐使用小写 而在未来 X HTML版本中强制使用小写 11 HTML属性 HTML标签可以拥有属性 属性提供了有关HTML元素的更多的信息 属性总是以名称 值对的形式出现 比如 name value 属性总是在HTML元素的开始标签中规定 12 始终为属性值加引号 属性值应该始终被包括在引号内 双引号是最常用的 不过使用单引号也没有问题 在某些个别的情况下 比如属性值本身就含有双引号 那么您必须使用单引号 13 HTML标题 HTML标题 Heading 是通过 等标签进行定义的 实例ThisisaheadingThisisaheadingThisisaheading 14 标题很重要 请确保将HTMLheading标签只用于标题 不要仅仅是为了产生粗体或大号的文本而使用标题 搜索引擎使用标题为您的网页的结构和内容编制索引 因为用户可以通过标题来快速浏览您的网页 所以用标题来呈现文档结构是很重要的 应该将h1用作主标题 最重要的 其后是h2 次重要的 再其次是h3 以此类推 15 HTML段落 HTML段落是通过标签进行定义的 Thisisaparagraph Thisisanotherparagraph 注释 浏览器会自动地在段落的前后添加空行 是块级元素 提示 使用空的段落标记去插入一个空行是个坏习惯 用标签代替它 但是不要用标签去创建列表 不要着急 您将在稍后的篇幅学习到HTML列表 16 不要忘记结束标签 即使忘了使用结束标签 大多数浏览器也会正确地将HTML显示出来 实例ThisisaparagraphThisisanotherparagraph 17 超链接标记 HTML链接 HTML链接是通过标签进行定义的 Thisisalink注释 在href属性中指定链接的地址 19 超链接标记 超链接是网页的基本元素 网页正是通过超链接而相互链接组织成一个网站 并将internet上的各个网站联系在一起 浏览者通过超链接选择阅读路径 超链接是通过URL 统一资源定位器 来定位目标信息的 URL包括4部分 网络协议 域名或IP地址 路径和文件名 URL分为绝对URL和相对URL 绝对URL 绝对URL是采用完整的URL来规定文件在internet上的精确地点 包括完整的协议类型 计算机域名或IP地址 包含路径信息的文档名 书写格式为 协议 计算机域名或IP地址 文档路径 文档名 例如 相对URL 相对URL是相对于包含超链接页的地点来规定文件的地点 如链接到同一路径下的文档 直接输入文件名即可 如news htm如链接到同一路径下子文件夹的文档 则先输入子文件夹名和斜杠 再输入文件名 如yule news htm如链接到上一级路径中 要在文件名前输入 如 news htm 其中 表示上级目录 表示本级目录 相对URL示例 wgzx yule index htm oa htm pop htm news htm 1 href yule news htm 2 1 2 href oa htm 3 href pop htm 3 相对URL的优势 可以看出相对URL方式比较简便 不需输入一长串完整的URL 另外相对路径还有一个非常重要的特点是 可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录 超链接的种类 根据源对象划分 1 用文本做超链接 首页2 用图像做超链接 3 文本图像混合做链接 格力空调1型该方法在商品展示的网站上较常用 使用图像做超链接后 图像会自动增加边框 可设置边框为0去掉 超链接的种类 根据源对象划分2 4 热区链接 使用map在图像上定义一幅地图 地图上可包含多个热区 每个热区用area单标记定义 area的shape属性定义了热区的形状 coords定义了热区的坐标点 href定义了热区链接的文件 同时img标记用usemap指明用了哪幅地图 超链接的种类 根据href的取值 1 链接到其他网页或文件 jpg rar等 内部链接返回首页外部链接网易网站下载链接点击下载2 电子邮件链接给我留言 如果IE不能打开该文件 则会弹出文件下载的对话框 比普通链接多了个 mailto 超链接的种类 根据href的取值2 3 锚链接 链接到页面中某一指定的位置 当网页内容很长 需要进行页内跳转链接时 就需要定义锚点和锚点链接 锚点可使用name属性或id属性定义 也可以链接到其他网页某个锚点处 4 空链接和脚本链接 超链接的打开方式 target属性的取值 在本窗口打开 self target的默认值 在新窗口打开 blank在父窗口打开 parent将链接的文件载入到父框架在整个窗口打开 top 将链接的文件载入到整个浏览器窗口中 并删除所有框架 parent top仅仅在网页被嵌入到其他网页中有效 如框架中的网页 所以这两种取值用得很少 超链接的title属性 title属性在很多标记里都有 其作用是在鼠标停留在该元素上时显示设置的说明文字如格力太阳能喜获 超链接制作的原则 1 可以使用相对链接尽量不要使用绝对链接 如 index htm而不是2 链接目标尽可能简单如 而不是 课后思考 url 统一资源定位器 url一般作为哪些属性的取值 href index asp src logo gif url的种类相对url绝对urlurl格式的类型协议名 主机ip或域名 文件目录 文件名 HTML图像 HTML图像是通过标签进行定义的 注释 图像的名称和尺寸是以属性的形式提供的 属性 src表示图片的路径 33 HTML水平线 标签在HTML页面中创建水平线 hr元素可用于分隔内容 34 HTML注释 可以将注释插入HTML代码中 这样可以提高其可读性 使代码更易被人理解 浏览器会忽略注释 也不会显示它们 注释是这样写的 注释 开始括号之后 左边的括号 需要紧跟一个叹号 结束括号之前 右边的括号 不需要 35 HTML标记基础 什么是标记 标记是网页文档中的一些有特定意义的符号 这些符号指明如何显示文档中的内容 标记可以具有相应属性即各种参数 如size color text width和noshade等 例如 网页中添加文本的方法 文本格式标记是网页中定义文本格式的标记1 直接写文本文本 文本 文本 文本 2 用段落标记 格式化文本 各段落文本将分行显示 3 用标题标记 格式化文本 作用 定义第n号标题字体 n 1 6 n值越大 字越小 文本将变为粗体显示 可看成特殊的段落标记 4 用预格式化标记 格式化文本 标记内的文本将按原来的格式显示 保留文本中的所有空格 换行和定位符 用标题标记 格式化文本 第1号标题字体第3号标题字体第4号标题字体第5号标题字体 居中 标题标记和段落标记 1号标题第一段3号标题第二段5号标题第三段 用预格式化标记 格式文本 网页设计师这一职业在今后来说还是有需求的 因为随着网络越来越普及 像我国的房地产市场 文本的强制换行 电子商务顾名思义就是在internet上做生意 商品展示 广告宣传 发布供求信息等活动实现的途径就是网页 强制不换行标记 常用英文人名BillGates 文本中的空格 标记 除外 内字符前的空格浏览器将全部忽略 字符与字符间的空格浏览器将只保留一个空格显示 回车视为一个空格 块级元素之间忽略所有空格 如果要输入多个空格或需要在字符之前输入空格需在源代码中插入 表示一个半角空格 行内元素可看成一个字符 文本中的转义字符 在HTML源代码中 有些字符有特别的含义 比如小于号 符号在DW的设计视图中输入这些特殊字符 DW会自动在代码视图添加它们对应的转义字符 DW中插入HTML文本元素的快捷键 Enter插入 综合实例 分段换行与预格式以下是直接写文本的情况 星期一 星期二 星期三 星期四 星期五 星期六 星期日 以下是使用了三个换行标记的情况 星期一 星期二 星期三 星期四 星期五 星期六 星期日 以下使用分段标记 分为两段 星期一 星期二 星期三 星期四 星期五 星期六 星期日 以下使用预格式 星期一 星期二 星期三 星期四 星期五 星期六 星期日 跑马灯标记 一个特殊的文本标记 能使其中的文本在浏览器屏幕上不断滚动 其中behavior alternate 设置滚动方式为来回滚动 设置为scroll表示循环滚动 设置为slide表示滚动到目的地就停止 direction属性用于控制滚动的方向 可以上下滚动或左右滚动 loop设置滚动的次数 loop为0表示不断滚动 scrollamount属性设置滚动的速度 scrolldelay属性设置两次滚动间的间隔时间 示例 测试 网页设计与制作学习 可以将swf文件下载下来用flash播放器全屏播放以达到最好效果 也可以在IE浏览器中按F11键达到全屏效果 水平线标记 标记是在HTML文档中加入一条水平线 它可以直接使用 具有size color width和noshade属性 size是设置水平线的厚度 而width是设定水平线的宽度 默认单位是像素 noshade属性用来加入一条没有阴影的水平线 文本修饰标记 字体标记 文本修饰标记 文本修饰标记是对文本的外观进行修饰的标记 如让文字变色 加大 变粗体 添加下划线等 1 font标记 定义文字的各种属性 例 注意 文本修饰标记由于是行内标记 没有align属性 加粗 倾斜与下划线标记 2 加粗 倾斜与下划线的定义标记 b i u 使用加粗 倾斜与下划线标记 b i u 的组合 可对文本文字进一步修饰 如 此处以红色五号字粗体显示 上标 sup 和下标 sub 标记 用于书写数学公式或分子式 如 H2OX2由于字体标记属于对文本外观进行修饰的标记 是由于当时CSS语言尚未出现时html定义的表现的范畴 随着CSS的出现 这些表现功能均可以由CSS完成 所以不含有语义的字体标记慢慢过时了 列表标记 列表标记 为了合理地组织文本 网页中常常要用到列表 在HTML中可以使用的列表标记有无序列表 有序列表和定义列表三种 无序列表 UnorderedList 有序列表 OrderedList 定义列表 DefinedList 嵌套的无序列表示例 文章CSS教程DOM教程XML教程参考XHTMLXMLCSS 有序列表 OrderedList 文章CSS教程DOM教程XML教程Flash教程 定义列表 DefinedList 湖南城市长沙衡阳常德湖北城市武汉襄樊宜昌 url协议的类型 常见的url协议的类型httpftpfile 192 168 88 6 web wy gif当在DW中建立网站目录后 那么网站目录内的文件之间建立链接就会自动采用相对链接的方式 相对链接以网站目录为基准 若没建立网站目录 DW则采用file协议方式 以磁盘根目录为基准 建立链接 而这是我们应该避免的 图像标记 图像标记 将图形文件嵌入到网页文档中的当前位置说明 网页中插入图像有两种方法 一是插入一个元素 二是将图像作为背景嵌入到网页中由于CSS的背景属性的功能很强大 现在更推荐将所有的图像都作为背景嵌入 如果图像是通过元素插入 则可以在浏览器上通过按住鼠标左键拖动选中图片 或者将它拖动到地址栏里 如果作为背景嵌入 则无法选中图片 图像标记 网页中支持的图像文件格式 网页中可以插入的图像文件的类型有jpg格式 gif格式和png格式 这些文件都是压缩格式的图像格式 其中jpg格式适合用于网页中较大尺寸的真彩色图片 是一种有损压缩的格式 gif格式一般用于较小尺寸的图片 是一种无损压缩的格式 只支持256色 GIF在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色 gif格式的特点是可以实现gif动画 和gif全透明的图像 png格式可以用于alpha透明效果 但IE6不能够支持 标记的常见属性 是一个行内元素 插入元素不会导致任何换行 下面是标记的常见属性 在单元格中插入图像的方法 对于表格布局的网页 所有的元素都是放置在单元格中的 图像也不例外 要在单元格中插入图像 且单元格的边框和图像之间没有间隙 那么必须将该单元格的宽和高设置为图片的宽和高 且表格中其它单元格的大小也必须固定 然后确保与之间只有标记 没有空格和换行符 否则单元格会被空格撑开 如 不能换行 插入图像的对齐方式 标记的对齐方式仍然通过align属性实现 但其取值多达9种 其中要实现图片和文本混排可使用 左对齐 或 右对齐 要实现文本和图片顶部对齐可使用 文本上方 但通常是将图片放在表格里 通过表格定位来实现文本和图像的混排 复习题 a标记的常用属性有哪些hreftargetnametitleimg标记的常用属性有哪些srcwidthheightalttitle 作业 用DW制作一个个人求职的网页 要求用表格布局 网页中必须包含图像 文本 列表 链接及表格等基本元素 媒体元素插入标记 插入flash的两种方法 方法一 执行菜单命令 插入 媒体 flash 在代码视图中可看到插入flash元素是通过同时插入object标记和embed标记实现的 以确保在IE5和Firefox中都获得应有的效果方法二 执行菜单命令 插入 媒体 插件 此方法在代码视图中仅插入了embed元素 由于IE6和Firefox都能正常显示效果 而代码更简洁 所以推荐用这种方式 但不能用来插入透明flash 否则IE浏览器中没有object标记的parm属性不会透明 在图像上添加透明flash 首先可以将一张需要放置透明flash的图片作为单元格的背景导入 然后在此单元格内插入一个透明flash文件 可以调整此flash元素的大小与单元格相一致 选中该flash文件 点击属性面板里的 参数 按钮 新建一个参数 wmode 值设置为 transparent 这句使flash在IE浏览器中透明 这句使flash在非IE浏览器中透明 插入视频或音频文件 插入视频可分别使用ActiveX按钮或插件按钮实现ActiveX方式插件方式 流媒体简介 流媒体实际指的是一种新的媒体传送方式 而非一种新的媒体 流式传输方式将整个多媒体文件经过特殊的压缩方式分成一个个压缩包 由视频服务器向用户计算机连续 实时传送 在采用流式传输方式的系统中 用户不必像采用下载方式那样等到整个文件全部下载完毕常见的流媒体文件格式real公司 rm rmvb raapple公司 quicktime movmicrosoft公司 asf wmv wma 插入流媒体元素的方法 网页中插入流媒体也能向插入一般媒体一样使用embed标记 只是要在classId框中设置流媒体的类型插入RealPlayer流格式的视频文件属性面板中设置 ClassID为RealPlayer 选中Embed复选框 Src为zhaodan rm 单击 参数 按钮 设置属性 parm参数示例 参数 console属性 可以将各种不同的RealPlayer控制聚集在网页上 这样它们可以交互使用或是保持独立 而且互相不影响演示http 59 51 24 41 8000 ec youhua kclx 1 htm 容器标记 div和span div和span是不含有任何语义的标记 用来在其中放置任何网页元素 就象一个容器一样 当把文字放入后 文字的格式外观都不会发生任何改变 应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置 div和span的唯一区别是div是块级元素 span是行内元素 div和span 块状区域1块状区域2行间区域1行间区域2 标记是一个块状的容器 其默认的状态就是占据整个一行 标记是一个行内的容器 其默认状态是行内的一部分 占据行的长短由内容的多少来决定需要注意的是div并不是层 以前说的层是指通过CSS设置成了绝对定位属性的div元素 但实际上也可以对其他任何标记的元素设置成绝对定位 此时其他标记也成了层 因此层并不对应于任何html标记 所以DreamweaverCS3去掉了层这一概念 将这些设置成了绝对定位元素的标记统称为AP AbsolutePosition 元素 表格标记 表格标记 表格的主要作用 网页布局因为表格可以固定文本或图像的显示位置 还可以使用多重表格 并可以设置前景色和背景色网页中的表格是由标记定义的 一个表格被分成许多行 每行又被分成许多个单元格 因此 是表格中三个最基本的标记 必须一起出现 表格中的单元格能容纳网页中的任何元素 如图像 文本 列表 表单 表格等 Theelementsthatmakeupthebasicstructureofatable 下面这段代码在浏览器中如何显示 row1 cell1row1 cell2row2 cell1row2 cell2 表格标记的常见属性 设置表格边框为20象素的效果 row1 cell1row1 cell2row2 cell1row2 cell2 设置表格边框为0 row1 cell1row1 cell2row2 cell1row2 cell2 可见 设置表格边框为0时 会使单元格边框也变为0象素 而设置表格边框为其他数值时 不会影响单元格边框的宽 再设置边框颜色为青色 row1 cell1row1 cell2row2 cell1row2 cell2 Firefox效果 IE效果 再设置背景颜色为玫瑰色 row1 cell1row1 cell2row2 cell1row2 cell2 设置间距为10 取消背景色 row1 cell1row1 cell2row2 cell1row2 cell2 总结 间距cellspacing的作用 再设置填充为10 row1 cell1row1 cell2row2 cell1row2 cell2 总结 填充cellpadding的作用 表格的rules属性 rules属性 可实现只显示表格的行边框或列边框 取值为rows时只显示行边框 取值为cols时只显示列边框 如 单元格标记的常见属性 注意 单元格td无border属性 因此无法设置单元格边框的宽度 单元格边框宽度只能是1或0 设置第一个单元格边框为红色 row1 cell1row1 cell2row2 cell1row2 cell2 IE的显示 Firefox的显示 设置第一行单元格背景色为蓝色 row1 cell1row1 cell2等价于 row1 cell1row1 cell2 设置所有单元格背景色为蓝色 row1 cell1row1 cell2row1 cell1row1 cell2等价于 再设置表格的背景色为红色 再设置表格的边框border为0 实现1象素边框表格 此时将表格的间距cellspacing设为1 即实现1象素边框表格 其原理是通过把表格的背景色和 所有单元格的背景色 调整成不同的颜色 使间距看起来象一个边框一样所有单元格的背景色设为同一颜色后 我们也称为表格的前景色 用CSS属性border collapse做1象素边框的表格 在默认情况下表格边框和单元格边框是不叠加的 此时表格的边框和单元格的边框紧挨在一起 所以边框的宽度为1 1 2象素 这是border collapse属性的默认值为separate 即不重叠时的情况 当我们把border collapse属性值设为collapse 重叠 时 表格边框和单元格边框将发生重叠 则边框的宽度为1象素 border collapse collapse 双细线边框表格的原理 将表格的边框颜色bordercolor属性设置为某种颜色 则表格的暗边框和亮边框会变为同一种颜色 表格的边框立体效果消失 在IE中单元格边框的颜色也会跟着改变 而Firefox中单元格边框颜色不会改变 此时表格的边框和单元格的边框都为1象素 只要间距cellspacing不设为0 则两组边框不会重合 显示为双细线边框表格 双细线边框表格的实现 row1 cell1row1 cell2row1 cell1row1 cell2 IE的显示 例2下面的表格是如何实现的 用间距做的边框 但并没有把表格的边框border设为0 而是设为1 白色 因此在红色 边框 的外面还有1象素白色的表格边框 单元格外也有1象素的白色单元格边框表格间距为1 表格背景色为红色 单元格背景色为淡红色 单元格内容的对齐属性align valign align属性可以让单元格中的内容是水平居中或左右对齐 默认是左对齐valign属性是垂直对齐属性 可以让内容在垂直方向对齐 默认是垂直居中对齐 单元格的合并属性 colspan rowspan 单元格的合并属性是td标记特有的两个属性 分别是跨多列属性colspan和跨多行属性rowspan 它们用于合并列或合并单元格 如 单元格内容表示该单元格是由3列 3个并排的单元格 合并而成 它将使该行标记中减少两个标记 单元格内容表示该单元格由3行 3个上下排列的单元格 合并而成 它将使该行下的两行 两个标记中分别减少一个标记 注意 colspan和rowspan属性也可以在一个单元格标记中同时出现 如 标题单元格标记 标题单元格标记相当于一个单元格内字体以粗体居中显示的标记 表格标题标记 标题标记的常用属性有align valign valign表示标题在表格的上部或下部 值为bottom top 标记 浏览器默认是将整个表格的代码下载完再显示整个表格 如果想让浏览器分行下载 即下载一行显示一行 可以在所有行标记外加上标记 这个对表格中内容很多时比较实用 有时如果要把所有单元格的背景色设置成同一种颜色 可以设置tbody的背景色 这样就不必为每个单元格都添加一条bgcolor属性 可节省很多代码 普通表格与布局表格的区别 在布局模式下绘制的布局表格是特殊设置了的普通表格 布局表格将border cellpadding cellspacing三个属性都设置为了0 因此我们看不到它的边框 布局单元格将valign属性设置为top 因此往布局单元格中插入内容默认都是往单元格最顶端排列的 实验 用普通标格和布局表格分别进行1 3 1版式布局 在Dreamweaver中选中表格的方法 选择整个表格 单击表格左上角或右边框或底边框或状态条中的标签 选择一行或一列单元格 将鼠标指针置于一行的左边框上