你的位置:首页 > 网页设计

[网页设计]使用HTML 和CSS 开发商业站点




第一章HTML 基础
1.html 的基本结构?
解析:
2.HTML 全称
Hyper Text Markup Language(超文本标记语言)
扩展3.高级记事本
Ue(UltraEdit)
nodepad++
Editplus
快捷键用熟一个即可。
4.编写html 文档的注意点
01.所有标签字母均小写。
02.有开始就要有闭合标签
03.每个层次的标签有一定程度的缩进。
解析:如果发现body 内书写了内容,用浏览器打开后发现没有内容,那么
就需要检查下title 标签有没有闭合。
5.三种文档类型
严格类型,过渡类型,框架类型
6.编码方式
gb2312
Gbk
Gb2312 和gbk 的区别
GB2312 是中国规定的汉字编码,也可以说是简体中文的字符集编码;GBK 是GB2312 的
扩展,除了兼容GB2312 外,它还能显示繁体中文,还有日文的假名
utf-8:全球通用编码
用在网页上可以同一页面显示中文简体繁体及其它语言(如英文,日文,韩文)。
7.W3C:组织
解析:是一个组织,专门用来给各个浏览器厂商等指定规范的。
8.标签
01.h 标签:从h1 到h6 字体逐渐减小。
效果:自身加粗,并且可以控制字号。
02.p 标签:和其他的内容行之间有一个空行。
03.br 换行标签:是自身闭合标签。<br/>
04.hr 水平线标签,是自身闭合标签。
05.strong(加粗)、06.em(倾斜)
07.特殊符号:所有的特殊符号都是包括在&;中
空格:&nbsp;
大于号:&gt;
小于号:&lt;
双引号:&quot;
版权符号:&copy;
林徽因:冰心(谢婉莹),小桔灯() 99
你是人间的四月天
9.图像标签
夏洛特的网
html 中两种路径:
第一种:绝对路径,就是挂着盘符的路径形式,例如:c:\\123\\01.jpg
相对路径:相对的对象时当前你访问的html 文档。符号是../(上一级目录)
注意问题:相对路径../:去该html 文件对应的上层文件夹
一般不会使用绝对路径:D:\\1.html
<img src=”美女.jpg” alt=“网络异常的时候,显示的文本” title=”鼠标悬浮在图片上
显示的文字”/>
自身闭合标签
10.超链接
分类:页面间链接,锚链接,功能性链接。
页面间链接:
<a href=”http://www.baidu.com”>去百度</a>
锚链接:
01.同页面间锚链接
分两步:第一步:在页面目标位置设置一个锚记。<a name=”star”><img src=”01.jpg”
/></a>
第二步:在另一处创建出一个超链接:<a href=”#star”>去看明星的隐私信
息吧</a>
02.跨页面的锚链接
功能性链接:
<a href=”mailto:yymqqc@126.com”>站长信箱</a>
<a href="tencent://message/?uin=QQ">打开QQ</a>
迅雷
电驴
ek2k://
QQ 旋风
第二章列表、表格与框架
第二章列表、表格与框架
收作业
听写
补充a 标签的一个属性target
1._blank:在新选项卡中打开
2._self:如果没有设置target 属性,默认取值是_self
01.列表
001.无序列表:
<ul>
<li></li>
</ul>
002.有序列表
<ol>
<li></li>
</ol>
003.定义描述标签:应用场景:在图文混编的情况下使用
<dl>
<dt>放置图片</dt>
<dd></dd>
....
</dl>
02.表格
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td>北京</td>
<td>上海</td>
<td>广州</td>
</tr>
<tr>
<td>北京</td>
<td>上海</td>
<td>广州</td>
</tr>
<tr>
<td>北京</td>
<td>上海</td>
<td>广州</td>
</tr>
</table>
</body>
</html>
重点:表格的跨行跨列
步骤:1、有几行几列?
解析:3 行两列
2.该跨行的跨行(rospan),该跨列的跨列(cospan)
3.核心原则:跨行和跨列只能出现在td 中
一定要注意的是:所有的跨行和跨列操作都出现在td 中。
表格跨行跨列步骤:
01.确定表格的行和列
02.搭建出表格架构
03.根据需求,删除多余的td(单元格)
3.框架集和内嵌框架
再来一遍Frameset
作用:当我们需要将一个比较大的页面切割成多个小页面的时候,可以使用FrameSet,它
一般用于后台管理员布局方式。
重要内容:FrameSet 和body 不能共存。
实现:
首先:创建出top.html, left.html right.html 三个子页面
然后,在主页面index.html 中通过frameset 标签来引入三个子页面
<!--如何将3 个小页面整合到一个index 大页面中-->
<frameset rows="20%,*">
<!--顶部的top 页面-->
<frame src="top.html"/>
<!--下半部分对应的框架-->
<frameset cols="20%,*">
<!--左半部分页面left.html-->
<frame src="left.html"/>
<!--有半部分的页面right.html-->
<frame src="right.html" name="rightFrame"/>
</frameset>
</frameset>
注释:01.border 可以设置边框的宽度,如果是20,那么代表边框宽度是20px,如果设置为
0,代表无边框。
02.noresize=”noresize”不允许用户拖动框架
03.scrolling=”no” 不显示滚动条
Iframe 用法:
应用场景:链接外部的页面,实现样式的代码重用。
FrameSet:
01.不能和body 共存
02.将index 页面用三个页面组合起来,将一个大
页面Index 切成3 小块,每一个小块儿对应一个页面
top.html
left.html
right.html
04.框架集Frameset 和内嵌框架iframe
frameset 用于进行网页布局,对多个页面进行组
合。比较复杂,而iframe 一般用于引入站外链接,天气预

