网页设计与制作(HTML+DIV+CSS)中职PPT完整全套教学课件

上传人：b*** IP属地：浙江上传时间：2023-09-02 格式：PPTX 页数：318 大小：8.98MB 积分：35 举报 版权申诉

已阅读5页，还剩313页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页基础知识第1单元01网页基础知识.pptx02HTML基础.pptx03CSS基础.pptx04网页文字.pptx05网页图像.pptx06列表.pptx07网页导航栏.pptx08表格.pptx09表单.pptx10网页布局.pptx全套可编辑PPT课件网页基础知识网页制作体检HBuilder的使用网页基础知识01网页基础知识HTML：英文全称是HyperTextMarkupLanguage，即超文本标记语言。Web：全称WorldWideWeb，缩写WWW，即全球广域网，也称为万维网。网页基础知识网页：是由HTML（超文本标记语言）或者其他语言编写的、通过浏览器编译供用户获取信息的页面，又称为Web页，其中包括文字、图像、表格、动画、视频和超链接（也称超级链接）等各种网页元素。网站：通俗的说，网站（WebSite）就是网页组成的。网站就是建立在互联网上的WEB站点，面向公众提供互联网内容服务。网页基础知识静态网页：在不维护的情况下，这个网页无论在何时何地被浏览，都是显示相同的内容和配置。对用户来说，只能观看，不能和网页进行交流，由html和css编写。网页基础知识动态网页：是指网页的内容可以实时的发生变化或更新。另一方面，网站也可以自动收集用户的浏览信息，从而自动的为用户提供更好的服务。网页元素网页标题网站名称网站功能、特点Microsoftedge浏览器GoogleChrome浏览器360浏览器网页元素LOGO和导航栏网页元素网页主要内容文字图片视频等网页元素网页页脚信息版权信息友情链接网页设计软件网页编辑排版软件Dreamweaver代码编辑器EditPlus、HBuilder、Webstorm网页设计软件DreamweaverCS6界面视图方式+代码方式网页设计软件HBuilder8.0界面代码方式网页制作体检02Dreamweaver站点Dreamweaver站点是指所有文档的本地或远程存储位置。放在本地磁盘上的站点被称为本地站点，当本地站点的网页制作完成并通过测试后，就可以将本地站点文件夹的所有文件上传至远程服务器，以供他人浏览。站点的规划在定义站点前，要先进行站点的规划，即设置存放在站点中所有文档的目录。一般情况下，应先为站点创建一个根文件夹，然后在要文件夹下创建多个子文件夹，将文件分类存储在相应的子文件夹中。站点的规划在本地磁盘创建一个文件夹myweb作为站点的根文件夹，该文件夹将存放关于网站的网页、图像、动画等文件。在myweb文件夹中再建立一个文件夹：img（存放图像文件）将素材文件logo.png、pic01.jpg复制到img文件夹内。创建站点方法一：启动DreamweaverCS6，可以看到Dreamweavercs6的欢迎界面，单击“新建”的“Dreamweaver站点”方法二：单击菜单的“站点(s)”下的“新建站点(N)”创建站点打开如下“站点设置对象”对话框默认站点创建新网页方法一：在欢迎界面新建HTML文件方法二：在菜单新建HTML文件Dreamweaver文档编辑界面Dreamweaver的工作环境主要由以下几个部分组成：菜单栏、工具栏、文档窗口、属性面板以及多个浮动面板组成，如图所示。菜单栏文档工具栏工作区切换文档视图窗口文档代码窗口面板组属性面板状态栏标签选择器HBuilder的使用03安装HBuilder可以到在HBuilder官网http://www.dcloud.io/点击免费下载，下载最新版的HBuilder。下载的时候根据自己的电脑选择适合自己的版本。下载Hbuilder后解压该文件，并进入到解压目录，双击“HBuilder.exe”即可运行启动Hbuilder。可为HBuilder.exe创建桌面快捷方式。启动HBuilder双击HBuilder软件图标，启动，打开登录界面，可选择“暂不登录”。HBuilder界面HBuilder界面主要包括：菜单栏、工具栏、项目管理器、代码编辑区、快捷键列表与大纲等其他视图窗口、状态栏。新建Web项目进入HBuilder界面,点击文件→新建→选择Web项目新建Web项目在打开的“创建web项目”对话框中进行设置，要设置新建项目的名称新建Web项目在项目管理器中，打开创建的项目unit01文件夹，里面包含了首页index.html，还有js、img、css文件夹。网页制作在项目管理器中双击“index.html”文件，在代码编辑器窗口就会有index.html网页文件的基础代码，可以在代码编辑器窗口书写代码进行网页制作。HBuilder主题HBuilder内置了几种主题，选择菜单的工具→视觉主题设置，可选择喜欢的主题颜色。HTML基础第2单元HTML文件结构HTML常用标签和属性图像和链接标记HTML文件结构01HTML文件结构声明为HTML5文档是HTML页面的根元素定义网页编码格式描述文档标题包含可见的页面内容HTML文件结构<html><head>

