网页设计与制作项目案例教程教学课件(共10章)项目7-网页模板与制作

网页设计与制作项目案例教程1 项目7 网页模板与制作网页设计与制作项目案例教程2目 录任务目标知识准备任务实施010203任务总结能力与知识拓展0405巩固练习06网页设计与制作项目案例教程31.知识目标2.技能目标3.素质目标7.1任务目标网页设计与制作网页设计与制作项目案例教程41.2.1网站和网页概述1.2.2网页设计素养1.2.3Web标准1.2.4HTML基础1.2.5网页设计常用软件7.2.知识准备网页设计与制作网页设计与制作项目案例教程5所谓资源，就是网页中所用到的或可能用到的各种图像、声音、视频、超级链接、脚本程序等。也可以这么说，就是网页开发中所需要的所有对象都可以称为资源。Dreamweaver中具体的资源分为9种：图像、颜色、URL、Flash、Shockwave、影片、脚本、模板、库。注意：如果想要启用“资源”面板，则需要事先建立站点并启用缓存。而所有资源的使用，都需要通过“资源”面板来完成插入，添加到新建站点的根目录下，统一存放在库中，然后应用到网页中去，如图7.2.1-1所示。7.2.1 资源图7.2.1-1 “资源”面板网页设计与制作项目案例教程6所谓库，就是用来存放网站中需要重复使用或经常更换的页面元素的地方。也是资源被应用到网页前的集合点。在Dreamweaver中可以使用库项目机制来保持站点的一致性，使用库项目可以在文档中快速输入在站点中被重复使用的元素对象。库项目不仅具有使用上的便利，而且具有维护更新方面的优势。对于重复使用的被定制为库项目的内容，如果需要修改，则不必到使用该内容的页面中一一进行修改，只需要将该库项目进行修改，就可以实现对站点中所有使用该库项目的文档同时进行更新，从而实现风格的统一更新。可以被定制为库项目的内容，不仅仅限于元素对象，Dreamweaver可以将文档中的任意内容定制为库项目，使其在其他地方被重复使用。库项目内容的广泛性更让它的使用范围大增，使用起来更加方便上手。7.2.2 库网页设计与制作项目案例教程7库项目是一种特殊类型的Dreamweaver文件，我们可以将当前网页中的任意页面元素定义为库项目，如图像、表格、文本、声音和Flash影片等。当需要使用某个库项目时，直接将其从“资源”面板中拖动到页面中就可以了。在菜单栏中选择“窗口”“资源”命令即可调出“资源”面板，快捷键是F11，如图7.2.3-1所示。图7.2.3-1调出“资源”面板在调出“资源”面板后，往往会发现库中没有什么内容，那是因为我们还没有向库中添加项目。想要添加项目就必须先选择想要添加的对象，比如，选中应用愉快网内容页面模板生成的一个新页面，如图7.2.3-2所示。7.2.3 库项目图7.2.3-1 调出“资源”面板网页设计与制作项目案例教程8在调出“资源”面板后，往往会发现库中没有什么内容，那是因为我们还没有向库中添加项目。想要添加项目就必须先选择想要添加的对象，比如，选中应用愉快网内容页面模板生成的一个新页面，如图7.2.3-2所示。图7.2.3-2选中页面网页设计与制作项目案例教程9然后通过选择“修改”“库”“增加对象到库”命令，就可以把整个通过模板生成的新页面创建为库项目了，如图7.2.3-3所示。图7.2.3-3 创建库项目网页设计与制作项目案例教程10在完成了添加库项目的操作后，就可以在新创建的页面中随意地使用库中的资源项目了。在使用库项目时，只需要选中想要应用的项目，然后单击“应用”按钮就可以把项目应用到指定的页面位置了，如图7.2.3-4所示。网页设计与制作项目案例教程111创建库项目总结起来，在使用库项目之前，首先需要创建库项目。创建库项目一般有两种方法：方法一：（1）打开一个文档。（2）在菜单栏中选择“窗口”“资源”命令，打开“资源”面板。（3）单击“资源”面板左侧的图标，将“资源”面板切换到“库”面板，可以看到在定制之前“库”中的内容是空的。（4）选中需要创建为库项目的内容，这里选择一幅图片。（5）将选定的对象拖动到“库”面板中。（6）返回到“库”面板中，可以看到刚才创建的库项目，刚刚创建的库项目的名称处于可编辑状态，可以为库项目重命名。在“库”面板中可以看到库项目的名称、大小和完整路径等属性。在资源管理器中访问MyFirstSite站点文件夹，可以看到在站点根目录下新建了一个Library文件夹，用于放置库项目，刚才创建的库项目被保存到该文件夹下，文件名为lib1.lbi。网页设计与制作项目案例教程12方法二：（1）首先在文档中选择需要创建为库项目的内容，然后单击“资源”面板右下方的图标。（2）或者首先在文档中选择需要创建为库项目的内容，然后在菜单栏中选择“修改”“库”“增加对象到库”命令。2插入库项目对于创建好的库项目，可以插入到其他文档中使用，具体的操作方法如下。（1）打开需要插入库项目的文档，或者新建一个空文档。（2）将光标置于文档中需要插入库项目的位置。（3）在“库”面板中选中需要插入到文档中的库项目。（4）单击“库”面板左下方的“应用”按钮，或者直接将选中的库项目拖动到文档中。网页设计与制作项目案例教程13在具体设计与制作时，我们大家就会发现库项目中的资源和的使用效果模板是一致的，这就需要我们在学习模板页时注重库项目中的资源是否与网页中的元素一致。既然库项目中的资源的使用效果和模板是一致的，那么是否可以通过编辑库项目来修改之前已经应用过的页面呢？答案是可以的。只需要在“资源”面板中选中需要编辑的库项目，然后单击图标，就可以对库项目进行编辑更新了，如图7.2.4-1所示。7.2.4 编辑库项目网页设计与制作项目案例教程14比如，现在选中一个添加到库中的页面，单击图标后就直接进入了模板页中，然后对模板页中的内容信息或图片进行修改替换，保存后退出。这时库中的页面就编辑修改完成了，如图7.2.4-2所示。图7.2.4-2库中的页面编辑修改完成后的效果网页设计与制作项目案例教程15任务陈述本项目将以重庆愉快网内容页面为例详细讲解模板页的设计与制作。通过模板的特性可以快速地制作出相同页面布局架构的同类型页面。在进行任务项目之前，先来了解模板页的一些基本属性。使用Dreamweaver可以创建和设计与制作模板页。一般的模板页分为可编辑区域和不可编辑区域两个主要的部分。可编辑区域就是页面中可以修改的部分，可以根据每一个不同信息的页面进行内容修改。而不可编辑区域就是为了保持页面风格统一，不可以修改内容信息的部分，其中包括Logo、导航、功能区域等部分。当然，也可以使用Dreamweaver中自带的一些模板效果，这样可以方便我们在设计与制作模板页时更简便快捷和有效率，如图7.3-1所示。7.3 愉快网内容页面设计与制作任务实施网页设计与制作项目案例教程16网页设计与制作项目案例教程17任务分析在上述任务陈述中，我们大体地了解了这个任务的性质与所要注意的知识点，可以得出对重庆愉快网内容页面的一个具体分析。（1）网站主题：电子商务型网站重庆愉快网内容页面。（2）网页结构：上左右。（3）色彩分析：本案例以白色为主，辅以红色和橙黄色。跳跃的红色充满活力，富有激情和现代节奏，突出商业功能和产品销售。（4）网站特点：本案例主要做愉快网内容页面，用户可以在内容页面中浏览了解自己想要获取的信息和内容，从而达到用户浏览页面的目的。（5）设计思想：要突出本页面的展示功能，让用户可以清晰地了解页面内容信息的详细资料，使用户可以获取自己想要的信息，如图7.2-1所示。网页设计与制作项目案例教程18任务规划在分析完重庆愉快网内容页面后，可以确定几个实施的关键任务，结合绘制重庆愉快网内容页面线框结构图的分析理解，我们可以很直观地了解到设计与制作重庆愉快网内容页面的流程的任务划分：（1）新建站点，使所有文件、图片等元素保证正确的链接路径。（2）新建模板页，完成页面的整体布局。（3）设置模板页的基本属性，设计与制作完成整个重庆愉快网内容页面。重庆愉快网内容页面线框结构图如图7.3-2所示。网页设计与制作项目案例教程19网页设计与制作项目案例教程20任务一：分析和设计与制作内容页面的布局步骤一新建愉快网内容页面站点请参照学习项目5中的内容，这里不再赘述。步骤二设置页面属性在底部“属性”面板单击“页面属性”按钮，在弹出的“页面属性”对话框中进行页面整体风格的设置，如图7.3-3所示。网页设计与制作项目案例教程21设置页面字体大小为12px，左、右、上、下边距均为0px，然后单击“确定”按钮完成页面属性的设置，如图7.3-4所示。网页设计与制作项目案例教程22步骤三完成DIV布局通过前文的分析，我们了解了整个重庆愉快网内容页面的页面布局是一个头部导航和底部版权固定、中间内容左右分布的结构布局。针对这一结构布局，可以采用Div来完成设计。所以在设计制作时，在插入栏中单击“布局”选项卡中的“标准”按钮，将工具栏切换为标准栏目，如图7.3-5所示。网页设计与制作项目案例教程23然后单击图标，确定完成制作DIV布局。最终效果如图7.3-6所示。网页设计与制作项目案例教程24在完成整个页面的布局后，我们依次设计完成导航Logo区、内容展示区、功能属性设置区、版权和友情链接区，一步一步通过CSS层叠样式来完成重庆愉快网内容页面的设计与制作（详情请参考项目6中的内容，这里不再赘述）。重庆愉快网内容页面最终设计与制作完成的效果如图7.3-7所示。网页设计与制作项目案例教程25步骤四完成保存模板页在完成设计与制作重庆愉快网内容页面后，一般都要保存页面。但是这时会发现，如果按照之前的保存方法，只能保存单一的一个页面，没有起到模板的作用。这时可以在DreamweaverCS6的菜单栏中选择“文件”“另存为模板”命令，快捷键是Ctrl+M组合键，如图7.3-8所示。网页设计与制作项目案例教程26在选择“另存为模板”命令后，会弹出一个“另存为模板”对话框，该对话框要求我们把页面保存到之前新建的站点中。然后根据对话框的信息提示，可以设置重庆愉快网内容页面的一些属性。比如，给我们设计与制作完成的页面设置一个名称，方便以后使用时调用，如图7.3-9所示。网页设计与制作项目案例教程27然后依次把设计与制作完成的重庆愉快网内容页面中的相关图片和CSS样式都保存到与站点相应的文件夹，如图7.3-10所示。网页设计与制作项目案例教程28这时我们就完成重庆愉快网内容页面的模板页保存了，其扩展名为.dwt。在保存好后，可以在DreamweaverCS6右下角的“文件”面板中找到站点中的Templates文件夹，所有的重庆愉快网内容页面的相关的资料都在里面。以后想要更改模板页中的图片或CSS样式，直接把Templates文件夹中的相应内容替换就可以了，如图7.3-11所示。网页设计与制作项目案例教程29在完成模板页的保存后，就可以在新建页面时使用我们自己设计与制作完成的模板了。这时，我们在菜单栏中选择“文件”“新建”命令，在弹出的“新建文档”对话框中选择“模板中的页”标签，在里面就会找到我们保存好的模板，然后单击“创建”按钮就会生成一个新的同类型的重庆愉快网内容页面了，如图7.3-12所示。网页设计与制作项目案例教程30Templates文件夹的注意事项：通过之前的学习，我们知道了保存的模板都是保存在Templates文件夹中的，要更改模板里面的内容可以通过替换Templates文件夹中的元素来完成。所以不要将模板从Templates文件夹中移走，或者将一些非模板文件放进Templates文件夹中。当然更不要将Templates文件夹移动到本地根目录之外，这些做法都会导致模板的路径错误。Dreamweaver中自带的模板使用方法：在之前的学习过程中，我们掌握了如何新建一个页面并把它另存为模板。但是在Dreamweaver中已经提供了一些现成的模板供我们使用，通过这些模板的使用，可以提高我们设计与制作页面的效率。使用这些模板创建新页面通常有3个步骤：在菜单栏中选择“文件”“新建”命令，弹出“新建文档”对话框。选择“空白页”标签，在“页面类型”列表框