dreamweaver网站设计知识.doc

Dreamweaver网站设计 【训练目的】 通过这个技能，引导学生逐步学习创建网站站点、建立站点首页、使用表格与层、添加超链接、使用框架与表单、加入动态特效和多媒体组件、制作下拉式菜单、建立层叠样式表、测试网站和上传发布等知识。通过这部分的学习，使学生掌握运用 Dreamweaver 8制作教学网站的基本方法和流程。 【训练步骤】 1．网站的总体布设计 （1）网站的创意 一个好的同站一定会有一个好的创意，创意（idea）是网站生存的关键。 （2）网站的主题 网站主题应具有以下特点。 ①主题小而精。 ②题材最好是自己擅长或者喜爱的内容。 ③题材不要太滥或者目标太高。 （3）网站的风格 风格（style）是独特的，是站点与其他同站不同的地方。风格是抽象的，是指站点的整体形象给测览者的综合感受。 （4）确定网站的目录结构和链接结构 a 网站的目录结构 不要将所有文件都存放在根目录下，按栏目内容建立子目录，在每个主目录下都建立独立的images目录，目录的层次不要太深。 b 网站的链接结构 网站链接结构的目的是用最少的链接达到最有效率的测览。一般建立网站的链接结构有 两种基本方式： ＞树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。测览这样的链接结构时，是一级级进入，一级级退出。优点是条理清晰，访问者明确自己的位置，不会“迷路”。缺点是测览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。 ＞星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立链接。立体结构像东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者搞不清自己的位置和看了多少内容。 这两种基本结构都只是理想方式，在实际网站设计中，总是将这两种结构混合起来使用， 既希望浏览者可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。 2.创建网站站点 (1）Dreamweaver 8简介 Dreamweaver 8是 Dreamweaver的最新版本，它沿袭了以往 Dreamweaver产品的工作界面风格，增加了许多新功能。Macromedia Dreamweaver 8是建立 WEB站点及其应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能快速创建网站和应用程序。从对基于 CSS设计的支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员使用Dreamweaver及所选择的服务器技术可以创建功能强大的Internet应用程序，从而使用户能够链接到数据库和WEB服务器。 (2）打开 Dreamweaver 8 选择“开始|程序|Macromedia| Macromedia Dreamweaver8”菜单项，显示Dreamweaver程序的工作界面，作为普通用户，选择“设计器”进行工作区布局，单击“确定”按钮显示如图6－1所示窗口。 图6—1运行Deamweaver8 后出现的程序操作窗口 第一次使用时，首先要创建新项目，即创建一个站点，通过单击图6－1中的“创建新项目”下的“Dreamweaver站点”来实现。 (3）创建一个“赵州桥”的站点 这里以中小学语文课文中《赵州桥》为例子，创建一个“赵州桥”的站点。下面这些步骤只在建站的第一次使用，按照图6－2所示文本框中的内容输入站点名称和站点的HTTP地址。 图6—2 站点名字及HTTP地址定义窗口 依照图6－3所示，输人站点在计算机中的存储位置（即文件夹）。 图6－3 选择站点存储位置窗口 依照如图6－4所示，在“您如何连接到远程服务器”下拉列表框中选择“无”。 图6-4站点服务器选项窗口 在图6－5所示对话框中单击“完成”按钮“赵州桥”的站点就创建好了。此时，在屏幕右方出现新创建的站点赵州桥，如图6－6所示，至此一个网站的站点创建完毕。 图6－5 站点设置信息列表 图6一6 当前站点操作面板 （4）管理好站点 为了便于管理，Dreamweaver提供了方便的站点管理工具。 ①创建网站的文件夹 为了便于管理网站文件，首先应创建一些文件夹，用以存储对应的文件。在“赵州桥”这个站点中，需要创建三个文件夹：images文件夹用来存放网站所需的图片文件；medias文件夹用来存放网站所需的声音、动画、