Board logo

标题: 网页设计 [打印本页]

作者: 高西    时间: 2006-2-18 19:01     标题: 网页设计

常用UBB

[ green ]文字[/green] 绿色
[ blue ]文字[/blue] 蓝色
[ white ]文字[/white] 白色
[ purple ]文字[/purple] 紫色
[ yellow ]文字[/yellow] 黄色
[ violet ]文字[/violet] 紫罗兰色
[ brown ]文字[/brown] 褐色
[ black ]文字[/black] 黑色
[ pink ]文字[/pink] 粉红色
[ orange ]文字[/orange] 橙色
[ gold ]文字[/gold] 金色
[ h1 ]文字[/h1] 标题1
[ h2 ]文字[/h2] 标题2
[ h3 ]文字[/h3] 标题3
[ h4 ]文字[/h4] 标题4
[ h5 ]文字[/h5] 标题5
[ h6 ]文字[/h6] 标题6
[ size=1 ]文字[/size=1] 1号字
[ size=2 ]文字[/size=2] 2号字(偏小)
[ size=3 ]文字[/size=3] 3号字(正常大小)
[ size=4 ]文字[/size=4] 4号字(偏大)
[ size=5 ]文字[/size=5] 5号字
[ size=6 ]文字[/size=6] 6号字
[ font=仿宋 ]文字[/font=仿宋] 仿宋体
[ font=黑体 ]文字[/font=黑体] 黑体
[ font=楷体 ]文字[/font=楷体] 楷体
[ font=隶书 ]文字[/font=隶书] 隶书体
[ font=宋体 ]文字[/font=宋体] 宋体
[ font=幼圆 ]文字[/font=幼圆] 幼圆体
[ b ]文字 加粗
[ u ]文字 下划线
[ i ]文字 倾斜
[ left ]文字[/left]文字 左对齐
[ center ]文字[/center] 居中
[ right ]文字[/right] 右对齐
[ url=连接文字 ]地址[/url] 超级链接
[ code ]文字[/code] 代码
[ img ]文字[/img] 贴图地址
[ mail ]文字[/mail] EMAIL地址
[ quote ]文字[/quote] 引用文字
[ movl ]文字[/movl] 文字左移
[ movlr ]文字[/movlr] 文字左右移
[ movr ]文字[/movr] 文字右移
[ flash ]文字[/flash] flash地址(swf)
[ music ]文字[/music] 音乐地址(mp3,wma,rm,mid)
[ media ]文字[/media] 电影地址(wmv,avi)
[ light ]文字[/light] 彩字
作者: 高西    时间: 2006-2-18 19:02

网页中的屏蔽


1。忽视右键
 <body oncontextmenu="return false">
 或
 <body style="overflow-y:hidden">

  忽视左键
<body onselectstart="return false">
-------------------------------------------------------------
让你的网页无法另存为
<noscript><iframe src="/*>";</iframe></noscript>

----------------------------------------------------------------
IE6 的 imagetoolbar,去掉它有两种方法:

1. 在<HEAD>下加入:
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

2. <img>图片上用新属性 galleryimg
<img width=500 height=500 src="/a.gif" galleryimg="no">

---------------------------------------------------------------


屏避腾讯的却是下面这几句呀

<script language="javascript" src="/no.js"></script>
<table width="776" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>

    <td width="800" height="32" align="center">玉荷素 相关组图</td>
  </tr>
  <tr>
   
<td width="1" height="280" align="center" class="background" background="/admin/UploadFiles/200532145332450.jpg">
    <img src="/admin/UploadFiles/200532145332450.jpg" alt="玉荷素  相关组图" border="0" galleryimg="no" onload="no(this)">

这里的background就是要显示的图片,因为我发现如果是表格背景的话QQ浏览器就不会弹那种工具条出来了,然后出现的问题就是该图片的具体长宽,因为我不可能预先知道,所以我在后面有了一个 onload="no(this)",这个其实是一个获取图片长宽的程序,它是从
上面的<script language="javascript" src="/no.js"></script>里调用,那个no.js谁都可以下载,然后把它放到自己的空间里,只要路径正确就没有问题啦。


----------------------------------------------------------------------


对页面文字进行保护的脚本

作 者:Juven  摘 自: It365cn
  对页面文字进行保护的脚本,使用后页面上的文字就不能被鼠标选择了,制作方法:
  在<head>标签下,粘贴代码:
