1、第1章 网页基础知识,网页构成要素网页相关知识简介网站建设流程,1.1 网页构成要素,网页中的元素都有自己的名字，可以将他们分为站标、导航条、广告条、标题栏和按钮等。,站标,广告条,导航条,按钮,标题栏,1.1.1 站标,站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。Logo一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合，如下图所示。,1.1.2 导航条,导航条是网站内多个页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面。,导航条,导航条,1.1.3 广告条,广告条又称Ban
2、ner，其功能是宣传网站或替其他企业做广告。Banner的尺寸可以根据版面需要来安排，一般大型商务网站都有自己的标准尺寸和摆放位置。,1.1.4 标题栏,此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。标题栏可以是文字加单元格背景，也可以是图片，一般大型网站都采用前者，一些内容少的小网站常采用后者。,1.1.5 按钮,在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。,1.2 网页相关知识简介,1.2.1 网页的本质,通过前面的学习，我们知道网页中除了包
3、含文字外，还包含图像、动画等内容。那么，网页是如何将这些元素有机地组合在一起了呢？打开网站“人民网”，在浏览器中选择“文件”“另存为”菜单，将网页保存到磁盘中，然后看看网页及其组成素材。,1.2.2 互联网,互联网（Internet），又叫因特网，它是目前世界上最大的计算机网络，将无数广域网、局域网及单机按照一定的通讯协议组织在一起，方便了计算机之间的信息传递。,1.2.3 网站、网页和主页,网站是多个网页的集合，各个网页通过超级链接构成一个网站整体。网页分为动态网页和静态网页。动态网页可提供交互式的操作功能，而静态网页则相反，它只供浏览者浏览，而不提供交互功能。主页也叫首页，即浏览者登录网站
4、时看见的第一个网页，也是网站的入口。,1.2.4 IP地址与域名,IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“61.135.150.126”就是一个IP地址。由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。域名是独一无二的。,1.2.5 网址,网址又叫URL，它是一种网络上通用的地址格式，用于标识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。,1.2.6 浏览器,上网浏览网页需要通过浏览器，目前大多数用户使用的是微软公司的IE浏览器（Internet Explo
5、rer），其他浏览器还有Netscape Navigator、Mosaic、Opera、火狐等。国内厂商开发的浏览器主要有腾讯TT、遨游（Maxthon Browser）等。,菜单栏,标题栏,地址栏,课堂练习1 在浏览器中打开金企鹅网站,本例通过在IE浏览器中打开金企鹅网站，来熟悉一下域名、网址和浏览器的应用。,启动IE浏览器，在地址栏中输入金企鹅网站域名,按【Enter】键，打开网页,1.2.7 网站管理与网页制作相关软件,Fireworks：主要用于制作网页图像、网站标志、GIF动画、图像按钮与导航栏等。Flash：主要用于制作矢量动画，如广告条、网站片头动画、动画短片、MTV等。Phot
6、oshop：Adobe公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计的需要（除了多媒体）。,在进行网页制作时，除需要Dreamweaver外，还会用到Fireworks、Flash、Photoshop等辅助软件。,1.2.8 XHTML语言简介,XHTML是Extensible HyperText Markup Language(可扩展超文本标记语言)的英文缩写，它的前身是HTML。由于HTML代码烦琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。,1.2.9 脚本语言简介,
7、脚本语言是基于对象的编程语言，网页中常用的有VBScript、JScript和JavaScript。VBScript和JScript是微软的产品，IE都支持。JavaScript是Netscape的产品，不仅适用于Netscape，同时和IE也有很好的兼容性，可以说是一种通用的脚本语言。,课堂练习2 无缝滚动效果的实现,本例通过研究无缝滚动效果的实现，来认识一下XHTML和脚本语言在网页制作中的作用。,XHTML,JavaScript,1.3 网站建设流程,1.3.1 网站需求分析,1确定网站主要内容 2规划网站主要栏目 3收集网页所用素材,1.3.2 设计制作网站页面,该过程主要包括设计和制
8、作页面，所谓设计，就是用图像处理软件设计好网页的效果图，并将设计好的效果图进行切割导出。,将切割好的图片进行导出后，就可以在Dreamweaver中组织网站内容了。包括输入文本、插入图片、动画等。,1.3.3 空间和域名申请,1申请虚拟空间,所谓虚拟空间，就是互联网上的一台功能相当于服务器级的电脑或虚拟主机，该电脑要用专线或其他形式24小时与因特网相连。,2申请域名,域名的申请方法与虚拟空间相同，凡提供虚拟空间服务的网站一般都提供域名服务。,1.3.4 测试和发布网站,有了空间和域名后，就可以测试并发布网站了，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。,1.3.
9、5 网站推广,注册到搜索引擎 交换广告条 宣传 网络广告 报纸、杂志,第2章 Dreamweaver 8入门,熟悉Dreamweaver 8工作界面 网站创建与管理 基本页面属性设置,2.1 熟悉Dreamweaver 8工作界面,启动Dreamweaver 8后，在起始页的“创建新项目”列中单击第一项“HTML”，将会创建一个“.html”格式的新文档，并进入Dreamweaver 8工作界面。,2.1.1 标题栏和菜单栏,标题栏上显示软件名称、文档标题和程序窗口控制按钮（“最小化窗口”按钮、“最大化窗口”按钮 和“关闭窗口”按钮）。菜单栏中几乎集中了Dreamweaver 的全部操作命令，
10、利用这些命令可以编辑网页、管理站点以及设置操作界面等。,2.1.2“插入”栏,“插入”栏包含各种类型的对象按钮（如图像、表格和层等），通过单击这些按钮，可将相应的对象插入到文档中。,2.1.3 文档标签与“文档”工具栏,文档标签显示了网页文档名称；“文档”工具栏用于切换网页视图，设置网页标题，检查浏览器支持等。,2.1.4 状态栏,状态栏位于文档编辑窗口底部，它提供了与当前文档相关的一些信息。,课堂练习1 利用状态栏中标签选择单元格,在制作网页时，往往会使用一些像素值非常小的图片作为装饰，而要选中这些小图片或小图片所在的单元格就有些困难了，本节我们就来看看如何利用“标签选择器”来选中这些小单元
11、格。,2.1.5 属性面板与面板组,在Dreamweaver中，大多数操作都是通过面板实现的。“属性”面板位于文档窗口的下方，主要用于查看或编辑所选对象的属性。除“属性”面板外，Dreamweaver 8还提供了众多面板，如“文件”面板、“历史记录”面板等。如要打开或关闭某个面板，可单击“窗口”菜单下的相应选项。,课堂练习2 面板基本操作,在了解了面板的种类和作用后，本节来看看如何打开新的面板、隐藏面板，以及完全关闭面板等。,2.2 网站创建与管理,2.2.1 确定站点目录结构,为便于以后管理和维护网站，在开始创建网页之前，最好先确定站点的目录结构。它主要包括两项任务，一是在本地磁盘上创建用来
12、保存网站内容（包括网页文件和图像、动画等）的文件夹，该文件夹被称为站点根文件夹；为便于管理站点中的内容，还要根据网站栏目结构图在站点文件夹中创建若干子文件夹，以存放不同类型的文件。,课堂练习3 在Dreamweaver中定义“lily”站点,为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。定义站点可以将本地磁盘中的站点同Dreamweaver建立一定的关联，可以使用Dreamweaver上传或下载站点内容。,2.2.2 网页文档基本操作,1新建文档,Dreamweaver中的文档也就是网页，创建新网页的方法有多种，下面使用“文件”菜单创建网页。,选择“文件”“新
13、建”菜单，打开“新建文档”对话框。,2保存文档,新建或编辑网页文档后，需要保存文档，才能使所做的设置生效。,选择“文件”“保存”菜单，弹出“另存为”对话框,选择保存位置,输入文件名,单击“保存”按钮,3预览文档,对网页进行编辑或修改后，可在浏览器中预览其效果。,打开文档后，单击文档工具栏中的 按钮，在弹出的菜单中选择“预览在IExplore 6.0”菜单项,4打开和关闭文档,如果要打开某站点中现有的网页文档，可以选择“文件”“打开”菜单，在弹出的“打开”对话框中选择要打开的文件，然后单击“打开”按钮。,选择目标文件所在文件夹,关闭文件的操作相当简单，只需单击相应文件右上方的“关闭”按钮。,单击
14、选择文件,单击“打开”按钮,课堂练习4 利用“文件”面板创建网页,使用“文件”面板，可以非常方便地管理站点和站点中的文件。本节看一下在“文件”面板中创建和命名文档的方法。,2.2.3 网页文档与文件夹命名规则,为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。首先，静态的首页文件一般命名为“index.html”或“index.htm”。如果是包含程序代码的动态页面，比如ASP文件，则命名为“index.asp”。总之，后缀名与网页本身所使用的技术是对应的。,2.3 基本页面属性设置,2.3.1 指定网页文档标题和边距,在浏览网页时，可以看到浏览器上端都会有表示网页特征或
15、欢迎词之类的标题。另外，一般网页的上、下、左、右边距均为0，它们是如何设置的呢？下面以“lily”网站中的“index.html”为例，来看看具体设置方法。,2.3.2 指定网页背景颜色和背景图像,指定网页背景颜色的方法非常简单，只需在“页面属性”对话框中单击“背景颜色”后的颜色按钮，然后在弹出的调色板中单击选择相应颜色就可以了。,如果用户喜欢的话，也可以将图像设置为网页背景。,2.3.3 为网页设置文本和链接属性,通过设置“页面属性”对话框中的“页面字体”、“大小”和“文本颜色”，可以设置网页中文本的属性。另外，要设置链接文本的属性，可以在“页面属性”对话框左侧的分类列表中选择“链接”选项，
16、然后在右侧设置各项参数。,课堂练习5 为“movie”网页设置页面属性,通过前面的学习，相信大家对基本页面属性的设置已经有了个大概的认识。本节通过编辑“movie”网页，来使读者进一步掌握网页页面属性的设置方法。,设置页面属性前后效果对比,第3章 输入与编辑基本网页元素,输入与编辑文本应用图像,3.1 输入与编辑文本,3.1.1 输入文本,在Dreamweaver中输入文本的方法非常简单，只要将插入点定位在网页的某个位置，然后输入文本就可以了。此外，用户还可以利用剪贴板将外部文本拷贝到网页中，然后设置其格式和各种属性。,3.1.2 设置文本的段落格式和字符格式,Dreamweaver中的文本格
17、式设置与标准字处理程序（如Word）类似。用户可以利用“属性”面板为文本设置默认格式化样式（段落、标题 1、标题 2等），或者直接设置所选文本的字体、大小、颜色、粗体、斜体、对齐方式和列表方式等。,1设置字体列表,Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需求。我们可以通过设置字体列表来解决这一问题。,选择字体,单击添加字体,2设置文本字体及大小,学会设置字体列表后，就可以随心所欲地设置文本的字体了。下面就来学习在“属性”面板中设置文本字体及大小的方法。,拖动鼠标选中文本,设置字体、大小等属性,3设置段落缩进,通过设置段落缩进格式，可以更好地布局文档。将插入点置于需
18、要设置段落缩进的任意段落中，然后在“属性”面板的“格式”下拉列表中选择“段落”选项，单击“文本凸出”按钮 可使段落凸出，单击“文本缩进”按钮 可使段落缩进。,4设置列表项,列表分为项目列表和编号列表，项目列表常应用在“列举”类型的文本中，编号列表常应用在“条款”类型的文本中，这种方式使得文本更直观、明了。选中所要设置的文本，然后单击属性面板上的“项目列表”按钮，即可设置列表项。,课堂练习1 设置“公司介绍”网页文本,在学习了文本的输入和格式设置方法后，下面通过一个小例子来练习和巩固一下这些知识。,3.1.3 插入水平线和特殊字符,1水平线,水平线对于组织信息和区分版块很有帮助。要插入水平线，可
19、以选择“插入”“HTML”“水平线”菜单。,2插入特殊字符,要插入特殊字符，可以选择“插入”“HTML”“特殊字符”菜单，然后在弹出的菜单中选择相应的特殊字符。如果在“特殊字符”菜单下没有找到需要的特殊字符，可以通过选择该菜单中最下面的“其他字符”命令打开“插入其他字符”对话框。,3.2 应用图像,目前在网页中可以使用的图像包括JPEG、GIF和PNG格式，下面分别列出了它们各自的特点：,JPEG（联合图像专家组标准）格式：适于表现色彩丰富，具有连续色调的图像，如各种照片。GIF（图形交换格式）格式：最多只能包含256种颜色，适合表现色调不连续或具有大面积单一颜色的图像。PNG（便携网络图像）
20、格式：集JPEG和GIF格式的优点于一身，既能处理照片式的精美图像，又能包含透明区域，且可以包含图层等信息，是Fireworks的默认图像格式。,3.2.1 插入与编辑图像,在Dreamweaver中插入图像的方法非常简单。在确定图像插入点后，单击“常用”插入栏中的“图像”按钮，打开“选择图像源文件”对话框，从中选择要插入的图像，然后单击“确定”按钮即可。,3.2.2 使用图像占位符,图像占位符的用法非常简单。选择“插入”“图像对象”“图像占位符”菜单，打开“图像占位符”对话框，然后设置其名称、尺寸、颜色和替换文本，最后单击“确定”按钮，在指定位置插入一个图像的临时替代对象。,3.2.3 制作
21、鼠标经过图像,在网页中经常可以看到这种情况，当鼠标移动到某一图像上时，图像变成了另一幅图像，而当鼠标移开时，又恢复成原来的图像，这就是我们通常所说的鼠标经过图像。,课堂练习2 为“macaco”网页制作交互式导航条,导航条在网站中起着不可替代的作用，它把网站中的各个页面连接起来，每一个网站都有自己的导航条。利用与制作鼠标经过图像类似的方法，可制作具有可变效果的导航条。,第4章 构建网页布局,使用表格使用框架,4.1 使用表格,所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素通常都被放置在这些单元格中，以使其
22、“各安其位”。,此处表示未明确设置单元格的宽度,此处显示了表格的宽度。如果只显示一个“”符号，表示未明确设置表格宽度,4.1.1 创建表格,在Dreamweaver中创建表格的方法非常简单。确定插入点后，单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格。,4.1.2 选择表格和单元格,在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。要选择某个单元格，可首先将插入点放置在该单元格内，然后按【CtrlA】组合键或单击“标签选择器”中对应的“”标签。要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑
23、色箭头 或 时单击鼠标。,4.1.3 设置表格和单元格的属性,选中表格后，使用属性面板可以修改表格的行、列、宽、高，以及填充、间距等。,在单元格中单击，属性面板中将显示相应单元格的属性。,1设置表格和单元格的宽度与高度,制作网页时，很多情况下都需要改变表格和单元格的宽度与高度，通过拖动边框或在属性面板的“宽”和“高”文本框中直接输入数值，就可以非常方便地改变表格和单元格的宽度与高度。,设置表格高度,设置单元格“宽”和“高”,2为表格和单元格设置背景颜色及背景图像,为表格和单元格设置背景颜色及背景图像的方法相当简单。,将插入点置于单元格中,单击“背景”文本框后的文件夹图标,选择文件,课堂练习1
24、使用表格构建“火百合”主页布局,在学习了表格的简单应用后，下面将结合表格与图像的应用来看一下“火百合”主页的具体制作方法。,课堂练习2 制作细线表格,在Dreamweaver中，有多种方法可以制作细线表格，下面我们讲解一种最简单也是最常用的方法，就是通过设置表格的间距和背景颜色来制作细线表格。,4.1.4 合并与拆分单元格,1合并单元格,所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。,拖动鼠标选中要合并的单元格,单击“合并所选单元格，使用跨度”按钮,2拆分单元格,拆分单元格表示将一个单元格拆分成多个单元格，下面继续在前面的文档中操作，也就是将前面合并的单元格拆分开来，具体操作如下。,
25、在要拆分的单元格中单击,单击“拆分单元格为行或列”按钮,打开“拆分单元格”对话框，设置各项参数后单击“确定”按钮,4.1.5 添加或删除行和列,在使用表格布局网页时，往往需要在创建好的表格中添加或删除行和列。,在要添加行或列的单元格中单击鼠标右键，在弹出的快捷菜单中选择“表格”“插入行或列”菜单,在打开的“插入行或列”对话框中设置各项后单击“确定”按钮,4.1.6 格式化表格,在使用表格显示数据信息时，为便于浏览者阅读，往往需要为单元格设置不同的背景颜色。常用的方法如下。,选中表格后，选择“命令”“格式化表格”菜单,在“格式化表格”对话框中设置各项后，单击“确定”按钮,课堂练习3 制作嵌套表格
26、,所谓嵌套表格，就是在一个大表格的某个单元格里插入一个新的表格，我们看到的绝大多数网页都是由多个表格相互嵌套进行网页布局的。本节通过制作“lily”网站中的“产品展示”页面来看看嵌套表格的应用和制作方法。,课堂练习4 制作圆角表格,在浏览网页时，经常会看到圆角表格，这使得整个网页看起来更加柔和、美观。制作圆角表格的方法有很多，下面就以制作下图左侧的表格为例，具体讲解一下此类表格的制作方法。,4.2 使用框架,4.2.1 关于框架和框架集,在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架。每个框架可显示不同的文档内容，彼此之间互不干扰。框架网页由框架集定义，框架集是特殊的HTML
27、文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。,4.2.2 创建框架集,用户可以直接创建框架集，也可以在普通页面中加载预定义的框架集。其中，直接创建框架集的方法与创建普通页面的方法相似。,选择“文件”“新建”菜单，打开“新建文档”对话框,在“类别”列表中选择“框架集”选项，右侧将显示系统预定义的框架集类型，选择其中一种，然后单击“创建”按钮,4.2.3 框架和框架集的基本操作,1认识“框架”面板,利用“框架”面板可以对框架和框架集进行操作，选择“窗口”“框架”菜单，可以打开“框架”面板。,2选择框架和框架集,在文档窗口中选择框架的方法为，按
28、住【Alt】键，然后在要选择的框架内单击，被选中的框架边线将显示为虚线。如要选择框架集，单击该框架集上的任意边框即可，此时框架集的所有边框都呈虚线显示。利用“框架”面板选择框架时，直接在面板中相应区域单击即可。选择框架集时，在面板中单击框架集的边框即可。,4.2.4 框架和框架集的属性设置,1设置框架属性,选中框架后，“属性”面板上将显示相应框架的属性。,显示框架源文件的保存路径,选择是否显示框架的边框,设置框架滚动条的属性,2设置框架集属性,选中框架集，属性面板中将显示框架集的属性。,该面板中各参数的含义同框架属性面板基本相同，不同的是在“行”或“列”文本框中可设置框架的行高或列宽，在“单位
29、”下拉列表框中可选择具体单位。,4.2.5 保存框架和框架集,1保存框架2保存框架集 3保存框架集中的所有文档,课堂练习5 用框架布局网页,该例制作了一个名为“娱乐天地”的网页，它首先利用框架将页面划分成了若干区域。另外，在局部布局中也用到了表格。,第5章 应用超链接和行为,应用超链接应用行为,5.1 应用超链接,5.1.1 常规超链接,常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。,1内部超链接,内部超链接的设置非常灵活，在选中要设置链接的文本或图像后，可以在属性面板的“链接”编辑框中直接输
30、入要链接到的网址或网页名称；也可以通过单击属性面板上“链接”编辑框后的文件夹图标，在弹出的“选择文件”对话框中选择要链接到的文件；还有一种方法是单击并拖动“属性”面板上“链接”编辑框后的 按钮到“文件”面板中的文件上。,2外部超链接,外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板的“链接”编辑框中输入要链接到的网址。,5.1.2 图片链接和下载链接,设置图片链接和下载链接的方法非常简单，选中要设置为链接的文字或图片后，只要在“属性”面板的“链接”编辑框中将链接目标设置为图像文件或压缩文件就可以了。,5.1.3 电子邮件链接,有些网站上留有电子邮件地址，单击该地址可打开“Out
31、look Express”的“新邮件”窗口。这是一种特殊类型的链接，又叫电子邮件链接，下面看看此类链接的设置方法。,5.1.4 热点链接,如何为一张图片设置多个链接呢？这就用到了热点。使用热点工具可以将一张图片划分成多个区域，并为这些区域分别设置链接。,5.1.5 命名锚记链接,要创建命名锚记链接，应首先定义好命名锚记，然后创建跳转到命名锚记的链接。,5.1.6 使用跳转菜单,我们可以把跳转菜单看作是一种超链接的集合，它以弹出式下拉菜单的形式在网页中展现出来。弹出菜单内的链接没有类型上的限制，可以是本地链接，也可以是到其他网站的链接，还可以是电子邮件链接或命名锚记链接。,课堂练习1 为拍拍网页
32、中的文字和图像添加链接,学会了使用超链接，就可以将网站中一个个单独的网页链接起来。通过前面的学习我们知道，超链接的形式有多种，但最常用的只有常规的文本和图片链接，接下来我们就通过下面的例子来进一步掌握这两种最基本的链接形式。,5.2 应用行为,5.2.1 初识行为,应用行为时需要先选中要应用行为的对象，然后在“行为”面板的动作列表中选择效果，并在打开的窗口中设置效果，最后指定设定的动作在什么情况下发生，也就是指定事件。,5.2.2 熟悉“行为”面板,为文档添加行为，需要使用“行为”面板，下面认识一下“行为”面板。选择“窗口”“行为”菜单，或按【Shift+F4】组合键，即可打开“行为”面板。,
33、课堂练习2 应用“打开浏览器窗口”行为,应用“打开浏览器窗口”行为，可通过单击目标文字或图片，打开固定大小的窗口，下面通过一个实例，来看看“打开浏览器窗口”行为在网页中的具体应用。,课堂练习3 应用“显示隐藏层”行为,有些内容较多的网站经常需要用到下拉菜单，使用“显示-隐藏层”行为就可以轻松实现该功能，本节以“pegiun”网页为例，讲述下拉菜单的制作方法。,课堂练习4 应用“设置状态栏文本”行为,如果为自己的网页设置一些比较有个性的状态栏文本，那一定很吸引人，下面我们就来给pegiun网页设置状态栏文本。,课堂练习5 制作弹出式窗口,使用“打开浏览器窗口”行为可以实现在打开网页时弹出新窗口的功能，许多站点都使用这种方式来弹出重要的通知、广告信息等页面，下面来看具体操作。,5.2.3 安装插件,除Dreamweaver内置的行为外，读者还可以到macromedia或其他网站去下载并安装第三
