Dreamweaver网站设计课堂练习.doc(更新)5篇

第一篇：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列的表格。在第二行嵌套表格的5列分别输入文本“赵州桥简介 ”“茅以升论赵州桥 ”“作者李青简介”“ 茅以升简介”“ 赵州桥建筑三绝”，并在第3行输人赵州桥简介的正文。（正文内容见素材文件夹）

2）让新网页沿袭一致的风格

网页设计中通常需要统一网页的整体风格，统一的风格大部分涉及到网页的布局形式、文字属性、网页背景色以及链接文字属性，等等，这样才能使网页的总体效果更佳，使用户在浏览该网站时有一个延续性，产生整体感。

选择网页的第1行第1列，将首页的图片插入，调整好大小；选择网页的第1行第2列，选择背景颜色，并输入文字“赵州桥简介”，调整好文字的大小。赵州桥简介浏览效果图如图6-16所示。

图6-16赵州桥浏览效果图

（2）添加超链接

所谓超链接是指从一个网页指向一个目标的连接关系。超链接在本质上属于网页的一部分，它是一种允许某网页同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。这个目标可以是以下几种存在形式：①一段文本；②一张图片；③一个电子邮件地址；④一个文件；⑤一个应用程序。

在网页中常用来作为超链接的对象一般是一段文本或一幅图片。设置了超链接的对象，当光标悬停其上时会产生变化，当浏览者单击已经链接好的文字或图片时，链接目标将在浏览器中被打开。

l）文字超链接的添加和编辑

打开已创建好的主页/赵州桥／index.html，选中并右击第3行的文本“赵州桥简介”，在弹出的快捷菜单中选择“创建链接”，在弹出的选择文件对话框中选择要进行链接的文件//赵州桥/htmls／jianjie.html,如图6－17所示。

图6-17 选择超链接目标文件窗口

【注意】一般来说，打开方式有4种：-blank，-parent,＿self，-top。其中-self表示在本窗口中打开，为默认的打开方式：-blank表示在新窗口中打开；-parent表示在上级窗口中打开；＿top表示在最上层窗口中打开。用户可以根据实际情况，自己选择所需要的打开方式。

单击”属性”面板中“目标”右边的下拉列表框，可以选择以上4种打开方式之一。

2）图片超链接的添加和编辑

现在为“赵州桥简介”添加一个返回主页的超链接，这里用来作为超链接的对象是一个返回按钮的图片。打开网页Jianjie.html，选择表格的第4行，设置背景颜色，对齐方式为右对齐，再选择“插入|图像”莱单项，插入作为返回按钮的图片// images/back04．gif;（图片在素材库中，并将图片文件back04.gif拷贝到网站images文件夹中）单击返回按钮的图片，单击“属性”面板中“链接”右边的文件夹按钮，选择好超链接的目标文件／／赵州桥／index.html即可。

为方便浏览者使用，在表格第2行也附一个返回按钮的超链接，方法如上。3）快速转移，加入锚点

作为使用者，都有这样一个经历。对于一篇长的网页，要花上一定时间才能找到所需的那一部分内容。现在使用网页的锚点（也称为书签）功能，为同一个网页添加超链接，即可快捷地跳转到指定内容上。

刚才在表格的第2行嵌套了一个表格，并输入了文本内容为“赵州桥简介 ”“茅以升论赵州桥 ”“作者李青简介”“ 茅以升简介”“ 赵州桥建筑三绝”，现在再对这5个文本进行网页内锚点的设置。

具体步骤如下。

①创建锚点。为了创建锚点，将光标移动到需要加入锚点的地方，这里放在正文文本“赵州桥简介”的最前面，单击常用工具栏（见图6－18）中的锚点工具按钮，在打开的命名锚点的窗口中输入锚点名称为jianjie1，单击“确定”按钮，则在文本中出现一个锚点图标作为一个标志）

。（注：锚点图标在实际浏览器中是不可见的,只是在制作网页中

