课件html部分培训

上传人：0*** IP属地：湖北上传时间：2023-02-03 格式：PPT 页数：99 大小：6.52MB 积分：28 举报 版权申诉

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

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

文档简介

1-网页设计与制作

—初识主要内容课程概述学习资料网页相关知识网页的基本结构1、课程概述网页三剑客：Dreamweaver：“所见即所得”的可视化网站开发工具。

Photoshop：以设计和处理平面图片为特长。Flash：以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。网页三剑客招聘网站网站设计相关职位人数需求表

职位搜索14525（2011年3月8日）（2012年3月5日）31445实例展示html->标记->网页内容CSS->属性->网页样式美观的网页+=课程内容体系网页设计与制作30课时本课程分为4个部分，安排如下：（1）HTML部分（6学时）网页设计基础知识、HTML。（2）Dreamweaver部分（4学时）Dreamweaver基本操作、网站设计综述。（3）CSS部分（16学时）CSS基础、Dreamweaver中使用CSS、盒模型、DIV+CSS。（4）综合部分（4学时）网站综合设计项目综合案例学习资料w3school.chmcss2.0参考手册.chm

布啦布啦网站网页相关知识页面浏览过程浏览器静态和动态页面HTML页面的执行过程浏览器（Browser）IE6.07.08.0Firefox更多……完成的网页应在多种浏览器中都有较好的浏览效果。现实中的网页静态网页动态网页可从文件的扩展名来判断静态网页的URL的后缀是.htm、.html、.shtml、.xml等;动态网页的URL的后缀是.asp、.aspx、.jsp、.php、

.perl、.cgi等。什么是HTML文件？

HTML的英文全称是HyperTextMarkUpLanguage，中文叫做“超文本标记语言”。一个HTML文件的后缀名是.htm或者是.html。用记事本就可以编写HTML文件。

HTML的标记HTML标记最基本的格式是：

<标记>内容</标记>标记通常成对使用：<标记>表示某种格式的开始，</标记>表示这种格式的结束。实例1用记事本写第一个网页标准HTML文件的结构<html><head><title>这是网页的标题

</title></head><body>这是页面的主体内容。</body></html>html标记头

部

信

息主体网页的题目2-网页设计与制作

—html基本标记html基本标记–文本<h?>……</h?>标题<p>……</p>段落<br/>换行注释<em>斜体<strong>粗体<ul>无序列表<li>列表项实例2标题字<h?>通过上面的实例，可以发现：（1）<h1>到<h6>的内容都自动加粗并且显示为黑体字。（2）<h1>到<h6>自动换行。<html><head><title>标题标记的作用</title></head><body>

这里是正文……

<h1>

我是H1标题字，我最大

</h1><h2>

我是H2标题字

</h2>

<h3>

我是H3标题字

</h3>

<h4>

我是H4标题字

</h4><h5>

我是H5标题字

</h5><h6>

我是H6标题字，我最小

</h6></body></html>headline实例3分段标记和换行标记<p>……</p>是分段标记，它是一个成对的标记，段之间的距离较大，相当于换行后又空一行。

<br/>是换行标记，它是一个单标记，表示换行。<body>

大家好<p>我是分段标记，是一对哦~</p>

看清楚哦<br/>我是换行标记，是个单标记！</body>paragraphbreakline实例4注释语句的应用注释语句中的内容不显示在网页上。1、说明文字2、隐藏暂时不用的代码或功能<body>

这是标有制作日期的页面。</body>常用文本格式标记文本标记含义说明对应英文释义<em>强调文本，通常以斜体显示emphasis

<strong>加重强调，通常是黑体strong实例5常用文本格式标记<body><p>斜体字可以用<em>em表示。</em></p><p>粗体不换行的话，可以用<strong>strong表示。</strong></p></body>html基本标记-列表<ol><li>（有序列表）<ul><li>（无序列表）实例6有序列表在有序列表中，每个列表项前标有数字，表示顺序。有序列表由<ol>开始，每个列表项由<li>开始。<body><h2>常用的搜索引擎</h2>

