《html5与css3网页设计教学课件作者库波html5与css5网页设计第二章》由会员分享，可在线阅读，更多相关《html5与css3网页设计教学课件作者库波html5与css5网页设计第二章（29页珍藏版）》请在金锄头文库上搜索。
1、第2章 处理网页文件,2.1 网页文件的基本操作 2.2 组织网站文件夹 2.3 在浏览器中查看网页 2.4 综合实例,返回,2.1 网页文件的基本操作,2.1.1 使用记事本创建、保存和编辑网页文件 1.创建 (1)单击桌面左下角的【开始】按钮，单击【程序】【附件】【记事本】命令，打开记事本文件。 (2)在记事本中，输入如图2 -2所示的HTML语言，可以创建一个简单的网页。 2.保存 (1)单击记事本菜单栏的【文件】【保存】命令，或按【Ctrl + S 】键，弹出“另存为”对话框。 (2)选择保存路径，然后在“文件名”文本框中输入文件名称，并加上“. htm”或“. html”的网页格式的
2、后缀名，如图2 -4所示。,下一页,返回,2.1 网页文件的基本操作,(3)单击“保存”按钮，就可以将用记事本创建的文件保存为可以用浏览器直接打开的网页文件了。 3.编辑 后缀名为“. htm”或“. html”的网页文件的图标如图2 -5所示。如果想对此文件进行再次编辑，步骤如下 (1)用鼠标右键单击如图2-5所示的图标，打开快捷菜单。选择【重命名】命令，将文件的后缀名改为“. tXt “，在弹出的“重命名”对话框中，点击【是(Y)】按钮。 (2)改后的文件图标如图2 -7所示。双击此文件后，记事本可将其打开，在记事本中可对文件进行编辑。 (3)编辑完成后，再次用修改后缀名的方式将其保存为网
3、页文件。双击,上一页,下一页,返回,2.1 网页文件的基本操作,文件，可直接用浏览器查看。 2.1.2 使用Dreamweaver创建、保存和编辑网页文件 1.创建 (1)打开Dreamweaver CS6后默认显示起始页，在菜单栏中选择【文件】【新建】命令，如图2-8所示。 (2)弹出【新建文档】对话框，选择【空白页选项卡，在【页面类型】列表框中选择【HTML】选项，在【文档类型】中选择“HTMLS”选项，如图2 -9所示。 (3)单击【创建】按钮，即可新建一个空白的类型为HTMLS的新HTML网页文档。,上一页,下一页,返回,2.1 网页文件的基本操作,2.保存 1)保存文件 (1)选择【
4、文件】【保存】命令，或按【Ctrl + S】键，弹出“另存为”对话框。 (2)在“保存在”下拉列表中选择文件的保存位置。 (3)在“文件名”文本框中输入文件的名称。 (4)单击“保存”按钮即可。 2)另存为文件 (1)选择【文件】【另存为】命令，或按【Ctrl + Shift + S 】键，打开“另存为”对话框。 (2)在“保存在”下拉列表中选择文件的保存位置。,上一页,下一页,返回,2.1 网页文件的基本操作,(3)在“文件名”文本框中输入文件的名称。 (4)单击“保存”按钮即可。 3.编辑 1)代码视图 编辑网页文件、直接编写或修改源文件，就选择代码视图，如图2-15所示。 2)设计视图
5、设计视图是内容可视化模式，提供了一个便捷易用的设计环境，可将页面布局、页面文本、图片、表格等内容所见即所得地展示出来。 3)拆分视图 如图2-17所示，选择表格的第一行内容，可同时看见所选内容对应的代码，方便编辑。,上一页,返回,2.2 组织网站文件夹,在创建一个网站时，如果将所有的网页都存储在一个目录下，当站点的规模越来越大时，管理起来就会变得很困难，而且会对网站本身的上传维护、站点内容未来的扩充和移植都有严重阻碍，如图2-18所示。 因此，应合理地使用和组织文件夹来管理文档。通常，在制作网站时首先要在本地硬盘中创建一个文件夹，然后在制作网站的过程中将所有创建和编辑的文档都保存在该文件夹中。
6、此文件夹也叫网站的根目录。 在根目录中合理地组织网站中的所有文件及文件夹时，应遵循以下要求 (1)在网站根目录中开设images 、webs 、 common三个子目录，根据需要可再开设media子目录。,下一页,返回,2.2 组织网站文件夹,(2)将主页命名为index. html，放在根目录中。 (3)除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符。 (4)不要使用过长的目录。 (5)尽量用意义明确的目录。,上一页,返回,2.3 在浏览器中查看网页,2.3.1 在Dreamweaver中选择浏览器 1.选择已有浏览器 (1)用Dre
7、amweaver CS6软件打开源文件“第2章源文件及素材web.html“，用“代码”视图查看，如图2 - 20所示。 (2)选择【文件】【在浏览器中预览】，在列表中选择一个列出的浏览器，例如“IExplorer“，如图2-21所示。 (3)预览效果如图2-22所示。 2.添加新的浏览器 选择【文件】【在浏览器中预览】【编辑浏览器列表】，或选择【编辑1U首选参数】【在浏览器中预览】，打开如图2 - 23所示的对话框。单击 按钮，打开。添加浏览器对话框”，选择Firefox浏览器的存,下一页,返回,2.3 在浏览器中查看网页,放路径，单击【确定】按钮，添加新浏览器成功。 3.用快捷键浏览网页
8、按【F12】键，可以直接用主浏览器预览当前文档。按【Ctrl+ F12】键，可以直接用次浏览器(候选浏览器)打开当前文档。 2.3.2 利用Firebug工具测试网页 1.安装Firebug 2. Firebug的主要功能 在安装好插件之后，先用Firefox浏览器打开需要测试的页面，然后点击右上方的“爬虫” 按钮或按【F12】键唤出Firebug插件，它会将当前页面分成上下两个框架，如图2-27所示。 1)控制台,上一页,下一页,返回,2.3 在浏览器中查看网页,2)查看和修改HTML 3 ) CSS调试 4 ) JavaScript调试器 5 ) DOM查看器 6)网络状况监视器 2.3.
9、3 借鉴他人制作网页的经验 Firefox浏览器在帮助网页开发制作方面功能要远胜于IE，有些禁用页面效果的JavaScript脚本在Firefox里是失效的，再加上Firefox的网页开发插件，那就更加使用户如虎添翼了。用Firefox浏览器查看网页源代码的方法和IE基本相似，也是在页面的空白处点击右键选择【查看页面源代码】或直接按快捷键【 Ctrl + U 】。,上一页,返回,2.4 综合实例,(1)打开Dreamweaver CS6软件，新建一个类型为HTMLS的空白网页。 (2)打开“设计视图”。 (3)在编辑窗口中输入文字“这是我的第一个网页作品，”。 (4)选择【文件】I【保存】命令
10、，或按【Ctrl + S 】键，选择文件存储路径，将文件以“indexl.html”命名，单击【确定】按钮进行保存。 (5)按【F12】键，在主浏览器中预览，效果如图2-32所示。 (6)将Dreamweaver CS6切换到“代码视图”，对里面的代码内容进行编辑。,下一页,返回,2.4 综合实例,(7)选择【文件】【另存为】命令，或按【Ctrl + Shift + S】键，打开“另存为”对话框，选择文件存储路径，将文件以“index2.html”命名，单击【确定】按钮进行保存。 (8)按【F12】键，在主浏览器中预览编辑后的网页文件，效果如图2-33所示。,上一页,返回,图2-2 在记事本中编写HTML语言,返回,图2-4 将记事本文件保存为网页文件,返回,图2-5 网页文件的图标,返回,图2-7 改后文件的图标,返回,图2-8 在菜单栏中冼择【新建】命令,返回,图2-9 “新建文档”对话框,返回,图2-15 代码视图,返回,图2-17 拆分视图,返回,图2-18 混乱的网站文件夹,返回,图2-20 在“代码”视图中编辑网页,返回,图2-21 浏监器选择列表,返回,图2-22 选择IE浏监器的预揽效果,返回,图2-23 已有浏览器,返回,图2-27 Firebug界面,返回,图2-32 网页效果,返回,图2-33 编辑后的网页效果,返回,
