网页设计与制作

当前位置:首页 > 教材 > 研究生/本科/专科教材 > 网页设计与制作

版次：1
页数：191
字数：294000
印刷时间：2017年03月01日
开本：128开
纸张：胶版纸
包装：平装-胶订
是否套装：否
国际标准书号ISBN：9787302463191
丛书名：应用型大学计算机专业系列教材
作者:赵立群、柴俊霞、付芳、李毅出版社:清华大学出版社出版时间:2017年03月

编辑推荐

知识系统、概念清晰、案例鲜活、贴近实际，注重技术与实践应用相结合。可作为应用型本科和高职高专院校计算机应用、网络管理和电子商务等专业的教材，也可作为企业信息化培训教材，并为中小企业网站建设、网页设计制作从业及管理者提供有益的学习指导。同系列书推荐：《数据库技术应用教程（SQL Server 2012版）》《Web静态网页设计与制作》《ASP.NET动态网页设计与制作》《中小企业网站建设与管理》《计算机英语实用教程》《多媒体技术应用》《计算机网络管理与安全》《网络系统集成》《Access 2010数据库应用》《操作系统》《计算机组装与维护》《计算机应用基础（Windows 8 Office 2013版）》《Java基础程序设计》

内容简介

本书结合网页设计制作发展的新特点，根据网页设计制作操作规程，具体介绍网页的运行环境、网页设计、网页制作三大技术HTML、CSS、JavavScript，网页和网站设计的实用技巧等基本理论知识。

目　　录

第1章Web前端技术概述1
1.1Web简介1
1.1.1从技术角度看Web发展历程1
1.1.2Web的系统结构4
1.2浏览器6
1.2.1浏览器的工作原理6
1.2.2浏览器中的插件9
1.3网页制作工具11
1.3.1HTML语言12
1.3.2CSS14
1.3.3JavaScript脚本语言14
1.3.4从网页制作的角度看网页构成15
【本章小结】16
【本章习题】16

