就业技能结构图
课程目标
· 学完本门课程后，你能够：
· 能制作界面美观大方、面向企业应用的静态商业网站
· 不含动态脚本功能
预习检查
· HTML文档的基本结构包括哪几部分？
· 图像与文本的对齐方式有哪几种？
· 通常使用哪个标签来创建超链接？
本章任务
制作图文并茂的“广告”页面
本章目标
· 会使用HTML的基本结构创建网页
· 会使用文本相关标签实现文字修饰和布局
· 会使用图像相关标签实现图文并茂的页面
会使用超链接相关标签实现页面间的跳转
HTML文件的基本结构
使用记事本创建网页
使用记事本创建网页的步骤：
1、打开记事本
2、输入HTML代码
3、保存为*.html或*.htm文件，注意格式问题
4、打开网页预览效果
<META>标签
网页页面中出现乱码，那如何消除乱码使其正常显示?
页面背景色或背景图像
文本相关标签
字体、字号相关标签
字体、字号相关标签
行的控制相关标签
· 段落标签<P>
· 段(Paragraph) (可以看作是空行) <p>
· 换行标签<BR>
换行<br>
图像标签
编写如下图所示效果对应的html代码
文字布局
如何使用内容分隔<HR>标签
如何使用列表
预格式文本<PRE>标签
在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？
· 链接到本页面
· 锚记标签用于使用户“跳”到文档的某个部分
· HTML 的NAME属性用于创建锚标记
<A NAME = "marker">主题名称</A>
· 为达到这种跳转效果，请在HREF 参数中使用该标记
<A HREF= "#marker">主题名称</A>
<HTML>
<HEAD>
<TITLE>链接到其他页面</TITLE>
</HEAD>
<BODY>
<A href="#helpme">[新人上路]</A>
……
<Aname="helpme">新人上路指南</A>
……
</BODY>
</HTML>
· 电子邮件链接
· 要链接电子邮件，可在链接标签中插入“mailto:邮箱地址”
<A href="mailto:webmaster@sohu.com">站长信箱</A>
滚动<MARQUEE>标签
编写如下图所示效果对应的html代码
总结
· 哪个标签中的哪个属性可以改变字体颜色和字号？
答：font可以
· 图像与文本的对齐方式有哪几种？
答：顶部，中部，底部
· 项目列表和编号有何区别？分别适用什么场合？
答：项目列表是无序的，项目编号是有序的。
链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，二者有何区别和联系？
相对路径在同一目录下调用文件，只写文件名称。绝对路径是要答：写路径的全称。绝对路径中包括相对路径。
1.meta标签：
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
http-equiv="Content-Type"是超文本协议
content="text/html;内容是html的文本
charset=gb2312"编码是gb2312支持中文的
2.body标签
<BODY bgcolor="#FFCCFF" background="back_image.GIF" >
background背景图片
bgcolor背景颜色
3.<H1>－<H6>
标题从大到小
4.<FONT size=“+2” color=“red” face=“律书” >
size=“+2” 文字大小
color=“red”文字颜色
face=“律书” 字体
5.特殊符号 &
空格
<
6.<P> </p>
段落
7.<br />
换行
8.<IMG align="middle" src="images/adv_2.jpg" width="180" height="95" border="0" alt="明星演唱会开幕" />
align="middle"后面的文字对齐方式,只能对齐一排文字
src="images/adv_2.jpg" 图片源目录
width 图片宽度
height 图片高度
alt="明星演唱会开幕" 鼠标移上去提示文字
border="0" 图片边框大小
9.<A href="login/login.htm">[登录]</A>
href 跳转页面
<A href="#helpme">[新人上路]</A>
<A name="helpme">新人上路指南</A>
href 跳转本页面
<A href="mailto: taobaoWebMater@taobao.com ">
href 跳转到邮件
10.<marquee scrolldelay="100" direction="right" οnmοuseοver="this.stop()" οnmοuseοut="this.start()" behavior="alternate">
scrolldelay="100" 滚动延迟
direction="right" 滚动方向
οnmοuseοver="this.stop()" 当鼠标移上来停止
οnmοuseοut="this.start()" 当鼠标移开开始动
behavior="alternate" 行为是来回滚动
11.<OL type="1" >
<LI>填写信息</LI>
<LI>收电子邮件</LI>
<LI>注册成功</LI>
</OL>
<OL type="1" >有序列表的类型
<LI>填写信息</LI>有序列表的内容
<UL type="circle">
<LI>如何激活会员名？</LI>
<LI>如何注册淘宝会员？</LI>
<LI>注册时密码设置有什么要求？</LI>
<LI>支付宝认证</LI>
</UL>
<UL type="circle"> 无序列表的类型
<LI>如何激活会员名？</LI> 无序列表的内容
12.<PRE>
<IMG src="images/QQ.JPG" width="159" height="133" align="left">
腾讯-QQ币/QQ幻想-30元卡
一口价：26.45元
运 费：卖家承担运费
剩余时间：5天
宝贝类型：全新
卖主声明：货到付款，可试用10天！
</PRE>
所见即所得
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
