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：：775*80表格格2：：775*30第一一列列：：675像像素素第二二列列：：100像像素素Dreamweaver静静态态网网页页制制作作(续续)表格格3：：775*300第一一列列：：200像像素素第二二列列：：255像像素素第三三列列：：200像像素素第四四列列：：100像像素素对于于第第四四列列同同时时又又将将之之分分成成5行行，，高高50像像素素。。

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

温馨提示

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

最新文档

评论

0/150

提交评论