《网页制作项目实训教程》 课件 项目5 制作框架网页；项目6 使用CSS美化网页效果；项目7 使用Div+CSS制作网页.pptx

项目5制作框架网页由浅入深简章易懂贴近实际WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《网页制作项目实训教程》重庆大学出版社

CONTENTS任务1利用框架制作成语故事集首页

任务1利用框架制作成语故事集首页本任务可以分解为1个活动：利用框架制作成语故事集页面。

活动1利用框架制作成语故事集首页1-1运用素材网页“Y5-01A.html”、“Y5-01B.html”、“Y5-01C.html”、“Y5-01D.html”、“Y5-01E.html”、“Y5-01F.html”、“Y5-01G.html”制作一个关于成语故事的框架网页，要求网页有标题，故事的题目以导航的形式表现，最终效果如下图所示。活动要求

活动1利用框架制作成语故事集首页1-11、框架网页的创建依次单击“插入”-“HTML”-“框架”菜单命令，在展开的下级菜单中可以根据需要选取合适的框架集，如下图所示，这样相应的框架网页就创建完成了。知识窗

活动1利用框架制作成语故事集首页1-12、框架网页的保存每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来，下面我们以“上方及左侧嵌套”框架为例介绍框架网页的保存方法。（1）选择“文件”-“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，我们将其命名为“index.html”，表示整个框架集的名称。（2）单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为“main.htlm”，表示右边框架即主框架的文件名。（3）单击“保存”按钮，依次弹出第3个和第4个“另存为”对话框，分别命名为“left.html”和“top.html”，表示左边框架和上方框架的文件名。如下图所示。

活动1利用框架制作成语故事集首页1-13、框架网页的链接要在题目框架中使用链接打开正文框架中的文档，必须设置链接目标，在“属性”面板中的“链接”下拉列表中选择链接文档应在其中显示的框架或窗口，如下图所示。_blank：打开一个新窗口显示目标网页。_parent：目标网页的内容在父框架窗口中显示。_self：目标网页的内容在当前所在框架窗口中显示。_top：目标网页的内容在最顶层框架窗口中显示。mainFrame、leftFrame、topFrame：目标网页的内容在新建的框架中显示。

活动1利用框架制作成语故事集首页1-1详细操作步骤请参阅教材。活动实施本活动主要介绍了框架网页的制作，操作相对简单。这里要特别注意的是，保存文件时产生的文件数量总是比设计的框架数量多1个，这个多出的文件可以称之为“首页”文件，即浏览框架类网页时打开的文件。此外保存时建议对各框架文件进行标识性命名，如左框架文件可以命名为“left.html”，右框架文件可以命名为“right.html”，这样可以避免在编辑时产生混淆，提高工作效率。活动评价

感谢您的观看由浅入深简章易懂贴近实际WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《网页制作项目实训教程》重庆大学出版社

项目6使用CSS美化网页效果由浅入深简章易懂贴近实际WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《网页制作项目实训教程》重庆大学出版社

CONTENTS任务1初识CSS任务2使用CSS美化文本与图像任务3使用CSS布局网页任务4使用CSS设置背景

任务1初识CSS本任务可以分解为2个活动：使用行内样式美化网页；使用内嵌样式表美化网页。

活动1使用行内样式美化网页1-1对网页文件“task6-1.html”的主标题进行CSS样式的设置及应用，文件另存为task6-1-1.html，效果如下图所示。活动要求

活动1使用行内样式美化网页1-11、CSS的设置启动DreamweaverCS6，按【Shift+F11】组合键或【窗口】菜单的【CSS样式】可打“CSS样式”面板设置CSS样式表，如下图所示。知识窗

活动1使用行内样式美化网页1-12、CSS的分类CSS层叠样式表按可以分为三种：内联样式表（行内样式表）、嵌入样式表和外部样式表。内联式样式表：是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中。嵌入式样式表：通常包含在HTML，文档的头部，即head元素中，并且有一个专门的元素style来标记这种样式表。外部式样式表：是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素。在DreamweaverCS6中，内联样式表（行内样