关闭

关闭

关闭

封号提示

内容

首页 Internet应用与网络 (樊月华) 第4章 HTML.ppt

Internet应用与网络 (樊月华) 第4章 HTML.ppt.ppt

Internet应用与网络 (樊月华) 第4章 HTML.p…

希望
2019-09-18 0人阅读 举报 0 0 暂无简介

简介:本文档为《Internet应用与网络 (樊月华) 第4章 HTML.pptppt》,可适用于高等教育领域

关于Internet应用与网络 (樊月华) 第4章 HTML.ppt.ppt文档,大发快三大小单双口诀拥有内容丰富的相关文档,站内每天千位行业名人共享最新资料。

第章HTMLDHTML的应用本章训练目标:()通过HTMLDHTML示例掌握它们的基本知识与结构。()通过案例掌握HTML的应用。()通过案例掌握DHTML技术。()通过案例掌握FrontPage的使用。()通过实训课题掌握主页系统的制作与发布技术。HTMLDHTML的应用HTMLDHTML的结构HTML的应用DHTML技术基础可视化页面制作与管理工具FrontPage网页制作实训课题mdashmdash应用技术学院网站的建设练习上机练习实训课题HTMLDHTML的结构HTML的结构mdashmdashHTML示例一个HTML示例为了使读者对HTML有一个整体的了解我们将和读者一起来制作一个简单网页。请按以下步骤进行:()编写HTML代码使用简单的文字编辑器。()以扩展名ldquohtmlrdquo保存文件。在只支持三个字母作后缀的操作系统中它的扩展名是ldquohtmrdquo。()在浏览器中显示页面exhtml显示效果如图所示。图页面代码ex在浏览器中的显示()在图中单击ldquo中国高等职业技术教育研究会rdquo页面将转跳至代码ex所显示的页面。如图所示。图页面转跳到ex()我们以页面代码exhtml为例说明HTML的简单使用。HTML的结构图HTML文件结构DHTM的结构mdashmdashDHTML示例什么是DHTML传统的HTML页面一旦被下载到客户端的浏览器后就无法改变显示内容所以被称为静态网页。使用DHTML技术制作的网页在其内容下载到浏览器后不必通过服务器就可以使浏览器与用户交互信息更新网页内容所以被称为动态网页。一个DHTML示例()请读者在编辑器中输入exhtml的代码。()exhtml在浏览器中的显示效果如图所示。()把鼠标移动到文字ldquo鼠标移到此处新增一行文字rdquo处页面产生动态变化新增加一行文字。浏览器显示如图所示。()请读者把鼠标移到改变文字颜色的文本上文字将变成红色移开后文字变成蓝色。图DHTML示例图动态改变网页()读者可以看到在HTML的基础上使用了脚本语言(Script)使网页产生动态效应。 DHTML结构()DHTML的特点。()DHTML的结构。图DHTML的组成HTML的应用HTML标记的格式标记HTML语言元素标记middot例如:H你好!Hmiddot标记与字母的大小写无关例如BODY与body的作用是一样的。middot标记可以带有属性参数。middot注释标记!注释内容不在浏览器中显示只供阅读页面代码帮助理解使用。HTML应用案例mdashmdash文本标记()文本标记主要用于控制页面的段落显示字符的大小、颜色、字体和属性等。()页面代码exhtml说明了文本标记的使用。()exhtml在浏览器中的显示效果如图所示。图文本标记的使用()代码说明图图像标记的使用HTML应用案例mdashmdash表格标记()表格标记TABLE()页面代码exhtml说明了表格标记的使用()该代码在浏览器中的显示效果如图所示图基本表格HTML应用案例mdashmdash超级链接标记() A标记的使用。()页面代码exhtml说明了超级链接标记的使用()页面代码在浏览器中显示如图所示图超级链接的使用()代码说明如下HTML应用案例mdashmdash表单(FORM)和输入标记()表单的作用()页面代码exhtml说明了表单标记的使用()代码在浏览器中显示如图所示。图表单标记的使用()代码说明DHTML技术基础CSS的基本概念CSS用于定义Web页面内容在浏览器上的显示方式由于HTML的功能有限一般不能随意设计版面和编排文字所以WC公布了一套HTML的扩展标准CSS扩展了HTML在排版和文字式样上的功能。CSS的基本概念样式单的使用方式定义样式的基本格式定义样式的基本格式是:图样式文件的使用方式选择器{规则}样式应用案例mdashmdash把样式套用到网页上任务要求请在浏览器窗口中输出如下字样的文字。见图。图网页样式要求.实现方案:内联式样式单内联式样式只包含在与它有关的标记内对页面上其他任何标记不起作用。实现方案:嵌入式样式单实现方案:外部(链接)样式单()建立样式文件()在HTML文档中建立与外部样式文件的链接样式应用案例mdashmdash动态风格()动态风格简介。动态内容是指不需要下载或重新构建一个完整的新页面就可以改变文档的部分内容。()任务要求。制作一个动态按钮当鼠标移动到按钮上时按钮上的字变为黄色背景变成蓝色。图任务要求()页面代码exhtml实现如上功能()代码说明样式应用案例mdashmdash页面定位()页面定位。页面定位是指网页作者可以精确地将一个网页元素定位在某一个坐标。()任务要求:制作一个页面在页面中使一幅图像与文字有部分重叠。()完成该任务exhtml的代码清单()该代码在浏览器中显示如图。图网页元素定位样式应用案例mdashmdash版面配置()网页中图像和文字配置得当可以使一个网页的视觉效果良好。()任务要求:制作一个页面在页面上有四幅图像,使用DIV和SPAN标记使其中两幅在不同行、两幅在同一行显示。页面如图所示。图DIV和SPAN标记的使用()完成该任务exhtml的代码清单可视化页面制作与管理工具FrontPageFrontPage是微软公司的Office办公组件之一它采用了ldquo所见即所得rdquo的网页编辑方式易于普及适合多数人员使用。FrontPage的功能和特点FrontPage集网页的设计、编辑、网站的创建、管理和发布等多种功能于一体较早期版本有了较大的改进。它的主要功能与特点如下:()用于创建、设计、发布、组织、管理和维护一个Web站点()它是Office的一个组件与Office完全结合与其有相似的用户界面、很多相同的功能及部分共用资源。()具有绝对和相对定位两种定位方式。()提供多种样式供用户选择。FrontPage使用案例mdashmdash简单网页制作()任务要求:使用FrontPage完成节中HTML应用案例的制作。()制作步骤图FrontPage界面图ldquo新建rdquo网站对话框图MyWebs站点的文件图建立超级链接图ldquo创建超链接rdquo对话框图网页的超链接状况网页制作实训课题mdashmdash应用技术学院网站的建设网页的基本元素和网页制作的基本步骤网页的基本元素网页制作的基本步骤图网页制作步骤应用技术学院网站建设目标应用技术学院网站的主要目的是宣传学院的建设与发展为学生、教师和社会服务。搜集有关资料、规划网页内容绘制网站结构蓝图图应用技术学院网站蓝图制作网页创建网站()启动FrontPage单击菜单栏中的ldquo文件rdquo在下拉菜单中单击ldquo新建rdquo在级连菜单中单击ldquo网站rdquo选项弹出ldquo新建rdquo对话框如图所示。()对话框中列出三个站点建立向导和五个网站模板。图ldquo新建rdquo网站对话框制作首页()制作标题。图新创建的网站()在表格中输入标题ldquo北京联合大学rdquo并编辑标题显示的字体、大小和颜色如图所示。图编辑标题()插入按钮。另起一行把光标移到中间的位置在菜单栏中选择ldquo插入rarr图片rarr来自文件rdquo选项出现ldquo图片rdquo对话框如图所示在对话框中选择按钮图片的文件名本案例是ldquoanniugifrdquo单击ldquo确定rdquo按钮。图插入按钮()插入字幕图ldquo字幕属性rdquo对话框()在字幕的下一行插入学校外景图片图片的名称是ldquobackgifrdquo。图预览首页制作应用技术学院主页在工具栏中选择ldquo新建网页rdquo图标在编辑窗口出现一个新网页默认名为newpagehtm。()制定页面布局图ldquo插入行或列rdquo对话框图主页布局()网站导航栏目在表格ldquo网站导航rdquo栏目单元格中单击鼠标右键在弹出的下拉菜单中选择ldquo单元格属性rdquo弹出ldquo单元格属性rdquo对话框如图所示。图ldquo单元格属性rdquo对话框图ldquo图片rdquo对话框图网站导航单元格图主页的标题栏()制作ldquo应用技术学院标题rdquo栏目()制作ldquo联络信息rdquo栏目图ldquo联络信息rdquo栏目创建首页与主页的超链接()在FrontPage的ldquo文件夹列表rdquo栏目中双击newpagehtm文件打开首页用鼠标右键单击首页上的按钮图片弹出下拉菜单在下拉菜单中选择ldquo超链接rdquo弹出ldquo创建超链接rdquo对话框如图所示。图创建超级链接()以同样方法打开主页文件名是newpagehtm。鼠标右键单击主页上的ldquoBACKrdquo按钮在下拉菜单中选择ldquo超链接rdquo在ldquoURLrdquo栏目的文本框输入首页的URL本案例是newpagehtm主页与首页的超链接成功。()预览首页与主页的超链接。在FrontPage的编辑窗口选择的ldquo预览rdquo标签单击首页的进入按钮页面跳转到主页。同样单击主页的ldquoBACKrdquo按钮返回到首页。说明首页与主页的超链接成功。ldquo专业介绍rdquo页面制作在工具栏中选择ldquo新建网页rdquo图标在编辑窗口出现一个新网页默认名为newpagehtm。在ldquo专业介绍rdquo页面中增加背景图案。在菜单栏中选择ldquo格式rarr背景rdquo,弹出ldquo网页属性rdquo对话框如图所示。图ldquo网页属性rdquo对话框测试网页用户可以在浏览器或FrontPage的ldquo预览rdquo标签中测试制作完成的网站是否符合需求。网站的发布.在个人Web服务器上发布网站()把Windows的个人Web服务器设置为默认Web服务器执行图ldquoFrontPageServerAdministratorrdquo对话框.在IIS上发布网站练习HTML的中文名称和英文名称是什么?它在页面中起什么作用?DHTML的英文名称是什么?它的主要作用是什么开发者可以使用哪几种编辑器编辑HTML文档请列举出一、二种常用的编辑器的名称。HTML文档的扩展名是什么?HTML的本质是什么它是什么格式的文件?HTML文件的结构是什么样的?DHTML技术主要由哪几部分组成?CSS的主要功能是什么?FrontPage的新特点和新功能是什么?简述FrontPage界面的基本组成。简述FrontPage界面的基本组成。如何使用FrontPage在网页中嵌入图片把一幅图片设置为超链接?网页的基本元素有哪些?一般来讲建设一个网站要经过哪几个步骤?如何发布网页?上机练习上机练习:使用HTML制作一个页面要有背景图案、页面显示内容及格式如图所示。图页面显示内容及格式上机练习:制作一个页面显示如下图形:****************上机练习:使用HTMLDHTML技术制作一个本学期使用的课表。上机练习:制作一个页面上有文字和图像在文字和图像上创建超级链接当用户点击链接时页面转跳到其他页面。上机练习:制作一个计算器界面界面如图所示。图计算器界面上机练习:使用DHTML技术制作一个页面页面内容及显示格式如下:DHTML技术(红色)CSS用于定义Web页面内容在浏览器上的显示方式由于HTML的功能有限一般不能随意设计版面和编排文字所以WC公布了一套HTML的扩展标准CSS扩展了HTML在排版和文字式样上的功能(蓝色)。通过样式定义可以设定很多属性如字号、颜色、页边距、元素在页面上的绝对位置等(紫色)。上机练习:修改上机练习的代码使页面上的文字和按钮具有动态效果。例如当用户把鼠标移动到按钮上时按钮将改变其显示方式等。上机练习:制作一个页面使图像的说明文字在图像之中请注意文字颜色的选择使用户能把图像和文字区分开。上机练习:制作一个页面页面上有七幅图像其中三幅图像和有关图像的说明排成一列另外四幅和有关图像的说明排成一行。上机练习:熟悉FrontPage界面的应用并制作一个简单的站点。实训课题实训课题:使用FrontPage制作一个个人网站在人才市场推销自己制作完成后进行测试并发布(可以在个人Web服务器上进行发布)。实训课题:使用FrontPage为某企业制作一个网站。实训课题:使用FrontPageldquo讨论站点向导rdquo建立一个电子论坛讨论共同感兴趣的问题。实训课题:使用FrontPage开发一个年级网站网站包含以下内容:()读者所在系的信息。()所在年级信息。()所在班级信息。()每个同学的信息。为完成实训课题需要成立:()年级设计与规划小组负责年级网站的规划、设计、信息采集与年级网站蓝图的制作并分配与协调班级网页的制作工作。()班级设计与规划小组负责班级网站的规划、设计、信息采集与班级网站蓝图的制作并分配与协调个人网页的制作工作。