<p>第1章Web前端技术概述1</p>
<p>1.1Web简介1</p>
<p>1.1.1从技术角度看Web发展历程1</p>
<p>1.1.2Web的系统结构4</p>
<p>1.2浏览器6</p>
<p>1.2.1浏览器的工作原理6</p>
<p>1.2.2浏览器中的插件9</p>
<p>1.3网页制作工具11</p>
<p>1.3.1HTML语言12</p>
<p>1.3.2CSS14</p>
<p>1.3.3JavaScript脚本语言14</p>
<p>1.3.4从网页制作的角度看网页构成15</p>
<p>【本章小结】16</p>
<p>【本章习题】16</p>
<p> </p>
<p>第2章HTML语言17</p>
<p>2.1HTML网页的基本结构17</p>
<p>2.1.1HTML文件的基本结构17</p>
<p>2.1.2XHTML基本结构的标记说明18</p>
<p>2.2文本标记20</p>
<p>2.2.1段落、换行和水平线标记20</p>
<p>2.2.2分区标记21</p>
<p>2.2.3标题标记22</p>
<p>2.2.4设置字体、字号和颜色22</p>
<p>2.2.5设置字符样式23</p>
<p>2.2.6设置列表格式24</p>
<p>2.3表格的标记27</p>
<p>2.3.1认识表格标记27</p>
<p>2.3.2设置表格属性28</p>
<p>2.4超链接标记30</p>
<p>2.4.1超链接概述 30</p>
<p>2.4.2文本链接31</p>
<p>2.4.3图片链接与图像映射31</p>
<p>2.5插入多媒体标记 34</p>
<p>2.5.1图像标记及设置34</p>
<p>2.5.2加入音频、视频及动画文件34</p>
<p>2.5.3滚动字幕的设置36</p>
<p>2.6表单标记38</p>
<p>2.6.1表单的基本结构38</p>
<p>2.6.2表单的用户输入区38</p>
<p>2.6.3表单的选择栏39</p>
<p>2.6.4多行文本框40</p>
<p>2.7框架标记41</p>
<p>2.7.1<frameset>标记42</p>
<p>2.7.2<frame>标记42</p>
<p>2.7.3<noframes>标记 42</p>
<p>2.7.4<iframe>标签44</p>
<p>【本章小结】46</p>
<p>【本章习题】46</p>
<p> </p>
<p>第3章CSS样式基础48</p>
<p>3.1CSS48</p>
<p>3.1.1CSS概述48</p>
<p>3.1.2编辑CSS49</p>
<p>3.2添加CSS的方法50</p>
<p>3.2.1行内样式50</p>
<p>3.2.2内嵌式51</p>
<p>3.2.3链接式52</p>
<p>3.2.4导入样式53</p>
<p>3.2.5各种方式的优先级问题55</p>
<p>3.3CSS 2选择器55</p>
<p>3.3.1CSS 2选择器定义55</p>
<p>3.3.2选择器的应用55</p>
<p>3.3.3常用单位61</p>
<p>3.4CSS的字体和文本属性62</p>
<p>3.4.1字体的属性62</p>
<p>3.4.2文本属性65</p>
<p>3.5背景、链接和鼠标属性69</p>
<p>3.5.1背景样式属性69</p>
<p>3.5.2超链接73</p>
<p>3.5.3鼠标特效74</p>
<p>3.6表格、列表样式76</p>
<p>3.6.1表格的样式76</p>
<p>3.6.2列表样式79</p>
<p>【本章小结】81</p>
<p>【本章习题】81</p>
<p> </p>
<p>第4章CSS div网页布局82</p>
<p>4.1盒模型82</p>
<p>4.1.1什么是盒模型82</p>
<p>4.1.2填充属性83</p>
<p>4.1.3边框属性85</p>
<p>4.1.4边界属性87</p>
<p>4.2元素的定位方式92</p>
<p>4.2.1元素定位的原则92</p>
<p>4.2.2浮动92</p>
<p>4.3CSS div网页布局95</p>
<p>4.3.1CSS div布局网页基础95</p>
<p>4.3.2对div与span的再认识97</p>
<p>4.4常见CSS div布局100</p>
<p>4.4.1单列居中布局100</p>
<p>4.4.2两列居中布局102</p>
<p>4.4.3多列居中布局106</p>
<p>4.4.4固定宽度、高度的块中内容溢出处理108</p>
<p>【本章小结】109</p>
<p>【本章习题】110</p>
<p> </p>
<p>第5章JavaScript基础112</p>
<p>5.1JavaScript中的数据与运算112</p>
<p>5.1.1JavaScript的嵌入与运行112</p>
<p>5.1.2数据类型114</p>
<p>5.1.3变量与常量115</p>
<p>5.1.4运算符与表达式116</p>
<p>5.2流程控制语句117</p>
<p>5.2.1实现分支结构的语句117</p>
<p>5.2.2实现循环结构的语句120</p>
<p>5.3函数123</p>
<p>5.3.1函数的定义与调用123</p>
<p>5.3.2系统函数125</p>
<p>5.4对象127</p>
<p>5.4.1JavaScript对象概述127</p>
<p>5.4.2数组对象128</p>
<p>5.4.3字符串对象129</p>
<p>5.5事件响应130</p>
<p>5.5.1JavaScript事件响应概述 130</p>
<p>5.5.2表单事件131</p>
<p>5.5.3鼠标事件132</p>
<p>5.5.4键盘事件135</p>
<p>5.5.5页面载入和离开事件137</p>
<p>【本章小结】138</p>
<p>【本章习题】139</p>
<p> </p>
<p>第6章浏览器对象140</p>
<p>6.1浏览器对象概述140</p>
<p>6.2window对象141</p>
<p>6.2.1窗口对象的属性和方法142</p>
<p>6.2.2窗口对象的应用143</p>
<p>6.3document对象149</p>
<p>6.3.1documemt对象的集合、属性和方法149</p>
<p>6.3.2访问页面元素150</p>
<p>6.3.3向文档写入内容152</p>
<p>6.4navigator对象155</p>
<p>6.4.1navigator对象概述155</p>
<p>6.4.2检测浏览器155</p>
<p>6.5location对象157</p>
<p>6.5.1location对象的常用属性和方法157</p>
<p>6.5.2location的应用157</p>
<p>6.6history对象158</p>
<p>6.6.1history对象的属性与方法159</p>
<p>6.6.2history对象的应用159</p>
<p>6.7网页特效161</p>
<p>6.7.1漂动广告161</p>
<p>6.7.2用JavaScript CSS制作下拉菜单163</p>
<p>【本章小结】165</p>
<p>【本章习题】166</p>
<p> </p>
<p>第7章网站设计167</p>
<p>7.1网页设计167</p>
<p>7.1.1网页设计概述 167</p>
<p>7.1.2交互设计168</p>
<p>7.1.3界面设计172</p>
<p>7.2网站建设177</p>
<p>7.2.1网站建设的基本流程177</p>
<p>7.2.2常见网站类型简析178</p>
<p>7.2.3网站要素的规划180</p>
<p>7.2.4Web站点建设的常用方法183</p>
<p>7.3网站设计案例187</p>
<p>【本章小结】190</p>
<p>【本章习题】191</p>
<p> </p>
<p>参考文献192</p>

