网页制作与设计入门.ppt

一、 Dreamweavercs4概述 1、Dreamweavercs4的安装 下载安装程序； 进行安装 wangyesheji201209@163.com 密码：wysj123456 收件箱 2、 Dreamweavercs4的工作区 （1）标题栏； （2）菜单栏； （3）插入面板组； （4）文档工具栏； （5）标准工具栏； （6）文档窗口； （7）状态栏； （8）属性面板； （9）浮动面板。 3、创建站点 （1）站点的分类 本地站点和远程站点 本地站点：网页制作者制作网页和测试网页的一个总的文件夹。不能在互联网中浏览。 远程站点：是本地站点的一个映射，结构基本相同，可以让任何上网的浏览者浏览的文件。 (2)创建本地站点 站点|新建站点 (3)管理站点 编辑站点； 复制和删除站点； 注意： 删除站点只是删除了根文件夹和dreamweaver 之间的关联，但是文件夹本身及其里面的内 容仍然存在。 4、用Dreamweavercs4创建文件 （1）主要的文件类型：HTML文件 （2）文件|保存（或者ctrl+s） （3）文件的命名一般使用英文字母和数字， 但不能以数字开头，也不能在文件名中使用空格、特殊字符或标 点符号，文件名最好不要使用汉字，因为许多浏览器不支持汉字命名的文件。 二、制作基本的网页 一、文本标题 1共设置了6级标题,1—6级,每级标题的字体大小依次递减 2设置标题方法： （1）选中文本或段落； （2）格式|段落； 属性|格式，下拉菜单选项； 插入面板|文本 练习举例 二、处理段落 1、输入文本 （1）直接输入 （2）复制：定位光标，编辑|粘贴 （3）文件|导入|word文档 (4)把word文档直接转换html文件 2、特殊字符 （1）定位光标 （2）“插入”面板|文本|字符:其他字符| （3）“插入”菜单|HTML|特殊字符 （4）键盘 （5）软键盘 3、插入日期 （1）插入|日期 （2）常用|插入日期按钮 4、文本的编辑 （1）方法：选中文本|属性 （2）改变文本的类型、样式和大小 （3）改变字体的颜色 （4）为文字设置更多的样式 5.文字的其他设置 （1）文本分段与换行 分段：enter 分行不分段：shift+enter （2）连续输入多个空格： 全角状态；ctrl+shift+空格； 编辑|首选参数|允许输入连续空格 6、页面设置 7、首选参数(再讲 跟踪图像) 跟踪图像： 可以在“跟踪图像”文本框中指定复制设计时作为参考的图像。该图像只供参考，当文件在浏览器中显示时并不出现。 调节“透明度”，确定跟踪图像的不透明度，从完全透明到完全不透明。 注意：设置“跟踪图像”之后，若再设置页面背景图像，则在设计视图中看不到页面背景图像，预览时才能看到。 8、项目列表和编号列表 （1）创建列表 项目列表：无序列表 编号列表：有序列表 (2)列表的嵌套 三、插入图像 1、网页图像的一般格式 （1）GIF格式（图形交换格式） 带动画效果 (2)JPG格式（联合图像专家组标准） 电子照片 (3)PNG格式（可移植网络图形） Photoshop中的图片 2、插入图像 (1)插入菜单|图像 (2)插入面板|常用|图像 操作举例 3、设置图像属性 注意： （1）图片文件最好独立存放于单独的文件夹。 （2）图片文件名尽量不使用汉字和特殊符号，否则可能导致图片在浏览器中不能显示。 4、插入其他图像元素 （1）插入图像占位符 准备好将最终图像添加到web页面之前使用的图形，在使用浏览器时，它将显示为一个红叉。 方法：插入面板|常用|插入图片下拉按钮|图像占位符 插入菜单|图像对象|图像占位符 （2）插入鼠标经过图像插入|图像对象|鼠标经过图像 注意：主图像和次图像大小要一致 如果不一致，将自动调整第二个图像的大小以匹配第一个图像的属性 举例： dreamweaver精彩网页设计实例导航\ch03\3.5 （3）插入导航条功能：实现网页的导航方法：插入|图像对象|导航条 注意：每个网页文件只能包含一个导航条 举例： dreamweaver精彩网页设计实例导航\ch02\2.3 四、插入超级链接 网站是由一个个的网页构成的，网页之间不是彼此孤立而是相互关联的。 网页之间的关联一般是通过“超级链接”的方式。 超级链接由两部分组成：链接载体和链接目标。 链接载体：页面中引导浏览者去单击某个超级链接的载体，是一种指针。 许多页面元素都可以作为链接的载体，如文本、图像等。 链接目标:超级链