</head><body>

</body></html>开始标签开始标签开始标签结束标签结束标签结束标签HTML文件结构<html><head>

</body></html>

不允许HTML常用标记和属性02HTML常用标签（元素）标题标签<hi>…</hi>(i=1~6)实例<h1>这是一个标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3><h4>这是一个标题</h4><h5>这是一个标题</h5><h6>这是一个标题</h6>HTML常用标签（元素）段落标签（回车符）<p>…</p>实例<p>这是一个段落。</p><p>这是另外一个段落。</p>HTML常用标签（元素）<br/>（换行符）水平线<hr/>实例<p>

这是一个段落。<br/>

这是一个段落。</p><hr/>HTML常用标签和属性属性是HTML元素提供的附加信息属性一般描述于开始标签属性总是以名称=值的形式出现，比如：name="value"。HTML常用标签和属性段落文本的属性

align水平线的属性widthsize实例<hrwidth=“500”size=“1”/>实例<h2align=“center”>这是一个标题</h2><palign=“right”>这是一个段落</p>文本右对齐长度粗细HTML常用特殊字符图像和链接标记03图像标签<imgsrc=“”alt=“”title=“”/>src属性：设置图像文件所在路径alt属性：指定的替代文本，当图像无法显示或用户禁用图像显示时，代替图像显示在浏览器中。title属性：当鼠标悬停在图像上时的提示文字。a链接标签链接标签

<ahref=“”target=“_blank”>…</a>链接目标路径链接目标窗口a标签HTML链接是通过标签<a>来定义的实例：<ahref=“”>网站链接</a><ahref="files/in2.html">第2题</a><ahref="files/in3.html”target="_blank">第3题</a>路径图像路径是指图像文件的位置，链接路径是指链接目标文件的位置。路径通常分为绝对路径和相对路径。路径绝对路径：带有域名的完整路径。相对路径：相对于当前文件的路径。实例：<ahref=“”>网站链接</a>实例：<ahref="files/in2.html">第2题</a><ahref="files/in3.html”target="_blank">第3题</a>CSS基础第3单元行内样式与内嵌样式标签选择器类选择器ID选择器行内样式与内嵌样式01什么是CSShtml：定义网页的结构、内容CSS：定义网页的外观CascadingStyleSheet层叠样式表CSS用于控制网页样式，对网页中元素位置的排版进行像素级精确控制。使用CSS控制页面的方法内联样式（行内样式）内嵌样式（内部样式）链接样式导入样式内联样式（行内样式）行内样式写在一对标签的开始标签内<h1style="color:#ff0000;font-family:黑体">唐诗</h1><pstyle=“color:#ff0000;font-family:黑体”>

……</p><bodystyle="background-color:#09F;">……</body>案例<h1style=“”>…</h1>“”里的值如下：font-family:‘微软雅黑’;font-size:14px;color:#F09;<pstyle=“”>…</p>“”里的值如下：font-family:‘宋体’;font-size:14px;color:#09F;案例内嵌样式内嵌样式又称内部样式，是将CSS代码集中写在HTML文件的<head>标签中，并使用<style>标签定义。<head>

<styletype=”text/css”>

选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

