参考dreamweaver网站设计

《参考dreamweaver网站设计》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Dreamweaver网站设计【训练目的】通过这个技能，引导学生逐步学习创建网站站点、建立站点首页、使用表格与层、添加超链接、使用框架与表单、加入动态特效和多媒体组件、制作下拉式菜单、建立层叠样式表、测试网站和上传发布等知识。通过这部分的学习，使学生掌握运用Dreamweaver8制作教学网站的基本方法和流程。【训练步骤】1．网站的总体设计在创建站点之前，要明确站点的定位、栏目、结构、布局和风格。（1）网站的创意一个好的同站一定会有一个好的创意，创意（idea）是网站生存的关键。（2）网站的定位（即主题）网站

2、主题应具有以下特点。①主题小而精。②题材最好是自己擅长或者喜爱的内容。③题材不要太滥或者目标太高。（3）网站栏目网站栏目起导航作用，好的栏目分类可以迅速且明确地将网站的主体显示出来。应根据网站定位并结合网络教育资源的特点设置网站主栏目，再按主栏目的要求设计二级栏目、三级栏目等。（3）网站的风格风格（style）是独特的，是站点与其他同站不同的地方。风格是抽象的，是指站点的整体形象给测览者的综合感受。网站风格主要通过网站标志（Logo）、网站宣传标语（banner）、标准色彩等展现。通常网站的标准色彩不宜超过三

3、种颜色，蓝色、橙色、绿色，是教育网站的常用色彩。（4）确定网站的目录结构和链接结构a网站的目录结构不要将所有文件都存放在根目录下，按栏目内容建立子目录，在每个子目录下都建立独立的images目录，目录的层次不要太深。b网站的链接结构网站链接结构的目的是用最少的链接达到最有效率的浏览。一般建立网站的链接结构有两种基本方式：＞树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。浏览这样的链接结构时，是一级级进入，一级级退出。优点是条理清晰，访问者明确自己的位置，不会“迷路

4、”。缺点是浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。＞星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立链接。立体结构像东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者搞不清自己的位置和看了多少内容。这两种基本结构都只是理想方式，在实际网站设计中，总是将这两种结构混合起来使用，既希望浏览者可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，

5、一级和二级页面之间用树状链接结构。（5）网站的布局47网站布局主在是设计图片和文字在页面的位置，应将网站标志、主菜单等主要模块摆放在最突出的位置。网站首页布局有“国”字型、拐角型、标题正文型、左右框架型等。2.创建网站站点(1）Dreamweaver8简介Dreamweaver8是Dreamweaver的最新版本，它沿袭了以往Dreamweaver产品的工作界面风格，增加了许多新功能。MacromediaDreamweaver8是建立WEB站点及其应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编

6、辑支持组合在一起，使得各个层次的开发人员和设计人员都能快速创建网站和应用程序。从对基于CSS设计的支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员使用Dreamweaver及所选择的服务器技术可以创建功能强大的Internet应用程序，从而使用户能够链接到数据库和WEB服务器。(2）打开Dreamweaver8选择“开始

7、程序

8、Macromedia

9、MacromediaDreamweaver8”菜单项，显示Dreamweaver程序的工作界面，作为普通用户，

10、选择“设计器”进行工作区布局，单击“确定”按钮显示如图6－1所示窗口。图6—1运行Deamweaver8后出现的程序操作窗口第一次使用时，首先要创建新项目，即创建一个站点，通过单击图6－1中的“创建新项目”下的“Dreamweaver站点”来实现。(3）创建一个“赵州桥”的站点这里以中小学语文课文中《赵州桥》为例子，创建一个“赵州桥”的站点。下面这些步骤只在建站的第一次使用，按照图6－2所示文本框中的内容输入站点名称和站点的HTTP地址。47图6—2站点名字及HTTP地址定义窗口依照图6－3所示，输人站点在计

11、算机中的存储位置（即文件夹）。图6－3选择站点存储位置窗口依照如图6－4所示，在“您如何连接到远程服务器”下拉列表框中选择“无”。47图6-4站点服务器选项窗口在图6－5所示对话框中单击“完成”按钮“赵州桥”的站点就创建好了。此时，在屏幕右方出现新创建的站点赵州桥，如图6－6所示，至此一个网站的站点创建完毕。图6－5站点设置信息列表图6一6当前站点操作面板47（4）管理好站点为了便于管理，Dream