网页制作-01-Html1

南京航空航天大学邱菊：[e-mail]2010.08.10第1章HTML基础南京航空航天大学本门课程目标和课程项目展示•课程目标–学完本门课程后，你能够：•能制作界面美观大方、简洁实用的静态网站，不含动态脚本功能。–课程项目展示•演示示例1：课程项目展示南京航空航天大学预习检查•请详述HTML文档的基本结构。•图像与文本的对齐方式有哪几种？•通常使用哪个标签的哪个属性来创建超链接？南京航空航天大学本章任务•制作图文并茂的“广告”页面查看源代码南京航空航天大学本章目标•会使用HTML的基本结构创建网页•会使用文本相关标签实现文字修饰和布局•会使用图像相关标签实现图文并茂的页面•会使用超链接相关标签实现页面间的跳转南京航空航天大学HTML文件的基本结构•HTML文档的结构HTMLHEADTITLE我的第一个网页/TITLE/HEADBODYHelloWorld!/BODY/HTMLHTML网页HEAD头部部分BODY主体部分HTML…/HTML标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在BODY…/BODY标签内这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内查看源代码南京航空航天大学使用记事本创建网页•使用记事本创建网页–使用记事本创建网页的步骤：1.打开记事本2.输入HTML代码3.保存为*.html或*.htm文件，注意格式问题4.打开网页预览效果演示示例2：如何在记事本里创建网页南京航空航天大学META标签–网页中出现乱码，如何消除乱码使其正常显示？使用META标签HEADMETAhttp-equiv=Content-Typecontent=text/html;charset=gb2312TITLE网页标题/TITLE/HEAD简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1可以避免页面中的乱码南京航空航天大学页面背景色或背景图像BODYbgcolor=#FFCCFF“background=back_image.GIFHelloWorld！/BODY为了使页面美丽大方，网页背景要尽量地浅……BODYbgcolor=#FFCCFF“HelloWorld!/BODY……查看源代码网页背景色彩网页背景图像南京航空航天大学文本相关标签•字体、字号–标题标签H1－H6–FONT标签–特殊符号•行的控制–段落标签P–换行标签BR使用了H2…H2换段了设置了字体的大小和颜色换行了特殊符号南京航空航天大学字体、字号相关标签•标题标签H#.../H##=1,2,3,4,5,6•说明：H1到H6–字体大小依–次递减……BODYH1一级标题/H1H2二级标题/H2H3三级标题/H3H4四级标题/H4H5五级标题/H5H6六级标题/H6/BODY……查看源代码H1到H6标签用于指定不同级别的标题南京航空航天大学字体、字号相关标签•FONT标签•特殊符号FONTsize=“+2”color=“red”face=“律书”.../FONT字体的大小值字体的颜色字体的类型特殊字符转义码空格 引号(“”)"小于()<大于()>版权号(©)©南京航空航天大学字体、字号相关标签查看源代码......BODYPFONTsize=+2color=red手机充值、IP卡/电话卡/FONTBR/移动 | 100| 联通| 50/PCopyright©2007"淘宝网"Allrights./BODY……空格效果南京航空航天大学行的控制相关标签•段落标签P–段(Paragraph)(可以看作是空行)p•换行标签BR–换行br…….Palign=center淘宝集市欢迎您！/PPalign=left淘宝网首届翠友会！BR……/P……查看源代码换段了换行了南京航空航天大学图像标签•常见的图片格式介绍图像类型优点缺点适用场合制作工具*.jpg体积小，比较清晰有损压缩、画面失真网页图片Photoshop*.gif支持Internet标准,支持无损耗压缩和透明度，很流行支持有限的透明度,效果不如别的图像网页图片Photoshop*.swf体积小,便于网络传输制作麻烦网页动画Flash*.bmp支持24位颜色深度，兼容性好不支持压缩容量大桌面墙纸photoshop南京航空航天大学图像标签•图像的基本语法–IMGsrc=images/adv_2.jpgwidth=300“height=150“alt=明星演唱会开幕图像的位置图像的宽度图像的高度为图像添加的提示性文字……BODYIMGsrc=images/adv_2.jpgalt=明星演唱会开幕width=300height=150/BODY……查看源代码鼠标移到图像上，出现的提示性文字南京航空航天大学图像标签•图像与文本的对齐方式–IMGalign=middle图像与文本居中对齐,还可以取top,bottom值….BODYAhref=star.htmlIMGalign=middlesrc=images/adv_2.jpgwidth=180height=95border=0//A请点击广告进入明星专区/BODY……查看源代码图像和文本居中对齐南京航空航天大学小结1•编写如下图所示效果对应的html代码字号大小为3练习答案练习代码南京航空航天大学文字布局•内容分隔HR标签•项目列表和编号–有序列表OL–无序列表UL•预格式文本PRE标签水平分隔线HR有序列表无序列表用了预先定义好的格式南京航空航天大学如何使用内容分隔HR标签•HRsize=5color=redwidth=300线的厚度值线的宽度线的颜色……BODYHRsize=5color=redwidth=300HRsize=10color=blackwidth=200HRsize=5color=#0000FFwidth=50%/BODY……查看源代码HR标签用于在页面上绘制水平线南京航空航天大学如何使用列表•无序列表语法ULLI列表项内容/LI……/UL•有序列表语法OLLI列表项内容/LI……/OL查看源代码H4注册步骤：/H4OLtype=1LI填写信息/LILI收电子邮件/LILI注册成功/LI/OL新人上路指南ULtype=circleLI如何激活会员名？/LILI如何注册淘宝会员？/LILI注册时密码设置有什么要求？/LILI支付宝认证/LI/UL南京航空航天大学如何使用列表•无序列表语法ULLI列表项内容/LI……/UL•有序列表语法OLLI列表项内容/LI……/OLH4注册步骤：/H4OLtype=1LI填写信息/LILI收电子邮件/LILI注册成功/LI/OL新人上路指南ULtype=circleLI如何激活会员名？/LILI如何注册淘宝会员？/LILI注册时密码设置有什么要求？/LILI支付宝认证/LI/UL查看源代码南京航空航天大学预格式文本PRE标签如何实现如下图所示的页面中的文字效果？使用PRE标签可以实现南京航空航天大学如何使用预格式文本PRE标签•PREIMGsrc=images/QQ.JPGwidth=159height=133align=LEFT腾讯-QQ币/QQ幻想-30元卡一口价：26.45元运费：卖家承担运费剩余时间：5天宝贝类型：全新卖主声明：货到付款，可试用10天！/PRE查看源代码HTML中代码格式与浏览器中显示效果一样南京航空航天大学页面链接A标签•链接到其他页面–Ahref=register/register.html[免费注册]/A链接内容链接的地址HTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=register/register.html[免费注册]/AAhref=login/login.htm[登录]/A/BODY/HTML单击”[免费注册]”之后链接到的页面查看源代码南京航空航天大学页面链接A标签•在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？•链接到其他页面–相对路径•指定相对于当前文件的文件位置。–绝对路径•指定从根目录到文件的完整路径。两种方式：相对路径和绝对路径南京航空航天大学页面链接A标签要链接到同一目录(C:\HTML)下的页面，可编写AHREF=“Doc1.htm”或AHREF=“C:\html\Doc2.htm”相对路径名绝对路径名南京航空航天大学页面链接A标签•要实现如下图所示的超链接效果，怎么办？演示示例3：演示锚链接的例子使用锚记标签南京航空航天大学页面链接A标签•链接到本页面•锚记标签用于使用户“跳”到文档的某个部分•HTML的NAME属性用于创建锚标记ANAME=“marker”主题名称/A•为达到这种跳转效果，请在HREF参数中使用该标记AHREF=“#marker”主题名称/A演示示例4：演示锚链接的例子HTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=#helpme[新人上路]/A……Aname=helpme新人上路指南/A……/BODY/HTML1、定义锚标记2、链接到锚标记所在位置南京航空航天大学页面链接A标签•电子邮件链接要链接电子邮件，可在链接标签中插入mailto:邮箱地址Ahref=mailto:[e-mail]站长信箱/A演示示例5：演示电子邮件链接HTMLHEADTITLE电子邮件链接/TITLE/HEADBODY……Ahref=mailto:[e-mail]站长信箱/A……/BODY/HTML单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可南京航空航天大学滚动MARQUEE标签•说明：–scrolldelay：表示滚动延迟时间，默认值为90。–direction：表示滚动的方向，默认为从右向左。MARQUEEscrolldelay=“100”direction=“up滚动文字或图像/MARQUEE滚动延迟时间滚动对象的方向南京航空航天大学滚动MARQUEE标签查看源代码MARQUEEscrolldelay=100水平滚动/MARQUEEMARQUEEscrolldelay=200direction=up垂直滚动/MARQUEEMARQUEEscrolldelay=300direction=uponmouseover=this.stop()onMouseOut=this.start()Ahref=#IMGsrc=images/scroll/1.gifborder=0align=middleAvon化妆品/ABRAhref=#IMGsrc=images/scroll/2.gifborder=0align=middle雅诗兰黛/ABR……/MARQUEE水平向左移动垂直向上移动图片和文字同时垂直向上