版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第11章HTML语言前面各章都是通过Dreamweaver8提供的可视化设计环境来创建和编辑网页的,但是对于一个希望深入掌握网页制作、对代码严格控制的网页设计人员来讲,了解和掌握HTML语言是非常必要的。课程引导1整理pptDreamweaver8是一种非常优秀的可视化网页制作软件,它也提供了丰富的源代码控件功能,可以让网页制作者随时查看、编辑HTML源代码,Dreamweaver8的快速标签编辑器很好地协调了可视化操作和HTML源代码编写二者之间的关系。2整理ppt知识技能目标(1)掌握Dreamweaver8的HTML源代码编辑功能。掌握快速标签编辑器、标签选择器和标签编辑器的使用方法。(2)掌握常用的HTML标记的含义及其应用。(3)学会手工修改HTML代码。3整理ppt网页浏览效果展示采用手工编写HTML代码制作的网页浏览效果如图11-1所示。图11-1手工编写HTML代码所制作的网页预览效果4整理ppt本章操作任务制作一个表单网页,该表单网页中包括表单域、文本域、文本区域、单选按钮、复选框、列表/菜单等表单元素。5整理ppt11.1HTML简介11.2Dreamweaver8的HTML源代码编辑功能11.3HTML标记6整理ppt11.1HTML简介HTML语言用来描述Web页面文档的语言,它不是一种编程语言,而是一种页面描述性标记语言。通过各种标记描述不同的内容,说明标题、段落、字体、图像等网页元素在浏览器中的显示效果,浏览网页时,将根据HTML标记显示其内容。11.1.1HTML语言的特点7整理ppt一个最基本网页的HTML代码格式如下:11.1.2HTML语言的语法结构1.HTML基本结构<html><head><title>网页标题</title></head><body>网页主体内容</body></html>8整理ppt在HTML网页文档的基本结构中主要包含以下几种标记:(1)HTML标记(2)HEAD头部标记(3)BODY主体标记9整理ppt一个完整的HTML文档由各种网页元素与HTML标记组成的,网页元素指标题、段落、图像、表格、层等各种对象,标记的功能是逻辑性地描述网页的结构。HTML文档应遵循以下语法规则。2.HTML语言的语法规则10整理ppt(1)HTML文档以纯文本形式存放,扩展名为“.html”或“.htm”。(2)HTML文档中标记采用“<”与“>”作为分割字符。(3)HTML标记及属性不区分大小写,例如<HTML>和<html>是相同的标记。11整理ppt(4)大多数HTML标记可以嵌套,但不能交叉,各层标记是全包容关系。(5)HTML文档一行可以书写多个标记,一个标记也可以分多行书写,不用任何续行符号,显示效果相同。12整理ppt(6)HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的,浏览网页时,会自动忽略文档中的换行符、回车符、空格,所以在文档中输入的回车符,并不意味着在浏览器中将看到不同的段落。13整理ppt(7)网页中所有的显示内容都应该受限于一个或多个标记,不能存在游离于标记之外的文字或图像等,以免产生错误。(8)对于浏览器不能分辨的标记可以忽略,不显示其中的对象。14整理ppt在查看HTML源代码或编写网页时,经常会遇到三种格式的HTML标记。(1)不带属性的双标记:<标记名称>内容</标记名称>(2)带有属性的双标记:<标记名称属性名称=对应的属性值……>网页对象</标记名称>(3)单标记:<标记名称/>3.HTML标记的类型15整理ppt11.2Dreamweaver8的HTML源代码编辑功能Dreamweaver8的编辑环境中提供了三种视图模式:“代码”、“拆分”、“设计”,这三种视图都可以通过单击“文档”工具栏上左边的按钮进行快速切换。11.2.1Dreamweaver8的三种视图模式16整理ppt(1)在站点“长沙世界之窗”下创建文件夹“12HTML语言”,在“文件”面板中单击选中刚才新建的子文件夹“12HTML语言”,单击鼠标右键,在弹出的快捷菜单中单击【新建文件】,在子文件夹“12HTML语言”中便会创建一个默认名称为“untitled.html”的网页文档。11.2.2利用代码视图制作HTML网页17整理ppt(2)将新建的网页重命名为“12.html”,在“文件”面板中双击该名称打开该网页。(3)在“文档”工具栏中单击【代码】按钮,切换到代码视图的编辑窗口。18整理ppt(4)在代码窗口中的标题位置输入新的网页标题:“公司部门”,并按“Ctrl+Enter”组合键,“文档”面板中的标题文本框中的标题也同步变化。19整理ppt(5)在代码窗口中<body>与</body>之间输入文字“长沙世界之窗实现总经理领导下的部门经理负责制,管理上采用垂直领导、分层管理、逐级负责。”,接着输入“<br/>”20整理ppt(6)回车换行,然后输入“<imgsrc="image/bumen1.jpg"width="690"height="303"/>”。(7)保存该网页文档,且在浏览器中预览该网页。21整理ppt代码视图会以不同的颜色显示HTML源代码,以帮助用户区分各种标签,同时用户也可以自己指定标签或代码的显示颜色。利用“编码”工具栏可以实现以下操作:11.2.3Dreamweaver8的代码编辑工具1.代码视图22整理ppt(1)代码的折叠对于代码非常长的网页,可以对部分代码折叠起来。先选择多行代码,然后单击所选代码左侧的折叠按钮或者单击“编码”工具栏中的【折叠所选】按钮即可。如果按住“Alt”键的同时,单击【折叠所选】按钮,则折叠没有选中的代码。23整理ppt利用“编码”工具栏上的【折叠整个标签】按钮可以对某一个标签首尾对应的区域进行折叠,且无需选择代码。方法是:将光标定位在需要折叠的标签中,然后单击【折叠整个标签】按钮,那么光标所处位置的标签区域被折叠。24整理ppt如果按住“Alt”键的同时,单击【折叠整个标签】按钮,则会折叠外部的标签。打开部分已折叠的代码,只要单击列左侧的展开按钮即可。如果要全部展开所有被折叠的代码,单击“编码”工具栏中的【扩展全部】按钮即可。25整理ppt(2)选择父标签代码标签之间一般都存在着嵌套关系,如何快速查找某代码标签是属于另外哪一个代码标签呢?可以直接将光标置于该标签代码中,然后单击【选择父标签】按钮即可。可以单击多次依次选择父标签。26整理ppt(3)代码的注释先选择需要注释的代码行,然后单击“编码”工具栏中的【应用注释】按钮,再在弹出菜单中选择一种注释方法即可。要取消注释,先选择要取消注释的代码行,然后单击“编码”工具栏中的【删除注释】按钮即可。27整理ppt(4)环绕标签环绕标签的主要功能是防止写标签时忽略结束标签。其操作方法是:先选择内容,然后单击【环绕标签】按钮,从下拉列表框中选择或者直接输入相应代码,在选择内容外围会自动添加完整的开始和结束标签。28整理ppt(5)代码的缩进与凸出先选择一段代码,然后按“Tab”键或单击“编码”工具栏中的【缩进代码】按钮,即可实现代码的缩进。对于已缩进的代码,如果想要凸出,可按“Shift+Tab”组合键或者单击“编码”工具栏中的【凸出代码】按钮实现代码的凸出。29整理ppt(6)显示/隐藏行号在代码视图窗口中对每个HTML语句显示其行号,以便于定位。操作方法是:在代码视图窗口单击“编码”工具栏中的【行号】按钮,或者在“文档”工具栏中单击【视图选项】按钮,然后在弹出的下拉菜单中单击【行数】命令即可显示或隐藏“行号”。30整理ppt(7)自动换行在代码视图窗口中编辑代码时,常常会发现一行代码过长需要自动换行,操作方法是:单击“文档”工具栏中的【视图选项】按钮,然后在弹出的下拉菜单中单击【自动换行】命令。31整理ppt快速标签编辑器的作用是让用户在文档窗口中直接对HTML标签进行编写,无需使用代码视图,就可以编辑单独的HTML标签2.快速标签编辑器32整理ppt快速标签编辑器有插入HTML、编辑标签和环绕标签三种状态,打开编辑器后,可以通过按“Ctrl+T”组合键进行状态切换,如图11-11为编辑标签状态,如图11-12为插入模式的快速标签编辑器。33整理ppt为了方便手工编码,可以使用标签选择器和标签编辑器。使用标签选择器,可以在网页代码中插入新的标签;使用标签编辑器,可以对网页代码中的标签进行添加标签的属性或修改属性值。3.使用标签选择器和标签编辑器34整理ppt(1)使用标签选择器(2)使用标签编辑器35整理ppt打开“文件”面板组,然后切换到“代码片断”选项卡即可进入代码片断子面板。利用代码片断面可以减少代码编辑的工作量,在该面板中可以存储HTML、JavaScript的代码片断,这样当需要重复使用这些代码时,就可以很方便地重用这些代码,或者创建并存储新的代码片断。4.代码片断36整理ppt(1)插入代码片断在代码片断子面板中选择需要插入的代码片断,例如“将竖线用作分隔线”,然后直接单击面板上的【插入】按钮,即可将代码片断插入至页面。37整理ppt(2)自定义代码片断如果自己编写一段代码,希望在其他页面中重复使用这一段代码,这时就可以使用代码片断子面板自定义代码片断,轻松实现代码的重用。38整理ppt在Dreamweaver8中打开
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 二零二五年度固定资产借款合同还款计划与利率调整3篇
- 研学旅行教学课程设计
- 二零二五年度商业地产买卖委托代理合同3篇
- 二零二五年度数据中心安全维护与管理服务合同
- 内部公司会议方案样本(2篇)
- 质量管理课程设计简介
- 会计员安全生产责任制(4篇)
- 运筹学课程设计旅游
- 二零二五年度互联网公司员工持股计划协议范本3篇
- 二氧化碳灭火器的维修安全操作规程(3篇)
- 《论拒不执行判决、裁定罪“执行能力”之认定》
- 工业设计基础知识单选题100道及答案解析
- 山西省晋中市2023-2024学年高一上学期期末考试 化学 含解析
- 过程审核表(产品组评分矩阵评审提问表(评分))-2024年百度过
- 操作手册模板【范本模板】
- 2025年湖北省武汉市高考数学模拟试卷附答案解析
- 【工作总结】建筑中级职称专业技术工作总结
- 江苏省2022年普通高中学业水平合格性考试数学试题(考试版)
- 2023年二轮复习解答题专题三:一次函数的应用方案选取型(原卷版+解析)
- 2024版小学英语新课程标准测试题及答案
- 多旋翼无人机驾驶员执照(CAAC)备考试题库大全-上部分
评论
0/150
提交评论