网页制作教学课件全书电子讲义.ppt

,第,1,章 网页概述,第,1,章 网页概述,主要内容,网页中的基本术语,网页中的基本元素,网页设计方式和网页设计工具,网站设计的一般过程,网页设计的一般原则,网页发布的一般过程,1.1,基本术语,网页与网站,网页,：网页是通过网络浏览器看到的网站页面。网页的本质是一个计算机文件。当浏览器获得网页访问的指令后，即在互联网上查找指定的网页文件，并对网页文件进行解读，然后将网页呈现在用户屏幕上。,网站,：网站是按照一定的规则组织的若干网页的联合体，是进行网页访问的门户，用户通常通过网站访问其中的网页。任何网站都有一个主页，它反映了网站的主题。,1.1,基本术语,域名和,URL,IP,地址,：,Internet,上的每台主机都有一个专门的地址，称为,IP,地址，通过,IP,地址就可以访问到每一台主机。,IP,地址由,4,个数字组成,如：,61.152.234.69,，在浏览器的地址栏输入这个,IP,地址，就可以访问这台主机。,域名,：域名是,IP,地址的形象标识，如,是搜狐网站,WWW,主机的域名，浏览者主要通过域名访问网站。,1.1,基本术语,域名和,URL,URL,：,Uniform Resource Location,，译为,“,统一资源定位器,”,。,URL,的构成如下：,protocol:/machine.name:port/directory/filename,protocol,：访问该资源所采用的协议,madcine.name,：资源主机的,IP,地址,通常使用域名,port,：服务器在该主机所使用的端口号,directory,和,filename,：资源的路径和文件名,1.1,基本术语,WWW,与网页浏览,WWW,:World Wide Web,，译为万维网或环球信息网，也称为,Web,，是一个把信息检索与超文本技术相结合而形成的全球信息系统，它由遍布,Internet,中被称为,WWW,服务器的计算机组成，该服务器除了提供它自身的信息服务之外，还指向存放在其他服务器上的信息。,网页浏览,：通过,WWW,浏览器软件访问网页资源。目前最为流行的,WWW,浏览器为,Microsoft,的,Internet Explorer,和,Netscape,的,Navigator,。,1.1,基本术语,静态网页与动态网页,静态网页,不能实现用户和网站之间的信息交互功能。静态网页可以包含翻转图像、,GIF,动画或,Flash,影片等，具有很强的动感效果。,动态网页,能实现用户和网站之间的信息交互功能。,包括两类：客户端动态网页和服务器端动态网页。,1.1,基本术语,HTML,与脚本语言,HTML,：,HyperTextMark-upLanguage,，超文本标记语言，是,WWW,的描述语言。,脚本语言：,介于,HTML,和编程语言之间的一种语言。脚本语言是实现动态网页编程的基础。,HTML,通常用于格式化和链接文本，而编程语言通常用于向机器发出一系列复杂的指令。脚本语言介于两者之间，但它的函数与编程语言更为相象一些，它与编程语言之间最大的区别是后者的语法和规则更为严格和复杂。,1.2,网页剖析,网页中的基本元素,1,文本,即文字信息，具有多种属性，如字体，字号，颜色，底纹和边框等。,2,图像和动画,图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。,图像格式：,GIF,、,JPEG,、,BMP,、,TIFF,、,TGA,、,RAS,、,EPS,、,PCX,、,PNG,、,PCD,和,WMF,格式等。,动画是运动的图画，一组静态画面的连续播放形成动画。,制作动画的常用软件,：,Fireworks,、,Flash,、,3DS MAX,等,网页中使用最多的动画文件是,GIF,文件。,1.2,网页剖析,网页中的基本元素,3,声音和视频,声音文件格式：,MIDI,、,WAV,、,MP3,和,AIF,等。,视频文件格式：,Realplay,格式,MPEG,AVI,和,DivX,等。,4,超级链接,从网页的热点指向一个目的端的链接。目的端可以是另一个网页，也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。热点通常是文本、图片或图片中的区域，也可以是一些不可见的程序脚本。,1.2,网页剖析,网页中的基本元素,5,表格,在网页中表格用来控制网页中信息的布局方式。,显示表格数据。,6,表单,实现网页与浏览用户的信息交互。如收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登陆站点等。,7,其他常见元素,悬停按钮、,Java,特效、,ActiveX,特效等。,1.2,网页剖析,网页的设计视图和源文件,（,1,）网页的设计视图,网页的原始状态，可视化网页设计的重要过程是在设计视图中进行的，是一种所见即所得的设计，因此设计视图与页面的浏览结果十分接近。,（,2,）源文件,网页包含,HTML,代码的文件，通过对源文件代码的编辑同样能修改网页效果。,1.3,网页设计与发布,网页设计的基本方式,三种方式：,直接编码,利用可视化工具,直接编码和可视化工具结合,1.3,网页设计与发布,网页设计的基本工具,1,网页设计工具,普通的文本编辑软件：用,HTML,语言直接编制,Web,页，如,Windows,如记事本。,可视化网页制作工具：,Dreamweaver,、,FrontPage,等。,2,素材处理工具,常用：,Photoshop,、,Flash,、,Fireworks,、,CorelDraw,、,Cool 3D,、,FreeHand,等。,1.3,网页设计与发布,网站设计的一般过程,1,确定网站主题,2,素材组织整理,3,规划网站,4,选择合适的制作工具,5,制作网页,6,上传测试,7,推广宣传,8,维护管理,1.3,网页设计与发布,网页设计的基本原则,1,浏览者优先,2,重视主页的设计,3,明确的内容分类,4,网页具有互动性,5,合理使用图片,6,色彩搭配要和谐,7,避免滥用技术,8,考虑使用者的技术支持,1.3,网页设计与发布,网页发布的一般过程,1,网页发布的方式,直接拷贝,利用,FTP,工具传输,常用的,FTP,传输软件：,CuteFTP,、,LeechFTP,、,QuickFTP,、,FTP Commander,等。,利用,Frontpage,、,Dreamweaver,的内置上传功能来完成。,1.3,网页设计与发布,网页发布的一般过程,2,发布个人网页的一般过程,选择,ISP,申请主页空间。申请后会得到一个网页地址、,FTP,主机地址、用户名以及密码等资料。,上传网页文件。若使用,FTP,上传,需要在本地机安装一个,FTP,软件。上传文件时，需要提供申请得到一个网页地址、,FTP,主机地址、用户名以及密码等资料。,上传之后，即可通过浏览器访问网页。,1.3,网页设计与发布,网页发布的一般过程,3.CuteFTP,使用简介,CuteFTP,功能：集成文件上传、下载和网页编辑多种功能。,设置站点,启动,CuteFTP,“,文件,/,站点管理器,”,启动,“,站点设置,”,窗口建立并设置站点。,说明：其中的,“,FTP,主机地址,”,、,“,FTP,站点用户名称,”,、,“,FTP,站点密码,”,等信息要与申请主页空间时的相应信息一致。,1.3,网页设计与发布,网页发布的一般过程,建立远程连接,在,“,站点设置,”,窗口中点击,“,连接,”,按钮，或者使用,CuteFTP,主窗口的,“,快速连接,”,功能，即可建立本地机与远程,Web,服务器的连接。,文件上传和下载,文件上传：建立连接后，选中要上传的文件，使用,“,上传,”,命令，即可将本地信息上传到远程主机。,文件下载：建立连接后，选中要下载的文件，使用,“,下载,”,命令，即可将远程主机的信息下载到本地机上。,第,1,章 网页概述,小结,1,网页的本质是一个计算机文件。,2,网页分为静态网页和动态网页两大类。,3,网页的基本元素有文本、图像、超链接、动画、视频、声音、表单等。,4,网页设计制作的基本方式有三种，即手工编码方式、利用可视化工具设计方式、手工编码和可视化工具结合方式。,5,网站设计的一般过程包括确定网站主题、素材组织整理、规划网站、选择制作工具、制作网页、上传测试、推广宣传和维护更新。,6,网页设计的基本原则概括为八项，即浏览者优先、重视主页的设计、明确的内容分类、网页要具有互动性、合理使用图片、色彩搭配要和谐、避免滥用技术、要考虑使用者的技术支持。,7,网页发布有三种方式：即直接拷贝、利用,FTP,工具传输和利用网页设计工具的内置发布功能，而后两种是最常用的发布方式。,第,2,章,HTML,简介,主要内容,HTML,文档的基本结构,标记及属性的概念,常用标记的用法,使用表格和框架进行网页布局的基本方法,2.1 HTML,文档的基本结构,简单的,HTML,文件,我的网页,Hello,！网页设计的学习现在开始啦！,2.1 HTML,文档的基本结构,标记和属性,1,标记,HTML,用于描述功能的标识符称为标记，标记在使用时必须用尖括号,“,”,加以限定，如,。,说明：,HTML,的多数标记都是成对出现的，前面的一个称为开始标记，后面的一个称为结束标记，结束标记需在标识符前使用斜杠,“,/,”,符号。,标记中允许包含其他标记，但标记不能出现交叉。,任何标记的大写和小写形式都是等价的。,有的浏览器对有些标记是不支持的，当浏览器不支持某个标记时，该标记即被忽略。,2.1 HTML,文档的基本结构,标记和属性,2,标记的属性,在标记中使用的参数称为标记的属性。一个标记可以有多个属性，每个属性都有对应的属性值。例如：,其中：,“,align,”,是标记,的属性，,“,center,”,是属性,“,align,”,的值。,2.1 HTML,文档的基本结构,HTML,的结构标记,HTML,文件的基本结构图,：,2.1 HTML,文档的基本结构,标记和属性,1,html,标记,html,标记由,“,”,和,“,”,构成，,“,”,通常位于,HTML,文件的开头，表示,HTML,文档的开始，,“,”,位于文件的结尾，表示,HTML,文档的结束，,HTML,文档的其他内容都限定在,html,标记对中。一个,HTML,文件只有一对,html,标记。,2,head,标记,head,标记由,“,”,和,“,”,构成，位于,HTML,文档的前部。,head,区常用的标记有,title,、,meta,等。,2.1 HTML,文档的基本结构,标记和属性,title,标记,title,标记用于标识网页标题。,格式如下：,字符串,格式中的,“,字符串,”,是网页的标题内容，浏览网页时该内容显示在网页顶部的标题行中。,meta,标记,meta,标记用于描述网页关键字和网页说明、定义网页语言编码、页面刷新设置等，进行网页浏览时，这些标记信息是不可见的。,2.1 HTML,文档的基本结构,标记和属性,meta,标记,描述网页关键字,“,关键字列表,”,中的关键字是网络搜索引擎借以分类的关键词。,例如：,2.1 HTML,文档的基本结构,标记和属性,meta,标记,描述网页说明,“,网页说明信息,”,是一段文本，它将作为搜索引擎对网页的描述信息。,搜索引擎就能够根据这些关键字搜索到相应网页，并显示关于网页的说明信息。,2.1 HTML,文档的基本结构,标记和属性,meta,标记,定义网页语言编码,格式如下：,例如：,浏览器将自动选用,gb2312,编码作为本网页的字符编码。,2.1 HTML,文档的基本结构,标记和属性,meta,标记,页面刷新,格式如下：,其中：,content,属性中的,“,数值,”,代表刷新网页延迟的时间，单位是秒；,“,文件名或网址,”,为刷新时要链接到的文件或网址。当缺少,URL,项时，浏览器将刷新当前网页。,2.1 HTML,文档的基本结构,标记和属性,meta,标记,页面刷新举例：,我的网页,Hello,！网页设计的学习现在开始啦！,2.1 HTML,文档的基本结构,标记和属性,3.body,标记,body,标记是网页的主体标记，由,和,构成，网页中的可见对象通常在,body,区内进行描述。,body,区常用的标记有排版标记、图像标记、超链接标记、表格标记等。,2.1 HTML,文档的基本结构,标记和属性,body,标记的常用属性,bgcolor,属性,用于定义网页的背景颜色。,用法一：,bgcolor=#RGB,颜色编码,RGB,颜色编码：一组六位的十六进制数值，第,1,、,2,位表示红色值（,R,），第,3,、,4,位表示绿色值（,G,），第,5,、,6,位表示蓝色值（,B,）。,例如：,2.1 HTML,文档的基本结构,标记和属性,bgcolor,属性,用法二：,bgcolor=,颜色标识符,“,颜色标识符,”,在,HTML,的预定义颜色符中取值。,常用的预定义颜色符：,black,、,olive,、,teal,、,red,、,blue,、,maroon,、,navy,、,gray,、,lime,、,fuchsia,、,white,、,green,、,purple,、,sliver,、,yellow,、,aqua,例如：,2.1 HTML,文档的基本结构,标记和属性,其他常用属性,属性名,属性用法,属性功能,background,background=,图像,url,设定图像为网页背景,text,text=,颜色,设定网页文本的默认颜色,link,link=,颜色,链接文字颜色,alink,alink=,颜色,活动链接文字颜色,vlink,vlink=,颜色,已访问链接文字颜色,leftmargin,Leftmargin=,像素值,页面左侧的留白距离,topmargin,topmargin=,像素值,页面顶部的留白距离,2.2,排版标记,标题标记,标题标记用于表示文本的各种题目，标题号越小，字号越大。一般格式：,标题内容,其中：,hn,分别表示,h1,、,h2,、,、,h6,。,align,是标题标记的属性，属性值为标题的对齐方式，具体为,left,、,center,和,right,，分别使标题居左、居中和居右。,2.2,排版标记,段落标记,段落标记,p,用于定义一个段落，并对段落的属性进行说明。,格式：,段落文本,align,属性的常用值：,left,，,center,和,right,，分别规定段落在窗口中的水平位置为居左、居中和居右。,说明：,p,标记中的,标记可以省略，浏览器在遇到下一个,标记时自动开始一个新段落。,通常一般文档中使用的分段标识在,HTML,中都被忽略掉，只有遇到,标记时才会产生新段落。,段落中不管有多少个连续空格，都将被处理为一个空格。,2.2,排版标记,换行标记,换行标记,产生换行。,一般格式：,仅产生一个新行，并不产生新段落。若在一个段落中使用该标记，产生的新行仍然具有原段落的属性。,2.2,排版标记,文本标记,文本标记,font,用于控制文字的显示形式，常用的属性有三个，即,size,、,face,、,color,，分别定义文字的大小、字形、颜色。,1,设定文字大小,设定文字大小由,size,属性实现。,绝对形式：,文字,字号取值,1-7,，数值越大字越大，,HTML,的默认字号为,3,号字。,2.2,排版标记,文本标记,1,设定文字大小,相对形式：,文字,相对形式中字号的实际大小有两种情况：,在没有特别设定基准字号的情况下，字号以默认字号,3,为基准变化。,当使用,标记设定基准字号后，字号将以,n,为基准变化。,2.2,排版标记,文本标记,2,设定文字字体,设定文字字体由,face,属性实现，格式如下：,文字,例如：,石油是一种不可再生能源,说明：,只有当前系统中能够使用的字体，相应设定才是有效的。,2.2,排版标记,文本标记,3,设定文字颜色,设定文字的显示颜色由,color,属性实现。,格式一：,文字,格式二：,文字,示例：,用法一：,网页设计,用法二：,网页设计,2.2,排版标记,文本标记,4,同时使用,font,标记的多个属性,font,标记示例,同一个世界，同一个梦想！,同一个世界，同一个梦想！,同一个世界，同一个梦想！,2.2,排版标记,文字风格标记,标记名称,标记功能,标记使用格式,b,文字加粗,文字,i,文字倾斜,文字,u,文字加下划线,文字,strike,文字加删除线,文字,sup,文字为上标,文字,sub,文字为下标,文字,2.3,多媒体标记,图像标记,图像标记,img,用于在网页中插入图像。,一般格式：,属性名,属性用法,功能,src,src=url,指定插入图像的,url,align,align=top,图像两侧的文字与图像顶部对齐,align=center,图像两侧的文字与图像中部对齐,align=bottom,图像两侧的文字与图像底部对齐,align=left,图像位置居左,align=right,图像位置居右,title,title=,图像说明,当鼠标移到图片上是显示图片说明信息。,alt,alt=,图像替代文字,在浏览器还没有装入图像的时候，先显示有关此图像的信息,height,height=,图像高度值,设置图像高度（像素）,width,width=,图像宽度值,设置图像宽度（像素）,border,border=,图像边框宽度值,设置图像边框宽度（像素）,2.3,多媒体标记,背景音乐标记,背景音乐标记,bgsound,用于插入背景音乐。,一般格式：,属性名,属性用法,功能,src,src=url,指定插入音乐的,url,autostart,autostart=true|false,autostart,的取值只能是,true,或,false,，取,true,时自动播放音乐。,loop,loop=n|infinite,n,是整数值，,loop,取值为,n,时，连续播放,n,次，否则循环播放。,2.4,连接标记,超链接标记,HTML,的,超链接由标记,a,实现。,网页常用的链接形式有文件链接、锚点链接、,E_mail,链接等。,文件链接是指向一个文件目标，锚点链接是指向网页中的某一部分，,E_mail,链接是通过邮件服务程序向指定信箱发送电子邮件。,超链接标记,a,的常用属性是,href,属性和,name,属性。,2.4,连接标记,超链接标记,1,建立文件链接,一般格式,：,字符串,href,属性中的,“,url,”,是被指向的目标，,“,字符串,”,在,html,文件中是链接标识，它以超链接的形式呈现在网页中。,链接到网页示例：,搜狐首页,链接到其他文件示例：,就业信息表,2.4,连接标记,超链接标记,2,锚点链接,锚点链接是将链接指向网页的某个具体位置，该位置可以在当前网页中，也可以在其他网页中。锚点链接的目的主要是实现较长网页文档的快速浏览。锚点链接需要使用链接标记,a,的,name,属性和,href,属性。,name,属性用于在链接的目标位置设立锚点，,href,属性用于建立到锚点的链接，并设立链接标识，当用鼠标点击该链接标识后即跳转到网页的指定位置。,2.4,连接标记,超链接标记,设立锚点,设立锚点标记的格式：,锚点提示信息,建立页内锚点链接,一般格式：,链接标识,说明：,href,属性的,“,链接字符串,”,与,name,属性的,“,链接字符串,”,必须完全相同，否则链接将不能实现。,“,链接标识,”,可以是任何信息，在网页中以超链接的形式显示。,“,链接标识,”,标记可以出现多次，既可以位于锚点标记之前，也可以位于锚点标记之后。,建立到其他网页的锚点链接,一般格式如下：,链接标识,格式中的,“,url,”,是链接到的网页文件的,url,，若被链接的网页与当前网页在相同位置，则为网页文件的文件名。在这里使用的文件名必须是文件全名。,2.4,连接标记,超链接标记,3,链接到,E_mail,一般格式：,链接标识符,其中：,“,E_mail,地址,”,是要链接到的,E_mail,的实际地址。,只有客户机已经安装了默认的电子邮件服务程序时，链接到,E_mail,功能才能启用。,用法示例：,请给我写信,2.4,连接标记,超链接标记,4,用图像建立链接,一般用法：,格式中,“,”,将插入一个图像，该图像将作为超链接标记,a,的链接标志。,示例：,2.4,连接标记,link,标记,一般格式,：,主要功能：建立与外部文档的连接，建立的连接在,HTML,内部发生作用，网页的浏览用户并不会感觉到这种连接的存在。,link,标记最主要的作用是建立与外部样式表的连接。,常用的属性,：,rel,属性、,href,属性、,type,属性,link,标记是,head,区的一个连接标记，与超链接标记,a,具有完全不同的功能。,2.4,连接标记,link,标记,1,rel,属性,定义连接的文件和,HTML,文档之间的关系。,用法：,rel=atylesheet|alternate atylesheet,当,rel,取值为,“,atylesheet,”,时，指定一个固定或首选的样式；当取值为,“,alternate stylesheet,”,时定义一个交互样式。固定样式在样式表激活时总被应用。,2,href,属性,指定目标文档的位置。,用法如下：,href=url,3,type,属性,指定媒体类型，如,“,text/css,”,是一个层叠样式表。,link,标记的用法示例：,2.5,表格标记,表格的基本标记,1,table,标记,功能：创建表。,属性,rules,属性：控制表格的边框显示方式。,rules=none,不加内部边框,rules=rows,只显示水平方向的边框,rules=cols,只显示垂直方向上的边框,rules=all,显示所有方向上的边框,width,属性：控制表格的宽度。,width=,像素值,|,百分比,2.5,表格标记,表格的基本标记,2,tr,标记,tr,标记用于定义表行，每一个,tr,标记对定义一个表行。,tr,标记只能在,与,之间使用，否则无效。,3,td,标记,td,标记用于定义每个表行的单元格，每一个,td,标记对定义一个单元格。,td,标记只能在,与,之间使用，否则无效。,2.5,表格标记,表格标记的主要属性,属性名称,属性功能,border=n,设置表格或单元格的边框。,n=0,时无边框；,n0,时值越大边框越粗,bordercolor=.,设置表格或单元格的边框颜色,bgcolor=.,设置表格或单元格的背景颜色,bordercolorlight=.,设置边框明亮部分的颜色（当,border,值大于,1,才有效）,bordercolordark=.,设置边框昏暗部分的颜色,(,当,border,值大于,1,才有效）,cellspacing=.,设置单元格之间的间隔大小,cellpadding=.,设置单元格内容与单元格边框的间隔大小,width=n,设置表格或单元格的宽度,height=n,设置单元格高度,align=.,设置单元格内容的水平对齐方式,(left,、,center,、,right),valign=.,设置单元格内容垂直对齐方式,2.6,框架标记,框架是进行网页布局的常用技术，它将浏览器的窗口分成多个区域，每个区有各自的,HTML,文件，即装载各自的网页，从而实现在一个浏览器窗口中同时浏览多个网页。也可以在框架区域中设定超链接，通过为超链接指定目标框架，建立框架内容之间的联系，实现页面的导航和页面间的交互操作。,与表格类似，框架可以使设计者以行和列的方式组织页面信息。但与表格不同的是，使用框架的超链接，可以改变自身或其他框架中的内容。,2.6,框架标记,常用的框架标记,1,frameset,标记,frameset,标记用于创建框架。,一般用法：,主要属性：,cols,属性和,rows,属性,frameborder,属性,border,属性,bordercolor,属性,framespacing,属性,2.6,框架标记,常用的框架标记,cols,属性和,rows,属性,cols,和,rows,是决定页面如何分割的两个属性。左右分割窗口用,cols,属性，上下分割窗口用,rows,属性，分割生成的字窗口的数目，由各属性值的个数确定。属性的取值主要有如下两种形式：,百分比和,“,*,”,的组合形式。如：,rows=,“,30%,%40,*,”,，表示垂直方向分割成三个子窗口，各子窗口的高度占大窗口高度的的百分比依次是,30%,、,40%,和,30%,。其中,“,*,”,表示剩余部分，即,“,*,”,对应的子窗口高度为剩余的高度。,像素值和,“,*,”,的组合形式。如：,rols=200,100,*,，表示水平方向分割成三个子窗口，前两个子窗口的宽度分别为,200,像素和,100,像素，第三个字窗口的宽度为大窗口剩余的宽度。,2.6,框架标记,常用的框架标记,frameborder,属性,frameborder,属性指定各子窗口是否加边框。用法如下：,frameborder=yes|no,取值,“,yes,”,时加边框，取值,“,no,”,时不加边框。,border,属性,border,属性定义子窗口边框的宽度，单位为像素值。,bordercolor,属性,bordercolor,属性定义边框的颜色，用法如下：,bordercolor=#RGB,颜色码,|,预定义标识符,framespacing,属性,framespacing,属性用于设定各分窗口之间的间隔大小，单位是像素值，默认值是,0,。,2.6,框架标记,常用的框架标记,2,frame,标记,frame,标记用以定义各子窗口的属性，在,frameset,标记区内使用。,一般用法：,主要属性：,align,属性 设定子窗口的位置,用法：,align=left|center|right|top|bottom,name,属性 指定子窗口的名称,用法：,src,属性用于指定分窗口所对应的,HTML,页面地址。,用法：,src=url,noresize,属性 定义子窗口的可调性。,frameborder,属性和,bordercolor,属性,设定用,标记的子窗口有无边框和边框颜色。,2.6,框架标记,在框架中显示网页,1,在框架中打开独立的网页,在定义该窗口的,frame,标记中使用,src,属性即可。,2,在框架中打开有链接关系的网页,为超链接的目标框架指定一个名字。,指定超链接的目标框架。,要指定超链接的目标框架，需要在定义链接时使用链接标记,a,的,target,属性。用法：,链接标识,或者：,链接标识,第,2,章,HTML,简介,小结,1,HTML,文档是由标记和其他文本元素构成的文本文件，标记的作用是告诉浏览器如何呈现被标记的有关信息。,2,HTML,文档一般分为,head,区和,body,区两部分，主要的结构标记有,html,、,head,和,body,。,head,区的标记和,body,区的标记具有不同的网页功能。,3,排版标记主要用于网页主体内容的排版描述，主要内容包括标题定义、段落及换行控制、文本格式及文字风格控制等。,4,多媒体元素是网页的重要构成内容，包括图形、声音、视频等。,5,网页设计中的连接分为两大类：一类为页面可见的超链接，由超链接标记,a,实现；另一类是由,link,标记实现的连接，它与超链接完全不同。,6,表格和框架是页面布局的常用技术。利用表格可以实现页面元素定位，进行排版布局；框架能将浏览器的窗口分成多个子窗口，每个子窗口装载各自的网页，使得一个浏览器窗口能同时浏览多个网页。,第,3,章,Dreamweaver,网页设计基础,主要内容,Dreamweaver 8.0,的功能特点及工作界面,定义和管理本地站点,创建和管理,HTML,文档的基本方法,插入和编辑文本、图像、媒体等页面元素,页面属性设置,页面中常用的超级链接,3.1 Dreamweaver 8.0,简介,功能概述,Macromedia Dreamweaver 8.0,是构建网站和应用程序的专业化产品。它提供可视布局工具、应用程序开发功能、代码编辑支持的强大组合，使各个技术级别的开发者和设计者都能够快速创建可视化、吸引人的基于标准的站点和应用程序。从基于,CSS,设计的领先支持到手工编写的代码功能，,Dreamweaver,提供在集成的、无缝的环境中所需的专业工具。,Dreamweaver,支持所有主要服务器技术，如,ColdFusion,、,PHP,、,ASP,、,ASP.NET,以及,JSP,等，开发者可以选择将,Dreamweaver,与服务器技术结合使用，构建强大的,Internet,应用程序，该应用程序将用户连接到数据,库、实时数据服务和原有系统。,3.1 Dreamweaver 8.0,简介,工作界面,1,启动界面,2,工作区,文档窗口,状态栏,插入栏,属性检查器,面板组,3,首选参数的设置,3.2,站点管理,Dreamweaver,站点概述,Web 站点,是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档。在,Dreamweaver,中，,“,站点,”,一词既表示,Web,站点，又表示属于,Web,站点的文档的本地存储位置。在开始构建,Web,站点之前，必须要建立站点文档的本地存储位置。,Dreamweaver,站点最多由三部分组成，即,本地文件夹、远程文件夹和动态页文件夹,，具体取决于所用的计算机环境和所开发的,Web,站点的类型。,3.2,站点管理,定义和管理本地站点,定义本地站点的一般步骤,为要定义的本地站点指定一个站点名，该站点名允许使用中文名称。,在本地磁盘建立存储站点文件的根文件夹，并在该文件夹中建立子文件夹，用于存放各类不同的文件。子文件夹的个数没有限制，但必须指定一个专门用于存储图像文件的文件夹。在命名文件夹时，不能使用中文名称。,使用,Dreamweaver,的站点管理功能定义站点。,Dreamweaver 8.0,菜单栏的,“,站点,”,命令和文件面板的,“,站点,”,命令都可以定义本地站点。,3.2,站点管理,定义和管理本地站点,管理本地站点,使用,“,站点,/,管理站点,”,功能，将实现本地站点的管理。,新建站点,编辑站点,复制站点,删除站点,导入和导出站点,3.3,创建和管理文档,创建,HTML,文档,1利用菜单栏的,“,文件,/,新建,”,命令创建文档,步骤：,打开,“,新建文档,”,窗口打开,“,文档编辑,”,窗口编辑文档指定站点和文件名保存文档。,2,利用文件面板创建文档,步骤：,打开文件面板选定站点命名文件编辑文档保存文档,3.3,创建和管理文档,创建,HTML,文档,关于文档保存的说明,文档的保存文件名在,“,文件名,”,对话框中指定，文档的默认文件名为,Untitled-x.html,，其中,“,x,”,是一个整数值，如,1,、,2,、,3,等。,HTML,文档的默认扩展名，通常为,“,html,”,或,“,htm,”,，也可以使其他形式的扩展名，具体由,Dreamweave,的首选参数的设定值确定。,不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。,3.3,创建和管理文档,创建,HTML,文档,关于文档默认扩展名的说明,Dreamweaver,允许定义创建的,HTML,文档的默认文件扩展名。步骤如下：,选择,“,编辑,/,首选参数,”,，打开,“,首选参数,”,对话框。,在左侧的类别列表中单击,“,新建文档,”,，打开新建文档对话框。,在,“,默认文档类型,”,中选择,“,HTML,”,。,在,“,默认扩展名,”,文本框中，指定,Dreamweaver,中新建,HTML,档的扩展名。在重新设置以前，该扩展名即为,Dreamweaver,默认的,HTML,档的扩展名。,3.3,创建和管理文档,文档的打开和预览,利用,“,文件,”,菜单打开文档,选择,“,文件/打开,”,菜单，打开,“,打开,”,对话框。,设定要打开的文件类型，浏览并选择要打开的文件，然后用鼠标左键双击该文件，或选中文件后点击,“,打开,”,按钮，所选文档将在文档编辑窗口中打开。,利用文件面板打开文档,打开文件面板。,在文件面板中浏览选定文件，用鼠标左键双击选中的文件，即在文档编辑窗口中将选中的文档打开。,3.3,创建和管理文档,文档的打开和预览,Dreamweaver,预览文档的常用方法,文档在打开状态下，按,F12,功能键或使用文档工具中的预览按钮预览网页。,在文件面板中直接预览文档。,过程：,在文件面板中选中文档，用鼠标右键单击弹出快捷菜单，选用,“,在浏览器中预览,”,项，再确定使用的浏览器，即预览网页。,或：,在文件面板中选定文件后即按,F12,功能键。,3.3,创建和管理文档,文件面板的编辑功能,在文件面板中选中文件（或文件夹），然后单击鼠标右键，在弹出的快捷菜单中选择,“,编辑,”,功能。,在,“,编辑,”,命令中，选择相应的文件操作功能，实现指定的文件操作。,说明：,“,编辑,”,命令对站点根文件夹和逻辑磁盘无效。,包含链接的文件在站点内移动或删除时，文件面板将进行链接跟踪，并对文件中的链接进行更新。,3.4,插入和编辑网页元素,插入和编辑文本,1,插入文本,常用的两种方法：,直接在,“,文档,”,窗口中键入文本。,从其他应用程序中拷贝文本。,2,插入空格和段落,插入空格,HTML,只允许字符之间包含一个空格，若要在文档中插入连续多个空格，需要按如下方法操作：,在全角输入法状态下直接利用空格键输入空格。,选择,“,编辑,/,首选参数,”,菜单，在,“,常规,”,类别中选中,“,允许多个连续的空格,”,。,插入段落,直接用回车 键添加一个新的段落。,3.4,插入和编辑网页元素,插入和编辑文本,3,文本格式的编辑,文本的格式包括段落格式、字体、字号、,格式（如粗体、斜体、代码、下划线）、颜色、对齐方式、缩进等。,文本格式的编辑方法：,使用文本属性检查器,使用,“,文本,”,菜单,3.3,创建和管理文档,插入和编辑文本,4,编辑字体列表,使用,“,编辑字体列表,”,命令可以设置出现在属性检查器和,“,文本/字体,”,子菜单中的字体组合。,向,“,字体列表,”,添加字体,选择,“,文本/字体/编辑字体列表,”,菜单，弹出,“,编辑字体列表,”,对话框。,在,“,可用字体,”,列表中选中要添加到,“,字体列表,”,中的字体。,按箭头按钮,“,”,，将选中字体置于,“,选择的字体,”,框中。,按窗口左上方的,“,+,”,按钮，所选字体即进入,“,字体列表,”,中。,3.3,创建和管理文档,插入和编辑文本,4,编辑字体列表,从,“,字体列表,”,中移除字体,在,“,字体列表,”,中选中要移除的字体（或组合），按,“,-,”,按钮，所选字体即从,“,字体列表,”,中移除。,说明：,添加或移除操作完成后，只有按下,“,确定,”,按钮，对字体列表所作的编辑才会生效。,在文本属性检查器中，通过,“,字体,”,列表窗口，也可以启动,“,编辑字体列表,”,对话框。,3.3,创建和管理文档,插入和编辑水平线,1插入水平线,在,“,文档,”,窗口中，将插入点放在要插入水平线的位置。,执行下列操作之一：,选择,“,插入/HTML/水平线,”,。,在,“,插入,”,栏的,“,HTML,”,类别中，单击,“,水平线,”,按钮。,2修改水平线,在文档窗口中，选择水平线。,选择,“,窗口/属性,”,打开属性检查器。,在属性检查器中根据需要对属性进行修改。,3.3,创建和管理文档,插入和编辑图像,1插入图像,将插入点放置在要显示图像的位置，然后执行以下操作之一：,在,“,插入栏,”,的,“,常用,”,类别中，单击,“,图像,”,图标,选择,“,插入/图像,”,菜单,在,“,选择图像源文件,”,对话框中执行下列操作之一：,选择,“,文件系统,”,以选择一个图形文件。,选择,“,数据源,”,以选择一个动态图像源文件。,浏览并选择要插入的图像源文件。,使用属性检查器