</style></head>内嵌样式（内部样式）<head><title>内嵌样式</title><styletype="text/css">p{ font-size:14px; color:#ff0000;}</style></head>链接样式链接式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到HTML文件中。<head>

<linkhref=”css文件的路径”type=”text/css”rel=”stylesheet”/></head>导入样式导入外部样式表是指在内部样式表的<style>里导入一个外部样式，导入时用@import。<head>

<styletype=”text/css”>

@importurl(“外部样式表的文件名称”);

</style></head>CSS 选择器类型

——标签选择器02CSS选择器类型HTML是超文本标记语言，它没有样式。我们要给HTML添加样式就要用CSS，这时需要有选择器类型去选择添加样式的标签或元素。使用内部样式、链接样式或导入样式时需确定CSS选择器类型。基本的CSS选择器类型标签选择器类选择器ID选择器基本的CSS选择器类型——标签选择器标签选择器：定义的CSS样式针对一类标签。p{}h1{}body{}案例（标签选择器）网页结构<style>h1{}h2{}p{}</style>网页样式案例（标签选择器）网页结构——写在HTML文件的<body></body>标签内网页样式——内部样式：写在HTML头部<style></style>标签内）

链接样式（或导入样式）：写在.CSS文件里案例（标签选择器）标签选择器CSS 选择器类型

——类选择器03基本的CSS选择器类型类选择器：定义的CSS样式针对你想要的所有标签使用。案例（类选择器）网页结构<style>h1{}.txt1{}.txt2{}.txt3{}.txt4{}p{}</style>网页样式案例（类选择器）标签选择器类选择器class属性应用样式基本的CSS选择器类型——类选择器类选择器命名：以“.”开头，紧跟字母，由字母、数字、下划线或短横线组成。在结构中，使用class属性应用样式。CSS 选择器类型

——ID选择器04基本的CSS选择器类型——ID选择器ID选择器：定义的CSS样式针对某一个特定的标签使用。案例（ID选择器）<p>阳光下飘雪</p><p>发稿日期：2021年12月</p><p>中午，......</p><p>雪停了，......</p><hr/><p>版权所有 2022</p>网页结构案例（ID选择器）<pid=“title”>阳光下飘雪</p><pid=”time”>发稿日期：2021年12月</p><pclass=”text”>中午，......</p><pclass=”text”>雪停了，......</p><hr/><pclass=”footer”>版权所有 2022</p>网页结构网页样式基本的CSS选择器类型——ID选择器ID选择器命名：以“#”开头，紧跟字母，由字母、数字、下划线或短横线组成。在结构中，使用id属性应用样式。一个ID选择器样式只能应用于一个元素。CSS选择器类型类选择器ID选择器标签选择器<style>

.text1{font-size:14px;color:red;}</style><pclass=“text1">...</p><p>…</p>使用class属性应用样式<style>

#box{font-size:14px;color:red;}</style><divid=“box">...</div><div>…</div>使用id属性应用样式使用标签名应用样式<style>

p{font-size:14px;color:red;}</style><p>…</p><p>…</p>可以重复应用不能重复应用网页文字第4单元CSS基础网页文字样式DIV标签及样式外部链接CSS样式CSS基础01使用CSS控制页面的方法内联样式（行内样式）内嵌样式（内部样式）链接样式导入样式使用CSS控制页面的方法内联样式（行内样式）<h1style="color:#ff0000;font-family:黑体">唐诗</h1>使用CSS控制页面的方法内嵌样式（内部样式）CSS选择器类型标签选择器类选择器ID选择器网页结构网页样式标签选择器标签选择器CSS选择器类型类选择器网页结构网页样式类选择器类选择器使用CSS控制页面的方法内嵌样式（内部样式）标签选择器标签选择器网页样式网页结构网页结构网页样式类选择器类选择器CSS选择器类型标签选择器类选择器ID选择器p{}h1{}body{}.text{}.main{}.navi{}类选择器的应用class=“text”class=“main”class=“navi”#title{}#time{}#box{}id选择器的应用id=“title”id=“time”id=“box”CSS的命名一定英文字母开头，不能使用中文字字母一律小写不能有空格使用有意义的名称CSS选择器类型类选择器ID选择器标签选择器<style>

.text1{font-size:14px;color:red;}</style><pclass=“text1">...</p><p>…</p>使用class属性应用样式<style>

#box{font-size:14px;color:red;}</style><divid=“box">...</div><div>…</div>使用id属性应用样式使用标签名应用样式<style>

p{font-size:14px;color:red;}</style><p>…</p><p>…</p>可以重复应用不能重复应用网页文字样式02网页文字常用的CSS样式属性font-size:14px;font-family:“黑体”;color:#000000;text-align:center;line-height:20px;text-indent:28px;font-weight:bold;文字大小文字字体文字颜色文字对齐方式文字行距文字缩进文字加粗网页文字样式网页结构<div>…</div>标签<hi>…</hi>标签<p>…</p>标签<span>…</span>标签网页样式文字样式DIV样式网页文字样式网页文字样式网页文字样式文字的常用样式属性字体（font-family）大小（font-size）加粗（font-weight）行距（line-height）首行缩进（text-indent）文本对齐（text-align）文字颜色（color）<div>标签属性03定义div的CSS样式常用属性width：宽度height：高度border：边框（复合样式）（border-top、border-bottom、border-left、border-right）background：背景

（background-color、background-image、background-repeat）margin：DIV边框与其它对象的距离

（margin-top、margin-bottom、margin-left、margin-right）padding：DIV边框与里面内容的距离

（padding-top、paddin-bottom、padding-left、padding-right）案例网页结构<div>…</div>标签<hi>…</hi>标签<p>…</p>标签<span>…</span>标签网页样式文字样式DIV样式案例<divid=“box”><h1>…</h1><h2>…</h2><p>...<span>...</span>......<span>...</span>...</p><h2>...</h2><h3>...</h3><p>...<span>...</span>...</p>

}.footer{}</style>案例<divid=“box”><h1>…</h1><h2>…</h2><p>...<span>...</span>......<span>...</span>...</p><h2>...</h2><h3>...</h3><p>...<span>...</span>...</p>

}.footer{}</style>ID选择器类型标签选择器类型类选择器类型案例网页结构divhipspan网页样式div的宽度、居中、边框、内边距padding、外边距marginhi、p、span的文字样式、边框、内外边距案例文字的常用样式属性字体（font-family）大小（font-size）加粗（font-weight）行距（line-height）首行缩进（text-indent）文本对齐（text-align）文字颜色（color）案例