类似资料

该用户的其他资料

2015.11创新杯创新杯说课大赛国赛说课课件.ppt

19--课程..创新杯说课大赛国赛说课课件.ppt

2014创新杯直线的倾斜角与斜率课程创新杯说课大赛国赛说课课件.ppt

13幼师3 住创新杯说课大赛国赛说课课件.ppt

2010血栓的形成讲课曹颜冬创新杯说课大赛国赛说课课件.ppt

职业精品

精彩专题

让你惊艳又清新的英文短诗合集

让你清新惊艳的英文小诗有哪些呢?小编汇集了以下经典英文诗、唯美爱情小诗、英文诗押韵技巧等等,让爱好英文短诗的你能够一起体验其中的乐趣!

用户评论

0/200
上传我的资料

热门资料排行换一换

  • 电阻应变片例题与练习题

  • 夏季水上冲关活动方案

  • 云南省证券从业《证券发行与承销》:…

  • 传热及凝固过程分析-中国力学学会

  • 黄河的主人

  • 现代汉语中的歧义问题

  • 含M g铝合金在N ocol ok…

  • 国内外车展调研报

  • 枇杷清肺饮

  • 资料评价:

    / 42
    所需积分:0 立即下载

    VIP

    在线
    客服

    免费
    邮箱

    大发快三大小单双口诀服务号

    扫描关注领取更多福利