静态网页设计2_第1页
静态网页设计2_第2页
静态网页设计2_第3页
静态网页设计2_第4页
静态网页设计2_第5页
已阅读5页，还剩47页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

课前提问a标记的常用属性有哪些hreftargetnametitleimg标记的常用属性有哪些srcwidthheightalttitle作业（第一次）用DW制作一个个人求职的网页，要求用表格布局，网页中必须包含图像、文本、列表、链接及表格等基本元素，制作完成后，把该网页的源代码抄写两遍交上来或者直接用编写代码的方式制作该网页，再在作业本上抄写两遍下次上课前必须交，否则扣10分(10/30)媒体元素插入标记<embed/><object></object>插入flash的两种方法方法一：执行菜单命令：“插入－媒体－flash”，在代码视图中可看到插入flash元素是通过同时插入object标记和embed标记实现的，以确保在IE5和Firefox中都获得应有的效果方法二：执行菜单命令：“插入－媒体－插件”，此方法在代码视图中仅插入了embed元素。由于IE6和Firefox都能正常显示效果，而代码更简洁，所以推荐用这种方式在图像上添加透明flash首先可以将一张需要放置透明flash的图片作为单元格的背景导入，然后在此单元格内插入一个透明flash文件，可以调整此flash元素的大小与单元格相一致，选中该flash文件，点击属性面板里的“参数”按钮，新建一个参数“wmode”值设置为“transparent”。

插入视频或音频文件插入视频可分别使用ActiveX按钮或插件按钮实现<objectwidth="280"height="216"><paramname="autostart"value="false"/><embedsrc="2.mpg"width="280"height="216"autostart="false"></embed></object>ActiveX方式<embed

src=“2.mpg”width=“276”height=“218”autostart=“false”></embed>插件方式流媒体简介流媒体实际指的是一种新的媒体传送方式，而非一种新的媒体,流式传输方式将整个多媒体文件经过特殊的压缩方式分成一个个压缩包，由视频服务器向用户计算机连续、实时传送。在采用流式传输方式的系统中，用户不必像采用下载方式那样等到整个文件全部下载完毕常见的流媒体文件格式real公司：rm\rmvb\ra

apple公司：quicktime\mov

microsoft公司：asf\wmv\wma

插入流媒体元素的方法网页中插入流媒体也能向插入一般媒体一样使用embed标记，只是要在classId框中设置流媒体的类型插入RealPlayer流格式的视频文件属性面板中设置:ClassID为RealPlayer……。选中Embed复选框。Src为zhaodan.rm。单击“参数…”按钮，设置属性。parm参数示例参数：console属性：可以将各种不同的RealPlayer控制聚集在网页上，这样它们可以交互使用或是保持独立，而且互相不影响演示1:8000/ec/youhua/kclx-1.htm容器标记<div><span>div和spandiv和span是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置。div和span的唯一区别是div是块级元素，span是行内元素。div和span<body><divstyle="background-color:#3399ff">块状区域1</div><divstyle="background-color:#99ccff">块状区域2</div><spanstyle="background-color:#ffccff">行间区域1</span><spanstyle="background-color:#993399">行间区域2</span></body><div>标记是一个块状的容器，其默认的状态就是占据整个一行。<span>标记是一个行内的容器，其默认状态是行内的一部分，占据行的长短由内容的多少来决定需要注意的是div并不是层，以前说的层是指通过CSS设置成了绝对定位属性的div元素，但实际上也可以对其他任何标记的元素设置成绝对定位，此时其他标记也成了层，因此层并不对应于任何html标记，所以DreamweaverCS3去掉了层这一概念，将这些设置成了绝对定位元素的标记统称为AP（AbsolutePosition）元素表格标记<table>、<tr>、<td><th>、<tbody>、<caption>表格标记表格的主要作用：网页布局因为表格可以固定文本或图像的显示位置，还可以使用多重表格，并可以设置前景色和背景色网页中的表格是由<table>标记定义的，一个表格被分成许多行<tr>，每行又被分成许多个单元格<td>，因此<table>、<tr>、<td>是表格中三个最基本的标记，必须一起出现。表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表单，表格等。The elements that make up the basicstructure of a table下面这段代码在浏览器中如何显示<tableborder="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>表格标记<table>的常见属性table的属性含义border表格边框的宽度bordercolor表格边框的颜色，若不设置，将显示立体边框效果bordercolordarkbordercolorlight设置边框暗部分和明亮部分效果，IE才支持这两个属性bgcolor表格的背景色background表格的背景图像cellspacing表格的间距cellpadding表格的填充width，heightalign表格的宽和高，可以使用象素或百分比做单位，align是水平对齐属性设置表格边框为20象素的效果<tableborder="20"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>设置表格边框为0<tableborder="0"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>可见：设置表格边框为0时，会使单元格边框也变为0象素，而设置表格边框为其他数值时，不会影响单元格边框的宽再设置边框颜色为青色<tableborder="20"bordercolor="#0099FF"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>Firefox效果IE效果再设置背景颜色为玫瑰色<tableborder="20"bgcolor="#9933CC"

