网页制作技术教程 第2章 网页制作

《网页制作技术教程 第2章 网页制作》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第2章网页制作本章教学目的①掌握页面的整体控制和头部内容设置的方法。②熟练掌握在网页中输入、设置标题和正文文字的方法。③掌握在网页中嵌入图像、声音、多媒体信息的方法。④掌握建立各种形式超级链接的方法。⑤熟练掌握网页页面布局的各种方法。⑥掌握制作表单的方法。⑦掌握在网页中添加CSS的方法。⑧掌握网页特效的制作方法。⑨掌握模板和库的使用方法。⑩掌握行为的使用方法。目录第一讲文档及文本操作第二讲图像及超级链接第三讲媒体及表格第四讲框架及图层第五讲表单、模板和库第六讲CSS样式第七讲行为第一讲文档及文本操作[教学内容]1新建空白文档

2、网页2设置页面属性3保存文档4文本的输入及格式5列表、水平线等其他元素6在网页中插入文件头部内容[教学重点和难点]网页文件的建立、页面属性的设置、网页中文本等元素的输入以及文件头部内容的设置文档及文本操作2.1文档操作2.1.1新建空白文档网页2.1.2设置页面属性2.1.3保存文档2.2文本操作2.2.1在网页中输入文本2.2.2设置文本属性2.2.3文本换行2.2.4插入特殊字符和在字符之间添加空格2.2.5使用列表2.2.6在网页中插入文件头部内容2.2.7插入水平线和时间2.1.1新建空白文档网页新建一个网页文档有两

3、种方法：（1）如果您的Dreamweaver运行后显示起始页，则在起始页中直接选择“创建新项目”下的HTML选项。（2）如果您的Dreamweaver运行后不显示起始页，则选择“文件”→“新建”命令，弹出“新建文档”对话框，通过该对话框完成新建。【任务2-1-1】新建空白文档网页【操作要求】在站点根目录（D:root）下建立一个名为index.html的网页【操作步骤】（1）启动Dreamweaver后，在文件面板中选择“站点－我的站点”，如图1所示。单击文件面板中的按钮，在“文件”的级联菜单中选择“新建文件”选项，如图2

4、所示。【任务2-1-1】新建空白文档网页图1图2【任务2-1-1】新建空白文档网页（2）在文件面板的“站点－我的站点（D:root）”文件夹中出现了一个新文件，名称为untitled.html，如图3所示。将其重命名为index.html，如图4所示。（3）在文件面板中，双击index.html即可在Dreamweaver的文档窗口中打开该网页，对其进行编辑修改。【任务2-1-1】新建空白文档网页图3图42.1.2设置页面属性在制作网页时，还需要对影响整个页面的参数进行必要的设置。选择“修改”→“页面属性”命令，弹出“页面

5、属性”对话框，如图5所示。1．设置外观2．设置链接3．设置标题4．设置标题和编码5．设置跟踪图像图5【任务2-1-2】页面属性设置【操作要求】在文档窗口中打开D:rootindex.html网页，将网页标题设为“我的主页”，文本字体为“仿宋”，大小为12像素，颜色为#00FF00。【操作步骤】（1）在文档窗口中打开D:rootindex.html网页，右击窗口空白处，弹出一个快捷菜单如图6所示，从中选择“页面属性”命令，弹出“页面属性”对话框，如图7所示。图6图7（2）在“分类”列表框中选择“外观”选项，单击“页面字

6、体”下拉列表框查找所需字体，在字体列表中无所需字体则选择“编辑字体列表”，弹出“编辑字体列表”对话框。（3）在该对话框中的“可用字体”列表框中找到“仿宋”，单击按钮，则“仿宋”字体添加到了“选择的字体”列表框中。（4）在“外观”选项中，在“大小”下拉列表框中选择12，在“文本颜色”文本框中输入#00FF00，如图8所示。（５）在“分类”列表框中选择“标题和编码”选项，在标题对话框中输入“我的主页”，单击“确定”按钮，操作完成。图82.1.3保存文档新建一个文件后，选择“文件”→“保存”命令，弹出“另存为”对话框，在“另存为”

7、对话框选中保存路径，给文件命名，选择保存类型，然后单击“保存”按钮即可完成文件保存。2.2文本操作文本是网页中不可或缺的元素，网页中的文本用来传达网页包含的各种信息与提示。文本的信息量大且生成的文件小，容易被浏览器下载，不会让浏览者用过多的时间等待，因此，不论网页内容如何丰富，文本始终都是网页中的基本元素。同时掌握好文本的使用也是网页制作的基本功。2.2.1在网页中输入文本在网页中输入文本的方法很简单，单击网页中要插入文本的空白区域，窗口随即出现闪动的光标，选择输入法，输入文字即可。也可以用复制方法将其他文本内容粘贴过来。2

8、.2.2设置文本属性文本的属性主要通过文本的“属性”面板来完成，如图9所示。图92.2.3文本换行（1）按Enter键可以换行，同时也就结束了一个段落，且可以使两段之间多出一空行。（2）按Shift+Enter键，文档在同一个段落中换行，两行之间不产生空行。2.2.4插入特殊字符和在字符之