1 / 52

课前提问

课前提问. a 标记的常用属性有哪些 href target name title img 标记的常用属性有哪些 src width height alt title. 作 业（第一次）. 用 DW 制作一个个人求职的网页，要求用 表格布局 ，网页中必须包含 图像 、 文本 、 列表 、 链接 及 表格 等基本元素，制作完成后，把该网页的源代码抄写两遍交上来 或者直接用编写代码的方式制作该网页，再在作业本上抄写两遍 下次上课前必须交，否则扣 10 分 (10/30). 媒体元素插入标记 <embed />. <object> </object>.

echo-hyde
Download Presentation

课前提问

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 课前提问 • a标记的常用属性有哪些 • href target name title • img标记的常用属性有哪些 • src width height alt title

  2. 作 业（第一次） • 用DW制作一个个人求职的网页，要求用表格布局，网页中必须包含图像、文本、列表、链接及表格等基本元素，制作完成后，把该网页的源代码抄写两遍交上来 • 或者直接用编写代码的方式制作该网页，再在作业本上抄写两遍 • 下次上课前必须交，否则扣10分(10/30)

  3. 媒体元素插入标记<embed /> <object> </object>

  4. 插入flash的两种方法 • 方法一：执行菜单命令：“插入－媒体－flash”，在代码视图中可看到插入flash元素是通过同时插入object标记和embed标记实现的，以确保在IE5和Firefox中都获得应有的效果 • 方法二：执行菜单命令：“插入－媒体－插件”，此方法在代码视图中仅插入了embed元素。由于IE6和Firefox都能正常显示效果，而代码更简洁，所以推荐用这种方式

  5. 在图像上添加透明flash • 首先可以将一张需要放置透明flash的图片作为单元格的背景导入，然后在此单元格内插入一个透明flash文件，可以调整此flash元素的大小与单元格相一致，选中该flash文件，点击属性面板里的“参数”按钮，新建一个参数“wmode” 值设置为“transparent”。

  6. 插入视频或音频文件 插入视频可分别使用ActiveX按钮或插件按钮实现 <object width="280" height="216"> <param name="autostart" value="false" /> <embed src="2.mpg" width="280" height="216" autostart="false"></embed> </object> ActiveX 方式 <embed src=“2.mpg” width=“276” height=“218” autostart=“false”></embed> 插件方式

  7. 流媒体简介 • 流媒体实际指的是一种新的媒体传送方式，而非一种新的媒体,流式传输方式将整个多媒体文件经过特殊的压缩方式分成一个个压缩包，由视频服务器向用户计算机连续、实时传送。在采用流式传输方式的系统中，用户不必像采用下载方式那样等到整个文件全部下载完毕 • 常见的流媒体文件格式 • real公司：rm\rmvb\ra • apple公司：quicktime\mov • microsoft公司： asf\wmv\wma

  8. 插入流媒体元素的方法 • 网页中插入流媒体也能向插入一般媒体一样使用embed标记，只是要在classId框中设置流媒体的类型 插入Real Player流格式的视频文件 属性面板中设置: ClassID为RealPlayer……。 选中Embed复选框。 Src为zhaodan.rm。 单击“参数…”按钮，设置属性。

  9. parm参数示例 • 参数：console 属性：可以将各种不同的RealPlayer控制聚集在网页上，这样它们可以交互使用或是保持独立，而且互相不影响 演示 • http://59.51.24.41:8000/ec/youhua/kclx-1.htm

  10. 容器标记<div> <span>

  11. div和span • div和span是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置。 • div和span的唯一区别是div是块级元素，span是行内元素。

  12. div和span <body> <div style="background-color:#3399ff">块状区域1</div> <div style="background-color:#99ccff">块状区域2</div> <span style="background-color:#ffccff">行间区域1</span> <span style="background-color:#993399">行间区域2</span> </body>

  13. <div>标记是一个块状的容器，其默认的状态就是占据整个一行。<div>标记是一个块状的容器，其默认的状态就是占据整个一行。 • <span>标记是一个行内的容器，其默认状态是行内的一部分，占据行的长短由内容的多少来决定 • 需要注意的是div并不是层，以前说的层是指通过CSS设置成了绝对定位属性的div元素，但实际上也可以对其他任何标记的元素设置成绝对定位，此时其他标记也成了层，因此层并不对应于任何html标记，所以Dreamweaver CS3去掉了层这一概念，将这些设置成了绝对定位元素的标记统称为AP（Absolute Position）元素

  14. 表格标记<table>、<tr>、<td> <th>、<tbody>、<caption>

  15. 表格标记 • 表格的主要作用：网页布局 • 因为表格可以固定文本或图像的显示位置，还可以使用多重表格，并可以设置前景色和背景色 • 网页中的表格是由<table>标记定义的，一个表格被分成许多行<tr>，每行又被分成许多个单元格<td>，因此<table>、<tr>、<td>是表格中三个最基本的标记，必须一起出现。表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表单，表格等。

  16. The elements that make up the basic structure of a table

  17. 下面这段代码在浏览器中如何显示 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

  18. 表格标记<table>的常见属性

  19. 设置表格边框为20象素的效果 <table border="20"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

  20. 设置表格边框为0 <table border="0"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 可见：设置表格边框为0时，会使单元格边框也变为0象素，而设置表格边框为其他数值时，不会影响单元格边框的宽

  21. 再设置边框颜色为青色 <table border="20" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Firefox效果 IE效果

  22. 再设置背景颜色为玫瑰色 <table border="20" bgcolor="#9933CC" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

  23. 设置间距为10，取消背景色 <table border="20" cellspacing="10"bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

  24. 总结:间距cellspacing的作用

  25. 再设置填充为10 <table border="20" cellspacing="10 " cellpadding="10" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

  26. 总结：填充cellpadding的作用

  27. 表格的rules属性 • rules属性：可实现只显示表格的行边框或列边框，取值为rows时只显示行边框，取值为cols时只显示列边框，如： • <table rules="rows" width="200" border="1" cellpadding="0" cellspacing="2">

  28. 单元格标记<td>的常见属性 注意：单元格td无border属性，因此无法设置单元格边框的宽度，单元格边框宽度只能是1或0

  29. 设置第一个单元格边框为红色 <table border="20" align="center" cellpadding="10" cellspacing="10" bordercolor="#0099FF"> <tr> <td bordercolor="#FF0000">row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> IE的显示 Firefox的显示

  30. 设置第一行单元格背景色为蓝色 <tr> <td bgcolor="#99CCFF">row 1, cell 1</td> <td bgcolor="#99CCFF">row 1, cell 2</td> </tr> 等价于： <tr bgcolor="#99CCFF"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>

  31. 设置所有单元格背景色为蓝色 <tr> <td bgcolor="#99CCFF">row 1, cell 1</td> <td bgcolor="#99CCFF">row 1, cell 2</td> </tr> <tr> <td bgcolor="#99CCFF">row 1, cell 1</td> <td bgcolor="#99CCFF">row 1, cell 2</td> </tr> 等价于 <tbody bgcolor="#99CCFF"> <tr>…</tr><tr>…</tr> </tbody>

  32. 再设置表格的背景色为红色 • 再设置表格的边框border为0

  33. 实现1象素边框表格 • 此时将表格的间距cellspacing设为1，即实现1象素边框表格， • 其原理是通过把表格的背景色和（所有单元格的背景色）调整成不同的颜色，使间距看起来象一个边框一样 • 所有单元格的背景色设为同一颜色后，我们也称为表格的前景色

  34. 用CSS属性border-collapse做1象素边框的表格 • 在默认情况下表格边框和单元格边框是不叠加的，此时表格的边框和单元格的边框紧挨在一起，所以边框的宽度为1＋1＝2象素，这是border-collapse属性的默认值为separate，即不重叠时的情况。当我们把border-collapse属性值设为collapse（重叠）时，表格边框和单元格边框将发生重叠，则边框的宽度为1象素。 • border-collapse:collapse; • <table border="1" bordercolor="#FF0000" style="border-collapse:collapse;">

  35. 双细线边框表格的原理 • 将表格的边框颜色bordercolor属性设置为某种颜色，则表格的暗边框和亮边框会变为同一种颜色，表格的边框立体效果消失，（在IE中单元格边框的颜色也会跟着改变，而Firefox中单元格边框颜色不会改变）此时表格的边框和单元格的边框都为1象素，只要间距cellspacing不设为0，则两组边框不会重合，显示为双细线边框表格。

  36. 双细线边框表格的实现 <table border="1" cellpadding="10" cellspacing="2" bordercolor="#0099FF"> <tr bgcolor="#99CCFF"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table> IE的显示

  37. 例2 下面的表格是如何实现的 • 用间距做的边框，但并没有把表格的边框border设为0 ，而是设为1，白色。因此在红色“边框”的外面还有1象素白色的边框，单元格外也有1象素的白色边框

  38. 单元格内容的对齐属性align/valign • align属性可以让单元格中的内容是水平居中或左右对齐，默认是左对齐 • valign属性是垂直对齐属性，可以让内容在垂直方向对齐，默认是垂直居中对齐

  39. 单元格的合并属性（colspan、rowspan） • 单元格的合并属性是td标记特有的两个属性，分别是跨多列属性colspan和跨多行属性rowspan，它们用于合并列或合并单元格。如： • <td colspan="3"> 单元格内容 </td> • 表示该单元格是由3列（3个并排的单元格）合并而成，它将使该行<tr>标记中减少两个<td>标记。 • <td rowspan="3">单元格内容</td> • 表示该单元格由3行（3个上下排列的单元格）合并而成，它将使该行下的两行，两个<tr>标记中分别减少一个<td>标记。

  40. 注意：colspan和rowspan属性也可以在一个单元格<td>标记中同时出现，如：注意：colspan和rowspan属性也可以在一个单元格<td>标记中同时出现，如： • <td colspan="3" rowspan="3">&nbsp;</td> <!-- 同时合并了三行三列的9个单元格 -->

  41. 标题单元格<th>标记 • 标题单元格标记<th>相当于一个单元格内字体以粗体居中显示的<td>标记

  42. 表格标题标记<caption> • 标题标记<caption>的常用属性有align、valign • （valign表示标题在表格的上部或下部，值为bottom|top）

  43. <tbody>……</tbody>标记 • 浏览器默认是将整个表格的代码下载完再显示整个表格，如果想让浏览器分行下载，即下载一行显示一行，可以在所有行标记外加上<tbody>标记，这个对表格中内容很多时比较实用。 • 有时如果要把所有单元格的背景色设置成同一种颜色，可以设置tbody的背景色，这样就不必为每个单元格都添加一条bgcolor属性，可节省很多代码

  44. 普通表格与布局表格的区别 • 在布局模式下绘制的布局表格是特殊设置了的普通表格，布局表格将border、cellpadding、cellspacing三个属性都设置为了0，因此我们看不到它的边框，布局单元格将valign属性设置为top，因此往布局单元格中插入内容默认都是往单元格最顶端排列的。 • 实验：用普通标格和布局表格分别进行1-3-1版式布局

  45. 在Dreamweaver中选中表格的方法 • 选择整个表格：单击表格左上角或右边框或底边框或状态条中的<table>标签。 • 选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭头出现时单击，或状态条中的<tr>标签（推荐）。 • 选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。 • 选择不连续的几个单元格：按住Ctrl键，单击欲选定的单元格、行或列。 • 选择单元格中的网页元素：点击单元格中的网页元素。

  46. DW在表格中插入行或列的方法 • 当光标位于表格内时，按右键在弹出菜单中选择“表格——插入行（或插入列）”可在表格的当前行的上方插入一行，或当前行的左边插入一列，若要在表格的最右边插入一列或最下方插入一行，可选择“表格——插入行或列…”，在所选列之后或所选行之下插入列或行。插入行也可以在代码视图中复制一行的代码“<tr>……</tr>”再粘贴几次就插入几行，插入列则在代码视图中不好进行。

  47. 制作固定宽度的表格 • 如果我们不定义表格中每个单元格的宽度，当向单元格中插入网页元素时，表格往往会变形，要制作固定宽度的表格，通常有两种方法： • ① 定义所有列的宽度，但不定义整个表格的宽度，整个表格的实际宽度为：所有列的宽度和+边框宽度和+间距和+填充和，这时候，只要单元格内的内容不超过的单元格的宽度时，表格不会变形。 • ② 定义整个表格的宽，如500像素、98%等，再留一列的宽度不定义，未定义的这一列的宽度为整个表格的宽度-已定义列的宽度和-边框宽度和-间距和-填充和，同样在插入内容时也不会变形。

  48. 用单元格制作水平线或占位表格 • 关键：去掉单元格<td>中的“&nbsp;”空格 <table width="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="1" bgcolor="#FF00FF"></td> <!-- 单元格中的“&nbsp;”已去掉--> </tr> </table> 制作占位表格：演示

  49. 用表格制作圆角栏目框 • 网页中经常可以看到漂亮的圆角栏目框，在这里我们来制作一个固定宽度的圆角栏目框

More Related