Dreamweaver教案_第1页
Dreamweaver教案_第2页
Dreamweaver教案_第3页
Dreamweaver教案_第4页
Dreamweaver教案_第5页
已阅读5页,还剩25页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

Dreamweaver教案 方远电脑教育xx网页教案之Dreamweaver4.0 一、Dreamweaver准备知识 21、网页名词释意 22、网站制作企划 23、申请网页空间 34、设置网站 35、设置首页4 二、录入文字与文字的格式化 51、录入文字 52、文字的基本属性 63、使用水平分隔线 64、html文字样式6 三、网页图象的处理 71、网页图象须知 72、置入与图象 73、设置网页底图 84、置入交换式图象(Rollover Image) 85、置入导航栏(Navigation Bar)8 四、网页排版技术 91、表格(Table) 92、配置式表格 103、层(Layer) 114、框架(Frame)12 五、网页超链接 131、网页链接13 六、表单(Form) 141、表单的处理流程 142、调用表单组件 143、插入表单域 144、插入单/复选按钮 145、下拉式选单 146、跳转链接选单 147、上传文件栏位 148、表单传送按钮 149、图象按钮14 七、Library&Template面板 141、模板(Template) 142、库(Library)15 八、完善个人网站建设15机密15第1页方远电脑教育xx网页教案之Dreamweaver4.0 一、Dreamweaver准备知识 1、网页名词释意准备充分的网页绝对是学习网页设计时最正确的第一步,特别是面对一箩筐网页专用而又不知所云的特殊英文名词,常常使我们在学习时很容易陷入一种迷惘、恐惧与挫折中!-是World WideWeb的缩写,可以翻译为“全球信息网”,是一个在Inter支持之上的一种超大型的数据传输协议,我们可以将其视为Inter的操作系统,通过它我们可以传递各式各样的信息。 Web Site-网站,以平面设计的角度来看,就象是一本杂志,有封面和一页页丰富的内容,所不同者在于两者的载体不一样。 简单说,一群具有相同属性及共同目的的网页,并以链接(Link)的方式相串联的网页,就是我们所谓的网站!Web Server-网站服务器,就是存放网站的地方,通常它是一部通过ISDN直接链接到Inter的电脑,而我们所设计完成的任何网页均会上传(Upload)存放在Server端的电脑上,这就是远程网站所在的地方。 Remote Site-远程站点,也就是Server端上的网站,当网络观众浏览我们的网站时,我们都不希望他们和我们的电脑直接接触,事实上观众看到的是由我们的电脑上本地网站所复制到Server端上的网站,即远程网站。 Local Site-本地站点,就是在我们目前所设计制作的网站,我们必须先在自己的电脑中完成网站的设计,并将其所含网页通过Modem上传(Upload)到Server端的远程网站上。 2、网站制作企划学习网站制最快的方法就是真正去做!我的意思是希望大家可以真的来筹划一个专属于自己的网站。 既然要来制作一个网站,那麽该做什麽内容?请从以下方向进行思考描述网站目标这是进行网站企划时第一件要紧的事情!例如,一家介绍产品的网站与一家贩卖商品的网站,在风格、外观与技术上可是完全不同的。 到底打算作出一个什麽性质?有何用途?什麽风格的网站呢?如果可能的话,应该先给网站一个名称,然后用一百字以内的文本简要地描述网站的目标!(例)指定网站浏览观众以下是几个我们确定网页浏览观众时主要考虑的一些焦点网页观众使用的操作平台-不同的计算机操作系统在浏览网页时会有一些差异;观众的上网方式-链接速度的快慢让我们必须决定制作网页时可以容忍的文件大小(回忆前述所讲制作网页应该遵循的原则!)观众上网所使用的浏览器-一个极度头疼的问题!目前市场上虽然只存在IE和Netscape两大主流浏览器,但由于竞争导致他们之间的几乎“水火不容”,结果使我们精心制作的网页只能在两种浏览器的其中之一上正常显示.网页浏览者可能使用的屏幕尺寸与显示分辨率-大多数的网页观众通常使用的是15寸或17寸的显示器,通常设置在640*480或是800*600的屏幕分辨率下,因此我们应该据此设置相应的网页大小浏览者的需求-主要是网站内容的选择,注意了解上网用户所喜欢的风格制作网站分析企划机密15第2页方远电脑教育xx网页教案之Dreamweaver4.0经过分析,我们心目中应该可以浮现一个轮廓了,延续前面的网站目标描述,加上网页观众分析,然后确立的各项特征,并且给予网站一个比较具体的执行策划,这样将会有助于网站的快速成立与后续的成长维护!(例)绘制网站执行架构蓝图(一般采取类似于Frontpage中的导航图!) 3、申请网页空间 4、设置网站各项条件兼聚以后,我们可以开始进行网站设置了本地网站(Local Site)与远程网站(Romote Site)的设置。 要注意的是两者是无须同时设置的,我们在开始时只需本地站点即可;远程站点是到要真正将网页上传时才需要用到的!制作根目录(Root Folder)所谓的根目录是指我们本地站点所放置的文件夹,这是建立本地站点所必须的,但它的设置方法并没有什麽标准,以下是一些惯用的方式*在资源管理器中新建一个作为根目录的文件夹,并进行命名。 规则为严禁使用中文,或其他双位字符;严禁使用空白键;最好不要全部使用纯数字;最好不要使用英文大写;严禁使用特殊符号,除了下划线(_)和连接线(-).*在新文件夹中再建立其他的文件夹,这一项设置并非必须的,只是为了网站文件便于管理Images-用来放置网站中使用的位图文件,这些文件通常由ImageReady和Fireworks产生Html-用于存放网站中使用的html文件,但不含首页!Swf-存放Flash产生的各式文件Movie-放置网站中使用的QT或Shockwave的影象Sound-用来放置网站中使用的声音Download-用于放置网站中提供浏览者下载的文件注意根目录中该建立哪些文件夹,完全是在有系统管理文件的大前提下,由我们自己决定的;当同类文件多到一个文件夹很难管理时,你可以再往下一层建立所需的文件夹;设置本地网站(Local Site)*执行Site网站-New Site新增网站,调出SiteDefinition(定义网站)对话框,确定左侧的Category(项目栏位)点选在Local Info(本地信息)项目;*在SiteDefinition(定义网站)对话框中进行以下的各项设置SiteName(网站名称)输入网站名称,这里的信息仅供设计者在管理网站时使用,可以使用中文名称LocalRootFolder(本地网站根目录)用于指定本地网站的根目录文件夹RefreshLocalFileListAutomatically(自动更新本地网站文件)勾选后,当我们每次新增或复制一些文件到根目录中时,本地网站将自动显示这些文件的变动HttpAddress(网址)输入这个本地网站将来上传时的网址Cache(缓存)通常勾选后,本地网站会建立一个本地缓存,使本地网站与服务器端的远程网站连接速度加快机密15第3页方远电脑教育xx网页教案之Dreamweaver4.0网站本地网站设置完成后,我们仍然可以对整个网站进行,执行Site网站-DefineSites网站命令,调出DefineSites对话框*New-新增网站*Edit-调出DefineSites对话框,修改本地网站的设置*Duplicate-可以复制出相同设置的网站*Remove-删除网站设置远程网站(RemoteSite)*执行Site网站-DefineSites网站命令,调出DefineSites对话框,在左侧选择要的网站-Edit*在SiteDefinition对话框左侧点选RemoteInfo,此时在aess(连接)列表中选择不同的连接服务器的方式*在多数情况下,我们采用FTP方式上传到远程网站FTP Host(FTP主机)-输入所申请网页空间的FTP主机地址,它由ISP厂商提供Host Directory(主机目录)-输入Server端的远程网站所存放的目录地址,通常这里是不需要设置的!Login(登录帐号)-网站空间申请时的用户名Password(密码)-网站上传时的密码UsePassiveFTP、UseFirewall-个人电脑不用勾选;设置局域网用户的防火墙地址EnableFileCheckInandCheckOut-多人合作时确定远程网站的文件状态,一般不进行勾选测试*在SiteMap(网站地图)中点击Connects toremote host(连接到远程网站主机)工具*此时我们看到正在与Server联系的对话框,若设置正确的话,网站地图的Connects toremote host按钮将会亮起来,代表电脑已经连接到远程网站的主机,随时可以上传文件了!上传网页到远程网站*将网站地图切换为显示本地网站的文件模式,选取要上传的网页,点击“Put Files”上传工具注意在上传网页时,若点选根目录的话,将会上传整个本地站点,但是这样将会上传许多垃圾文件;Dreamweaver4可以上传本地端的网页内容到远程网站,也可以下载远程网站的网页到本地电脑! 5、设置首页每个网站都会有一页称为首页的网页,它代表着一个网站的风格与特色,也代表着网站组织上的第一层结构,至于网站上其他的网页,原则上都必须通过首页而链接!设置页面执行Modify-PageProperties命令,在对话框中设置*Title-网页名称,有两个作用让设计者辨识网页的内容;当浏览者使用“加到收藏夹”时使用之*Background Image-网页背景图片*Background-网页背景色*Text Links-(超链接)文本机密15第4页方远电脑教育xx网页教案之Dreamweaver4.0*Left Margin、Top Margin-网页对象的起始位置(仅用于IE)*Margin Width(Height)-网页对象的起始位置(仅用于Netape)*Document Encoding-文件编码,TraditionalChinese(繁体中文)、SimplifiedChinese(简体中文)、Western(纯英文)*Tracing Image-描图纸,在这里可以选择一个已经作好版面的位图,用来做网页编排时的参考,一般不用!设置首页任何HTML文件都可以设置为网站的首页,不过因为它是网站的第一页,故肩负了与Server或浏览者接触的第一线角色,因此也会有一些限制命名时必须使用index.html、defaule.html或home.html(取什麽名称通常取决于Server端的设置,目前以index.html居多);这个页面文件必须直接存放在根目录的第一层。 *执行保存命令,并为页面命名为index.html,置于根目录下的第一层*打开网站地图,选中此文件,执行Site-Set asHome Page命令 二、录入文字与文字的格式化经常见到一些失败的网站,只是以眩目耀眼的首页图象、动画、声音吸引浏览者一时的目光,但是一链接进入网站内页面后,却发现整个网站空空如也,失望之余,从此再也不愿意光临这个站点,这是很可惜的!要有一个丰富的网站,当然整体的内容企划是很重要的,这其中最关键的因素就是文字了,事实上文字内容才是浏览者光临网站的主要原因,具有丰富文字内容的网站自然可以提供网友丰富的信息,并吸引他下一次的访问. 1、录入文字对于将文字置入网页之中,我们有两个部分需要考虑第一是我们用什麽方法将文字输入到网页中,这是我们现在要探讨的主要问题;第二是将文字输入到网页的什麽位置。 文字可以被直接输入到网页、表格(Table)及图层(Layer)中,这放于后续相关内容中进行介绍。 键入文字*以简体中文方式编码(Simplified Chinese):执行Modify-Page Properties命令,在对话框中选择GB2312编码*明确区分段落与行遇到文字末尾的位置,Dreamweaver将会自动为我们分行,然而在某些情况下我们需要强迫文字进入下一行,也有两种选择第一是Enter,可以将文字分段;其次我们可以在英文输入状态下按下Shift+Enter键,将文字强制性分行,在这种情况下被分行的文字仍然会在同一段落中。 在默认的情况下,我们很容易就可以区别强迫分行与分段的差异,分段时两行之间会出现一段空隙,而分行时两行会紧贴在一起!*复制大量文本在多数情况下,网页设计者不会使用Dreamweaver来进行打字的工作,此时多在文本软件中来打字Word、记事本等,然后用我们所熟知的复制-粘贴的方法将文本移入网页中。 注意贴入文本后,要先区别文章的段落在哪里?适当加以,以便后续的格式文字机密15第5页方远电脑教育xx网页教案之Dreamweaver4.0工作!对于一些特殊的文字字符,我们可以使用Object控制面板的Character模式直接键入,不过键入后必须在浏览器中才能正确显示! 2、文字的基本属性使用属性控制面板Window-Properties*文字样式(Format)这里是直接使用html默认的文字样式来进行文字的格式,我们可以直接挑选样式运用于文本*文字字体中文网页无字体!在中文环境下,网页文字唯一可用的字体只有系统支持的默认字体(即宋体和标楷体),因此我们在这费尽心思设置的字体都是白费心机!故我们在此只需要使用Default Font就是最好的!*文字大小(Size)在面板中我们可以将文字设置为html语言的7个等级尺寸,在字号列表中还有+1+7和-1-7的文字大小设置,这里的符号指的是相对于基准字体大小的正负数值*文字颜色文字默认颜色的设置Modify-Page Properties-textColor调色板*粗体/斜体文字(B、I)提示如果希望进行其他的文字样式设置,可执行Text-Style-.*文字对齐方式*文本超链接(Link)*文本项目符号和编号提示项目符号与编号都可以被,可执行Text-List-Properties-.*文字缩排 3、使用水平分隔线 *可以在其属性面板中进行相应的设置命名、W、H、Align、Shading 4、html文字样式它是一种文字属性的集合,我们可以将其应用在某些文字字符或整段文字上。 这种样式的优点在于其使用标准的html程序语言,所以能够被所有的浏览器支持,如果我们的网页设计需要考虑到一些不同品牌的老牌浏览器时,请使用html文字样式!调用html控制面板Window-Html Styleshtml,在面板中针对整个段落和被选取的字符两种不同的对象进行使用html样式html控制面板上原本就有一些Dreamweaver4默认的Html样式,我们可以直接点选段落或文字来套用Html样式。 不过这些样式不见得符合我们的需求,我们可以对现有样式进行机密15第6页方远电脑教育xx网页教案之Dreamweaver4.0再*双击目标html样式,调出Define HTMLStyle对话框Name-为样式重新命名Apply To-应用到,点选Selection可以将Html样式设置为字符样式;点选Paragraph可以将样式设置为段落样式When Applying-点选Add toExisting Style选项则当文字套用样式时,可以保留先前已有的样式;点选Cleear ExistingStyle选项,则套用样式时将清除所有旧样式的文字属性Font Attributes-字符属性,可以设置文字的各项字符属性,包括Font、Size、Color、Style等Paragraph Attributes-段落属性,设置文字段落的各项属性,包含套用的文字样式与Alignment(段落对齐)等*注意如果不想变动原本的样式(推荐使用),只要按下新增按钮,就可以增加一个全新的html样式,可以进行完全自定义套用html字符样式套用html段落样式 三、网页图象的处理称图象是网页的主角应该没有人会反对吧!从网页视觉效果上而言,恰当图片的使用会让我们的网站充满生命力与说服力,也加深了网页浏览者欣赏的意愿,特别是我们一再强调的网页风格也得依赖图片才能顺利形成。 1、网页图象须知网页设计有一个不成文的规定,也是我们必须奉行不悖的准则,就是文件严禁过大。 一个美观的网页必须被限制在100KB以下(Flash主页在150KB以下),最好在50KB左右。 在网页设计中图象所使用的格式和场合必须正确选择!目前网页设计中可以使用的两种格式分别是GIF和JPG,这两种格式都符合了Inter所需要的压缩与跨平台的起码要求,虽然都称不上完美,不过当前我们好象也没有其他的选择了!GIF格式*支持的重要功能图象透明背景(Transparent)交错显示(Interlacing)动画(Animations)*适用环境图象中存在大片的色块时,象文字、Logo、简单插画的情况下;图象所使用的颜色不多时;图象的尺寸不大,也不需要看清楚图象的色彩细微时;做超级链接使用的Button时;制作位图GIF动画时JPG格式除非遇到大尺寸的图象或图象中的颜色多到无法以256色表达时才用JPG格式的图象! 2、置入与图象置入机密15第7页方远电脑教育xx网页教案之Dreamweaver4.0*在见到插入光标的情况下执行Insert-Image命令或在Object面板上按下“InsertImage”按钮*在SelectImageSource对话框中选取图象的,在RelativeTo列表中务必选中Document选项,这样才能保证图象在上传到远程网站后仍然可以正确链接!*使用属性面板Image-图象在网页中的名称W、H-图象的宽度/高度Src-指定图象的Link-图象超链接Align-文字对齐方式Alt-图片说明文本Map-制作图象地图的超链接,参考后续章节V Space、H Space-垂直/水平图片间距,设置图片与文字间的距离Target-以图片做超链接时,其链接的视窗目标Low Src-低分辨率的图象的Border-图象边框Edit-启动外部软件Edit-PreferencesReset Size-重新设置图片,使图象恢复原貌 3、设置网页底图Modify-Page Properties-Background Image 4、置入交换式图象(Rollover Image)所谓的交换式图象指的是,当鼠标滑过图象时,图象便切换成另外一张通常是同样大小、但是样子不尽相同的图象。 它常被用在超链接的按钮上,以提示浏览者点这个按钮将会链接到另一个网页。 *执行Insert-Interactive Images-RolloverImage命令,或是在Object面板上点击Insert Rollover Image工具按钮*在对话框中设置Image Name-图象名称Original Image-原始图象,即默认状态RolloverImage-交换图象,即鼠标滑过时的状态Preload RolloverImage-予加载交换图象When ClickGo To URL- 5、置入导航栏(Navigation Bar)与交换式图象的效果非常类似,做法也大致相同,只不过它通常都是一系列的按钮。 一张网页中只允许有一条导航栏,而RolloverImage只有Up(原始)和Over(鼠标滑过)两个状态,但导航栏有四个状态(Up、Over、Down、Over andDown)*准备制作时需要的效果图象(分组)*设置插入点,执行Insert-Interactive Image-Navigation Bar命令,或是在Object面板上点击“Insert Navigation Bar”按钮*在对话框中设置机密15第8页方远电脑教育xx网页教案之Dreamweaver4.0Element Name-名称Up Image-原始按钮状态Over Image-鼠标滑过时的状态Down Image-鼠标按下后的状态down ImageBrowse-当鼠标接触到按钮时图象状态When ClikedToURL-超链接Preload Images-予加载图象Show Down Images Initially-勾选此项,则浏览器会在载入网页时就出现DownImagesInsert列表-选取导航栏的排列方式横式(Horizontally)、直式(Vertically)USE tables-勾选后,导航栏的按钮会以表格来排列(推荐勾选) 四、网页排版技术不管网站设计中到底包含了多少高深技术,作出一个有内容而美丽的网站终究还是网站设计的最终目标。 网页浏览者在乎的是我们的网页下载速度快不快?美不美?能不能吸引他们继续浏览下去,甚至产生商业行为的兴趣,因此网页终究还是一种设计工作,就象一般平面广告或杂志所要传达的理念是一样的。 在这样的大前提下,网页设计终归还是要回到设计的基本面,如何作出一个美丽的网页才是网页设计师首要考虑的重点,基于这样的需求,良好的网页编排就相当重要了! 1、表格(Table)对于网页设计者而言,表格是一项非常重要的排版工具,可以说不会表格就不能设计网页,它普遍被使用在版面划分的用途上,起到页面元素定位的重要作用!插入表格*执行Insert-Table命令,或在Object面板上按下Insert Table工具按钮*在对话框中设置Rows-行数Columns-列数Width-表格宽度,一般并表的单位用Pixels(象素),表示绝对宽度;套表的单位用Percent(百分比),表示相对宽度Border-表格的边框宽度Cell Padding-输入单元格的内容与单元格之间的距离Cell Spacing-单元格与单元格之间的距离表格属性(插入后的修改)*选取表格单击单元格-Modify-Table-Select Table;单击表格边框线;*在对应的属性面板中设置Table Name-表格名称,为表格命名,以搭配程序控制的使用Rows-表格行数Cols-表格列数W-表格宽度H-表格高度,通常不设置机密15第9页方远电脑教育xx网页教案之Dreamweaver4.0Cellpad-单元格内容与单元格间的距离CellSpacing-单元格之间的距离Align-表格对齐方式Border-表格边框宽度Bg Color-表格底色Brdr Color-表格边框颜色Bg Image-表格的底图单元格属性*选取单元格单击目标单元格并拖动;选取不连续的多个单元格Ctrl;选取一行/一列将鼠标靠近行或列的边缘,单击鼠标;拖动选取多个单元格;*在对应的属性面板中设置合并单元格/拆分单元格Horz-水平对齐Vert-垂直对齐W-单元格宽度H-单元格高度No Warp-单元格内文本不分行Header-标题,勾选后单元格内容自动以粗体显示上方的Bg-单元格底图下方的Bg-单元格底色Brdr-单元格边框颜色*注意如果我们对表格色彩没有信心的话,可以执行Command-Format Table命令,在对话框中选取!在表格中置入物体*删除表格-选取表格-Delete*删除行、列-Modify-Table-Delete Row/Column*增加行、列-Modify-Table-Add Row/Column/Rows orColumns 2、配置式表格所谓的Layout Table,其实是表格的一种,只不过它是一种很简单、直观性的处理方法,就是版面该怎麽分配,就将表格画在哪!Layout View配置视图Dreamweaver有两种工作视图,分别是Standard View(标准视图)与Layout View(配置视图),至于Layout View是专属于Layout Table的工作模式!插入LayoutTable*将工作模式切换到Layout View视图*按下Object面板上的Draw Layout Table按钮,用鼠标在页面目标位置拖动插入Layout Cell机密15第10页方远电脑教育xx网页教案之Dreamweaver4.0方法类似于上述过程配置Layout Table属性在对应的属性面板中设置变更LayoutTable宽度*拖动改变大小*设置固定大小*设置自动延伸大小(Autostretch比较麻烦)选取表格,在属性面板上的Width设置栏中点选Autostretch;在Choose Spacer Image(选择空白图象)对话框中设置Creat aspacer image file-产生一个空白图象文件;Use anexisting spacer imagefile-使用一个既存的空白图象文件;Dont usespacerimagefor autostretchtables-不使用空白图象文件。 选择这种方式的话,表格或单元格的宽度会比较难以控制,因此不建议使用!提示所谓SpacerImage是一个透明的图象,它看不见,不过却可以占据网页编排时的空隙。 我们可以利用它来撑开我们的配置表格或单元格!配置单元格(Layout Cell)属性在配置表格中置入物体转换配置表格与一般表格(等效于视图的切换) 3、层(Layer)上述的两类表格虽然都是网页设计时最主要的排版工具,不过它们都有两个共同的缺点*无法重叠(Overlap),换句话说,它们只能肩并肩地排在一起,我们无法将两个内容重叠到一起;*表格时一种很安定的东西,安定得不能随意移动Layer简介这里的层与平面设计者所惯用的Layer不大一样,因为它只是一个单独设计物件的容器,因此不能称为“图层”。 它的优点在于可以任意移动;可以互相重叠插入Layer*执行Insert-Layer命令*使用Object面板上的Insert Layer工具按钮Layer的各项属性在属性面板中设置Layer ID-层的名称,为了在行为程序中调用L-水平位置T-垂直位置W-层的宽度H-层的高度Z-Index-当Layer重叠时,用以设置Layer的前后排列顺序Vis-层的显示/隐藏Default(默认显示)、Inherit(继承,状态与上一层相同)、Visible(显示)、Hidden(隐藏)Bg Image-底图Bg Color-底色机密15第11页方远电脑教育xx网页教案之Dreamweaver4.0Tag-标签定义,不过应尽量使用SPAN或DIV,因为它们能同时兼容两大浏览器Overflow-超出部分的设置剪切参数设置Layer面板在层中置入物件 4、框架(Frame)所谓的框架是一种网页分隔技术,用来将屏幕划分为若干区域。 每个Frame中都包含有一个独立的HTML文件,这些分别独立的HTML文件就可以链接组成一个丰富的网页。 Frame就象一个容器,随时可以装入不同的HTML文件。 通过这种结构,就可以架构出多变的网页内容!分割Frame&Frame虽然好用,不过使用起来有其相当的难度。 为了能够正确地学会使用之,我们必须掌握以下重要概念*产生Frame时应该包含两个部分,一个是画面分割后的Frame,另一个是所有框架的集合Frameset;*Frame与Frameset各有特殊的属性,需要分别进行设置*每一个Frame或Frameset都有其对应的独立HTML文件*每次都必须将所有的HTML文件正确储存在网页的根目录之下&插入*使用默认的分割Object-Frame*使用命令分割Modify-Frameset*手动分割执行View-Visual Aids-Frame Borders-拖动边框Frame面板Window菜单*选取Frameset*选取Frame设置Frameset属性Borders-是否有边框Border Width-边框宽度Border Color-边框颜色RowCol Selection-行/列选取器Value-设置目标框架的大小设置Frame属性Frame Name-框架名称Src-HTML文件Borders-边框设置Scroll-是否有滚动条No Resize-不允许重设大小Border Color-边框颜色Margin Width-水平边缘留白Margin Height-垂直边缘留白指定Frame的网页机密15第12页方远电脑教育xx网页教案之Dreamweaver4.0原则上有两种处理方法一是将Frame的网页内容先储存为空白网页,然后再(推荐使用);另一种是事先作好需要的网页内容,再一一对应!(示例) 五、网页超链接我们常说,制作网站和杂志是很雷同的,同样必须要有一个美美的封面(网站的首页),封面上同样会有提示杂志内容的重点选项(网站内容链接),同样有一大堆的同性质、同风格的杂志内容(网站的内页);不过有一点是很不一样的杂志是印在纸上的,读者是用手来翻动它的,网站却不一样,浏览者是在屏幕上浏览网站,而屏幕是没有办法用手来翻动的!那麽怎样解决呢?所谓的超链接指的将网页由一页链接到另外一页的媒介,我们可以透过文字或图象将链接的属性添加,当浏览者用鼠标单击该文字或图象时,则链接的网页就会出现在屏幕上 1、网页链接网站必须依靠链接来联系众多的网页,并借此架构出整个网站,我们可以对不同的链接进行分类*文字超链接*图象超链接(Image Button)*图象地图(Image Map)以文字做链接*选中文本*制作方法执行Modify-Make Link-.;在属性面板中的Link栏输入*在属性面板的Target列表中选择目标网页显示的位置以图象按钮做超链接图象按钮的链接也可以在一开始置入Rollover按钮或NavigationBar的图象时,即在对话框中将链接属性加到按钮上,这与事后再通过属性面板来链接是相同的使用图象地图图象地图是一种很简单的图象超链接方式,它通过类似选取范围的方式,将图象的局部作为链接媒介,以链接到某个文件上,因此一张图上便可以制作出许多的链接!*导入图象*在对应的属性面板中利用热区工具指定影象范围*在属性面板中针对不同区域添加链接e-mail链接*在要加入E-mail链接的地方设置插入点,按下Object面板上的Insert E-mail Link工具按钮*在对话框中输入Text和E-mail地址提示若要将E-mail加在图象上的话,可以在属性面板的Link栏键入“mailto:信箱地址subject=主题内容”命名锚点链接(书签)*设置锚点在Object面板上Insert NamedAnchor工具按钮*在对话框中给锚点命名机密15第13页方远电脑教育xx网页教案之Dreamweaver4.0*在网页中选中链接源文本,在属性面板中设置链接“#锚点名称” 六、表单(Form) 1、表单的处理流程当浏览者在屏幕上看到表单后,依据需要填妥各项资料,接着按下传送按钮,表单资料将被传送到远程网站所在的Server上,此时由程序设计师事先编写好的ASP或CGI程序再依据表单数据进行处理 2、调用表单组件Object面板的Forms模式 3、插入表单域插入*执行View-Visual Aids-Invisible Elements使表单域的红色虚线框得以显示*Object面板中按下Insert Form按钮设置表单属性(属性面板)Form Name-表单名称,方便程序中调用Action-对应程序地址Method-数据传送方式,可以选择速度快但数据量很小的GET方式,或数据量大的POST方式。 在一般情况下应该选择POST方式置入文

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论