网页制作完全手册CHM版 - 全面学习网页开发技术
版权申诉
5星 · 超过95%的资源 48 浏览量
更新于2024-11-20
收藏 3.71MB ZIP 举报 资源摘要信息: "网页制作完全手册 CHM版本"
本手册是一份全面介绍网页制作流程、技术和工具的手册，适用于希望从基础到进阶了解和掌握网页设计与开发的用户。手册采用CHM（Compiled HTML Help）格式，这种格式的文件是微软开发的一种帮助文件格式，它包含一个目录，一个索引和一个搜索引擎，方便用户快速查找信息。
手册的标题《网页制作完全手册 CHM版本》直截了当地表明了该手册的全面性。CHM格式使得该手册既适合在线阅读，也方便用户下载后离线阅读和查询。
描述中提到的“积分下载”，可能意味着获取该手册需要一定的积分或者是会员权益。这也表明手册可能是某个专业网站或论坛所提供的内容，需要用户通过一定的活动或购买服务才能获得。
标签中所提到的"js vue 网页制作完全手册 帮助文档 html"，揭示了手册覆盖的内容范围。"js"指的是JavaScript，这是一种广泛用于网页设计的脚本语言，用于实现网页中的动态效果和与用户交互的功能；"vue"指的是Vue.js，这是一种流行的前端JavaScript框架，用于构建用户界面；"html"即HyperText Markup Language，是网页制作的骨架语言，用于创建网页的结构和内容。
从这些标签我们可以推断出手册应该包含以下知识点：
1. HTML基础：包括HTML标签的使用、网页结构的构建、表单、图像、链接等基本元素的使用方法。
2. CSS样式设计：讲解如何使用CSS（Cascading Style Sheets）对网页进行美化和布局，包括CSS选择器、盒模型、布局方式、响应式设计等。
3. JavaScript编程：介绍JavaScript的基础知识和应用，包括变量、函数、事件处理、DOM操作等，以及如何使用JavaScript来增强网页的交互性。
4. Vue.js框架的使用：提供Vue.js的基础教程和高级特性解析，指导用户如何构建单页面应用（SPA）、组件化开发、数据绑定和状态管理等。
5. 网页设计原则：包括网页设计的最佳实践、用户体验设计（UX）、用户界面设计（UI）等设计概念。
6. 前端工程化：介绍模块化、包管理器（如npm、yarn）、构建工具（如Webpack、Gulp）等前端开发的工程化实践。
7. 响应式网页设计：教授如何创建适配不同屏幕尺寸的网页，包括媒体查询、流式布局等技术。
8. 网站发布与优化：包括域名注册、服务器配置、网站部署、SEO（搜索引擎优化）等网站上线前后的准备和优化工作。
9. 帮助文档编写：可能会介绍如何编写帮助文档、使用CHM格式的特点和优势，以及如何将文档打包为CHM文件。
10. 实战案例分析：通过具体案例来应用手册中的知识点，帮助用户更好地理解和掌握网页制作的综合技能。
综上所述，这份《网页制作完全手册 CHM版本》是一份宝贵的资源，它不仅能够帮助初学者快速入门，也能够为有一定基础的网页设计师提供进一步的提升和参考。用户在积分兑换或购买后，可以通过手册中详尽的内容和结构化学习，逐步构建起自己对于前端开发和网页设计的知识体系。
网页制作完全手册 CHM版本
（3个子文件） 
DHTML.chw 143KB DHTML.chm 3.83MB
打不开私我.txt 0B共 3 条
- 1
2010-07-13 上传
2013-09-05 上传
Tips and Tricks Internet Development Index
--------------------------------------------------------------------------------
As with any type of programming, writing bug-free, efficient scripts that meet your expectations takes a bit of work. The following sections provide some tips and hints to make that work take less time and go more smoothly.
Checking the Internet Explorer Version Number
Canceling a Button Click
Preventing a Document From Being Cached
Using Objects
Replacing Custom Controls with DHTML
Checking the Internet Explorer Version Number
You should always check for the type and version of the client browser, so that your content degrades gracefully if the client browser does not support features on your Web site.
The easiest way to identify a browser and its characteristics (browser code name, version number, language, etc.) in script is through the Dynamic HTML (DHTML)?A HREF="objects/obj_navigator.html">navigator object. You can also access this object and its properties in C++ applications through the IOmNavigator interface.
The userAgent property of the navigator object returns a string that includes the browser and browser version. The following example Microsoft® JScript® function runs on most browsers and returns the version number for any Microsoft Internet Explorer browser and zero for all other browsers.
SHOWExample
function msieversion()
// Return Microsoft Internet Explorer (major) version number, or 0 for others.
// This function works by finding the "MSIE " string and extracting the version number
// following the space, up to the semicolon
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 ) // is Microsoft Internet Explorer; return version number
return parseFloat ( ua.substring ( msie+5, ua.indexOf ( ";", msie ) ) )
else
return 0 // is other browser
}
When checking browser version numbers, always check for version numbers greater than or equal to a target version. In this way, your Web site will be be compatible with future versions of the browser. For example, if you have designed your content for the latest version of Internet Explorer, use that version number as a minimum version number.
Note Browsers often have several releases of a browser version. For example, 4.01, 5.0, 5.5 and 6.0b are all different versions of Internet Explorer. The 'b' in 6.0b represents a beta version of Internet Explorer 6.
As of Internet Explorer 5, conditional comments are available as an alternative technique for detecting browser versions. Conditional comments have the advantage of not using a script block, which means that it is not always necessary to use scripting and DHTML when working with conditional comments. When no scripting is used in a Web page, no scripting engine needs to be loaded. Conditional comments are processed during the downloading and parsing phase, so only the content that is targeted for the browser loading the Web page is actually downloaded. Conditional comments can be combined freely with other browser detection techniques. For more information, see About Conditional Comments.
Canceling a Button Click
The following HTML example shows a common scripting mistake related to event handling and canceling the default action.
SHOWExample
<HTML>
<HEAD><TITLE>Canceling the Default Action</TITLE>
<SCRIPT LANGUAGE="JScript">
function askConfirm()
{ return window.confirm ("Choose OK to follow hyperlink, Cancel to
not.")
}
</SCRIPT>
<BODYonload="b3.onclick=askConfirm">
1 Without return (won't work)
2 With return (works)
3 Function pointer (works) </BODY> </HTML> The first a element in this example does not work properly. Without the return in the onclick燡Script expression, the browser interprets the function expression, throws away the resulting value, and leaves the default action unaffected. The other a elements correctly bind the return value to the event, hence the default action can be canceled when false is returned. Preventing a Document From Being Cached You can prevent a document from being cached by adding the following meta tag to the document. <META HTTP-EQUIV="Expires" CONTENT="0"> Preventing the document from being cached ensures that a fresh copy of the document will always be retrieved from the site, even during the user's current session, regardless of how the user has set the browser's caching options. This is useful if the content of the document changes frequently. Using Objects Objects are Microsoft® ActiveX® Controls or other similar components that provide custom capabilities and services for HTML documents. You can add a control to your document using the object element, and you can gain access to the capabilities and services of the control using its properties and methods from script. When using objects, be aware that DHTML extends every object by providing these additional properties: align classid code codeBase codeType data form height name object recordset type width If a control has properties with these same names, you will not be able to access the properties unless you preface the name with the object property. For example, assume that an ActiveX control is added to the document using the following: <OBJECT ID="MyControl" HEIGHT=100 WIDTH=200 CLASSID="clsid: ... "> </PARAM NAME="width" VALUE="400"> </OBJECT> In this example, there are two widths: an extended property set within the object element, and a property belonging to the control that is set using the param element. To access these from script, you use the following code. alert(MyControl.width); // this is Dynamic HTML's property; displays "200" alert(MyControl.object.width); // this is the object's property; displays "400" Replacing Custom Controls with DHTML DHTML provides everything you need to generate animated effects without resorting to custom controls. For example, consider the following script, which is a replacement for the Path control. SHOWExample var tickDuration; tickDuration = 50; var activeObjectCount; var activeObjects; var itemDeactivated; var tickGeneration; activeObjects = new Array(); activeObjectCount = 0; timerRefcount = 0; itemDeactivated = false; tickGeneration = 0; function initializePath(e) { e.waypointX = new Array(); e.waypointY = new Array(); e.duration = new Array(); } function addWaypoint(e, number, x, y, duration) { e.waypointX[number] = x; e.waypointY[number] = y; e.duration[number] = duration; } function compact() { var i, n, c; n = new Array(); c = 0; itemDeactivated = false; for (i=0; i<activeObjectCount; i++) { if (activeObjects[i].active == true) { n[c] = activeObjects[i]; c++; } } activeObjects = n; activeObjectCount = c; } function tick(generation) { if (generation < tickGeneration) { // alert("Error "+generation); return; } //alert("tick: "+generation); if (itemDeactivated) compact(); if (activeObjectCount == 0) { return; } else { for (i=0; i<activeObjectCount; i++) { moveElement(activeObjects[i]); } window.setTimeout("tick("+generation+");", tickDuration); } } function start(e) { if (itemDeactivated) compact(); activeObjects[activeObjectCount] = e; activeObjectCount++; if (activeObjectCount == 1) { tickGeneration++; tick(tickGeneration); } } function runWaypoint(e, startPoint, endPoint) { var startX, startY, endX, endY, duration; if (e.waypointX == null) return; startX = e.waypointX[startPoint]; startY = e.waypointY[startPoint]; endX = e.waypointX[endPoint]; endY = e.waypointY[endPoint]; duration = e.duration[endPoint]; e.ticks = duration / tickDuration; e.endPoint = endPoint; e.active = true; e.currTick = 0; e.dx = (endX - startX) / e.ticks; e.dy = (endY - startY) / e.ticks; e.style.posLeft = startX; e.style.posTop = startY; start(e); } function moveElement(e) { e.style.posLeft += e.dx; e.style.posTop += e.dy; e.currTick++; if (e.currTick > e.ticks) { e.active = false; itemDeactivated = true; if (e.onpathcomplete != null) { window.pathElement = e; e.onpathcomplete() } } } To use this script in your document, do the following: Load the script using the src attribute of the script element. Initialize the paths using the initializePath function. Set the way points using the addWaypoint function. Set the path-complete handlers using the runWaypoint function. The following sample document shows how this works. SHOWExample <html> <body>
1 Without return (won't work)
2 With return (works)
3 Function pointer (works) </BODY> </HTML> The first a element in this example does not work properly. Without the return in the onclick燡Script expression, the browser interprets the function expression, throws away the resulting value, and leaves the default action unaffected. The other a elements correctly bind the return value to the event, hence the default action can be canceled when false is returned. Preventing a Document From Being Cached You can prevent a document from being cached by adding the following meta tag to the document. <META HTTP-EQUIV="Expires" CONTENT="0"> Preventing the document from being cached ensures that a fresh copy of the document will always be retrieved from the site, even during the user's current session, regardless of how the user has set the browser's caching options. This is useful if the content of the document changes frequently. Using Objects Objects are Microsoft® ActiveX® Controls or other similar components that provide custom capabilities and services for HTML documents. You can add a control to your document using the object element, and you can gain access to the capabilities and services of the control using its properties and methods from script. When using objects, be aware that DHTML extends every object by providing these additional properties: align classid code codeBase codeType data form height name object recordset type width If a control has properties with these same names, you will not be able to access the properties unless you preface the name with the object property. For example, assume that an ActiveX control is added to the document using the following: <OBJECT ID="MyControl" HEIGHT=100 WIDTH=200 CLASSID="clsid: ... "> </PARAM NAME="width" VALUE="400"> </OBJECT> In this example, there are two widths: an extended property set within the object element, and a property belonging to the control that is set using the param element. To access these from script, you use the following code. alert(MyControl.width); // this is Dynamic HTML's property; displays "200" alert(MyControl.object.width); // this is the object's property; displays "400" Replacing Custom Controls with DHTML DHTML provides everything you need to generate animated effects without resorting to custom controls. For example, consider the following script, which is a replacement for the Path control. SHOWExample var tickDuration; tickDuration = 50; var activeObjectCount; var activeObjects; var itemDeactivated; var tickGeneration; activeObjects = new Array(); activeObjectCount = 0; timerRefcount = 0; itemDeactivated = false; tickGeneration = 0; function initializePath(e) { e.waypointX = new Array(); e.waypointY = new Array(); e.duration = new Array(); } function addWaypoint(e, number, x, y, duration) { e.waypointX[number] = x; e.waypointY[number] = y; e.duration[number] = duration; } function compact() { var i, n, c; n = new Array(); c = 0; itemDeactivated = false; for (i=0; i<activeObjectCount; i++) { if (activeObjects[i].active == true) { n[c] = activeObjects[i]; c++; } } activeObjects = n; activeObjectCount = c; } function tick(generation) { if (generation < tickGeneration) { // alert("Error "+generation); return; } //alert("tick: "+generation); if (itemDeactivated) compact(); if (activeObjectCount == 0) { return; } else { for (i=0; i<activeObjectCount; i++) { moveElement(activeObjects[i]); } window.setTimeout("tick("+generation+");", tickDuration); } } function start(e) { if (itemDeactivated) compact(); activeObjects[activeObjectCount] = e; activeObjectCount++; if (activeObjectCount == 1) { tickGeneration++; tick(tickGeneration); } } function runWaypoint(e, startPoint, endPoint) { var startX, startY, endX, endY, duration; if (e.waypointX == null) return; startX = e.waypointX[startPoint]; startY = e.waypointY[startPoint]; endX = e.waypointX[endPoint]; endY = e.waypointY[endPoint]; duration = e.duration[endPoint]; e.ticks = duration / tickDuration; e.endPoint = endPoint; e.active = true; e.currTick = 0; e.dx = (endX - startX) / e.ticks; e.dy = (endY - startY) / e.ticks; e.style.posLeft = startX; e.style.posTop = startY; start(e); } function moveElement(e) { e.style.posLeft += e.dx; e.style.posTop += e.dy; e.currTick++; if (e.currTick > e.ticks) { e.active = false; itemDeactivated = true; if (e.onpathcomplete != null) { window.pathElement = e; e.onpathcomplete() } } } To use this script in your document, do the following: Load the script using the src attribute of the script element. Initialize the paths using the initializePath function. Set the way points using the addWaypoint function. Set the path-complete handlers using the runWaypoint function. The following sample document shows how this works. SHOWExample <html> <body>
Item1
Item2
Item3
Item4
Item5
Item6
<input type=button value="Start" onclick="runWaypoint(Item1, 0, 1); runWaypoint(Item2, 0, 1);">
Generation
<script src="htmlpath.js">
</script>
<script>
// need to call initializePath on all objects that will be moved with this mechanism
initializePath(Item1);
initializePath(Item2);
initializePath(Item3);
initializePath(Item4);
initializePath(Item5);
initializePath(Item6);
// the 0th waypoint is the initial position for waypoint #1
// syntax is item, waypoint, endx, endy, duration in msecs
addWaypoint(Item1, 0, 0, 0, 0);
addWaypoint(Item1, 1, 200, 200, 2000);
addWaypoint(Item2, 0, 100, 100, 0);
addWaypoint(Item2, 1, 400, 100, 4000);
addWaypoint(Item3, 0, 400, 400, 0);
addWaypoint(Item3, 1, 200, 100, 1000);
addWaypoint(Item4, 0, 0, 0, 0);
addWaypoint(Item4, 1, 200, 200, 2000);
addWaypoint(Item5, 0, 100, 100, 0);
addWaypoint(Item5, 1, 400, 100, 4000);
addWaypoint(Item6, 0, 400, 400, 0);
addWaypoint(Item6, 1, 200, 100, 1000);
function endfunction() {
// syntax for runWaypoint is Item, start point, end point
runWaypoint(Item3, 0, 1);
runWaypoint(Item4, 0, 1);
runWaypoint(Item5, 0, 1);
runWaypoint(Item6, 0, 1);
}
function endfunction2() {
runWaypoint(Item1, 0, 1);
}
Item1.onpathcomplete = endfunction;
Item6.onpathcomplete = endfunction2;
</script>
</body>
</html>
Show Me2020-05-13 上传
2012-02-29 上传
2010-05-07 上传
2009-01-14 上传
2008-08-28 上传
2009-04-26 上传
108 浏览量
HelloWorld高级工程师
- 粉丝: 2551
- 资源: 26
我的内容管理
展开
最新资源
- Angular实现MarcHayek简历展示应用教程
- Crossbow Spot最新更新 - 获取Chrome扩展新闻
- 量子管道网络优化与Python实现
- Debian系统中APT缓存维护工具的使用方法与实践
- Python模块AccessControl的Windows64位安装文件介绍
- 掌握最新*** Fisher资讯，使用Google Chrome扩展
- Ember应用程序开发流程与环境配置指南
- EZPCOpenSDK_v5.1.2_build***版本更新详情
- Postcode-Finder：利用JavaScript和Google Geocode API实现
- AWS商业交易监控器：航线行为分析与营销策略制定
- AccessControl-4.0b6压缩包详细使用教程
- Python编程实践与技巧汇总
- 使用Sikuli和Python打造颜色求解器项目
- .Net基础视频教程：掌握GDI绘图技术
- 深入理解数据结构与JavaScript实践项目
- 双子座在线裁判系统：提高编程竞赛效率
