12 网页制作教案.docx

1、12 网页制作教案12、DREAMWEAVER 8.0 网页制作教案（一）一、网站的基本概述（一）、网页：网页是计算机连接网络时浏览器窗口中显示的一个页面，是计算机网络最基本的信息单位,它实际是一个文件,存放在世界某个角落的某一台计算机中,当我们在浏览器输入网址后,网页文件会被传送到你的计算机,这样就可以利用网页来访问计算机了。 网页分类：（1）静态网页:网页中包含文字、图片、动画、视音频。（2）动态网页:网页中包含文字、图片、动画、视音频以及交互功能. （两者的主要区别:是否包含交互功能） 例：自动控制原理精品课程网站：是众多网页的集合。（二）、网页的基本构成元素：包含图片，文字，超级链接，

2、动画，表单，视频音频等元素中的一种或多种 （三）、网页的页面设计：（1）、网页布局：网页布局是根据你所设计网站类型而设计的，不同的网站有不同的风格，一般包括了标题栏，页眉区（通常包含网站标志），导航区，正文区、页脚。 例：Visual Basic 学习网站（2）、配色原则：网页设计要达到赏心悦目的目的，需要注意色彩的搭配与风格的设计。例：麦当劳（3）、版面编排：例：清华大学 版面既要有美感又要实用，美感是令人感觉舒服的主要因素之一，但美感是要为内容服务的，所以版面的编排要注意各部分内容的比例关系，也就是 “经营位置”。作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分;图片也有

3、大小，而且有横有竖之别。图片和文字都需要同时展示，不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。必须根据内容的需要，将图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体。可以依据如下几条来做：1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，

4、要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。（四）网站设计的原则 （） 网站主题和内容明确。（） 网页色调和谐，布局清晰。（） 网站方便易用，提供有效的导航条，使人很容易从每一页上访问到网站的任何部分,最好在每一个网页同样的位置上都有相同的导航条。（）避免长文本页面,每一个网页的高度不能超过三倍的浏览器高度，避免使用过大的

5、图像，不要使用横滚动条。（） 避免错误链接，保证链接有效。二、如何策划一个网站（制作网站的目的以及如何实现）步骤：1. 给网站定位，确定网站的性质 给出网站的主题和名称(例如求职，聊天，社区，计算机技术，网站开发，娱乐，旅行)2. 确定网站的栏目：也就是导航区的内容，栏目的实质是一个网站的大纲索引，所以应该将网站的主体明确的显示出来，栏目要主体突出。3. 确定网站的目录和链接结构 ，画出网站的目录结构图。4. 绘制首页网页的布局：如：圣诞节网站，见网页例子：网页表格布局.htm5、根据你的网站构思准备素材（文字、图片、动画、视频音频等元素）.在你的文件夹下面分别建立images 和txt 、o

6、thers三个文件夹存放你的素材。三、Dreamweaver 软件的启动四、Dreamweaver 8.0操作界面DREAMWEAVER 8.0操作界面（一）工作区的组成结构：（二）、Dreamweaver面板和面板组：（三）菜单栏中各个菜单的基本作用： 文件：包括对文件的各种操作。 编辑：包含了对文件的拷贝，粘贴，查找与替换等命令。 查看：使用查看菜单可以查看文档的相关内容。 插入：用于将对象插入文档中。包括图片标记、flash动画、视频、表格、超级链接、日期、水平线等：属性可以在属性面板中进行可视化设置 修改：可以使用修改菜单更改选定页面元素的属性。 文本：可以设置文本的格式，如段落格式、

7、字体、文本环绕排版及停止文本环绕等。 命令：提供各种命令的访问。 站点：提供用于管理站点以及上传和下载文件的菜单项，可以创建站点和对 已有站点进行编辑 窗口：提供对Dreamweaver中的所有面板，检查器和窗口的访问。 帮助：提供了对Dreamweaver文档的访问。五、定义一个站点举例：Dreamweaver学习网站 （一）、定义一个站点 在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理，也可以尽可能的减少一些错误的出现，如路径出错，链接出错。我提倡的做法是：建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在

8、images文件夹内，HTML文件放在站点文件夹内。文件的命名也是非常重要的，不要随便乱起些名字，最好做到一看文件的名字就知道是什么内容的网页文件。提倡用英文或者拼音给文件命名，不要使用中文的名字，因为有的浏览器对中文支持不太好，有可能出现链接的错误。 定义站点的步骤：、 启动dreamweaver 8.0中，在菜单栏中选择站点管理站点。 在弹出的管理站点对话框中，点击新建 。 接下来需要给站点起一个名字，输入您网站的名字，可以定义中文名。这里起名为dreamweaver学习网站,按下一步2、按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”