frameset 关键属性:
border:设置边框:可以取值100
frameborder:0 和1
borderColor:颜色
frame:noresize srcolling
iframe:noresize srcolling width height
第三章表单
第三章表单
01.什么是表单??
解析:表单就是form
<form action=”http://www.baidu.com”
method=”post”>
重置按钮必须放入到表单中,才能发挥到作用
</form>
注意点:
02.表单元素?
解析:在表单中的标签就是表单元素
03.老湿:你说get 和post 提交方式有什么区别?
解析:get 在地址栏显示提交的数据(危险)
2k
1byte=8bit(位))
(1kb=1024byte(字节)
1mb=1024kb
1Gb=1024mb
1Tb=1024Gb
4M: 4m/s 512k/s
post 在表单,通过开发人员工具可以看到(安
全)没有上限
要想让表单元素中的value 值提交到服务器,
表单元素必须有name 属性
重置和清空??
解析:
表单元素:
input: type="text" 文本框
type="passsword" 密码框
type="radio" 单选框
type="checkbox" 复选框
type="submit" 提交按钮
type="reset" 重置按钮
type="button" 普通按钮
type="image" 图片按钮
type="file"文件域
type="hidden" 隐藏域
下拉框
select ---option 下拉框
多行文本域
<textarea>多行文本域</textarea>
属性
:只读readonly="readonly"
禁用: disabled="disabled"
-->
第四章初识CSS
1.任务
1.第三章和第四章单词
2.考试
3.前三章总结
4.第四章内容讲解
引入dreamweaver 工具使用
2.内容:
1.使用css 的意义:为了实现代码和样式的分离
01.什么是CSS:(Cascading Stylesheet)层叠样式表
02.CSS 在页面中的应用:
解析:
<style type=”text/css”>
P{
font-size:20px;
Color:red;
}
</style>
03.CSS 的优势
CSS 的基本语法
01.CSS 基本语法结构
02.认识<style>标签
03.CSS 选择器
标签选择器:通过标签名来设置元素的样式。
类选择器
解析:两步:第一步:在要设置样式的目标标签中起一个名字为class 的属性名
第二步:在style 标签中,通过.属性名{}设置
ID 选择器
解析:
第一步:在要设置样式的标签中起一个名称为id 的属性,
第二步:在style 标签中通过#属性名{}设置
在HTML 中引入CSS 样式
01.行内样式
解析:直接在html 代码的标签中设置style 属性,这种方式缺点做不到代码和样式分离。
02.内部样式表
解析:直接在style 标签中书写样式代码,但是真正在项目发布的时候,还是最好将样式
单独出一个文件,这样会提高网站的性能。
03.外部样式表
解析:通过link 标签引入当前网站css 文件夹中某一个后缀名是.css 的文件,
<link href="site.css" rel="stylesheet" type="text/css" />
04.样式优先级
规律:
行内>内部样式表>外部样式表
也就是遵循的是就近原则。
CSS 高级应用
01.CSS 复合选择器
A.后代选择器
B.交集选择器
C.并集选择器
02.CSS 继承特性
A.继承关系
B.继承的应用
注意点:
01.如何调整dreamweaver 中代码视图的字体大小。
.
2.问:
声明:下次课的预习大家一定要好好预习,因为里面的东东很多很杂,所以需要大家多用点
心。
总结:
1.为什么使用CS
2.CSS 语法
<style type=”text/css”>
标签类ID 选择器
</style>
3.选择器的优先级
近者优点
4.三种引入样式表方式
第一种:行内样式
第二种:内部样式表
第三种:外部样式表
5. 复合选择器
01.后代选择器空格
02.并集选择器,,,,
03.交集选择器连接写,第一个只能是标签,后续跟的是类样式,ID
6.CSS 当中的继承
作业:
1.预习第五章(难点,希望大家好好预习)
第五章CSS 美化网页元素
内容回顾:
01.CSS:让网页看起来更加美观,可以实现页面样式的复用。层叠样式表
02.CSS 选择器:ID 类选择器标签
03.复合选择器:交集,并集,后代
现阶段,大家所用的选择器,只要能满足题目要求即可,没有必要刻意去使用复合选择器,
等到有一天,你发觉使用常见3 种选择器,定位某一个标签特别麻烦的时候,思路可以往这
个方向偏移。
交集选择器:p.name div#name
并集选择器:p,div
后代选择器: p ul li
04 选择器的.优先级
ID>类选择器>标签选择器
05.CSS 中的继承
子标签可以继承父标签的样式
CSS 美化网页元素
1.span 标签引入
老师说了,通过span 标签,我们学了一个知识点,就是行级标签和块级标签。
行级标签:;所有的行级标签都显示在同一行(span,img)
块级标签:独占一行(p ,div)
2.字体样式
大家教了我一点,就是如果font-family 属性值有多个,用逗号
隔开。如果英文字体和中文字体同时出现,英文位于前面。
02.如果字体属性值有空格,必须有””,
03.如果字体属性是中文,也要有””
分开设置属性:
设置字体类型:font-family:到底是楷体呢还是宋体”楷体_GB2312”
设置字体大小:font-size:设置字体大小
设置字体风格:font-style;倾斜:font-style:italic
设置字体粗细font-weight:bold; 700px
整体设置属性:font:字体风格字体的粗细字体大小字体类型;
<div>----------------------------------------------------</div>
水变油
3.文本样式
设置文本颜色:color:前景色
设置元素水平对齐方式:text-align:center left
设置文本缩进:text-indent:20px;
设置文本的行高line-height:20px;如果我们将line-height 和height 设置成一样的高度,那么
就相当于对盒子中内容作了垂直居中,这是一个布局技巧
设置文本的装饰:text-decoration:underline;
图片和文字垂直对齐方式
设置图片Vetical-align:middle;
4.超链接伪类
去除a 标签中的img 标签外围的边框,有两种方案:
01.img{border:0px;}
02.img{border:none;}
伪类:选择器(#div .div div):状态值(link,visited,hover,active)
a:link:大家的小手还没有点击超链接时的样式
A:visited:大家的大手已经点击过了某个超链接的样式
A:hover:大家的小脚悬停在超链接上的样式
A:active:大家的大脚踩在超链接上,但是还未弹起的样式
设置鼠标形状
Cursor:pointer;设置成小手
Cursor:wait:小沙漏忙碌图标
5.Div
Div 咱们一直在用,知道它是一个块级标签,以后布局的
时候会经常用到它。
6.背景样式:背景偏移技术!
div {
background-color: pink;//给箱子设置背景颜色。
background-image: url(image/02.jpg);//给某一个标签,或者说的直白
一些就是给html页面上的一个箱子,设置背景图
background-repeat: no-repeat;//图片比标签宽高小的时候,只显示一
张背景图片
background-repeat:repeat-x;在水平方向上平铺
background-repeat:repeat-y:在垂直方向上平铺
background-position:-104px 0px;
//position代表位置:有两个值,
第一个代表的是水平方向上做偏移,如果需要图片左移,那么取负值
第二个代表的是垂直方向上的偏移,如果需要图片上移动,取值为负值。
width: 300px;
height: 300px;
}
鉴于以上四个属性写起来代码过多,可以将其合成一个属性,并且严重十分非常特别及
其建议要用合写形式。
Background:pink url(image/美女.jpg) 0px 0px no-repeat;
7.列表样式
List-style-image:url(image/02.jpg)
List-style:none;将默认的标记去除
List-style:circle:空心圆
List-style:square;方块
List-style:decimal;实现了从无序列表到有序列表的转换。
第六章盒子模型
第六章盒子模型
1.盒子模型
盒子模型包括内容和盒子属性(border,padding,margin)
盒子模型的真实宽度:内容宽度+左右两侧的padding 值+左右两侧的border 值
盒子的真实高度:内容高度+上下的padding 值+上下的border
2.盒子模型常见考题
/*
border:设置颜色后跟参数个数含义
1 个参数:四个边框颜色都是该颜色
2 个参数(red blue):上下颜色为红色,左右为蓝色
3 个参数(red blue yellow):上边线颜色为红色,
左右为蓝色,下边线为黄色
4 个参数()按照上/右/下/左的规律设置颜色
*/
盒子模型对网页布局的重要性:
注意:对一个容器设置内边距,会改变该容器本身的尺寸,所以在布局的时候要特别小
心。另外能通过margin 实现的功能,尽量不要用padding。
Ul 中的li 是超不出ul 的包围的。这是一个特例。就是对ul 设置了内边距,ul 本身的尺
寸不会改变。
2.标准文档流
块级标签和行级标签
注意:块级标签可以和行级标签转换
通过display 属性
display:block;
display:inline;
display 属性的三个取值:
01.none:将某个元素隐藏display: none;*将div 隐藏*
02.block:将某个元素显示
03.inline:将某个块级标签转换成了行级标签
3.鼠标单击到img 行的时候图片隐藏方案
<!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">
a:hover img{
display:none;
}
</style>
</head>
<body>
<a href="#">悬停到我身上有惊喜,点坏不用赔!
<br /><br /><br />
<img src="image/pig.jpg" />
</a>
</body>
</html>
第七章浮动
第七章浮动
1.常见的网页布局
浮动:简单理解就是为了布局网页,让两个div 可以在同一行显示
清除浮动必须遵循一个重要的原则,就是如果想要清除浮动,那么原来盒子div 浮动的方
向就决定了清除浮动的方向值。
2.overflow:解决div 的高度塌陷问题
高度塌陷是如何引起的?
解析:当一个div 中所有的子div 都进行了浮动后,那么会出现该问题,那么解决方就是在
父div 中设置器overflow:hidden:即可解决高度塌陷问题
方式二:在父div 结束标签前添加一个子的div,给该div 设置一个id,然后通过样式清除
浮动。代码如下:#littlediv{clear:left;}
3.如何将ul 中最后一个li 前提到第一个li 之上?
解析:用的思路就是给ul 设置相对定位:position:reletive ; 给最后一个li 起一个id,设置
其绝对定位:position:absolute: top:-15px;
1.网页中浮动的应用
浮动就是为了配合网页布局中常见的布局方式,将两个div 显示到同一行
01.横向导航菜单
02.图文混编
1.大div 叫container 360px
2.两个小div,一个承载标题,。另一个承载视频列表
3.定义列表来写。
01.将dl 进行左浮动,让多个dl 可以在同一行显示
02 设置dl 宽度保证两个dl 之前出现一定间隔。
03..通过text-align:center:来居中dl 中内容
04.如果网页中部分元素应用了浮动,可能会引起高度塌陷,这个时候解决方案
通过在body 中加多一个空的div,然后给该div 设置浮动属性为both
4.网页元素三种常见的定位机制
普通流,浮动和绝对定位
1)普通流:很多人或者文章称之为文档流或者普通文档流,其实标准里根本就没有这个
词。如果把文档流直译为英文就是document flow ,但标准里只有另一个词,叫做普通流
(normal flow),或者称之为常规流。但似乎大家更习惯文档流的称呼,因为很多中文翻译
的书就是这么来的。比如《CSS Mastery》,英文原书中至始至终都只有普通流normal flow
(普通流) 这一词,从来没出现过document flow (文档流)
2)浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。
浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影
响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动
框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”
现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。
正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其
他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所
希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。
浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局;
恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指windows
平台的IE 浏览器)。
也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什
么?
本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。
一、清除浮动还是闭合浮动(Enclosing float or Clearing float)?
很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。
我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。
1)清除浮动:清除对应的单词是clear,对应CSS 中的属性是clear:left | right | both | none;
2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。
两者的区别请看优雅的Demo
通过以上实例发现,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮
动,
在footer 上设置clear:both 清除浮动并不能解决warp 高度塌陷的问题。
结论:用闭合浮动比清除浮动更加严谨,所以后文中统一称之为:闭合浮动。
二、为何要清除浮动?
要解答这个问题,我们得先说说CSS 中的定位机制:普通流,浮动,绝对定位
(其中"position:fixed" 是"position:absolute" 的一个子类)。
1)普通流:很多人或者文章称之为文档流或者普通文档流,其实标准里根本就没有这个词。
如果把文档流直译为英文就是document flow ,但标准里只有另一个词,叫做普通流
(normal flow),
或者称之为常规流。但似乎大家更习惯文档流的称呼,因为很多中文翻译的书就是这么来的。
比如《CSS Mastery》,英文原书中至始至终都只有普通流normal flow(普通流) 这一词,
从来没出现过document flow (文档流)
2)浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。
浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影
响内联框(通常是文本)的排列,
文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会
出现包含框不会
自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮
云一样,但是只能左右浮动。
正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其
他普通流元素了,
也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要
闭合浮动元素,
使其包含框表现出正常的高度。
第八章定位网页元素
第八章定位网页元素
01.只有块级标签才可以浮动
02.定位网页元素的方案
Static:默认
Absolute:绝对定位
Reletive:相对定位,相对的对象是自身
Fixed:固定的,类似于空间的Top 效果
重点中的重点:
绝对定位:
01.涉及到两个标签,并且标签有嵌套
关系。
02.一般给外层标签设置为相对定位
Position:relative,不需要设置left,top 等
偏移量。
03. 给内层标签设置绝对定位,
position:absolute;,需要设置left 和top
项目阶段
01.经济半小时
02.当当图书榜
03.当当畅销排行
004.淘宝导航
005.开心网
006.V+首页
007.晒新货页面
008.商品详细页
009.家纺页面
010.帮助中心
011.注册和登陆页