电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目六

1、电子讲课设计Dreamweaver网页设计与制作第二版A063954示例项目六电子讲课设计Dreamweaver网页设计与制作第二版A063954示例项目六电子讲课设计Dreamweaver网页设计与制作第二版A063954示例项目六课程讲课设计讲课内容项目六制作电影网网站成立框架网页讲课班级讲课学时8课时讲课方法讲解法、演示法、讨论法。多媒体讲课与手段本项目的工作是为某影视传媒企业设计网站。网站主要为用户供给免费的高清电影在线观看和下载服务。网站的首页要求有优秀的审美、布局和制作感。在技术方面，企业提出的要求有：1.首页的显示空间切割为几个地区，每个地区能够显示不一样样的信息。2.在实现地区

2、之间显示信息时不会相互搅乱。项目内容讲课目的讲课要点与难点依据客户的要求，我们在制作企业首页应用到框架技术。利用框架技术制作网站首页能够把阅读器的显示空间切割为几个地区，每个地区能够分别显示不一样样的页面；并且取代窗口中的内容时，各个窗口之间没有影响。使用框架的长处在于能够把不一样样层次的网页中的不改变的内容放在一个框架中，把不停改变的内容放在一个框架中。把框架技术运用到我们大电影网站导航和文档阅读中，能方便接见者对网页的阅读，减少接见者下载页面所需的时间。学生经过本项目的学习，能：1、理解框架网页的基本见解2、掌握创立框架的基本方法3、区分框架与框架集的保存讲课要点：掌握创立框架的基本方法讲

3、课难点：成立框架网页项目见效讲课过程设计【任务】制作电影网首页框架网页入门除表分外，框架也是一种重要的网页布局工具，与使用表格布局网页不一样样的是，框架布局平常合适页面中一个地区发生变化，而其余地区不发生变化的网页，如网站后台管理界面和一些论坛网页。（一）认识框架和框架集在框架网页中，阅读器窗口被区分红了若干地区，每个地区称为一个框架。每个框架可显示不一样样文档的内容，相互之间互不搅乱。框架网页由框架集定义，框架集是特其余HTML文件，它定义一组框架的布局和属性，包含框架的数量、大小和地点，以及在每个框架中初始显示的页面URL。框架集文件自己不包含要在阅读器中显示的HTML内容，但是向阅读器供

4、给怎样显示一组框架，以及在这些框架中应显示哪些文档的信息。要在阅读器中查察一组框架，需要输入框架及文件的URL，阅读器随后翻开要显示在这些框架中的相应文档。使用框架最常有的状况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。比方，以下列图显示了一个由两个框架构成的框架网页：一个较窄的框架位于右边，此中包含导航条；一个大框架占有了页面的其余部分，包含网页的主要内容。当接见者阅读站点时，单击左边框架中的某一超链接，或许张开或缩短此中的栏目，或许改正左边框架的内容。（二）认识框架结构上图所示的网页最少由三个独自的网页文档构成：两个框架地区中显示的两个网页文档和把这两个文档显示在

5、一个界面上的框架集文档。在Dreamweaver中设计使用框架集的网页时，必然所有保存这三个文件，框架集网页才能在阅读器中正常显示。以下列图显示了该框架集文档的结构。在制作框架集文档时，每个框架都有自己的名称。假如没有理解前面所讲框架的见解，可能会搞不清楚框架名称和网页文档名称的差别。为方便记忆和理解，可自行设置框架名称。方法为：选择框架后，在“属性”面板上的“框架名称”编写框中直接输入（一般在创立框架时会自动指定框架名称）。（三）制作并保存框架集文档在Dreamweaver中创立框架集的方法有很多，能够选择“文件”“新建”菜单，翻开“新建文档”对话框，此后在左边的“文档种类”列表中选择“示例