<ol>

<li>Google</li>

</ol></body>ordered

listlist实例7无序列表无序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点、方块等。无序列表由<ul>开始，每个列表项同样由<li>开始。<body><h2>儿时的经典动画片</h2>

<ul>

</ul></body>unordered

listhtml的属性HTML标记可以有很多属性，属性可以扩展HTML标记的功能。语法格式如下：<标记属性1="属性值1"

属性2="属性值2"

……>……</标记>属性通常是写在开始标记里面，属性值一般用双引号标记起来（注意：是英文半角状态下的双引号）,多个属性并列的时候，用空格间隔，

实例1align属性align属性的作用是定义水平对齐方式，常见属性值有：left、center、right三种，能够控制大多数元素的左对齐、居中对齐和右对齐。<body><palign="left">左对齐</p><palign="center">居中对齐</p><palign="right">右对齐</p></body>实例2style属性<标记style="属性名称1：属性值1;属性名称2：属性值2">……</标记><body><pstyle="color:red;font-size:12px;">文字的颜色和大小都改变了哦~</p></body>网页颜色RGB分别是Red、Green、Blue的首字母，即红、绿、蓝三原色的意思。表示方式为#rrggbb。其中红、绿、蓝三色的对应取值范围都是00到ff。如：白色的RGB值(255,255,255)，就用#ffffff表示；黑色的RGB值(0,0,0)，就用#000000表示。<body><pstyle="color:#ff0000;font-size:12px;">文字的颜色和大小都改变了哦~</p></body>实例3添加背景颜色<bodystyle="background-color:#006600">我有背景颜色了，哈哈~</body>实例4<div>和<span><div>标记是一个块状的容器，其默认的状态就是占据整个一行。<span>标记是一个行间的容器，其默认状态是行间的一部分，占据行的长短由内容的多少来决定。<body><divstyle="background-color:#3399FF">块状区域1</div><divstyle="background-color:#99CCFF">块状区域2</div><spanstyle="background-color:#FFCCFF">行间区域1</span><spanstyle="background-color:#993399">行间区域2</span></body>实例5marquee应用1滚动字幕标记的基本语法结构如下：<marquee>……</marquee>实例6marquee应用2<body><marqueedirection="up"onmouseover="stop()"onmouseout="start()">通知<br/>有人看我就停下来<br/>没人看我就继续走~</marquee></body>html基本标记小结文本标记含义说明<h?>设置正文标题字体的大小<p>设置文本的段落<br/>换行<em>强调文本，通常以斜体显示<strong>加重强调，通常是黑体HTML文件中的解释和说明<ul>表示不排序的项目列表<li>表示列表中的一个项目<div>是一个块状的容器，默认的状态是占据整个一行<span>是一个行间的容器，其默认状态是行间的一部分，占据行的长短由内容的多少来决定。Xhtml

代码撰写规范1．所有的标记都必须要有一个相应的结束标记。例如：<p>……</p><br/>2.所有标签的元素和属性的名字都必须使用小写.例如：<BODY>必须写成<body>3.XHTML元素必须合理嵌套。例如：下面的代码：<p><b></p></b>必须修改为：<p><b></b></p>4.所有的属性必须用英文双引号括起来。例如：<palign="left">左对齐</p>课后练习-电影介绍编写一个电影介绍页面，如图所示。注意所选html标签的含义要准确，代码简单、有效。不需要应用任何样式。拓展文档：定义标题的最好方法3-网页设计与制作