DIV的常用样式属性宽度（width）页面居中（margin）边框（border）外部链接样式04外部链接样式结构相似，样式相同不同的结构文件，引用相同的外部样式文件<linkrel="stylesheet"type="text/css"href=""/>ex04-3.htmlsty04-3.cssex04-4.htmlsty04-3.css链接外部样式：案例使用外部样式，完成网页效果网页结构文件名：web04-3.html网页样式文件名：sty04-3.css链接外部样式文件：<linkrel="stylesheet"type="text/css"href="sty04-3.css"/>导入外部样式文件：<styletype="text/css">

@importurl("sty04-3.css");</style>案例分析网页结构h1<h1>…</h1><divclass=”box”></div><p>制作者</p><divclass=”box”></div><divclass=”box”></div><h2>…</h2><p>…</p><h2>…</h2><p>…</p><h2>…</h2><p>…</p>h2ph2ph2p案例h1案例h2ph2ph2p案例网页图像第5单元图像标签图像样式图像样式效果图文混排图像背景图像标签01网页图像格式常见的网页图像有3种格式JPG格式GIF格式：支持透明和动画PNG格式：支持透明图像标签<imgsrc=”路径”alt=”替代文本”/>src属性：设置图像路径alt属性：浏览器无法载入图像时，将在图像位置显示alt属性中设置的替代文本。<imgsrc=”img/img5-1.jpg”/><imgsrc=”/i/img.gif”/><imgsrc=”pic05-1-1.jpg”alt=”数字影像技术专业”/>图像标签<imgsrc=”路径”witdh=””height=””/>width（宽度）属性用于设置图像的宽度height（高度）属性用于设置图像的高度如果图像指定了宽度高度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。一般图像的宽高利用CSS样式设置<imgsrc=”pic05-1-1.jpg”alt=”数字影像技术专业”width=”300”height=”128”/>图像样式02图像样式常用的CSS图像样式属性width：宽度height：高度border：边框margin：外边距（图像与外界对象之间的距离）padding：内边距（图像边框与图像之间的距离）案例图像样式效果03图像样式效果图像的样式：width（宽度）height（高度）border（边框）margin（图像与外界对象的距离）padding（图像边框与图像之间的距离）opacity:0.5;（图像透明度）box-shadow:5px5px10px#f00;（边框阴影）border-radius:10px;（边框圆角）图像样式效果opacity属性用于指定元素的透明度格式：opacity:value;value是透明度，取值范围为0.0~1.0。取值越低越透明。例：opacity:0.6;图像样式效果box-shadow属性为元素添加阴影效果格式：box-shadow:h-shadowv-shadowblurspreadcolorinset;h-shadow：必需，水平阴影的位置，允许为负数v-shadow：必需，垂直阴影的位置，允许为负数blur：可选，模糊距离spread：可选，阴影的尺寸color：可选，阴影的颜色inset：可选，将外部阴影改为内部阴影例：box-shadow:0px2px

10px#333;图像样式效果border属性定义图像边框格式：border:线条样式

线条粗细

线条颜色;线条样式：必需，线条样式常用的属性值有solid（实绩）、dotted（点画线）、dashed（虚线）线条粗细：必需颜色颜色：必需例：border:solid5px#09F;border:dotted1pxred;图像样式效果bordder-radius属性用于设置元素的边框圆角例：border-radius:10px;border-radius:0px50px;border-radius:0px50px30px;border-radius:0px10px30px60px;图文混排04图文混排

<divid=“con”></div>图文混排图像样式：width、heightborder复合属性(border-style、border-width、border-color)文字环绕图像<divid=“box”><h1>……</h1>

文字

</p></div>网页结构1：<divid=“box”><h1>……</h1>

</div></div>网页结构3（建议）float:left;图像样式：clear:left;页脚文字样式：<divid=“box”><h1>……</h1>

文字

</div></div>网页结构2：float属性使用CSS的float属性可以实现文字环绕图像的效果。float属性应用于图像时，使用文本围绕在图像周围。img{float:left；}图像放在左边，网页结构中图像后的元素以围绕的方式排在图像的右边。img{float:right；}图像放在右边，网页结构中图像后的元素以围绕的方式排在图像的左边。clear属性使用float属性后，元素的高度会塌陷，对元素后面的内容显示有影响，这时需对后面的元素使用clear进行清除。clear:left；清除结构中前面的元素左浮动对该元素的影响。clear:right；清除结构中前面的元素右浮动对该元素的影响。clear:both；清除结构中前面的元素左右浮动对该元素的影响。清除浮动的方法<divid=“box”><h1>……</h1>

<divid=“main”><img/><p>文字</p>

</div></div><divid=“footer”>

