下载掌阅APP，畅读海量书库
立即打开
初学网页制作的读者对网页技术的实现有很多不解，在实际操作中出现的问题往往不知其所以然。在本节，笔者将从各种网页技术的工作原理的角度来讲述其本质，读者理解后将对网页实践中的问题解决中有很大帮助。
静态HTML网页文件及相应的其他资源存储在网页服务器上，其根目录可看做一个有组织的网站。当浏览器端在地址栏输入该网站域名或URL时，浏览器端的请求被发送到网页服务器的IIS。IIS调用相应的网页及相应的其他资源发回给浏览器端，浏览器对服务器发回的HTML代码进行解析，从而在浏览器端显示出完整的网页，如图2.8所示。
图2.8 静态HTML网页工作流程
如图2.8所示可以了解静态网页的工作流程，在网页制作时读者自己的电脑往往既充当网页服务器端，也充当浏览器端。
路径在网页技术中是一个很重要的概念，如果读者没有把路径理解透彻，在接下来的学习中会遇到很多麻烦。由于完整的网页是由网页文件组织外部资源（图片、动画等），HTML代码通过路径寻找资源的位置。网页与网页之间的互相访问也是通过路径定位，每个网页文件都可通过路径访问。
路径分为绝对路径和相对路径。绝对路径，即上一章讲的URL，就是网站中文件的绝对位置。如“http://www.google.cn/images/logo_cn.gif”，这代表网站中的一个图片文件的URL，即绝对路径。定位同一个网站（同一个域名）中的网页或资源很少用绝对路径，首先，因为书写比较麻烦，重复部分太多。其次，当整个网站域名更换了，网站内所有的绝对路径都要更换域名部分。
相对路径参照物分为相对网站根目录和相对文档，常用于定位同一网站（同一个域名）下的网页或资源。
（1）相对网站根目录方式的路径参照物是整个网站的根目录，类似于绝对路径，只是把http协议及域名部分省略了。相对网站根目录路径的写法是在被访问的网页或资源路径前加个“/”表示网站根目录，例如，“http://www.google.cn/images/logo_cn.gif”写成相对网站根目录路径为“/images/logo_cn.gif”。同一个网站中，任何页面访问这个图片文件都使用这个路径。
相对网站根目录路径解决了绝对路径的域名更换问题，域名变化不会影响到路径的编写。
（2）相对文档路径参照物是引用该路径的文档（HTML网页文件），不同位置的网页访问同一个网页或资源，其相对文档路径也不同。当需要寻找的网页文件（资源）和文档处在同一目录下，文档代码中的路径即为被寻找到网页文件（资源）的文件名。例如，“http://www.google.cn/images/logo_cn.gif”，当所编辑的网页文档在“http://www.google.cn/images/”下，网页文档中该图片的路径为“logo_cn.gif”；当所编辑的网页文档在“http://www.google.cn/”下，网页文档中该图片的路径为“images/logo_cn.gif”；当所编辑的网页文档在“http://www.google.cn/images/abc/”下，网页文档中该图片的路径为“../logo_cn.gif”。这种方法和DOS操作系统的路径方法非常相似，向上一级目录使用“../”。
相对网站根目录路径和相对文档路径的表示和区分，如图2.9所示。
如图2.9所示可看出使用相对文档路径，不同的网页文档由于所处位置不同，对同一个网页文件（资源）的路径表示也不同。并且相对文档路径非常适合于寻找比较“近”的网页文件（资源）。
说明 ：在网站开发中提倡使用相对路径。一般情况下使用相对文档路径，重用率比较高的资源使用相对网站根目录路径。
图2.9 相对路径的表示方法
光的三原色是红色、绿色、蓝色，而计算机也是根据这个原理显示颜色。不过自然光的颜色数量是无限的，计算机的颜色数量是有限的。
计算机表示的任何颜色都可分为红、绿、蓝三原色，任何颜色都是由这三种颜色混合而成，如图2.10所示。RGB是Red、Green、Blue的意思，所以也叫RGB三原色模式。因为网页最终是显示在浏览器端的显示器上，所以网页创作时同样采用RGB三原色模式表示颜色。
注意 ：印刷品平面设计创作时，采用CMYK模式便于作品最终印刷。
在HTML技术里，颜色有两种表示方式。一种是用颜色名称表示，如blue表示蓝色、white表示白色；另一种是用16进制的数值表示RGB的颜色值，后者表示颜色更加精确。
RGB每个原色的最小值是0，最大值是255，如果换算成16进制表示，最小值就是＃00，最大值就是＃FF，通过R、G、B三种颜色值的组合获取丰富的颜色。
说明 ：16进制是计算机常用的数值表达方式，相对于日常10进制的“逢10进1”，十六进制是“逢16进1”，用a、b、c、d、e、f分别代表10、11、12、13、14、15。
组合规则如图2.11所示。
图2.10 三原色示意图
图2.11 三原色组合方式
表示不同的颜色有其规律，白色是三原色值均为最大的时候（红绿蓝最亮时）混合成的颜色，所以颜色表示为RGB（255，255，255），16进制就用＃ffffff表示；反之，黑色的RGB（0，0，0），就用＃000000表示；灰色介于黑色和白色之间，只要RGB三原色的颜色值相等，表示的就是灰色，且值越大越接近白色（浅灰），值越小越接近黑色（深灰），如＃111111（深灰）、＃ababab（浅灰）。
注意 ：表示黑、白、灰色时确保R、G、B三原色值相等。
黑白以外的颜色表示同样有规律。表示最亮的红色为＃ff0000、蓝色为＃00ff00、绿色为＃0000ff。通过颜色混合的理论，红色和蓝色混合得出紫色（洋红色），所以表示最亮的紫色为＃ffff00；蓝色和绿色混合得出青色，所以表示最亮的青色为＃00ffff；红色和绿色混合得出黄色，所以表示最亮的黄色为＃ff00ff。
说明 ：由于颜色丰富多样，让读者很难确定颜色的RGB值。可以尝试在Photoshop中吸取相应的颜色，获得其RGB值（16进制）。
学习网页技术和其他任何技术一样，需要循序渐进。笔者推荐学习网页技术的顺序如图2.12所示。
图2.12 网页技术学习顺序
说明 ：本书全面学习虚线以上的部分，即网页前台技术。