显示全部信息

前　　言

前言随着计算机与网络通信技术的飞速发展，计算机网络应用渗透到社会经济领域的各个方面。随着“一带一路”建设和国家“互联网 ”创新战略加快实施，网络技术的应用必将在国民经济的各个领域进一步深化和发展。网络经济促进国民经济快速发展，企业网站运营作为现代科技进步催生的新型生产力，在拉动内需、解决就业、扩大经营、促进经济发展、加速传统产业升级、提高企业竞争力等方面发挥重要作用，越来越受到政府和企业的重视。网站建设既是信息化推进的基础，也是网络经济发展的关键环节。网页设计的优劣、制作质量的高低决定了网站运营的成败。网页是企业网站的窗口，直接体现企业文化，用于对外交流、互动。优秀的网页设计与制作，不仅需要先进的技术设备、软件工具，更需要创新、创意、先进的经营理念、精巧的设计和制作工艺。随着国民经济信息化、企业信息技术应用的迅猛发展，面对国际IT市场的激烈竞争，面对就业的巨大压力，无论是即将毕业的计算机应用专业、网络管理专业的学生，还是在岗的IT工作者，从业的必要条件是努力学好、真正掌握现代化网页设计及制作知识与技能，这对于今后的发展具有特殊意义。网页设计与制作是应用型大学计算机专业重要的核心基础课程，也是学生就业、创业必须掌握的关键知识与技能。本书坚持科学发展观，注重以职业技能培养为主线，严格按照教育部关于“加强职业教育、突出实践技能培养”的要求，根据网页设计与制作技术、设备的发展，结合专业教学改革的需要，循序渐进地讲解知识，力求使读者在做中学、在学中做，真正能够利用所学知识解决实际应用问题。作为高等教育应用型大学计算机应用和网络管理专业的特色教材，本书分为7章，采取任务驱动式案例教学写法，根据网页设计与制作课程的教学要求和操作规程，介绍网页的运行环境，网页设计与制作的三大技术HTML、CSS、JavaScript，网页和网站设计的实用技巧等基础理论知识，并通过加强实践技能训练，提高读者的应用能力。本书融入了网页设计与制作最新的实践教学理念，力求严谨，注重与时俱进，具有知识系统、概念清晰、案例经典、贴近实际等特点，注重职业技术与实践应用相结合，既可作为应用型本科、高职高专院校计算机应用、网络管理和电子商务等专业的首选教材，还可以用于企业信息化培训，并为中小企业网站建设、网页设计与制作从业人员及管理者提供有益的学习指导。本书由李大军统筹策划并具体组织，赵立群和柴俊霞任主编，赵立群统改稿，付芳、李毅任副主编。本书由我国网页设计与制作专家邵晶波教授审定。作者编写分工如下：牟惟仲编写序言，黄玉妍编写第1章，付芳、柴俊霞编写第2章，柴俊霞编写第3章，赵立群编写第4章和第6章，赵宝生编写第5章，李毅编写第7章；李晓新负责文字修改、版式整理、制作教学课件等工作。在本书编写过程中，我们参阅了中外有关网页设计与制作的最新书刊、企业案例、网络资料，以及国家颁布实施的相关法规和管理规定，并得到计算机行业协会及业界著名专家、教授的具体指导，在此一并致谢。为了方便教学，本书配有课件，读者可以从清华大学出版社网站（www.tup.com.cn）免费下载使用。因网页设计与制作技术发展较快，且编者水平有限，书中难免存在不妥之处，敬请广大读者批评指正。