—html标记进阶上节课知识点复习html标记长什么样子？网页的基本结构是什么？常用的标记有哪些？主要内容图片超链接表格表单插入图片图像格式文件路径绝对路径相对路径插入图片站点网页设计与制作实例教程图像格式图片有很多格式，常见的有BMP、JPG、GIF、PNG等，网页设计中最常用的是JPG和GIF两种。JPG格式：可压缩文件，扩展名为jpg或jpeg，数码相机所采用的图片格式大多是JPG。GIF格式：压缩文件，可在一个GIF文件中可以同时存多幅彩色图像，构成GIF动画。应避免在网页中使用体积较大的图片。支持透明功能的图片格式：GIF、PNG

（示例）网页设计与制作实例教程文件路径HTML超文本标记语言能够利用URL，将不同格式、不同属性、不同位置的各种网络资源，用统一的方式互相链接起来。常见的文件路径有两种：一种是绝对路径，另一种是相对路径，下面分别来介绍。网页设计与制作实例教程绝对路径绝对路径是指带域名的文件的完整路径。一个完整的绝对路径包括以下几个部分：一个传输协议（如HTTP协议）网络域名或者服务器IP地址网站结构的目录树文件名（文本、图片、音频和视频等）这些部分就构成了一个完整的绝对路径，例如：/news/2011/0801/article_3439.html网页设计与制作实例教程相对路径相对路径这个概念，在网页制作中经常遇到，比如超链接、链接图片、背景音乐、CSS文件、JS文件、数据库等，都要应用到相对路径。什么是相对路径？相对路径就是指由这个文件所在的位置引起的跟其它文件(或文件夹)的路径关系，也就是自己相对于目标的位置。网页设计与制作实例教程实例演示

在网页中插入图片网页设计与制作实例教程在网页中使用图片HTML中插入图片用的是<img/>标记,它的属性包括图片的路径、宽、高和替代文字等。基本语法格式如下：<imgsrc="#"

title="**"/>

#代表图片的URL**代表在浏览器尚未完全读入图片时，在图片位置显示的替代文字。网页设计与制作实例教程实例分析目前在本地硬盘有这样的一个文件结构：一个网页3-1.html：需要浏览的网页。一幅图片heart.jpg：心的图片。一个文件夹image：里面有一副图片f.jpg。网页设计与制作实例教程各种相对路径总结归纳起来，对于各种相对路径主要有三种情况。（1）当前目录：src=”a.jpg”

如果源文件和引用文件在同一个目录里，直接写引用文件名即可。（2）当前目录上一层：src=”../a.jpg”../表示源文件所在目录的上一级目录，../../表示源文件当前目录的上一级目录的上一级目录。（3）下级目录：src=”**/a.jpg”

引用下级目录的文件，直接写下级目录文件的路径即可，其中**代表具体的文件名或者目录名。网页设计与制作实例教程来个游戏,考验一下~~path_test文件夹中一共有4个文件，分别是a1.html,a2.html,a3.html,a4.html,每个文件要求显示4副图片，但现在每个网页只能显示一幅图片，查看html文件和图片文件的位置，使用相对路径改写路径，让每个网页都能够显示全部图片。测试题：实例

多媒体音频：wma、mp3、wav视频：avi、rm、rmvb、mpg、wmv<embedsrc=“#"width="200"height="25"/>综合练习续1：电影介绍超链接超链接外部链接、内部链接与空链接target和title属性图片超链接基本语法例如：<ahref="http://">yahoo</a><ahref="sport.html">sport</a><ahref=“#”>空链接</a>anchor:下锚

<ahref="URL“target=""title="">...</a>实例1：外部链接、空链接与内部链接<ahref="http:///">布啦布啦首页</a><ahref="link.html">电影介绍页面</a><ahref="#">空链接</a></body>实例2：title属性和target属性不同的打开超链接方式：target

_blank：在一个未命名的新浏览器窗口载入所链接的文档。_self：是浏览器的默认值，会在当前窗口或框架中打开链接的网页。还有其他两种方式：_parent_top<ahref=“6”target=“_blank”>16网站</a>实例3：图片超链接测试：点击图片打开一个网站，看谁能实现？图片超链接即在<a>和</a>之间包含<img

