html完整教程3
HTML教程(最全的图文并茂教程)
小结
请说出实际开发常用的4种块状结构是什么？ 1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单
行级标签—图像标签
提供搜索关键字和内容描述 信息，方便搜索引擎的搜索
HTML页面中的块和行
HTML标签分类（方便后续的布局设计）： 块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计
行级：包 括文字、 图片等
块级： 块内包含 多行
块级标签
根据使用场合，块级标签又细分为：
ቤተ መጻሕፍቲ ባይዱ
W3C
制定统一的web标准
Netscape 的图标
W3C提倡的Web结构
不规范的示例
<font size="7">一级主题</Font><br/> 一级主题阐述文字 <br /><Br /> <font size="5">二级主题</font><br /> 二级主题相关文字 <P>项目列表1 <p>项目列表2 <p>项目列表3 存在问题： 1、内容和表现没分离，后期很难 维护和修改 2、HTML代码不能表示页面的内 容语义，不利于搜索引擎搜索
W3C提倡的Web结构
规范的示例
<h1>一级主题1</h1> <p>一级主题阐述文字</p> <h2>二级主题</h2> <p>二级主题阐述文字</p> <ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> </ul>
Web前端开发案例教程(HTML5 CSS3)第2版 任务8 制作学生信息注册表单
8.2.3 表单控件
在表用单户中登通录常表包单含中一包 括个两或个多文个本表框单和控两件个。 命令按钮控件。
8.2.3 பைடு நூலகம்单控件
<input>控件
表单中最为核心的是<input>标记，使用<input>标记可以定义很多 控件，譬如，文本框、单选按钮、复选框、提交按钮、重置按钮等等。
格式：<input type="控件类型" />
8.2.2 表单标记
4. autocomplete属性
用于指定表单是否有自动完成功能。所谓“自动完成”，是指将表单 控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一 个下拉列表中，以实现自动完成输入。该属性的取值有on和off，当为on 时，表示有自动完成功能，否则没有。该属性是HTML5的新增属性。
8.2.1 认识表单
• 表单是允许浏览者进行输入的区域，可以使用表单从客户端收集 信息。
• 浏览者在表单中输入信息，然后将这些信息提交给网站服务器， 服务器中的应用程序会对这些信息进行处理并响应，这样就完成 了浏览者和网站服务器之间的交互。
• HTML5新增了很多表单控件，完善了表单的功能，新特性提供 了更好的用户体验和输入控制。
8.2.3 表单控件
<input>控件
• <input />标记为单标记，type属性为其最基本的属性，其取值 有多种，用于指定不同的控件类型。
8.2.3 表单控件
<input>控件
需要注意的是，在HTML5提供了 不同输入类型的输入框，比如 email、url等在提交时，自动验 证输入的内容是否符合要求，不 符合要求时会有错误提示。
HTML教程 03第三章
第三章段落与文字处理文本是所有语言需要具有的最基本功能，HTML更是如此。
本章讲解在HTML中如何编排段落和修饰文字。
3.1段落标记3.1.1<p>标记文本分段一般以<p>开头、以</p>结尾。
段落标记<p>是HTML中最常用的标记，虽然</p>可以省略，因为下一个<p>的开始就意味着上一个<P>的结束，但最好还是遵循规范，正规书写。
<P>标记的常用语法格式为：<p align = 对齐方式>……</p>其中，align用来定义段落的对齐方式，它可以取以下值：●center：居中对齐。
●left：靠左对齐，是默认值。
●right：靠右对齐。
【例1】<p>的用法。
<html><head><title>itsway -- 段落与文字</title></head><body><p align = center>劝学</p><p align = right>作者：颜真卿</p><p>三更灯火五更鸡，正是男儿立志时。
</p><p>黑发不知勤学早，白首方悔读书迟。
</p></body></html>显示结果如下图所示。
可以看出，标题“劝学”在页面中居中对齐，“作者：颜真卿”靠右对齐，而诗的主体则靠页面左边对齐。
3.1.2 <br>、<nobr>、<pre>和<center>标记段落与段落之间一般会空出一行距离。
如果不想分段而只想分行，可以使用<br>标记，常用格式为： <br>一般来说，每当浏览器窗口被缩小时，浏览器会自动将段落右边的文字转折至下一行。
HTML教程(42页)免费下载.pdf
HTML教程课程内容第1章HTML简介 (3)1.1 什么是HTML (3)1.2 为什么学习HTML (3)1.3 HTML的发展史 (4)第2章第一个HTML文档 (4)2.1 HTML结构 (4)2.2 我的第一个网页 (5)第3章HTML元素 (5)3.1 HTML标签 (5)3.2 标签属性 (6)练习： (6)第4章使用Dreamweaver Mx开发网页 (7)第5章HTML基本标签 (7)5.1 段落 (7)5.2 标题元素 (8)5.3 换行 (8)5.4 水平线 (8)5.5 HTML中的注释 (9)5.6 嵌入元素 (9)练习： (9)第6章HTML格式化标签 (10)6.1 HTML的<font>标签 (10)6.2 格式化文字： (11)6.3 删除和插入文字： (12)6.4 预格式化文本 (12)6.5 其他参考： (13)6.5.1 “计算机输出”标签： (13)6.5.2 地址： (14)6.5.3 缩写和首字母缩略法： (14)6.5.4 文字方向： (14)6.5.5 块引用： (15)第7章HTML链接 (15)7.1 连接 (15)7.2 锚标签和href属性 (16)7.3 邮件链接： (17)7.4 target属性 (18)练习： (18)第8章HTML表格 (18) 8.1表格头使用<th>标签指定.................................................................................19 8.2有标题的表格：.................................................................................................19 8.3美化表格.............................................................................................................20 8.4frame 属性...........................................................................................................20 练习：.............................................................................................................................23 第9章 HTML 列表.. (23)9.1无序列表.............................................................................................................23 9.2有序列表.............................................................................................................24 9.3 自定义列表.........................................................................................................24 练习：.............................................................................................................................25 第10章HTML 图像.................................................................................................................25 10.1alt 属性.................................................................................................................25 10.2对齐图像：.....................................................................................................25 10.3图像导航：.....................................................................................................26 10.4图像地图：.....................................................................................................27 练习：.............................................................................................................................27 第11章颜色表示.....................................................................................................................27 第12章HTML 特殊字符/实体................................................................................................28 第13章HTML 表单.................................................................................................................29 第14章 HTML 框架.................................................................................................................32 14.1垂直分栏：.....................................................................................................32 14.2水平分栏：.....................................................................................................32 14.3混合框架：.....................................................................................................33 14.4导航框架.........................................................................................................33 14.5<noframes>标签：.............................................................................................33 练习：.............................................................................................................................34 14.6内嵌框架.........................................................................................................34 第15章HTML 样式................................................................................................................34 15.1内部样式表.....................................................................................................35 15.2行内样式.........................................................................................................35 15.3连接外部样式表.............................................................................................35 15.4 样式标签.........................................................................................................36 第16章HTML 文件头............................................................................................................36 例1：给所有连接添加一个目标..................................................................................36 例2：背景音乐..............................................................................................................37 16.1HTML Meta........................................................................................................37 16.1.1name 属性........................................................................................................37 16.1.2http-equiv 属性................................................................................................38 第17章HTML 脚本................................................................................................................40 第18章HTML4.0 事件属性..................................................................................................41 第19章 HTML 属性. (42)Created by YYM Page 2 of 42标准资料收藏家 易启标准网免费提供十万标准书籍资料下载参考信息//w3/相关技术手册/imagesnew/software/html/index.html微软提供的在线帮助/library/chs/default.asp?url=/library/CHS/vbcon/html/vblrf HTMLDivControls.asp第1章 HTML简介1.1什么是HTML9HTML文件是一个包含标记的文本文件。
HTML代码简介(html入门必看)
示例
<html> <head><title>字体颜色 font color</title></head> <body> <p>这段文字用的是缺省的字体颜色。</p> <p><font color="#FF0000">这段文字的字体颜色 为红色。</font></p> </body> </html>
本文由露之珠网络收藏夹提供
HTML注释
在HTML文件里，你可以写代码注释，解释 说明你的代码，这样有助于你和他人日后 能够更好地理解你的代码。 注释可以写在<!--和-->之间。浏览器是忽略 注释的，你不会在HTML正文中看到你的注 释。 <!-- This is a comment -->
本文由露之珠网络收藏夹提供
HTML常用文本格式
HTML定义了一些文本格式的Tag，比如利 用Tag，可以将字体变成粗体或者斜体。从 下面的示例，你可以了解各种文本格式Tag 如何改变HTML文本的显示。 常用文本格式Tag
<b></b>粗体bold
<i></i>斜体 <U></U>下划线
HTML代码简介
主要内容
HTML的基本结构 HTML语言的语法 HTML语言的常用标识网站设计基础知识
本文由露之珠网络收藏夹提供
HTML 文档的结构
基本结构：
HTML 部分 文档头部分 正文部分
<HTML> <HEAD> <TITLE>欢迎进入 HTML 世界</TITLE> </HEAD> <BODY> <P>这会是一种很有趣的体验</P> </BODY> </HTML>
网页制作案例教程 清华大学出版社 教学课件第3章 HTML基础
文本字体、大小、颜色属性,主要是通过在<font>标签 中设置face、size、color的值，设置文本的字体、大 小和颜色。
案例3-13文本字体属性应用
3、<hr>标签的属性
在<hr>标签中，通过设置width和size属性，用来控制 水平线的长度和宽度，默认情况下，水平线的宽度是 100%，1像素的高度，在设置宽度和高度时可以是确 定的像素值也可以是占窗口的百分比。 color属性可以设置水平线的颜色，颜色表示和字体 颜色的表示相同.
表格标签、属性、单元格以及表格嵌套应用 框架基本结构、分割方式、属性及链接、浮动 窗口
本章学习导航
HTML标签的学习，是初学者掌握网页制作的 入门技术，也是后续学习创建静态、动态网站 必备基础知识，了解JavaScript的基本标签、 属性运用及作用，并使用它们制作精美的网页 ，是初学者掌握本章内容的基本要求。 本章内容在全书知识结构中所处位置如图所示
3.1.2 HTML基本结构及书写规范
1、HTML基本结构
在HTML中，由<>和</>括起来的文本叫做“标签”，<> 表示开始标签；</>表示结束标签，开始标签和结束标签配 对使用，它们之间的部分是该标签的作用域，比如 <html></html>等。HTML就是以这些标签来控制内容的显 示方式。
8）注释标签 在HTML文档中用来表示注释的标签为<!-- 注释内容-->
案例3-10 注释标签应用 9）水平分割线标签hr <hr>标签是水平线标签，用于段落和段落之间的分割， 使文档结构清晰明了，使文字的编排更整齐。加入一 个<hr>标签，就加入了一条默认的水平线。
html网页设计教程(推荐)
<P>标签的属性
<P Align= 参数> 其中,Align是<p>标签的属性，参数的取值为：
Left 左对齐
Center 居中对齐 Right 右对齐.
居中对齐标签center
格式： <center>……</center>
水平分隔线标签<hr>
<hr>标签是单独使用的标签，是水平线标签，用于段落与段落之间 的分隔，使文档结构清晰明了，使文字的编排更整齐。
在记事本里输入html文件代码 保存成*.html或*.htm为扩展名的文件。 如果要修改编辑，在菜单里打开“查看—源文件”。修改完后再保存。
Meta标签
Meta:about,关于。关于文档的概要信息。 比如说作者，关键字，内容提要，编码等信息。 比如gb3212是编码信息，简体中文 Big5:繁体中文 Author, password,
建立超链接
本节要点 关于超链接 链接标记 内部链接的建立 书签链接的建立 外部链接的建立
关于超链接
HTML文件中最重要的应用之一就是超链接，超 链接（hyper link)是一个网站的灵魂，web上的 网页是互相链接的，单击被称为超链接的文本或 图形就可以链接到其它页面。
如何创建一个HTML文档
HTML只是一个纯文本文件。 创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个 WEB浏览器。 编辑：HTML编辑器是用于生成和保存HTML文档的应用程序：记事 本、word、Frontpage、Dreamweaver 浏览：WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB 资源的客户端程序。
w3cHTML(教程完整版)
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签 元素内容 结束标签
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
亲自试一试
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题很重要
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
实例
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
亲自试一试
提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
HTML5+CSS3网页设计与制作实用教程单元3 表格应用与制作购物车页面
进行美化。
网页030101.html. 的浏览效果如图3-2 所示。
图3-2 网页030101.html. 的浏览效果
【任务3-1-1】在网页中插入与设置表格
任 务 实 施
1．创建网页文档且保存
在站点“易购网”中创建文件夹“03 表格应用与制作购物车页面”，在该文件夹中创 建文件夹“0301”，并在文件夹“0301”中创建子文件夹“CSS”和“image”，将所需要的图 片文件拷贝到“image”文件夹中。 在【文件】面板中，用右键单击文件夹“0301”， 在弹出的快捷菜单中选择菜单命令【新建文件】，如图
3-6 所示。
图3-6
表格标题行的属性设置
【任务3-1-1】在网页中插入与设置表格
5．设置表格第2行至第9行的行高
将鼠标指针指向表格的第2 行的左边线，当鼠标指针变成一个黑色箭头形状时，按住鼠标左键
拖动鼠标到第9 行，选中第2 行至第9 行。然后在表格【属性】面板的“高”文本框中输入“25”。
6．设置表格各列的对齐方式 将鼠标指针指向表格的第1 列的上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标
图3-5 9 行4 列表格的属性设置
【任务3-1-1】在网页中插入与设置表格
4．设置表格第1行的属性 （1）选择表格行
将鼠标指针指向表格的第1 行的左边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标
左键即可选中该行。 （2）设置表格行的属性 设置表格第1 行的水平对齐方式为“居中对齐”，垂直对齐方式为“居中”，在“高”文 本框中输入“30”，选中“标题”复选框，其他属性保持其默认值，第1 行对应的属性设置如图
表格便插入到网页中。 （6）保存网页中所插入的表格。
图3-4
(完整版)《HTML5+CSS3网站设计基础教程》_教学大纲(可编辑修改word版)
《HTML5+CSS3 网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011学分：5 学分学时：76 学时（其中：讲课学时：47 学时上机学时：26 学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、 JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求第一章初识 HTML5第二章HTML5 页面元素及属性第三章CSS3 入门第四章CSS3 选择器第五章CSS 盒子模型第六章浮动与定位第七章表单的应用第八章多媒体技术第九章CSS3 高级应用第十章实战开发—制作电商网站首页面…………………………………………………………………五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
HTML表格边框制作教程
HTML表格边框制作教程作者：灵子表格以<table>和</table>分别作起始标识符。
其中，<table>里有一些必要的参数，为容易理解起见，在这里只介绍本节用到的参数，其他的参数今后将陆续提到。
border参数定义表格边框的粗细，记为border=数值，数值取0，1，2，3等整数。
width是我们要定义的参数，它规定表格的宽度，数值通常用100%，记作width=100%，值得注意的是，如果不设置width值，表格将根据单元格里的内容自动定义宽度。
height 参数规范表格的高度，通常可以不设置，而是让内容的多少让系统自行设定。
<table>和</table>之下，还需要由两个成对的标识符号定义表格的行、列，它们分别是<tr>……</tr>，<td>……</td>，tr标识符定义表中的行，td标识符定义数据表元，即每行中的每一列。
<td>……</td>要包含在<tr>……</tr>里面。
此外，论坛要求在<table>下有<tbody>（表体），它也是成对出现，包含<tr>...</tr>。
一张完整的表格全部语法如下：<table border=2 width=80%><tbody><tr><td>Hello Table</td></tr></tbody></table>效果如下：Hello Table表格边框的修饰上一讲我们讲到border属性，border即为边框，除了有粗细的数值定义以外，还有其他的属性哦。
我们先来看看亮边框的颜色和暗边框的颜色设置。
亮边框记作bordercolorlight，暗边框记作bordercolordark。
HTML5CSS3JAVASCRIPT三合一教程实战课件PPT模板
html5css3javascript三 合一教程实战
演讲人
2 0 2 x - 11 - 11
01 第1章html5和css3
第1章html5和css3
1-1开发工具简介 针对开发工具的讲
解
1-3表格详解表格 详解
1-5综合案例讲解 第一次课综合案例
讲解第一次课
A
C
E
1-2表格基础表格
1-4图像标签基础
1-6图像路径讲解
基础
图像标签基础
图像路径解
B
D
F
第1章html5和css3
1-9css基础之样式范围 css基础之样式范围
1-8简易二级菜单简易 二级菜单
1-7综合案例第二次课 综合案例第二次课
1-10css进阶之选择器的 分类css进阶之选择器的 分类
1-11css之颜色和字体的 讲解css之颜色和字体的 讲解
位
1-17iframe的讲解 iframe的讲解
1-18背景图像的讲解 背景图像的讲解
第1章html5和 css3
1-19块状元素和行内元素及布局 块状元素和行内元素及布局 1-20多彩相册案例第一次课多彩 相册案例第一次课
感谢聆听
1-12css之选择器分类进 阶精讲css之选择器分类 进阶精讲
第1章html5和css3
1-13css之选择器分类 进阶精讲二css之选择
器分类进阶精讲二
1-14display和float 的使用display和 float的使用
1-15盒子模型盒子模 型
1-16相对定位和很定 位相对定位和绝对定
HTML语言教程(完整版)
| |
<BR>
|
<HR>
<FONT SIZE= 7 COLOR= red>
|
这是我第一次做主页
|
</FONT>|Βιβλιοθήκη </CENTER>
|
</BODY> ---------------------------------------
HTML 教程
第一章 HTML概述与基本结构 .....................................................................................................2 一、HTML的概述....................................................................................................................2 二、 HTML的基本结构：......................................................................................................2 三、 HTML的标签与属性: .....................................................................................................3 第二章 HTML主体标签及属性、颜色的设定......................................................................4 一、 html的主体标签<body> ...........................................................................................4 二、 颜色的设定.....................................................................................................................5
html教程
水平线的HTML标记
水平线元素 语法格式： <hr align=# width=# size=# color=# noshade> 属性：noshade 无阴影效果
作业1
设计一网页，要求，
（1）网页设有标题“温州大学05教技班级主页” ；
（2）页面背景为淡蓝色，页面上边距为0 （3）页面内容：
•页面头部有一移动字幕“欢迎光临05教技班级网站”，要求居 中，字幕宽300象素，高100象素，字每次移动距离为20象素，移 动时间间隔为100毫秒，背景颜色为蓝色
HTML标记属性
1.4 HTML标签属性
许多单标记和双标记的始标记内可以包含一些属性， 其语 法是：< 标签名 属性1 属性2 属性3 … > </标签名>
各属性之间无先后次序，属性也可省略（即取默认值）。 如： <HR SIZE=3 ALIGN=LEFT WIDTH="75%“ color="#CC6600">
背景色
背景图案 一般文本颜色
link
alink vlink leftmargin topmargin 例1 例2
链接文字颜色
活动链接文字颜色 已访问链接文字颜色 页面左侧的留白距离 页面顶部的留白距离
Body部分的文本
特殊字符的插入
【插入】【HTML】 【特殊字符】
插入面板选择“文本”，在该面板中可选择要插入的字符 快捷键
图片对齐到目前文字行绝对中间
AbsBottom 图片对齐到目前文字行绝对底部
图像的插入
超文本支持的图象格式一般有：png、GIF、JPEG三种。
声音的插入
背景声音 前景声音
html网页制作教程
查看源代码
…… <BODY> <IMG src="images/adv_2.jpg" alt="明星演唱会开幕 明星演唱会开幕" 明星演唱会开幕 width="300"height="150"> </BODY> ……
鼠标移到图像上， 鼠标移到图像上，出 现的提示性文字
图像标签
图像与文本的对齐方式
<IMG align="middle">
图像与文本居中对 齐,还可以取 还可以取 top, bottom 值
查看源代码
…. 图像和文本居 <BODY> 中对齐 <A href="star.html"> <IMG align="middle" src="images/adv_2.jpg" width="180" height="95" border="0" /> </A>请点击广告进入明星专区 请点击广告进入明星专区 </BODY> ……
.Net/OOP /Three Tier
Java OOP JSP
JavaScript Project2: B/S
Ajax/Web Service NTC
JSP/Servlet/JavaBean/Web Service Struts/Hibernate/Spring/Ajax 行业手册
分析需求
功能需求记录在客户需求说明书中 功能需求记录在客户需求说明书中
需求分析阶段
文档介绍
HTML5+CSS3 Web前端设计基础教程 第3版(第8章)
图8-2 标尺
图8-3 拖拽出参考线
8.1 Photoshop在Web前端中的常见操作
3．隐藏/显示图层
隐藏/显示 图层标志
锁定
图8-4 隐藏/显示图层
8.1 Photoshop在Web前端中的常见操作
4．用吸管工具拾取颜色
图8-5 拾取颜色
图8-6 查看颜色值
8.2.2 列表页的实现 2．右侧“新闻摘要”区域的实现 3．“翻页按钮”的实现
图8-23 “翻页按钮”中间过程预览效果
8.2 页面布局规划与实现
8.2.3 内容页的实现
推荐链接
图8-25 内容页局部效果图
文章的标题
配图 段文字
谢谢观看！
8.2 页面布局规划与实现
5．“典型案例”板块的实现
图8-16 “案例展示”区域结构布局示意图
6．“新闻列表”板块的实现 7．“版权”板块的实现
8.2 页面布局规划与实现
8.2.2 列表页的实现 1．列表页中部区域的规划与左侧“纵向导航”的实现
图8-20 列表页中部区域初步分析布局示意
8.2 页面布局规划与实现
8.1 Photoshop在Web前端中的常见操作
8.1.2 切片并输出
图8-7 创建切片
图8-8 “切片选项”对话框
8.2 页面布局规划与实现
图8-10 站点首页效果图
图8-11 思考分析示意图
8.2 页面布局规划与实现
8.2.1 首页的实现
1．各项准备工作 2．首页头部区域的实现 3．bannner区域的实现 4．“核心特色”板块的实现
第8章 PC端典型页面的设计与实现
本章主要从工作过程出发，依托PC端典型的页面版式，向 读者介绍Photoshop在Web前端环境下常见的操作，以及 整个Web页面的实现过程。
《HTML入门教程》第3讲：HTML文件的头部标记
第 3 讲：HTML 文件的头部标记 head一、 HTML 头部标记head 标签用于定义文档的头部，它是所有头部元素的容器。
head 标签内部的 元素可以引用脚本、样式表、提供元信息等。
常用的头部标记内容 标记 <base> <basefont> <title> <isindex> <meta> 描述 当前文档的 URL 全称（基底网址） 设置基准的文字字体、字号和颜色 设定显示在浏览器左上方的标题内容 表明该文档是一个可用于检索的网关脚本，由服务器自动建立 有关文档本身的元信息，如用于查询的关键字、获取该文档的有 效期等 <style> <link> <script> 设定 CSS 层叠样式表的内容 设定外部文件的链接 设定页面中程序脚本的内容 HTML 文档的头部描述了文档的各种属性和信息 绝大多数 HTML 文档头部包含的数据都不会真正作为内容显示给读者 HTML 头元素以<head>为开始标记，以</head>为结束标记 <head> 标签应放在文档的开始处， 紧跟在 <html> 后面， 并处于 <body> 标签或 <frameset> 标签之前 <title> 定义文档的标题，它是 head 部分中唯一必需的元素二、 一个简单实例一个简单的 HTML 文档，带有最基本的必需的元素：<html> <head> <title>欢迎访问老王爷编程网</title> </head> <body> 老王爷编程网致力于编程技术教程的开发，希望我们的努力，对于的学习和工作提供 帮助。
</body> </html>运行效果：。
HTML5+CSS3 Web前端设计基础教程 第3版(第5章)
relative 相对，元素虽然偏移某个距离，但仍然占据原来的空间
absolute 绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素
5.2 CSS 定位
5.2.1 静态定位和固定定位 1．静态定位（static） 2．固定定位（fixed）
图5-10 鼠标为滚动时左侧导航固定
图5-11 页面滚动后左侧导航仍然固定
图5-5 父级容器宽度不够的情况
图5-6 浮动的容器相互拥挤的情况
5.1 浮动与清除浮动
5.1.2 清除浮动的三种方法
1．方法一：额外增加应用“clear: both;”规则的空容器 在浮动元素后额外增加一个空容器，比如“<div class="clear"></div>”，然后在CSS中 赋予.clear{clear:both;}属性即可清理浮动。
2．方法二：使用“overflow: ”规则清除浮动 向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添 加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3．方法三：使用:after伪元素清除浮动 :after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添 加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一 个看不见的容器以清理浮动。
5.2 CSS 定位
CSS有关定位的属性包括position、z-index（层叠顺序）、top、 left、right、bottom和clip。
表5-1 position属性的取值及其含义
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML 图像通过使用 HTML，可以在文档中显示图像。
实例 插入图像 如何在网页中显示图像 一幅图像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> 一幅动画图像： <img src="/i/eg_cute.gif" width="50" height="50" /> 请注意，插入动画图像的语法与插入普通图像的语法没有区别。
从不同的位置插入图片 将其他文件夹或服务器的图片显示到网页中。
来自另一个文件夹的图像： <img src="/i/ct_netscape.jpg" /> 来自 的图像： <img src="/i/w3school_logo_white.gif" /> 背景图片 向 HTML 页面添加背景图片 <body background="/i/eg_background.jpg"> 排列图片 在文字中排列图像。
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> <p>请注意，bottom 对齐方式是默认的对齐方式。
</p> 浮动图像 使图片浮动至段落的左边或右边。
<img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。
图像的 align 属性设置为 "left"。
图像将浮动到文本的左侧。
<img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。
图像的 align 属性设置为 "right"。
图像将浮动到文本的右侧。
调整图像尺寸 将图片调整到不同的尺寸。
<img src="/i/eg_mouse.jpg" width="200" height="200"> <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。
</p> 为图片显示替换文本 为图片显示替换文本。
在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。
为页面上的图像都加上替换文本属性是个好习惯。
<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。
在这里，"alt" 的文本是“向左转” 。
</p> <p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。
</p> <img src="/i/eg_goleft.gif" alt="向左转" /> <p>如果无法显示图像，将显示 "alt" 属性中的文本：</p> <img src="/i/eg_goleft123.gif" alt="向左转" /> 制作图像链接 将图像作为一个链接使用。
<p> 您也可以把图像作为链接来使用： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> 创建图像映射 创建带有可供点击区域的图像地图。
其中的每个区域都是一个超级链接。
<html> <body> <p>请点击图像上的星球，把它们放大。
</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260"href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性 （根据浏览器） ，所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
</p> </body> </html> 显示结果： 请点击图像上的星球，把它们放大。
注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览 器） ，所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
把图像转换为图像映射 显示如何把一幅普通的图像设置为图像映射。
<a href="/example/html/html_ismap.html"> <img src="/i/eg_planets.jpg" ismap /> </a> 图像标签（<img>）和源属性（Src） 在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像， 你需要使用源属性 （src） 。
src 指 "source"。
源属性的值是图像的 URL 地址。
定义图像的语法是： <img src="url" /> URL 指存储图像的位置。
如果名为 "boat.gif" 的图像位于 的 images 目录中，那么其 URL 为 /images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。
如果你将图像标签置于两个段落之间， 那 么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
替换文本属性（Alt）alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat"> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
此时，浏览器将显示这 个替代性的文本而不是图像。
为页面上的图像都加上替换文本属性是个好习惯， 这样有助于 更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
基本的注意事项 - 有用的提示： 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。
加载图片是需要时间的，所以我们的建议是：慎用图片。
图像标签 标签 <img> <map> <area> 描述 定义图像。
定义图像地图。
定义图像地图中的可点击区域。
HTML 表格表格表格由 <table> 标签来定义。
每个表格均有若干行 （由 <tr> 标签定义） ， 每行被分割为若干单元格 （由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文 本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>在浏览器显示如下：row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格和边框属性如果不定义边框属性，表格将不显示边框。