网页制作知识点自我归纳
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
url1=new Image ();url1.src='http://www.51zxw.net';//图片链接地址
url2=new Image ();url2.src='http://www.51zxw.net';
“参数”设置：autostartt false/ture是否自动播放Loop false/ture是否循环播放也可直接修改代码
7插入FLV视频：直接插入
ApDiv元素
APP绝对定位层
代码：<div> </div>
<div+id> +内容+</div>它的属性代码只显示在head中
<div id="apdiv1">我的个性空间</div>
实例二：弹出网页窗口(打开浏览器窗口)
对象是正文部分（body）；事件是Onload；动作是打开浏览器窗口
设置文本行为
实例一：设置状态栏文本
对象是正文部分（body）；事件是Onload；动作是显示状态栏文本
实例二：设置文本域文字
对象是表单中的文本域；事件一是Onmouseover对应动作是显示相应文本域文字(请输入用户名/密码)，事件二是onfouce对应动作是显示相应文本域文字（为空）。
<img>图像标记<img src="images/apple logo.jpg "width="200"height="150"/>
<a> </a>超链接标记<a href="index/index.html">haha</a>
学习
1)任何HTML标记都是由"<"和">"号所括住，标记明不区分大小写，但建议用小写。
Iframe
<iframe name="logo" scrolling="no" width="164" height="91" frameborder="0" src="p1.html"></iframe>
页中页Iframe中的常用标记
name名称(而非id)
scrolling滚动条
src链接到某页
<tr>
<td>Hello</td>
<td>how</td>
</tr>
<tr>
<td>are</td>
<td>you</td>
</tr>
</table>
细纹黑色边框设置
在默认情况下DW中的边框（border）是具有立体感的：
编辑中的视图：border:1px
浏览器中的视图：border：1px (边框变成了黑色粗边)
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table> </table>表格标记
<tr> </tr>行标记
<td> </td>单元格标记
 空格
