dreamweaver基础教程

计算机网络技术实训讲义第1页第一部分、网页设计基础知识一、“网络在服务出现之后才变为彩色的！”在服务出现之前，人们只能在网络上进行简单的交流，网站也远远不是我们现在看到的五彩缤纷的网站，在和真正意义上的网页出现之后我们的网络才变的如此丰富多彩。有了服务我们就可以在网络上传输声音、图象甚至多媒体。现在网页设计已经遍布各个领域，无论是企事业单位还是个人都希望通过网络了解世界，也希望通过网络让世界了解自己。所以网站设计是各行各业都用得到的一门技术。人们通过编写代码以及应用一些网页编辑工具编辑网页，通过超链接等方式结合在一起，从而形成一个在网上信息发布与收集的整体，然后使用网站发布工具将这些网页发布到网上，就成为我们看到的网站了，网页设计就是设计这些网页并将它们链接起来并发布到网上的过程。网网站站的的类类型型商业型网站----网络是一个绝好的广告牌、而网络更是一个无穷大的市场介绍型网站----展现公司、企事业单位的风采功能型网站----网络不仅是一个绝好的市场，更是一个无穷大的办公场所个人网站----个性的体现、个人魅力的无限发挥综合型网站----网络发展的趋势二、html语言1、一个简单实例htmlheadtitlemyfirstpage/title/headbodymyfirstpage/body/html２、（hupertextmucketlanguage）超文本标记语言的特点是所有的语句都包含在标记中，如html和/html，这些标记通常都是成对出现。三、各种网页编辑工具简介Dreamweaver与Flash、Fireworks组合Frontpage2000HotdogPagemaker等等四、安装Dreamweaver8到学院ftp站点中下载Dreamweaver8根据提示安装，安装完成后第一次使用时填入序列号以保证正常使用。五、网页制作工作流程1、网站的主题定位（1）、网站的题材（2）、网站题材的建议1.主题最好是你最擅长的并且感兴趣的东西。2.主题要小而精。3.题材不要太滥或者目标太高4.体现自己的个性。计算机网络技术实训讲义第2页（3）、网站的名称2、资料搜集3、结构设计（1）、栏目和版块（2）、目录的结构设计注意以下几点：1.栏目的内容建立子目录2.在每个主目录下建立独立的images3.目录层次不要太深4.避免使用中文目录5.尽量使用意义明确的目录4、形象设计１设计网站的标志２设计网站的标准色彩３设计网站的标准字体４设计网站的宣传标语5、主页设计6、其它页面的设计7、站点规划用文件夹来保存文件、使用合理的文件名称、模板和库8、定义站点定义站点的步骤：1.打开dreamweaver4，单击Site（站点）Newsite（新建站点）的菜单项，新建一个站点。2.在出现的LocalInfo（本地站点）设置对话框中进行设置。9、首页制作1页面属性2表格设计3填写内容4添加链接和交互5添加其它内容10、测试1兼容性的测试2链接的测试11、上传１Dreamweaver的FTP上传２CuteFTP上传（1）.运行CuteFTP，设置本地站点文件夹（2）.选择文件站点管理，在出现的FTP设置对话框中进行设置（3）.然后选择连接就可以上传你的网页了（4）将左边本地站点的内容拖进右边远程站点的文件夹内。（5）在浏览器的地址栏中键入域名，检验一下，网页上传成功了吗？第二部分、使用dreamweaver8进行网页设计一、建立站点事实上，站点就是一种文档的磁盘组织形式。在Dreamweaver中有两个关于站点的概念，一个是本地站点，这是Dreamweaver虚拟出来的建在本地硬盘上的站点，另外一个是远程站点，这个才是我们通常看计算机网络技术实训讲义第3页到的网站，它保存在Internet服务器上。规划站点结构时我们需要注意下边两个规则，第一，用文件夹来保存文档，第二，使用合理的文件名称。我们是通过站点文件管理器来编辑和规划站点的。第一步：建立站点，写明本地站点信息（站点名称、本地根文件夹等）。第二步：填写远程站点信息，有四个选择来指明访问远程站点的方式。我们可以选择一个使用。第三步：填写其它的站点信息，包括站点地图规划、设计笔记和站点窗口显示栏目设置等。第四步：站点的维护。计算机网络技术实训讲义第4页二、合理的使用排版视图和表格（一）排版视图页面的设计是网站建设的重要部分。Dreamweaver提供了三种方法来创建和设计页面。通常我们使用表格来创建一个页面。另外一种方法是使用层（在后面会有详述）。Dreamweaver为我们提供了一种方便快捷的方法，就是使用排版视图。在排版视图中，Dreamweaver为我们提供了两种工具，自由表格和自由单元格。这两种工具使我们可以很轻松的在页面上拖拽单元格，按照我们想要的效果移动单元格的位置。并且，对于自由表格的每一列我们都可以设置成固定宽度，或者设置成它随浏览器窗口大小变化而变化。自由表格和自由单元格实际上也是表格和单元格，它们是Macromedia公司提出的创新，对表格使用的一种新思路。特点是能使初学者轻松完成网页设计任务，缺点是使用它们产生的表格过于繁琐，不适合于大型的网站使用。使用排版视图来规划页面要注意以下几点。第一，尽量在只规划页面时才进入排版视图，因为很多一般视图下的功能不能在排版视图下实现，同样，排版视图下的功能有一些在一般视图下也不能实现。第二，自由单元格都必须包含在自由表格中，没有孤立的自由单元格，虽然我们可以直接使用自由单元格，但实际上系统在使用自由单元格的同时先使用了自由表格。第三，单元格之间不可以重叠，但可以嵌套。第四，通过属性检查器可以对自由单元格和自由表格的样式进行设定。（二）表格表格可以控制文本和图形在页面上出现的位置，在Dreamweaver中创建表格后，可以为其添加内容、修改单元格和行属性以及复制和粘贴多个单元格等。还可以在表格和层之间进行转换。１、Dreamweaver为我们提供了十几种表格设计风格，使用这些预制的设计风格格式化表格，可以大大提高表格的设计效率。我们也可以自己设计自己的表格风格。使用命令格式化表格。２、Dreamweaver还允许我们按列的内容进行排序。使用命令排序。３、我们也可以把表格转化为层。使用编辑转换表转换成层。４、使用属性选择器来对表格属性进行设置。计算机网络技术实训讲义第5页三、文本、图像的使用及css层叠样式表文本是网页最基本、最常用的元素，因此文本的设置和操作也非常重要。（一）使用属性选择器来设置文本的格式。（二）设置字号、颜色、样式、对齐方式等等。字体的预定义，属性中的编辑文本格式.（三）设置文本的超级链接。超级链接的概念超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。绝对超级链接：绝对超级链接就是形如“”的超级链接地址，它给出了超级链接目标端点完整的URL地址，包括使用的协议“http://”。一般用于创建站外具有固定地址的超级链接文档相对路径使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。如pic/logo.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接。站点根目录相对路径站点根目录相对路径是形如“/help/help.html”的超级链接地址，它基于站点根目录，在同一个站点中网页的超级链接也可采用这种方法。计算机网络技术实训讲义第6页Targat的四个选项_blank：将链接的文件载入新的无标题浏览器窗口中。_parent：将链接的文件载入到上级框架集或包含该链接的框架窗口中。如果框架包含的链接不是嵌入的，则链接的文件将载入到整个浏览器窗口中。_self：将链接的文件载入到相同框架或窗口中。其目标的默认的，因此不需要指定。_top：将链接的文件载入到整个浏览器窗口中，因此将删除所有框架。创建命名锚记在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。创建电子邮件超级链接电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。（四）Css层叠样式表1、样式样式是一组可以控制文本块或文本区域外观的格式属性。使用样式可设置一篇文档的格式。2、Html样式HTML样式是Dreamweaver自身携带的一个非常方便的工具，帮助用户进行文本格式的设置。HTML样式实际上是一系列HTML格式化标记的组合，用于一次对文本对象进行多个方面的格式设置。HTML样式分为添加型和覆盖型两种。添加型的样式项前边有一个+号。与CSS不同，应用HTML样式是不能自动化的，就是说，如果对某些文字已经应用了一个定义的HTML样式，当改变该HTML样式所代表的格式时，原先已经设置格式的文字格式并不会变化。单击WindowHTMLStyle菜单项，打开HTML样式面板进行设置。３、CSS层叠样式表CSS是一种样式表技术，它是用来进行网页风格设计的。它可以全面的支持我们常用的大多数浏览器。它的最大的优点就是它的自动更新功能。作用：（１）可以将格式和结构分离。（２）能以前所未有的能力控制页面的布局。（３）可以制作出体积更小下载更快的网页。（４）可以更快更容易地维护及更新大量的网页。（５）浏览器成为更友好的界面。计算机网络技术实训讲义第7页分为两种，嵌入式：就是在独立的文档中应用CSS样式表。外部链接式：应用于多个文档，生成专门的*.css文件。单击WindowCSSStyles，打开CSS样式面板进行设置。它分为8个面板，分别对8个不同方面进行设置。类型面板背景面板文本块面板框面板边框面板列表面板定位面板扩展面板在实际应用中宋体9磅字是CSS样式表最普遍的例子。（五）图像图像热点的使用四、层层是一种网页元素定位技术，使用层可以以象素为单位精确定位页面元素。层可以放置在页面的任意位置。我们可以在层中放置文本、图象等对象甚至其它层。层对于制作网页的部分重叠更具有特殊作用。把网页元素放入层中，可以控制元素的显示顺序，也能控制是哪个显示，哪个隐藏。计算机网络技术实训讲义第8页使用属性选择窗口来配置层的属性。选择编辑转换层转换成表格可以把层转换为表格。五、框架框架的作用就是把浏览器窗口划分成若干个区域，每个区域可以分别显示不同的网页，框架由两个主要部分——框架集和单个框架组成。框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了一页网页显示的框架数、框架的大小、载入框架的网页源和其它可以定义的属性等，单个框架是指在网页上定义的一个区域。如果某个网页被划分为两个框架，那么它实际上包含的是三个独立的文件，一个框架集文件和两个框架内容文件。框架内容文件就是显示在网页框架中的内容。我们可以创建自定义的框架集和插入预定义的框架集。使用属性选择器来进行框架属性的设置。六、行为行为是Macromedia预置的JavaScript脚本，执行指定的任务。例如打开浏览器、播放声音或停止电影等等。事件则是由浏览器为每个页面元素定义的。为文档中的对象添加某种行为的操作如下：选中某个需要添加行为的对象，然后选择某种动作（同时设置一些参数），最后选择当什么事件发生是执行这个动作。在行为面板中设置行为及其属性。七、让网页实现多媒体功能和让网页显示动画效果――使用时间线在网页中使用图象是进行网页多媒体化的第一步。在网页中适量的加入一些图片不仅可以使网页看起来更漂亮，也能够实现一些特殊的功能。在Dreamweaver中我们不仅可以插入普通图象还可以插入轮换图象。使用属性选择器来设置图象。还可以创建热点区域，在不同的图象区域创建超链接，或者只是在鼠标移到某些区域，可以