<script language="JavaScript1.2">
function disableselect(e){
return false}
function reEnable(){return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>



禁止选取文字
在<body>里面加上:
onselectstart="return false"
就是这样:
<body onselectstart="return false">


------------------------------------------------------------








网页中取消鼠标右键方法大全


利用event.button特性来做到。下表是event.button属性的可能取值及含义:
0 没按键
1 按左键
2 按右键
3 按左和右键
4 按中间键
5 按左和中间键
6 按右和中间键
7 按所有的键
参照上表,我们可以在<body>和</body>之间加入如下语句:
<Script Langvage=javascript>
function Click(){
if (event.button!=1){alert('版权所有(C)2001 XXX工作室');
}}
document.onmousedown=Click;
</Script>
这样在浏览网页时除单击鼠标左键外,其他任何形式的鼠标点击或组合点击,都将出现“版权所有(C)2001 XXX工作室”的提示框,而不是出现快捷菜单,从而避免被人查看源文件代码。
如果使event.button=2,实际上它仅能限制点击鼠标右键情况,其他点击方式,如按左右键、按左和中间键、按中间键等就不能限制,当这些方式的点击发生时,出现的就是快捷菜单,从而可以查看源文件。


----------------------------------------------------------


第一种:最笨的方法
把下列代码加入到<head>与</head>之间
<SCRIPT language=javascript>
function click() {
if (event.button==2) {
alert('欢迎访问互动学院http://favorites.myrice.com')
}
}
document.onmousedown=click
</SCRIPT>

第二种:添加至收藏夹
<SCRIPT language=JavaScript><!--
function click() {
if (event.button==2) {window.external.addFavorite('http://favorites.myrice.com','互动学院')}}
document.onmousedown=click
// --></SCRIPT>

第三种:使鼠标右键无响应,别人还以为自己的鼠标坏了!
把<BODY>改成<BODY oncontextmenu=self.event.returnValue=false>

第四种:最聪明的方法,自己定制鼠标的右键菜单,给访问者以全新的感受!
第一步:把代码加入到<head>与</head>之间
<style>
<!--
/*
Context menu Script-
c Dynamic Drive
Last updated: 99/09/16th
For full source code, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com
*/
#ie5menu{
position:absolute;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.menuitems{
padding-left:15px;
padding-right:15px;
}
-->
</style>
<script language="JavaScript1.2">
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0
function showmenuie5(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
if (rightedge<ie5menu.offsetWidth)
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
ie5menu.style.left=document.body.scrollLeft+event.clientX
if (bottomedge>ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=document.body.scrollTop+event.clientY
ie5menu.style.visibility="visible"
return false
}
function hidemenuie5(){
ie5menu.style.visibility="hidden"
}
function highlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}
function lowlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
}
}
function jumptoie5(){
if (event.srcElement.className=="menuitems")
window.location=event.srcElement.url
}
</script>
第二步:把下列代码加入到<body>与</body>之间
<!--[if IE]>
<div id="ie5menu" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url="http://www.85time.com">85time网站首页</div>
<div class="menuitems"
url="http://www.85time.com/85time/index.php">85time技术论坛</div>
<div class="menuitems" url="http://www.85time.com/mydowns.htm">85time软
件下载</div>
<div class="menuitems"
url="http://mydowns.oso.com.cn/chat/index.php">85time聊天室</div>
<div class="menuitems"
url="http://www.85time.com/source/85timegb/index.php">85time留言板</div>
<hr>
<div class="menuitems" url="http://www.85time.com">把握时间咨询网站</div>
</div>
<![endif]-->
<script language="JavaScript1.2">
document.oncontextmenu=showmenuie5
if (document.all&&window.print)
document.body.onclick=hidemenuie5
</script>

-------------------------------------------------------------

BODY oncontextmenu="return false" onselectstart="return false" oncopy="return false">
</BODY>

<noscript><iframe src="HH.htm"></iframe></noscript>

------------------------------------------------------------

特效版权归特效本人所有,未经!同意不得转载!
<OBJECT id=menu type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Related Topics,menu">
<PARAM name="Item1" value="/动易;http://www.aspease.com">
<PARAM name="Item2" value="/搜狐;http://www.sohu.com">
<PARAM name="Item3" value="/新浪;http://www.sina.com">
<PARAM name="Item4" value="/网易;http://www.163.com">
  <PARAM name="Item5" value="/互动学院;http://favorites.myrice.com">
   </OBJECT> <script> if (document.all) document.body.onmousedown=new Function("if (event.button==2) menu.Click();") </script>


---------------------------------------------------------------------
  
  禁止图片下载

  效果描述:设置某一图片禁止下载,鼠标移动到图片上面时将会给出提示,此方法治标不治本,只能骗骗菜鸟。

  实现方法:
<A HREF="javascript:void(0)" onMouseover="alert('对不起,此图片不能下载!')">
<IMG src="/2.gif" Align="center" Border="0" width="99" height="50"></A>
  注:图片的文件名及路径可以自行修改。
作者: 高西    时间: 2006-2-18 19:02

变化鼠标样式

代码:

<style type=text/css>
<!--
BODY{cursor:url('images/1.cur');}
a{cursor:url('images/2.cur');}
-->
</style>

说明:
images/1.cur的地址为你鼠标所在地址,为变化前鼠标样式
images/2.cur'为鼠标变化后样式

后缀名为 **.ico 的为静态
后缀名为**.cur 的为静态
后缀名为**.ani 的为动画
作者: 高西    时间: 2006-2-18 19:03

前进、后退功能

