Dreamweaver教程
第一篇——站点管理篇
随着网络的普及,越来越多的电脑爱好者开始接触网络,面对一个又一个精彩纷呈的网站,众多的电脑爱好者都按捺不住内心的憧憬开始接触网页设计和制作。而这项工作也不再象它的启蒙阶段那样,需要直接面对枯燥的代码,反复的在程序语言和最终界面之间来回切换。随着一些具有可视化操作界面,所见即所得工作窗口软件的不断出现和升级,让进入网页制作的门槛不再那么高不可及。Dreamweaver无疑是这些软件当中的佼佼者,可以说它是现在最为普及和成功的一个网页制作软件。通过Macromedia公司的不断改进和升级,它已经变得日益强大和完善。从今天开始我准备向大家介绍Dreamweaver软件4.0版的强大功能,本教程希望以规范化的网站制作流程为线索,指导初学者以正确的步骤来逐渐接触和掌握Dreamweaver软件的主要功能。我个人认为,作为一个网页制作的爱好者,需要有一个良好的工作习惯,很多朋友在学习时喜欢随心所欲的实验软件的各种功能,而缺乏系统的、正确的工作方式。同时网页制作面对的不是一个个孤立的页面,而是一组互相关联的某个站点中的文件,因此本教程将从网站的角度来串讲Dreamweaver中的各项主要功能,以下的几点将会在本教程中得到重视:
1、网页制作中的基础知识和常用功能。
2、Dreamweaver新版本新增的一些命令。
3、能够有效提高工作效率的一些命令。
基于以上想法,我划分了如下几个篇章:
一、规划篇——站点的创建和管理 (Site)
1、站点的设计与构成
2、创建本地站点
3、关于路径与地址
二、布局篇
1、利用表格排版页面(Table) java编辑器在线
2、创建帧结构(Frame)
三、内容篇
1、文本处理(Text)
2、图像处理(Img)
3、增加链接(Link)
4、加入多媒体文件(MutilMedia)
四、设计篇
1、使用设计视图(Layout View)
documentary缩写2、创建Layout Table
3、创建Layout Cells
五、美化篇
1、CSS样式表介绍(CSS)
2、滤镜效果介绍(Filter)
六、动态交互篇
1、层与层面板(Layer)
2、时间轴(Timeline)
3、交互行为(Behavior)
4、扩展DW(插件介绍)
七、效率篇
1、库项目的创建与应用(Liberary)
2、创建模板(Template)
3、查与替换功能介绍(Find&Replace)
八、维护篇
1、后期检测与管理(连接检测、兼容性检测)
2、Assets面版介绍
3、利用Assets面版进行文件管理和检验
我想这个系列教程主要面对的是刚刚接触了Dreamweaver软件,并使用过常用命令的初学者,我希望通过这个系列,合理的将主要功能有条理的介绍给大家,而对那些与普通爱好者关系不大的问题,我会简单的带过,以使大家在使用过程中能尽快的进入网页制作之门,并减少常见的一些困惑和疑问。由于水平有限,错误在所难免,希望大家批评指正:)
《规划篇——站点的创建和管理》
这一系列的最开始给大家介绍Dreamweaver的站点管理功能(Site)。我们已经知道网站所面对的不是单独页面的集合,更多的还包含其他诸如图片声音、外部程序等等相关联的内容,因此如何正确的组织他们变得非常重要。很多初学者常常遇到如下一些问题:为什么我的网页传上去后看不到图片?为什么我的文件链接是错的?这些问题其实很多都是在
开始之前,没有合理的创建好你的站点,良好的规划和准备工作可以减少很多的后续错误。
一、站点的前期设计与构成 在开始你的网站建设前,有必要建立好一个新的目录,你所搜集的一些资料如图片、声音、文字等都需要按照合理的原则放在这个目录下。我们假设要制作一个关于个人作品和教程的个人网站。首先在我们的硬盘上建立一个目录ExampleSite,在这个目录下面建立一个Images目录放置相关的图片;建立一个Media目录放置相关的多媒体文件;再按照站点内容建立几个子目录:About、Design、Lessons、Resources,而在这几个目录下面都建立各自的Images目录,放置他们各自相关的图片目录。最后的目录结构如图一所示;
(图一、目录结构)
二、创建你的本地站点 虽然你的目录结构不一定要和这里一样,但是你应该有这种清晰的思路,及各个目录都是按照什么原则组织的。完成上面的目录规划以后,我们就可以启动Dreamweaver软件继续我们的工作了。启动Dreamweaver软件后,从主菜单中执行Site/New Site命令。屏幕上会出现Site Definition对话框,该对话框包含了五个不同的内容:
Local Info(本地信息)、Web Server Info(Web服务器信息)、Check In/Out(登记/隔离)、Site Map Layout(站点布局图)、Design Note(设计注释)。对于我们普通的网页制作者来说,最主要的就是前面两个关于本地站点信息和Web服务器信息。图二为Local Info(本地信息):
(图二) Site Name(站点名称):输入你为自己的站点所起的单独名称。 Local Root Folder(本地根目录文件夹):选择你刚才创建的放置你的站点所有文件的根目录。 Enable Cache(启用缓存):这将把你的站点内的文件信息记录在一个缓存文件中,可以加快今后检查文件链接信息的速度。
三、创建你的远程站点信息 我们在自己站点内做好的所有文件最终都要上传到Internet上的一个服务器中,才可以被其他人访问到。一般来说很多朋友都是申请一些免费的主页空间,根据这些空间的提供商给你的站点信息和你的个人资料,我们需要在定义站点时,将这些资料填好。图三为Remote Info(远程信息):
(图三)
Remote Info(远程信息):这里设置你的站点文件将来传到网上时,远端服务器的信息。绝大多数免费个人主页服务都提供了FTP方式的服务,我们从Access下拉选项里选择FTP方式并进行详细设定。 FTP Host:设置你将要上传文件的服务器地址。 Host Directory:主机目录设定了你本地站点根目录对应的远程服务器主机下哪个子文件夹。 Login和Password分别设定你在远程服务器上的用户名和密码。
四、快速搭建你的站点文件结构 在设置好你的站点信息后,就可以开始创建你的站点文件。很多朋友都是使用File-New命令开始一个一个的创建页面,其实这并不是一个好的工作习惯,因为这样你将不会对站点的整体结构有良好的控制和把握。好的工作方式是在站点窗口完成站点的基础页面的搭建和规划,这使你可以一开始就清楚的了解你的工作范围并将你的设计想法变为初略的布局。下面我们就在站点窗口开始我们的工作。 打开站点窗口,我们可以看到如图四所示的窗口:
(图四)
窗口的左边是将来上传后的远程站点结构,如果你已经链接到你的远端站点,这里将显示远端站点的目录结构。窗口的右边是本地站点的目录结构,我们的工作将从这里开始。 首
先需要在站点根目录下创建index.htm文件,如图五所示:
(图五)
右键点击站点根目录,在弹出菜单中选择New File,并定义为index.htm则Dreamweaver会定义一个index.htm页面,用同样的方法你可以在不同的目录里快速创建你需要的其他文件。如图六所示:
(图六)
你也可以用这种方法快速创建新的文件夹。利用这种方法你可以很快的了解你的工作量和目录结构,在后面工作添加文件之间的链接时,只需简单的选择这些文件即可。这有助于你的站点管理工作。
五、站点管理的意义 scrapy的工作原理图很多朋友常常会问,我为什么要建立站点?我就做简单的几个页面也需要这么繁琐的创建站点吗?我不创建站点有什么缺点吗?在这里需要强调的是创建好站点后,Dreamweaver就可以对站点内的所有文件进行统一的管理,并能很好的组织和解释他们之间的相互链接关系,减少许多不必要的链接错误。由于网页就是一些文件的相互链
接和组织,所以我们还有必要简单理解链接的几种格式:绝对地址、相对地址。
虚拟机linux语言改为中文dw怎么制作网页绝对地址简单地说就是我们常用的网站地址,一般来说当我们需要链接到不属于我们自己网站内的某个页面时,就需要用到绝对地址来表示这个外部的页面或网址。当然你也可以用你自己的网页绝对地址来表示你的页面,但这样做非常不好,因为如果你改变了你得网站地址,你就必须修改每一个相关的链接。 相对地址是指以当前站点内的根文件夹为起点,其他各个文件用与他的相互关系来表示。相对路径与站点将来的位置没有关系,这可以简化输入,并方便站点的管理,在以后站点可能出现转移时也不会出现问题。以我们前面创建的文件为例,当我们想要在index.htm文件中添加链接到Aboutme.htm文件的链接时,只需要写:About/aboutme.htm即可,而在aboutme.htm文件中添加返回index.htm文件的地址时,只需写:../index.htm,../代表返回上级目录。 知道了绝对地址和相对地址后我们再来看站点管理的意义,当我们建立了站点后,Dreamweaver就可以将各个文件之间的相互关系用相对路径来表示清楚,而如果你没有建立站点,你的文件之间的互相链接的表示方法是类似这样:file://yourpath/yourfile.htm。这样当你将文件上传到远端服务器上时,浏览器并不会到你本地机子中的file://yourpah?·??/,这也是很多初学者常犯的错误之一,很多图片显示不出来,链接无效等等。
好了,关于Dreamweaver中站点的创建和管理我就介绍到这里,虽然这一讲的内容比较枯燥和文字化,不很直观,但是它对今后的工作有很大的帮助,万丈高楼平地起,良好的开始将是成功的一半,下一讲开始我们来逐步介绍Dreamweaver的各项主要功能。
布局篇
本篇我要介绍的是Dreamweaver中的布局部分,如果我们把网页制作看的简单些,它其实就是一些静态的和动态的页面元素的组合,如何合理的将他们组织的美观、条理就需要我们头脑里有一个整体布局的概念。在Dreamweaver中,安排页面内容布局主要是依靠表格来完成的,通过表格的相互嵌套和合并、拆分,可以使你头脑里的设计构思变为现实。此外,框架结构也是实现布局的一种方式,它可以实现导航性非常好的页面结构。下面我就分别介绍一下这两种布局方式的运用。
一、表格篇
表格对每个人来说都是很容易理解的,但要运用的恰当、合理、赋予秩序性,却好像不是很简单,很多朋友抱怨Dreamweaver的表格不如Frontpage操作简单、易用。其实,这里
面主要的一个原因是设计者缺乏整体的布局观,如果我们在刚开始就将要实现的布局在头脑里考虑一边,下手的时候你会觉得非常容易的。就软件来说,每个软件都有各自的操作特点,一旦你理解了软件的工作方式,你自然会将它运用的得心应手些。我们以一个常见的网页结构为例介绍表格布局,此页面由顶部的Logo和Banner区,导航菜单区,页面内容区,底部版权区组成。如下图:
霹雳布袋戏不当言论(一) 布局方法。由于浏览器显示页面内容时是下在完一个完整的表格后才显示此表格中的所有内容,因此我们应尽可能分为多个各自独立的表格,这样可以加快显示速度,而不应将所有的页面内容都放置在一个大表格中。根据上图所示,我们将我们的页面从上向下分为四个表格。
(二) 属性面板。
打开Object面板,点击 图标插入一个表格,根据需要我们插入一个单行双列的表格,宽度设为780。下面我们打开表格的属性面板,修改表格的各个参数如下图所示:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论