资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第1章 初识网站和网页,网站和网页,网页中的元素类型,从功能角度分析网页,常用网站管理与制作软件,网站建设流程,1.1 网站和网页,网站是网页的集合，网页是组成网站的元素。,1.1.1 网站、网页和主页,网页,大型网站,一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。,小型网站,新浪网站首页,主页也叫首页，每个网站都有自己的首页，它是浏览者登录网站时看见的第一个网页，也是网站的入口。,1.1.2,网页是什么,网页中除了包含文字外，还包含图像、动画等内容。,图像,动画,文字,我们看到的一个个网页都是由多个文件组成的。网页文件是“根”，图像和动画文件都是“枝叶”。,图像文件,网页文件,选择“文件”“另存为”菜单,在浏览器中选择“文件”菜单中的“另存为”，可将网页保存到磁盘中。,1.2 网页中的元素类型,1.2.1 网页中的文字与图像,文字与图像是网页中的基本元素，是浏览者获得相关信息的主要来源。,可在设计网页时为文字设置位置、字体、字号、颜色、对齐方式，以及加粗和倾斜等格式。,网页中只能使用和显示JPEG、GIF和PNG格式的图像，其他诸如BMP和TIF等格式的图像目前还都不能用于网页中。,1.2.2 网页中使用的动画与视频影像,视频流技术常见的格式有Real Video及Apple QuickTime。,GIF动画,SWF动画,目前，大家在网页中看到的动画主要包括两类，即动态GIF格式动画和SWF格式动画。,动态GIF格式动画的原理十分简单，就是高速连续显示多幅静态图像，就像播放动画片一样。通常用于制作简单的小型动画。,如果需要在网页上使用一些大型、复杂或带有声音的动画，可借助Macromedia的Flash软件来制作SWF动画。,1.2.3 网页中使用的声音,适当的在网页上加点音乐效果，会使网页更具吸引力。目前，网上比较流行的音频格式主要有MIDI、WAV、MP3与Real Audio。,控制音乐的播放,1.3 从功能角度分析网页,从功能的角度来看，可以将网页中的元素分为站标、导航栏、广告条、标题栏和按钮。,站标,导航栏,广告条,标题栏,按钮,1.3.1 站标,站标也叫LOGO，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站LOGO通常采用企业的LOGO。,LOGO通常采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合。,1.3.2 导航栏,导航栏实际上是网站内多个页面的超链接组合。导航栏也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。,设计导航栏时，有几点需要注意。,如果网站内容不多，并且导航栏不超过两排，可以根据网站风格尝试灵活摆放，如放在网页的左侧或者放在页面上方等。,页面左侧,页面上方,如果网站的栏目很多，可以将导航栏分为多排放置在主页LOGO的下方或右侧，为便于观看，可为各排设置不同的底色。,LOGO右侧,LOGO下方,如果导航栏内容较多的话，尽量使用文字超链接而不用图片。不过，如果导航栏内容不多，或者网页内容比较活泼的话，多采用图片或Flash制作导航栏。,图片导航栏,Flash导航栏,广告条又称Banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。,1.3.3 广告条,在Banner的制作过程中有一些要点需要注意：,Banner可以是静态的也可以是动态的。,Banner的体积不宜过大，尽量使用GIF格式的图片与动画或Flash动画。,Banner中的文字不要太多，只要达到一定的提醒效果就可以。,Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果。,这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。,标题栏可以是文字加单元格背景，也可以是图片，一般的大型网站都采用前者，一些内容少的小网站采用后者。,1.3.4 标题栏,标题栏,标题栏,网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。,设计按钮时，要保证按钮与页面的协调，不能太抢眼，如果按钮上有字则尽量使用单色或渐变色背景，保证字迹清晰。当页面上有多个按钮的时候，应分清主次，根据网页的需要改变按钮的颜色或者大小。,1.3.5 按钮,按钮,按钮,1.4.1常用网站管理与网页编辑软件,1.4 常用网站管理与制作软件,Dreamweaver：网页制作软件三剑客之一，该软件是现在使用最多的网页编辑工具，它支持DHTML动态网页、Flash动画、插件，能实现很多FrontPage无法实现的功能，如动态按钮、下拉菜单等。另外，它还可以用来作为动态网站的开发环境。,FrontPage：该软件是目前最简单、最容易上手，且功能强大的网页制作利器，特别适合网页初学者使用。不过，Frontpage也有不少缺点：首先是兼容性不好，利用FrontPage做出来的网页往往不能用Netscape浏览器正常显示；其次，生成的垃圾代码多；此外，FrontPage对动态网页支持不好，不支持Flash，显得有点落伍了。,1.4.2 网页设计辅助软件,在进行网页制作时，除了需要Dreamweaver、FrontPage等软件外，还会用到Fireworks、Flash、Photoshop等软件，这些软件的主要功能与特点如下：,Fireworks：主要用于制作网页图像、标志、GIF动画、图像按钮与导航栏等。,Flash：主要用于制作矢量动画，如广告、网站片头动画、动画短片、MTV等。,Photoshop：Adobe公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计所涉及到的各种需求（除了多媒体）。,1.4.3 常用网站程序设计语言,如果网站中包含动态网页，除了需要学习一些常用的网页设计软件外，还应掌握一些常用的网站程序设计语言。,JavaScript和VBScript脚本语言,Java,CGI,ASP,ASP.net,PHP,JSP,1.5 网站建设流程,1.5.1 根据要求确定网站内容,建设网站要有目的性，首先要确定网站的性质和受众，并预期网站发布后的反响。确定了这些后就要开始组织网站的主要内容。,1.5.2 规划网站栏目,确定了网站内容后，就要开始进行网站规划。例如，将网站的内容划分成哪些栏目，从而使网站既便于浏览者的浏览，也有利于网站将来的维护和更新。,1.5.3 确定网页尺寸与版面布局,目前显示器最常用的分辨率是1024768像素和800600像素。,在1024768的分辨率下显示的页面的尺寸应该为1007600像素，而800600的分辨率下显示的页面尺寸为778435像素。,确定了网页尺寸后，接下来的任务就是确定网页布局类型了。网页布局类型没有确定的标准，可以根据需要制定。常见的布局有上下分割型、左右分割型和复合分割型（上下分割和左右分割结合）。,上下分割型,左右分割型,1.5.4 确定网站配色与风格,不同的网站有着自己不同的风格，也有着自己不同的颜色。基本上网站使用的颜色从出发点上看可以分为以下3种类型：,行业风格色,：许多网站使用颜色秉承着所属行业的风格。,企业标准色,：在现代企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如Intel官方网站的主色调是一种接近于天蓝的蓝色，,个人习惯色,：这种配色方法的使用在很大程度上是凭设计者的个人爱好以及当时的心态决定的，在个人网站较为多见。,行业风格色,著名的化妆品公司玫琳凯中国网站使用的颜色是粉色。这几乎是所有化妆品行业中最常用到的颜色，这种颜色代表了高贵，典雅以及甜蜜等；,企业标准色,在现代企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如Intel官方网站的主色调是一种接近于天蓝的蓝色。,个人习惯色,这种配色方法在设计的时候自由度非常高，同时所选的题材与要表现的内容也是由设计者自己决定，比如设计者喜欢红色和黑色，那么在设计的时候就倾向于使用这两种颜色。,下面是一些网页配色时的小技巧,用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度。,用两种色彩：先选定一种色彩，然后选择它的对比色。,用一个色系：简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。,颜色不能太多：不要将所有颜色都用到，尽量控制在35种色彩以内。,背景和前文的对比：背景和前文的对比尽量要大（尤其不要使用花纹图案作为页面背景），以便突出主要文字内容。,1.5.5 收集网页所用素材,在制作网页之前，应首先收集好制作网页时要使用的素材，这些素材包括文字资料、图片、动画、声音、视频等。,对于一些原始的材料还可以使用PhotoShop、Fireworks、Flash等软件进行处理，使其可以更好地应用于网页。,1.5.6 利用软件制作网页,制作网页也就是整合网页素材，即使用Dreamweaver等软件进行网页设计。,还可以根据需要为网页增加一些特效，比如闪烁的字幕、跳出动画、改变鼠标的形状等，这些多是通过JavaScript来实现的。,1.5.7 测试和发布网站,在发布之前需要先对网站进行测试，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。,要发布网站，用户需要具备两个条件：域名和虚拟主机。提供这类服务的公司被称为域名和网站托管服务商，目前，这类公司也有很多，如中国万网（）、通联无限（）等。,第2章 初识Dreamweaver 8,熟悉,Dreamweaver 8,操作环境,网站规划与管理,设置页面属性,上机实践编辑“墨攻”页面并保存,2.1,熟悉,Dreamweaver,操作环境,安装Dreamweaver 8后，单击“开始”按钮，选择“所有程序”“Macromedia”“Macromedia Dreamweaver 8”菜单，就可以启动Dreamweaver 8了。进入Dreamweaver 8后，首先映入眼帘的是起始页。,打开最近打开过的文件,创建不同类型的新文件,在系统内置文件的基础上创建新文件,在起始页的“创建新项目”列中选择“HTML”后，将会进入Dreamweaver 8的工作界面。,菜单栏,标题栏,插入栏,文档标签,文档工具栏,收缩与展开下方面板组,状态栏,属性面板,收缩与展开右方面板组,面板组,2.1.1,“插入”栏,“插入”栏包含用于将各种类型的对象（如图像、表格和层）插入到文档中的按钮。,单击“插入”栏左侧的“常用”按钮可以打开一个下拉列表，从中选择其他选项可以改变“插入”栏的内容。,单击“常用”按钮，在下拉列表中选择“显示为制表符”命令，“插入”栏的外观将发生变化。,某些按钮的右侧带有一个小三角符号“ ”，单击该三角符号将弹出该按钮的一组同位按钮。,2.1.2 文档标签与文档工具栏,文档标签显示了当前打开的网页文档的名称。,只显示代码视图,显示代码视图和设计视图,只显示设计视图,刷新设计视图,在浏览器中预览/调试,文档工具栏用于切换网页视图，管理文件，以及预览网页等。,文档标题,2.1.3 文档窗口中的状态栏,状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。,标签选择器,手形工具,缩放工具,文档大小与预计下载时间,标签选择器显示了光标所在位置的标签的层次结构。,选取、手形和缩放工具是Dreamweaver 8新增的功能， 分别用于选取、移动和缩放对象。,选取工具,2.1.4 属性面板与面板组,属性面板用于查看或编辑所选对象的属性。属性面板会随着所选对象的不同而变化。,选中图像后的属性面板,选中文字后的属性面板,Dreamweaver 8为用户提供了众多面板，如属性面板、文件面板、历史记录面板等。为便于管理，Dreamweaver 8将这些面板归入到不同的面板组中。,“文件”面板组包括三个面板,“CSS”面板组包括两个面板,2.2 网站规划、创建与管理,2.2.1 确定网站结构,所谓网站结构，就是网站中各个分支之间以及分支与主页之间的关系,。,通常情况下，一个网站的结构往往与该网站的导航菜单相对应。,确定好网站结构后，接下来应根据网站结构创建本地站点，实际上就是确定本地站点以及文件的存放位置。,2.2.2 确定站点目录结构,2.2.3 定义站点,站点信息,新站点,为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。,定义站点可以将本地磁盘中的站点同Dreamweaver建立一定的关联。,2.2.4 新建、打开和关闭网页文件,1.新建网页文件,Dreamweaver中的文件也就是网页，可以通过“文件”“新建”菜单来创建新网页。,2.打开网页文件,如果要打开某站点中现有的网页文件，可以选择,“,文件,”,“,打开,”,菜单，在,“,打开,”,对话框中进行选择。,3.关闭网页文件,要关闭网页文件，只需单击相应文件右上角的“关闭”按钮，或者按【Ctrl+W】组合键。,2.2.5 保存和预览网页文件,新建或编辑网页文件后，需要保存文件，才能使所做的设置生效。,选择“文件”“保存”菜单或按【Ctrl+S】组合键，即可保存文件。,对网页进行编辑或修改后，,按【F12】键,可以在浏览器中预览其效果。,2.2.6 “文件”面板的应用,在Dreamweaver中，利用“文件”面板可以非常方便地管理站点中的网页文件和文件夹。,显示站点名称,连接到远程主机或与远程主机断开,刷新站点,获取文件,上传文件,取出文件,存回文件,选择视图,展开以同时显示本地和远程站点,站点内容列表,1新建文件和文件夹,利用“文件”面板可以方便地新建文件（实际上就是网页）和文件夹。,如要新建文件夹，可在弹出的菜单中选择“新建文件夹”选项，其他操作同上。,2重命名文件和文件夹,在“文件”面板中可以方便地重命名文件和文件夹，在右键快捷菜单中选择“编辑”“重命名”菜单即可。,3文件与文件夹的命名规则,为便于日后的维护和管理，网站中所有文件和文件夹的命名都是有一定规则的。,最好不要使用中文命名文件。,文件名中不要使用大写英文字母。,运算符符号不能用在文件名的开头。,比较长的文件名可使用下划线“_”来隔开多个单词或关键字。,在大型网站中，分支页面的文件应存放在单独的文件夹中存放网页图像的文件夹一般命名为“images”或者“img”。,在动态网站中，用来存放数据库的文件夹一般被命名为“data”或者“database”。,4在“文件”面板中打开和删除文件,要打开文件，可以直接在文件列表区双击文件名。如果是网页文件，该文件会自动在网页编辑区打开；如果是图像文件，系统会自动启动Fireworks并打开文件。,要删除文件或文件夹，可以右击文件或文件夹，然后在弹出的菜单中选择“编辑”“删除”，也可在选中文件后，直接按【Delete】键删除。,2.3 设置页面属性,2.3.1 外观选项,单击属性面板上的“页面属性”按钮，或者选择“修改”菜单下的“页面属性”命令，将打开“页面属性”对话框，默认显示为“外观”选项。,设置页面字体,设置页面字号,设置页面文本颜色,设置页面背景颜色,设置页面背景图像,设置背景图像重复方式,设置页面与浏览器左、右、上、下边界的距离,2.3.2 链接选项,在“页面属性”对话框中，单击左侧“分类”列表中的“链接”选项，其参数设置将显示在对话框右侧。,设置链接文本的字体,设置链接文本的字号,设置链接文本在不同状态下的颜色,设置链接对象的下划线情况,2.3.3 标题选项,单击左侧“分类”列表中的“标题”选项，其参数设置将显示在对话框右侧。,设置页面标题的字体样式,设置各级标题的字号以及颜色,2.3.4 标题/编码选项,单击左侧“分类”列表中的“标题/编码”选项，其参数设置将显示在对话框右侧。,设置网页标题,指定文档类型定义,指定文档中字符所用的编码类型,2.3.5 跟踪图像选项,单击左侧“分类”列表中的“跟踪图像”选项，其参数设置将显示在对话框右侧。,设置跟踪图像,设置跟踪图像的透明度,2.4 上机实践编辑“墨攻”页面并保存,本节通过编辑 “墨攻”页面，来使读者进一步领略Dreamweaver的独特魅力（具体操作见视频）。,第3章编辑基本网页元素,文本输入与编辑,上机实践设置“舞林报道”网页文本,使用图像,上机实践在“拍拍”网页中插入图像,3.1 文本输入与编辑,在Dreamweaver中可以通过设置文本的字体、字号、颜色、字符间距与行距等属性来区别不同的文本。,网页中文本的使用原则如下：,单个页面中不要使用超过三种以上的字体。,不要用太大的字号。,不要使用不停闪烁的文字。,标题文字的字号应当比正文字号稍大。,3.1.1 输入文本,首先将光标定位在表格的某个单元格中，然后输入文字就可以了。,如果希望文本换行，可以按下【ShiftEnter】组合键；如果希望文本换段，可以直接按【Enter】键。,输入文本后的代码视图,输入文本后的设计视图,3.1.2 设置文本的段落格式和字符格式,在Dreamweaver中，可以利用属性面板为文本设置默认格式化样式或者直接设置所选文本的字体、大小、颜色等。,设置文本格式,设置文本字体,设置文本样式,设置文本大小,设置文本颜色,设置文本为粗体或斜体,设置文本对齐和列表格式,为所选文本设置链接,1设置字体列表,Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需求。我们可以通过设置字体列表来解决这一问题。,“编辑字体列表”对话框,2设置文本字体及大小,学会设置字体列表后，就可以随心所欲地设置文本的字体了。,选中文本,设置字体和倾斜,设置字号,3设置段落缩进,通过设置段落缩进格式，可以更好的布局文档。,在“格式”下拉列表中选择“段落”,段落突出,段落缩进,4设置列表项,列表分为项目列表和编号列表，项目列表常应用在“列举”类型的文本中，编号列表常应用在“条款”类型的文本中，这种方式使得文本更直观、明了。,选中文本,应用“项目列表”格式,3.1.3 输入特殊符号和不换行空格,要插入特殊字符，可选择“插入”“HTML”“特殊字符”命令，然后在弹出的菜单中选择相应的特殊字符。,3.1.4 输入日期与水平线,在“插入”栏的“常用”类别中单击“日期”按钮 ，将打开“插入日期”对话框。,要插入水平线，可以选择“插入”“HTML”“水平线”菜单。在插入水平线后，还可通过属性面板设置其宽、高、对齐和阴影等。,3.2 上机实践设置“舞林报道”网页文本,本节我们以“舞林报道”网页为例，来练习网页文本的设置（具体操作见视频 ）。,3.3 使用图像,目前在网页中只能使用JPEG、GIF和PNG格式的图像。,JPEG格式适于表现色彩丰富，具有连续色调的图像。该格式的优点是图像质量高，缺点是文件尺寸稍大（相对于GIF格式），且不能包含透明区。,GIF格式最多只能包含256种颜色，适合表现色调不连续或具有大面积单一颜色的图像。该格式的优点是图像尺寸小，可包含透明区，且可制成包含多幅画面的简单动画，缺点是图像质量稍差。,PNG格式集JPEG和GIF格式的优点于一身，既能处理照片式的精美图像，又能包含透明区域，且可以包含图层等信息，是Fireworks的默认图像格式。,3.3.1 插入与编辑图像,在确定图像插入点后，单击“插入”栏“常用”类别中的“图像”按钮，打开“选择图像源文件”对话框。从中选择要插入的图像，然后单击“确定”按钮即可。,选中插入后的图像，可以利用属性面板对该图像的各项属性进行设置。,设置图像名称,设置宽和高,设置图像文件路径,用于创建从图像到其他文件的链接,指定图像上、下、左、右空白的像素值,设置图像边框的粗细,确定图像在单元格或页面中的对齐方式,图像处理按钮,裁切图像,如果网页中的某个图像尚未制作好，可暂时用图像占位符来代替。待到制作好图像后，再用它置换图像占位符。,选择“插入”“图像对象”“图像占位符”菜单，可打开“图像占位符”对话框。,3.3.2 使用图像占位符,“图像占位符”对话框,插入的“图像占位符”,替换图像,3.3.3 制作鼠标经过图像,当鼠标移动到某一图像上时，图像变成了另一幅图像，当鼠标移开时，又恢复成原来的图像，这就是我们通常所说的鼠标经过图像。,原始图像,鼠标经过图像,“插入鼠标经过图像”对话框,3.3.4 制作导航条,利用与制作鼠标经过图像类似的方法，可制作具有可变效果的导航条。下面来制作下图所示的可变导航条（具体操作见视频3-2）。,3.3.5 插入Fireworks HTML,Fireworks是网页制作三剑客之一，它主要用来处理网页图像，可以将优化后的图像和HTML文件导出并保存至站点的图像文件夹中，然后就可以在Dreamweaver中插入该文件。,“插入Fireworks HTML”对话框,3.4 上机实践在“拍拍”网页中插入图像,本节以制作“拍拍”网页为例，来练习网页文本的属性设置和图像的插入。,第4章 使用超链接,认识超链接,为文字和图片设置常规超链接,不同格式的超链接,上机实践为拍拍网页中的文字和图像添加链接,4.1 认识超级链接,超级链接包括内部超级链接和外部超级链接，内部超级链接是指目标文件位于站点内部的链接；外部超级链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。,内部超级链接会涉及到路径的使用，且只能使用相对路径。,4.2 为文字和图片设置常规超链接,4.2.1 为文字设置超链接,要为文字设置超链接，应首先选中文字，然后单击“插入”栏“常用”类别中的“超级链接”按钮 ，打开“超级链接”对话框。,可以是内部链接或外部链接,设置在何处打开网页,“标题”编辑框用于设置，当鼠标悬停在超链接上时出现的说明文字,4.2.2 取消超链接,要取消超链接，可在选中设置为超链接的文字后，删除属性面板中“链接”编辑框中的内容。,为图片设置超链接的方法同文字一样。,4.3 不同格式的超链接,4.3.1 电子邮件链接,电子邮件链接是指当浏览者单击某个超链接时，系统会自动启动默认的电子邮件收发软件。,要设置电子邮件链接，应首先选中要设置为超链接的文本，然后单击“插入”栏“常用”类别中的“电子邮件链接”按钮，接下来在弹出的对话框中输入链接到的电子信箱地址即可。,4.3.2 命名锚记链接,当网页的内容非常多，浏览器的滚动条变得很长时，可以通过命名锚记链接来为网页添加内部链接。,创建命名锚记链接，首先要定义命名锚记，然后创建指向它的链接。,插入的命名锚记,为图片设置“命名锚记”链接,4.3.3 热点链接,热点链接是针对图像而言，利用它可以为一幅图像的不同区域添加不同的超链接。,要为图像添加热点链接，可以使用图像属性面板中的地图组合按钮。,地图名称,多边形热点工具,椭圆形热点工具,矩形热点工具,可以把跳转菜单看作是一种超链接的集合，它以弹出式下拉菜单的形式在网页中展现出来。,弹出菜单内的链接没有类型上的限制，可以是本地链接，也可以是到其他网站的链接。,4.3.4 使用跳转菜单,设计好的跳转菜单及其属性面板,网页预览效果,4.3.5 图片链接和下载链接,我们在上网时经常会碰到图片链接和下载链接，例如，单击网页中的某个小图片时会在新窗口中打开一幅大图片，或者单击某个链接会打开一个下载提示对话框等。这就是我们所说的图片链接和下载链接。,图片链接,下载链接,4.3.6 定时自动跳转页面,自动跳转也叫自动重定向或自动转向，就是指当浏览者访问某个站点时，所访问的页面自动转向到其他网页的一种技术。,应用“定时自动跳转”,“刷新”文本框,4.4 上机实践为拍拍网页中的文字和图像添加链接,最常用的链接是常规的文本和图片链接，接下来我们就通过下面的例子来进一步掌握这两种最基本的链接形式(具体操作见视频4-1)。,第5章 使用行为,认识行为,熟悉“行为”面板,为对象添加行为,编辑行为的方法,将行为附加到文本,常见行为的应用,上机实践在网页中应用“显示隐藏层”行为,5.1 认识行为,每个行为都由两部分组成，即事件和动作。所谓事件是指“发生什么”，而动作是指“去做什么”。简单来说，就是当发生某个事件的时候去执行某项动作，例如当打开某个网站的时候，弹出欢迎信息。,5.1.1 事件,每个浏览器都会提供一组事件，例如，onMouseOut、onMouseOver、onClick用于与某个链接关联，而onLoad则用于与图片及文档的body关联。,5.1.2 动作,动作是事件的结果，同事件一样，每个浏览器都提供一组动作，例如调用JavaScript、改变属性、检查浏览器、拖动层等。,5.2 熟悉“行为”面板,要为文档添加行为，需要使用“行为”面板，选择“窗口”“行为”菜单，或按【Shift+F4】组合键，即可打开“行为”面板。,添加行为,删除行为,事件,动作,显示已设置的事件列表,显示所有事件列表,上下移动行为,5.3 为对象添加行为,可以将行为附加到整个文档（即附加到标签），还可以附加到超链接、图像、表单元素等，但是不能将其附加到纯文本。,预览效果,5.4 编辑行为的方法,5.4.1 修改行为,修改行为的方法非常简单，首先选中要修改行为的对象，然后打开“行为”面板并选择要修改的行为。,单击事件名称，将在事件名称右侧出现一个 按钮，单击该按钮将打开事件列表。,双击动作名称可编辑行为,5.4.2 删除行为,如果要删除某行为，只需选中该行为，然后单击面板上方的“删除行为”按钮 或直接按【Delete】键即可。也可用鼠标右键单击行为，在弹出的快捷菜单中选择“删除行为”命令。,删除行为,5.4.3 获取更多行为,单击“行为”面板上的“添加行为”按钮 ，在弹出的菜单中选择“获取更多的行为”命令，将打开Macromedia公司的官方网站，该网站提供了众多网页行为的下载。不过，下载行为后还需要使用“Macromedia扩展管理器”进行安装，然后才能使用它们。,添加行为,Macromedia扩展管理器,5.5 将行为附加到文本,默认情况下，不能将行为附加到纯文本，但是可以将行为附加到链接。,因此，若要将行为附加到文本，可以为文本添加一个空链接，然后将行为附加到该链接上。,5.6 常见行为的应用,5.6.1 弹出信息框,我们在打开某些网页或单击网页中的某些元素时经常可以看到弹出信息框，这个弹出信息框就是利用“弹出信息”行为实现的。,预览效果,5.6.2 打开伴随窗口,使用“打开浏览器窗口”行为可以实现在新窗口中打开网页的功能，许多站点都使用这种方式来弹出重要的通知、广告信息等页面。,加载网页时打开搜狐网首页,5.6.3 关闭当前窗口,在页面中加入一个按钮，浏览者能够通过单击这个按钮来关闭正在浏览的页面窗口。,单击按钮时弹出提示窗口,添加事件,添加事件,5.6.4 滚动字幕,在浏览某些网页时，常常会看到一些“字幕”效果，也就是一行或多行文字在页面上按照一定的速度上下或左右移动，通过插入.标签 可以实现上述效果。,添加鼠标触发事件,创建拖动层行为首先要创建层，层主要有如下功能：,层可以游离在文档之上，因此可以利用层来精确定位文本、图像等其他网页元素。,利用层的显示和隐藏功能来控制网页和网页元素的可见与不可见性可以使网页达到快速下载的效果。,层与表格之间可以相互转换。,5.6.5 拖动层,1创建层,在页面中拖动鼠标创建层,2拖动层,使用拖动层行为可以创建拼板游戏、滑块控件等界面元素。可以指定浏览者能够向哪个方向拖动层，设置目标的位置，在层和目标之间多远时算是捕捉到目标，以及当层接触到目标时应该执行的操作等。,在层中插入对象,“拖动层”对话框,当用户想要查看商品的详细说明时，在该商品图片上单击即可显示层来查看该信息。如果不想看时可单击该说明隐藏层。下面我们通过制作图示网页，来学习显示隐藏层的应用（ 具体操作见视频5-1） 。,5.7 上机实践在网页中应用“显示隐藏层”,层,第6章 让网页动起来,应用Flash动画,音乐的应用,使用其他媒体元素,上机实践为“金刚”网页添加动态元素,6.1 应用Flash动画,Flash动画是目前最为流行的矢量动画，很多网页中都包含Flash动画。Flash文件有3种类型：,Flash源文件（.fla），它是所有Flash动画的源文件，此类型的文件只能在Flash 8中创建、打开并编辑。,Flash动画文件（.swf），它是Flash（.fla）文件的压缩版本，已进行了优化处理以便在网页中使用。,Flash模板文件（.swt），可以直接在Dreamweaver中编辑这类文件，它包括Flash按钮和Flash文本两种对象。,6.1.1 插入Flash影片,确定插入点后，单击“插入”栏“常用”类别中的“媒体：Flash”按钮，打开“选择文件”对话框。从中选择文件，然后单击“确定”按钮即可。,预览效果,6.1.2 Flash背景透明,假如我们为网页、某个表格或某个单元格指定了一张很漂亮的背景图像，而当我们在其中又插入一个Flash动画的时候，Flash动画的背景颜色会遮盖掉背景图像，这就需要将Flash动画的背景颜色改成透明。,为,Flash动画添加参数,预览效果,6.1.3 插入Flash按钮,Flash按钮包括两类，一类是自己制作的Flash按钮，另外一类是Dreamweaver中集成的Flash按钮。前者的插入方法与Flash影片类似，这里主要讲解后者的插入。,6.1.4 插入Flash文本,Flash文本是Dreamweaver中集成的文本，插入Flash文本与插入Flash按钮类似。,6.2 音乐的应用,6.2.1 为网页增加背景音乐,通过在网页的与标签之间加入标签，并在标签里添加一些相应的属性即可为网页添加背景音乐。,如果想控制声音的播放进度、快进和快退、调整音量等，就必须在网页中嵌入音乐文件。,6.2.2 在页面中嵌入音乐文件,1常用音频文件格式,MID格式：占用空间小，一般为十几KB、几十KB不等，适于网上传播，其缺点是音色单调。,WAV格式：具有较好的声音品质，适应性强，在所有安装有声卡的电脑中都可以播放。其缺点是占用空间大，动辄几MB，甚至几十MB。,AIF格式：与WAV格式类似，也具有较好的声音品质，但是，由于AIF文件体积庞大，从而限制了它在网页上可以使用的长度。,MP3格式：是一种压缩格式，它可令声音文件明显缩小。其声音品质非常好。,WMA：是微软公司推出的与MP3格式齐名的一种新的音频格式。目前，MP3、WMA已经成为网络音频的主要格式之一。,RA或RAM（Real Audio）格式：具有非常高的压缩程度，文件大小要小于MP3格式的文件。,2在网页中嵌入音乐,下面以插入WMA格式音频文件为例，具体讲述在网页中插入音频文件的方法。,6.3 使用其他媒体元素,6.3.1 插入Shockwave 影片,Shockwave 影片是一种很好的压缩格式，它能被目前的主流浏览器（如IE和Netscape）所支持，可以被快速下载。,6.3.2 插入Applet,利用Applet，可以制作一些非常漂亮的效果，如下雨、涟漪等。,Applet插件是非常小的Java应用程序，它是动态、安全、跨平台的网络应用程序。,6.4 上机实践为“金刚”网页添加动态元素,本节我们来为“金刚”网页添加视频文件和Flash影片（具体操作见视频6-1） 。,第7章 网页布局,使用表格布局网页,上机实践用表格布局主页,使用框架布局网页,上机实践用框架布局页面,7.1 使用表格布局网页,表格是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。,行,列,7.1.1 创建表格,确定插入点后，在“插入”栏的“常用”类别中单击“表格”图标 ，打开“表格”对话框，可以在“表格”对话框中设置表格的行数、列数、宽度、边框、边数以及间距。,7.1.2 改变表格和单元格的宽度与高度,使用属性面板可以非常方便地改变表格和单元格的宽度与高度，也可取消宽度与高度的设置。,通过拖动表格的边框也可轻易改变表格的宽度与高度。,7.1.3 拆分和合并单元格,1拆分单元格,所谓拆分单元格，就是将一个单元格拆分为几行或几列。,2合并单元格,所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。,7.1.4 插入、删除行和列,如果希望在某个单元格上方插入行，或者在其左侧插入列，可首先右击该单元格，然后从弹出的快捷菜单中选择“插入行”或“插入列” 。,如果希望删除行或列，可在弹出的快捷菜单中选择“删除行”或“删除列”。,7.1.5 为表格和单元格设置背景颜色或背景图像,可为整个表格设置背景颜色，也可为单个或多个单元格设置背景颜色，其设置方法完全相同。,还可为表格或单元格设置背景图像。,7.1.6 为表格和单元格设置边框颜色,通过设置表格边框粗细、单元格间距、背景颜色，以及单元格背景颜色可以制作不同边框的表格。,细线表格,粗线表格,双线表格,表格的高级操作主要包括对表格的整行内容进行移动、排序表格内容和导入/导出表格数据等。,7.1.7 表格的高级操作,1.移动表格整行内容,选中行并剪切,将光标置于要移动位置的下一行任意单元格中,粘贴,表格作为一种常见的数据处理形式，免不了要对其中的数据进行排序。,2排序表格内容,选中表格,选择“命令”“排序表格”菜单，打开“排序表格”对话框。,排序后的表格,在Dreamweaver中，可以将表格的内容导入或导出,在页面中添加表格时，如果预先有表格数据存储在记事本或Word等文档中，可以直接将数据导入。,3导入或导出表格内容,导入的表格数据,源数据,选择“文件”“导入”“表格式数据”菜单，打开“导入表格式数据”对话框,7.1.8 制作嵌套表格,所谓嵌套表格，就是在一个大表格的某个单元格里插入一个新表格的情况。,下面通过制作一个简单的页面局部布局，详细分析如何合理使用嵌套表格（具体操作见视频7-1） 。,7.1.9 制作精美的圆角表格,在做网页时为了美化页面，常常要把表格制作成圆角表格，这样可以使整个页面看起来更加柔和、美观。,7.2 上机实践用表格布局主页,接下来我们以下面的实例来讲解利用表格布局网页的方法（具体操作见视频）。,7.3 使用框架布局网页,框架可以将一个浏览器窗口划分为多个区域，且每个区域都可以显示不同的HTML文档。使用框架的最常见情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。一般大型的论坛会用到框架页。,7.3.1 关于框架和框架集,框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。,框架集是HTML文件，它定义一组框架的布局和属性。包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。,7.3.2 创建框架集,Dreamweaver中有预定义的框架集，可以直接创建，也可以在普通页面中加载。,1直接创建预定义框架集,“新建文档”对话框,选择框架集类型,创建的框架集,2加载预定义框架集,在页面中加载框架集就像插入表格一样。,如果预定义框架集不能满足需要，还可以在它的基础上进行分割.,选择预定义框架集,加载的框架集,7.3.3 框架和框架集的基本操作,对框架及框架集的基本操作包括选择、删除等操作。,1认识“框架”面板,利用“框架”面板可以对框架和框架集进行操作，选择“窗口”“框架”菜单，可以打开“框架”面板。,2选择框架和框架集,在文档窗口中选择框架的方法为，按住【Alt】键，然后在要选择的框架内单击即可，被选中的框架边线为虚线。,被选中的框架,如要选择框架集，则单击该框架集上的任意框架即可，选中的框架集所有边框都呈虚线显示。,利用“框架”面板选择框架时，直接在面板中单击即可。选择框架集时，在面板中单击框架集的边框即可。,7.3.4 框架及框架集的属性设置,利用“属性”面板可以设置框架和框架集的属性，包括框架名称、框架源文件、框架边框等。,1设置框架属性,命名选取的框架,框架源文件的保存地址,选择是否显示框架的边框,设置框架滚动条的属性,设置是否能改变框架大小,设置框架边框的颜色,设置框架内容距上下左右边框的距离,2设置框架集属性,该面板中各参数的含义同选中框架时的属性面板基本相同，不同的是在“行”或“列”文本框中可设置框架的行或列的宽度，在“单位”下拉列表框中可选择宽度的单位。,7.3.5 保存框架及框架集,框架及框架集的保存与一般网页文档的保存不同。,1保存框架,将鼠标光标定位到要保存的框架中，选择“文件”“保存框架”菜单，然后在弹出的对话框中指定保存路径和文件名后，单击“保存”按钮即可。,2保存框架集,保存框架集的方法与保存框架相似，选中所需保存的框架集，选择“文件”“保存框架页”菜单，然后执行与保存框架相同的操作即可。,3保存框架集中的所有文档,选择“文件”“保存全部”菜单，即可保存框架集中的所有文档。此时会依次弹出多个“另存为”对话框，逐个保存框架集中的所有框架。,7.4 上机实践用框架布局页面,本节以制作 “娱乐空间”为例来练习一下用框架布局页面的方法。,第8章 HTML与CSS入门,HTML与CSS入门,编辑HTML代码,创建和使用CSS样式表,上机实践为网页中的文字设置样式,8.1 HTML与CSS入门,HTML是超文本标记语言（Hypertext Markup Language）的缩写，它能独立于各种操作系统平台，可以在浏览器中解释执行。,CSS层叠样式表主要有两大优点，一个是可以对网页元素施加更多的控制，二是可以批量更新网页。,8.1.1 为什么要学习HTML,HTML语言是网页制作的基础，我们使用Dreamweaver设计网页的过程，也就是制作HTML文件的过程。,有利于提高网页制作效率和优化网页代码。,有利于网页排错 。,有利于快速提高自己的网页制作水平,适度掌握一些HTML语言的知识是非常有益的，其原因如下：,8.1.2 HTML的基本结构,HTML语言的核心是标签。我们在浏览网页时看到的文字、图像、动画等在HTML文档中都是用标签来描述的。一个完整的HTML文档由标签开始并由标签结束，所有的HTML代码都应写在标签与标签之间。,层叠样式表,HTML头,HTML体,完整的文档,8.1.3 HTML标签的类型与特点,学习HTML语言的过程也就是学习各种标签格式的过程。,（1）单标签,某些标签称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标签的语法如下：,最常用的单标签是，它表示换行。,（2）双标签,“双标签”由“始标签”和“尾标签”两部分构成，必须成对使用，始标签前加一个斜杠（/）即成为尾标签。这类标签的语法是：, 内容 ,其中，“内容”部分就是要被这对标签施加作用的部分。例如，你想突出显示某段文字，就可以将此段文字放在一 标签中：,第一：,（3）标签属性,许多单标签和双标签的始标签内可以包含一些属性，其语法是：,各属性之间无先后次序，属性也可省略（即取默认值）。例如，单标签表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。其属性有：,8.1.4 常用HTML标签及其意义列表,学习HTML语言，最关键的是掌握常用HTML标签的用法及其意义。,头部标签,主体标签,8.1.5 CSS样式的定义,CSS样式定义由两部分组成：选择器和声明，其中，选择器是样式的名称（如TR或P），而声明则用于定义样式元素。声明由两部分组成：属性和值。,HTML标签样式,自定义样式（类样式）,CSS选择器样式,选择器,声明,声明,声明,8.1.6 CSS样式的存储与创建,CSS样式以两种方式存在于网页中：,外部CSS样式表，专门用于存储CSS样式定义的.css 文件。利用“CSS样式”面板或者在HTML代码视图中手工编写head部分中的链接，该文件可被链接到站点中的一个或多个网页上。,链接外部样式表文件,内部（或嵌入式）CSS样式表,是一系列包含在HTML文档head部分的style标签内的CSS样式。,内嵌CSS样式表,8.2.1 使用编码工具栏迅速插入代码,最近的代码片断,8.2 编辑HTML代码,编码工具栏是Dreamweaver 8的新增功能，它位于代码视图中文档工具栏的左侧，使用它可以快速而方便地插入代码。,打开文档,折叠整个标签,折叠所选,扩展全部,选择父标签,平衡大括弧,显示行号,高亮显示无效代码,应用注释,缩进代码,删除注释,环绕标签,凸出代码,8.2.2 使用快速标签编辑器,快速标签编辑器使我们无需退出“设计”视图就能够快速检查并编辑HTML标签和属性。,首先选中要编辑的标签,快速标签编辑器以“编辑”模式打开,没有选择特定元素，快速标签编辑器以“插入”模式打开,8.2.3 使用代码提示功能,下面以制作一个单边显示边框的表格为例，介绍使用Dreamweaver代码提示功能的方法（具体操作见视频83）。,8.2.4 使用“代码片断”面板,通过使用 “代码片断”面板，可以方便地在文档中插入一些可重复使用的HTML代码。,目录树,预览窗口,新建代码片断,编辑代码片断,新建代码片断文件夹,8.3 创建和使用CSS样式表,8.3.1 熟悉“CSS样式”面板,在Dreamweaver 8中，可以借助“CSS样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。,单击可切换到所有“文档”模式,显示类别视图,显示列表视图,只显示设置属性,删除选定样式,编辑选定样式,新建样式,将外部样式表文件链接到当前文件或将其中的CSS样式导入到当前文档,8.3.2 样式类型与使用方法,1类样式,类样式又称自定义样式，它可应用于文档中任何文本。与当前文档关联的所有类样式都显示在“CSS 样式”面板中（样式名称前有一个句点“.”），以及文本属性面板的“样式”列表中。,2标签样式,用来重定义HTML标签的格式。例如，创建table标签样式后，所有用table标签设置了格式的文本都将立即更新。,3选择器样式,选择器样式又称高级样式，它用来重定义特定标签组合的格式。例如，每当h2标题出现在表格单元格内时都会生成td h2标签组合。,选择器样式还可重定义包含特定id属性的所有标签的格式。例如，#myStyle样式将应用于所有包含属性id=myStyle的标签。,8.3.3 创建样式的步骤,在“样式”面板中，可以直接创建类样式和其他两种样式。,选择标签,“保存样式表文件为”对话框,“CSS 规则定义”对话框,1类型属性,用来定义字体、大小、粗细、样式、行高、大小写、颜色等设置。该设置主要针对网页中的文字有效。,2背景属性,用来定义背景设置。它可以对网页中的任何元素应用背景属性，还可以设置背景图像的位置。,确定是否以及如何重复背景图像,确定背景图像是固定在它的原始位置还是随内容一起滚动,指定背景图像相对于元素的初始位置,3区块属性,用来定义文字的排列格式,4方框属性,用来控制元素在页面上的放置方式,设置元素的宽度和高度,设置其他元素在哪个边围绕元素浮动,定义层的清除边,指定元素内容与元素边框之间的间距,指定一个元素的边框与另一个元素之间的间距,5边框属性,用来定义元素周围边框的设置，如边框宽度、颜色和样式。,6列表属性,用来为列表标签定义列表设置（如项目符号外观，自定义图像和位置）。,7定位属性,定位属性用于使用“层”首选参数中定义的层的默认标签，将标签或所选文本块更改为新层。,8.3.4 修改样式和删除样式,要修改样式，应首先打开“CSS样式”面板，然后选择要编辑的样式，最后单击“编辑样式”按钮 。,也可以在“CSS样式”面板中选择要编辑的样式，然后利用打开的“CSS属性”面板来修改样式。,利用“CSS样式”面板还可方便地删除链接外部样式表或内部样式。,8.3.5 使用外部样式表,要附加外部样式表，应首先打开“CSS样式”面板，然后单击“附加样式表”按钮，将弹出“链接外部样式表”对话框。,外部链接样式,“链接外部样式表”对话框,导出样式表,内部定义样式,8.4 上机实践为网页中的文字设置样式,下面我们试着用CSS控制“金企鹅”主页上文字的样式，让大家领略一下CSS的独特魅力(具体操作见视频8-2)。,第9章 使用模板与库项目,使用模板,使用库项目,上机实践应用模板和库项目制作网页,9.1 使用模板,Dreamweaver模板是一种特殊类型的文档，用于设计“固定”的页面布局。设计模板时，可以指定在基于模板的文档中用户可以编辑文档的哪些区域。,模板最强大的功能之一是一次可以更新多个页面。根据模板创建的文档与模板保持链接关系（除非以后分离该文档），可以通过修改模板立即更新所有基于该模板的文档。,9.1.1 创建文档模板,可以从新建的空白文档中创建模板，也可以将现有文档保存为模板。,新建空白模板,将现有文档保存为模板,9.1.2 基于模板创建文档,创建了模板以后，就可以创建基于模板的文档了。,在”新建文档”对话框中选择”模板”选项卡,9.1.3 模板的区域类型,除了可以在模板中定义可编辑区域外，还可以通过选择“插入”“模板对象”菜单定义其他几种类型的区域。,9.2 使用“库”项目,9.2.1 什么是库项目,库项目是一种特殊的Dreamweaver文件，我们可以将当前网页中已使用的任意页面元素定义为库项目，如图像、表格、文本、声音和Flash影片等。,创建库项目的好处是可以在多个页面中重复使用它们，每当更改某个库项目的内容时，所有使用了该项目的页面都将同时更新。,9.2.2 创建库项目,首先在文档窗口选择需要保存为库项目的对象，然后选择“修改”“库”“增加对象到库”菜单并输入库项目名称，即可将所选对象添加到库中。,库项目列表,将库项目插入到文档,删除库项目,编辑库项目,新建库项目,预览库项目,9.2.3 插入库项目,将库项目插入到文档中的操作非常简单，只需在“资源”面板的库窗口中将库项目拖入到文档的适当位置即可。,也可以选中库中的项目，然后单击“资源”面板底部的“插入”按钮，将库项目插入到文档中。,库项目选中状态,普通对象选中状态,9.2.4 编辑库项目,要编辑库项目，可以在“资源”面板中双击库项目，Dreamweaver会在网页编辑窗口中打开库项目。,编辑库项目,更新使用了库项目的网页,接下来我们一起来制作一个应用库项目的模板，然后再应用该模板制作新文档。,我们将该实例分为制作模板和应用模板两部分(具体操作见视频9-1和9-2)。,9.3 上机实践应用模板和库项目制作网页,制作的模板,应用模板制作的网页,第10章 动态网页制作入门,安装和配置IIS,配置动态站点,表单的应用,表单对象的应用,认识数据库,10.1 安装和配置IIS,IIS是Internet信息服务（Internet Information Server）的简称，它操作简单但功能强大，而且支持ASP，是目前使用广泛的Web服务器之一。,打开“Internet信息服务”窗口,10.2 配置动态站点,建立好动态网页的调试环境后，为了能够在Dreamweaver中调试动态网页，还必须对站点进行合适的配置。,10.3
展开阅读全文