图6－18常用工具栏

②链接锚点。锚点创建好后，还必须链接锚点。选择表格第2行第1列中的“赵州桥简介”四个字，在属性面板上的“链接”文本框中输入符号#和锚点名称。这里输入刚才创建的锚点名称“＃jianjie1”。

重复上面的操作，为正文“茅以升论赵州桥 ”“作者李青简介”“ 茅以升简介”“ 赵州桥建筑三绝”创建好锚点，分别命名为jianjie2和jianjie3等。

4）为E－mail添加超链接

在网页上创建

E－mail（电子邮件）链接，能方便浏览者快速反馈意见。当浏览者单击Email链接时，可立即打开浏览器默认的Email处理程序，收件人邮件地址被Email超链接中指定的地址自动更新，无需浏览者输入，这里在首页中设置一个Email的超链接。

打开首页／／赵州桥／index.html，选择表格第2行最后1列中的“联系电邮”，单击常用工具栏中插入电子邮件超链接工具按钮，在弹出的“电子邮件链接”对话框中的E－mail文本框中输入电子邮箱的地址即可。5）制作指向Web上的网页的超链接

先选中要建立超链接的文本“参考网站”，在属性面板对话框中的URL地址栏中输入超链接的目标地址，本活动中输入的目标地址为http://www.xiexiebang.com，则刚才定义好的样式就应用到所选择文本上，各种链接效果一步到位。

9.模板的创建和应用模板

一个网站在制作过程中，经常需要创作大量布局相同或相似的网页，这时候，应用模板来创建网页不失为一种很好的方法，下面简单介绍基于本站主页面为模板的网页模板的创建和应用。

(1)模板的创建

模板创建的大致过程是：打开一个已制作好的网页（以此网页为模板）→另存为模板→新建可编辑区域（可重复进行）→保存。

具体步骤如下。

①为方便操作，这里将本网站主页．．／index．html作为模板，为了不破坏它作为主页，首先将其另存为别的网页名称．．／mb．html，并做一定的修改，将中间的图片删除。

②打开网页．．／mb．html，选择“文件|另存为模板”菜单项；在弹出如图6－57所示“另存为模板”对话框中选择模板存放的站点，在“另存为”文本框中为模板输入一个唯一的名称，单击“保存”按钮。这时弹出如图6－58所示的对话框，单击“是（Y）”按钮。这时在站点文件中自动生成一个Templates文件夹，文件夹中存放着刚才保存的模板文件／templates／mb．dwt，如图6－59所示。

图6－57“另存为模板”对话框

图6－58 模板链接更新选择对话框

图6－59 生成的模板文件

③在常用工具栏中单击“模板”工具按钮

右边的下三角按钮，从弹出的如图6－60所示的下拉列表中选择“可编辑区域”选项。在打开的如图6－61所示的“新建可编辑区域”对话框中的“名称”文本框中为该区域输人一个唯一名称。单击“确定”按钮。

创建的模板如图6－62所示，如果需要多个可编辑区域，可以重复步骤③，以满足实际网页编辑的需要。

④保存制作好的网页模板。选择“文件|保存”菜单项。一个网页模板就制作好了。

图6－60 模板按钮下拉列表

图6－61“新建可编辑区域”对话框

图6-2 创建了可编辑区域的模板网页

（2）应用网页模板

下面就将网页模板应用到已经制作好的网页上。为了方便操作，一般采用先制作好网页，再应用模板的方法。具体步骤如下。

①制作一个需要应用模板的网页。选择“文件|新建”菜单项，创建一个基本的网页页面，如图6－63所示。

②选择“修改|模板”菜单项，在如图6－64所示的下拉菜单中选择“套用模板到页”菜单项。

③在打开的如图6－65所示的“选择模板”对话框中，选择需要套用的模板mb后，单击“选定”按钮。

④ 将内容应用到模板的可编辑区域，如图6－66所示。⑤ 应用了模板网页的效果图。

