网页设计与网站建设案例课堂9787302423546
正版图书，可开发票，请放心购买。
￥ 48.66 6.2折 ￥ 79 全新
仅1件
广东广州
认证卖家担保交易快速发货售后保障
作者刘玉红，蒲娟
出版社清华大学出版社
ISBN9787302423546
出版时间2015-11
装帧平装
开本16开
定价79元
货号8667941
上书时间2024-12-22
- 最新上架
商品详情
- 品相描述：全新
- 商品描述
-
目录
目 录
第1篇 基础入门篇
第1章 建设入门――与
网页的基本概念3
1.1 认识网页和4
1.1.1 什么是网页4
1.1.2 什么是4
1.1.3 的种类和特点5
1.2 网页的相关概念6
1.2.1 因特网6
1.2.2 万维网6
1.2.3 浏览器7
1.2.4 HTML7
1.2.5 URL7
1.2.6 域名7
1.2.7 IP地址8
1.2.8 上传与8
1.2.9 电子邮件8
1.2.10 FTP9
1.3 跟我练练手9
1.3.1 练习目标9
1.3.2 上机练习9
1.4 高手甜点9
第2章 读懂网页密码――HTML
语言速成11
2.1 网页的HTML构成12
2.1.1 文档标签12
2.1.2 头部标签13
2.1.3 主体标签13
2.2 HTML常用标签14
2.2.1 标题标签～
14
2.2.2 段落标签
15
2.2.3 换行标签
16
2.2.4 链接标签
主编推荐
丛书以案例的形式讲解软件的内容，读者可以在实践中熟练掌握软件的使用方法。
每一个案例都精挑细选，同时配有全程语音讲解的视频文件，方便读者学习。
案例的选材广泛，涉及到软件应用的各个领域、各个行业，学习无死角。
“开发”系列附面学习无障碍：
CSS属性速查表
HTML标签速查表
网页布局案例赏析
精彩配色方案赏析
JavaScript实例
JavaScript函数速查手册
CSS DIV布局案例赏析
案例源文件与教学课件
精彩内容
媒体评论
第2章 读懂网页密码——HTML语言速成
HTML即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是一种应用非常广泛的网页格式，也是被用来显示Web页面的语言之一。可以说，一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名，可以使用任何能够生成TXT类型源文件的文本编辑器来编辑HTML文件。
本章要点(已掌握的在方框中打钩)
掌握网页的HTML结构。
掌握HTML常用的标签。
掌握制作日程表的步骤。
2.1 网页的HTML构成
在一个HTML文档中，必须包含<HTML></HTML>标签，并且放在一个HTML文档中的开始和结束位置，即每个文档以<HTML>开始，以</HTML>结束。<HTML></HTML>之间通常包含两个部分，分别是<HEAD></HEAD>和<BODY></BODY>。HEAD标签中包含HTML头部信息，如文档标题、样式定义等。BODY标签中包含文档主体部分，即网页内容。需要注意的是，HTML标签不区分大小写。
为了便于读者从整体上把握HTML文档结构，下面通过一个HTML页面来介绍其整体结构，示例代码如下。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
网页内容
</BODY>
</HTML>
从上面的代码可以看出，一个基本的HTML页面由以下几个部分构成。
(1)??<!DOCTYPE>声明必须位于HTML5文档中的第一行，也就是位于<HTML>标签之前。该标签告知浏览器文档所使用的HTML规范。<!DOCTYPE>声明不属于HTML标签，它是一条指令，告诉浏览器编写页面所用的标签的版本。
(2)??<HTML></HTML>说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。
(3)??<HEAD></HEAD>是HTML的头部标签，头部信息不显示在网页中，在此标签内可以保护其他标签，用于说明文件标题和整个文件的一些公用属性。可以通过<STYLE>标签定义CSS样式表，通过<SCRIPT>标签定义JavaScript脚本文件。
(4)??<TITLE></TITLE>是HEAD中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE，浏览器标题栏将显示页面的文件名。
(5)??<BODY></BODY>包含HTML页面的实际内容，显示在浏览器窗口的客户区中。例如，页面中的文字、图像、动画、超链接以及其他HTML相关内容都定义在BODY标签中。
2.1.1 文档标签
基本HTML的页面以<HTML>标签开始，以</HTML>标签结束。HTML文档中的所有内容都应该在这两个标签之间。空结构在IE中的显示是空白的。
<HTML>标签的语法格式如下。
<HTML>
…
…
…
</HTML>
2.1.2 头部标签
头部标签(<HEAD>…</HEAD>)包含文档的标题信息，如标题、关键字、说明以及样式等。除了<TITLE>标题外，位于头部的内容一般不会直接显示在浏览器中，而是通过其他方式显示。
1. 内容
头部标签中可以嵌套多个标签，如<TITLE>、<BASE>、<ISINDEX>、<SCRIPT>等，也可以添加任意数量的属性，如<SCRIPT>、<STYLE>、<META>或<OBJECT>。除了<TITLE>外，其他嵌入标签可以使用多个。
2. 位置
在所有的HTML文档中，头部标签都不可或缺，但结束标签可省略。在各个HTML版本的文档中，头部标签后一直紧跟<BODY>标签，但在框架设置文档中，其后跟的是<FRAMESET>标签。
3. 属性
<HEAD>标签的属性PROFILE给出了元数据描写的位置，说明其中的<META>和<LIND>元素的特性，该属性的形式没有严格的格式规定。
2.1.3 主体标签
主体标签(<BODY>…</BODY>)包含文档的内容，用若干个属性来规定文档中显示的背景和颜色。
主体标签可能用到的属性如下。
* BACKGROUND=URL：文档的背景图像，URL指图像文件的路径。
* BGCOLOR=Color：文档的背景色。
* TEXT=Color：文本颜色。
* LINK=Color：链接颜色。
* VLINK=Color：已访问的链接颜色。
* ALINK=Color：被选中的链接颜色。
* ONLOAD=Script：文档已被加载。
* ONUNLOAD=Script：文档已退出。
为该标签添加属性的代码格式如下。
<BODY BACKGROUND="URL " BGCOLOR="Color ">
…
</BODY>
2.2 HTML常用标签
HTML文档是由标签组成的文档，要熟练掌握HTML文档的编写，首先就是了解HTML的常用标签。
2.2.1 标题标签<h1>～<h6>
在HTML文档中，文本的结构除了以行和段出现之外，还可以作为标题存在。通常一篇文档最基本的结构就是由若干不同级别的标题和正文组成。
HTML文档中包含有各种级别的标题，各种级别的标题由<h1>～<h6>元素来定义，<h1>～<h6>标题标签中的字母h是英文headline(标题行)的简称。其中<h1>代表1级标题，级别最高，文字也最大，其他标题元素依次递减，<h6>级别最低。
下面给出一个实例，来具体介绍标题标签的使用方法。
【例2.1】标题标签的使用(实例文件：ch02\2.1.html)。
<html>
<head>
<title>文本段换行</title>
</head>
<body>
<h1>这里是1级标题</h1>
<h2>这里是2级标题</h2>
<h3>这里是3级标题</h3>
<h4>这里是4级标题</h4>
<h5>这里是5级标题</h5>
<h6>这里是6级标题</h6>
</body>
</html>
将上述代码输入记事本，并以后缀名为.html的格式保存，然后在IE中预览效果，如图2-1所示。
图2-1 标题标签的使用
作为标题，它们的重要性是有区别的，其中<h1>标题的重要性最高，<h6>标题的重要性最低。2.2.2 段落标签<p>
段落标签<p>用来定义网页中的一段文本，文本在一个段落中会自动换行。段落标签是双标签，即<p></p>，在<p>开始标签和</p>结束标签之间的内容形成一个段落。如果省略结束标签，从<p>标签开始，直到遇见下一个段落标签之前的文本，都在一个段落内。段落标签中的p是英文单词paragraph(段落)的首字母。
下面给出一个实例，来具体介绍段落标签的使用方法。
【例2.2】段落标签的使用(实例文件：ch02\2.2.html)。
<html>
<head>
<title>段落标签的使用</title>
</head>
<body>
<p>白雪公主与七个小矮人!</p>
<p>很久以前，白雪公主的后母——王后美貌盖世，但魔镜却告诉她世上唯有白雪公主最漂亮，王后怒火中烧，派武士把她押送到森林准备谋害，武士同情白雪公主，让她逃往森林深处。
</p>
<p>
小动物们用善良的心抚慰她，鸟兽们还把她领到一间小屋中，收拾完房间后她进入了梦乡。房子的主人是在外边开矿的七个小矮人，他们听了白雪公主的诉说后把她留在家中。
</p>
<p>
王后得知白雪公主未死，便用魔镜把自己变成一个老太婆，来到密林深处，哄骗白雪公主吃下一只有毒的苹果，使公主昏死过去。鸟儿识破了王后的伪装，飞到矿山报告白雪公主的不幸。七个小矮人火速赶回，王后仓皇逃跑，在狂风暴雨中跌下山崖摔死。
</p>
<p>
七个小矮人悲痛万分，把白雪公主安放在一只水晶棺里日日夜夜守护着她。邻国的王子闻讯，骑着白马赶来，爱情之吻使白雪公主死而复生。然后王子带着白雪公主骑上白马，告别了七个小矮人和森林中的动物，到王子的宫殿中开始了幸福的生活。
</p>
</body>
</html>
将上述代码输入记事本，并以后缀名为.html的格式保存，然后在IE中预览效果，如图2-2所示，可以看出<p>标签将文本分成标题与4个段落。
图2-2 段落标签的使用
2.2.3 换行标签<br>
使用换行标签<br>可以对文字强制换行，该标签是一个单标签，它没有结束标签，是英文单词break的缩写。一个<br>标签代表一个换行，连续的多个标签可以实现多次换行。使用换行标签时，在需要换行的位置添加<br>标签即可。
下面给出一个实例，来具体介绍换行标签的使用方法。
【例2.3】换行标签的使用(实例文件：ch02\2.3.html)。
<html>
<head>
<title>文本段换行</title>
</head>
<body>
清明<br/>
清明时节雨纷纷<br/>
路上行人欲断魂<br/>
借问酒家何处有<br/>
牧童遥指杏花村
</body>
</html>
将上述代码输入记事本，并以后缀名为.html的格式保存，然后在IE中预览效果，如图2-3所示。
图2-3 换行标签的使用
2.2.4 链接标签<a>
链接标签<a>是网页中最为常用的标签，主要用于把页面中的文本或图片链接到其他的页面、文本或图片。建立链接有两个最重要的要素，即设置为链接的网页元素和链接指向的目标地址。基本的链接结构如下。
<a href=URL>网页元素</a>
1. 文本和图片链接
设置链接的网页元素通常使用文本和图片。文本链接和图片链接是通过<a></a>标签实现的，将文本或图片放在<a>开始标签和</a>结束标签之间即可建立文本或图片链接。
【例2.4】设置文本和图片链接(实例文件：ch02\2.4.html)。
打开记事本文件，在其中输入如下HTML代码。
<html>
<head>
<title>文本和图片链接</title>
</head>
<body>
<a href="a.html"><img src="images/Logo.gif"></a>
<a href="b.html">公司简介</a>
</body>
</html>
代码输入完成，将其保存为“链接.html”文件，然后双击该文件，就可以在浏览器中查看应用链接标签后的效果，如图2-4所示。
2. 电子邮件链接
电子邮件链接用来链接一个电子邮件的地址。下面是电子邮件链接可以使用的写法。
mailto:邮件地址
【例2.5】设置电子邮件链接(实例文件：ch02\2.5.html)。
打开记事本文件，在其中输入如下HTML代码。
<html>
<head>
<title>电子邮件链接</title>
</head>
<body>
使用电子邮件链接：<a href="mailto:liule2012@163.com">链接</a>
</body>
</html>
代码输入完成，将其保存为“电子邮件链接.html”文件，然后双击该文件，就可以在浏览器中查看应用电子邮件链接后的效果。当单击含有链接的文本时，会弹出邮件发送窗口，如图2-5所示。
图2-4 文本与图片链接 图2-5 电子邮件链接
2.2.5 列表标签<ul>
文字列表可以有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷地获得相应信息。HTML中的文字列表如同文字编辑软件Word中的项目符号和自动编号。
1. 建立无序列表
无序列表相当于Word中的项目符号，无序列表的项目排列没有顺序，只以符号作为分项标识。无序列表使用一对标签<ul></ul>，其中每一个列表项使用<li></li>，其结构如下。
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
在无序列表结构中，使用<ul></ul>标签表示这一个无序列表的开始和结束，<li>则表示一个列表项的开始。在一个无序列表中可以包含多个列表项，并且<li>可以省略结束标签。
下面给出的实例使用无序列表实现文本的排列显示。
【例2.6】建立无序列表(实例文件：ch02\2.6.html)。
打开记事本文件，在其中输入如下HTML代码。
<html>
<head>
<title>嵌套无序列表的使用</title>
</head>
<body>
<h1>网站建设流程</h1>
<ul>
<li>项目需求</li>
<li>系统分析
<ul>
<li>网站的定位</li>
<li>内容收集</li>
<li>栏目规划</li>
<li>网站目录结构设计</li>
<li>网站标志设计</li>
<li>网站风格设计</li>
<li>网站导航系统设计</li>
</ul>
</li>
<li>伪网页草图
<ul>
<li>制作网页草图</li>
<li>将草图转换为网页</li>
</ul>
</li>
<li>站点建设</li>
<li>网页布局</li>
<li>
相关推荐
— 没有更多了 —
以下为对购买帮助不大的评价