页脚文字</div>清除浮动的方法一：#footer{clear:left;}清除浮动的方法二：#main{overflow:hidden;}img{float:left;}清除浮动对页脚的影响文字环绕图像<divid=“box”><h1>……</h1><divclass=“main”>

<img/><h2>……</h2><p>……</p></div><divclass=“main”>……</div><divclass=“main”>……</div><divclass=“main”>……</div></div>文字环绕图像图像居中水平居中将图像所属容器设置样式属性text-align:center;.img1{text-align:center;...<divclass=”img1”><imgsrc=”img/pic1.jpg”/></div>图像居中垂直居中图像放置在<div>标签中，可以通过div的高度、行高和图像的verticl-align属性等方法设置图像垂直居中效果<divid=”box”><imgsrc=”img/pic1.jpg”/></div>......#box{width:600px;height:400px;line-height:400px;text-align:center;}img{vertical-align:middle;}图像水平居中图像垂直居中方法之一（只适合div里只有一行元素）图像垂直居中方法之二图像背景05图像背景网页页面的图像背景div的图像背景body{background-image:url(img/pic05-5-1.jpg);}#box{width:420px;height:190px;background-image:url(img/pic05-5-2.png);}背景属性background（复合属性）background-color背景颜色background-image背景图像background-repeat背景图像重复background-position背景图像位置badkground-size背景图像大小背景属性设置div的背景图像，div的大小如下：图像大小：宽度93px，高度123px背景属性背景图像重复或背景属性背景图像不重复、图像背景距离左边框80px，距离上边框60px或背景属性背景图像横向重复、横向纵向居中或背景属性背景图像纵向重复、横向纵向居中或背景属性背景图像不重复、居中、背景颜色或背景属性背景图像不重复、右下角、背景颜色或列表第6单元列表标签列表嵌套无序列表样式有序列表样式图像列表项标签列表标签01列表标签有序列表无序列表自定义列表列表标签有序列表<oltype=“1/A/a/I/i”><li>…</li>…<li>…</li></ol>type属性——设置有序列表编号类型1:列表用数字标号 A/a:大写/小写字母标号I/I:大写/小写罗马字母标号列表标签无序列表type属性——设置无序列表符号类型disc:实心圆点 circle:空心圆点square:实心方点<ultype=“disc/circle/square/none”><li>…</li><li>…</li><li>…</li></ul>列表标签自定义列表<dl><dt>项目名</dt>/*定义项目名*/<dd>项目内容</dd>/*定义子项目内容*/ ….<dt>项目名</dt>/*定义项目名*/<dd>项目内容</dd>/*定义子项目内容*/</dl>列表嵌套02列表嵌套在一些内容进行分类显示时，会分成大类，大类中再分为若干小类，小类中还可以继续包含若干的子类。使用列表显示分类内容时，则是列表项中包含子列表，一个列表中的列表项又是一个列表，就是列表的嵌套。列表嵌套在默认情况下，第一层的项目符号是实心的圆点，第二层是空心的圆，第三层是实心的方块。列表嵌套有序列表嵌套，在默认情况下，项目编号都是数字。列表嵌套有序列表和无序列表不仅能自身嵌套，而且也以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表。无序列表样式03无序列表样式ul的list-style-type属性<ul><li>…</li><li>…</li><li>…</li></ul>无序列表样式ul的list-style-postion属性<ul><li>…</li><li>…</li><li>…</li></ul>案例有序列表样式04有序列表样式ol的list-style-type属性<ol><li>…</li><li>…</li><li>…</li></ol>有序列表样式ol的list-style-postion属性<ol><li>…</li><li>…</li><li>…</li></ol>案例图像列表项标签05图像项目符号ul的list-style-image属性格式：list-style-image:none|<url>none：默认值<url>：作为列表项标签的图像地址list-style-image:url(img/listbg1.png);list-style-image:none;案例网页导航栏第7单元链接文本样式一个网页的多种链接样式纵向导航栏横向导航栏网页导航栏链接文本样式01链接标签链接标签

<ahref=“”target=“_blank”>…</a>链接目标路径链接目标窗口链接标签链接目标路径空链接<ahref=“#”>…</a>其它页面<ahref=“file00/sub2.html”>…</a>网址<ahref=“”>…</a>邮箱<ahref=“mailto:111@”>…</a>压缩文件<ahref=“file00/a.rar”>…</a>链接文本样式a链接文字的通用样式a:link未被访问过的链接样式a:visited单击后的链接样式a:hover鼠标经过时的链接样式a:active鼠标单击（未释放）链接文字的样式伪类样式案例网页结构<divid=”box”><h1>...</h1><divid=”pic”><a><img/></a><p><a>...</a></p></div><ul><li><a>...</a></li><li><a>...</a></li><li><a>...</a></li><li><a>...</a></li></ul></div>案例链接文本样式多种链接样式02多种链接文本样式鼠标经过“更多”效果鼠标经过列表文字效果多种链接文本样式#boxh1或#title#main.boxh1或.title.mainul-liul-li#boxh1或#titleul-li.boxh1或.titleul-li网页结构分析结构一结构二结构三

结构四

多种链接文本样式#box#title#mainul-li以结构一为例分析网页样式“更多”的链接样式#titlea{}#titlea:link{}#titlea:visited{}#titlea:hover{

}#titlea:active{}列表文字的链接样式#maina{}#maina:link{}#maina:visited{}#maina:hover{

}#maina:active{}纵向导航栏03纵向导航栏鼠标经过“美丽的地球”效果网页结构行内元素和块级元素行内元素：如a、span标签不会换行对width和height属性定义宽高无效块级元素：如div、p、h1、ul、li等标签块级元素换行对width和height属性定义宽度有效行内元素与块级元素的转换display属性display:none;不显示元素display:block;显示为块级元素display:inline;显示为行内元素display:inline-block;显示为行内块级元素纵向导航栏网页结构网页样式纵向导航栏网页样式行内元素转换成块级元素纵向导航栏的制作要点导航栏常采用项目列表结构ul样式中去掉项目符号a的样式实现链接文本样式，如果有背景颜色或线框，需用display:block;将a行内元素转换成块级元素。<ul><li><a>...</a></li><li><a>...</a></li><li><a>...</a></li></ul>横向导航栏04横向导航栏的制作要点先完成纵向导航栏导航栏常采用项目列表结构ul样式中去掉项目符号a的样式实现链接文本样式，如果有背景颜色或线框，需用display:block;将a行内元素转换成块级元素。li设置左浮动li{float:left;}<ul><li><a>...</a></li><li><a>...</a></li><li><a>...</a></li></ul>float属性li{float:left;}导航栏的项目列表中，每一个列表进行左浮动；第1个列表左浮动，第2个列表则以围绕的方式排在第1个列表的右边；第2个列表左浮动，第3个列表则以围绕的方式排在第2个列表的右边；……以此类推，全部列表均改变了原来的位置，全部横排；最后一个列表左浮动，影响了后面的元素，因此后面的元素需用clear:left；清除浮动对它的影响。<ul><li><a>...</a></li><li><a>...</a></li><li><a>...</a></li></ul>float属性<ul><li><a>学校概况</a></li><li><a>人才培养</a></li>...<li><a>党建工作</a></li></ul><div>版权所有 2022</div>li{float:left;}a{display:block;}网页导航栏05常见的网页导航栏导航栏宽度与banner栏宽度一致（banner宽度约980px左右）导航栏宽度100%，与浏览器宽度相同（banner宽度约980px左右）常见的网页导航栏网页结构：#box#banner#naviul-li常见的网页导航栏#box#banner#naviul-li<divid=“box”><divid=“banner”>…</div><divid=“navi”><ul><li><a>...</a</li><li><a>...</a</li>...</ul></div></div>常见的网页导航栏网页结构：#logo#navi-bg#navi#banner常见的网页导航栏网页结构：#logo#navi-bg#navi#banner常见的网页导航栏#logo#navi-bg#banner#navi#logo{width:1000px;margin:0auto;}#navi-bg{background-color:;}#banner{width:1000px;margin:0auto;}#navi{width:1000px;margin:0auto;}<divid=“logo”>…</div><divid=“navi-bg”><divid=”navi”>…</div></div><divid=“banner”>…</div>常见的网页导航栏<divid=“navi”><ul><li><a>…</a></li><li><a>…</a></li><li><a>…</a></li></ul></div>#naviul{}列表符号#navili{}左浮动，列表间距离#navia{}链接文字通用和初始化样式#navia:hover{}鼠标经过效果#logo#navi-bg#banner#navi清除浮动的方法ul里面的li左浮动，对后面的元素产生影响清除浮动方法一：后面的元素清除#banner{