src="***"/>，鼠标点击图片即可链接到href所对应的文件。实例4：文件的链接<ahref="a.doc"><img

src="img/doc.jpg"

/></a><ahref="b.pdf"><img

src="img/pdf.jpg"

/></a><ahref="c.ppt"><img

src="img/ppt.jpg"

/></a><ahref="d.rar"><img

src="img/rar.jpg"

/></a><ahref="e.xls"><img

src="img/xls.jpg"

/></a>实例应用：电影主演介绍表格表格标记表格的基本结构表格的属性网页中常见其身影-1网页中常见其身影-2网页中常见其身影-3实例1表格的基本标记<table

border=”1”><caption>期末成绩</caption><tr><th>学号</th><th>姓名</th><th>成绩</th>

</tr><tr><td>01</td><td>张三</td><td>85</td>

</tr><tr><td>02</td><td>李四</td><td>95</td>

</tr></table>网页设计与制作实例教程表单表单的功能表单标记<form>表单中常用的控件和属性网页设计与制作实例教程常见的表单身影1-登陆网页设计与制作实例教程常见的表单身影2-注册网页设计与制作实例教程常见的表单身影3-搜索网页设计与制作实例教程常见的表单身影4-调查问卷或试题网页设计与制作实例教程HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。表单的主要作用是向服务器提交信息，让用户和服务器进行交互，但这需要服务器端程序的支持。表单的概念和功能表单的应用表单1表单2网页设计与制作实例教程表单结构<form>是表单的标记，可以看做一个包含很多表单控件的容器，它的主要功能就是布局各种表单控件，让表单以友好的界面呈献给用户。基本语法结构是：<form>

表单的内容</form>网页设计与制作实例教程表单控件(FormControls)通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如下面的例句里，inputtype=“text”就是一个表单控件，表示一个单行输入框。网页设计与制作实例教程实例4简单的表单输入

<form><inputtype="text"name="search"/><inputtype="submit"value="搜索"/></form>网页设计与制作实例教程表单中常用的控件和属性控件标记作用inputtype="text"单行文本输入框inputtype="password"密码输入框(输入的文字用*表示，以防别人偷窥)inputtype="radio"单选框inputtype="checkbox"复选框inputtype="submit"将表单里的信息提交给表单里action所指向的文件inputtype="reset"清除用户填的所有信息，回到初始状态select下拉框textArea多行文本输入框网页设计与制作实例教程实例5简单的登陆页面<form><h3>简单的登陆页面</h3>姓名:<inputtype="text"name="your_name"size="20"/><br/>密码:<inputtype="password"name="pas"/><br/>确认密码:<inputtype="password"name="pas1"/><br/>您的主页地址:<inputtype="text"name="add"value="http://"/><br/><inputtype="submit"value="发送"/><inputtype="reset"value="重设"/></form>网页设计与制作实例教程实例6单选和复选控件<form>您的性别是：<br/><inputtype="radio"name="sex"value="boy"/>男生<inputtype="radio"name="sex"value="girl"checked=”checked”/>女生<inputtype="radio"name="sex"value="secret"/>保密<br/>您最喜欢的休闲活动是：<br/><inputtype="checkbox"name="enjoy"/>听音乐<inputtype="checkbox"name="enjoy"/>看电影<inputtype="checkbox"name="enjoy"/>打游戏<br/><inputtype="submit"value="发送"/><inputtype="reset"value="重置"/></form>网页设计与制作实例教程实例7文本框和下拉菜单的练习<form>您的年龄：<br/><selectname="age"><option>0-17岁</option><option

selected=”selected”>18-30岁</option><option>30-45岁</option></select><br/>您的建议是：<br/><textareaname="advice"rows="5"cols="60">请写下您宝贵建议

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

课件html部分培训

文档简介

温馨提示

最新文档

评论

课件html部分培训

文档简介

温馨提示

最新文档

评论

相关文档