40种网站设计常用技巧资源-CSDN文库

需积分: 3 143 浏览量 2008-11-16 15:16:29 上传评论收藏 2KB TXT 举报

在IT行业的网站设计领域，掌握一系列实用技巧是提升用户体验、增强网页功能的关键。根据给定文件的标题“40种网站设计常用技巧”及其描述，本文将深入解析部分列出的技术点，涵盖从防止用户操作到获取元素位置的多种场景。 ### 1. 阻止默认上下文菜单在网站设计中，有时我们希望禁用浏览器的默认右键菜单，例如为了保护网页内容不被轻易复制。这可以通过以下JavaScript代码实现： ```html <body oncontextmenu="window.event.returnValue=false"> ``` 或针对`<table>`标签： ```html <table border oncontextmenu="return false"> ``` 这将确保当用户尝试右键点击时，不会弹出默认的浏览器菜单。 ### 2. 禁止文本选取如果网站包含敏感信息或版权内容，可能需要阻止用户选中并复制文本。通过以下代码可以达到这一目的： ```html <body onselectstart="return false"> ``` ### 3. 禁止粘贴和复制进一步地，可以使用以下脚本来防止用户在页面上进行粘贴和复制操作： ```html onpaste="return false" oncopy="return false;" oncut="return false;" ``` 这些代码可以有效控制用户对网页内容的编辑行为，保护网站的安全性。 ### 4. 设置网站图标为了让网站更易于识别，设置一个独特的图标（favicon）至关重要。这可以通过以下代码实现： ```html <link rel="Shortcut Icon" href="favicon.ico"> ``` 此外，对于非IE浏览器，可以使用： ```html <link rel="Bookmark" href="favicon.ico"> ``` 这将确保无论用户使用哪种浏览器访问网站，都能看到统一的图标。 ### 5. 关闭输入法在某些输入框中，可能需要禁止自动输入法，以提高数据输入的准确性。这可以通过以下HTML属性实现： ```html <input style="ime-mode:disabled"> ``` ### 6. 检测框架使用若网站被嵌入到其他框架中，可能需要重定向用户至网站主页，确保品牌的一致性和用户体验。以下JavaScript代码可实现这一功能： ```html <script language="JavaScript"> if (window==top) top.location.href="frames.htm"; </script> ``` ### 7. 防止框架嵌套为避免网站内容被不当嵌套在其他网站的框架内，可以使用以下代码： ```html <script language="JavaScript"> if (top.location!=self.location) top.location=self.location; </script> ``` 这将确保网站内容只能在自身域下显示。 ### 8. 显示源代码按钮提供一个查看源代码的按钮，让用户能够轻松地查看网页结构，可通过以下HTML代码实现： ```html <input type=button value=链接源代码 onclick="window.location='view-source:'+'http://www.williamlong.info'"> ``` ### 9. 删除确认提示在执行删除操作前，向用户发出确认提示，可以避免误操作。这通过以下HTML与JavaScript结合实现： ```html <a href="javascript:if(confirm('确实要删除?'))location='boos.asp?&areyou=删除&page=1'">删除</a> ``` ### 10. 获取元素绝对位置在动态调整网页布局时，了解元素的确切位置非常重要。以下JavaScript函数可以帮助获取元素的top和left值： ```html <script language="Javascript"> function getIE(e) { var t = e.offsetTop; var l = e.offsetLeft; while (e = e.offsetParent) { alert("top=" + t + "\nleft=" + l); } } </script> ``` 同时，也可以使用VBScript实现类似功能： ```html <script language="VBScript"> ... ``` 通过上述方法，我们可以精确控制网页元素的位置，提升网页设计的专业性和美观度。这些网站设计技巧不仅涵盖了基本的用户体验优化，还涉及了安全防护和功能性增强，是每一位前端开发者都应该掌握的基础知识。通过灵活运用这些技巧，可以显著提升网站的可用性和安全性，为用户提供更加优质、安全的上网体验。

资源推荐

资源详情

资源评论

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架
<script language="JavaScript"></script>

9. 防止被人frame
<SCRIPT LANGUAGE=JAVASCRIPT></SCRIPT>

10. 网页将不能被另存为
<noscript><iframe src="/blog/*.html>";</iframe></noscript>

11. <input type=button value=查看网页源代码

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