在网站需要制作大量风格一致的网页时，应用网页模板是一个非常便捷的方法，制作方法简单，而且网页页面变动也非常灵活，能取得事半功倍的效果。

图6－63准备应用模板的网页

图6-64展开的模板下拉菜单

图6-65“选择模板”对话框

10．网站测试和上传

一个网站做好后，需要对站点进行测试和上传。（1）整理网站，清点网页

为了防止同页、图片、文字、声音、影像出现链接错误，在上传同站之前一定要做好链

接的检查工作，以免网站在使用时出现错误。

选择“窗口|结果”菜单项，打开结果检查属性面板，如图6－78所示；单击“链接检查器”标签，单击左边的“链接检查”按钮

右下方的下三角按钮，在打开的菜单中选择“检查整个当前本地站点的链接”，如果没有出现错误链接的情况，则站点链接没有错误；否则就按照提示的错误信息进行修改。如果没有问题就可以上传文件了。

图6－78 链接检查标签

（2）寻找一个免费的空间，给网站安个家

Internet上的免费网站空间很多，这里选择一个国内大型的提供免费个人主页空间的站点“虎翼网 http：／／www．51．net”，进人后在申请表中认真填写所需的申请资料后提交，通常在几天后就可以收到一封电子邮件，主要内容是用户上传的主机服务器名、用户登录名和密码，同时会提供一个免费的城名供用户使用。

（3）上传网站到WEB服务器上

①选择“站点|管理站点”菜单项，在打开的站点管理器中，单击“编辑”按钮，选择“远程信息”，如图6－79所示。在对话框中依次输人FTP主机名、主机目录、登录用户名、密码，这些选项在申请后收到的电子邮件中都有，要认真填写。

图6-79站点FTP设置

② 在图6-79所示对话框中进行设置后,单击“测试连接”按钮，如果连接不成功，则检查设置或咨询系统管理员。

③ 再几次单击“下一步”按钮后单击“完成”按钮，即完成了远程站点的设置。④ 在“文件”面板中选择站点的本地根文件夹，单击“文件”面板工具栏的上传文件按钮，Dreamweaver会将所有文件复制到服务器默认的远程根文件夹。

多数网络空间提供者都设置有服务器默认的文件夹，在“文件”面板中将“本地视图”转换为“远程视图”可看到此文件夹，第一次上传时，必须搞清楚网络空间提供者指定的服务器默认的存放网页的文件夹，上传完毕后即可在浏览器中输入浏览地址，测试上传的结果，至此整个网站制作全部完成。

【总结】。

本章节介绍运用Dreamweaver网站设计制作软件的相关知识与技能。以制作一个完整 的网站作品为例，引领学生经历创建一个网站的实践活动过程，逐步掌握利用Dreamweaver创建一个网站的基本方法。

网站设计是一门系统的学科，仅仅依靠一个Dreamweaver网页编辑软件是远远不够的，在本章中没有涉及网页代码编程和图形图像动画设计的学习，而这些是表达一个网站的精华所在，因此本章的目标仅仅是针对那些初涉网站设计的人员。

第二篇：dreamweaver中怎样创建网站相册

dreamweaver中怎样创建网站相册

若要创建网站相册，请执行以下操作：

1.在 Dreamweaver 中，选择“命令”>“创建网站相册”。

2.在“相册标题”文本框中输入一个标题。该标题将显如今包含缩略图地页面地顶部地灰色矩形中。

假如需要，能够在“副标信息”和“其它信息”文本框中输入最多两行附加文本，该文本将直接在标题下显现。

注意：创建网站相册前 确保你的电脑上安装了 fireworks，命令——创建网络相册，会自动调用fireworks,，自动生成网页

3.单击“源图象文件夹”文本框旁地“浏览”按钮，选择包含源图象地文件夹。然后单击“目标文件夹”文本框旁地“浏览”按钮，选择（或创建）一个目标文件夹，用以放置一切导出地图象和 HTML 文件。