<H3 onclick="history.go(-1)" > 前一页</H3>
<H3 onclick="history.go(-2)" > 前两页</H3>
<H3 onclick="history.go(-3)" > 前三页</H3>
<H3 onclick="history.go(1)" > 后一页</H3>
<H3 onclick="history.go(2)" > 后两页</H3>
<H3 onclick="history.go(3)" > 后三页</H3>

//把X换成你想要后退在页数
//把“-”变成“+”就为前进



改变IE地址栏的IE图标

  要先做一个16*16的icon(图标文件),保存为index.ico。把这个图标文件上传到根目录下并在首页<head></head>之间加上如下代码:

  <link REL = "Shortcut Icon" href="/index.ico">







透明FLASH

1、导入透明FLASH,参数里设置:wmode=transparent
用dreamweaver来做透明效果:选中刚才已插入的flash动画,右击鼠标选择properties调出属性面板后,再单击parameter按钮,在弹出的对话框中点击加号图标,在左侧的parameter中键入wmode在右侧的value框内键入transparent点击ok,按f12进行预览

2、 在flash的html发布选项中选windows mode/transparent windowless,发布为html,插入网页就可以得到透明的flash的效果

3、透明FLASH代码如下:
<embed src="网址";; width="1024" height="500" uality="high"wmode="transparent" align="right" style="position: absolute; left:-35; top:20">
作者: 高西    时间: 2006-2-18 19:03

IFRAME

可使用iframe代码将页子插入网页内部的,iframe应该也算是框架的一种形式,它与frame不同的是,iframe可以嵌在网页中的任意部分,这样的效果有些画中画的感觉。


一、Iframe标记的使用格式。

  Iframe src="/URL" width=x height=x scrolling=auto marginwidth=0  marginheight=0 align=middle name=main frameborder=0 iframe

  src:文件的路径,既可是HTML文件,也可以是文本、ASP等;
  width、height:画中画区域的宽与高;
  scrolling:当src的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示;
     align:指定浮动窗口内的页面相对于浮动窗口的位置,它的值有left、right、top、middle、bottom,分别表示浮动窗口内的页面的位置是*左、*右、*上、居中和*下;
  FrameBorder:区域边框的宽度,为了让“画中画“与邻近的内容相融合,常设置为0。
  比如

  Iframe src="/new.htm" width=300 height=250 scrolling=auto marginwidth=0  marginheight=0 align=middle name=main frameborder=0 iframe

 

二、页面上的超链接指向这个嵌入的网页

例如要在index.htm里嵌入new.htm文件。
先在index.htm的任意位置写入:

Iframe src="/new.htm" width=300 height=250 scrolling=auto marginwidth=0  marginheight=0 align=middle name=main frameborder=0 iframe

然后,index.htm的作个链接语句:a href="/URL" target=main画中画a



三、隐藏滚动条

在<boby>里加入scroll="no",可隐藏滚动条;
在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条;加入style="overflow-y:hidden",可隐藏垂直滚动条。

步驟一.複製語法貼於<body></body>標籤之間
<IFRAME name="main" frameBorder=0 height=165 scrolling=yes src="顯示在頁框內的網址" width=300 style="{FILTER: Chroma(Color = #cc3300)}"></IFRAME>


在要顯示於頁框內的網頁<head></head>之間放置
<style type=text/css>
<!--
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色請與步驟一的設彩相同*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699;
SCROLLBAR-SHADOW-COLOR: #336699;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;  
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;
SCROLLBAR-ARROW-COLOR: #336699;
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色請與步驟一的設彩相同*/
}
-->
</style>


修改事項:
步驟一內的style="{FILTER: Chroma(Color = #cc3300)是設定要被設為透明的色彩
步驟二的彩色捲軸CSS只要設的色彩跟步驟一相同就會透視


四、ifarme透明背景
先在A的iframe里加入划线的语句允许透明:
<iframe src="/*.htm" allowtransparency></iframe>

被包含的页面B要在body里添加划线的部分,定义它透明:
<body style='background:transparent'>

半透明,在表格处加入滤镜
<table style="FILTER: alpha(opacity=50)" width...>
作者: 高西    时间: 2006-2-18 19:03

滚动条变色

此效果只在 IE5.5 以上版本才可观看!

范例:
<style type="text/css">
a:hover {color: #ffe968;text-decoration:none}
body {scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #ff8000;
scrollbar-base-color: #A8DEFE;
scrollbar-3d-light-color: #ff8000; }
</style>

说明:
scrollbar-3d-light-color 滚动条左角框阴影颜色
scrollbar-arrow-color 滚动条箭头颜色
scrollbar-base-color 滚动条背景色
scrollbar-darkshadow-color 滚动条右角框阴影颜色
scrollbar-face-color 滚动条颜色
scrollbar-highlight-color 滚动条右角框颜色
scrollbar-shadow-color 滚动条左角框颜色
scrollbar-track-color 滚动条轴轨颜色




欢迎光临 工程家园 (http://heubbs.cn/) Powered by Discuz! 7.2