网页设计与制作第2章 dreamweaver MX基本操作.ppt

第2章 dreamweaver MX 基本操作,Dreamweaver MX 2004基本操作,2.1初识dreamweaver MX 2004 2.2站点的创建与页面属性设置 2.3添加文本丰富的内容,2.1初识dreamweaver MX 2004,2.1.1 dreamweaver MX 2004工 作界面介绍 2.1.2网页的创建和保存 2.1.3网页的修改与预览 网页的打开；跟其他软件打开文档相似。 网页的创建：直接创建空白文档；通过模 板创建有格式的网页文档。 网页的保存：直接保存；另存为。 命名注意： 最好做到“见名知义”，看到名字就知道网页里的相应内容； 名字最好用英文字母或拼音，不要包含中文或 一些特殊的字符。,2.1初识dreamweaver MX 2004,2.1.2网页的创建和保存 文件名的开头不能使用数字、运算符等符号，文件名最好不要使用中文，因为如果主机采用UNIX系统，中文名会出错。文件的命名一般采用以下几种方法： 汉语拼音：这是最简单的命名方法，根椐页面的标题或主要内容，提取两三个概况字，把它们的汉语拼音作为文件名。例：“产品中心”页面，提取“产品”这两个字的汉语拼音，因此文件名为“chanping.htm”。 拼音缩写：根椐页面的标题或主要内容，提取每个汉字拼音的第1个字母作为文件名。 例：“留言簿”的拼音为“liuyanbo”，那么文件名为“lyb.asp”。这种方法简单，但不带提示性，不便于日后的维护。 英文缩写：这种方法也较难记忆，一般适用于专有名词。例：“Active Server Pages”这个专有名词一般用ASP来代替。 英文原文：这种方法准确、实用，最好的一种方法。例：“公司简介”的页面命名为“company_introduction.htm”.,2.2站点的创建与页面属性设置,2.2.1创建站点 创建站点的第一步就是规划站点，再通过DREAMWEAVER站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。将多个网页文档链接起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。 2.2.2页面属性的设置,2.3在网页中加入文本,2.3.1插入文本 直接输入或者通过复制 2.3.2通过属性面板对字体进行设置 输入特殊字符； 输入一个空格：按SPACE键 连续输入多个空格：CTR+SHIFT+SPACE 换行：SHIFT+ENTER 分段：ENTER 添加并编辑水平线； 插入日期； 2.3.2让文本更具个性 2.3.3结合实例讲解,2.4在网页面中插入图象,2.4.1网页的色彩 2.4.2网页中图象的格式 2.4.3在网页中插入图象 2.4.4设置图象属性 2.4.5鼠标经过图象 2.4.6图象占位符,2.4.1网页的色彩,在网页中是以RGB方式来表示颜色的，RGB是Red、Green、Blue的缩写。RGB颜色包括几百万种之多，这么多的颜色却有一个共同点，就是都由红、绿、蓝这3种基色调和而成，这3种基色中每一种颜色的饱和度和透明度都是可以变化的，取值范围为0255，例如，红色表示为Red100%，Green0%，Blue0%，简单的表示法为（255，0，0），用十六进制数值来表示就是“FF0000”，在HTML语言中我们直接十六进制数值来命名颜色。,2.4.1网页的色彩,用排列组合方法计算：256*256*256=16 777 216，总共可以得到16 77 216种RGB颜色，这是理论上的。在实际中，只有216种颜色能在浏览器中正常显示。多于这个范围的颜色，有的浏览器显示时可能发生偏差，不能正常显示。因此，我们将能被所有浏览器正常显示的216种颜色称为网页安全色。Dreamweaver中提供了具有网页安全颜色范畴的调色板，使网页的颜色选取控制在安全范围之内。 这216种颜色除黑色和白色外，其他全部属于彩色范畴。网页制作是用彩色还是非彩色好呢？其实只要运用的合理，都能达到好的效果。 我们通常的做法是：主要内容文字用非彩色（黑色），边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。,2.4.1网页的色彩,1非彩色的搭配 黑白是最基本和最简单的搭配，它们以其特有的性质一直在艺术殿堂中占有重要的地位，如中国的水墨画、黑白摄影等艺术作品，给人一种质朴、安逸、超脱的美感。但要把握好很难。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。,2.4.1网页的色彩,2彩色的搭配 色环：我们将色彩按“红-黄-绿-蓝-红“依次过度渐变，就可以得到一个色彩环。 色环的两端是暖色和寒色，当中是中型色。如图2-6所示。 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红. /_/ /_/ /_/ /_/ / / / / 暖色系 中性系 寒色系 中性系,2.4.1网页的色彩,3色彩的心理感觉 不同的颜色会给浏览者不同的心理感受。 红色-是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。 绿色-介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。 橙色-也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。 黄色-具有快乐，希望，智慧和轻快的个性，它的明度最高。 蓝色-是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛（象天空的色彩:）,2.4.1网页的色彩,白色-具有洁白，明快，纯真，清洁的感受。 黑色-具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色-具有中庸，平凡，温和，谦让，中立和高雅的感觉。 每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。,红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐 黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 黑色代表崇高、坚实、严肃、刚健、粗莽 还有 一般认为颜色的象征作用如下: 红色:革命.热烈.牺牲.豪迈 绿色:和蔼悠闲. 和平娴雅 黄色:温暖 高贵 显赫 豪华 蓝色:和平 善良 冷静 深沉 白色:轻快 纯洁 真挚 黑色:沉重 悲哀 神秘,2.4.1网页的色彩,4网页色彩搭配的原理 色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。 色彩的独特性。要有与众不同的色彩，使得大家对你的网页印象强烈。 色彩的合适性。就是说色彩和你表达的内容气氛相适合。 色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜庆等，选择色彩要和你网页的内涵相关联。,2.4.1网页的色彩,5网页色彩搭配的技巧 用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，（说得通俗些就是将色彩变淡或则加深），产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 用两种色彩。先选定一种色彩，然后选择它的对比色（在photoshop里按ctrl+shift+I）。 用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。 用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。,2.4.1网页的色彩,在网页配色中，忌讳的是： 1.不要将所有颜色都用到，尽量控制在三种色彩以内。 2.背景和前文的对比尽量要大，（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。,2.4.2 网页中的图像格式,图像在网页中具有画龙点睛的作用，它能装饰网页，表达个人的情调和风格。但在网页上加入的图片越多，浏览的速度就会受到影响导致用户失去耐心而离开页面。网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，其中使用最广泛主要是GIF和JPEG两种格式。 它们有一些共同的特点：都属于压缩的图片文件格式，文件的信息量很小，适用于网络传输；适用于各种平台。因此大部分的浏览器都把它们当作标准规格。而PNG格式的图像只有在Microsoft IE（4.0以上版本）和Netscape Navigator（4.04）以上版本才能得到支持。,2.4.2 网页中的图像格式,GIF的英文全称是“Graphics Interchange Format”，中文意思是“交换的图像格式”。GIF文件采用Lossless（非失真）的压缩方式，在压缩图片文件的过程中，图形的像素信息不会被牺牲掉，被牺牲的是图形的颜色，因此，GIF文件最多只能保存256色。GIF格式支持图片游离在背景之上的视觉效果， JPEG图片文件采用lossy（失真）的压缩方式，因此JPEG可支持多达16M颜色，它能展现十分丰富生动的图像。但压缩方式是以损失图像质量为代价，压缩比越高图像质量损失越大，图像文件也就越小。,2.4.2 网页中的图像格式,GIF图像文件的主要优点： 1.最大支持256色，因此其图像一般能正常显示。 2.由于图像使用颜色少，压缩率高，因此文件的尺寸小。 3.GIF格式的图像支持1bit透明度，因此可以制作背景透明的文字或图像。 4.可以将GIF格式的图像制作成动画。 GIF图像文件的主要缺点： 由于最大支持256色，因此不适合于有晕光，渐变色彩等颜色细腻的图像和照片。,2.4.2 网页中的图像格式,JPEG格式图像的主要优点： 支持24bit图像，能够很好地表现照片等全彩色的图像。 可以生成类似GIF的交错关联图像渐变JPEG 可以制作透明的JPEG图像。 JPEG格式图像的主要缺点： 有损压缩使之不适合表达高清晰度的图像,正确使用GIF和JPEG：,GIF适用于向量式、少于256色的图像。 GIF是制作透明图像和动画GIF的首选格式。 JPEG适用于有渐变色彩、颜色细腻的图片,PNG图像格式,PNG图像格式是一种新兴的网络图像格式。 它是目前保证最不失真的格式，它汲取了GIF 和JPEG格式的优点。具体体现如下： 1.能把图像文件压缩到极限以利于网络的传输，但又能保留所有与图像品质有关的信息; 2.采用无损压缩来减少文件的大小; 3.显示速度快; 4.支持透明图像的制作; 缺点：不支持动画应用效果 FIREWORKS 的默认格式是PNG; Photoshop的默认格式是PSD.,2.4.3 在网页中插入图像,在向网页中插入图像前，最好先保存文件。在对话框中选择图像文件，这时要注意图像文件应在站点目录下，若不在，则会弹出对话框询问是否将图像文件复制到网站的目录下，应单击“是”按钮，将图像保存到网站的目录下。,2.4.4 设置图像属性,图像插入文档后，其位置、大小等设置可能不尽如意，可通过【属性】面板，对它进行设置。单击图像，其周围出现控制点，表示已选中，状态栏标签被选中，【属性】面板显示关于图像的属性，单击扩展按钮，可见到全部的属性。,2.4.4 设置图像属性,【图像】：旁边的数字表示图像的大小，文本框用于输入图像名称，在脚本语言可通过名称中对图像进行引用。对应于属性。 【宽】和【高】：用于设置图像的大小，也可通过鼠标拖动控制点，来调整图像的大小。图像大小改变后，在宽和高之间，增加了一个按钮，单击它可恢复图像的大小。若想保存调整后的大小，可单击重新取样按钮，这样能减少马赛克现象。 【源文件】：指出图像的具体位置，要改换图像，可通过单击文件夹按钮，来重新选择图片，对应于标签src属性。 【替代】：是图像的注释，当用户的浏览器不能正常显示图像时，便在图像的位置用这个注释代替图像。对应于标签alt属性。,2.4.4 设置图像属性,【链接】：指定链接的目标页面或定位的URL。 【地图】：用于制作图像映射。它有3个工具按钮。 【垂直边距】：设置图像在垂直方向与文本或其他页面元素的间距。 【水平边距】：设置图像在水平方向与文本或其他页面元素的间距。 【边框】：设置图像边框的宽度，单位是像素为“0”，表示无边框。对应于标签border属性。 【低解析度源】：指定应在主要图像之前载入的图像，这个图像是原图像的一个低分辨率版本，它的载入更快，这样就可以让浏览者对等待显示的图像有一个了解。但也可以使用任何一个和主要图像尺寸相同的图像。 【编辑】：这里有6 个按钮。可以对选定的图像进行编辑。 : 启动图像处理软件对图像进行编辑，一般为Firesorks，当保存文件返回时，将使用保存后的图像更新文档. : 启动图像处理Firesorks对图像进行优化。 :裁剪图像。 : 重新取样。 :调节亮度和对比度。 : 锐化图像。,2.4.4 设置图像属性,【对齐】:用于设置图像与文本或其他元素的位置关系，有9项排列方式。对应于属性align。 默认值：取决于浏览器所设置的排列方式。 基线：将文本或其他元素的基线与所选图片的底边对齐。 顶端：上端对齐，将文本或其他元素与图片所在行的最顶端对齐。 居中：将文本或其他元素与图片的中部对齐。 底部：将文本或其他元素与图片的底部对齐。 文本上方：将文本行中的最高字符与图片上端对齐。 绝对居中：将图片的中部与文本的中部对齐。 绝对底部：将图片的绝对底部与文本的绝对底部对齐。 左对齐：将图片放置到文本块左边缘，与当前行的顶端对齐，文本位于图像的右边和下面。 右对齐：将图片放置到文本块右边缘，文本位于图像的左边。,2.4.5 鼠标经过图像,在浏览网页时，有时会看到当鼠标指针移到某幅图像时，该图像会变为另外一幅图像，而移开鼠标指针时，该图像又会变回原来的图像。这就是鼠标经过图像时产生的交互。,2.4. 6图像占位符,图像占位符是网站排版布局中经常用到的功能，我们可以在要放置图像的位置，暂时放置占位符，等到处理好图像时再作替换。,2.5创建网站相册,用Dreamweaver用制作电子相册，实际上通过JavaScript调用Fireworks来处理一系列的图像，自动为图像创建，并自动完成缩略图与原始图片的链接。在创建电子相册前，要先作一些准备工作，在站点根目录下建立两个文件夹，一个用来存放原始图片，我们假设为“firstpic”，另一个用来存放处理后的图像，假定为“secondpic”。并把原始图片放在firstpic下，原始图片的格式应为GIF或JPEG格式。,2.6 超级链接,1.本地链接 对同一台机器上的不同文件进行的链接称为本地链接。 超级链接是网页中最重要的元素，是Internet的中流砥柱。没有链接，网页之间失去了联系，也就不能称为网。通过链接我们可以从一个网站转到另一个网站，也可从一个页面转到另一个页面，或在同一个页面中移动。链接的形式有很多种，对链接的样式也可进行各种设置，但是，无论它们的动作或样式是怎样的，大多数链接都是创建一点到另一点的路径。网页中链接的路径有3种： 绝对路径（URL）（例如： ） 文档相对路径 （例如：/newchanping.htm） 站点根目录相对路径（例如：/chanping/newchanping.htm）,2.6 超级链接,绝对地址和相对地址 绝对地址：是指能够绝对搜寻某一具体文件的地址；如 ； 如c:mywebindex.htm 等都是绝对地址。 相对地址：相对于当前页面而言，搜寻某一页面所需的路径。如URL为home.htm 时，说明超链接到当前网页所在目录下的一个名为 home.htm的网页文件；若RL为wwwroot/home.htm时，说明超链接到当前网页文件所在目录的下一级目录wwwroot下的名为home.htm的网页文件；若URL为/wwwroot/home.htm的网页文件，说明超链到当前网页文件所在目录同一级的另外一个名为wwwroot目录下的名为homt.htm的网页文件。 提醒：在网站设计中，网站内部的链接和文件调用均要采用相对地址链接，否则当网站发生迁移（网站上传或拷贝到其他磁盘）时，网站内部的链接会出现中断，有些图片文件会无法显示。,2.6 超级链接,其实以上链接都是网页的统一资源定位（URL），只不过后两种路径将URL的通信协议和主机名省略掉了。后两种路径必须有参照物：一种是以文档为参照物，另一种是以站点的根目录为参照物。当目标页面在站点之外，使用绝对路径；在站点内创建的本地链接都是文档相对路径（文档对文档）。站点根目录相对路径则比较少用。,2.6 超级链接,2.URL链接 如果链接的文件在其他服务器上，就要弄清 我们所指向的文件是采用哪一种URL地址。 URL的意思是统一资源定位器，通过它可以 以多种通信协议与外界沟通来存取信息。 URL链接的形式是： 协议名：/主机域名/路径/文件名。 其中协议包括：F ile（本地系统文件 ）、 http(www服务器)、FTP(ftp服务器)、 telnet( 基于telnet的协议)、mailto(电子邮件)、news(usenet新闻组),2.6 超级链接,2.URL链接 例如： telnet:/ mailto:,2.6 超级链接,2.6.1 创建文本链接 2.6.2 创建电子邮件链接 2.6.3 链接到命名锚记 2.6.4 空链接 2.6.5 创建图像链接 2.6.6 图像映射,2.6.1 创建文本链接,大多数Web页面都包含超文本链接，默认情况下，文本链接的地方会出现下划线，而且最开始呈现为蓝色文本，以后，当目标页面被访问过后，访问后的文本链接呈现为紫色。当在浏览器中单击文本链接时，链接暂时会变成红色或其他颜色，表示这是一个可激活的链接。通过在【页面属性】的设置可以改变链接的默认颜色，也可使用层叠样式表（CSS）控制链接的外观。现在我们来介绍文本链接方法。,2.6.1 创建文本链接,1、添加文本链接 创建链接，相当于在文本中插入标签。 创建链接有两种方法，一种是选择法，另一种是指向法。 具体步骤如下： (1) 打开如图2-15所示页面，选定要链接的文本“产品中心”。单击【属性】面板浏览图标，打开【选择文件】对话框,2.6.1 创建文本链接,(2) 选择要链接的文件名，在【URL】的文本框中会自动产生链接路径。选择链接文件相当于链接标签中的href属性，该属性是链接必不可少的。 (3) 【相对于】文本框中的两个选项：【文档】、【站点根目录】。【文档】选项和【站点根目录】选项都是使用相对路径的链接，但两者的参照物不同。 选择【文档】选项，是使用当前文档作为参照物，省略了与当前文档的链接相同的URL。只提供不同的那部分路径。使用文档相对路径时一般有以下几种情况。 要链接的文件与当前文件处于同一文件夹下，则【URL】文本框中只显示链接的文件名。 要链接的文件处在当前文档所在文件夹的子文件夹中时，则【URL】文本框中显示子文件夹名，然后是“/”和链接的文件名。 要链接的文件处在当前文档所在文件夹的父文件夹中时，则【URL】文本框中显示“/”加链接的文件名。,2.6.1 创建文本链接,选择【站点根目录】，则以站点根目录作为参照物。即从站点根文件夹到文档所经过的路径。这种情况一般针对一个使用数台服务器的大型网站，或者一台同时作为数个不同站点主机的服务器。多数情况下，我们选择【文档】选项。,2.6.1 创建文本链接,(4) 【属性】面板中【目标】下拉列表中有4个选项，根椐情况选择一个。如图5-3所示： 【_blank】：表示目标文件在新的浏览器窗口打开。 【_parent】：表示目标文件在上一级浏览器窗口打开。 【_self】：表示目标文件当前浏览器窗口打开。 【_top】：回到最顶端的浏览器窗口打开目标文件。 一般来说，二级子页面我们在新的浏览器窗口打开，但为了避免打开太多的窗口，根椐需要我们也常选择【_self】。该选项相当于链接标签的target属性。最后的代码为,2.6.1 创建文本链接,2、设置链接的状态 文本链接创建后，文本呈蓝色，有下划线，访问过后的链接文本呈紫色，我们可以改变链接的默认状态。,2.6.1 创建文本链接,3、文件下载链接 我们经常在网上下载资料，比如常用软件、小游戏等，这就是文件下载链接的表现形式。文件下载链接和文本链接的操作是一样的，不同之处在于，文件下载链接对应的是压缩文件.zip 、.rar或可执行文件.exe、.com。具体操作如下： 选中文字“资料下载” 在【属性】面板上单击指向图标，拖向被链接的文件“zhiliao.rar”。 保存文档，按F12预览，可查看效果。 注：创建文件下载链接一次只能对应一个文件，若是文件夹或多个文件，则需压缩为一个文件。,2.6.2 创建电子邮件链接,可以用文本或图像来创建电子邮件链接，步骤： 选中文本“联系我们”，单击【常用】工具栏上的电子邮件图标，打开