Dreamweaver静态网制作过程_第1页
Dreamweaver静态网制作过程_第2页
Dreamweaver静态网制作过程_第3页
Dreamweaver静态网制作过程_第4页
Dreamweaver静态网制作过程_第5页
已阅读5页，还剩35页未读， 继续免费阅读

下载本文档

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

文档简介

Dreamweaver静态网页制作一、FTP的使用（文件传输）1、直接通过浏览器的方法来实现输入账号、密码登录到FTP服务器上，然后即可用复制的方法将文件复制到FTP服务器上。2、使用相应的应用软件来实现如：CuteFTPLeapFTP来实现二、检验网页的方法方法一：2、输入账号、密码以及其它的相关信息3、申请完成之后，可以用IP、账号、密码来登录到服务器，将本Dreamweaver静态网页制作(续)Dreamweaver静态网页制作(续)三、基本操作1、编缉文本1）添加文本的方法是一种是直接在文档窗口中键入文本内容，另一种是在文档窗口中，将插入点设置到要放置文本的地方，打开Edit下拉菜单，将文本导入。2）编缉文本（大小、颜色、字体、样式）可以直接通过属性面板来实现或通过选择“文本字体”来设置2、超链接创建超链接最常见的做法是将超链接信息设置在文本及图像上。使其链接至其它的网页或网站上。源端点和目标端点目标端点有：图片、电子邮件地址、多媒体文件、程序（如：javascript:window.close()关闭当前窗口javascript:windows.print()打印文档1）链接的类型Dreamweaver静态网页制作(续)内部链接：在同一网站文档之间的链接外部链接：在不同网站文档之间的链接锚点链接：同一网页或不同网页的指定位置的链接；E-mail链接：打开填写电子邮件表格的链接；2）文档的路径（URL）相对路径：绝对路径：完整的URL（基于目录的路径）：从根目录出发3）链接的方法在属性面板中可以直接使用可以选择被链接文档的载入位置_blank：新的未命名的浏览器窗口中；_parent：父框架集或包含该链接的框架窗口中；_self：相同的窗口中（是无需指定的）_top：整个浏览器窗口并删除所有框架；可以借助于样式表来实现Dreamweaver静态网页制作(续)3、文档页面的整体设置a)Title（标题）在该文本框中，可以输入文档的页面标题，它实际上是输入位于HTML头部的<title>和</title>标记之间的内容，在浏览页面时，会显示在浏览器的标题栏上。b)BackgroundImage（背景图像）在该文本框中，可以输入希望用作HTML文档的背景图像的路径和文件名称，单击“Browse”（浏览）按钮，可以从磁盘上选择图像文件。这里不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置的图像名称。实际上，这里设置的是<body>标记的background属性。c)Background（背景）在这里可以为文档页面指定背景颜色。实际上设置的是<body>标记的bgcolor属性。d)Text（文本）这里可以设置文档页面中文字的前景颜色，实际上设置的是<body>标记的text属性。e)Links（链接）这里可以设置文档页面中尚未访问过的超级链接的文字颜色，实际上设置的是<body>标记的link属性。f)VisitedLinks（访问过的链接）这里可以设置文档页面中已经访问过的超级链接的文字颜色，实际上设置的是<body>标记的vlink属性。Dreamweaver静态网页制作(续)g)ActiveLinks（正在访问的链接）这里可以设置文档页面中正在访问的超级链接的文字颜色，实际上设置的是<body>标记的alink属性。h)LeftMargin（左边距）、TopMargin（上边距）、MarginWidth（页边宽度）和MarginHeight（页边高度）在这些文本框中，可以设置页面文字同页面边缘的间距。实际上分别设置的是<body>标记的leftmargin、topmargin、marginwidth和marginheight属性。但要注意，Netscape可以识别这些属性，但是InternetExplorer不识别它们，因此不建议使用它们。i)DocumentEncoding（文档解码方式）在该列表框中，可以选择当前文档页面的文字解码方式，对于大陆使用的中文网页，应该选择“SimplifiedChinese（GB2312）”。如果这里没有需要的解码方式，可以从列表中选择“Other”，这种情况下，页面会使用浏览器运行环境的解码方式。j)TracingImage（草稿图）在该文本框中，可以指定一幅图像作为网页创作时的草稿图，它显示在文档的背景上，便于在网页创作时进行定位和安放对象。在实际生成网页时，它并不显示在网页中，我们会在后面介绍其使用方法。k)Image（图像）拖动该滑块，可以改变草稿图的透明程度，使用适当的透明程度可以避免干扰网页的编辑。Dreamweaver静态网页制作(续)4、图像处理图像和文本是网页中最重要的两种基本元素。主要有：jpeg、gif、png格式的图像Jpg:是存储照片或连续色调图像的较好格式；Gif：存储非连续色调图象或颜色比较单一的图象。最多支持256种色，可以以动、静态两种方式出现。Png：拥有GIF的全部特性（如透明图、GIF动画等），是一种很好的网上图像文件格式。它避开了GIF的压缩程序专利，而且可以得到比GIF更好的压缩比，可以用来代替GIF，是一种无损压缩图像，以后Internet的主要图片格式（基于B/S模式）。所涉及到的图像操作的主要有：a)在网页中插入图片（可利用菜单或对象面板来实现）b)在网页中插入一图片，并作为背景（注意其中背景图片的应用技巧）；c)在网页中某个位置插入一个交互图像（举例说明）Dreamweaver静态网页制作(续)对象面板标准页插入鼠标经过时的图像即可d)插入导航栏：“插入”“交互式图像”导航栏5、表格处理是页面布局极为有用的工具。往往用表格来定位页面元素。a)添加表格b)表格属性的设置c)对表格进行编缉包括插入行/列，删除行/列，在表格中插入表格d)单元格属性的设置e)对单元格进行编缉注：在Dreamweaver中，对于表格的设置，可以通过属性面板来控制和设置Dreamweaver静态网页制作(续)Dreamweaver静态网页制作(续)注：是版式中分隔式三、层(layer)可以放置在页面的任意位置。把页面元素放入层中可以控制哪些元素显示，哪些隐藏，哪些显示在前面，哪些显示在后面。层可以包含文本、图像、表单、、插件、甚至层内还可以包含其它层。甚至我们还可以将一个网页放入一个层内（需要一个附加的插件）1、层的新建a)插入层b)拖放层c)绘画层d)画多层2、层的属性的设置通过属性面板可以设置Dreamweaver静态态网页制作作(续)包括：layerID、左左边和顶边边距、宽度度和高度、、Z-索引引（编号较较大的层出出现在编号较小的的层的上面面）、可见见性、背景景图像、背背景颜色、、溢出、剪剪切、src（显示另一一个HTML文档））3、层面板板在“窗口””“层面板板”,即可可打开和关关闭层面板板在层面板中中，层以堆堆叠的名称称列表的形形式显示，，先建立的的层位于列列表的底部部，最后建立的的层位于列列表的上部部。可以通过层层面板改变变层的可见见性以及层层的堆叠顺顺序Dreamweaver静态态网页制作作(续)四、行为是一种事件件（Events)和动作(Actions)的组合体体。动作通通常由一段段落Javascript代码所所组成，利利用这段代代码可以完完成相应的的任务，如如：打开浏浏览器，播放声音等等。（面象象对象程序序设计中的的，事件、、动作、行行为等概念念）1、事件：：通常由浏浏览器所定定义，它可可以被附加加到各种页页面元素上上。也可以以被附加到HTML标记记中。如：鼠标事事件一般有有以下几种种Onmouseover:当移动到到链接点上上时的事件件；Onmouseout:当当移动到链链接点之外外时发生的的链接的事事件；Onclick:指单击击链接点时发发生的链接事事件。2、行为：则则是事件和动动作的组合体。如：onclick行行为同一段javascript代代码相关联，，通常我们将将这个过程称称为触发。3、添加行为为在“windows菜单单“下选择””行为“项即即可。然后可以先选选择动作，再再选择相应的的事件。Dreamweaver静态网页制制作(续)如果行为选不不中（灰色）），则从“显显示事件”中中选择较高版版本的浏览器器，一般为IE5.0即即可。内置的行为有有十多种，但但有时远不够够用，可以通通过增加插件件的方式来扩扩展功能如：1、在层内显显示一个HTML文档2、流文件格格式的播放；；3、自动滚屏屏；4、自动关闭闭窗口；5、弹出一个个窗口；6、实现自动动跟随当前屏屏幕；:::Dreamweaver静态网页制制作(续)举例：1、系统内部部自带的行为为。a.弹出信息息b.播放背景景音乐c.打开浏览览器窗口2、利用Dreamweaver的的插件实现扩扩展功能。先安装相应的的插件a.在网页中中插流媒体文文件b.自动滚屏c.自动关闭闭窗口d.实现自动动跟随当前屏屏幕Dreamweaver静态网页制制作(续)设计一个Web站点的基基本步骤：1、对WEB站点进行规规划1）确定网站站的主题和内内容；网站的主题就就是你建立的的网站所要包包含的主要内内容，一个网网站必须要有有一个明确的主题，特特别是个人网网站，因为不不可能像综合合网站那样做做得内容大而而全，所以必须找准一一个自己最感感兴趣的内容容，做深、做做透、办出自自己的特色，，这样才能给用户留下下深刻的印象象，主题要明明确，在主题题范围内做到到大而全、精精而深。网站内容的组组织（1）选择力力求专业化；；（主要是面面向谁的问题题）（2）网页内内容的变化性性；（3）网站内内容设计者的的爱好；（4））网站站栏目目的安安排Dreamweaver静态态网页页制作作(续续)a.要要紧扣扣主题题；b.设设立最最近更更新或或网站站指南南栏目目；c.设设立可可以双双向交交流的的栏目目，如如论坛坛、BBS、邮邮件列列表等等d.设设立要要下载载或常常见问问题的的栏目目。（（从而而做到到信息息资源源的共共享））名称要要正、、名称称要易易记、、名称称要有有特色色。注：部部分人人把此此部分分以下下的几几点归归纳为为规划划网站站，主主要包包括网网站的结结构、、栏目目的设设置、、网站站的风风格、、颜色色搭配配、版版面布布局、、文字图片片的运运用等等。Dreamweaver静静态态网网页页制制作作(续续)2））确确定定网网站站的的结结构构；；（（主主要要有有线线性性结结构构、、层层次次结结构构和和复复合合性性结结构构（（树树型型结结构构为为主主））3））确确定定网网站站的的风风格格；；（（版版面面和和色色彩彩））可以以采采用用几几各各种种配配色色方方案案，，然然后后再再根根据据配配色色方方案案进进行行选选择择。。第一一分分页页第一分分页第一分分页主页Dreamweaver静态态网页页制作作(续续)4）确确定网网站页页面的的版式式；整版式式（全全文字字型、、图文文混排排型、、纯图图形式式）、、部分分留空空式、、分隔式、、原则：：（1））协调调（2））对比比（对对照））；（3））对称称；（4））平衡衡；（5））比例例；（6））节奏奏（颜颜色的的跃进进方式式等））2、准准备素素材（（力求求全，，但必必须要要与主主题相相符））基础元元素：：文本本、图图片、、按钮钮、动动画、、表格格、声声音的的组合合1）存存储介介质（（如光光盘、、图书书、报报纸、、多媒媒体上上等））2）网上资源源（从Internet下载相应的的资源）Dreamweaver静态网页制制作(续)3）自已动手手设计（最主主要的一种形形式，其特点点是比较灵活活，不受网站站其它因素的的制约）在收集材料后后进行去伪取取精、去伪存存真，然后有有步骤的对素素材进行整理理，作为自己制作网页页的素材。网页素材参考考网站:1林林小筑：2网页素材精品品屋；3中华图王：4动画制作：Dreamweaver静态网页制制作(续)3、创建站点点和网页包括选择合适适的制作工具具站点就是由很多链链接在一起的的网页组合在在一起的整体体。在材料和工具具有了之后，，就需要一步步步把自己的的想法变成现现实，一定要要按照先大后小、先先简单后复杂杂进行制作。。所谓先大后后小，就是说说在制作网页页时，先把大的结构设设计好，然后后再逐步完善善小的结构设设计。所谓先先简单后复杂杂，就是先设设计计出出简简单单的的内内容容，，然然后后再再设设计计复复杂杂的的内内容容，，以以便便出出现现问问题题时时好好修修改改。。/4、、测测试试1））文文字字、、图图片片的的测测试试；；2））版版面面布布局局的的调调整整；；3））超超链链接接的的测测试试；；4））是是否否与与预预期期限限效效果果一一致致；；Dreamweaver静静态态网网页页制制作作(续续)5、、网网站站的的发发布布和和宣宣传传文件件的的上上传传可可以以用用CuteFTP（（Leapftp））文文件件传传工工具具来来实实现现；；推广广的的方方法法有有：：到到搜搜索索引引擎擎上上注注册册、、与与别别的的网网站站交交换换链链接接、、加加入入广广告告链链等等。。6、、网网站站的的维维护护与与更更新新网站站要要注注意意经经常常维维护护更更新新内内容容，，保保持持内内容容的的新新鲜鲜，，不不要要一一做做好好就就放放在在那那儿儿不不变变了，只有有不断地地给它补补充新的的内容，，才能够够吸引住住浏览者者。Dreamweaver静态态网页制制作(续续)Dreamweaver静态态网页制制作(续续)步骤：1）下载载原始文文件（图图片、动动画、样样式表等等）2）规划划网站（（分析））a.主题题：以广广东教育育学院的的教学、、科研和和管理为为中心，，以各部部门、各各系的部部门网页为核核心而展展开；b.内容容：包括括有教学学、科研研、管理理、宣传传等互动动信息；；c.网站站的结构构：树状状结构；；d.网页页的版式式：是采采用分隔隔式（主主体是三三大块）），也是是上（标标题）、、左（导导航）、、右（主主体）三三大部分分，本网网页采用用层的技技术来实实现全部部网页。。注意：在在本网页页中，采采用了层层的相关关技术，，如，层层的按顺顺序叠加加技术。。3）创创建站站点和和网页页Dreamweaver静态态网页页制作作(续续)a.通通过““站点点”“创创建站站点””来创创建一一个站站点；；b.新新建一一个网网页文文件，，先设设置网网页背背景颜颜色为为#73A9CA，通通过““页面面属性性”来来设置；；c.在在页面面中添添加一一个新新的层层，可可以通通过对对象面面板来来实现现，也也可以以通过过插入入菜单单的“层层”来来实现现，设设置层层的左左、上上边距距为0;然然后在在层中中插入入1-1.gif的的图片片文件件；d.再再新建建一层层，设设置左左上边边距分分别为为：20、、7；；然后后在层层中插插入图图xf.gif的文文件；；再新建建一层层，设设置左左上边边距分分别为为：500、7;然然后在在当前前层中中插入入图1-2.gif的文件；；e.新新建一一层，，左上上边距距为：：690、、72;插插入图图back1.giff.新新建一一层，，左上上边距距为：：621、、75,宽宽高为为：137、219像素素；分分别在在层内内添加加相应的的文本本内容容，并并对文文本的的格式式进行行相关关的设设置；；Dreamweaver静态态网页页制作作(续续)g.新新建一一层，，左上上边距距为：：2、、420;并在在层内内添加加相应应的文文本内内容；；h.新建建一层，，左上边边距为：：10、、118；设置置层的名名称为news;宽高高为：465、、236；；i.新建建层，左左上边距距为：0、70;宽高高为：77、30像素素，在层层内添加加鼠标交交互图片，原始始图片为为：title-1.gif，鼠标标经过图图片为：：title-2.gifj.新建建层，左左上边距距为：79、70;宽宽高为：：77、、30像像素，在在层内添添加鼠标标交互图片，原原始图片片为：title-3.gif，鼠鼠标经过过图片为为：title-4.gifk.选中中第一层层，打开开行为面面板，占占击“+”事情情按钮，，从中选选择“显显示-隐隐藏层””菜单项（注注：若不不能选中中，则打打开“显显示事件件项”，，从中选选择“IE5.0”，，即可）），然后分别别设置各各层的显显示以及及隐藏的的属性即即可。l.然后后设置鼠鼠标事件件，设置置为OnMouseOver.m.打开开行为面面板，从从中选择择MFX-MFXURLintoLayer,即即可对当当前的层层中设置置一个嵌入入式的HTML文件的的显示；；Dreamweaver静态态网页制制作(续续)n.若要要在浏览览器打开开的同时时，即触触发OnLoad事件件的时候候，需要要打开另另一个窗窗口，则可可以设置置另一个个打浏览览器窗口口事件。。o.在网网页做好好后，将将之保存存为index.htm，若若是动态态网页，，则根据据不同的的前台环境保存存不同的的文件名名，如index.aspindex.phpindex.php3index.jsp等；；4)测试试网页对网页的的制作过过程中的的步骤及及文字和和图片内内容，以以及链接接的目标标地址作作相应的检查，，是否有有错误或或需要改改进的地地方。5）上传传和发布布利用相应应的文件件传输工工具来实实现网页页的传输输，将之之上传至至相应的的WEB服务器器上。6）网页页的维护护和更新新网站需要要不断的的进行更更新。每每一次的的更新均均需上传传至WEB服务务器上。。Dreamweaver静态态网页制制作(续续)HTML代码的的基本格格式如下下：<html><head><title>无标题题文档</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head><body>…</body></html>Dreamweaver静态态网页制制作(续续)五、样式式表（CSS））层叠式模模式表（（CascadingStyleSheet),可可以对网网页中的的文本内内容，按按照用户户期望的的形式进行行精确的的控制。。不仅可以以控制单单个网页页中的文文本格式式，还可可以采用用外部样样式表的的方式控控制多个个网页中中的文本格格式。样式是控控制网页页文本外外观的一一组格式式属性，，其英文文为style.如：<styletype="text/css"media="screen">body{scrollbar-face-color:#CCCCCC;scrollbar-shadow-color:#000000;scrollbar-highlight-color:#000000;scrollbar-3dlight-color:#6699CC;scrollbar-darkshadow-color:#6699CC;scrollbar-track-color:#CCCCCC;scrollbar-arrow-color:#6699CC;}A:link{FONT-SIZE:9pt;TEXT-DECORATION:none}A:visited{FONT-SIZE:9pt;TEXT-DECORATION:none}A:active{FONT-SIZE:9pt;TEXT-DECORATION:none}A:hover{FONT-SIZE:9pt;TEXT-DECORATION:none;position:relative;left:1px;top:1px;clip:rect()}Dreamweaver静态态网页制制作(续续)</style>以上为一一内部样样式表，，一般放放在</head>之之前，中中间用<style>…</style>来进行标标记注：标记记选择器器的正确确使用以上是内内部样式式表，如如果将以以上代码码放入一一个文件件，并保保存为*.css文件件，即可作为外外部样式式表文件件使用。。如：Model.css在文档窗窗口点击击右键，，然后选选择CSS样式式附加样样式表即即可添加加外部样样式表文件。Dreamweaver静态态网页制制作(续续)实例2利用网页页模板来来做网页页下载相应应的模板板在此模板板中,可可以选择择适合自自己的模模板,然然后修改改相应的的内容,即可.自己也可可以动手手制作模模板,可可以在以以后去适适当的研研究模板:是是一种用用来产生生固定特特征和共共同格式式的文档档基础,是用户户进行批批量生产产文档的起点点.Dreamweaver静静态态网网页页制制作作(续续)2、、《《东东方方文文学学》》网网络络课课件件的的制制作作的的步步骤骤：：1)……2)……3)创创建建站站点点和和网网页页a.通通过过对对象象面面板板创创建建一一个个框框架架，，框框架架的的结结构构为为上上、、左左、、右右三三部部分分组组成成；；b.设设置置上上框框架架的的属属性性：：行行值值为为：：115，，（（通通过过““框框架架””面面板板来来设设置置））c.设设置置left的的大大小小为为157像像素素；；d.新新建建一一表表格格，，在在top页页中中插插入入一一个个表表格格，，设设置置为为3行行1列列，，宽宽度度为为98%百百分分比比，，设置置第第一一行行的的高高度度为为78像像素素，，第第二二行行拆拆分分为为3列列（（““右右键键””-““表表格格””-““拆拆分分单单元元格格””），，第第三三行行的的高高度度不不设设置置；；e.在各各单元格格中插入入相应的的图片和和文字及及相应的的效果，，第一行行中，image/heaD_r1_c1.gif………head_r1_c9.gif;f.第二二行中，，设置背背景颜色色为:#993399;分别别在各列列中输入入文字，，时间及及文字；；g.第三三行中，，插入图图片：image/line1.gifDreamweaver静态态网页制制作(续续)h.在left页中，，插入一一二个表表格，其其中一个个为151*81大小小，另一一个为150*79大大小，第一一个表格格，三行行一行，，第一行行高度，，26象象素，插插入图片片文件，，doaxue3.gif,第第二行中中，利用用在word中中插入特特殊符号号的方法法，来设设置颜色色第三行中中：其中中一个是是plus1.gif另一一个是blank2.gif，然后后在其中中输入文文字内容，其中中背景颜颜色为:#DFC8E1;i.第二二个表格格，插入入图片：：title.gif,再插插入一个个下拉菜菜单，选选择对象象面板中中的表单，然然后选择择“跳转转菜单””，即可可设置相相应的URL；；然后再插插入相应应的文字字内容以以及水平平线即可可；j.对于于主窗口口中，首首先，插插入一个个表格，，宽为79%,高为301像像素，设设置边框框颜色为:#993399;k.在主主窗口中中插入表表格，8行，3列，其其中的第第8行拆拆分为5列，宽：99%高：378像素素边框粗细细为：0，边距距、间距距为：0；Dreamweaver静态态网页制制作(续续)第一行：：21第二行：：21第三行：：28第四行：：16第五行：：19第六行：：226；第七行：：25第八行：：25第一列：：2%第二列：：95%第三列：：3%bk.插入入文字和和图片第二行：：dingyi.gif第三行：：文字Dreamweaver静态态网页制制作(续续)第五行：：line2.gif第六行：：文字、、对齐方方式、居居中；第八行：：pic027.gif，作作为背景景图片；；对于左边边的导航航栏，制制作的方方法有：：利用一个个扩展插插件来实实现，即即资源管管理器的的插件Dreamweaver静态态网页制制作(续续)实例三、、计算机机系主页页1、规划划网页精确地进进行规划划（版面面、颜色色、大小小等）2、制作作表格1）四个个大表格格1*11*21*41*12）分别别设置表表格的大

人人文库> 全部分类> 专业文献 > 生活休闲

温馨提示

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

最新文档

评论

0/150

提交评论