参考dreamweaver网站设计.docVIP

Dreamweaver网站设计 【训练目的】 通过这个技能，引导学生逐步学习创建网站站点、建立站点首页、使用表格与层、添加超链接、使用框架与表单、加入动态特效和多媒体组件、制作下拉式菜单、建立层叠样式表、测试网站和上传发布等知识。通过这部分的学习，使学生掌握运用 Dreamweaver 8制作教学网站的基本方法和流程。 【训练步骤】 1．网站的总体设计 在创建站点之前，要明确站点的定位、栏目、结构、布局和风格。 （1）网站的创意 一个好的同站一定会有一个好的创意，创意（idea）是网站生存的关键。 （2）网站的定位（即主题） 网站主题应具有以下特点。 ①主题小而精。 ②题材最好是自己擅长或者喜爱的内容。 ③题材不要太滥或者目标太高。 （3）网站栏目 网站栏目起导航作用，好的栏目分类可以迅速且明确地将网站的主体显示出来。应根据网站定位并结合网络教育资源的特点设置网站主栏目，再按主栏目的要求设计二级栏目、三级栏目等。 （3）网站的风格 风格（style）是独特的，是站点与其他同站不同的地方。风格是抽象的，是指站点的整体形象给测览者的综合感受。网站风格主要通过网站标志（Logo）、网站宣传标语（banner）、标准色彩等展现。通常网站的标准色彩不宜超过三种颜色，蓝色、橙色、绿色，是教育网站的常用色彩。 （4）确定网站的目录结构和链接结构 a 网站的目录结构 不要将所有文件都存放在根目录下，按栏目内容建立子目录，在每个子目录下都建立独立的images目录，目录的层次不要太深。 b 网站的链接结构 网站链接结构的目的是用最少的链接达到最有效率的浏览。一般建立网站的链接结构有 两种基本方式： ＞树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。浏览这样的链接结构时，是一级级进入，一级级退出。优点是条理清晰，访问者明确自己的位置，不会“迷路”。缺点是浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。 ＞星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立链接。立体结构像东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者搞不清自己的位置和看了多少内容。 这两种基本结构都只是理想方式，在实际网站设计中，总是将这两种结构混合起来使用， 既希望浏览者可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。 （5）网站的布局 网站布局主在是设计图片和文字在页面的位置，应将网站标志、主菜单等主要模块摆放在最突出的位置。网站首页布局有“国”字型、拐角型、标题正文型、左右框架型等。 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所示，在“您如何连接到远程服务器”下拉列表