6、中的页”，在“示例文件夹”列表中选择“框架集”，最后在“示例页”列表中选择框架种类并单击“创立”按钮；也能够经过选择“改正”“框架集”菜单下的子菜单，将一般页面拆分为框架集；其余，还能够够单击“布局”插入栏中的“框架”按钮，在一般页面中插入预约义的框架集。下面以第二种方法为例，介绍制作框架集的方法。步骤1启动DreamweaverCS3后，选择“文件”“新建”菜单，创立一个一般的HTML文档。步骤2为创立上下结构的框架，将插入点置于父档窗口中，选择“改正”“框架集”“拆分上框架”菜单，网页文档被拆分为上下两个框架。步骤3为把拆分框架的下面部分再次拆分为左右两个框架，将插入点置于下方框架中，此后

7、选择“改正”“框架集”“拆分左框架”菜单，下面的框架被拆分为左右两个框架。步骤4为保存包含整个框架的框架集文档，选择“文件”“保存框架页”菜单，翻开“另存为”对话框，在“保存在”下拉列表中选择保存地点，在“文件名”编写框中输入文件名，此后单击“保存”按钮。步骤5保存各个框架中的网页文档，将插入点置于最上边的框架地区中，择“文件”“保存框架”菜单，将其保存为“top.html”。步骤6依据相同的方法，将下方的两个文档挨次保存为“left.html”和“right.html”。选（四）设置框架集属性在制作框架时，Dreamweaver默认以工作界面为基准二均分框架，但在实际的网页制作中，需要依据布

8、局精准地指定每个框架的大小。从前面制作的框架集为例，介绍怎样设置框架集属性（包含指定框架大小和边框）。步骤1单击上下框架界限限可选中框架集，此时“属性”面板大将显示框架集属性，在“行”编写框中输入“100”（单位默认为“像素”），此后按Enter键，则上方框架变为设置的高度。步骤2为调整左边框架宽，单击左右框架分界限，此后在“属性”面板上的“行”编写框中输入“160”（单位默认为“像素”），并按Enter键，则左边框架变为设置的宽度。步骤3假如想为框架设定边框，则在单击框架分界限后，在“边框”下拉列表中选择“是”，此后在“边框宽度”编写框中输入宽度值（此处为“2”），单击“边框颜色”按钮设置边

9、框颜色（此处为黑色）。（五）设置框架属性设置框架属性，第一选中框架。选择框架的方法有两种，一种是在“框架”面板中选择，还有一种是使用鼠标和键盘选择，在此基础进步行设置。步骤1选择“窗口”“框架”菜单，可翻开“框架”面板。利用“框架”面板选择框架时，直接在面板中相应地区单击即可。步骤2使用鼠标和键盘选择框架的方法为：按住Alt键，此后在要选择的框架内单击。步骤3选中框架后，利用“属性”面板可设置其属性，包含框架名称、框架源文件、框架边框等。小提示：框架名称只好包含字母、下划线等，且开头必然是字母，不出现连字符、句点及空格，不可以够使用JavaScript的保存要点字。下面列出框架“属性”面板中各

10、项参数的意义。框架名称：命名采纳的框架，方便被程序引用或作为链接的目标框架。源文件：显示目前框架中网页文档的保存路径。能够在相应框架中使用图像或文档制作网页文档后保存，也能够指定已经存在的其余网页文档。边框：设定能否显示框架界限限，默认“显示”。转动：设置框架转动条的属性，“是”表示不论框架文档中的内容能否高出框架大小，都显示转动条；“否”表示不论框架内容能否高出框架大小，都不显示转动条；“自动”表示当框架内容高出框架大小时，出现框架转动条，不然不出现框架转动条；“默认”表示采纳阅读器默认的方式。不可以够调整大小：选中该复选框表示不可以够在阅读器中拖动框架边框改变框架大小。边框颜色：设置框架边