目标文件夹不应当已包含相册 － 假如已包含相册，并且假如任何新图象与先前使用地图象同名，则能够会覆盖现有地缩略图和图象文件。

4.指定缩略图图象地显现选项：

o 从“缩略图大小”弹出菜单中选择缩略图图象地大小。图象将按比例缩放，以创建适宜具有指定象素尺寸地方框地缩略图。

o 若要在相应地缩略图下显现每个原始图象地文件名，请选择“显现文件名”。

o 输入显现缩略图地表地列数。

5.从“缩略图格式”弹出菜单中选择缩略图图象地格式：

GIF WebSnap 128 创建 GIF 缩略图，这些缩略图使用包含多达 128 色地 Web 顺应性调色板。

GIF WebSnap 256 创建 GIF 缩略图，这些缩略图使用包含多达 256 色地 Web 顺应性调色板。

JPEG － 品质较高创建品质较高且文件大小较大地 JPEG 缩略图。JPEG － 文件较小创建品质较低且文件大小较小地 JPEG 缩略图。

6.从“相片格式”弹出菜单中选择大尺寸图象地格式。对于每个原始图象，将创建一个具有指定格式地大尺寸图象。您为大尺寸图象指定地格式能够不同于为缩略图指定地格式。

留神

因为 GIF 和 JPEG 之外地原始文件格式能够无法在一切浏览器中正确显现，所以“创建网站相册”命令不允许您将原始图象文件用作大尺寸图象。请留神，假如原始图象是 JPEG 文件，则所生成地大尺寸图象地文件大小能够比原始文件大（或许其品质比原始文件低）。

7.选择大尺寸图象地缩放百分比。

假如将“缩放”设置为 100%，将创建与原始图象等大地大尺寸图象。请留神，缩放百分比将应用于一切图象；假如原始图象地大小不一样，那么按同一百分比缩放就能够不会产生所需地效果。

8.选择“为每张相片树立导览页面”，为每个源图象创建一个 Web 页，该 Web 页包含标为“后退”、“主页”、“前进”地导航链接。

假如选择此选项，缩略图会链接到导航页。假如不选择此选项，缩略图链接将直接链接到大尺寸图象。

9.单击“肯定”以创建网站相册地 HTML 和图象文件。Fireworks 启动（假如它尚未运行）并创建缩略图和大尺寸图象。假如所包含地图象文件数目较多，这能够会需要几分钟地时间。当处理完成后，Dreamweaver 将再次处于活动状态并创建包含缩略图地页。

10.当出现指示“相册曾经树立”地对话框时，单击“肯定”。

相册页出现之前能够需要等候几秒钟。各缩略图依据文件名按字母顺序显现。

第三篇：Dreamweaver网页设计教学计划

《Dreamweaver网页设计》教学方案

第一部分 说明

1．课程的性质与任务

“Dreamweaver网页设计”是计算机网络技术专业（专科）的一门统设必修课。本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。

2．与相关课程的衔接、配合、分工

先修课程：计算机应用基础Photoshop图像处理等。

后续课程：Flash动画制作等。

３．课程的教学基本要求

本课程要求学生掌握基本的HTML语言。学会使用Dreamweaver开发工具进行网页设计。这是一门重在实践的科目，因此需要学生多上机、多进行实际操作，把老师所教授的各种网页制作、版面设计以及程序熟练制作或调试出来，并且能够在此基础上有所创造、有更进一步的发挥。

4．课程教学要求的层次

1．掌握：

要求学生能够全面掌握所学内容，并能够用其分析、应用与Dreamweaver网页设计相关的问题，能够举一反三。

2．理解：

要求学生能够较好地理解与Dreamweaver网页设计相关的问题，并且能够进行简单分析和判断。

3．了解：

要求学生能够一般地了解的所学内容。第二部分 媒体使用与教学过程建议

学时分配

课程教学总学时90学时，5学分。其中授课36学时，实训54学时。

