Dreamweaver网页制作概论.ppt

;; 一、网页构思、素材准备;初识Dreamweave 网页制作工具有Dreamweaver 、 FrontPage 、Photoshop、Fireworks、Flash 等 。 Dreamweaver 、Fireworks、Flash 三个软件合在一起，被称为网页制作“三剑客”，这三个软件相辅相承，可谓是制作网页的最佳拍档。 Macromedia Dreamweaver是一款专业的网页制作软件，用于对 Web 站点、Web页和Web应用程序进行设计、编码和开发。无论开发者愿意享受手工编写HTML代码时的驾驭感，还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供实用的工具，使网页设计者拥有更加完美的Web创作体验。 Dreamweaver工作环境 （Dreamweaver 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。 ） 工作窗口布局 Dreamweaver 的三种视图模式（代码、拆分、设计）;　　做网页之前应先建好文件夹及子文件夹，以便??类存放网页中使用的图片、动画等素材。文件夹名一般是网页主题的名字。 练习1：建立自己的网页文件夹。 注意： 　　Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，在新建文件夹或在Dreamweaver中保存网页的时候，用英文或者数字作为文件名称，就可以避免上面的出错现象。 ;新建站点步骤： 　　打开Dreamweaver软件，在工具栏中，点击站点-新建站点，这时会弹出一个面板，在这个面板上有基本和高级两种选择。在这里，我们选择基本，给你的站点起个名字(要是英文的)，下面的文本框，要填写http地址，这个不用去管它。 　　单击下一步，会提示你“是否使用服务器技术”，选择“否，我不使用服务器技术” 。 　　单击下一步，选择“文件存放的位置”，这里文件位置，是你存放站点的路径。 　　单击下一步，选择“是否连接远程服务器”，在这里，我们选择“本地/网络”。选择“文件存储在服务器上的文件夹”，选择和上一步存放的文件在同一目录下。 　　单击下一步，会提示你是“否存回和取出文件”，这个不用管它，单击下一步，点击完成。 ; 下面使用Dreamweave制作一个简单的网页，介绍一下Dreamweave制作网页的基本流程。 1．新建网页 2．编辑网页 3．保存网页 4．预览网页 5．继续编辑网页 6．再次预览网; 页面属性的设置主要控制页面的整体外观，包括背景、标题等。Dreamweaver 提供了【页面属性】对话框，在这个对话框中提供了多种页面属性的设置方法。 1．设置背景图片 2．设置页面标题 3．设置页面边距;首页的设计;　　Dreamweaver利用表格来布局页面、排版。 　　1）点菜单“插入→表格”命令，出来一个对话框，设置好所需表格的行列数和宽度、边距、间距等。 　;　　2）点“确定”即可插入一个3×3的表格，横着的是行，竖着的是列，每一个小格叫单元格； ??? 　 　　3）在表格的边框上点一下，可以选中整个表格，下面的属性面板中也出来表格的各个选项，边框为0的时候不显示边框线； 　 　　　　;练习4：用表格布局网页 　　制作一个用表格布局网站主页的实例，效果如图所示。在本例中，采取了多种插入、修改表格的方法进行页面布局，旨在通过实例的操作练习，能够帮助读者更熟练地掌握表格布局的各个知识点，在今后的表格布局中灵活应用，方便快捷地完成页面布局。;　　在网页中输入文字有二种方法：直接输入、复制粘贴文字。 注意： 　　1）输入文字时，每段前的空两格，将输入法工具条设置为全角状态后再按空格键。 　　2）分段时观察按 Shift+Enter　Enter区别; 　　网页中所用图像格式主要有GIF、JPEG和PNG。其中使用最为广泛的是GIF和JPEG。 　　　　　　在将图片插入网页前，先将图片存放在站点文件夹下的图片文件夹中。 　　　　 1）插入图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的“图像”按钮插入，然后根据需要设置大小、对齐方式、边框等。; 3、鼠标经过图像：鼠标经过图像实际上由两个图像组成，原始图像和鼠标经过图像。这两张图片要大小相等，如果不相等，Dreaweaver会自动调整鼠标经过图像的大小跟原始图像大小一致。;　　制作一个图文并茂的网页，效果如下图所示。注意应用图像属性中的左对齐和右对齐。;　　 Flash动画以小巧、动感、富有交互性而风靡网络。在制作网页时，将Flash动画应用到网页中，能使网页更具动感，更富有感染力。 　　在网页中插入Flash制作的SWF格式动画