网页设计概论.doc

第1章 网页设计概论 教学目标 本章介绍有关多媒体网页的一些基本概念，利用几个具有代表性的精彩网站，分析网页的设计理念和风格、网站的创意设计以及网页色彩的搭配。同时将介绍网页设计常用的工具。最后讲解了Dreamweaver的工作界面和一些功能，以便于以后能更好、更快地去规划和制作网站。第1章 网页设计概论 教学重点和难点 了解网页的设计理念 了解网页的创意设计 了解网页色彩的搭配 熟悉Dreamweaver的工作环境 1.1 网页设计概念及工具 网页的英文名称为Homepage，是在因特网上广泛流行的一种信息传播形式。它就像一本有目录的画册，其中的每一张画都和其他画有着直接或间接的联系，它们描绘着网页制作者的生活、理想和经验等。1.1 网页设计概念及工具 WWW是由成千上万个网页组成，同时只有一个网页显示在Web浏览器中。 网站是由一个特定人群和组织控制的一组网页的组合。与简单的网页组合不同的是：网站都有一个主页（首页、第一页），其中包含网站的Logo和指向其他网页的链接，单击链接，可以打开下一级的网页。 网页是组成网站的基本单元。1.1 网页设计概念及工具 1.1.1网页设计理念 一个网页包含的元素很多，主要包括文字、图像、表格、表单、动画和视频等。而网站是由众多的网页组成的，这些页面是否精彩，直接影响到这个站点能否受到用户的欢迎。作为网页的设计者，最重要的一点是要有创意。没有创意的网站是不成功的。1.1 网页设计概念及工具 一般来说，网站设计所需要遵循的理念包括以下几方面。 （1）考虑访问者的带宽问题 （2）版面布局合理 （3）网站标志的设计 （4）站点内容要精、专，及时更新1.1 网页设计概念及工具 网页制作的基本步骤1、整体规划 进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。（1）收集整理资料（2）准备素材（3）内容规划1.1 网页设计概念及工具2、网页制作与设计（1）静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等。 通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。 （2）为网页的添加动态效果 静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。 1.1 网页设计概念及工具3、 测试网页 当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后, 方可正式在Internet上发布。在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。1.1 网页设计概念及工具 4、 网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的。 1.1 网页设计概念及工具 1.1.2网站的风格 风格，是指网站的整体形象给访问者的综合感受，比较抽象。这个整体形象包含非常多的因素：网站的标志设计、色彩、版面布局、浏览方式、交互性、文字和价值等。 例如联想的网站是平易近人的；儿童网站“WaWaYaYa”是生动活泼的；而大多商业网站如IBM，是专业严肃的。不同的网站给访问者留下的感受也不相同。1.1 网页设计概念及工具不同类型的网站 综合门户类型:分为综合性门户和行业门户两种.其中综合门户一般包括免费服务、内容频道、分类网址等。国内的综合门户网站有网易、搜狐等。 新闻类网站：发布实时的新闻内容、突发事件及相关深度报道等。国内的新闻网站有新浪网、千龙网、人民网等。 电子商务网站：网络购物、网上交易已经成为重要的商业手段。1.1 网页设计概念及工具 IT类网站：是最早的网站类型，以提供计算机、软件、行业资讯等内容为主。 教育类网站：各种网校、远程教育是此类网站的主要内容。力求简洁大方，创造出学术研究的氛围，休现严谨认真的特点。 生活娱乐网站：最活泼的网站类型。提供娱乐信息、生活指南、文学欣赏等内容。1.1 网页设计概念及工具 政府网站：电子政府、政务公开是未来的发展方向，成为政府面对公众的窗口，设计要求严肃、大气，突出政府形象。 其他行业网站：如健康医药网站，突出自然健康的理念；设计类网站，趋向于个性化、先锋化、追求设计等。 个人网站：内容多样化，体现个人的观点和趣味，不是追求访问量，而是注重自我观点的表达，设计很自由。1.1 网页设计概念及工具 在制作网页之前，确定网站的整体风格需要注意以下几个方面。 （1）网站标志要放在醒目位置，如左上角，而且要保持不变。 （2）最好能够有一句反映网站精髓的标语，并动态显示。 （3）导航部分应该放在每一张网页的相同位置，便于访问者浏览网站的全部内容。1.1 网页设计概念及工具 （4）确定网站的主体颜色，并注意颜色搭配要让人感觉舒服但不要太刺眼，同时还要突出显示需要强调的内容。 （5）页面的布局是风格的一个重要标志，需要考虑网页各个组成部分放置的位置，还要考虑主页的可扩充性，以方便将来再添加栏目。一般采用左边导航、右边文字，或者上面导航、下面文字的方法，也可以两者结合使用。 （6）内容结构越简单越好，分类要简而精。一切都围绕访问者能够最快地找到访问的资料而考虑。1.1 网页设计概念及工具1.1 网页设计概念及工具1.1 网页设计概念及工具1.1 网页设计概念及工具1.1 网页设计概念及工具 1.1.3网页创意设计 网页创意是网站的灵魂所在，直接关系到企业的形象、品牌、企业文化和企业竞争力那么到底什么才是创意呢？如何产生创意呢？ 1创意是传达信息的一种特殊手段 2创意是将现有的要素重新组合1.1 网页设计概念及工具 1.1.4网页色彩的搭配 颜色搭配是体现网站风格的关键。网页色彩搭配应考虑以下因素。 （1）色彩的鲜明性 （2）色彩的独特性 （3）色度的合适性 （4）色彩的代表性1.1 网页设计概念及工具 网页色彩搭配的技巧：（1）用一种颜色：首先选择一种颜色，然后调节它的透明度和饱和度，以产生新的颜色，这个原理一般用于网页，这样的网页看起来色彩统一、风格一致，又能体现出很好的层次感。1.1 网页设计概念及工具（2）用两种颜色：首先选择一种基色，再选择它的对比色，使整个网页的色彩丰富，但不刺眼。（3）同一色系：近似颜色的搭配，能给人柔和的感觉。白色和黑色的搭配是网页中最好制作的，因为搭配起来最方便，而且容易突出画面。1.1 网页设计概念及工具 1.1.5常用的网页设计工具 Macromedia公司的Dreamweaver软件，是目前国内公认的最佳网页制作工具之一，最新版本为Dreamweaver MX 2004，无论对初级网民还是专业高手，它都可以满足各位的需要。此外，常用的网页设计工具还包括Fireworks及Flash。1.1 网页设计概念及工具1网页设计软件Dreamweaver Dreamweaver是一个很方便的网页制作工具，它支持最新的DHTMLTT和CSS标准。它能够快速高效地创建极具表现力和动感效果的网页，同时使制作过程简单化。另外，Dreamweaver MX 2004不仅提供了强大的网页编辑功能，而且拥有完善的站点管理机制，是一个集网页制作和站点管理于一身的网页创作工具。1.1 网页设计概念及工具2网络动画制作软件Flash Flash是目前最流行的矢量动画制作软件之一，它只用少量矢量数据就可以描述一个复杂的对象，而且占用的存储空间也相当小，非常适合在网络上使用。运用它可以制作出栩栩如生、动感十足的动画作品。 另外，用户还可以用Flash创作出交互性的小游戏、教学软件等多媒体作品，正因为它的界面简洁、简单易学，所以成为网页动画制作领域中最受欢迎的软件。1.1 网页设计概念及工具3网络图像处理软件Fireworks Fireworks是专门针对Web而设计的，因此它对图像进行了充分的优化。利用Fireworks生成的网页图像，它的色彩也符合Web标准。设计时看到的颜色就是将来网页上显示的颜色，制作起来非常直观。 Fireworks不仅具有很强的图像处理功能，而且提供了大量的网页图像模板供用户使用，学习起来比较容易上手。1.2认识Dreamweaver MX 20041.2认识Dreamweaver MX 20041.2认识Dreamweaver MX 20041“插入”工具栏 单击相应的对象按钮或者将相应的按钮图标拖到文件中，可以将相应对象插入到网页中； 如果在插入对象的同时按住Ctrl键，可以避免出现一个选择对象对话框，而是直接插入相应类型的空对象。2“文档”工具栏3“文档”窗口 文档窗口的标题栏显示出被编辑页面的标题，在括号内显示出文档所在的目录及文档名； 如果文档未保存，文名后会有“”出现。“面板组”的操作 拆分与组合的方法； 展开和收缩的方法； 调整面板大小； 打开与关闭的方法：“窗口”菜单“某某”面板“查看”菜单“隐藏面板”或“显示面板”或者按F4键5“状态栏”的操作 HTML标签选择器：表示以HTML标记显示方式来表示光标当前位置处的网页对象信息。 一般光标当前位置处有多种信息，则可以显示出多个HTML标记，不同的HTML标记表示不同的元素信息，如： 表示文档主体 表示行 表示图像 表示字体 表示单元格 表示对齐方式 表示表格 表示插入对象本章小结 本章介绍了网站建设的准备工作，网页设计理念，确立网站风格，网页的创意设计以及色彩搭配等知识。最后讲解了Dreamweaver MX 2004网页制作软件的基本工作界面和常用面板的功能。通过本章的学习，用户可进行实际的操作和练习，使自己对网站设计有一个初步的认识。1.3习题与上机操作第2章网页设计基础入门 教学目标 本章介绍网页设计的整体规划，站点的建立，以及如何制作一个简单的网页.要求对于表格、图像、文字、背景音乐的处理有了一定的了解，还应该对超级链接有个初步的认识。第2章网页设计基础入门 教学重点和难点 网站草图的设计 站点的建立 添加网页基本元素 超级链接基础2.1设计草图 在制作个人主页之前，首先来总体规划一下网站的结构。根据原始素材来确定网站需要制作的内容。我们的主人公是一个多才多艺的女孩，她的名字叫小慧。小慧的作品很多，需要分类。在制作网站之前，首先画出网站的设计草图。2.1设计草图2.2站点的建立 首先给站点起个名字，叫“小慧的家”。执行【站点】|【管理站点】菜单命令，或者在右侧【文件】功能面板下的【文件】选项卡中，单击【管理站点】超级链接。2.2站点的建立 弹出【管理站点】对话框，单击【新建】按钮，选择【站点】命令，如图所示。2.2站点的建立 屏幕上出现了站点定义的对话框，有【基本】和【高级】两个选项卡，选择【基本】选项卡，并在文本框内输入站点的名称小慧的家。2.2站点的建立 单击【下一步】按钮。选择【否，我不想使用服务器技术】选项，单击【下一步】按钮。接下来，要选择把文件存储在计算机上的什么位置，单击文本框右边的按钮。2.2站点的建立 这里存储文件的位置是“F:xiaohui”（在F盘下新建一个名为“小慧的家”的文件夹。可以根据你的需要进行选择），如图所示，单击【下一步】按钮。2.2站点的建立 打开【您如何连接到远程服务器？】中的下拉菜单，选择【无】项，单击【下一步】按钮。然后单击【完成】按钮，结束站点定义。 回到【管理站点】对话框，左边出现了站点名称“小慧的家”，如图所示。2.2站点的建立 如果在上述的操作过程中有失误，可以单击【编辑】按钮进行修改。单击【完成】按钮后，在【文件】功能面板下的【文件】选项卡中，也相应出现了相关信息，如图所示。2.2站点的建立 为了存放网页中要用到的图片，可以在该站点下新建一个专门存放图片的文件夹。选中“小慧的家”站点，单击鼠标右键，在弹出的菜单中选择【新建文件夹】，输入文件夹名称为“images”，按回车键确认。这样，在站点下就多了一个“images”文件夹，如图所示。2.2站点的建立 如果不想要这个文件夹了，也可以选中它，直接按键盘上的Delete键将它删掉。 与创建文件夹的方法相同，也可以创建网页文件。2.2站点的建立u 提示：一般首页文件名为“index.htm”或者“index.html”，如果是使用ASP语言编写的页面，那么文件名变为“index.asp”，如果是用XML语言编写的，文件名为“index.xml”。 我们可以把一些制作网页时要用到的图片放到“images”文件夹下。接下来，就可以制作第一张网页，即首页文件“index.htm”文件。2.2.1视图方式打开“index.htm”文件，如图所示。2.2.1视图方式 在【文档】工具栏上左端的三个按钮，分别为【显示代码视图】、【显示代码视图和设计视图】、【显示设计视图】，单击这3个按钮可以实现三种视图间的切换。2.2.1视图方式 这三视图的用途各不相同，在代码视图中可以直接编辑网页的源代码，对于习惯编程的用户来说，是必不可少的；而设计视图能方便我们更好地美化网页，更合理地布局网页；时显示代码视图和设计视图让我们能够更好地理解源代码，提高编程能力。2.2.2表格的简单应用 在Dreamweaver中的表格处理和Word中并不一样。首先我们来创建一个表格。2.2.2表格的简单应用 制作如图所示的表格效果。其中行数和列数都为2，表格宽度为600，单元格边距和单元格间距都为30。2.2.3图像的基本操作 表格里不但可以输入文字，还可以插入图片。2.2.4文本的编辑与基本操作 1输入网页的标题 2插入特殊文本字符 3文本简单的排版 4设置字体、颜色、大小、对齐方式和样 5页面属性2.2.5插入水平线和更新日期2.2.5插入水平线和更新日期2.2.6背景图片和背景音乐本章小结 本章主要介绍了网站的草图设计，接着讲解了如何建立站点，通过本章的学习要求能够制作简单的网页，最后还应该大致了解超级链接的基础知识。2.4习题与上机操作 （1）要在本地创建一个新站点，可以使用Dreamweaver自带的哪个工具来创建。 （2）简述相对路径与绝对路径的含义，及它们各自的优缺点。 （3）在Dreamweaver MX 2004中创建一个本地站点“个人网站”，将并将其保存在 D:my jobs。 （4）制作几张网页，里面可包含表格、图像、文字、水平线、背景音乐、背景图片等元素。第4章超级链接的应用 教学目标 本章介绍如何利用超级链接来实现文档之间的跳转，其中包括文本超级链接，链接到指定的锚点、链接到电子邮件地址和连接到空链接等各种超链接，并将详细讲解如何创建表单以及超链接的属性设置。第4章超级链接的应用教学重点和难点 创建各种常用超级链接 创建表单 给链接增加提示 链接的管理4.1 超级链接的基本操作 首先考虑网站的文件名，可以设计如图所示的网站草图。“给我留言”将来可以单独制作成留言板，而“写信给我”可以用邮件链接制作，所以先不考虑。4.1.1 创建网站内部的链接 什么是文本超级链接呢？浏览网页时，鼠标指针经过某些文本时，形状会发生变化，同时文本也可能发生相应的变化。4.1.2 创建网站外部的链接 1创建邮件链接 方法一：在页面中选择“写信给我”，在【属性】面板的【链接】文本框中输入“mailto:” 。4.1.2 创建网站外部的链接 方法二：单击【常用】工具栏中的【电子邮件链接】按钮，或者执行【插入】|【电子邮件链接】命令，弹出【电子邮件链接】对话框，在【文本】后的文本框中输入“写信给我”，在【E-mail】文本框中输入邮箱地址“” 。 按键盘上的F12键后，单击“写信给我”的链接，系统会自动运行Outlook软件，就可以撰写电子邮件了。4.1.2 创建网站外部的链接 2创建表单4.1.2 创建网站外部的链接 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面，用户利用表单可以输入信息或选择选项等，然后将这些信息提交给服务器进行处理。 这种查询方式叫做交互（用户和服务器）的或者叫做双向的。表单对象包括文本域、列表框、复选框和单选按钮。 表单对象是让用户输入信息的地方，表单域是放置表单对象的区域，只有表单域内的表单对象，才可以将它的信息传送出去，才可以接收外来的信息。4.1.2 创建网站外部的链接 创建表单域： 方法1：将光标移到要插入表单域的位置，单击“插入”（表单）面板内的“表单”按钮 方法2：用鼠标将表单对象面板内的表单图标拖曳到网页编辑窗口内 单击表单域内部，按回车键可将表单域调大；如果再按Backspace键，又将表单域缩小。 通常表单域在浏览器内是看不到的。4.1.2 创建网站外部的链接 显示表单域：在表单域创建后，可以单击“视图”菜单的“可视化助理”“不可见元素”命令，隐藏或显示表单的矩形红线。 删除表单域：单击表单域的红线处，选中表单域，按Delete键，可删除表单域。4.1.2 创建网站外部的链接 表单的属性： “表单名字”文本框：在该文本框内输入表单域的名字。表单域的名字可用于Java Script和VB Script等脚本语言中，这些脚本语言可控制表单域的属性。 “动作”文本框和文件夹按钮：利用它们可以输入脚本程序或含有脚本程序的HTML文件。4.1.2 创建网站外部的链接 表单的属性： “方法”列表框：用来选择客户站与服务器之间传送数据的方式。三个选项是：默认（使用浏览器默认设置将表单数据发送到服务器）、GET（获得，即追加表单值到URL，并发送服务器GET请求）、POST（传递，在消息正文本中发送表单的值，并发送服务器POST请求）。4.1.2 创建网站外部的链接 表单的属性： “目标”值有： _blank:在未命名的新窗口中打开目标文档； _parent:在显示当前文档的窗口的父窗口中打开目标文档； _self:在提交表单所使用的窗口中打开目标文档； _top:在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中。4.1.2 创建网站外部的链接 文本域的属性设置： 文本域用于接受任何格式的文本、数字和字符。 字符宽度文本框：文本域的宽度，即可显示字符的最多个数。 最大字符数/多行文本框：单行时允行输入的字符个数，可比文本框宽度大/多行时输入文本框的行数。 类型栏：单行、多行属性框发生变化。 初始值文本框：用来输入文本框的初始内容。 换行列表框：默认（采用浏览器的默认值）、关（当输入的文字超过文本框的宽度时，不换行，会出现滚动条）、虚拟（当输入的文字超过文本框的宽度时，会自动换行，但向服务器传输数据时无回车符）、实体（当输入的文字超过宽度时，会自动中入回车符，换行）。4.1.2 创建网站外部的链接 按钮的属性设置： 按钮用来制作提交和重置按钮，还可以调用函数。 标签文本框：用来输入按钮上的文字。 动作栏：有三个选项，用来选择单击该选项后引起的动作类型。 提交表单表示可以向服务器提交整个表单； 重设表单表示可以取消前面的输入，复位表单； 无表示是一般按钮，可以用来调用脚本程序。4.1.2 创建网站外部的链接 复选框的属性设置： 有选中和未选中两种状态，多个复选框允许多选。 选定值文本框：用来输入复选框选中时的数值，通常为1或0。 初始状态栏：有两个单选项，用来设置复选框的初始状态。4.1.2 创建网站外部的链接 单选按钮组（也叫单选项组）的属性设置： 可以设置单选按钮组中单选按钮的个数和名称。如果要增加选项，可以单击+按钮；如果要删除选项，可以单击选中该选项，再单击-按钮。如果要调整选项的显示次序，可选中选项，再单击向上移或向下移按钮。4.1.2 创建网站外部的链接 列表的属性设置： 它的作用是将一些选项放在一个带滚动务的列表框内。 类型栏：有两个单选项，用来选择菜单或列表。 高度文本框：用来输入列表的高度值，即可以显示的行数。 选定范围复选框：表示列表中的各选项可以同时选择多项。 初始化时选定文本框：用来设置第一次调出该菜单时，菜单中默认的选中项。 列表值按钮：可以输入菜单或列表内显示的选项内容，以及输入此选项提交后的返回值。4.1.2 创建网站外部的链接 文件域的属性设置： 用来让用户从中选择磁盘、路径和文件，并将该文件上传到服务器中。 字符宽度文本框：文件域的宽度，即可显示字符的最多个数。 最多字符数文本框：允许用户输入的字符个数，它可以比文件域的宽度值大。4.1.2 创建网站外部的链接 3添加下载文件的链接 有的时候，要在网页中为文件提供下载链接，每一个下载的文件必须对应一个下载链接，如果有多个文件的话，一般利用压缩软件将这些文件或者文件夹压缩成为一个文件。即首先建立一个“rar”文件夹，然后将文件打包成“pic.rar”文件，存放到该文件夹中。4.1.2 创建网站外部的链接 提示： 下载文件的链接其实和普通的链接是一样的，而且创建方法都是一致的，但是下载链接一般指向压缩文件、可执行文件等，这些文件因为服务器无法打开执行，所以将结果返回给浏览器，而一般的链接可以直接在浏览器中打开，所以不出现提示下载窗口。4.1.2 创建网站外部的链接 4空链接 空链接也就是没有链接对象的链接，在空链接中，目标URL是用“#”来表示的。也就是说制作链接时，只要在【属性】面板的【链接】文本框中输入数值符“#”，它就是个空链接了。4.2.2 创建JavaScript脚本链接 链接不仅能够用来实现页面之间的跳转，也可以用来直接调用JavaScript语句，这种单击链接，执行JavaScript语句的链接称为JavaScript链接。在执行一些简单的JavaScript命令时，利用JavaScript链接是非常方便的。4.2.2 创建JavaScript脚本链接1创建简单的JavaScript脚本链接4.2.2 创建JavaScript脚本链接 2创建前进链接和后退链接 在进行页面导航时，前进链接和后退链接经常被使用。单击前进链接时，就等于单击浏览器窗口上的“前进”按钮；而单击后退链接就等于是单击浏览器窗口上的“后退”按钮。在创建前进链接和后退链接之前，要先选中需要创建链接的文本或者图片。4.2.2 创建JavaScript脚本链接 创建前进链接 在【属性】面板的【链接】文本框中输入代码“javascript:history.go(1)”，或者输入代码“javascript:history.forward(1)”。4.2.2 创建JavaScript脚本链接 创建后退链接 在【属性】面板的【链接】文本框中输入代码“javascript:history.go(-1)”或者输入代码“javascript:history.back(1)”。 4.1.2 创建网站外部的链接 3添加下载文件的链接 有的时候，要在网页中为文件提供下载链接，每一个下载的文件必须对应一个下载链接，如果有多个文件的话，一般利用压缩软件将这些文件或者文件夹压缩成为一个文件。即首先建立一个“rar”文件夹，然后将文件打包成“pic.rar”文件，存放到该文件夹中。4.1.2 创建网站外部的链接 提示：下载文件的链接其实和普通的链接是一样的，而且创建方法都是一致的，但是下载链接一般指向压缩文件、可执行文件等，这些文件因为服务器无法打开执行，所以将结果返回给浏览器，而一般的链接可以直接在浏览器中打开，所以不出现提示下载窗口。4.2.3给链接增加提示 首先将插入点放在要插入链接的位置。然后单击【常用】工具栏上的【超级链接】按钮，弹出【超级链接】对话框，输入文本，链接到首页文件，如图所示.4.2.3给链接增加提示 按F12键键看一下预览效果，当我们将光标移到“返回首页”的时候，就出现了“按此可以返回到首页”的提示. 本章小结 在本章中，我们了解了在Dreamweaver MX 2004中创建超级链接的几种不同方法，进一步学习了创建锚点链接、创建JavaScript脚本链接、给链接增加提示等知识。通过本章的学习，我们必须掌握在Dreamweaver MX 2004中创建各种链接的方法，并能熟练运用它们。4.3习题与上机操作第5章图像和多媒体 教学目标 本章讲述图像和多媒体的基本格式和相关知识，结合实例重点讲解设置图像的属性、图像的编辑以及添加多媒体及参数设置。需要注意的是，在网页中使用媒体对象要注意一般媒体对象的播放都需要插件的支持，在网页上放一个下载相应插件的链接就显得非常必要。第5章图像和多媒体 教学重点和难点 插入图像 设置图像的属性 图像编辑 添加多媒体及参数设置创建各种常用超级链接5.1 网页中的图像格式 网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，而目前使用最广泛的主要是GIF和JPEG两种格式。5.1 网页中的图像格式 我们对比一下几种流行的图像格式：在Windows支持的图像格式中，一般情况下，同一图像的BMP格式的大小是JPEG格式的510倍。GIF格式最多只能是256色，因此载入256色以上图像的JPEG格式成了互联网中最受欢迎的图像格式。所以网页中的图像格式一般以GIF为主，如果涉及到照片类似的图像，则选择JPEG格式。5.2 设置图像的属性 5.2.1给图像描边5.2 设置图像的属性 5.2.2设置图文混排5.2 设置图像的属性 当网页内有文字和图像混排时，系统默认的状态是图像的下沿和它所在文字行的下沿是对齐的，默认时文字在左，图像在右。 可以通过设置图像的属性改变对齐方式。5.2 设置图像的属性 “对齐”有10个选项，用来进行文字与图像相对位置的调整。1、默认值：浏览器默认的对齐方式，不同的浏览器会稍有不同；2、基线：图像的下沿与文字的基线水平对齐。3、顶端：图像的顶端与当前行中最高项（图像或文本）的顶端对齐。4、中间：图像的中线与文字的基线水平对齐。5、底部：图像的下沿与文字的基线水平对齐。6、文本上方：图像的顶端与文本行最高字符的顶端对齐。7、绝对中间：图像的中线与文字的中线水平对齐。8、绝对底部：图像的下沿与文字的下沿水平对齐。9、左对齐：图像在文字的左边缘，文字从右侧环绕图像。10、右对齐：图像在文字的右边缘，文字从左侧环绕图像。5.2 设置图像的属性 5.2.3给图片增加提示5.2 设置图像的属性 5.2.4创建图像热区5.2 设置图像的属性 5.2.5设置图像边距5.2 设置图像的属性 5.2.6使用图像占位符5.3 图像编辑 改变图片的大小 图片的编辑（外部编辑器） 图像的裁剪 改变图像的亮度和对比度5.3 图像编辑插入鼠标经过图像： “插入”菜单“图像对象”“交互图像”命令； 或：“常规”插入面板“翻转图像”按钮，这两种方法均可打开“插入鼠标经过图像”对话框对以下各项内容进行设置确定。1、图像名称2、原始图像：加载初始图像。3、鼠标经过图像：加载翻转图。4、预载鼠标经过图像：选中后，当页面载入浏览器时，会将翻转图先载入，而不必等到鼠标指针移到图像上边时才下载翻转图，这样可使翻转图变化连贯。通常选中。5、按下时前往的URL：可以建立与翻转图链接的网页文件。5.4 添加多媒体及参数设置创建文档的小技巧本章小结 通过本章的学习，读者了解了有关图像和多媒体的相关知识，并能灵活地对图像进行处理。同时，为了制作出精彩纷呈的网页，可以加入Flash动画、其它声音或视频对象等。5.5习题与上机操作5.5习题与上机操作第6章CSS样式表 教学目标 本章主要讲解有关CSS的概念及其在Dreamweaver中的应用。详细介绍如何新建、编辑和套用CSS样式，并结合实例分析如何利用CSS样式实现网站常见效果。第6章CSS样式表 教学重点和难点 创建CSS样式 应用CSS样式 编辑CSS样式 删除CSS样式 CSS样式各参数 举例说明CSS样式的套用6.1 创建CSS样式 CSS样式表的创建，可以统一定制网页字体、文字大小和链接状态等效果。在Dreamweaver MX 2004中CSS样式的设置方式有了很大的改进，更方便、实用和快捷。 CSS又叫层叠样式表，能让网页制作者有效地定制、改善网页的显示效果，是对HTML的补充。可以节省许多重复性格式设定，除了可以轻松设置网页元素的显示位置格式外，还能产生滤镜、图像淡化等渐变效果。6.1.1 CSS样式的类型 单击“窗口”菜单“CSS样式”或者按Shift+F11键打开“CSS样式”面板。在面板中单击鼠标右键或者单击面板右下方的“新建”按钮，可以打开“新建CSS样式”对话框。在【新建CSS样式】对话框中需要选择CSS样式的选择器类型，其中有【类】、【标签】和【高级】三种类型。6.1.1 CSS样式的类型 选择【类】单选钮：在【名称】文本框中输入样式名称，类名称必须以英文句点开头，并且可以包含任何字母和数字组合。否则自动添加“”符号。 它是默认的CSS类型。 可生成一个新的样式，制作完成后，就可以在样式面板中看到制作完成的样式。在应用时，首先在页面中选中对象，然后选择样式即可。6.1.1 CSS样式的类型 选择【标签】单选钮：【名称】变成了【标签】。在【标签】的下拉列表框中可以选择需要重定义外观的HTML标签，也可以直接输入要重定义的标签。 即将现有的标签赋上样式，因此制作完毕后不需要选中对象就可以直接应用到页面中。6.1.1 CSS样式的类型 选择【高级】单选钮：【标签】变成了【选择器】，在【选择器】的下拉列表中输入一个或者多个HTML标签，或从弹出式菜单中选择一个标签。弹出式菜单中提供的标签包括： “a:visited”:被访问过超链接文本的显示样式； “a:hover”:光标移动超链接文本上时的显示样式； “a:active”:超链接文本被激活时的显示样式； “a:link”:正常的未被访问过的超链接文本的显示样式。6.1.1 CSS样式的类型 选择【定义在】单选钮：用于选择定义一个外部链接的CSS还是定义一个仅应用于当前文档的CSS。6.2 应用CSS样式 应用内部CSS样式： 第一步：如果要设置段落格式，可将插入点放置于段落中，若是多个段落则需选中段落；如果设置字符格式，则需选中这些字符 第二步：在“CSS样式”面板中选择某个样式 第三步：单击鼠标右键，选择“套用”命令；或者打开面板菜单，选择“套用”命令即可6.3 编辑CSS样式 编辑CSS样式：可以修改当前文档或外部样式表中的任何样式。 第一步：打开“CSS样式”面板，选择要编辑的外部样式； 第二步：单击CSS样式面板右下角的“编辑样式”按钮，或从面板菜单中选择“编辑”命令，打开编辑样式对话框； 第三步：选择要编辑的外部样式，单击“编辑”按钮，会打开“CSS样式定义”对话框，在对话框中进行相应的修改，最后单击“确定”即可。6.4 删除CSS样式 删除CSS样式：即从应用该样式的所有元素中删除该样式。 第一步：在“CSS样式”面板中选中要删除的样式； 第二步：单击“CSS样式”面板右下角的“删除样式”按钮，或者从面板中选择“删除”命令。此时样式被删除，同时从样式列表中消失。6.5 CSS样式各参数 主要介绍CSS样式的8个分类的设置方法：1、类型面板：定义样式的基本类型2、背景面板：定义样式的背景3、区块面板：定义样式的空格和对齐方式4、方框面板：定义样式以控制页面上的元素布局6.5 CSS样式各参数5、边框面板：定义样式以控制围绕元素的边框6、列表面板：定义样式的类型、项目符号图像和位置对齐方式7、定位面板：改变选定文本的标签或文本块8、扩展面板：可以对自定义功能进行扩展，但现在大多浏览器不支持本章小结 通过本章的学习，读者可以体会到CSS样式在Dreamweaver中的重要性。6.3习题与上机操作6.3习题与上机操作第7章网页布局设计 教学目标 页面布局是网页设计的一个重要组成部分。本章首先讲述网页设计时常用的几种版式，接着深入介绍在布局模式中使用布局表格和布局单元格对网页进行排版，重点要掌握布局表格、单元格参数的调整，以及利用布局表格的嵌套来设计较复杂的版面，除此之处还介绍了使用层来布局版面、把层置换为表格等内容。第7章网页布局设计教学重点和难点 版式设计 layout（布局）运用 灵活应用表格进行布局 灵活应用层进行布局 表格与图层的相互转换7.1 版式设计 设计一个网页，先要规划好版式。常用的版式有分栏式结构，比如二分栏，三分栏，四分栏。新浪网就是一个三分栏的结构。 7.1 版式设计7.1 版式设计 把新浪网版式简化一下，是一个典型的三分栏结构，第一行分两列，左边单元格放置LOGO图片，右边单元格放入导航菜单，由于栏目比较多，所以分成四行排放。第二行为网页主体部分，分成三栏，左边一栏为特色栏目导航，右边两栏分别放置不同的网页内容。下面一行放置版权信息。7.1 版式设计 个人网页由于内容较少，也可以采用二分栏的结构，如右图所示。7.2 Layout(布局)的运用 在绘制布局表格或布局单元格之前，先从【标准】模式切换到【布局】模式。这一章中我们就要完成在【布局】模式中对“小慧的家”重新进行版式的设计，力求达到更加美观的页面效果。还是让我们先来认识一下【布局】模式吧！7.2 Layout(布局)的运用7.2.1 绘制布局表格7.2 Layout(布局)的运用7.2 Layout(布局)的运用7.2.1 绘制布局表格 技巧：如果要绘制多个布局表格，不必重复选择【布局表格】按钮，只要在绘制布局表格时按住Ctrl键，便可以连续绘制出多个布局表格。7.2.2 绘制布局单元格7.2.4 调整布局单元格和表格 移动布局单元格：选择需要移动的单元格，可以单击该单元格的边缘，或者在按住Ctrl键的同时单击该单元格中的任何位置，选中后，则该单元格周围会出现选择控制手柄。然后将该单元格拖动到另一个位置。7.2.4 调整布局单元格和表格 提示：可以任意选择布局单元格的8个控制手柄分别作不同方向的调整大小，调整过程中单元格边缘会自动与其他单元格的边缘靠齐。最外面的布局表格只能调整大小而不能移动。7.2.2 绘制布局单元格 技巧1：在布局表格中绘制布局单元格时会出现一条明亮的网格线，这些线可以帮助你将新单元格和以前的单元格对齐。Dreamweaver会将新单元格的边缘与旁边现有单元格的边缘自动靠齐（布局单元格不能重叠）。如果绘制的单元格靠近包含它的布局表格的边缘，单元格的边缘也会与该表格的边缘自动靠齐。7.2.2 绘制布局单元格 技巧2： 在布局视图中，可以在页面上绘制布局单元格和布局表格。当你不在布局表格中绘制布局单元格时，Dreamweaver会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。7.2 Layout(布局)的运用 与布局单元格不同，布局表格能够嵌套使用，可以将一个布局表格绘制在另一个布局表格中，而且对外部表格所进行的更改不会影响嵌套表格中的单元格；还可以插入多级嵌套表格，但嵌套布局表格的大小不能超过包含它的表格。7.2 Layout(布局)的运用7.2.3 绘制嵌套布局表格7.3 层排版7.3 层排版7.3 层排版7.3 层排版7.3 层排版7.3 层排版7.3 层排版7.3 层排版7.4 表格与图层的相互转换 精确定位网页中各个元素的位置有两种方法：使用表格或层。使用表格是目前比较通用的做法；层在网页中可以随意放置，因此也可以使用层来进行精确定位。因为层只在最新的浏览器中被支持，所以如果需要支持4.0版之前的浏览器，就一定要将层转换为表格。7.4 表格与图层的相互转换 在确保层没有重叠后，就可以在层和表之间来回转换，但是不能转换页面上特定的表格或层，必须将整个页面上的层转换为表格或将表格转换为层.7.4 表格与图层的相互转换 执行【修改】|【转换】|【层到表格】命令后，层被转换为表格。 同样可以把表格再转换成层，但是将表格转换为层时，空单元格不会被转换为层（除非它们具有背景颜色）。另外，位于表格外的页面元素也会放入层中。本章小结 通过本章的学习，读者能独立根据需要设计网站的版式，并能灵活地在布局模式中应用表格和层进行布局的设计，也可以试着用表格的嵌套方式来设计较复杂的版面。除此之外，可以轻松实现层与表格之间的相互转换。在使用中，我们发现在Dreamweaver的布局模式中使用布局表格和布局单元格排版是非常方便和快捷的。7.5习题与上机操作7.5习题与上机操作8.1 行为概述 Dreamweaver提供了二十几种行为，这些行为能够实现为网页添加诸如播放音乐、显示/隐藏层、弹出消息和打开新浏览窗口等功能。8.1 行为概述 一个行为是由一个事件（Event）所触发的动作（Action），所以把行为又称为对事件的响应，是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。事件是浏览器产生的有效信息，也就是访问者对网页所做的事情。例如，单击某个图像、鼠标经过指定的元素等，浏览器便生成相应的onMouseronClick（鼠标单击）、onMouseronOver（鼠标经过）等事件。这些事件通过调用事先已经写好的与此事件关联的JavaScript语言来响应这个动作，使网页发生预先定义好的种种变化。有些事件在没有用户交互时也可以生成，例如设置页面每10秒钟自动重新载入。8.1 行为概述 事件依赖于物件（元素）的存在而存在，如果想应用某事件，必须选中页面中的物件（元素）。一个事件也可以触发许多动作，可以通过时间的设定来定义动作执行的先后顺序。8.1.1 附加行为 理解了行为的概念，我们可以将行为附加到整个文档，即附加到boby标签，还可以附加到链接、图像、表单元素或多种其他HTML元素中的任何一种。 添加行为 定义事件8.1.2 动作简介8.1.3 常见事件类型 有关窗口的事件 有关鼠标和键盘的事件 有关表单的事件 其他事件8.2 行为的基本