clear:left;}清除浮动方法二：浮动元素的父级元素清除#naviul{

overflow:hidden;}#logo#navi-bg#banner#naviul-li表格第8单元表格标签单元格的合并表格样式表格标签01表格表格的组成表格由若干行和列组成，行与列相交的区域为单元格。表格表格结构表格宽度：使用百分比和像素两种单位来设置。表格边框：使用像素单位设置粗细。单元格边距：单元格边框与单元格内容之间距离的像素数，默认为1px。单元格间距：单元格与单元格之间距离的像素数，默认为2px。表格标签<table></table>表格标签<caption></caption>表格标题<tr></tr>行标签<th></th>表头标签<td></td>单元格标签表格标签实例：<table><caption>表格名称</caption><tr><th>第一行第1列</th><td>第一行第2列</td></tr><tr><td>第二行第1列</td><td>第二行第2列</td></tr></table>第一行第二行table标签的属性width：宽度height：高度border：边框cellspacing：单元格间距cellpadding：单元格边距bgcolor：表格的背景颜色bordercolor：表格边框的颜色align：表格在父级元素中的水平对齐方式表格标签属性实例：<tablewidth=“500”border=“1”align=“center”>……</table><tableborder=“1”cellpadding=“10”cellspacing=“5”>……</table>单元格td(th)标签的属性width：宽度height：高度align：单元格的水平对齐属性valign：单元格的垂直对齐属性表格属性实例：<tablewidth=”660”border=”10”cellspacing=”40”cellpadding=”40”><tr><tdwidth=”180”>Loremipsum...queeqt.</th><tdwidth=”180”>