11、框的颜色。界限宽度：设置框架内容距左右边框的距离。界限高度：设置框架内容距上下面框的距离。【任求实行】在学习了框架的有关知识后，下面达成使用框架技术的播客网站的制作。（一）制作网站首页该网站首页由上下框架构成，当单击上方框架导航栏中的链接时，将在下方框架中显示链接的网页文档。步骤1将“素材与实例素材”目录下的“Bigmovie”文件夹拷贝至当地磁盘，此后在Dreamweaver中定义站点“Bigmovie”。步骤2新建文档，将插入点置于文档窗口中，此后单击“布局”插入栏中的“框架”按钮，在下拉列表中选择“顶部框架”。步骤3选择“文件”“保存框架页”菜单，将框架页保存为“index.html”。

12、步骤4单击上下框架分界限，在“属性”面板上“行”编写框中输入“260”，设置上方框架高为260像素。步骤5按住Alt键的同时在顶部框架内单击，以选择顶部框架。此后单击“属性”面板上“源文件”编写框后的“阅读文件”按钮。步骤6翻开“选择HTML文件”对话框，在“查找范围”下拉列表中选择网站根文件夹，在文件夹列表中选择网页文档“top.html”，此后单击“确立”按钮。步骤7依据相同的方法，设置下方框架源文件为“main.html”，此时将弹出提示框，单击“否”按钮即可。步骤8选择“文件”“保存所有”菜单，保存所有文档，此后按F12键预览文档。（二）设置链接步骤1连续在前面文档中的操作。为便于记着

13、框架名称，在选中下方框架后，将“属性”面板上“框架名称”编写框中的原内容删除，从头输入“main”作为框架名称。步骤2单击并拖动鼠标选中上方框架导航栏中的文本“视频”，在“属性”面板上设置链接文档为“babymain.html”，并在“目标”下拉列表中选择“main”。步骤3选择“文件”“保存所有”菜单，保存所有文档，此后按F12键预览，单击导航条中文本“影视区”，在下方框架中将会翻开文档“babymain.html”。【知识拓展】嵌入式框架所谓嵌入式框架，就是在网页的表格中嵌入一个框架。该框架能够有转动条，能够在有限的空间里放无量的东西。正确使用嵌入式框架，能够为网站的创立带来很多便利，比方

14、在个人网站中，能够将留言内容放在一个嵌入式框架里，这样既方便又美丽；也能够为框架定义一个名字，并在此中显示链接网页，这样就实现了在各个页面之间迅速跳转的目的。下面经过一个例子介绍嵌入式框架的应用。步骤1启动Dreamweaver，新建一个HTML格式的网页文档，并保存文档为“index.html”。翻开“页面属性”对话框，设置页面上、下、左、右边距值均为0。步骤2在网页中插入一个2行3列，宽为1000像素，“边框粗细”和“单元格间距”均为0，“单元格边距”为10的表格，并设置为“居中对齐”。步骤3在表格第l行的3个单元格中分别输入文本“新浪”“搜狐”和“网易”，并设置第l列为“右对齐”，第2列

15、为“居中对齐”，第3列为“左对齐”。步骤4将第2行的3个单元格归并，并设置归并后的单元格的对齐方式为“居中对齐”，此后切换至“拆分”视图。步骤5将插入点置于代码视图中“”代码后方，将“常用”插入栏切换至“布局”插入栏，单击此中的“iframe”按钮。步骤6插入“”代码，将插入点置于部，按空格键，弹出“迅速标签编写器”，双击此中的“height”标签。标签内步骤7设置“height”值为“600”。将插入点置于代码右边，按空格键，在弹出的“迅速标签编写器”中双击“height=width”。“600”步骤8设置“width”值为“980”。将插入点置于代码“右边，按空格键，在弹出的“迅速标签编写器”中双击“width=“980”name”，设置“name”值为“main”。步骤9依据相同的方法输入“scrolling”，并设置其值为“auto”，表示当网页内容高出嵌入式框架时，自动出现转动条。步骤10切换至“设计”视图，选中文