bordercolor="#0099FF"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>设置间距为10，取消背景色<tableborder="20"

cellspacing="10"

bordercolor="#0099FF"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>总结:间距cellspacing的作用再设置填充为10<tableborder="20"cellspacing="10"cellpadding="10"

bordercolor="#0099FF"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>总结：填充cellpadding的作用表格的rules属性rules属性：可实现只显示表格的行边框或列边框，取值为rows时只显示行边框，取值为cols时只显示列边框，如：<tablerules="rows"width="200"border="1"cellpadding="0"cellspacing="2">单元格标记<td>的常见属性td的属性含义bordercolor单元格边框的颜色，该属性仅IE支持bgcolor单元格的背景色background单元格的背景图像align/valign单元格里的内容的水平或垂直对齐方式colspan/rowspan合并同一列相邻的几个单元格/合并同一行的几个单元格width，height单元格的宽和高，可以使用象素或百分比做单位注意：单元格td无border属性，因此无法设置单元格边框的宽度，单元格边框宽度只能是1或0设置第一个单元格边框为红色<tableborder="20"align="center"cellpadding="10"cellspacing="10"bordercolor="#0099FF"> <tr> <tdbordercolor="#FF0000">row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>IE的显示Firefox的显示设置第一行单元格背景色为蓝色<tr> <tdbgcolor="#99CCFF">row1,cell1</td> <tdbgcolor="#99CCFF">row1,cell2</td></tr>等价于：<tr

bgcolor="#99CCFF"> <td>row1,cell1</td> <td>row1,cell2</td></tr>

设置所有单元格背景色为蓝色<tr> <tdbgcolor="#99CCFF">row1,cell1</td> <tdbgcolor="#99CCFF">row1,cell2</td></tr><tr> <tdbgcolor="#99CCFF">row1,cell1</td> <tdbgcolor="#99CCFF">row1,cell2</td></tr>等价于<tbody

bgcolor="#99CCFF"><tr>…</tr><tr>…</tr></tbody>再设置表格的背景色为红色再设置表格的边框border为0实现1象素边框表格此时将表格的间距cellspacing设为1，即实现1象素边框表格，其原理是通过把表格的背景色和（所有单元格的背景色）调整成不同的颜色，使间距看起来象一个边框一样所有单元格的背景色设为同一颜色后，我们也称为表格的前景色用CSS属性border-collapse做1象素边框的表格在默认情况下表格边框和单元格边框是不叠加的，此时表格的边框和单元格的边框紧挨在一起，所以边框的宽度为1＋1＝2象素，这是border-collapse属性的默认值为separate，即不重叠时的情况。当我们把border-collapse属性值设为collapse（重叠）时，表格边框和单元格边框将发生重叠，则边框的宽度为1象素。border-collapse:collapse;<tableborder="1"bordercolor="#FF0000"style="border-collapse:collapse;">双细线边框表格的原理将表格的边框颜色bordercolor属性设置为某种颜色，则表格的暗边框和亮边框会变为同一种颜色，表格的边框立体效果消失，（在IE中单元格边框的颜色也会跟着改变，而Firefox中单元格边框颜色不会改变）此时表格的边框和单元格的边框都为1象素，只要间距cellspacing不设为0，则两组边框不会重合，显示为双细线边框表格。双细线边框表格的实现<tableborder="1"cellpadding="10"cellspacing="2"bordercolor="#0099FF"> <tr