前言
<div>随着计算机与网络通信技术的飞速发展，计算机网络应用渗透到社会经济领域的各个方面。随着“一带一路”建设和国家“互联网 ”创新战略加快实施，网络技术的应用必将在国民经济的各个领域进一步深化和发展。网络经济促进国民经济快速发展，企业网站运营作为现代科技进步催生的新型生产力，在拉动内需、解决就业、扩大经营、促进经济发展、加速传统产业升级、提高企业竞争力等方面发挥重要作用，越来越受到政府和企业的重视。网站建设既是信息化推进的基础，也是网络经济发展的关键环节。网页设计的优劣、制作质量的高低决定了网站运营的成败。网页是企业网站的窗口，直接体现企业文化，用于对外交流、互动。优秀的网页设计与制作，不仅需要先进的技术设备、软件工具，更需要创新、创意、先进的经营理念、精巧的设计和制作工艺。随着国民经济信息化、企业信息技术应用的迅猛发展，面对国际IT市场的激烈竞争，面对就业的巨大压力，无论是即将毕业的计算机应用专业、网络管理专业的学生，还是在岗的IT工作者，从业的必要条件是努力学好、真正掌握现代化网页设计及制作知识与技能，这对于今后的发展具有特殊意义。网页设计与制作是应用型大学计算机专业重要的核心基础课程，也是学生就业、创业必须掌握的关键知识与技能。本书坚持科学发展观，注重以职业技能培养为主线，严格按照教育部关于“加强职业教育、突出实践技能培养”的要求，根据网页设计与制作技术、设备的发展，结合专业教学改革的需要，循序渐进地讲解知识，力求使读者在做中学、在学中做，真正能够利用所学知识解决实际应用问题。作为高等教育应用型大学计算机应用和网络管理专业的特色教材，本书分为7章，采取任务驱动式案例教学写法，根据网页设计与制作课程的教学要求和操作规程，介绍网页的运行环境，网页设计与制作的三大技术HTML、CSS、JavaScript，网页和网站设计的实用技巧等基础理论知识，并通过加强实践技能训练，提高读者的应用能力。本书融入了网页设计与制作最新的实践教学理念，力求严谨，注重与时俱进，具有知识系统、概念清晰、案例经典、贴近实际等特点，注重职业技术与实践应用相结合，既可作为应用型本科、高职高专院校计算机应用、网络管理和电子商务等专业的首选教材，还可以用于企业信息化培训，并为中小企业网站建设、网页设计与制作从业人员及管理者提供有益的学习指导。本书由李大军统筹策划并具体组织，赵立群和柴俊霞任主编，赵立群统改稿，付芳、李毅任副主编。本书由我国网页设计与制作专家邵晶波教授审定。作者编写分工如下：牟惟仲编写序言，黄玉妍编写第1章，付芳、柴俊霞编写第2章，柴俊霞编写第3章，赵立群编写第4章和第6章，赵宝生编写第5章，李毅编写第7章；李晓新负责文字修改、版式整理、制作教学课件等工作。在本书编写过程中，我们参阅了中外有关网页设计与制作的最新书刊、企业案例、网络资料，以及国家颁布实施的相关法规和管理规定，并得到计算机行业协会及业界著名专家、教授的具体指导，在此一并致谢。为了方便教学，本书配有课件，读者可以从清华大学出版社网站（www.tup.com.cn）免费下载使用。因网页设计与制作技术发展较快，且编者水平有限，书中难免存在不妥之处，敬请广大读者批评指正。<br />编者2017年1月</div>

显示全部信息

媒体评论

评论

在线试读部分章节

