作者：田成,王焕杰,等
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Dreamweaver网页制作基础教程试读：
前言
随着计算机技术的发展和普及，职业技术学校的网页设计与制作教学存在的主要问题是传统的理论教学内容过多，能够让学生亲自动手的实践内容偏少。本书兼容Dreamweaver CS4以上的版本，按照项目教学法组织教学内容，以实践为主，以理论为辅，由浅入深让学生在实际操作过程中循序渐进地了解和掌握网页制作的流程及方法。为确保界面一致，推荐使用Dreamweaver CS4中文版作为教学软件。
全书共12个项目，主要内容如下：
项目一介绍网页的基本知识，完成“个人简介”和“学校简介”的制作。
项目二介绍网页中的文字、图片元素，完成“学校概况”的制作。
项目三介绍表格和嵌套表格布局，完成“学校新闻”的制作。
项目四介绍网页超链接，完成为“新闻页”添加链接。
项目五介绍网页模板及库，通过模板和库完成“新闻动态”的制作。
项目六介绍框架网页及属性设置，完成“新闻动态详细信息”的制作。
项目七介绍表单及属性设置、Spry验证表单，完成“用户注册”的制作。
项目八介绍Flash及其他媒体元素，为网页添加多媒体元素。
项目九介绍CSS+Div样式，通过实例利用CSS+Div美化网页。
项目十介绍AP Div，完成校园网中的动态导航制作。
项目十一介绍行为和源代码，完成为“首页”添加动态效果。
项目十二综合上述内容，完成完整的校园网制作。
在本书的编写过程中，编者参阅了大量文献资料，在此向提供帮助的各位同仁表示感谢。本书由田成、王焕杰、曾跃奇担任主编，沈屏丽、庄志龙、兰翔、杜华英、容湘萍担任副主编，参编人员有张小集、周健、葛宇、张付兰、张丽霞、陈玲、田玲、彭锦强、文祝青、龚碧辉、周运姐等。
由于版面限制和编者水平所限，书中难免存在疏漏和错误之处，恳请广大读者批评指正。
联系方式：cnsyjsj＠163.com。
编 者
2014年3月项目一 制作简介
核心技术
◆ 网页的构成
◆ 文字格式的基本应用
◆ 站点的建立和管理
任务目标
◆ 任务一：制作“个人简介”
◆ 任务二：制作“学校简介”
◆ 任务三：利用站点管理网页
知识摘要
◆ 网页简介
◆ 文本格式的设置
◆ 浏览网页文件
◆ HTML代码
◆ 建立站点
项目背景
根据学校的要求，育才学校网站需要增加学校简介和个人简介两项内容。在制作动态页面之前需要网站管理员预先设计相关的静态页面。
项目分析
在网页设计中，往往需要涉及文字、图片、多媒体等信息。其中，文字修饰是很重要的一个元素。在这个项目中，简单的文字内容可以手工输入，为节省时间，大段的文字可以从素材中获得。
项目目标
通过对于“个人简介”和“学校简介”两个页面的设计，掌握HTML语言的基本常识及网页的基本组成部分。同时对表格的应用及CSS样式表的应用也有一个初步的认识。任务一 制作“个人简介”
知识准备
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站是由网页组成的。网页是一个文本文件，可以存放在世界上某一部计算机中，而这部计算机一般是与互联网相连的。网页由网址（URL）来识别与存取，是万维网中的一“页”，是HTML（超文本标记语言）格式（文件扩展名为.html或.htm）。通过网页可以展现文本、图像、动画、视频、音频，甚至三维虚拟仿真的信息。
项目实施
任务描述
要求网站管理员为育才学校网站设计一个“个人简介”网页，作为后期网站设计的模板，或者作为后期进行动态页面设计的依据。
任务准备（1）计算机已经安装Dreamweaver软件。（2）将需要的素材放到计算机中指定的文件夹内。
操作方法
步骤1：单击“开始”菜单中的Dreamweaver软件项，如图1.1.1所示；或者双击桌面上的Dreamweaver图标，打开Dreamweaver软件，如图1.1.2所示。图1.1.1“开始”菜单
步骤2：在Dreamweaver中选择“文件”→“新建”选项，如图1.1.3和图1.1.4所示。图1.1.2 桌面图标图1.1.3“文件”菜单中的“新建”选项图1.1.4 新建文档窗口
在新建文档窗口选择“空白页”→“HTML”→“创建”选项。新建文档的工具栏如图1.1.5所示。图1.1.5 工具栏
在页面的设计窗口中可以看到三个视图切换按钮，可以分别切换到代码视图、拆分视图和设计视图。在学习网页的初期，设计视图是用得最多的视图。随着对HTML掌握的熟练程度，到后期一般代码视图将用得更多。
█小贴士 视图切换按钮一般设计视图用于网站前台人员进行布局和整体设计，代码视图用于对设计视图进行细微的调节。一般不建议初学者使用代码视图进行直接调整，一个字符的错误都有可能导致整个页面的崩溃，在对所有的HTML代码都比较熟悉的情况下，可以直接对代码进行操作。拆分视图一般用于对代码与设计视图进行对照，以确定编辑的位置和编辑后的效果。
步骤3：单击工具栏上的插入表格按钮，插入一个8行2列的表格，如图1.1.6～图1.1.8所示。图1.1.6 插入表格按钮图1.1.7 表格参数图1.1.8 新建表格
选择“文件”→“保存”选项，保存文件到一个指定的文件夹中，如D：盘的根目录，命名为JianJie.html，如图1.1.9和图1.1.10所示。图1.1.9“文件”菜单中的“保存”选项图1.1.10“另存为”对话框
步骤4：在表格内输入如图1.1.11所示的内容。图1.1.11 新建表格内容
其中的具体内容，可以用自己的真实信息来填写。
步骤5：选择文字“个人简介”，用鼠标右键单击属性，在页面下方的属性面板中设置被选中文字的大小、颜色、粗细等参数。设置为24号，粗体，前景色＃CC0000，背景色＃CCCCCC，如图1.1.12所示。图1.1.12 文字选择状态
█小贴士：十六进制颜色在网页制作中，无论前景色还是背景色都用十六进制的格式来表示，即0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，F。一般6位为一组，前面加“＃”号表示十六进制。其中前两位代表的是红色的分量，中间两位是绿色的分量，最后两位是蓝色的分量。00为最小，FF为最大。根据光的三原色原理，由红、绿、蓝三种分量混合形成最后的颜色。例如，＃FF0000，代表的是纯红色。
图1.1.13为对文字进行设置时最常用的属性。图1.1.13 属性设置
步骤6：依次设置其他文字的格式，最后的效果如图1.1.14所示。
步骤7：在浏览器中预览。
选择文件工具栏上的［浏览调试］按钮，如图1.1.15所示。在IE或者其他浏览器中查看最后的效果，如图1.1.16所示。图1.1.14 设置了文字格式的表格图1.1.15 文件工具栏图1.1.16 制作好的表格
任务总结
通过任务的实现，了解网页的实质及对文本修饰的最基本方法。同时，对于Dreamweaver界面有了初步的了解，对于菜单栏、工具栏、属性面板等具有初步的印象。任务二 制作“学校简介”
知识准备
在HTML文件中，是通过标签对网页中的元素进行标记的，绝大多数标签都是成对出现的。例如，对于title标签而言，开始标签为
一般一个HTML文件必须以开始，以结束。
标签对表示网页的头部。任务描述
根据学校对外宣传的需要，育才学校网站需要设计一个学校简介的页面。要求页面主次分明，有标题，有正文。为方便读者阅读，正文要求用更大的字体和更鲜艳的颜色。请网站管理人员设计一个学校简介的页面，以便将学校网站改版成动态页设立一个模板或标准。
项目实施
步骤1：新建一个HTML网页，名为“JianJieXX.html”，保存到自己指定的目录下，如“项目1”文件夹内。
步骤2：切换到代码视图，如图1.2.1所示。图1.2.1 代码视图1
图中的代码为新建一个HTML网页时自动产生的代码。这些代码是一个标准HTML网页的最基本组成代码。
第1行代码位于文件中最前面的位置，是对于文件类型的声明，此标签可通知浏览器文件使用哪种 HTML 或 XHTML 规范。此行语句一般不需要网页设计人员进行更改。
头部
标签中间，一般用于存放网页的标题、引用的CSS样式表或网页中引用的其他代码。一般只有在
与内的文字或代码才会在网页中显示。而且绝大多数的内容也都会在体部。如果没有特殊强调，一个网页设计的所有内容都需要在标签对内部完成。█小贴士：网页代码在一个网页中有些代码是唯一的，即只出现一次，如、
、步骤3：切换到网页设计视图。在设计页面内输入“学校简介”四个字，如图1.2.2所示。。图1.2.2 设计视图1
再次切换到代码视图，可以看到如图12.3所示代码。图1.2.3 代码视图2
步骤4：切换到设计视图，输入一段文字，或者打开素材文件，如“项目1\简介.txt”，并把简介中的文字复制到当前网页中，如图1.2.4所示。图1.2.4 设计视图2
步骤5：单击学校简介后，将闪烁的插入光标停留在学校简介后，单击键盘上的“Enter”键，结果如图1.2.5所示。图1.2.5 添加回车换行的效果
查看代码，会发现在学校简介的前后分别加入了
与
标签，如图1.2.6所示。图1.2.6 添加回车换行后的代码█小贴士：
标签标签对在HTML语言中是段落标签，为区分两段不同的内容，一般在两段内容之间会有一个空行出现。步骤6：切换到设计视图，用分段的方法把文章分成6个段落，如图1.2.7所示。图1.2.7 设计视图3
步骤7：将插入光标停留在“学校简报”的后面，选择“插入”→“HTML”→“特殊字符”→“换行符”选项（或者用“Shift+Enter”组合键，即按住“Shift”键不放，再按“Enter”键，如图1.2.8所示。图1.2.8“换行符”选项
效果如图1.2.9所示。图1.2.9 设计视图4
从图1.2.9中可以看到，“学校简介”与“学校简报”后面的格式不同。在HTML语言中，对文本的划分一般分为两种模式，一种是分段模式，另一种是换行模式。两者的区别是，换行模式仅是简单的换行，而分段模式会在两个段落之间产生空行。分段的方法是在需要分段处单击“Enter”键，换行的方法是在需要换行处单击“Shift+Enter”组合键。
切换到代码视图，会发现在“学校简报”后加入了换行标签
，如图1.2.10所示。图1.2.10 代码视图3█小贴士：
标签
标签在HTML语言中是换行的标志，与其他标签不同，这个标签不成对出现，仅单独出现，在有些版本中也表示为
。在换行时可以通过菜单的方式来实现，也可以通过快捷键的方式出现，还可以通过代码窗口直接输入代码来实现。
步骤8：用同样的操作，提取各段的标题，并在标题后面换行。各段的标题分别为“学校简报”、“创新办学模式”、“联合办学”、“展望未来”。
步骤9：将插入光标定位在第二段“美丽充满生机”前，选择“插入”→“HTML”→“特殊字符”→“不换行空格”选项，再重复做三次，如图1.2.11所示。也可以使用“Ctrl+Shift+Space”组合键为第二段插入段前空格。图1.2.11“不换行空格”选项
效果如图1.2.12所示。图1.2.12 设计视图5
切换到代码视图，可以看到在第二段前新增加了4个 ；标签。在浏览器中浏览HTML代码时，往往会忽略连续的空格。有时需要在浏览器中体现出空格的效果，则必须人为地添加空格标签。
代码的效果如图1.2.13所示。图1.2.13 代码视图4
█小贴士： ；标签
；标签在HTML语言中是空格的标志，空格标签也是单独出现，而不是成对出现的。一般一个 ；标签在HTML中代表一个英文的空格，由于中、英文编码的原因，一个英文的空格相当于半个汉字的位置。即当需要保留两个汉字的空格时，需要输入四个连续的 ；标签。
步骤10：依次为各需要的段落添加空格标签。
步骤11：切换到设计视图，选择“学校简介”文字，选择“插入”→“HTML”→“文本对象”→“标题1”选项，如图1.2.14所示。图1.2.14“标题1”选项
效果如图1.2.15所示。图1.2.15 设计视图6
代码如图1.2.16所示。图1.2.16 代码视图5
█小贴士：
标签标签对在HTML语言中是标题的标志。在HTML语言中，共有6级标题，分别是h1～h6，h1为一级标题，为字号最大的标题，h6是字号最小的标题，标题用加粗的字体修饰来体现。如果需要其他更大字体的标题，或者具有特殊效果的标题，则需要网页设计者通过CSS样式表的方式来解决。步骤12：选择文字“学校简介”，用鼠标右键单击属性，在属性面板中将其设置为中间对齐。效果如图1.2.17所示。图1.2.17 属性设置
步骤13：选择文字“学校简报”，用鼠标右键单击属性，在属性面板中设置为加粗，字体大小为24。在属性面板上设置“字体”→“编辑字体列表”，如图1.2.18所示。图1.2.18 编辑字体列表
在“编辑字体列表”对话框的右下侧“可用字体”列表框内选择合适的字体，添加到左下侧“选择的字体”中。在上面“字体列表”列表框中则会生成相应的字体列表，如图1.2.19所示。图1.2.19 选择字体
试读结束[说明：试读内容隐藏了图片]