1.6 两种编写HTML的方法
网页文件即扩展名为htm或html的文件,本质上是文本类型的文件,网页中的图片、动画等资源是通过网页文件的HTML代码链接的,与网页文件分开存储。
由于HTML语言编写的文件是标准的ASCII文本文件,因此可以使用任意一种文本编辑器来打开或编辑HTML文件,例如Windows操作系统中自带的记事本或者专业的网页制作软件Dreamweaver。
1.6.1 使用记事本编写
HTML是一个以文字为基础的语言,并不需要什么特殊的开发环境,可以直接在Windows操作系统自带的记事本中进行编辑,其优点是方便快捷,缺点是无任何语法提示、无行号提示和格式混乱等,初学者使用困难。
课堂案例 使用记事本编写HTML页面
案例位置:光盘\源文件\第1章\1-6-1.html
视频位置:光盘\视频\第1章\使用记事本编写HTML页面.swf
难易指数:★☆☆☆☆
学习目标:掌握在记事本中编写HTML代码的方法
最终效果如图1-11所示。
图1-11
01 在Windows操作系统中执行“开始>所有程序>附件>记事本”命令,如图1-12所示。打开记事本窗口,如图1-13所示。
图1-12
图1-13
02 在记事本中编写网页HTML代码,所编写的HTML代码如下。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手机网站页面</title> </head> <body> <img src="images/16101.jpg" width="1000" height="600" /> </body> </html>
03 完成在记事本中HTML代码的编写,如图1-14所示。执行“文件>另存为”命令,弹出“另存为”对话框,将文件保存为“光盘\源文件\第1章\1-6-1.html”,如图1-15所示。
图1-14
图1-15
提示:
注意,在将记事本中编写的HTML代码保存为网页html格式时,需要注意“编码”选项的设置。默认情况下,需要将“编码”设置为UTF-8,否则,网页中的中文在浏览器中可能会显示为乱码。
04 单击“保存”按钮,即可将记事本编写的HTML代码保存为网页文件,在浏览器中预览该网页文件,可以看到网页的效果,如图1-16所示。
图1-16
1.6.2 使用Dreamweaver编写
著名的网页三剑客之一,是网页制作的主流软件,其优点是有所见即所得地设计视图,能够通过鼠标拖放直接创建并编辑网页文件,自动生成相应的HTML代码。Dreamweaver的代码视图有非常完善的语法自动提示、自动完成和关键词高亮显示等功能。可以说,Dreamweaver是一个非常全面的网页制作工具,本书在讲解HTML、CSS和JavaScript时就是使用Dreamweaver软件。
知识点:Dreamweaver代码工具
在Dreamweaver CS6的代码视图中会以不同的颜色显示HTML代码,帮助用户区分各种标签,同时用户也可以自己指定标签或代码的显示颜色。总体看来,代码视图更像是一个常规的文本编辑器,只要单击代码的任意位置,就可以开始添加或修改代码了,如图1-17所示。
图1-17
● “打开文档”按钮
单击该按钮,在其弹出菜单中列出了当前在Dreamweaver中打开的文档,选中其中一个文档,即可在当前的文档窗口中显示所选择的文档代码。
● “显示代码浏览器”按钮
单击该按钮,即可以显示光标所在位置的代码浏览器,在代码浏览器中显示光标所在标签中所应用的CSS样式设置。
● “折叠整个标签”按钮
折叠一组开始和结束标签之间的内容。将光标定位在需要折叠的标签中即可,比如将光标置于<body>标签内,然后单击该按钮,Dreamweaver即可将其首尾对应的标签区域进行折叠。
如果在按住Alt键的同时,单击“折叠整个标签”按钮,则Dreamweaver将折叠外部的标签。“折叠整个标签”按钮的功能只能对规则的标签区域起作用,如果标签不够规则,则不能实现折叠效果。
● “折叠所选”按钮
将所选中的代码折叠。可以直接选择多行代码,单击该按钮,代码折叠后,将鼠标光标移动到标签上的时候,可以看到标签内被折叠的相关代码。
● “扩展全部”按钮
单击该按钮,可以还原页面中所有折叠的代码。如果只希望展开某一部分的折叠代码,只要单击该部分折叠代码左侧的展开按钮即可。
● “选择父标签”按钮
选择插入点的那一行的内容及其两侧的开始和结束标签。如果反复单击此按钮且标签是对称的,则Dreamweaver最终将选择最外面的<html>和</html>标签。例如,将光标置于<title>标签内,单击“选择父标签”按钮,将会选择<title>标签的父标签<head>标签。
● “选取当前代码段”按钮
选择插入点的那一行的内容及其两侧的圆括号、大括号或方括号。如果反复单击此按钮且两侧的符号是对称的,则Dreamweaver最终将选择该文档最外面的大括号、圆括号或方括号。
● “行号”按钮
单击该按钮,可以在代码视图左侧显示HTML代码的行号,默认情况下,该按钮为按下状态,即默认显示代码行号。
● “高亮显示无效代码”按钮
单击该按钮,可以使用黄色高亮显示HTML代码中无效的代码。
● “自动换行”按钮
单击该按钮,当代码超过窗口宽度时,自动换行,默认情况下,该按钮为按下状态。
● “信息栏中的语法错误警告”按钮
启用或禁用页面顶部提示出现语法错误的信息栏。当Dreamweaver检测到语法错误时,语法错误信息栏会指定代码中发生错误的那一行。此外,Dreamweaver会在“代码”视图中文档的左侧突出显示出现错误的行号。默认情况下,信息栏处于启用状态,但仅当Dreamweaver检测到页面中的语法错误时才显示。
● “应用注释”按钮
单击该按钮,在弹出菜单中选择相应的选项,使用户可以在所选代码两侧添加注释标签或打开新的注释标签。如图1-18所示。
图1-18
● “删除注释”按钮
单击该按钮,可以删除所选代码的注释标签。如果所选内容包含嵌套注释,则只会删除外部注释标签。
● “环绕标签”按钮
环绕标签主要是防止写标签时忽略关闭标签。其操作方法是,选择一段代码,单击“环绕标签”按钮,然后输入相应的标签代码,即可在该选择区域外围添加完整的新标签代码。这样既快速又防止了前后标签遗漏不能关闭的情况。
● “最近的代码片断”按钮
单击该按钮,可以在弹出的菜单中选择最近所使用过的代码片断,将该代码片断插入到光标所在的位置。
● “移动或转换CSS”按钮
单击该按钮,弹出菜单包括“将内联CSS转换为规则”和“移动CSS规则”两个选项,可以将CSS移动到另一位置,或将内联CSS转换为CSS规则。
● “缩进代码”按钮
选中相应的代码,单击该按钮,可以将选定内容向右移动。
● “凸出代码”按钮
选中相应的代码,单击该按钮,可以将选定内容向左移动。
● “格式化源代码”按钮
单击该按钮,可以在弹出菜单中选择相应的选项。将先前指定的代码格式应用于所选代码,如果未选择代码,则应用于整个页面。也可以通过从“格式化源代码”按钮中选择“代码格式设置”来快速设置代码格式首选参数,或通过选择“编辑标签库”来编辑标签库。
提示:
为了保证程序代码的可读性,一般都需要将标签代码进行一定的缩进凸出,从而显得错落有致。选择一段代码后按Tab键完成代码的缩进,对于已经缩进的代码,如果想要凸出,可以按快捷键Shift+Tab。也可以通过单击“缩进代码”按钮和“凸出代码”按钮来完成上述功能。
课堂案例 使用Dreamweaver编写网页
案例位置:光盘\源文件\第1章\1-6-2.html
视频位置:光盘\视频\第1章\使用Dreamweaver编写网页.swf
难易指数:★☆☆☆☆
学习目标:掌握在Dreamweaver编写HTML的方法
最终效果如图1-19所示。
图1-19
01 打开Dreamweaver,执行“文件>新建”命令,弹出“新建文档”对话框,选择HTML选项,如图1-20所示。单击“创建”按钮,新建HTML文档,转换到代码视图中,可以看到HTML文档的代码,如图1-21所示。
图1-20
图1-21
02 执行“文件>保存”命令,弹出“另存为”对话框,将该网页保存为“光盘\源文件\第1章\1-6-2.html”,如图1-22所示。在页面的<title>与</title>标签之间输入网页的标题,如图1-23所示。
图1-22
图1-23
03 在<body>标签中添加style属性设置代码,如图1-24所示。在<body>与</body>标签之间编写相应的网页正文内容代码,如图1-25所示。
图1-24
图1-25
提示:
在<body>标签中添加style属性设置,实际上是CSS样式的一种使用方式,称为内联CSS样式,有关CSS样式的知识也是本书介绍的重点内容,将会在后面的章节中进行详细讲解。
04 完成该网页HTML代码的编写,完整的HTML代码如下。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>个人网站页面</title> </head> <body style="background-color:#66CAC8; text-align:center; margin:0px auto; "> <img src="images/16201.jpg" width="767" height="742" /> </body> </html>
05 执行“文件>保存”命令,保存网页,在浏览器中预览该网页,可以看到网页的效果,如图1-26所示。
图1-26
提示:
Dreamweaver是一款专业的网页制作软件,在Dreamweaver中新建一个HTML页面,默认情况下,自动给出HTML文档结构的基础代码,并且在Dreamweaver中编写HTML代码还具有代码提示等功能,非常适合初学者使用。本书也是基于Dreamweaver来介绍HTML、CSS样式和JavaScript的。