表格属性设置（代码表示）<table+属性>
3、页脚
放置版权信息、联系电话、网站介绍、备案信息等等。
4、导航栏
页面字体一般设为12号
框架结构
框架集(frameset)、各页(mainframetopframeleftframe rightframe可重命名)
自定义框架结构
各页间的超链接需设置链接的目标(在链接“目标”栏中输入另一页的名称)，否则会直接在原页显示链接页。
通过“行为”来制作App特效（如通过单击某项来显示或隐藏App层）
按Shift进行多选，之后可在“修改”里设置排序方式
层的溢出与剪辑
溢出：visible溢出内容可见；hidden溢出内容隐藏；scroll显示滚动条；auto自动
剪辑：“左”与“上”直接输；“右”与“下”输长或宽与需剪掉的大小的差值
层的嵌套
Width宽
height高
border边框粗细
bordercolor边框颜色
cellspacing边距（各单元格的距离）
cellpadding间距（填充）（单元格与编辑项的距离）
align对齐方式（center left right）
background背景图片
bgcolor背景颜色
实例一
<tablealign="center"width="400"border="19"cellspacing="14"cellpadding="20"bordercolor="#00CC00"bgcolor="#FF9966">
了解HTML
一般
<html>
<head>
<title>......
</title>
</head>
<body>
......
</body>
</html>
常见
<p> </p>段落标记
<h> </h>正文标题
<br>回车换行标记
<title> </title>网页标题
<hr> (horizon lines)水平线
5图像播放器：CS5中无此项已集成至flash CS中但CS3有此项
6插入音频：
<embed src="BETHLHEM.MID" width="203" height="53" autostart="false" loop="true"></embed>
推荐MID格式的音频（“插件”中直接选音乐）
下载链接：可执行程序、压缩包等。
锚点连接：#+锚点名称（需先插入命名锚点）
空连接：#
图像热区链接：如地图中的行政分区
链接的检查与更新：使用链接检查器
0分
脚本链接——
添加到收藏夹：javascript:window.external.addfavorite('http://www/baidu.com','百度')
网格的使用
网格的设置：靠齐到网格网格间隔显示线或点
AP DIV
“修改”——“转换”
DVI+CSS网页布局
行为
一个对象可以添加多个行为
常见事件：OnMouseOver鼠标经过
OnMouseOut鼠标离开
OnLoad打开
OnUnload关闭
弹出窗口行为
实例1：弹出信息
对象是正文部分（body）；事件是Onload；动作是弹出信息框
Html
网页现在的新标准是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。结构就是盖房子先要把结构建出来，然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS，比如你用DW的属性面板来设置一个字的字体、颜色和大小，当你选好后，就会自动生成一个.style1的红色代码，在<style></style>之间不知道你注意过没有，这就是CSS,这样讲的话你应该能理解html和CSS的区别了吧。CSS的名称就叫“层叠样式表”,从字面也就能理解了。
4.按住ctrl键测出刚拉出参考线和与之相邻的最外边参考线的距离。
5.然后再拉出一条参考线使其居于所测距离的一半处。
6.最后将Ap div与该参考线相邻的边与之重合。
（设置Ap div内另一Ap div与之居中也可用此法）
（用Ap div布局可有效避免利用表格布局时的错位现象）
2、页头（页眉）
通常放置logo（网站标志）和banner(广告条）
编辑视图：border:1px; bcolor:Black
浏览器中的视图：border:1px; bcolor:Black（也为黑色粗边）
下面制作细纹黑边：
先设置表格边框大小为0 px边距为1 px：
然后将表格背景颜色设为黑色：
最后在浏览器中打开：
其他颜色的细纹边框设置原理同上
网页布局
网页布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、flash型、变化型。
“改变属性”行为的应用：字体颜色。（要先对所在单元格命名ID）
效果行为的应用
广告遮帘与渐隐
特效脚本代码的使用
实例1：跑马灯文字效果
实例2：鼠标特效的使用
实例3：图片展播
1）样式1代码
<script>
var widths=282; //图片宽
var heights=164;//高
var counts=4;//图片数量
关闭窗口：javascript:window.close()
弹出提示窗口：javascript:alert('你中了病毒')
设置为默认主页：onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com/')"
页面的构成：
1、网页尺寸：一般如果屏幕分辨率800*600那么设计网页的尺寸为780*428；如果分辨率为1024*768（符合目前大多数用户），那么设计页面尺寸为（常用标准）（若设计人员的屏幕分辨率大于1024*768仍应将页面设置为980*600的标准页面）
1366*768分辨率下标准页面：左边界：193px中线：683px右边界：1173px
★TIP: Ap div如何在1366*768下居中显示？（Ap div的知识将在下面讲到）
1.首先拉出两条垂直方向的参考线度数分别为100px、1266px（只要两线关于683px对称即可之所以要这样做是因为DW不可能完全显示出1366px的标尺）
2.绘制Ap div并使其一边与参考线重合。
3拉出一条参考线使其与Ap div的另一边重合。
最终效果：
交换图像行为
该行为可以实现图片的转换，常用来做广告条或产品展示
图像：选择被交换图像（注意要先对图像命名ID）
设定原始文档：选择交换图像
Ap
注意：对象为空白处不能直接选AP元素
实例：拼图游戏
修改属性特效
动态菜单
“显示和隐藏Ap div层”行为的应用：鼠标经过或离开top标题时菜单的显示或隐藏；菜单栏自身鼠标经过或离开时的显示或隐藏。
★TIP:在默认情况下dw是不能按空格键输入多个连续的空格的，不过可以更改这一属性：
方法一、菜单栏中“编辑”—“首选参数”—“常规”—“允许”多个连续的空格。
方法二、利用快捷键：shift+ctrl+空格
链接
一般链接
内部链接：如index.html
外部链接：http//www.baidu.com
邮箱链接：tjl1991123@163.coFra Baidu bibliotek(需自带邮件客户端支持)
嵌套的含义：嵌套并不表示一个在另外一个的里面显示，而指一个AP元素的代码在另一个AP元素代码的内部。嵌套的AP元素会随着父AP元素的移动而移动，继承父AP元素的可见性。
如图3和4是嵌套关系（不管4是不是在3里面）
标尺的使用
标尺除了测量以外还可起到对齐作用（具有吸附功能）。
按住ctrl键可显示两线距离。
2）多数标记是成对出现的。
3）少数标记单独出现。如<br> <hr>
4)大部分标记可以拥有属性。如颜色大小等等<body bgcolor="blue">大部分代码:<XX+属性>（+内容）
文件头信息
可在“插入---HTML---文件头标签”中设置相关选项
表格处理
表格的HTML标记
表格的标签：
<table width="200" border="1">
img1=new Image ();img1.src='sx/1.jpg'; //图片的位置
img2=new Image ();img2.src='sx/2.jpg';
img3=new Image ();img3.src='sx/3.jpg';
img4=new Image ();img4.src='sx/4.jpg';
<tr>
<td>Hello</td>
<td>how</td>
</tr>
<tr>
<td>are</td>
<td>you</td>
</tr>
</table>
实例二：
<table width="400" border="19" align="center" cellpadding="20" cellspacing="14"background="../../images/http_imgloadCA2D0MHE.jpg">
frameborder边框
插入多媒体元素
1插入SWF动画的应用：特效制作（表格设置背景图片然后加入设置成透明的swf动画）
2插入flash按钮：CS5中无此项已集成至flash CS中但CS3有此项
3插入flash文本：CS5中无此项已集成至flash CS中但CS3有此项
4插入flashpaper：需要提前制作好flashpaper（要下载flashpaper制作软件）
<div id="apDiv4"><img src="../images/http_imgloadCA9G7420.jpg" width="250" height="150" /></div>
App的首选参数设置（即拖拽后默认大小的设置）
设置Z轴可调整图层关系
App元素面板设置:选开眼睛表示可见、防止重叠
url2=new Image ();url2.src='http://www.51zxw.net';
“参数”设置：autostartt false/ture是否自动播放Loop false/ture是否循环播放也可直接修改代码
7插入FLV视频：直接插入
ApDiv元素
APP绝对定位层
代码：<div> </div>
<div+id> +内容+</div>它的属性代码只显示在head中
<div id="apdiv1">我的个性空间</div>
实例二：弹出网页窗口(打开浏览器窗口)
对象是正文部分（body）；事件是Onload；动作是打开浏览器窗口
设置文本行为
实例一：设置状态栏文本
对象是正文部分（body）；事件是Onload；动作是显示状态栏文本
实例二：设置文本域文字
对象是表单中的文本域；事件一是Onmouseover对应动作是显示相应文本域文字(请输入用户名/密码)，事件二是onfouce对应动作是显示相应文本域文字（为空）。
<img>图像标记<img src="images/apple logo.jpg "width="200"height="150"/>
<a> </a>超链接标记<a href="index/index.html">haha</a>
学习
1)任何HTML标记都是由"<"和">"号所括住，标记明不区分大小写，但建议用小写。
Iframe
<iframe name="logo" scrolling="no" width="164" height="91" frameborder="0" src="p1.html"></iframe>
页中页Iframe中的常用标记
name名称(而非id)
scrolling滚动条
src链接到某页
<tr>
<td>Hello</td>
<td>how</td>
</tr>
<tr>
<td>are</td>
<td>you</td>
</tr>
</table>
细纹黑色边框设置
在默认情况下DW中的边框（border）是具有立体感的：
编辑中的视图：border:1px
浏览器中的视图：border：1px (边框变成了黑色粗边)
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table> </table>表格标记
<tr> </tr>行标记
<td> </td>单元格标记
 空格