2．多种媒体教材的总体说明

1．本课程文字教材为合一型教材，文字教材作为学习的主要媒体，着重反映课程的基本知识和针对性、应用性，在形式上要便于自学。在内容上包括基本理论知识讲解和实训两部分。

2．视频媒体配合文字教材的讲授，内容重点在于实训及辅导。

3．CAI课件作为网络教学媒体，可以在互连网上使用也可以单机使用。

3．教学环节

以主教材讲授为主，其它媒体作为辅助教学资源，以学生自学为主。

4．主要教学媒体的使用与学时分配

内容

序号 1 2 3 4 5 6 7 8 9 10 11 12 13 14

第1章 Dreamweaver基础

第2章 网页设计语言基础

第3章 文本和图像处理

第4章 表格与页面布局

第5章 创建超级链接

第6章 层与层动画

第7章 框架与框架网页

第8章 创建ＣＳＳ样式表

第9章 资源、模板和库

第10章 媒体对象的应用

第11章 表单处理

第12章 创建Web站点

第13章 制作动态网站

第14章 网站的维护和上传

2学时 3学时 3学时 3学时 2学时 3学时 2学时 3学时 2学时 3学时 3学时 2学时 3学时 2学时

教学内容 理论学时

合计

36学时

第三部分 教学内容和教学要求

第1章 Dreamweaver基础（2学时）

教学内容：

Dreamweaver 的历史和简介

Dreamweaver 的安装过程

Dreamweaver 的全新界面

改进的设计与开发环境

主菜单介绍

对象控制面板介绍

教学要求：

掌握：Dreamweaver的基本特点、新增功能及界面组成。基本操作，如安装、新建、打开、导入、保存、关闭等。

理解：新增功能、界面组成的优点。

了解：Dreamweaver可以为我们做些什么。

第2章 网页设计语言基础（3学时）

教学内容：

HTML及XHTML语言介绍

常用的网页语法标记

教学要求：

理解：HTML及XHTML语言介绍，常用的网页语法标记

第3章 文本和图像处理（3学时）

教学内容：

文本属性面板

编辑文本和插入对象

设置文本的格式

编号与项目符号

在网页中插入图像

图像的应用

教学要求：

掌握：设置文本属性和格式；编号与项目符号的使用；插入、编辑和排版图像。

理解：如何进行图像调整。

第4章 表格与页面布局

教学内容：

表格的基本操作

单元格的基本操作

表格的自动套用格式

表格的创建

表格的编辑

创建布局单元和表格

教学要求：

掌握：如何插入、编辑表格，创建布局单元和表格。

理解：表格在网页排版中的作用。

了解：使用页面布局模式进行网页排版的方法。

第5章 创建超级链接（2学时）

教学内容：

（3学时）

链接分类

创建超级链接

链接的四种状态

创建Email链接

管理超级链接

教学要求：

掌握：创建超级链接和Email链接，会设置链接的各种状态。

理解：超级链接几种状态之间的差别和共同点。

了解：创建Email链接中的各种技巧。

第6章 层与层动画（3学时）

教学内容：

层的概念

创建层

层操作

层与表格的相互转换

层动画的概念与设计

教学要求：

掌握：层的概念与使用

理解：层动画的概念与设计

第7章 框架与框架网页（2学时）

教学内容：

框架的基本概念

创建框架和框架集

框架的使用

框架和框架集的属性设置

教学要求：

掌握：框架和框架集的创建；框架的使用。

理解：使用框架的优缺点。

第8章 创建ＣＳＳ样式表（3学时）

教学内容：

CSS层叠式样式表

定义CSS样式表

创建并链接到外部CSS样式

设置CSS样式的格式化参数

设置超链接显示状态

添加各种ＣＳＳ效果

教学要求：

掌握：内部ＣＳＳ和外部ＣＳＳ的添加方法，编辑ＣＳＳ属性，使用ＣＳＳ进行页面的排版，创建各种ＣＳＳ效果。