</td></tr><tr><tdheight=”100”>

</td><td>

</td></tr></table>表格属性思考：以下效果使用的标签及属性单元各合并02单元格合并colspan属性：同一行的连续若干个单元格合并rowspan属性：同一列的连续若干行单元格合并单元格合并原始表格同一行的两列单元格合并注意：被合并的单元格需删除标签单元格合并同一列的3行单元格合并原始表格注意：被合并的单元格需删除标签表格嵌套表格布局<table><tr><td>banner</td></tr><tr><td>第二行第1列</td></tr><tr><td>版权所有</td></tr></table><table><tr><td>左侧导航</td><td>主体内容</td></tr></table>表格嵌套<table><tr><td>banner</td></tr><tr><td>

</td></tr><tr><td>版权所有</td></tr></table><table><tr><td>左侧导航</td><td>主体内容</td></tr></table>表格样式03表格样式<table>标签的常用样式<tr>标签的常用样式<th>、<td>的常用样式表格样式<table>标签的常用样式width：宽度border：边框border-collapse：表格单元格边框合并表格样式表格标签效果添加表格CSS样式的效果表格样式<tr>标签的常用样式background：背景颜色或背景图像表格结构<table>和<tr>标签的样式表格效果表格样式<th>、<td>的常用样式border：边框background：背景颜色和背景图像文字样式表格样式<th>、<td>的常用样式表格结构<table>和<td>标签的样式表格效果CSS3新增选择器在表格中的应用:first-child首个子元素:last-child最后一个子元素:nth-child(n)第n个子元素CSS3新增选择器在表格中的应用表格结构表格样式表格效果表单第9单元表单标签表单样式表单新增元素新增表单属性表单标签01表单域<form>标签插入表单的基本语法：<formname=“表单名称”action=“表单处理程序”method=“数据传送方式”>……</form>例：<formname=“register”action=“files/re.asp”method=“post”>……</form><form>标签属性设置Name属性用于给表单命名。这一属性不是表单的必需属性，但是为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能符合的名称，如注册页面的表单可以命名为register。不同的表单尽量不用相同的名称，以避免混乱。<formname=“register”action=“files/re.asp”method=“post”>……</form><form>标签属性设置action属性用于指定表单数据提交到哪个地址进行处理。真正处理表单的数据脚本或程序在action属性里，这个值可以是程序或脚本的一个完整URL。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址方式，如E-mail地址等。<formname=“register”action=“files/re.asp”method=“post”>……</form><form>标签属性设置method属性用于指定在数据提交到服务器时使用哪种HTTP提交方法，其值有两种：get和post。通常情况下，在选择表单数据的传递方式时，简单、少量和安全的数据可以使用get方法进行传递，大量的数据内容或者需要保密的内容则使用post方法进行传递。<formname=“register”action=“files/re.asp”method=“post”>……</form><inputtype="text"/><inputtype="password"/><inputtype="checkbox"/><inputtype="radio"/><inputtype="files"/><inputtype="image"/><inputtype="button"/><inputtype="submit“/><inputtype="reset"/><inputtype="hidden"/>文本域密码域复选框单选钮文件域图像域按钮提交按钮重置按钮隐藏域传统的表单元素文本域文本域分为单行文本字段、密码框和多行文本框。这里说的文本域就是单行文本框。文本域的基本语法：<inputtype=“text”value=“

