dreamweaver课件

网页设计与制作《Dreamweaver网页设计与制作》主讲：王玉刚前言网站概述通过本章的学习熟练掌握网站与网页的区别，掌握网站基本构成元素，了解网站的基本布局类型。教学目标:本节内容1.了解网站与网页2.网页的基本构成元素3.如何学好这门课程网站与网页有什么区别什么是网站？网站(WebSite)是有独立的域名、独立的存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，不一定有很多网页，主要有独立的域名和空间，哪怕只有一个页面也叫网站。由于IP地址是数字标识，使用时难以记忆和书写，因此在IP地址的基础上又发展出一种符号化的地址方案，来代替数字型的IP地址。每一个符号化的地址都与特定的IP地址对应，这样网络上的资源访问起来就容易得多了。这个与网络上的数字型IP地址相对应的字符型地址，就被称为域名。什么是网页？网页是网站的基本组成要素。有很多网页没有独立的域名和空间也只能说是网页，例如blog、qq空间、微博。总结：一个网站通常有自己的独立域名和空间，例如是一个网站，而则是这个网站所属的一个网页，网站主菜单中的栏目实际上也是一个网页。网站与网页的区别就在于，网站是一个总体，而网页是个体。网站与网页之间的关系多个网页通过超级链接，相互连接构成整个网站网页的基本构成元素1.文字2.图形图片3.超链接4.表格5.表单6.音乐、视频超链接视频图片怎样学习这门课程？多背书？多练题？多考试？多操作多实践才是王道！第一章Dreamweaver概述本章主要内容认识Dreamweaver工作界面自定义工作环境管理文档1.1认识Dreamweaver作为网页三剑客的重要一员，Dreamweaver在网页设计领域具有强大的功能，但它不能简单地定位为网页设计软件。Web站点架设可以方便地实现站点架设、管理与维护，简单地发布站点至网络网站空间，实施远端维护等操作。网页内容排版在所见即所得的工作环境中，可轻松创建表格、层和框架，对网页资料进行完美编排。网页特效制作可以通过简单的图像转换、动态行为、时间轴和层的结合实现具有各种视觉特效的网页。网页应用程序开发可以开发coldfusion、asp、asp.net、php等类型的动态网页。1.1.1Dreamweaver可以做什么新建站点利用表格排版网页资料1.1.2新增功能Dreamweavercs3增加了许多激动人心的新功能，为设计工作带来了更高效与快捷的操作。改进的CSS功能Spry构件与photoshop的集成浏览器兼容性检查Dreamweavercs4删减了不少功能。如时间轴、flash元素、站点地图等。1.2Dreamweaver工作界面Dreamweaver的操作界面由菜单栏、文档工具栏、插入工具栏、状态栏、快捷菜单、属性检查器等部分组成。编辑区文档工具栏状态栏菜单栏面板组属性检查器插入工具栏标签选择器“文档”工具栏中主要包含了一些对文档进行常用操作的功能按钮，通过单击这些按钮可在文档的不同视图间进行快速切换。代码视图代码和设计视图设计视图文档标题刷新选项可视化助理检查预览验证文件管理“插入”工具栏提供了”菜单”和”制表符”两种显示方式。包含用于创建和插入对象(如表格、图像)所用到的所有按钮。这些按钮被分类组织到各个选项卡中。模板标签选择器超级链接命名锚记图像表格状态栏位于文档窗口的底部，提供与用户正编辑的文档有关的某些信息，如当前窗口大小、文档大小和估计下载时间等。标签选择器可查看网页内容的代码标签，也可以单击标签，选中该元素。手形工具标签选择器窗口大小缩放工具文档大小和估计下载时间选取工具选择“窗口”｜“属性”命令，可以显示或隐藏属性检查器。默认将其显示在文档窗口的下方，分为”常用”和”高级”两部分。1.3自定义工作环境选择工作区布局Dreamweaver提供了编辑器、设计器和双重屏幕三种工作区布局。选择窗口—工作区布局，可相互切换。调整工作区布局默认的三种布局并不一定适合所有用户，可以通过打开、关闭工具栏和面板对工作区布局进行调整。保存工作区布局选择窗口—工作区布局—保存当前，保存已调整好的工作区布局。管理工作区布局选择窗口—工作区布局—管理，打开“管理工作区布局”对话框，删除或重命名工作区布局。1.3.1工作区调整与管理显示/隐藏面板和工具栏显示面板/工具栏可方便用户操作，但缩小了文档窗口。可根据需要是否显示或者显示特定对象。自由组合面板例如，要将“文件”面板整合到“设计”面板中，可选择“窗口”|“文件”命令，打开“文件”面板，然后右击“文件”面板的名称标签，从弹出的快捷菜单中选择“将文件组合至”|“设计”命令，即可将“文件”面板整合到“设计”面板中。面板组的基本操作通过面板组的标题栏和选项菜单，可以停靠和取消停靠面板组，移动、重命名、最大化和关闭面板组。1.3.2工具栏与面板操作编辑首选参数选择编辑—首选参数，打开“首选参数”对话框，对20个项目进行设置，使其最符合个人操作习惯。1.3.3设置便利的操作环境1.4管理文档创建新文件通过文件—新建，可创建空白文档、基于dreamweaver设计文件的文档以及通过模板创建文档。打开已有文件通过文件—打开，可以打开任何html文档或动态文档类型。保存与另存文件通过文件—保存或另存为，保存文件。文件名只能使用英文字符和阿拉伯数字，不以数字开头，且不使用空格和特殊符号。设置参数通过编辑—首选参数—新建文档，设置默认文档类型和扩展名、默认编码等。设置页面属性①单击修改—页面属性，或单击属性面板中的“页面属性”按钮，对页面属性进行设置，如页标题、背景图像和颜色、文本颜色等。在文档窗口中选择元素若是可见元素，单击或拖动元素。若是不可见元素，则选择可视化助理—不可见元素，显示不可见元素，在文档窗口中单击该元素标记。第二章：创建和管理站点2.1两个为什么？2.2站点的简介和规划2.3创建本地站点2.3网页文档的基本操作本章主要内容两个为什么？为什么要建站点？计算机上的站点是什么样？建站点是第一步很重要，创建之后，DW就可以帮忙来管理站点，比如说插入图片的时候将图片都放在定义站点的文件夹内，代码自动写入相对地址，保证网站发布的时候完整，如果不定义站点，则代码就会写成绝对地址，指向本地电脑，发布的时候图片链接会失效。总而言之将所用的文件都放在定义站点的文件夹内就没有问题的，如果你定义好了站点，一旦出现站点外的文件，DW会提醒你的。远程站点和本地站点网页的开发和制作一般在客户端进行，之后向服务器上传。本地站点：在开发阶段，临时存放在客户开发端的站点。远程站点：开发结束后，发布在服务器端存放的站点。计算机上的站点网页主页图像子文件夹网站位置文件夹名称建立站点原则不要使用中文目录；网络无国界，使用中文目录可能对网址的正确显示造成困难。不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆。尽量使用意义明确的目录；便于记忆和管理呢。创建站点——规划站点index.htm(或default.htm)picture.htmclothes.htmmusic.htmDW建立网站初步建立本地站点1.目的：在本地建立一个文件夹，此文件夹放置网站用到的所有文件。2.步骤：(1):站点/新建站点/高级(2):进行如下设置：站点名称------------为本地站点命名本地根文件夹-----设置此文件夹的路径默认图象文件夹---设置此站点图象文件的默认存储路径。（可不设置）HTTP地址----------输入网站的网址。（可不设置）注意：当本地站点建立好后，自动显示“站点”面板。站点名称，仅仅给设计者起到标识说明作用。选择是否每次拷贝文件到本地站点时都自动刷新本地文件夹列表，否则需要手动刷新。输入上传站点的URL,也可不输入内容。实例设计练习Tryyourself在硬盘根目录下新建一个文件夹，给文件夹命名，如:happy。[我的电脑(选择硬盘)/文件/新建/文件夹]在Dw中，选择“站点新建站点”命令。输入站点名称（开心站）（站点名称可以是中文）找到本地根文件夹(D:\happy)西文页面属性的设置打开：属性面板－－页面属性修改－－页面属性注意：链接颜色跟踪图象：相当于特殊的辅助线，是网页排版的一种辅助手段，只在网页编辑时可见，对最终结果没有影响。.注意与背景图象的区别总结用DW制作网站的初步，包括站点的建立和编辑，网页文件的建立。（重点）网页文件的编辑。