1、HTML网页制作,1：HTML简介 2：HTML常用标签介绍 3：表单布局 4：表格布局 5：框架布局 6：CSS样式表 7：使用Dreamweaver制作网页,HTML简介,HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具,HTML文档的基本结构,HTML文档的结构,我的第一个网页 Hello World!,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,网页标题,网页内容，可以是文本、图像等,这部分包括标题和其他说明信息，包括在 标签内,这部分包含文本、图像和链接，它
2、包括在 标签内,网页的摘要信息,网页摘要信息利于浏览器解析和搜索引擎搜索： 使用标签,搜狐-中国最大的门户网站 ,使用标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述,提供搜索关键字和内容描述信息，方便搜索引擎的搜索,HTML页面中的块和行,HTML标签分类（方便后续的布局设计）： 块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计,块级： 块内包含多行,行级：包括文字、图片等,块级标签,根据使用场合，块级标签又细分为： 基本块级标签 常用于布局的块级标签 标题标签,一级标题二级标题三级标题四级标题五级标题六级标题,h1最大 h6最小 前后
3、隔行,标题 标题,基本块级标签段落,段落标签,北京欢迎你北京欢迎你，有梦想谁都了不起！有勇气就会有奇迹。,前后换行，类似教材中的段落,基本块级标签水平线,水平线标签,北京欢迎你北京欢迎你，有梦想谁都了不起！有勇气就会有奇迹。,横线用于内容分割,单个标签的闭合形式,常用于布局的块级标签有序列表,有序列表标签,注册步骤：填写信息 收电子邮件注册成功 ,有序列表,列表项1 ,常用于布局的块级标签无序列表,无序列表标签, 新人上路指南 如何激活会员名？如何注册贵美会员？注册时密码设置有什么要求？贵美认证,无序列表,列表项1 ,常用于布局的块级标签描述标签,定义描述标签,咖啡一种黑色的热饮料，原料据说是
4、咖啡豆，非洲盛产这类原料。可以提神，刺激神经。,这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合,标题 描述1 ,常用于布局的块级标签描述标签,图片的HTML代码（后续讲解）商品名称：灿坤蒸气电熨斗商品价格：388元商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计,用定义描述标签实现图文混编的效果,文字有一定的缩进,常用于布局的块级标签表格,表格百度 新浪 ,-表格-行-列（单元格）,常用于布局的块级标签表单,表单,一般和table使用：., ,常用于布局的块级标签div层,分区标签 ,div标签可内嵌到等标签内，作为普通块状元素使用,一般当作结构化块状元素
5、使用，作为逻辑分区（分块）即容器来使用,新人上路div其实就是一个,小结,请说出实际开发常用的4种块状结构是什么？,1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单,行级标签图像标签,图像标签,为了不同浏览器之间的兼容，推荐使用title属性 ，确保能显示提示文字,行级标签范围标签,范围标签 ：显示某行内的独特样式, 商品价格:仅售10元 ,文本等行级内容,设置红色、大号字突出显示,行级标签换行标签,换行标签 ,北京欢迎你，
6、有梦想谁都了不起！有勇气就会有奇迹。北京欢迎你，为你开天辟地流动中的魅力充满朝气。北京欢迎你，在太阳下分享呼吸在黄土地刷新成绩。北京欢迎你，像音乐感动你让我们都加油去超越自己。,和的区别： 前后不换行,为什么需要W3C标准,W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：OM 页面交互方面：ECMAScript ,制定统一的web标准,W3C,Netscape的图标,W3C提倡的Web结构,不规范的示例,一级主题 一级主题阐述文字
7、 二级主题 二级主题相关文字 项目列表1 项目列表2 项目列表3,存在问题： 1、内容和表现没分离，后期很难维护和修改 2、HTML代码不能表示页面的内容语义，不利于搜索引擎搜索,W3C提倡的Web结构,规范的示例,一级主题1一级主题阐述文字二级主题二级主题阐述文字项目列表1项目列表2项目列表3,W3C提倡的Web结构： 1、内容（结构）和表现（样式）分离 2、HTML内容结构要求语义化,XHTML 1.0基本规范,body部分内容 ,标签名和属性名称必须小写 HTML标签必须关闭 属性值必须用引号括起来 标签必须正确嵌套 必须添加文档类型声明,1、声明必须位于文档的最前面 2、三种级别：St
8、rict（严格类型） 、Trasitional（过度类型）、 Frameset（框架类型）,练习1,需求说明： 实现简单的商品购买页,练习2,注意HTML结构的语义化，遵守XHTML1.0基本规范,需求说明： 实现商品促销页,超链接,超链接-实现页面间的导航,链接文本或图像,链接地址（目标）,超链接, 灿坤蒸气电熨斗 ,链接在新窗口中打开, 链接热点文本或图像,链接路径, 上级目录 上上级目录 ,相对地址：相对于当前目录的地址，常用绝对地址：指向目标地址的完整描述 ，少用,上级目录：/,上上级目录：/,登录 搜狐,登录,超链接的三类应用场合,免费注册 登录 ,页面间链接 锚链接 功能性链接,常
9、用于网站导航,相对路径,超链接的三类应用场合,实现锚链接 1、定义标记（锚）： 目标位置 2、设置链接到标记位置：当前位置, 明星专区 明显专区内容 ,定义标记,设置链接到标记位置,A.页面内的锚链接,适用于页面内容较多，超过一屏的场合,超链接的三类应用场合,实现锚链接,标记所在页. 明星专区 ,B.页面间的锚链接,链接页. 明星体验：明星专区,超链接的三类应用场合,功能性链接 邮箱、QQ链接等, 站长信箱 ,注释,被注释掉的行将不显示 正常显示行1正常显示行2 ,用于增加代码的可读性，不显示,注释,特殊符号,特殊符号 空格：, COPYRIGHT 北京市贵美商城有限公司,1、因为等符号在HT
10、ML中已使用，所以必须用其他符号来代替 2、都以分号结束（；）,表单的应用,表单的典型应用,用户登录/注册,收集用户反馈信息,提供搜索工具,常见的表单元素,单行文本框(text),单选按钮(radio),复选框(checkbox),下拉列表(select),重置按钮 (reset),提交按钮(submit),密码框(password),文本域(textarea),表单基本语法, 文本框、按钮等表单元素 ,指定提交后，由服务器上哪个处理程序处理,指定向服务器提交的方法： 一般为post或get方法, post方法比较安全,用户名：密,表单输入元素：input,表单提交地址和方法的设置,表单元素基
11、本格式,指定元素的类型，可为text、radio、submit等,控件的名称,控件的初始值,控件的初始宽度,控件中输入的最多字符个数,控件是否被选中checked,表单各元素语法,文本框密码框按钮单选按钮,普通按钮：button 提交按钮：submit 重置（清空）按钮：reset 图片按钮：image,表单各元素语法,复选框 文件域列表框多行文本框, , 文本内容 ,表单的高级用法,隐藏域方便服务器端“记住”客户端的信息、但又不希望客户看到的数据,隐藏的客户代号信息：666，但客户端页面不显示,隐藏域：既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感,只读和禁用
12、属性 readonly：希望某个框内的内容只允许用户看，不能修改 disabled：因没达到使用的条件，限制用户使用,表单的高级用法,欢迎阅读服务条款协议，贵美的权利和义务同意以上协议 ,1、用户不能修改协议 2、勾选“同意以上协议”，才允许点击“注册”按钮,练习简易求职表,“协议”只读，“提交”按钮禁用,用隐藏域提交求职者姓名“zhangsan”,需求说明： 使用表单制作简易求职表,表格的应用,表格应用场合,论坛中应用表格,购物网站应用表格,门户网站应用表格,基本语法,第1个单元格的内容第2个单元格的内容第1个单元格的内容第2个单元格的内容, 定义行, 定义列,跨行、跨列,学生成绩张三语文9
13、8数学95代码同上两行,rowspan 跨2行,colspan 跨3列,表格高级应用,如何实现年终数据报表？,表格标题,页脚,表头,表格数据的分组标签、配合使用，对报表数据进行逻辑分组,表格高级应用,年终数据报表月份 收入（RMB） 1月 100 2月 80 平均月收入 196.67 总计 1180 ,标签对应报表的页眉,对应报表的数据主体,对应报表的页脚,表格布局,表格布局的应用场合,图文布局，数据规则整齐,表单布局，同样要求数据规则整齐,图文布局的实现,实现步骤,图文布局的实现,实现步骤,大学要求老师开网店安全锤网上大热销,整个是5行2列的表格,实际布局时border=“0”隐藏边框,公告
14、栏：跨2列,图片：跨4行,练习：贵美商品分类,需求说明 根据提供的素材实现,表单布局应用,实际页面中的登录表单布局,实际应用，需要几行几列的表格布局？,表单布局应用,会员名:代码同“会员名”,整体布局：4行3列的表格,图片后的内容跨2列，内容用“空格”填充,图片按钮跨2列,小结,使用表格进行布局对显示数据有什么要求？实现思路是什么？,使用场合：数据显示要求较为规整，符合表格布局的特点 布局的实现思路： 需要几行几列的表格？ 哪些单元格有跨行或跨列？ 编写表格代码实现,嵌套布局,如何用表格实现下图布局？,对于复杂的页面，如使用表格则必须采用多层嵌套,嵌套布局,嵌套表格布局的缺点： 代码量大 层次
15、结构也相对复杂 不利于Goole等搜索引擎搜索查找数据表格布局仅适用于： 规则的数据显示 表单页面,表格布局不适合不规则的复杂页面，这种场合需使用DIV+CSS布局（后续学习）,框架的应用,页面的一个固定部分显示LOGO或公司信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容， 页面中此部分是变化的,产品 宣传,技术 论坛,客户 服务,框架的用途,框架的两类用途： 1、显示多窗口页面-使用框架集 2、页面复用使用内嵌框架,复用站内页面： head和foot部分,复用站外内容： 引用Google搜索引擎、显示sohu新闻等,框架的组成,文件1： top.html,文件2：left.h
16、tml,文件3： right.html,多个页面文件组成,主文件： index.html,框架基本结构,创建框架网页的步骤： 创建各子窗口对应的HTML文件 创建整个框架页面文件，引用子窗口文件, ,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,引用各窗口要显示的网页文件,框架基本结构,纵向分割窗口,如浏览器不支持框架，才显示body内的内容 ,注意： 1、框架和body不能共存 2、为了兼容性，可以使用标签,窗口边框的宽度,将窗口分割成上中下3部分,推荐：将窗口子文件放在单独的文件中用于区分,框架基本结构,横向分割窗口,横向分为3个窗口,
17、框架多窗口实现,典型的2行2列结构,scrolling属性：是否显示滚动条,如何实现？,2行2列的 窗口划分,窗口间的关联,如何实现左列导航，在右面显示相关页面？,使用标签的target目标窗口属性,窗口间的关联,实现窗口间关联的步骤 1、设置窗口名（框架主页）2、设置的target属性（窗口子页面 ）,. . .,设置右窗口名为：rightFrame,设置链接在右窗口中打开,窗口间的关联,target的其他用法 在新窗口中显示：_blank 在自身窗口中显示：_self 在上级窗口显示：_top 在父窗口显示：_parent,内嵌框架,需要使用多个文件，目录结构复杂 内嵌较为灵活，可以在网页
18、的任何位置使用 可以作为模板，在本网站的多个页面复用,整个页面只有局部窗口引用sohu的内容,内嵌框架基本语法,和不同，放在标签内,指明引用的网页文件,内嵌框架属性,如何设置在内嵌窗口显示,下边显示第三页 ,在内嵌窗口mainFrame显示链接内容,设置窗口名,如何实现？,练习1用框架分割多个窗口,需求说明： 根据提供的子窗口页面素材,练习2实现页面复用,需求说明： 根据提供的素材实现,为什么使用CSS样式表,样式表能实现内容与样式的分离，方便团队开发css garden http:/ 2、布局、定位,CSS基本语法,选择器（即修饰对象）对象的属性1: 属性值1;对象的属性2: 属性值2;,标
19、签声明标签内为CSS,多条样式规则 1.多个属性间用分号分隔 2.用冒号声明对应属性值,li color: red; font-size: 30px; font-family: 隶书; ,选择器,样式规则,选择器的分类,标签选择器,licolor:red; font-size:28px;font-family:隶书; 家用电器 ,标签选择器：用于修饰同类HTML标签的共性风格,选择器的分类,.bluecolor:blue; 家用电器各类书籍手机数码日用百货,如果希望部分li标签采用其他样式，怎么办？,类选择器(class),定义样式，注意类名有点号,应用类样式，其他元素也可以使用,选择器的分类
20、, #menuwidth:200px; background:#ccc;font:bold 14px 宋体; 家用电器,ID选择器,如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？,文本属性,行距、对齐等： line-height （行高） text-align （对齐） letter-spacing （字符间距） text-decoration （文本修饰 ） white-space （空白处理 ）,字符间距：5px 文本修饰：带下划线 空白处理：不断行,字体、字号： font（缩写形式） font-weight（粗细） font-size（大小） font-family（字体）,
21、字体：宋体 颜色：红色 字号：12px 对齐：左对齐,文本属性, lifont: 12px 宋体;text-align:left;line-height:28px; .title letter-spacing:5px;white-space:nowrap;text-decoration:underline; .bigFont font-size:16px;color:red; ,所有的默认样式： 字体、字号：宋体，12px 对齐方式：左对齐 行高：28px,首行标题样式： 字符间距：5px 空白处理：不换行 文本修饰：带下滑线,大字体样式： 字号：16px 颜色：红色,font字体样式的缩写形
22、式,背景属性,背景属性： background （缩写形式） background-color（背景色 ） background-image（背景图 ） background-repeat（背景图重复方式 ） background-position（位置坐标、偏移量）,四类平铺效果,背景属性,div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px ,背景出现的水平和垂直位置坐标，实现各种拍偏移效果,设置背景图片、不重复平铺,各种偏移效果,背景属性的经典应用,图标截取-背景偏移量技术,利用back
23、ground-position的坐标偏移量，从同一张背景图中截取菜单图标,背景属性的经典应用,divwidth:80px;background:url(images/icon.gif) no-repeat;.helpbackground-position:-80px 0px;.loginwidth:40px;background-position:0px -20px; ;购 帮助中心 登录,所有IDV标签设置为同一背景图、等宽,分别设置各图标的坐标偏移量,背景属性的经典应用,1 .设置三个标签（如div）的背景为同一图片背景,2 .考虑“购物车”、“帮助中心”图标的坐标偏移量是多少？,3 .考
24、虑“登录”图标的坐偏移量是多少？,Y,X,O(0,0),列表属性,列表（li）常用属性 list-style （列表风格）,list-style属性规定的列表风格,列表属性,列表属性的典型应用：导航菜单,liwidth:150px;color:red;font:28px 隶书;list-style:none;float:left; 购物车 ,设置列表为none去掉圆点,所有html标签都有的float浮动属性，此处用于横向排列,如何控制CSS样式,盒模型,网页中的所有元素可以看作一个一个的“盒子”,元素内容 填充（也称内边距） 边框 边界（也称外边距）,如何控制CSS样式,样式控制思路,盒内样
25、式修饰 盒子位置布局,盒内样式： 设置网页元素的颜色、字体等外观,盒子位置布局：确定盒子所在的位置、和其他网页元素的关系,为什么需要盒子属性,盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性,盒子模型平面图,盒子模型三维立体图：注意背景色在背景图的下一层,什么是盒子属性,盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为四个方向,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin,border,padding,margin外边距,可统一
26、设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin：1px，2px，3px，4px; margin：1px，2px; margin：0px auto ; margin-left:1px;,分别代表什么含义？,border边框,border属性 border-color border-width border-style,border-top borde
27、r-right border-bottom border-left,border border-left ,修饰属性,四个方向,缩写形式,border,每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置,border-style: none; border: 1px solid red; border-right: 5px dotted blue;,分别代表什么含义？,使用border属性修饰表单, .textBorder border-width:1px;border-style:solid; 名字：密码： ,细边框的样式,padding内边距,padding
28、属性 padding padding-top padding-right padding-bottom padding-left,padding-left : 5px; padding: 5px 10px 20px 40px padding: 5px 10px,分别代表什么含义？,四个边可以一次设置，也可以分别设置,padding,元素的宽高及实际占位,元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度,height: 40px,border-width-top: 20px,marg
29、in-top:10px,右图图片的实际的高度是多少？,padding-top: 5px,使用盒子属性布局元素,上外边距30px,下填充40px,左右外边距：水平居中,左填充80px,5px宽的边框,如何实现如下贵美logo图片的布局？,图片背景色：#ff7300,页面背景色：#ccc,使用盒子属性布局元素,body margin:0px;padding:0px;background:#ccc;#logo width:380px;border:5px solid #666; padding:10px 20px 40px 80px;background:#ff7300;margin:30px au
30、to; /水平居中,设置页面内容（body）的背景和居中效果,“贵美商城”logo图片的布局,首先组织HTML结构，再写CSS进行布局或美化,使用盒子属性实现DIV+CSS布局,如何实现注册页面的布局？,main：主体部分,footer：底部部分,header：顶部,使用盒子属性实现DIV+CSS布局,实现步骤 1、分析页面的分块结构，形成HTML组织结构,为了控制整个页面的居中，添加一个大容器：container,main：主体部分,footer：底部部分,header：顶部,使用盒子属性实现DIV+CSS布局,实现步骤 2、编写每个DIV块的CSS控制定位,#containe: 980px
31、 、居中,#header： 136px;、背景色#ccc,#main： 400px;、背景色#fff,#footer： 100px;、背景色#ccc,为什么需要float浮动属性,如何解决中间两块布局无法同行显示的问题？,如何实现为希望的布局？,什么是float浮动属性,脱离常规文档流而表现为向右或向左浮动,默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示,向右浮动，脱离常规文档流,什么是float浮动属性,浮动的三大显著特征,1.DIV块元素失去“块状”换行显示特征，变为行内元素,什么是float浮动属性,浮动的三大显著特征,2.紧贴上一个浮动元素（同方向）或父级元素的边框
32、，如宽度不够将换行显示,什么是float浮动属性,浮动的三大显著特征,3.占据行内元素的空间，导致行内元素围绕显示,为什么需要clear区隔属性,第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？,如何实现第3块换行显示？,什么是clear清除属性,clear作用 如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效 clear属性的取值 right left both none,超链接样式的特点,超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式,加链接后，图片/文本样式的变化,超链接样式的四种状态 未访问状态（a:link ） 已访问状态（a:v
33、isited ） 鼠标移上状态（a:hover ） 激活选定状态（a:active ）,可以分别设置链接的四种状态的样式,超链接伪类样式,超链接伪类样式,采用选择器：状态的方式分别定义样式，一般称为伪类,如何设置超链接的样式,.nav li a padding:8px 15px;.nav li a:hover color:#ff7300;font-size:20px; 家用电器手机数码 ,1、先定义共有样式：表示.nai类下标签中的链接样式,设置超链接样式的步骤： 1、确定页面所有链接样式是否相同，否则分开定义 2、先定义四个状态共有样式，再分别定义其他状态,2、再单独定义某个状态特有的样式,
34、导航版块的链接样式一般和页面样式不同，需单独定义,如何应用样式,三类应用样式的方式 内部样式表 外部样式表 行内样式, /样式定义 /HTML内容 ,HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用,如何应用样式,三类应用样式的方式 内部样式表 外部样式表 行内样式,.nav li apadding:8px 10px; /CSS样式定义,/HTML内容 ,分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同一CSS,如何应用样式,三类应用样式的方式 内部样式表 外部样式表 行内样式表,日用百货 ,单独定义某个元素的样式，灵活方便。但因为内
35、容与样式混写在一起，应尽量少用或不用,样式的优先级,各类样式有继承 各类样式的优先级 浏览器默认设置 外部样式表文件 内部样式表 行内样式表 ID选择器 类选择器 标签选择器,由低到高，“近者优先”原则,样式的优先级,“日用百货”链接,.nav ul li a:linkcolor:blue; 家用电器手机数码 日用百货 ,内部样式表,外部样式表,行内样式表,红色,蓝色,样式的优先级,购物车的样式,#nav_id width:300px; background: #ccc; .nav height:100px; background: red; div border:5px solid green; background: blue; 购物车,ID选择器,类选择器,标签选择器,不冲突的样式，边框5px、绿色,同时应用ID、class、标签三类选择器,灰色背景,练习使用超链接伪类实现导航条,需求说明： 用提供的背景图素材，实现如下导航菜单效果 要求使用外部样式表 div-ul-li结构,链接无下划线（text-decoration），鼠标悬停，显示菜单的投影背景（background） 、字体变大,行高：24px 字体大小：10px,
