网页设计3【荐】.pptVIP

3.1 Dreamweaver 简介  Dreamweaver 是由Micromedia公司出品的一款网页制作的专业软件，与Fireworks、Flash并称为网页制作的“三剑客”。 Dreamweaver 也是一款“所见即所得”的可视化软件，适合专业的网页设计师使用。 7、面板组 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。 1、网站的目录结构 网站的目录是指你建立网站时创建的目录。清晰的目录结构有利于站点的维护， 网站的链接结构是指页面之间相互链接的拓扑结构。研究网站的链接结构目的在于用最少的链接，使得浏览最有效率。 建立目录结构的一些建议： 1．不要将所有文件都存放在根目录下 2．按栏目内容建立子目录 3.在每个主目录下都建立独立的images目录。 4.目录的层次不要太多，建议不要超过3层 （1）不要使用中文名字的目录名。 （2）不要使用过长的目录名。 （3）尽量使用意义明确的目录名，尽量做到“见名知意”。 说明： “index.htm”为默认的首页，“images”文件夹用来存储网页中所用到的图片等文件，“_private”文件夹用来存放自动生成的一些关于网站属性的文件。 在输入文字时，一般情况下让系统自动换行，若强制换行，可按回车键（会空出一行）或按Shift + Enter（没有空行的强制换行）。 注意：在设置文字格式的时候，尽量为文字设置一些常用的字体。通常的文本都设置为宋体、12磅或10磅为好。如果非常需要使用某种特殊字体来表达特殊效果，可以将该部分文字制作成图片插入网页中。 2. 插入日期 Dreamweaver提供了一个方便的日期对象，该对象使用户可以以任何喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期。 将插入点放置到要插入日期的位置，执行“插入”→“日期”命令，弹出“插入日期”对话框，选择一种日期格式。设置完毕后，单击“确定”按钮完成日期的插入。 一、网站的链接结构 建立网站的链接结构有以下两种基本方式： 1．树状链接结构 2．星状链接结构 链接结构的设计，在实际的网页制作中是非常重要的一环，采用什么样的链接结构将直接影响到版面的布局。 首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。 * 3.1 Dreamweaver 简介 3.2 制作第一个网页 3.3 文本修饰 3.4 超链接应用 第3章 Dreamweaver 如果用户熟悉手工编写标记代码，Dreamweaver包括许多与编码相关的工具和功能，其使用将更加灵活。并且，借助Dreamweaver还可以使用服务器语言（例如ASP、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web应用程序。 目前，Dreamweaver的最新版本是Dreamweaver cs5 。 一、 Dreamweaver 界面介绍 在首次启动Dreamweaver时会出现如图3-1界面,这是一个“工作区设置”对话框，在对话框左侧是Dreamweaver的设计视图，右侧是Dreamweave 的代码视图。由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。 图3-1 “工作区设置”对话框 .组合面板 活动面板内容 插入工具栏 文档工具栏 文档编辑窗口 属性面板 Dreamweaver 标准工作界面大致可以分为以下几个区域: ⒈标题栏: ⒉菜单栏： ⒊文档工具栏： ⒋ “插入”栏： ⒌文档窗口： ⒍属性栏： ⒎状态栏： ⒏活动面板组： 1、菜单栏 文件：用来管理文件。插入：用来插入各种元素. 修改：具有对页面元素修改的功能。 文本：用来对文本操作。命令：所有的附加命令项 站点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。 2、文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。界面如图所示。 3 “插入”栏 包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共个二级菜单共137个按钮。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。面板的界面如图。 4、文档窗口