9、。3、按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。4、按下一步，选择要定义的本地根文件夹,这里选择D或E盘中你的文件夹，点“选择”按钮，因为没有使用远程服务器，就选择“无”。按下一步5、按完成按钮，一个站点就定义好了。6、打开文件面板（窗口文件），在您的站点文件中新建三个文件夹，用于存放与站点有关的图片等文件，分别是命名为images、txt、others。新建五个网页文件，分别命名为：index.html、kcjs.html、kcxx.html、yxzp.html、sczy.html打开D盘看看你刚刚建立网站的文件。 素材文件名和

10、网页文件名必须用英文或英文状态下的数字，不能使用中文练习1：在dreamweaver 中定义一个站点，文件夹放在D 盘的目录下。六、常用功能介绍（一）、表格的使用： 制作网页数据表格：熟悉表格的插入、合并、拆分与嵌套；表格的制作.htm 表格的基本构成标记 ：（1）创建表格：第一步：在Dreamweaver 8.0中运行“插入表格”命令，弹出属性设置窗口，添入插入表格的行数、列数、表格的宽度，根据自己的需要来设置表格的相应属性即可。小提示：表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义，比如设置宽度为窗口宽度的100，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果

11、设置宽度为500像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。第二步：点击窗口中的“OK”按钮之后即可在Dreamweaver 8.0中新建一个表格，而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、表格的背景图片（介绍如何插入横铺垫、竖铺垫、不重复的背景图片）、色单元格的对齐方式等参数进行调整。用标签选择器选择表格，将光标定位在表格的第一个单元格内，可以看到状态栏左侧的标签选择器处显示为“bodytabletrtd”，其中table表示表格，tr表示表格中的行，td表示单元格，现在td被加粗显示，说明光标处在单元格内。单击一下table，标签选择器处显示为

12、“bodytabletrtd”（如下图），再看编辑区内的表格，表格周围为一圈黑线，表示表格被选中了，四周还有几个黑色的小方块，是表格拖放手柄，可以用来改变表格的大小。（2）基本使用（举例说明：表格的制作.htm） 步骤：第一步：先插入一个行列的表格；第二步：选中表格中第二行第二列的单元格，接着点击属性模板中的“拆分单元格”按钮，这样就把选中的单元格拆分为二个单元格，按照同样的方法再将表格中其他需要拆分的单元格拆分。第三步：选中表格中第九行中第二列和第三列的单元格，接着点击属性模板中的“合并单元格”按钮，这样就把选中的两个单元格合并成为一个单元格，按照同样的方法再将表格中其他需要合并的单元格合并

13、。第四步：将表格第九行的三个单元格全部选中，再将属性模板中的背景颜色（Bg）一项设置为“#FFFF00”，这样表格第一列中的单元格背景全部变为黄色。第五步：在表格中输入相应的文本，为了美观可以在属性面板中进行居中设置。第六步：为了使表格产生立体效果，可以将整个表格选中，然后在属性面板中设定表格边框的宽度（Border）为7，并且将边框颜色（Border color）设置为灰色即可。小提示：选取整个表格常用的方法：1把鼠标移动到表格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取整个表格。在单元格中右击鼠标，并且从弹出菜单中选择“表格选择表格”命令选取整个表格。用鼠标点击任一个单元格，接着按两

14、下“CtrlA”组合按钮选取整个表格。完成上述操作之后，我们就可以在Dreamweaver 8.0中定制出颇具专业水准的表格了。练习2、新建一个网页，在网页中插入一个3行3列的表格，设置表格属性（边框和背景颜色），试着对目标行和列进行拆分、合并及新增表格的操作。（3）利用表格来定位网页表格在网页布局中有着举足轻重的地位，很多网站的页面都是以表格为框架制作的，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，灵活、熟练地使用表格，会使你在网页制作中如虎添翼。表格的网页定位主要通过将网页内容分成若干个区，然后将相应的内容分别填入不同的表格，从而做成非常规范与专业的网页，下面就

15、来看看dreamweaver学习网站是如何通过表格实现网页布局的。表格定位网页：如index_wlr.html 是一个只含表格的网页。为方便网站能在在800600分辨率下会显示正常，无横滚动条，我们编辑的网页宽度就定为750象素，高度可以大些，在浏览器中显示时会有竖直滚动条。总体布局：在菜单栏选择插入命令，下拉的菜单中选择表格，在弹出的对话框中选择一个，宽为750像素，1行1列的表格，并设置边框粗细、单元格边距、单元格间距均为0；页眉区： 观察到网页最上部是页眉区，页眉区可以放嵌套一行一列的表格，用于放置一个宽为750高的图片文件或flash文件；导航区：嵌套一行五列的表格，用于放置五个导航；

16、正文区：正文区总得说来是由一个一行二列的大表格构建而成，所以首先插入一个一行二列的表格，在左边一列的单元格中插入一个16行列的表格，在右边一列的单元格中插入一个7行3列的表格。布局页脚：网脚是由一个大的表格组成，可以插入一个1行列的表格，表格的宽设置为750象素。练习3、打开dreamweaver学习网站站点的index.html文件，设置页面属性，并利用表格定位网页，保存网页。（二）文字的插入 介绍编辑字体列表。注意：在网页上打入空格的办法是：把输入法调为全角。 在网页上换行的办法是：shift+Enter。只按Enter则为换段。（三）图片插入：设置图片对齐方式，使文本产生环绕效果。例如：