理解：使用CSS排版的优点。

了解：如何使用ＣＳＳ控制背景、鼠标以及添加其它特殊效果。

第9章 资源、模板和库（2学时）

教学内容：

资源管理

模板的创建

模板的编辑

定义模板可编辑区域

创建，管理和编辑库项目

教学要求：

掌握：模板的创建，模板的编辑，定义模板可编辑区域

理解：资源管理

了解：创建，管理和编辑库项目

第10章 媒体对象的应用（3学时）

教学内容：

插入Flash对象

插入Shockwave对象

插入视频

插入ActiveX控件与Java小程序

填加声音

教学要求：

掌握：插入Flash对象、插入Shockwave对象、插入视频、插入ActiveX控件与Java小程序、填加声音

第11章 表单处理（3学时）

教学内容：

表单概述

表单对象

创建表单

处理表单

创建动态表单

教学要求：

掌握：创建表单、处理表单和设置表单参数。

理解：表单的概念和作用。

了解：如何使用表单创建交互式界面。

第12章 创建Web站点（2学时）

教学内容：

站点规划

在Dreamweaver8中创建站点

管理站点与站点文件

使用站点地图

为网站指定服务器技术

教学要求：

掌握：规划站点、建立和管理站点；使用站点文件和地图。

理解：创建站点的必要性。

了解：服务器技术的指定。

第13章 制作动态网站（3学时）

教学内容：

Access数据库基础

ODBC数据源设置

ASP与Web服务器配置

Dreamweaver8动态网站设计

创建与数据库连接

教学要求：

掌握：数据源的设置，如何配置Web服务器，如何创建与数据库的链接。

理解：数据库在动态网站设计中角色的重要性。

了解：设置数据源和创建数据库链接的技巧

第14章 网站的维护和上传（2学时）

教学内容：

在本机中测试网站

预览网页效果

网站的查错

发布网站到服务器

教学要求：

掌握：Dreamweaver8的测试、预览和发布设置。

理解：网站排错的必要性。

了解：如何发布网站到服务器。

实训内容

（实训分为必做和选做内容，可根据实际的实验条件选做。实验总计54学时）

实训1：建立Web网页（必做）

实训2：文本及其格式化（必做）

实训3：图像（必做）

实训4：超级链接（必做）

实训5：表格和页面布局（必做）

实训6：框架（必做）

实训7：层（必做）

实训8：模板与库（必做）

实训9：表 单（必做）

实训10：行 为（必做）

实训11：多媒体组件的插入、使用代码设计网页与站点管理（必做）实验12： 动态网站制作（选做）

实验13：ASP与SQL Server数据库相连（选做）

第四篇：Dreamweaver网页设计实验报告

实验报告

专业

XXXXXX

班级

XX 班

学号

XXXXXX

姓名

XXX

报告完成日期

2012-12-26

指导教师

XXX

评语：

成绩：

批阅教师签名：

批阅时间：

一、制作时间

2012年12月18日至2012年12月26日。

二、实习内容

1、使用Dreamweaver制作网站，该网站为福建工程学院网站

2、网站不少于8个页面，主页和各模块相关页面；

3、页面中包含文字、图片；

4、使用CSS实现网页相关页面设置，要求在实现网页内能够显示文字，图片等信息；

5、使用网页浏览器进行网站测试。

三、实习环境

1、硬件环境：计算机一台；

2、软件环境：Dreamweaver cs4；

3、测试环境：IE、firework等网页浏览器。

四、网站总体设计

1、网站主题

本网页是以福建工程学院网站为主题，针对不同的年龄阶段的人给出了不同的学院的信息。

2、设计思路

首先构思了基本网页的布局，主页采取了常用的1-（1+1+1），附页采用了1-（1+1），上了多个网 最后决定参照福建工程学院的官方网站进行制作，但是布局并不相同 素材取自福建工程学院官方网站，部分图片取自百度，网站包括1个主页7个子页，子页包含了所有的学校状况，分别为：学校简介、现任校领导、教学机构、管理机构、校纪校训校歌、校园风光、新校区建设；采用了较难的二级菜单 和 JVAV技术实现导航栏上面的图片进行4张轮播。

