DreamweaverCS5代码集锦：网页设计与交互技巧

5星 · 超过95%的资源需积分: 50 164 浏览量更新于2024-09-14 收藏 10KB TXT 举报

"Dreamweaver CS5 是一款由Adobe公司推出的强大的网页设计和开发工具，它集成了一系列的代码编辑功能，使得用户可以更加便捷地创建、编码和管理网站及应用程序。本资源主要提供了Dreamweaver CS5中的各种代码示例，帮助用户了解和掌握在网页制作中常用的HTML、CSS以及其他相关代码的应用。以下是一些关键代码片段的解释和应用： 1. 隐藏滚动条： `<body style="overflow-y:hidden">` 和 `<body style="overflow-x:hidden">` 分别用于隐藏页面的垂直和水平滚动条，`<body scroll="no">` 则同时隐藏两个方向的滚动条，使得内容在指定区域内不超出显示。 2. 鼠标悬停效果： `<TD onmouseover="this.style.backgroundColor='#FFFFFF'" onmouseout="this.style.backgroundColor=''"` 这段代码应用于表格单元格（TD），当鼠标悬停在单元格上时，背景色变为白色，移开后恢复原背景色。同时，`style="CURSOR:hand"` 设置了鼠标指针为手形，暗示可点击。 3. 禁止页面元素拖动、右键菜单和选择： `<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">` 这段代码用于阻止用户对页面元素进行拖动、右键菜单操作以及文本选择，增加了页面的控制性和安全性。 4. 使用iframe嵌入页面： `<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>` 这是创建一个IFRAME的实例，用于在网页中嵌入另一个HTML页面（main.htm）。`width` 和 `height` 定义了iframe的尺寸，`scrolling="Auto"` 控制是否显示滚动条，`frameborder="0"` 则是隐藏边框。 5. 自适应高度的iframe： `<iframe name="pindex" src="index.asp" frameborder="false" scrolling="auto" width="100%" height="100%" frameborder="no" onload="document.all['pindex'].style.height=pindex.document.body.scrollHeight"></iframe>` 这个iframe在加载完成后，会根据嵌入页面的实际内容高度自动调整自身高度，以实现全屏或自适应布局。这些代码示例展示了Dreamweaver CS5中对于HTML和CSS的灵活运用，涵盖了页面布局、交互效果、内容嵌入等多个方面。通过学习和实践这些代码，用户能够提升在网页开发中的技能和效率。"

1.控制横向和纵向滚动条的显隐？
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显--------------------------------------------------------------------------------
2.表格变色
<TD onmouseover="this.style.backgroundColor='#FFFFFF'"
onmouseout="this.style.backgroundColor=''"
style="CURSOR: hand"> --------------------------------------------------------------------------------
3.禁止复制，鼠标拖动选取
<body ondragstart=window.event.returnValue=false oncontextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>-------------------------------------------------------------------------------- 4.普通iframe页面
<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>
-----------------------------------------------------------------------------5.iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no onload="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe> -------------------------------------------------------------------------------- 6.IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标
<link rel="Shortcut Icon" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico"> --------------------------------------------------------------------------------
7.字号缩放
越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
--------------------------------------------------------------------------------
8.简单的跳转网页代码
如果你要让页面显示3秒钟之后跳转，可以在html代码的<head></head>部分加上这样的代码：
<meta http-equiv="refresh" content="3; url=http://www.devdao.com">
--------------------------------------------------------------------------------
9.iframe(嵌入式帧)自适应高度
填写的嵌入地址一定要和本页面在同一个站点上，否则会提示"拒绝访问！"。对跨域引用有权限问题，请查阅其他资料。

剩余7页未读，继续阅读

雷龙123

粉丝: 0
资源: 3

DreamweaverCS5代码集锦：网页设计与交互技巧

DW网页模版

dw网页设计

dreamweaver html源代码

网页制作Dreamweaver CS5

dreamweavercs6爱心代码

dreamweaver+cs5

adobe dreamweaver cs5下载安装

adobe dreamweaver cs6使用

Adobe Dreamweaver CS6网站登录界面代码

dreamweaver cs6 csdn

最新资源