网页设计与制作-(第2版)

目录 第1章网页设计基础1 1.1网站建设基本概念1 1.1.1因特网1 1.1.2万维网2 1.1.3浏览器3 1.1.4网页和网站4 1.2网页设计相关技术6 1.2.1网页设计相关组织6 1.2.2Web标准7 1.2.3XHTML标签9 1.2.4CSS样式10 1.2.5JavaScript脚本11 1.2.6图形图像处理11 1.3网页制作工具13 1.3.1HTML网页编辑器13 1.3.2可视化网页制作工具14 1.3.3图形图像处理工具16 1.4网站开发流程16 1.5本章小结17 1.6习题17 1.6.1填空题17 1.6.2简答题18第2章Dreamweaver CS6简介19 2.1初识Dreamweaver CS619 2.1.1认识Dreamweaver CS6的工作界面19 2.1.2工作区常用功能介绍20 2.1.3Dreamweaver CS6版本介绍23 2.2站点的创建和管理24 2.2.1创建新站点24 2.2.2打开已有站点25 2.2.3导出和导入已有站点25 2.2.4管理已有站点28 2.3本章小结32 2.4习题32第3章XHTML基础34 3.1XHTML的基本结构与语法34 3.1.1XHTML的基本结构34 3.1.2HTML标签37 3.1.3HTML属性38 3.1.4元数据标签38 3.2文字处理40 3.2.1标题标签40 3.2.2段落标签41 3.2.3换行标签
42 3.2.4水平线标签43 3.2.5原样显示文字标签44 3.2.6居中对齐标签45 3.2.7文字格式标签46 3.2.8字体格式化46 3.2.9特殊符号的使用49 3.2.10注释标签50 3.2.11文字处理案例50 3.3列表51 3.3.1无序列表51 3.3.2有序列表52 3.3.3定义性列表54 3.4多媒体55 3.4.1图像标签55 3.4.2声音和视频文件的使用57 3.4.3滚动对象标签63 3.5超链接65 3.5.1超链接的建立65 3.5.2超链接的运用66 3.5.3绝对路径与相对路径73 3.6表格74 3.6.1表格的结构74 3.6.2表格的分组77 3.6.3表格的嵌套84 3.6.4运用表格制作简单页面85 3.7本章小结86 3.8习题87 3.8.1填空题87 3.8.2练习题87第4章表单和框架88 4.1表单88 4.1.1表单容器标签88 4.1.2输入域标签 90 4.1.3多行文本输入框94 4.1.4下拉列表框95 4.1.5标注标签97 4.1.6分组标签97 4.1.7按钮标签98 4.1.8制作注册表单98 4.2框架102 4.2.1框架的结构102 4.2.2框架的应用设置104 4.3本章小结111 4.4习题111 4.4.1填空题111 4.4.2操作题111第5章CSS基本语法112 5.1CSS概述112 5.1.1CSS简介112 5.1.2CSS的优势113 5.1.3CSS与浏览器的兼容性115 5.2CSS语法115 5.2.1CSS语法规则115 5.2.2选择器的类型116 5.2.3选择器的综合运用117 5.2.4CSS注释120 5.3CSS样式表121 5.3.1行间样式表121 5.3.2内部样式表122 5.3.3外部样式表122 5.3.4导入外部样式表124 5.4样式优先权125 5.4.1样式表的优先级125 5.4.2选择器的优先级127 5.4.3!important语法128 5.5CSS的继承129 5.6本章小结131 5.7习题131 5.7.1填空题131 5.7.2简答题132第6章使用CSS美化网页元素133 6.1丰富文字效果133 6.1.1文字样式属性133 6.1.2排版样式属性137 6.2控制页面背景141 6.2.1设置颜色方法141 6.2.2设置背景效果142 6.3设置图片效果145 6.3.1图片样式146 6.3.2图片的对齐148 6.3.3图文混排149 6.4美化超链接151 6.4.1动态超链接151 6.4.2图片超链接152 6.5美化表格154 6.5.1边框的样式154 6.5.2外边距和内边距156 6.5.3表格的颜色159 6.6美化列表161 6.6.1项目列表的相关属性161 6.6.2列表和其他元素的综合运用163 6.7美化表单165 6.8本章小结167 6.9习题167 6.9.1填空题167 6.9.2简答题167 6.9.3练习题167第7章CSS布局基础168 7.1认识和168 7.1.1标签168 7.1.2标签169 7.1.3div和span对象的区别171 7.2盒模型172 7.2.1盒模型概述172 7.2.2盒模型与浏览器173 7.3定位与浮动174 7.3.1元素的定位174 7.3.2元素的浮动182 7.3.3清除浮动187 7.4浏览器的兼容性194 7.4.1CSS Hack194 7.4.2！important199 7.5本章小结200 7.6习题200 7.6.1填空题200 7.6.2简答题200第8章DIV CSS布局201 8.1CSS的排版理念201 8.1.1设计页面结构201 8.1.2页面的排版201 8.1.3网页模块命名规范202 8.2单列布局204 8.3两列布局208 8.4三列布局210 8.5CSS DIV布局与表格布局的差异214 8.6网页布局实战217 8.7本章小结221 8.8习题221第9章JavaScript基础222 9.1JavaScript概述222 9.1.1初识JavaScript222 9.1.2在HTML中使用JavaScript脚本223 9.1.3JavaScript注释224 9.2JavaScript基本语法225 9.2.1标识符和关键字225 9.2.2数据类型226 9.2.3常量和变量228 9.2.4运算符和表达式229 9.2.5流程控制语句231 9.2.6函数235 9.3JavaScript对象239 9.3.1JavaScript对象概述239 9.3.2JavaScript内置对象240 9.3.3浏览器对象246 9.4JavaScript事件250 9.4.1JavaScript事件概述250 9.4.2JavaScript常用事件250 9.4.3常用事件处理程序251 9.5引用页面元素的方法260 9.5.1访问页面元素的id属性260 9.5.2使用name属性访问262 9.5.3使用HTML标记访问263 9.6本章小结264 9.7习题265 9.7.1选择题265 9.7.2简答题267第10章JavaScript运用268 10.1JavaScript对象和事件的综合运用268 10.1.1制作级联菜单268 10.1.2制作下拉菜单269 10.1.3树形菜单273 10.1.4浮动的广告275 10.1.5跑马灯效果279 10.2JavaScript与CSS的综合运用281 10.2.1运用CSS滤镜实现PPT幻灯片281 10.2.2层的切换284 10.3jQuery在网页中的应用286 10.3.1jQuery简介287 10.3.2页面边栏的浮动窗口288 10.3.3动态显示密码强弱290 10.4本章小结292 10.5习题292第11章企业网站制作实例293 11.1准备工作293 11.2布局页面295 11.3详细页面制作298 11.3.1header区域298 11.3.2menu区域299 11.3.3banner区域301 11.3.4main区域302 11.3.5footer区域310 11.4本章小结310 11.5习题310参考文献312前　　言前言
网页设计在IT行业属于一门基础学科，也是一项比较容易学习的技术。在高校，网页设计是计算机专业学生的必修课，也是其他学科学生的选修课。
全书共分11章，内容涉及网页设计基础知识、Dreamweaver、XHTML、CSS和JavaScript等。
（1）第1章，主要介绍网页制作的基础知识，包括网络相关的概念、网页设计技术及所需要的软件和网站开发流程等。通过本章的学习，初学者能了解网页制作的范畴，确定学习的目标。
（2）第2章，主要介绍网页的开发工具Dreamweaver CS6。通过本章的学习，初学者能熟悉Dreamweaver CS6的操作界面，并使用Dreamweaver CS6创建网页，建立站点。
（3）第3章和第4章，主要介绍HTML标签及其属性。设计简单案例，强化HTML标签和属性的用法。通过这两章的学习，初学者能够熟练地在页面中添加所需的网页元素，如文本、图像、列表、超链接、表格、表单、框架等，为网页结构的搭建打下基础。
（4）第5章和第6章，主要介绍CSS基本语法和常用CSS样式。通过这两章的学习，初学者可以在网页结构的基础上，丰富网页元素的表现效果。前言 网页设计在IT行业属于一门基础学科，也是一项比较容易学习的技术。在高校，网页设计是计算机专业学生的必修课，也是其他学科学生的选修课。 全书共分11章，内容涉及网页设计基础知识、Dreamweaver、XHTML、CSS和JavaScript等。 （1） 第1章，主要介绍网页制作的基础知识，包括网络相关的概念、网页设计技术及所需要的软件和网站开发流程等。通过本章的学习，初学者能了解网页制作的范畴，确定学习的目标。 （2） 第2章，主要介绍网页的开发工具Dreamweaver CS6。通过本章的学习，初学者能熟悉Dreamweaver CS6的操作界面，并使用Dreamweaver CS6创建网页，建立站点。 （3） 第3章和第4章，主要介绍HTML标签及其属性。设计简单案例，强化HTML标签和属性的用法。通过这两章的学习，初学者能够熟练地在页面中添加所需的网页元素，如文本、图像、列表、超链接、表格、表单、框架等，为网页结构的搭建打下基础。 （4） 第5章和第6章，主要介绍CSS基本语法和常用CSS样式。通过这两章的学习，初学者可以在网页结构的基础上，丰富网页元素的表现效果。 （5） 第7章和第8章，主要介绍如何运用CSS实现网页布局。这两章是网页布局的核心内容。第7章主要介绍盒模型、浮动和定位及浏览器的兼容性。第8章通过浮动和定位实现一列、两列及三列的网页布局。掌握这两章的内容，可以随心所欲地布局网页结构。 （6） 第9章和第10章，主要介绍JavaScript基础及在网页中的应用。第9章以知识讲解为主，第10章侧重应用。通过这两章的学习，初学者可以运用JavaScript实现网页的常见效果。 （7）第11章是全书内容的升华，也是点睛之笔。以一个企业网站为例，介绍网页制作的全过程，包括如何分析页面、确定网页结构、布局网页，运用HTML添加网页元素，运用CSS定位网页元素并美化网页元素，*终实现详细设计。网站制作过程基本上覆盖了全书介绍的所有知识点。通过该实例的学习，初学者可以尝试自己设计一个标准的、美观大方的网页。 由于作者水平有限，不当之处在所难免，恳请广大读者批评指正。 编者2017年9月免费在线读第3章XHTML基础本章学习目标(1) 掌握XHTML的基本结构。(2) 熟练掌握与文字处理、列表、多媒体、超链接、表格等网页元素相关的XHTML标签及标签属性。本章主要介绍XHTML的基本结构及描述网页元素所用的标签和属性。通过学习标签和属性，为将来页面结构的设计奠定基础。3.1XHTML的基本结构与语法XHTML的页面结构要比HTML的页面结构要求严谨，更容易让浏览器知道该怎么去解释网页。下面先来了解一下XHTML的基本结构。 3.1.1XHTML的基本结构编写XHTML需要更严格的语法规则，XHTML是更加严谨的HTML。在实际中应遵循规则，形成一份规范的XHTML文件。1. 基本结构XHTML的基本结构主要包括如下3部分。(1) DOCTYPE——文档类型声明。(2) head——文件头部。(3) body——文件主体。基本语法结构如下: ……2.文档类型声明XHTML文档是从文档类型声明开始的，在XHTML 1.0中有如下3种文档类型定义声明可以选择。(1) Transitional(过渡类型)。(2) Strict(严格类型)。(3) Frameset(框架类型)。1) 过渡类型过渡类型是一种要求不很严格的DTD，允许在页面中使用HTML 4.01的标识(符合XHTML语法标准)。过渡的DTD的写法如下: 2) 严格类型严格类型是一种要求严格的DTD，不允许使用任何表现层的标识和属性，如
等。严格的DTD的写法如下: 3) 框架类型框架类型是一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架DTD的写法如下: 3. 语法规则所有XHTML文档必须进行文件类型声明。在XHTML文档结构中必须存在、、标记元素，而标记元素必须位于标记元素中。所以这4个标记元素是在DTD中定义了强制使用的HTML元素。XHTML文档中标记元素属性的编写规则如下。 (1) XHTML 文档必须拥有根元素。 (2) 标签名和属性名必须用小写字母。 (3) 属性名不能简写，属性值必须加引号。(4) 用id属性代替name属性。(5) XHTML DTD定义了强制使用的HTML元素。 (6) XHTML元素必须被正确地嵌套。 (7) XHTML元素必须被关闭。 【例3.1】XHTML的基本结构示例。XHTML基本结构学习XHTML基本语法
这是一个演示XHTML文档结构的案例。程序运行效果如图3.1所示。图3.1XHTML的基本结构示例图下面对网页结构中的标签做如下说明。(1) 文档的声明部分。声明了文档的类型为过渡类型，允许有HTML 4.0标签语法。文件类型声明并非 XHTML 文档自身的组成部分。它并不是 XHTML 元素，也没有关闭标签。书摘插画