Download presentation
Presentation is loading. Please wait.
1
第一章 什么是程序 程序是怎么开发出来的 编译 连接 运行 什么是 IDE 编译和调试 HTML的基本标签
2
课程地位 Prev HTML SQL Base Logic Java C#/WinForms STB
Project1:ADO.Net+WinForms C/S ADO.Net/Three Tier JavaScript SQL Advance Java OOP Project2: B/S .Net/OOP JSP Ajax/Web Service JSP/Servlet/JavaBean/Web Service Struts/Hibernate/Spring/Ajax ASP.Net NTC Project3: Net/Java HR/CRM/OA/B2C B/S 行业手册
3
就业技能结构图
4
本门课程目标和课程项目展示 本门课程目标 课程项目展示 学完本门课程后，你能够：
能制作界面美观大方、面向企业应用的静态商业网站，不含动态脚本功能。 演示示例1：课程项目展示
5
预习检查 请详述HTML文档的基本结构。 图像与文本的对齐方式有哪几种？ 通常使用那个标签的那个属性来创建超链接？
6
本章任务 制作图文并茂的“广告”页面 查看源代码
7
本章目标 会使用HTML的基本结构创建网页 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面
会使用超链接相关标签实现页面间的跳转
8
<HTML>…</HTML>标签标记 HTML 文档的开始和结束
查看源代码 <HTML> <HEAD> <TITLE>我的第一个网页 </TITLE> </HEAD> <BODY > Hello World! </BODY> </HTML> 网页标题 <HEAD>头部部分 HTML 网页 <BODY>主体部分 网页内容，可以是文本、图像等 <HTML>…</HTML>标签标记 HTML 文档的开始和结束 这部分包含文本、图像和链接。它包括在 <BODY>…</BODY> 标签内 这部分包括标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内
9
使用记事本创建网页 使用记事本创建网页 使用记事本创建网页的步骤： 1、打开记事本 2、输入HTML代码
3、保存为*.html或*.htm文件，注意格式问题 4、打开网页预览效果 演示示例2：如何在记事本里创建网页
10
<META>标签 网页页面中出现乱码，那如何消除乱码使其正常显示？ 使用<META>标签 简体中文：gb2312
繁体中文：big5 纯英文网页：iso <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>网页标题</TITLE> </HEAD> 可以避免页面中的乱码
11
页面背景色或背景图像 查看源代码 网页背景色彩 网页背景图像
<BODY bgcolor="#FFCCFF“ background="back_image.GIF" > Hello World！ </BODY> 查看源代码 …… <BODY bgcolor="#FFCCFF“> Hello World! </BODY> 为了使页面美丽大方，网页背景要尽量地浅
12
文本相关标签 字体、字号 行的控制 标题标签<H1>－<H6> <FONT>标签 特殊符号
设置了字体的大小和颜色 字体、字号 标题标签<H1>－<H6> <FONT>标签 特殊符号 行的控制 段落标签<P> 换行标签<BR> 使用了 <H2>… <H2> 换段了 换行了 特殊符号
13
字体、字号相关标签 标题标签 查看源代码 <H#> ... </H#> #=1, 2, 3, 4, 5, 6
字体大小依 次递减 查看源代码 …… <BODY> <H1>一级标题</H1> <H2>二级标题</H2> <H3>三级标题</H3> <H4>四级标题</H4> <H5>五级标题</H5> <H6>六级标题</H6> </BODY> H1 到 H6 标签用于指定不同级别的标题
14
字体、字号相关标签 <FONT>标签 特殊符号 字体的 大小值
<FONT size=“+2” color=“red” face=“律书” > ... </FONT> 字体的 颜色 字体的 类型 特殊字符 转义码 空格 引号(“”) " 小于(<) < 大于(>) > 版权号(© )
15
字体、字号相关标签 查看源代码 ...... <BODY>
<P> <FONT size="+2" color="red" > 手机充值、IP卡/电话卡 </FONT><BR /> 移动 | 100 | 联通 | 50</P> Copyright © 2007 "淘宝网" All rights. </BODY> …… 空格效果
16
行的控制相关标签 段落标签<P> 换行标签<BR> 查看源代码
段(Paragraph) (可以看作是空行) <p> 换行标签<BR> 换行 <br> 查看源代码 ……. <P align="center">淘宝集市欢迎您！</P> <P align="left">淘宝网首届翠友会！<BR> …… </P> 换段了 换行了
17
图像标签 常见的图片格式介绍 图像类型 优点 缺点 适用场合 制作工具 *.jpg 体积小，比较清晰 有损压缩 、画面失真 网页图片
Photoshop *.gif 支持 Internet 标准 ,支持无损耗压缩和透明度，很流行 支持有限的透明度,效果不如别的图像 *.swf 体积小,便于网络传输 制作麻烦 网页动画 Flash *.bmp 支持 24 位颜色深度，兼容性好 不支持压缩 容量大 桌面墙纸 photoshop
18
图像标签 图像的位置 图像的宽度 图像的高度 图像的基本语法 <IMG src="images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕" > 为图像添加的提示性文字 查看源代码 …… <BODY> <IMG src="images/adv_2.jpg" alt="明星演唱会开幕" width="300"height="150"> </BODY> 鼠标移到图像上，出现的提示性文字
19
图像标签 图像与文本的对齐方式 查看源代码 <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> …… 图像和文本居中对齐
20
小结1 编写如下图所示效果对应的html代码 字号大小为3 讲解要点： 练习代码 练习答案
21
文字布局 内容分隔<HR>标签 项目列表和编号 预格式文本<PRE>标签 有序列表<OL>
无序列表<UL> 预格式文本<PRE>标签 水平分隔线<HR> 有序列表 无序列表 用了预先定义好的格式
22
如何使用内容分隔<HR>标签
线的厚度值 线的颜色 线的宽度 <HR size="5" color="red" width="300"> 查看源代码 …… <BODY> <HR size="5" color="red" width="300"> <HR size="10" color="black" width="200"> <HR size="5" color="#0000FF" width="50%"> </BODY> <HR> 标签用于在页面上绘制水平线
23
如何使用列表 查看源代码 无序列表语法 有序列表语法 <UL> <LI>列表项内容 </LI> ……
<OL > </OL> <H4>注册步骤：</H4> <OL type="1" > <LI>填写信息</LI> <LI>收电子邮件</LI> <LI>注册成功 </LI> </OL> 新人上路指南 <UL type="circle"> <LI>如何激活会员名？ </LI> <LI>如何注册淘宝会员？ </LI> <LI>注册时密码设置有什么要求？</LI> <LI>支付宝认证</LI> </UL>
24
预格式文本<PRE>标签 如何实现如下图所示的页面中的文字效果？ 使用<PRE> 标签可以实现
25
如何使用预格式文本<PRE>标签
查看源代码 <PRE> <IMG src="images/QQ.JPG" width="159" height="133" align="LEFT"> 腾讯-QQ币/QQ幻想-30元卡 一 口 价：26.45元 运 费：卖家承担运费 剩余时间：5天 宝贝类型： 全新 卖主声明：货到付款，可试用10天！ </PRE> HTML中代码格式与浏览器中显示效果一样
26
页面链接<A>标签 查看源代码 链接到其他页面
<A href="register/register.html">[免费注册]</A> <HTML> <HEAD> <TITLE>链接到其他页面</TITLE> </HEAD> <BODY> <A href="register/register.html">[免费注册]</A> <A href="login/login.htm">[登录]</A> </BODY> </HTML> 链接的地址 链接内容 单击”[免费注册]”之后链接到的页面
27
页面链接<A>标签 在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？ 链接到其他页面
两种方式：相对路径和绝对路径 链接到其他页面 相对路径 指定从根目录到文件的完整路径。 绝对路径 指定相对于当前文件的文件位置。
28
页面链接<A>标签 要链接到同一目录 (C:\HTML) 下的页面，可编写 <A HREF =
“Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”> 相对路径名 绝对路径名
29
页面链接<A>标签 要实现如下图所示的超链接效果，怎么办？ 使用锚记标签 演示示例3：演示锚链接的例子
30
页面链接<A>标签 链接到本页面 锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记
<A NAME = “marker”>主题名称</A> 为达到这种跳转效果，请在 HREF 参数中使用该标记 <A HREF= “#marker”>主题名称</A> <HTML> <HEAD> <TITLE>链接到其他页面</TITLE> </HEAD> <BODY> <A href="#helpme">[新人上路]</A> …… <A name="helpme">新人上路指南</A> </BODY> </HTML> 2、链接到锚标记所在位置 1、定义锚标记 演示示例4：演示锚链接的例子
31
页面链接<A>标签 电子邮件链接 要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”
<A 单击”站长信箱”链接后的输出结果 <HTML> <HEAD> <TITLE>电子邮件链接</TITLE> </HEAD> <BODY> …… <A href="mailto: "> 站长信箱</A> </BODY> </HTML> 任何正确的电子邮箱地址均可 演示示例5：演示电子邮件链接
32
滚动<MARQUEE>标签 说明： scrolldelay：表示滚动延迟时间，默认值为90。
<MARQUEE scrolldelay =“100” direction=“up " > 滚动文字或图像 </MARQUEE> 滚动延迟时间 滚动对象的方向 说明： scrolldelay：表示滚动延迟时间，默认值为90。 direction：表示滚动的方向，默认为从右向左。
33
声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动
滚动<MARQUEE>标签 声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动 声明滚动文字结束 查看源代码 <MARQUEE scrolldelay ="100" >水平滚动</MARQUEE> <MARQUEE scrolldelay ="200" direction="up" >垂直滚动</MARQUEE> <MARQUEE scrolldelay ="300" direction="up" onmouseover="this.stop()" onMouseOut="this.start()"> <A href="#"><IMG src="images/scroll/1.gif" border="0" align="middle"> Avon化妆品</A><BR> <A href="#"><IMG src="images/scroll/2.gif" border="0" align="middle"> 雅诗兰黛 </A><BR> …… </MARQUEE> 水平向左移动 垂直向上移动 图片和文字同时垂直向上移动
34
小结2 编写如下图所示效果对应的html代码 练习代码 练习答案 有序列表OL 无序列表UL 讲解要点：
35
总结 哪个标签中的哪个属性可以改变字体颜色和字号？ 图像与文本的对齐方式有哪几种？ 项目列表和编号有何区别？分别适用什么场合？
链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别和联系？
Similar presentations