初始内容”size=“字符宽度”maxlength=“最多字符数”>如果只需要单行文本框显示相应的内容，而不允许浏览者输入内容，可以以单行文本框的<input>标签中添加readonly属性，并设置该属性的值为true。密码域密码域用于输入密码，在浏览者填入内容时，密码框内将以星或或其他系统定义的密码符号显示，以保证安全。密码域的基本语法：<inputtype=“password”>复选框浏览者可以在复选框中勾选一项或多项选项。复选框的基本语法如下：<inputtype=“checkbox”>在网页中，复选框的默认状态下是没有被选中的，如果希望复选框默认就是选中状态，可以在复选框的<input>标签中添加checked设置。单选按钮单选按钮和复选框一样，可以快捷让浏览者在表单中填写数据。单选按钮的基本语法：<inputtype=“radio”>为了保证多个单选钮属于同一组，必须使用一组中每个单选按钮都有相同的name属性值。文件域可以让用户在域的内部填写文件路径，然后通过表单上传。例如，在线发送E-mail时常见的附件功能。文件域的基本语法：<inputtype=“files”>图像域为了丰富网页色彩，使用图像作为提交按钮。图像域的基本语法如下：<inputtype=“image”src=“图片路径”>按钮HTML中的按钮有着广泛的应用，根据type属性的不同可以分为3种类型。按钮表单元素的基本语法如下：普通按钮：<inputtype=“button”>重置按钮：<inputtype=“reset”>提交按钮：<inputtype=“submit”>普通按钮<button></button>隐藏域在网页中起着非常重要的作用，它可以存储用户输入的信息，如姓名、电子邮件地址或常用的查看方式，在用户下次访问该网站的时候使用这些数据，但是隐藏域在浏览页面的过程中是看不到的，只有在页面的HTML代码才可以看到。隐藏域隐藏域的基本语法：<inputtype=“hidden”value=“数据”>隐藏域在页面中不可见，但是可以装载和传输数据。<textareacols=“宽度”rows=“行数”></textarea>文本区域<selectname=“name”id=“name”><option>选项一</option><option>选项二</option><option>选项三</option></select>选择域（列表）传统的表单元素文本区域如果用户需要输入大量的内容，需要用到文本区域。文本区域的基本语法：<textareacols=“宽度”rows=“行数”></textarea>选择域<formid=“form1name=“form1”method=“post”action=“”><selectname=“name”id=“name”><option>选项一</option><option>选项一</option><option>选项一</option></select></form><select>和<option>标签的相关属性说明：name:用于选择域的名称。size:用于列表的行数。value:用于设置菜单的选项值。multiple:表示以菜单的方式显示信息，省略则以列表的方式显示信息。表单样式02表单样式表单结构样式表单元素样式表单样式表单结构样式可根据需要设置表单的位置、大小、背景等样式，方法与设置div的样式一样。例如：表单的结构和样式表单样式表单元素的样式可根据需要设置表单元素的位置、大小、文本大小颜色、背景等样式，方法与设置div的样式一样。表单样式表单元素的样式表单的结构表单元素效果表单元素样式表单新增元素03HTML5新增表单元素新增input类型url、email、number、tel、search、color、data、month、week、time、datetime、datetime-local新增表单输入类型HTML5大幅度地改进了<input>标签的类型。不同类型的表单元素所附加的功能也不相同。到目前为止，对HTML5新增表单元素支持最多、最全面的浏览器是Opera浏览器。对于不支持新增表单类型的浏览器来说，会默认识别为text类型，即显示为普通文本域。url类型格式<inputtype=“url”name=“weburl”id=“weburl”value=“”>专门输入地址。在验证输入文本的格式时，如果该文本框中的内容不符合url地址的格式，会提示验证错误。email类型格式：<inputtype=“email”name=“myEmail”id=“myEmail”value=““>输入的内容不符合E-mail地址的格式时，会提示验证错误。range类型把输入框显示为滑动条，为某一特定范围内的数值选择器，min和max表示选择范围的最小值（默认为0）和最大值（默认为100），step属性，表示拖动步长（默认为1）。<inputtype=“range”name=“volume”id=“volume”min=“0”max=“10”step=“2”>number类型输入选定的数字，与range类型类似。<inputtype="number"name="score"id="score"min="0"max="10"step="0.5"/>pattern属性：正则表达式匹配<inputtype="number"pattern="\d"><inputtype="number"pattern="[0-9]*"><inputtype="number"pattern="\d{3}"><inputtype="number"pattern="[a-z]{3}">tel类型输入电话号码，没有特殊的验证规则。<inputtype="tel"name="tel"id="tel"/>可通过pattern属性设置输入限制search类型输入搜索引擎关键词定义的文本框，没有特殊的验证规则。<inputtype="search"name="search"id="search"/>color类型提供一个颜色选择器<inputtype="color"name="color"id="color"value="#ff0000"/>data类型输入日期的文本框<inputtype="date"name="date"id="date"/>month、week、time、datetime、datetime-local类型<inputtype="month"name="month"id="month"/><inputtype="week"name="week"id="week"/><inputtype="datetime"name="datetime"id="datetime"/><inputtype="datetime-local"name="datetime-local"id="datetime-local"/>文本类<inputtype=“email”/>有验证规则<inputtype=“search”/><inputtype=“url”/>有验证规则数字类<inputtype="number"/>有验证规则<inputtype="tel"/><inputtype="range“min="0"max="10"/>日期时间类<inputtype="date"/><inputtype="datetime"/><inputtype="datetime-local"/><inpu

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计与制作(HTML+DIV+CSS)中职PPT完整全套教学课件

文档简介

温馨提示

最新文档

评论

网页设计与制作(HTML+DIV+CSS)中职PPT完整全套教学课件

文档简介

温馨提示

最新文档

评论

相关文档