Dreamweaver 入门.ppt

1、Dreamweaver 入门,先认识一下网站与网页,网站：website 网页：webpage 网站是由多个网页组成的整体。 网站网页1网页2网页3 制作网站时，要先把一个一个网页制作出来，然后通过超级链接组成一个网站。（以我的个人主页为例） 网页的格式可以为：html，htm，asp，php等。 其中，网站的首页面通常命名为：index.htm 或者index.html或者default.htm 或者default.html,常见的网页制作工具有哪些,Dreamweaver Frontpage 今天我们主要学习Dreamweaver,学习目标,能够制作简单的网站（例：学生作品）,内容提纲,先

2、跟我做，别问为什么 认识dreamweaver的界面 建立站点 页面编辑 超级链接 表格设计 网页布局 层 网页代码 网页特效 网页中各种元素的编辑软件 网页素材下载 利用网络学习dreamweaver,跟我做，先别问为什么,打开Dreamweaver 插入文字和图片 保存 预览 这样，我们就制作了一个简单的页面文件。由此可见，dreamweaver和别的软件的用法有很多相似之处的。,认识Dreamweaver的界面,建立站点,Web 站点是一组具有相关主题的文档和资源。建立站点之前，应该对网站的内容结构做一些规划。 比如：以“我的个人主页”为主题的一个站点，其内容结构可能是：,建立站点（二）

3、,当对网站的内容结构有了规划后，我们就要在dreamweaver里创建站点，来保存你将要制作的网站里的所有内容（包含图片、声音、网页文档等等）。 建立站点的过程： 先在计算机上建立一个文件夹，该文件夹务必用字母命名，这个文件夹里将存放你的站点里的所有内容。然后，在这个文件夹里分别建立images sound animation三个文件夹（根据需要，可以建立更多的文件夹） 在菜单中选择“站点（site）”“管理站点（manage sites）”， 出现“管理站点”对话框。 在“管理站点（ manage sites）”对话框中，单击“新建（new）”，然后从弹出式菜单中选择“站点（site）”。

4、然后，按照提示一步一步建立站点。,页面编辑,在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西：（01.htm）1.网页顶端的标题“我的主页”是一段文字。2.网页中间是一幅图片。3.最下端的欢迎词是一段文字。4.网页背景是一深紫红颜色。 5. 页面的主题是“我的主页”注意：网页背景图片和颜色的设置,超级链接,为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址等等。 在dreamweaver中，有三种链接： 1、文字图片链接 2、热区链接 3、电子邮件链接,超级链接文字图片链接,在网页中，单击了某些图片

5、、有下划线或有明示链接的文字就会跳转到相应的网页中去。 1、在网页中选中要做超级链接的文字或者图片。2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。（如下图）（注意：对于图片替代的操作）,超级链接热区链接,要使一张图片上不同位置有不同的链接，这个时候，就要使用热区链接。,热区链接的步骤：,1、首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。,实例操作,超级链接电子邮件链接,在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超级链接。制作方法

6、是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在插入栏点 或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。,表格设计,上面我们学习了简单的网页制作，但是这里有个问题：在页面中，怎样让图片、文字、动画出现在你想要其出现的位置？这就是一个页面排版的问题。 而表格就是为了实现页面的精确排版和定位的。,实例操作：改变表格的各个参数值 照片排列,实例：02.htm 练习：自己设计一种版面,网页布局,通过上面的操作，我们发现，表格虽然是一个排版定位的工具，但是，表格不能定位一个随意的位置，用起来不很灵活。 在dreamweavre中，可以使用“布局”随意的在

7、页面文档中绘制表格。,现场实例操作,制作分析,在布局视图中，公司主页可利用表格来布局。制作时先新建一个HTML文档，在布局视图中，利用布局单元格在布局视图中将文档划分为公司名称栏、导航栏、标题栏和公司站点地图等几部分，最后设置布局页的背景效果。,用表格给公司主页布局,其具体操作如下： （1）选择文件新建菜单命令，打开“新建文档”对话框，如图所示。,（2）在“类别”列表中选择“基本页”，在“基本页”列表中选择“HTML”。 （3）单击“创建”按钮，创建新的HTML文档，在文档窗口中打开。 （4）选择文件保存菜单命令，打开“另存为”对话框。,（7）在插入栏中单击“布局”选项卡，打开如图5-15所示