五、制作步骤

1.首先确定网页的主题后，从网上查看各名校的网站，并从中寻找思路开始做网页。经过长时间的浏览，最终选择福建工程学院作为参照（网址：http://www.xiexiebang.com）

2.受福建工程学院主页的影响我自学了图片轮播和二级菜单，从而制作了轮播图片和二级菜单。

3.由于对于JVAV和表单的知识并不是非常了解所以有些地方需要实现的实现不出来放弃了，期中研究了最久的就是 导航轮播和下面的有块区域的图片轮播，结果因为不知道如何同时初始化2个JVAV函数 最后以失败告终 只好放弃

4.本次制作最难的地方是导航菜单的二级菜单和图片轮换

在制作过程中，遇到很多次的制作混乱，最后还是老师帮忙解决的。

5.原计划那些JVAV代码因为无法同时初始化他们放弃了 只好以一些列表代替

6.最后，将一些小细节的东西做了些处理，最后打包上交。

六、实习总结

这次是我们web的期末考试制作，通过这一次的制作，不仅巩固了以前学过的知识，还学会很多课堂上未教授的东西。通过老师的讲解、查阅资料，解决了很多制作上的困难，这一点我在这要好好感谢我们的XX老师和我们宿舍的学姐，谢谢她们帮我很大的忙。

七、参考文献

《HTML+CSS网页设计与布局》 《PHP编码》

第五篇：课堂练习教学设计

Unit 1 Warm-up & Lesson 1

I.用括号内单词的正确形式填空。

1.After a very active career she was looking forward to a happy and ________(peace)retirement.2.We come here once a year expecting a quiet, ________(relax)holiday.3.Most city people lead a(n)________(stress)life: too many places to go, too many people to see, too many bills to pay, etc.4.My ________(person)opinion is that the students should be doing more work outside the classroom.II.选用方框内合适的短语并用其正确形式填空(每个短语限用一次)。

get up, wake up, take up, switch on, switch off, go off

1.I must get rid of this large table;it ________ too much room．

2.Don’t ________ the television — the baby is sleeping.3.Please ________ the lights as you leave.4.Few men these days ________ to give a lady a seat on a bus．

5.Last night, the lights ________ in several villages because of the storm.6.She has just ________ from a deep sleep and doesn’t know what has happened.III.用适当的介词或副词填空。

1.I’d like to arrive 20 minutes early so that I can have time ________ a cup of tea.2.If there is not a good play on CCTV 8, I would switch ________ to CCTV 5.3.The children quickly got bored ________ staying indoors.4.The dancers were standing ________ a circle around the fire.5.The manager is still working his way ________ the application forms.6.I don’t feel that I’m ready ________ my driving test yet.7.Get ________ a Number 16 bus in front of our house.It’ll take you straight to the town centre.8.I think I’ll have soup ________ lunch today.9.Those old pictures brought ________ a lot of happy memories to me.10.The air was filled ________ the sound of children’s laughter.IV.根据括号内的提示翻译下面句子。

1.我们晚到一会儿有关系吗?(matter)

_______________________________________

2.我想她今天会在那儿。(suppose)

_______________________________________

3.我想在这儿呆到五点钟。(until)

_______________________________________

4.汤姆总是第一个到校。(the first)

_______________________________________

5.你们老板一回来你就通知我。(as soon as)

_______________________________________

6.到那儿用不了一个钟头。(less than)

_______________________________________

7.把它拿近一些，好让我看得更清楚些。(so that)

_______________________________________

8.我现在不想出去，而且我还得工作。(besides)

_______________________________________

V.从每题所给的两个选项中选出正确的一项。