<br />第3章CSS样式基础引言通过第2章可知，超文本标记语言HTML是Web文档的规范，使用HTML标记可以定义各种页面元素，使用这些标记的属性能对其格式进行更加全面的设计。为了更精确地控制页面元素的样式并实现样式信息与页面内容的分离，本章将学习能完成这一任务的新技术CSS（层叠样式表）。〖*1〗3.1.1CSS概述CSS（Cascading Style Sheet，样式表）是一种用于控制网页样式的标记语言。本质上讲，CSS是一组格式设置规则，用于控制页面元素的外观，形成页面内容存放在HTML文件中；而用于定义形式的CSS规则存放在另一文件中，或存放在HTML文件的另一部分（通常为网页的首部），实现内容与表示形式的分离。1997年年初，W3C成立了专门的CSS工作组，讨论第一版中没有涉及的问题，于1998年 5月发布CSS第二版。尔后，W3C致力于CSS第三版的研究。CSS 3由一系列标准的模块构成，很多模块仍处于开发阶段。本章主要讲解目前应用较广的CSS 2。使用CSS的优势主要体现在以下几个方面。 （1） 内容和样式分离，使网页设计更加明了、简洁。（2） 弥补HTML对标记属性控制的不足。例如，在HTML中可控制的标题仅有 6级，即h1～h6，而利用CSS可以任意设置标题大小。（3） 精确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。（4） 提高网页效率，增强易用性和可扩展性。多个网页同时应用一个CSS样式，既减少了代码下载，又提高了浏览器的浏览速度和网页的更新速度，并能提高网页的编辑维护效率。同时，在一个网页上可以通过调用不同的样式表切换不同的网页外观。（5） 增强网页特效，提高用户体验。CSS有很多特殊功能，如鼠标指针属性控制鼠标的形状，滤镜属性控制图片的特效等。3.1.2编辑CSS   CSS文件与HTML文件一样，都是纯文本文件，因此用一般的文字处理软件都可以编辑。记事本和Ultraedit等最常用的文本编辑工具对CSS的初学者尤其有帮助。在网上可以找到很多CSS编辑器或在线编辑器，这里使用Dreamweaver的纯代码模式。Dreamweaver这款专业的网页设计软件在代码模式下对HTML、CSS和JavaScript等代码有非常好的语法着色以及语法提示功能，并且自带很多实例，对学习CSS很有帮助，如图31所示。图31Dreamweaver的代码模式从图31中可以看到，对于CSS代码，在默认情况下都采用粉红色进行语法着色，而HTML代码中的标记是蓝色；正文内容在默认情况下为黑色。对于每行代码，前面都有行号进行标记，方便对代码的整体规划。在Dreamweaver中，无论是CSS代码还是HTML代码，都有很好的语法提示。在编写具体CSS代码时，按Enter键或空格键都可以触发语法提示。在图32中，当光标移动到“color:blue;”一句的末尾时，按空格键或Enter键，都可以触发语法提示的功能。Dreamweaver列出所有可供选择的CSS样式，方便网页设计者快速选择，提高了工作效率。若选定某个CSS样式，例如color样式，在其冒号后面再按空格键，Dreamweaver弹出新的详细提示框，让用户直接选择相应CSS的值。图33所示的调色板就是其中的一种情况。图32Dreamweaver语法提示图33调色板3.2添加CSS的方法样式表中的样式是对于网页元素书写的，只有将样式应用在相应的网页元素上，并通过浏览器显示出来，才能让用户看到效果。有三种方法可以在站点网页上使用CSS样式。  （1） 行内样式，将样式直接写在各个网页元素的标签中。这种样式只对其所在的元素起作用。（2） 内嵌式，在网页<head>标签中创建嵌入的样式表。这种样式只对样式表所在网页的元素起作用。（3） 外部样式，将样式写在一个单独的文件中，保存为.css文件，通过链接或者导入的方式将外部样式表应用到网页上。这种方式可以使一个样式表作用在不同的网页上。3.2.1行内样式行内样式是所有样式方法中最直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码写在其中。行内样式基本语法格式为head> </head> <body> <HTML标记 style=＂样式属性:取值;样式属性:取值;...＂> </body> 利用这种方法定义的样式，其效果只能控制某个标记，所以比较适用于指定网页中某小段文字的显示风格，或某个元素的样式。【例31】行内样式示例，如图34所示。代码如下所示。!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>行内样式</title> </head><body><p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p><p style="color:#000000; font-style:italic;">正文内容2</p><p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p></body></html>行内样式是最简单的CSS使用方法，但由于需要为每一个标记设置style属性，因此后期维护成本很高，而且容易造成页面代码冗余，无法发挥样式表的优势，因此不推荐使用。3.2.2内嵌式内嵌式就是将CSS样式代码写在<head>与</head>之间，并且用<style>和</style>标记来声明。内嵌式基本语法格式为head> <style type=＂text/css＂>  </head> 内嵌式就是将所有的样式表信息都列于HTML文件的头部，因此这些样式可以在整个HTML文件中调用。如果想对网页一次性加入样式表，可选用此法。【例32】内嵌式示例，如图35所示。代码如下所示。!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>页面标题</title><style type="text/css">p{color:#FF00FF;text-decoration:underline;font-weight:bold;font-size:25px;}</style> </head><body><p>紫色、粗体、下划线、25px的效果1</p><p>紫色、粗体、下划线、25px的效果2</p><p>紫色、粗体、下划线、25px的效果3</p></body></html>图35内嵌式示例可见，所有CSS代码部分被集中在同一个区域，方便后期维护，页面本身也更精练，如果是一个网站，拥有很多页面，对于不同页面上的<p>标记都希望采用同样的风格时，内嵌式显得略麻烦，维护成本也不低，因此它仅适用于对特殊的页面设置单独的样式风格。3.2.3链接式链接式将CSS样式写在单独的样式文件中，在网页<head>标签中通过<link>标签调用该样式文件。链接式CSS样式表是使用频率最高，最实用的方法。它将HTML页面本身与CSS样式风格分离为两个或多个文件，可实现页面框架HTML代码与美工CSS代码完全分离，使前期制作和后期维护都十分方便。链接式基本语法格式为 head> <link rel="stylesheet " type="text/css" href="样式表文件的地址 "> </head> CSS文件要和HTML文件一起发布到服务器上。这样，在用浏览器打开网页时，浏览器会按照该HTML网页所链接的外部样式表显示其风格。【例33】链接式示例，如图36所示。图36链接式示例代码如下所示。

显示全部信息

书摘插画

显示全部信息

网页设计与制作下载

发布书评

相关图书推荐

PDF图书网 @ 2017