bgcolor="#99CCFF"> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr></table>IE的显示例2下面的表格是如何实现的用间距做的边框，但并没有把表格的边框border设为0，而是设为1，白色。因此在红色“边框”的外面还有1象素白色的边框，单元格外也有1象素的白色边框单元格内容的对齐属性align/valignalign属性可以让单元格中的内容是水平居中或左右对齐，默认是左对齐valign属性是垂直对齐属性，可以让内容在垂直方向对齐，默认是垂直居中对齐单元格的合并属性（colspan、rowspan）单元格的合并属性是td标记特有的两个属性，分别是跨多列属性colspan和跨多行属性rowspan，它们用于合并列或合并单元格。如：<tdcolspan="3">单元格内容</td>表示该单元格是由3列（3个并排的单元格）合并而成，它将使该行<tr>标记中减少两个<td>标记。<tdrowspan="3">单元格内容</td>表示该单元格由3行（3个上下排列的单元格）合并而成，它将使该行下的两行，两个<tr>标记中分别减少一个<td>标记。注意：colspan和rowspan属性也可以在一个单元格<td>标记中同时出现，如：<tdcolspan="3"rowspan="3"> </td> <!--同时合并了三行三列的9个单元格-->标题单元格<th>标记标题单元格标记<th>相当于一个单元格内字体以粗体居中显示的<td>标记表格标题标记<caption>标题标记<caption>的常用属性有align、valign（valign表示标题在表格的上部或下部，值为bottom|top）<tbody>……</tbody>标记浏览器默认是将整个表格的代码下载完再显示整个表格，如果想让浏览器分行下载，即下载一行显示一行，可以在所有行标记外加上<tbody>标记，这个对表格中内容很多时比较实用。有时如果要把所有单元格的背景色设置成同一种颜色，可以设置tbody的背景色，这样就不必为每个单元格都添加一条bgcolor属性，可节省很多代码普通表格与布局表格的区别在布局模式下绘制的布局表格是特殊设置了的普通表格，布局表格将border、cellpadding、cellspacing三个属性都设置为了0，因此我们看不到它的边框，布局单元格将valign属性设置为top，因此往布局单元格中插入内容默认都是往单元格最顶端排列的。实验：用普通标格和布局表格分别进行1-3-1版式布局在Dreamweaver中选中表格的方法选择整个表格：单击表格左上角或右边框或底边框或状态条中的<table>标签。选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭头出现时单击，或状态条中的<tr>标签（推荐）。选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。选择不连续的几个单元格：按住Ctrl键，单击欲选定的单元格、行或列。选择单元格中的网页元素：点击单元格中的网页元素。DW在表格中插入行或列的方法当光标位于表格内时，按右键在弹出菜单中选择“表格——插入行（或插入列）”可在表格的当前行的上方插入一行，或当前行的左边插入一列，若要在表格的最右边插入一列或最下方插入一行，可选择“表格——插入行或列…”，在所选列之后或所选行之下插入列或行。插入行也可以在代码视图中复制一行的代码“<tr>……</tr>”再粘贴几次就插入几行，插入列则在代码视图中不好进行。制作固定宽度的表格如果我们不定义表格中每个单元格的宽度，当向单元格中插入网页元素时，表格往往会变形，要制作固定宽度的表格，通常有两种方法：①定义所有列的宽度，但不定义整个表格的宽度，整个表格的实际宽度为：所有列的宽度和+边框宽度和+间距和+填充和，这时候，只要单元格内的内容不超过的单元格的宽度时，表格不会变形。②定义整个表格的宽，如500像素、98%等，再留一列的宽度不定义，未定义的这一列的

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论