表格属性设置（代码表示）<table+属性>
3、页脚
放置版权信息、联系电话、网站介绍、备案信息等等。
4、导航栏
页面字体一般设为12号
框架结构
框架集(frameset)、各页(mainframetopframeleftframe rightframe可重命名)
自定义框架结构
各页间的超链接需设置链接的目标(在链接“目标”栏中输入另一页的名称)，否则会直接在原页显示链接页。
通过“行为”来制作App特效（如通过单击某项来显示或隐藏App层）
按Shift进行多选，之后可在“修改”里设置排序方式
层的溢出与剪辑
溢出：visible溢出内容可见；hidden溢出内容隐藏；scroll显示滚动条；auto自动
剪辑：“左”与“上”直接输；“右”与“下”输长或宽与需剪掉的大小的差值
层的嵌套
Width宽
height高
border边框粗细
bordercolor边框颜色
cellspacing边距（各单元格的距离）
cellpadding间距（填充）（单元格与编辑项的距离）
align对齐方式（center left right）
background背景图片
bgcolor背景颜色
实例一
<tablealign="center"width="400"border="19"cellspacing="14"cellpadding="20"bordercolor="#00CC00"bgcolor="#FF9966">
了解HTML
一般
<html>
<head>
<title>......
</title>
</head>
<body>
......
</body>
</html>
常见
<p> </p>段落标记
<h> </h>正文标题
<br>回车换行标记
<title> </title>网页标题
<hr> (horizon lines)水平线
5图像播放器：CS5中无此项已集成至flash CS中但CS3有此项
6插入音频：
<embed src="BETHLHEM.MID" width="203" height="53" autostart="false" loop="true"></embed>
推荐MID格式的音频（“插件”中直接选音乐）
下载链接：可执行程序、压缩包等。
锚点连接：#+锚点名称（需先插入命名锚点）
空连接：#
图像热区链接：如地图中的行政分区
链接的检查与更新：使用链接检查器
0分
脚本链接——
添加到收藏夹：javascript:window.external.addfavorite('http://www/baidu.com','百度')
网格的使用
网格的设置：靠齐到网格网格间隔显示线或点
AP DIV
“修改”——“转换”
DVI+CSS网页布局
行为
一个对象可以添加多个行为
常见事件：OnMouseOver鼠标经过
OnMouseOut鼠标离开
OnLoad打开
OnUnload关闭
弹出窗口行为
实例1：弹出信息
对象是正文部分（body）；事件是Onload；动作是弹出信息框
Html
网页现在的新标准是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。结构就是盖房子先要把结构建出来，然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS，比如你用DW的属性面板来设置一个字的字体、颜色和大小，当你选好后，就会自动生成一个.style1的红色代码，在<style></style>之间不知道你注意过没有，这就是CSS,这样讲的话你应该能理解html和CSS的区别了吧。CSS的名称就叫“层叠样式表”,从字面也就能理解了。
4.按住ctrl键测出刚拉出参考线和与之相邻的最外边参考线的距离。
5.然后再拉出一条参考线使其居于所测距离的一半处。
6.最后将Ap div与该参考线相邻的边与之重合。
（设置Ap div内另一Ap div与之居中也可用此法）
（用Ap div布局可有效避免利用表格布局时的错位现象）
2、页头（页眉）
通常放置logo（网站标志）和banner(广告条）
编辑视图：border:1px; bcolor:Black
浏览器中的视图：border:1px; bcolor:Black（也为黑色粗边）
下面制作细纹黑边：
先设置表格边框大小为0 px边距为1 px：
然后将表格背景颜色设为黑色：
最后在浏览器中打开：
其他颜色的细纹边框设置原理同上
网页布局
网页布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、flash型、变化型。
“改变属性”行为的应用：字体颜色。（要先对所在单元格命名ID）
效果行为的应用
广告遮帘与渐隐
特效脚本代码的使用
实例1：跑马灯文字效果
实例2：鼠标特效的使用
实例3：图片展播
1）样式1代码
<script>
var widths=282; //图片宽
var heights=164;//高
var counts=4;//图片数量
关闭窗口：javascript:window.close()
弹出提示窗口：javascript:alert('你中了病毒')
设置为默认主页：onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com/')"
页面的构成：
1、网页尺寸：一般如果屏幕分辨率800*600那么设计网页的尺寸为780*428；如果分辨率为1024*768（符合目前大多数用户），那么设计页面尺寸为（常用标准）（若设计人员的屏幕分辨率大于1024*768仍应将页面设置为980*600的标准页面）
1366*768分辨率下标准页面：左边界：193px中线：683px右边界：1173px
★TIP: Ap div如何在1366*768下居中显示？（Ap div的知识将在下面讲到）
1.首先拉出两条垂直方向的参考线度数分别为100px、1266px（只要两线关于683px对称即可之所以要这样做是因为DW不可能完全显示出1366px的标尺）
2.绘制Ap div并使其一边与参考线重合。
3拉出一条参考线使其与Ap div的另一边重合。
最终效果：
交换图像行为
该行为可以实现图片的转换，常用来做广告条或产品展示
图像：选择被交换图像（注意要先对图像命名ID）
设定原始文档：选择交换图像
Ap
注意：对象为空白处不能直接选AP元素
实例：拼图游戏
修改属性特效
动态菜单
“显示和隐藏Ap div层”行为的应用：鼠标经过或离开top标题时菜单的显示或隐藏；菜单栏自身鼠标经过或离开时的显示或隐藏。
★TIP:在默认情况下dw是不能按空格键输入多个连续的空格的，不过可以更改这一属性：
方法一、菜单栏中“编辑”—“首选参数”—“常规”—“允许”多个连续的空格。
方法二、利用快捷键：shift+ctrl+空格
链接
一般链接
内部链接：如index.html
外部链接：http//www.baidu.com
邮箱链接：tjl1991123@163.coFra Baidu bibliotek(需自带邮件客户端支持)
嵌套的含义：嵌套并不表示一个在另外一个的里面显示，而指一个AP元素的代码在另一个AP元素代码的内部。嵌套的AP元素会随着父AP元素的移动而移动，继承父AP元素的可见性。
如图3和4是嵌套关系（不管4是不是在3里面）
标尺的使用
标尺除了测量以外还可起到对齐作用（具有吸附功能）。
按住ctrl键可显示两线距离。
2）多数标记是成对出现的。
3）少数标记单独出现。如<br> <hr>
4)大部分标记可以拥有属性。如颜色大小等等<body bgcolor="blue">大部分代码:<XX+属性>（+内容）
文件头信息
可在“插入---HTML---文件头标签”中设置相关选项
表格处理
表格的HTML标记
表格的标签：
<table width="200" border="1">
img1=new Image ();img1.src='sx/1.jpg'; //图片的位置
img2=new Image ();img2.src='sx/2.jpg';
img3=new Image ();img3.src='sx/3.jpg';
img4=new Image ();img4.src='sx/4.jpg';
<tr>
<td>Hello</td>
<td>how</td>
</tr>
<tr>
<td>are</td>
<td>you</td>
</tr>
</table>
实例二：
<table width="400" border="19" align="center" cellpadding="20" cellspacing="14"background="../../images/http_imgloadCA2D0MHE.jpg">
frameborder边框
插入多媒体元素
1插入SWF动画的应用：特效制作（表格设置背景图片然后加入设置成透明的swf动画）
2插入flash按钮：CS5中无此项已集成至flash CS中但CS3有此项
3插入flash文本：CS5中无此项已集成至flash CS中但CS3有此项
4插入flashpaper：需要提前制作好flashpaper（要下载flashpaper制作软件）
<div id="apDiv4"><img src="../images/http_imgloadCA9G7420.jpg" width="250" height="150" /></div>
App的首选参数设置（即拖拽后默认大小的设置）
设置Z轴可调整图层关系
App元素面板设置:选开眼睛表示可见、防止重叠