I 1.read / am reading a really interesting book at the moment.It 2.says / is saying that our personalities 3.depend / are depending on our birth order, that is, our position in relation to our brothers and sisters.For example, according to this book, the eldest child in a family 4.usually likes / is usually liking to be the leader.Now I 5.know / am knowing why my elder sister 6.always bosses / is always bossing me and my brother around!I am the youngest child in our family and, apparently, youngest children 7.usually get / are usually getting on well with everyone.I 8.think / am thinking it’s true, but things might change because my mum 9.has / is having another baby next month!

Unit 1 Lesson 2

I.根据下面各句句意以及所给单词的首字母或汉语提示词，写出该单词的正确形式(每空一词)。

1.It’s an ideal place in which to relax and escape the p________ of modern life.2.They’ve r________ the prices in the shop, so it’s a good time to buy.3.My sister is on a d________ to lose some weight.4.Our tent won’t s________ another storm like the last one.5.Your studies will s________ if you spend too much time playing football.6.—Coffee or tea?

—I’d p________ tea, thanks.7.Most British schools ________(组织)social events for the students.8.Some of Hollywood ________(工作室)are interested in this new actor.9.Kate’s a(n)________(专家)on teaching small children.II.选用方框内合适的选项完成下面对话(有两个多余选项)。

A.I prefer classical music to rock music.

B.I like classical music.

C.I don’t like rock music very much.

D.Oh, forget it, then.

E.I can’t believe that.

F.Not very much.

G.I don’t agree with you.

Two friends are having some drink together and talking about music.A: Black or white coffee?

B: White, please.A: Look!There’s a rock concert tomorrow evening.Do you want to go?

B: 1.________ It’s too noisy.A: What kind of music do you like?

B: 2.________ Do you?

A: 3.________ Classical music sends me to sleep.B: 4.________

A: It’s true.B: You are kidding.A: No, I am not.B: 5.________ How about another coffee?

A: OK, that sounds good.B: Waiter!

III.阅读下面材料，在空白处填入适当的内容(1个单词)或括号内单词的正确形式。

Are you burning the candle at both ends? Do you feel you have no time for 1.________(you)? Do you forget to call family 2.________ birthdays or holidays? Have you stopped going out with friends because you are so busy? Do you have trouble 3.________(relax)and having fun?

If you are a workaholic, you should try to slow 4.________ and spend time on your personal life.You should balance the many important areas of your life, 5.________(include)your health, friends, family and work.Here are some tips for living a(n)6.________(health)lifestyle.First, stop overworking and remember 7.________(spend)quality time with friends and family.Second, learn to eat, talk, walk and drive more 8.________(slow).And don’t forget to turn your mobile phone off sometimes.Third, learn to live in 9.________ present time and stop worrying about the future.And finally, take 10.________ easy and begin enjoying the simple things in life.Stop to smell the roses.答案

Unit 1 Warm-up & Lesson 1

I.1.peaceful 2.relaxing 3.stressful 4.personal

II.1.takes up ?? 2.switch on 3.switch off

4.get up 5.went off 6.woken up

III.1.for 2.over 3.with / of ? 4.in

5.through 6.for 7.on 8.for

9.back 10.with

IV.1.Does it matter if we’re a bit late?

2.I suppose she’ll be there today.3.I’d like to stay here until five o’clock.4.Tom is always the first to get to school.5.Please let me know as soon as your boss comes back.6.It’ll take less than an hour to get there.7.Bring it nearer so that I can see it better．

8.I don’t want to go out now, and besides, I must work.V.1.am reading ? 2.says ?? 3.depend

4.usually likes 5.know ?6.is always bossing

7.usually get 8.think 9.is having

Unit 1 Lesson 2

I.1.pressures 2.reduced ?3.diet

4.stand 5.suffer ?6.prefer

7.organise 8.studios 9.expert

II.1-5 CBFED

III.1.yourself 2.on ?3.relaxing

4.down 5.including ?6.healthy

7.to spend ?8.slowly 9.the 10.it