下载掌阅APP，畅读海量书库
立即打开
做网站、设计网页，不是说做就做的，也需要读者掌握很多技术才行。对于专业网页设计师，或者网站开发工程师，需要掌握的技术很广、更深。对于初学者来说，不要一步到位，逐步积累、不断学习才行，相信经过你的努力，就一定会成为优秀的网页设计师。
HTML是一种语言，全称为Hypertext Markup Language，即超文本标识语言，是用于描述网页文档的一种工具。由HTML语言编写的文档，就是网页文档，这种文档可以被网页浏览器识别并解析，然后把网页效果呈现出来。如果没有浏览器的解析，我们所看到的网页文档由大量的HTML标签和文本信息组成，如图1.5所示。
图1.5 HTML网页源代码
学习HTML语言，就是学习这些标签及其用法，能够熟练使用这些标签组织网页内容，如使用<title>定义网页标题，使用<h1>、<h2>、<h3>等定义文档标题，使用<p>定义段落文本，使用<img>插入图像，使用<ul>、<ol>定义列表新闻，使用<table>定义表格等。以HTML 4.01版本为例，HTML语言包含89个标签，这些都需要读者认识、熟悉，并能够活学活用，初步学习时可以先易后难，先主后次，逐步掌握。
除了会用这些标签，读者还应该知道每个标签包含哪些属性，这些属性可以定义标签的显示效果和语义性质。HTML属性很多，读者可以先掌握公共属性，即大部分标签共同拥有的基本属性，以及常用标签的重点属性，然后随着学习和实践的深入，逐渐认识和掌握偏僻的属性。
当然，任何一门语言都有一些基本语法和规则，HTML也是如此，读者应该了解HTML语言的基本用法和规则。这些内容比较少，能够在短时间内快速掌握。
DIV是<div>标签的习惯性称呼，因为设计师主要使用<div>标签构建网页的结构，使用CSS设计网页样式，故把网页设计简称为DIV+CSS布局。
在HTML文档中，页面会被划分为很多区域，不同区域显示不同的内容，如标题栏、广告位、导航条、新闻列表、正文显示区域、版权信息区域等。这些区域一般都通过<div>标签进行分隔，如图1.6所示通过不同颜色边框描出页面中不同区块的结构。
图1.6 DIV构建网页结构
当然，页面中不仅仅用<div>标签构建网页结构，还可能需要以下几种常用类型标签来完善网页结构的语义性，说明如下。
<h1>……<h6>标签：定义文档标题，1表示一级标题，6表示六级标题，常用标题包括一级、二级和三级。
<p>标签：定义文档中段落文本内容。
<ul>、<ol>、<li>等标签：定义信息列表结构，或者导航列表结构。
<table>、<tr>、<td>等标签：定义数据表格结构。
<form>等标签：定义交互表单结构。
另外，还包括一些特殊语义的结构标签，灵活使用它们能够帮助用户设计更符合标准、更适合搜索的网页结构。
学习DIV构建网页结构，就是要学习这些结构标签的语义性，了解它们恰当使用的位置，以及结构标签嵌套的技巧和方法。同时，还应该考虑结构与CSS设计的联系。
有了网页结构和内容，还需要CSS来美化。CSS是一种语言，与HTML一样，是一种描述性语言，全称Cascading Style Sheet，可译为层叠样式表或级联样式表，它定义如何显示HTML标签，用于控制网页外观布局和样式设计。当网页缺少CSS时，是非常丑陋的，也不适合阅读和欣赏，如图1.7所示是禁用CSS之后的央视网络首页效果。
图1.7 没有CSS修饰的网页效果
CSS与HTML一样容易学习，但是初学者需要下工夫掌握CSS选择器的灵活用法，需要熟练使用CSS各种属性。以CSS 2.1版本为例，CSS定义了115个属性，初学者必须熟悉这些属性的用途和用法。同时每个属性还包含很多值，有些值是固定的，需要记忆才行。读者还需要熟练掌握这些属性和属性值配合应用，如图1.8所示就是央视网络首页的样式表。
作为一种语言，CSS也有一些基本语法和规则，读者应该掌握CSS样式的继承性、层叠性、特殊性，了解CSS样式、CSS样式表的用法，掌握取值和单位的灵活使用。如果进一步深入，读者还应该学习不同浏览器对CSS的支持情况，从宏观角度统筹一个网站中样式表和样式的规划等。
通过使用CSS实现页面的内容与表现形式分离，极大地提高了工作效率，作为网页标准化设计的主要工具，读者没有理由不认真学习它。
图1.8 网页中的样式表源代码
网页设计的动态化和智能化是一种大趋势，而如果要赶上这个趋势，读者就应该学习JavaScript，JavaScript是一种脚本语言，但是它包含编程语言的大部分特性和功能，掌握JavaScript编程，你就能够驾驭网页动态特效的设计，就能够把网页设计得更聪明、更富有人性化。
对于广大网页设计爱好者和前端开发人员来说，JavaScript是一门必学的编程语言，在网页设计日益重视客户端视觉效果、动态交互和数据异步交换的形势下，学好JavaScript就显得异常实用和紧迫。JavaScript语言虽然比较简单，但是要精通JavaScript还需要读者下点工夫。
例如，在如图1.9所示的页面中，当鼠标移动到灯箱广告右侧导航栏上时，该菜单就会改变背景色，同时上面的巨幅画面会自动进行切换，动感十足，视觉体验非常强烈。
图1.9 JavaScript在页面特效中的应用
与HTML、CSS学习相比，JavaScript学习难度要大很多，当然一旦当你掌握了JavaScript，相信读者的网页设计水平会达到一个新的高度，此时自己就不是一个简单的网页设计师，而应该是一个前端开发工程师的高级技术师。