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 文件夹用来存放网站所需的声音、动画、视频等多媒体文件；htmls文件夹用来存放网站的网页文件。

具体操作是：右击“站点一赵州桥，在弹出的快捷菜单中选择“新建文件夹”菜单项，在新文件夹的文本框中输入如图6－7所示的三个文件夹名。

图6一7 当前站点文件列表②站点的管理单击图6－7所示赵州桥下拉列表框，在下拉列表中选择“管理站点”，弹出“管理站点”对话框，该功能可以方便地对已创建的站点进行管理。

3．首页的编辑创建“赵州桥”的首页。

右击“站点-赵州桥”，在弹出的快捷菜单中选择“新建文件”菜单项，在新建文件文本框中输人index．html。

【注意】网站首页的文件名一般默认为：index.htm，index.html，Index.asp，default.htm，default.html，default.asp等，双击index.html文件，可以进人网站首页的编辑状态。

（1）首页的总体设计双击站点index.html文件，进入站点首页编辑。

1）网页的属性设置具体步骤如下。

①设置网页标题。

在首页上方的“标题”文本框中输人首页的标题“赵州桥”，如图6—8所示。

图6—8 主窗口工具栏②设置网页背景颜色或图像。

右击首页空白处，在弹出的快捷菜单中选择“页面属性”，打开如图6－9所示的页面属性设置窗口，单击“背景颜色”右边的颜色框，选中合适的颜色；如果要设置预先准备好的背景图像，可以单击“背景图像”右边的“浏览”按钮，选择准备好的图像文件。

选择好图像文件后，可以在“重复”下拉列表框中选择背景图像的排列方式。

图6－8 页面属性设置窗口2）用表格给网页内容布局定位在设计页面时，通常利用表格来定位页面元素（插入表格操作看书本p239）。

首页布局由顶部的Logo和Banner区、导航菜单区、页面内容区、底部版权区组成，如图6－9所示。

首页内容效果图6-10所示。

图6－9页面面布局效果图图6-10 首页浏览效果图下面介绍用表格布局页面的具体操作方法（布局表格宜采用自上而下的方法布局，不宜采用由外到内的方法布局，此首页页面由四个表格组成）。

①选择【插入】|【表格】命令。

在弹出的【表格】对话框中插入1行2列的表格。

在打开的【属性】面板中将该表格的宽度设置为770像素，高度为120像素，边框为1，对齐方式居中。

如图6－11所示。

②在所插入的表格中调整左右两个单元格宽度作为Logo区和Banner区。

如图6－12所示。

图6-11 设置布局表格的宽度和高度③重复①②的方法，在所绘制的表格的下面再插入一个1×8列表格作为【导航区】如图6－12所示。

图6－12④按照相同的方法，在【导航区】的下面绘制一个1×2表格，并调整左右单元格，分别作为［栏目区］和【主文档区】。

如图6-13所示。

图6-13所示⑤在【栏目区】和【主文档区】的下面完成【版权区】表格的绘制。

如图6－14所示。

图6－14以上表格的制作也可以采用布局表格和布局单元格工具来绘制，这里不作介绍。

3）用背景颜色和背景图像美化网页表格对网页表格也可以进行背景颜色或背景图像的选择。

右击要设置的表格单元格，在弹出的快捷菜单中选择“属性”菜单项，弹出属性对话框，单击“背景颜色”右边的颜色框，选择单元格的颜色，各单元格的背景颜色请按图6-15首页效果图设置；如果要设置背景图像，可以单击“背景”文本框右边的文件夹按钮，选择事先准备好的背景图像文件。

【注意】背景图像文件也要事先复制到images文件夹中。

4）表格的嵌套表格的嵌套是指将一个表格插入到指定的单元格中。

这里在栏目区、主文档区分别插入5行1列以及3行1列的表格。

表格的宽度为100%，边框大小为0，并设置各单元格的宽、高的大小。

（2）丰富网页内容1）文字与图像的插入与设置（详细内容看书本p243）①按图6-15首页效果图输入各栏目文本，并设置各单元格背景颜色和字体大小颜色等。

②在logo区插入图片20.jpg并设置大小为150*120，插入的图片要保存到网站的images文件夹里。

（图片在素材images文件夹中）。

2）插入其它媒体元素p250①插入Flash动画文件Flash动画的文件小，不失真，可播放mp3音效，互动效果极佳，而且Flash动画还可以应用在网页中制作超链接、按钮菜单、窗体甚至是互动游戏，因此Flash动画广泛地应用于网页中。

打开“赵州桥”网页，在文档区第一行插入一个Flash文件，这里采用的是banner.swf 的Flash文件，文件在素材文件夹中，将banner.swf保存在赵州桥网站medias中，选择“插入|媒体|Flash”菜单项，在弹出的文件选择框中选取文件／赵州桥／medias／banner.swf ，再调整它的大小等格式即完成插入文件。

②插入视频Dreamweaver支持多种格式的视频文件。

与插入Flash文件的操作相同，将光标定位到需要插入视频文件的位置，执行主菜单“插入/媒体/插件”命令。

③嵌入声音文件在Dreamweaver中可以加人不同类型的声音文件，常见的声音文件类型有：mid，wav，aif，mp3和ram等。

在网页中嵌入背景音乐可使用“行为”的方法嵌入。

（3）首页的整体制作效果到此为止，可以看看首页制作的大体情形了。

首先要将它保存好，可以单击“文件|保存”菜单项进行保存。

现在，按快捷键F12打开一个浏览器，其预览效果如图6－15所示。

【注意】默认的浏览器为Internet Explorer。

图6-15 首页浏览效果图4．添加超链接p245（1）添加新网页在网页中使用超链接，能够使每个独立的网页之间产生一定的相互联系，从而使若干单独的网页形成一个有机的整体。

l）新网页的添加和编辑具体步骤如下。

①新网页的添加。

右击图6－7中的／／赵州桥／htmls文件夹，在弹出的快捷菜单中选择“新建文件”，在新建文件的文件名文本框中输入jianjie.html文件名；按此方法依次创建以下几个网页：jiaoan1.html, jiaoan2.html, biaodan.html, tupianku.html。

②新网页的编辑。

双击新创建的的jianjie.html，打开网页，将网页的标题名修改为“赵州桥简介”。

创建一个4 行1列的表格，宽度为770像素，在第一行嵌套1行2列的表格，在第2行嵌套1行5列的表格。