8、的“标准视图”和“布局视图”两种布局模式。,（8）单击“布局视图”按钮切换到“布局视图”中。 （9）单击“绘制布局单元格”按钮。将鼠标移到文档窗口中单击并拖动绘制一个布局单元格，如图所示。,（10）选中“布局单元格”边框，在属性面板中设置宽为“760”，如图所示。 （11）调整布局表格与布局单元格的右边线重合。并在绘制的“布局单元格”中暂时输入“导向科技咨询机构” 。 （12）用“绘制布局单元格”工具在“导向科技咨询机构”下面绘制8个单元格，并设置每个单元格的宽为“90”，高为“25”，再按如图所示进行排列。,（13）将光标定位到第二个单元格中输入“导向首页”，用同样的方法分别在第38个单元格

9、中输入“导向论坛”、“网上书店”、“样章试读”、“IT出版”、“疑难解答”和“下载专区”，并在属性面板中单击按钮，完成后的效果如图所示。,（14）在第一列中添加一个布局单元格，并输入“记住导向”、“珍藏导向”和“寄语导向”，并单击属性面板中的按钮，如图所示。,（15）在“寄语导向”下面添加布局单元格，并输入“动态导向快讯”。 （16）在右侧的空白区添加一个布局单元格，并输入“放置公司站点地图”，如图所示。,（17）按如图所示在“放置公司站点地图”四周添加布局单元格，并输入需要放置的内容。,（18）单击“标准视图”按钮，切换到标准视图模式下。 （19）将鼠标移到表格外边框上，当鼠标变为图标时，单

10、击选取表格。 （20）在属性面板的“背景颜色”框中输入十六进制的颜色值为“#FFAC59”，如图所示。,（21）将光标定位到“导向科技咨询机构”单元格中，在属性面板中设置单元格背景为“#FFFFFCC”，如图所示。,（22）同样方法将“本公司出版书目查询”单元格及“放置公司站点地图”两边的单元格背景颜色设置为“#FFFFFCC”，版面如图所示。,（23）将“导向首页”左边和下边的单元格、“下载专区”下边的单元格、“动态导向快讯”下方的单元格及“放置公司站点地图”单元格的背景颜色设置为“#CCCC33”，颜色设置完成后的页面效果如图所示。,（24）在视图栏的“标题”文本框中输入“公司主页”，按【

11、Enter】键标题显示在当前窗口或浏览器窗口的标题栏中，如图所示。,层,层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。 层的建立 层的父子关系 层与表格之间的转化,层的建立,1、在窗口菜单选“层”，或点插入菜单布局对象选“层”。 2、在页面中显示一个层。 3、通过周围的黑色调整柄拖动控制层的大小 4、拖动层左上角的选择柄可以移动层的位置。 5、单击层标记可以选中一个层。 6、在层中可以插入其他任何元素包括图片文字链接表格等。,层的父子关系,层还有

12、一种父子关系也就是隶属关系。在层面板中是这样表示的。 图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。 要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。,层与表格之间的转换,用层制作的网页虽然很灵活，但是，层的位置在不同浏览器中会有错位，因此，很多人习惯用层设计网页之后，再把层转化为表格。 在转换为表格之前，请确保层没有重叠。请执行以下操作： “修改（modify）”“转换（convert）”“层到表格”。即可显示“转换层为表格”对话框。,图片排版问题,图片的对齐方式,插入flash动画,为网页添加背景音乐, ,了解一些网页代码,网页代码简介 网页代码结构： 这里是文件的名称 网页的主体内容 ,和dreamweaver代码窗口联系一下,了解一些网页特效,用java等语言编写的一些绚丽多彩的网页效果代码可以直接加到网页源码中。 1、在网上输入“网页特效”，下载一些网页特效代码 2、把这些代码复制下来，放置到网页的合适位置里。 对于网页特效的代码，我们不需要理解它的原理，