信息技术第2章-网页制作基础.ppt

,单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第,2,2,Web,万维网,Web(World Wide Web),就是万维网，也被称为,WWW,。是因特网上运行的分布式信息系统。,2,3,网站,在服务器上有多个主题相关的网页，这些网页按一定的组织结构、以超链接方式连接在一起，形成一个整体，这就是网站。,主页,主页是获取该网站的信息的起点。主页中含有一些超链接，指向相关信息的网页或其它网站的主页。主页通常以,index.html,或,default.html,为名,4,本地站点和远端站点,存储在本地计算机上的站点是本地站点。,存储在服务器上的站点称为远端站点。,4,6,规划站点,(1),确定站点的主题和风格，明确建立站点的目的。,(2),根据确立的主题，收集素材。,(3),明确各部分的内容，规划出合理的站点结构。,(4),根据主题，设计出与主题相匹配的网页外观。,规划站点结构,7,8,规划个人站点,主页,Index.htm,我的文章,我的绘画,我的爱好,10,3,、创建和编辑网页,使用网页制作工具创建和编辑规划的各个网页,4,、将本站点的所有文档发布到服务器上,使用文件传输工具将创建的站点传送到服务器上,10,11,Dreamweaver,简介,Dreamweaver,是美国,MACROMEDIA,公司开发的集网页制作和管理网站于一身的,所见即所得,网页编辑器。,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。,文本的编辑,输入文本,从外部导入文本,创建列表,插入特殊符号,插入水平线,插入注释,13,图像应用,插入图像,插入普通图像,插入图像占位符,创建鼠标经过图像,编辑图像,15,多媒体的应用,插入FLASH动画,插入FLASH文本,插入FLASH按钮,16,18,1.,什么是超级链接？,超级链接可以把制作好的网页链接起来，在网页中实现跳转。是源端点到目标端点的一种跳转。,超级链接由两部分组成：链接载体（源端点）和链接目标（目标端点）。,目标,.,载体,链接目标,链接载体,19,链接载体,文本,图像、图像热区、悬停按钮,链接目标,(,任意网络资源,),页面,网站,Email,锚点,(,页面中的某个位置,),文件,(,图像,、,声音、文档,),19,20,2,.,链接的类型,内部链接,：同一网站内网页之间的链接。,外部链接,：不同网站网页之间的链接。,锚点链接,：同一网页或不同网页的指定位置的链接。,E-mail,链接,：可以发送电子邮件的链接。,20,21,名词解释,URL:,统一资源定位符（,URL,，,英语,Uniform Resource Locator,的缩写）是因特网上标准的资源的地址。就是网址的意思,资源的地址分为,绝对地址,和,相对地址,22,绝对地址：,在创建链接时，绝对地址需要提供完整的,URL,链接，包括相应的协义，如,HTTP,FTP,等等，该方法常用于引用另一网络服务器的链接。用于建立,外部链接,。,URL,标准格式,：,:/,如：,.,24,站点根目录相对路径,从站点的根目录开始描述资源路径,文档相对路径,从当前网页所在文件夹开始描述资源路径,描述路径方法：,（,1,）若要链接到下一目录，要输入文件夹名跟,/,，如,web/index.html,（,2,）若要链接到上一目录，需要先输入,./,，后跟目录名文件名,25,注意：,不管链接目标是什么，链接域中绝对不能出现,中文,！,26,3.,创建一般链接,链接站点内网页,链接外部网站,E_mail,链接,锚链接,26,以文本为载体,28,制作图像地图链接,利用,图像地图,可以制作出单击一幅图片中不同位置可以链接到不同的网页的效果。,通过,热点,可以实现这样的功能,热点,是图像地图上一个封闭的区域，不同的热点指向不同的超级链接。,表格的应用,创建表格,表格属性设置,表格的基本操作,选取表格、选取行或列、插入行或列、删除行或列、调整表格大小、嵌套表格,单元格的基本操作,选取单元格、拆分单元格、合并单元格,29,32,横幅区,导航区,正文区,页面布局,Dreamweaver,提供了多种版面布局的方法：,表格式页面布局,使用布局表格和布局单元格将网页划分成多个区域进行设计,框架式页面布局,可将多个网页显示在同一网页面面中,层,一种新的网页元素定位技术，利用层可以将网页元素放置在页面的任何地方。,33,表格式页面布局,利用布局表格和布局单元格将网页页面划分成多个区域进行设计。,布局模式,是一种特殊的表格模式，与标准表格的区别：可以在页面上绘制任意数目和大小的,布局表格,，在布局表格的任意位置可以绘制任意数量和大小的,布局单元格,。,34,35,框架式布面布局,框架与框架集,创建框架,保存框架式网页,设置框架属性,框架中的链接,35,36,利用框架可将浏览器窗口分成几个部分，在每一部分中可以独立显示一个网页。这些网页作为浏览器窗口的部分内容，共同组成一个完整的页面，由框架集进行定义。,框架集：,一个,HTML,文件，定义一级框架的布局和属性，包括框架的数目、框架的大小和位置，每个框架中初始显示的网页等。,常用于具有导航作用的布局设计。,37,1.,框架与框架集,单个框架,框架集,单个框架,单个框架,38,2.,创建框架,创建框架是从一个正常网页开始的。首先打开这个网页，然后：,选择对象面板上的,“,框架,”,图标，再选择一种框架集类型。,或者按住,Alt,键，拖拽任一条框架边框，可垂直或水平分割文档（或已有的框架）。,39,3.,选择、改变、删除框架,选择,“,窗口,框架,”,命令，打开框架面板。,单击某个框架，即选择该框架。,单击框架集可选中整个框架。,拖拽框架边框可改变框架大小。,39,40,4.,保存框架文件,保存框架所有文件：选择,文件,保存所有框架,。先保存框架集（框架）文件，接着依次保存框架页。,保存框架集文件：先选择,框架集,，再选择,文件,框架,命令。,保存框架文件：先选择,框架,，然后选择,文件,框架页,。,40,41,5.,设置框架属性,选中框架，在属性面板上设置框架属性：,框架名称,源文件,空白边距,滚动条,是否有边框,.,42,6.,在框架中使用链接,在框架中建立超级链接时，一定要设置链接的,Target,属性，为链接的目标文档指定显示窗口。,链接目标较远（其他网站）时，一般放在新窗口。,应时）或全屏幕显示（页面较大时）。用导航条链接时，一般将目标网页放在另一个框架中显示（页面较小）,42,43,7.,为链接目标指定显示窗口,Target,选项：,_blank,放在新窗口中。,_parent,放到父框架集或包含该链接的框架窗口。,_self,放在相同窗口中（默认窗口无须指定）。,_top,放到整个浏览器窗口并删除所有框架。,_mainFrame,放到名为,mainFrame,的框架中。,_leftFrame,放到名为,leftFrame,的框架中。,44,44,Top Frame,Left,Frame,Main Frame,Top Frame,Left,Frame,Main Frame,Top Frame,Left,Frame,Main Frame,框架式网页,Target=“,Main Frame,”,Target=“,Left Frame,”,45,层布局,层是一个新的网页元素定位技术，它可以包含文本，图像，表格等大部分元素，甚至层里可以包含其它层。,45,46,行为与时间轴,行为,是由,事件,和事件触发的,动作,组成的。,与行为相关的有三,个,重要的部分：,对象,事件,动作,46,47,对象是什么？,对象是产生行为的,元素，很多网页元素都可以成为对象，如图片、文字等。,47,48,什么是事件？,事件：访问者在浏览器上执行的某种操作。,事件,是触发动态效果的原因，它可以附加到各种页面元素上，,或,HTML,标记中。,一个事件总是针对页面元素或标记而言的，例如：与鼠标有关的三个最常见的事件,(onMouseOver,、,onMouseOut,、,onClick),。,不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。,49,常见事件,载入网页,单击鼠标,鼠标移入,鼠标移出,49,50,什么是动作？,动作通常是一段JaveScript代码，,这些代码执行特定的任务。,如：,图片翻转、打开浏览器、播放声音,。,使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必自己编写。,50,51,事件与动作,将,事件,和,动作,组合起来就构成了,行为,，例如，将,onClick,行为事件与一段,JaveScript,代码相关联，单击鼠标时就可以执行相应的,JaveScript,代码（动作）。,一个事件可以同多个动作相关联（,1,：,n,），即发生事件时可以执行多个动作。为了实现需要的效果，还可以指定和修改动作发生的顺序,。,51,52,一个典型的行为,将鼠标移到一幅,图像,上,，,产生了一个,事件,，如果,网页上的元素发生变化,，就导致发生了一个,动作,。,52,53,Dreamweaver,主要事件,鼠标事件,onClick:,单击选定元素触发该事件,onDblClick:,双击鼠标,onMouseMove:,当鼠标指针停留在对象边界内时触发该事件,onMouseOut:,当鼠标指针离开对象边界时触发该事件,onMouseOver:,当鼠标指标从指定对象之外移动到指定对象上时触发该事件,onMouseUp:,当按下鼠标被释放时触发该事件。,53,54,Dreamweaver,主要事件,键盘事件：,onKeyPress:,按下并释放键时触发该事件,onKeyDown:,按下任意键时触发该事件,页面事件,onLoad:,当图片或页面完成载入后触发该事件,onUnload:,离开该页面时触发该事件,onError:,页面或图片时，当浏览器发生错误 时触发该事件。,onMove,：移动窗口或框架时触发该事件,onResize:,调整浏览器窗口或框架尺寸时触发该事件,onScroll:,拖动滚动条上下移动浏览器窗口时触发该事件。,54,55,Dreamweaver,主要事件,表单事件：,onChange:,改变了页面上的值或文本的值后单击页面其他位置时触发该事件。,onFouse:,交互的焦点移到指定元素上时触发该事件。,onBlur:,交互的焦点离开指定元素时触发该事件,onSelect:,在文本域中选定文本时触发该事件。,onSubmit:,确认表单时触发该事件,onReset:,当表单被复位到其默认值时触发该事件。,55,56,3.,行为介绍,Dreamweaver,中内置了许多行为，每一种行为都可以实现一个动态效果，或用户与网页的交互行为。,Dreamweaver,甚至把一些常用的行为变成了标准面板上的对象，如：图片翻转,(,轮替图像,),、制作导航条等等。,57,4.,应用行为,在,Dreamwaever,中，对行为的添加和控制主要通过,行为面板,来实现。,选择,“,窗口,行为,”,命令，打开,Behaviors,面板。,57,58,创建行为,选择对象,添加动作,调整事件,58,59,典型的行为：,播放声音,隐藏,/,显示层,设置状态行文本,其他行为,59,