17、建立文本环绕右边：、停止文本环绕：在文字代码中插入（四）插入水平线： 它的颜色设置要通过代码设置，宽和高可以通过属性面板 （五）页面属性的设置：在编辑网页之前，先对页面属性进行设置，便于保证网页风格的统一，当然，页面属性的设置是随时可以进行的。举例：在标题上输入：dreamweaver学习网站，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色。设置左边界，顶部边界，边界宽度，边界高度都为0象素，可以使页面中的表格与背景没有空隙。如果不设置边界，顶部边界，就会默认表格与顶部和边界有明显的空隙用得比较多的还有背景图像的设置，选择一个已经做好的图像，就可以设置成页面的背景图像。页面属性设置完

18、毕后，我们会发现代码窗口出现了如下代码（黑色部分）：body margin-top: 0px; 页面顶部边界为0 background-image: url(images/dt.gif); 页面背景图像 a:link text-decoration: none; color: #666666;a:visited text-decoration: none; color: #3333CC;a:hover text-decoration: underline; color: #660000;a:active text-decoration: none; color: #CCFF33;body,td

19、,th font-size: 12px; color: #666666;font-family: 宋体;line-height: 20px; 行距（需要在代码区设置，它的大小应该比文字大小要大，否则会吃掉一部分字体。）练习4、试在练习3中建立的网页文件index.htm中练习插入文本、插入水平线、图片并设置图片的垂直边距和水平边距、设置页面属性。（六）日期的插入：在插入栏选择日期，在弹出的对话框中选择显示的格式。（七）E_mail链接的插入：在插入栏选择电子邮件链接，在文本中输入要显示的文本，在E_mail中输入需要链接的邮件地址。（八）交换图象效果的制作：（插入图像对象鼠标经过图象）鼠标经过

20、图象的效果是当鼠标指针经过或者按下按钮的时候，图像或按钮的形状或颜色就会发生变化，如图像变换，发光，或者阴影出现等等。是网页变的生动活泼起来。看dreamweaver学习网站导航演示：鼠标移动到图片上的时候，图片变成了另外一幅，当鼠标移开后恢复到原来的图象。制作步骤：1、光标移动到欲插入的位置，点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框：【图像名称】鼠标经过图像的名称，名称是自定义的，只要不与同页面另一个鼠标经过图像名称相同即可，也可以不填。【原始图像】页面开始时显示的图像【鼠标经过图像】鼠标经过的时候显示的图像。【替换文本】图像无法正常显示的时候出现的文本注释，也是图像正常显示

21、时鼠标指向链接时的说明，也可以不填。【前往的URL】点击鼠标后链接的目标。【预载鼠标经过图像】浏览网页时两个图片都同时被下载，当鼠标经过时无需从网上下载，而是调用预先下载的图像，减少延迟，使效果平滑流畅。（九）flash动画插入 、 flash按钮的插入 、flash文本的插入，可以来制作导航栏。练习5、试在练习3中建立的网页文件index.htm中练习插入插入水平线、flash动画、flash按钮、日期、交换图象（十）了解简单的HTML：超文本标志语言，简要的介绍网页中使用的超文本标识语言HTML的基本概念和用途通过一个简单的html示例（html.html）了解html的基本构成，介绍ht

22、ml的基本组成部分.如果深入了解可以参考： （十一）制作滚动的公告文字在网页上可以方便地设置文字上下左右移动，控制文字移动的标点词,如下格式：文字在移动在浏览器中显示时，文字在移动这几个字左右移动。还有一些重要的属性。dirrction:控制移动方向，可取left,right,up,down四个值；behavior:移动方向，可取scroll (循环移动),slide(只走一圈),alternate(来回移动)；loop:指定循环次数，不输入或-1表示无限循环 height,width:移动区域的高和宽，单位像素scrollamount:移动的快慢，整数越大则越快scorlldelay:每移动一步之后的延时，单位毫米bgcolor:移动区域的背景色onmouseover=this.stop() 鼠标覆盖时停止滚动 onmouseout=this.start() 鼠标离开时开始滚动如下面的代码就上一个常见的实现向上滚动文字的原代码；祝您圣诞快乐！（十二）创建网站相册： 在你站点下建立一个放置数张图片的文件夹,本实例是将文件夹命名为photo。 练习6、试在练习4中建立的网页文件index.html中制作制作滚动的公告文字您的网站初步构思 1、 网站的主题和名称： 2、网站的栏目（也就是导航区的内容）：3、网站的目录结构图：4、网站的链接结构结构图：5、绘制首页网页的布局草图