经典网页制作手册：快速入门与技巧
下载需积分: 9 | 3.69MB |
更新于2025-06-29
| 139 浏览量 | 举报
收藏
立即下载 在进行详细的知识点阐述之前，首先需要明确本手册的核心内容主要围绕“网页制作”这一主题展开。因此，接下来的讨论将围绕网页制作的各个方面，从基础概念到技术实现，力求为初学者提供一个全面的入门指南。
网页制作是一门涉及多个领域的综合技能，它包括前端设计、用户交互、代码编写等多个方面。在制作网页时，设计师和开发者需要考虑的因素非常多样，如布局、颜色、字体、导航结构、响应式设计、交互功能等。这些内容对于一个网页的成功至关重要。
本手册的“标题”《网页制作完全手册（相当经典）》指明了这是一份面向初学者的全面指南，它可能涵盖了HTML、CSS、JavaScript等多种技术。这些技术构成了网页制作的三大基石：
1. HTML（HyperText Markup Language）：超文本标记语言，用于构建网页的结构和内容。HTML定义了网页上的所有元素，如段落、链接、图片、表格等。
2. CSS（Cascading Style Sheets）：层叠样式表，用于定义网页的样式和布局。CSS控制了网页的外观，包括颜色、字体、间距、布局等。
3. JavaScript：一种编程语言，用于使网页具有动态交互功能。JavaScript可以实现动画、表单验证、数据处理、实时内容更新等高级功能。
从“描述”中我们可以推断，本手册不仅提供了基础理论知识，还提供了实际操作的指导。这意味着在阅读本手册的过程中，读者将能够学习到如何搭建一个基本的网页框架，以及如何通过添加各种代码片段来增强网页的互动性和用户体验。
至于“标签”中提到的“网页”，这可能意味着手册在内容上不仅涵盖了前台的设计与开发，也可能包括了网站后台的相关知识，比如网站管理、网页服务器的配置、数据库的基本操作等。
提到的“压缩包子文件”的文件名“js.chm”暗示了手册包含了一个特别关注JavaScript技术的章节或部分。CHM文件（Compiled HTML Help）是一种微软开发的帮助文件格式，通常用于存储和展示电子文档。这表明读者可以期待在手册中找到结构化的JavaScript教程和参考资料，或许还包括了JavaScript的高级特性和最佳实践。
结合上述信息，本手册的知识点可能包括但不限于以下几个方面：
- 网页制作基础：介绍网页制作的基本概念、流程和设计原则。
- HTML基础：详细讲解HTML元素、标签、属性及其语义化。
- CSS样式设计：深入探讨CSS选择器、盒模型、布局技巧（如Flexbox和Grid）以及响应式设计方法。
- JavaScript编程基础：介绍JavaScript的基本语法、事件处理、DOM操作和表单验证等。
- 网页项目构建：讲解如何使用不同的工具和框架来组织和优化网页开发工作流程。
- 前端与后端交互：简述服务器端概念以及如何通过JavaScript进行前后端数据交换。
- 网站部署与优化：提供网站上线前的准备工作、部署流程及性能优化建议。
总结以上内容，本手册是一份针对初学者的网页制作教材，它的内容涵盖了网页制作的各个方面，从基础的HTML、CSS、JavaScript技术到高级的设计理念和开发技巧。通过阅读本手册，读者可以打下扎实的网页制作基础，进而逐步提升到专业的网页开发水平。
资源目录
经典网页制作手册：快速入门与技巧 （1个子文件） 
js.chm 3.83MB共 1 条
- 1
相关推荐
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 Me
runqu123
- 粉丝: 0
我的内容管理
展开
最新资源
- Mail PassView 1.50：邮件账户密码恢复工具
- 实现无刷新交互的PHP xajax Blog程序源码
- Java连接MySQL最新驱动下载：mysql-connector-java-5.1.7
- 日文环境下代码行数统计工具的使用与特性
- 网站站内搜索引擎生成工具
- Mania1.2正式版发布：音乐游戏模拟新体验
- 全面人力资源管理系统代码实现与解析
- 计算机硬件维护教程：课件学习资源
- 驱动人生2008卡饭版：专业电脑驱动备份解决方案
- C#编程中使用SharpZipLib压缩类的方法与应用
- C#与C++ DLL互操作：界面效率提升之道
- ASP实现长文件分页，提高浏览效率
- 批量制作含水印证卡的软件新品发布
- 企业级即时通讯系统：服务端与客户端实现
- 动态鼠标使用与安装教程介绍
- 历年软考系统分析师&项目管理师试题分析
- 2008年擎泰SK6281量产工具使用教程
- C#实现个人电子通讯录：基于Access数据库管理
- JavaScript经典方法精粹：掌握107个核心技巧
- 计算机硬件维护教案与练习资源分享
- 掌握CSS与图片处理的网页制作教程
- PHP通过飞信接口实现免费短信发送教程
- C#开发的图书管理系统示例
- VS2005 C++实现的定时关机程序开发指南
