工作任务5-网站子页设计与制作-14学时

AI生成AI生成网页设计与制作教案授课教师授课班级授课日期课题超链接计划学时2教学目标知识目标1.掌握链接路径的分类（绝对路径和相对路径）及各自的特点。2.掌握链接网页的跳转类型。3.掌握文字链接、图片热点链接、电子邮件链接、锚点链接的制作方法。能力目标1.能够根据需要选择合适的链接路径。2.能够熟练制作文字链接、图片热点链接、电子邮件链接和锚点链接。素质目标1.培养批判性思维。2.培养提出问题和解决问题的能力。教学重点1.绝对路径与相对路径的概念及特点，和文档相对的路径与和根目录相对的路径的区别。2.链接网页的跳转类型（跳转到本站点内的其他网页、跳转到其他站点的网页）。3.文字链接、图片热点链接、电子邮件链接、锚点链接的制作方法。教学难点1.图片热点链接中热区的创建、编辑与调整（矩形、椭圆形、多边形热点工具的使用）。2.锚点链接的创建流程（添加锚点、添加锚点链接的两种方法）。教学模式及教学方法讲授法、案例分析法、实操演示法教学活动及主要环节素质培养【课前导学】预习教材"5.1.1超链接"，了解链接路径、链接网页的跳转类型及各种链接的制作方法。复习网页设计与制作中网站主页布局的相关知识。培养批判性思维。【课中践学】【情景导入】（约10分钟）1.教师提问：在浏览网页时，如何从一个页面跳转到另一个页面？引导学生思考超链接的作用。2.介绍超链接使用HTML文件格式，使得用户可方便地从某一页面跳转到其他页面。3.强调制作链接是实现网页跳转的重要途径。培养提出问题和解决问题的能力。【项目实施】（约70分钟）5.1.1超链接超链接使用HTML文件格式，使得用户可方便地从某一页面跳转到其他页面。1.链接路径在学习添加超链接之前，需要掌握绝对路径和相对路径。（1）绝对路径绝对路径是包含服务器协议的完整路径，是一种与源地址文件无关的路径形式，包含精确地址，创建当前站点以外的文件的链接时必须使用绝对路径。例如，/c/2010-01-24/185219536219.shtml是绝对路径地址。优点是能够准确找到相关文件；缺点是路径复杂、容易出错，如果目标文档被移动则链接无效。（2）相对路径相对路径分为两种：和文档相对的路径、和根目录相对的路径。和文档相对的路径指和当前文档所在文件夹相对的路径。例如，logo.jpg指定当前文件夹内的图片，img/logo.jpg指定文件夹img中的图片。优点是只要站点结构和文件位置不变，改变站点路径不影响正确性。和根目录相对的路径从当前站点的根目录开始，使用斜线。例如，/img/logo.jpg将链接到站点根目录img文件夹下的logo.jpg文件。优点是省略了复杂地址，又具有与源地址文件无关的特点，便于修改和测试。2.链接网页的跳转类型链接网页的跳转类型通常有两种：（1）跳转到本站点内的其他网页；（2）跳转到其他站点的网页。第一种类型可采用相对路径和绝对路径，第二种类型只能采用绝对路径。3.制作链接网页中的链接包括文字链接、图片热点链接、电子邮件链接、锚点链接等。（1）制作文字链接方法1：选中文字，选择"插入"→"Hyperlink"命令，在弹出的窗口中单击"链接"右侧的浏览按钮，选择要跳转到的页面，设置"目标"属性后完成。方法2：选中文字，在"属性"面板中单击"浏览文件"按钮，在对话框中选择文件，设置"目标"属性（_blank在新窗口载入、_self在相同框架载入、_parent在父框架打开、_top取代当前框架、_new在新窗口载入但只打开一个窗口）。（2）制作图片热点链接为图像添加超链接的方法与文字链接类似。如果图片尺寸较大且能分成若干区域，可通过设置图像的热区来分别添加超链接。步骤如下：创建图像热区：选中图像，在"属性"面板左下方单击"矩形热点工具"（或"椭圆形热点工具"、"多边形热点工具"）按钮，在需要添加热点的位置拖动框选范围。编辑、调整热区：使用"指针热点工具"可拖动热区位置或调整热区形状。如划分有误，可在热区上单击按Delete键删除。为热区添加链接：单击图像热区，在"属性"面板的"链接"下拉列表框中设置跳转页面，设置"替换"文字和"目标"属性，保存并预览。（3）制作电子邮件链接电子邮件链接可使浏览者立即打开浏览器默认的E-mail处理程序。步骤：打开网页文件输入文字"联系我们"，选中文字，在"属性"面板的"链接"下拉列表框中输入"mailto:"，保存并预览。（4）制作锚点链接创建锚点可使链接指向当前文档或不同文档中的指定位置，使访问者快速浏览指定位置。步骤如下：添加锚点：将光标定位到插入位置，选择"插入"→"Hyperlink"命令，设置"文本"（如"第3章"），单击确定。选中文字后在"属性"面板中设置"ID"值（如"third"），在文字前添加锚记。添加锚点链接：方法1：选中文字（如"跳转至第3章"），将"属性"面板中"链接"右侧的按钮拖动到锚点处。方法2：在"属性"面板的"链接"下拉列表框中直接输入"#third"。保存并预览。培养批判性思维。【任务总结】通过本节学习，掌握了链接路径的分类及特点、链接网页的跳转类型，以及文字链接、图片热点链接、电子邮件链接、锚点链接的制作方法，为后续网站子页设计与制作中的链接设置奠定了基础。培养提出问题和解决问题的能力。【课后拓学】复习各种链接的制作方法和步骤。预习教材"5.1.2CSS规则"，了解"CSS设计器"面板的使用方法和CSS属性设置。培养批判性思维。

网页设计与制作教案授课教师授课班级授课日期课题CSS规则计划学时2教学目标知识目标1.掌握"CSS设计器"面板的使用方法。2.掌握CSS源的创建方法和CSS选择器的定义。3.掌握CSS属性（类型、背景、区块、方框、边框、列表、定位、扩展、过渡）的设置。4.掌握修改和编辑CSS样式的方法。能力目标1.能够熟练运用"CSS设计器"面板创建和管理CSS样式。2.能够根据网页设计需要设置各类CSS属性。素质目标1.培养批判性思维。2.培养提出问题和解决问题的能力。教学重点1."CSS设计器"面板中创建CSS源（创建新的CSS文件、附加现有的CSS文件、在页面中定义）的方法。2.CSS选择器的定义与操作（调整具体程度、重命名、搜索、拖动整理等）。3.CSS属性的分类设置（布局、文本、边框、背景、更多）及CSS规则定义（类型、背景、区块、方框、边框、列表、定位、扩展、过渡属性）。教学难点1.CSS规则定义中各类属性的含义及设置（如定位属性中static、relative、absolute、fixed的区别）。2.边框样式的属性值（none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset）的区分与应用。教学模式及教学方法讲授法、案例分析法、实操演示法教学活动及主要环节素质培养【课前导学】复习超链接的制作方法。预习教材"5.1.2CSS规则"，了解"CSS设计器"面板及CSS属性设置。培养提出问题和解决问题的能力。【课中践学】【情景导入】（约10分钟）1.教师提问：如何控制网页的外观和布局？引导学生思考CSS样式的作用。2.介绍在DreamweaverCC2019中可通过"CSS设计器"面板实现CSS样式，从CSS样式、CSS源、CSS选择器、CSS属性等方面进行介绍。3.强调CSS样式的主要优点是便于更新，更新CSS样式时所有使用该样式的文档格式都会自动更新。培养批判性思维。【项目实施】（约70分钟）5.1.2CSS规则在DreamweaverCC2019中可以通过"CSS设计器"面板实现CSS样式。1.了解CSS样式CSS样式是一系列格式设置规则，可用于控制网页外观，如布局定位、字体等。CSS样式的主要优点是便于更新，更新CSS样式时，所有使用该样式的文档格式都会自动更新。2.创建CSS源选择"窗口"→"CSS设计器"命令，打开"CSS设计器"面板。单击"源"左侧的按钮，在弹出的列表中选择以下选项之一：（1）创建新的CSS文件：创建新的CSS文件并附加到文档；（2）附加现有的CSS文件：将现有CSS文件附加到文档；（3）在页面中定义：在文档内定义CSS。3.定义CSS选择器在"CSS设计器"面板中选择"源"列表中的某个CSS源或"@媒体"列表中的某个媒体查询，单击"选择器"左侧的按钮。可执行的操作包括：调整选择器具体程度（向上或向下箭头键）、删除建议规则并输入所需选择器（需输入选择器名称及类型指示符，如ID前添加"#"）、搜索特定选择器、重命名选择器、拖动整理选择器位置、跨源移动选择器、复制选择器、复制选择器到媒体查询等。4.设置CSS属性在"CSS设计器"面板中，属性分为"布局""文本""边框""背景""更多"，由属性列表顶部的不同图标表示。CSS规则定义包括以下属性：（1）定义类型属性类型属性包括：Font-family（字体系列）、Font-size（文字大小）、Font-style（字体样式：Normal、Italic、Oblique）、Line-height（行高）、Text-decoration（文本装饰：underline、overline、line-through、blink）、Font-weight（粗体磅值，Normal相当于400，Bold相当于700）、Font-variant（字体变种，small-caps将字母大写）、Text-transform（字母大小写：capitalize、uppercase、lowercase、none）、Color（文字颜色，有RRGGBB、rgb(R,G,B)、颜色名称三种表示方法）。（2）定义背景属性背景属性包括：Background-color（背景颜色）、Background-image（背景图像）、Background-repeat（背景图像平铺）、Background-attachment（背景图像固定或滚动）、Background-position(X)（水平位置：left、center、right或数值）、Background-position(Y)（垂直位置：top、center、bottom或数值）。（3）定义区块属性区块属性包括：Word-spacing（单词间距）、Letter-spacing（字母间距）、Vertical-align（垂直对齐方式）、Text-align（文本排列方式：left、right、center、justify两端对齐）、Text-indent（首行缩进值）、White-space（空白符处理：normal、pre、nowrap、pre-wrap、pre-line）、Display（框的类型）。（4）定义方框属性方框属性包括：Width（内容区域宽度）、Height（内容区域高度）、Float（浮动方式）、Clear（清除浮动）、Padding（内容与边框间距）、Margin（边框与其他元素间距离）。（5）定义边框属性边框属性包括：Style（边框样式，属性值有none无边框、hidden、dotted点状、dashed虚线、solid实线、double双线、groove3D凹槽、ridge3D垄状、inset3Dinset、outset3Doutset）、Width（边框宽度）、Color（边框颜色）。（6）定义列表属性列表属性包括：List-style-type（列表项标记：disc实心圆、circle空心圆、square实心方块、decimal数字）、List-style-image（列表项图像）、List-style-Position（列表项位置：inside在文本内、outside在文本外）。（7）定义定位属性定位属性包括：Position（定位方式：static无特殊定位、relative相对定位、absolute绝对定位、fixed固定定位）、Visibility（显示状态：inhert继承、visible显示、hidden隐藏）、Width（层宽度）、Height（层高度）、Z-Index（堆叠顺序）、Overflow（内容超出层大小时的处理方式）、Placement（位置和大小：Left、Top、Bottom、Right）、Clip（可视区域）。（8）定义扩展属性扩展属性包括：分页（break-before对象前换页、break-after对象后换页）、Cursor（鼠标指针形状）、Filter（滤镜特效）。（9）定义过渡属性过渡属性可以设置动画过渡的属性，包括"持续时间""延迟"等。5.修改和编辑CSS样式创建CSS样式后，可以在"CSS设计器"面板中选中要编辑的选择器，然后修改对应的属性。也可以在"属性"面板（CSS）的对应"目标规则"中选择要修改的样式，然后通过"编辑规则"修改样式。培养提出问题和解决问题的能力。【任务总结】通过本节学习，掌握了"CSS设计器"面板的使用方法，包括创建CSS源、定义CSS选择器、设置各类CSS属性（类型、背景、区块、方框、边框、列表、定位、扩展、过渡），以及修改和编辑CSS样式的方法。培养批判性思维。【课后拓学】复习CSS规则的各种属性设置方法。预习教材"5.1.3模板介绍"，了解Dreamweaver模板的创建和应用方法。培养提出问题和解决问题的能力。

网页设计与制作教案授课教师授课班级授课日期课题模板介绍计划学时2教学目标知识目标1.掌握创建模板的两种方式（直接创建模板和从现有文档中创建模板）。2.掌握编辑模板的方法（插入、更改、删除可编辑区域）。3.掌握创建可选区域和重复区域的方法。4.掌握应用模板生成网页和管理模板的方法。能力目标1.能够熟练创建和编辑Dreamweaver模板。2.能够运用模板快速生成风格一致的网页。素质目标1.培养批判性思维。2.培养提出问题和解决问题的能力。教学重点1.创建模板的两种方式（直接创建模板、从现有文档中创建模板）。2.可编辑区域的插入、更改名称和删除操作。3.应用模板生成网页的两种方法及模板管理（删除、修改）。教学难点1.可选区域和重复区域的创建与应用（可选区域的显示/隐藏设置、重复区域和重复表格的创建）。2.模板修改后更新应用了模板的文档的流程。教学模式及教学方法讲授法、案例分析法、实操演示法教学活动及主要环节素质培养【课前导学】复习CSS规则的创建和属性设置方法。预习教材"5.1.3模板介绍"，了解模板的创建、编辑和应用方法。培养批判性思维。【课中践学】【情景导入】（约10分钟）1.教师提问：如果一个网站有多个页面需要相同的布局，如何提高制作效率？引导学生思考模板的作用。2.介绍模板是Dreamweaver中一种特殊的网页文档，用于设计有固定布局的页面。3.强调模板文件最好存放在站点本地根目录的Templates文件夹中，以便管理。培养提出问题和解决问题的能力。【项目实施】（约70分钟）5.1.3模板介绍模板是Dreamweaver中一种特殊的网页文档，用于设计有固定布局的页面。模板的编辑和普通网页的制作是一样的，模板文件最好存放在站点本地根目录的Templates文件夹中，以便管理。1.创建模板有两种方式可以创建模板：直接创建模板和从现有文档中创建模板。（1）直接创建模板执行"文件"→"新建"命令，打开"新建文档"对话框，依次选择"HTML模板""无"选项，单击"创建"按钮，即可创建空白模板。（2）从现有文档中创建模板在站点中打开网页文件index.html，选择"文件"→"另存为模板"命令，打开"另存模板"窗口，在"站点"下拉列表中选择站点，在"另存为"文本框中输入模板名称，单击"保存"按钮。系统会自动在站点根目录中建立一个名为Templates的文件夹，用于存储模板文件。2.编辑模板创建模板后，可以在页面中进行编辑。在模板网页中可以创建可编辑区域和不可编辑区域，两个区域可以相互转换。当网页应用某一模板时，只可以在可编辑区修改内容。可以将整个表格或单独的单元格标记为可编辑区域，但不能将多个表格单元格标记为单个可编辑区域。层和层内容是单独的元素，将层设置为可编辑时可更改层的内容，而将层的内容设置为可编辑时只能更改层中内容。（1）插入可编辑区域打开模板文件，在设计视图中选中想要编辑的区域（如某个Div），选择"插入"→"模板"→"可编辑区域"命令，在"新建可编辑区域"对话框中单击"确定"按钮完成创建。可以创建多个可编辑区域。（2）更改可编辑区域的名称打开模板文件，单击要更改名称的可编辑区域左上角的标记，在"属性"面板的"名称"文本框中输入新名称，按回车键确定。（3）删除可编辑区域打开模板文件，单击要删除的可编辑区域左上角的标记，按Delete键删除。3.创建可选区域和重复区域（1）可选区域可选区域是模板中的特殊区域，可设置为在基于模板的文档中显示或隐藏。有两种可选区域对象：一种控制显示和隐藏但不允许编辑内容；另一种允许编辑内容并设置区域显示或隐藏。创建步骤：选中要定义为可选区域的对象，选择"插入"→"模板"→"可选区域"命令，在"新建可选区域"对话框的"基本"选项卡中输入名称，勾选"默认显示"复选框表示在基于模板创建的文档中显示，单击"确定"按钮完成。（2）重复区域重复区域可在基于模板的页面中任意次复制，通常用于表格，也可为其他页面元素定义。将单元格定义为重复区域：删除可编辑区域，选中文本内容所在单元格，选择"插入"→"模板"→"重复区域"命令，在对话框中输入名称，在重复区域中插入可编辑区域即可完成。将表格定义为重复区域（重复表格）：在模板中将光标定位于要插入重复表格的位置，选择"插入"→"模板"→"重复表格"命令，在"插入重复表格"对话框中设置各参数，单击"确定"按钮完成。4.应用模板生成网页有两种应用模板生成网页的方法：方法1：选择"文件"→"新建"命令，在"新建文档"对话框中选择"网站模板"选项，选择站点和模板，勾选"当模板改变时更新页面"复选框，单击"创建"按钮。方法2：选择"窗口"→"资源"命令打开"资源"面板，单击"模板"按钮，从模板列表中选择模板，拖动模板到当前文档窗口中，或右键单击选择"从模板新建"命令。5.管理模板（1）删除模板选择"窗口"→"资源"命令打开"资源"面板，单击"模板"按钮，在列表中要删除的模板文件上右键单击，选择"删除"命令即可删除。（2）修改模板在"资源"面板中单击"模板"按钮，选择要修改的模板文件，单击"编辑"按钮将模板打开。对模板进行修改并重新设置可编辑区域后保存。如果有网页应用了该模板，会弹出"更新模板文件"对话框，单击"更新"按钮，弹出"更新页面"窗口，当"显示记录"显示为"完成"时，单击"关闭"按钮完成修改。培养批判性思维。【任务总结】通过本节学习，掌握了模板的创建（直接创建和从现有文档创建）、编辑（可编辑区域的插入、更改、删除）、可选区域和重复区域的创建、应用模板生成网页以及模板管理（删除和修改）的方法，为后续使用模板制作网站子页奠定了基础。培养提出问题和解决问题的能力。【课后拓学】复习模板的创建、编辑和应用方法。预习教材"5.2.1博客网站子页效果图制作"和"5.2.2切片与优化"，了解博客网站子页效果图的设计制作和切片过程。培养批判性思维。

网页设计与制作教案授课教师授课班级授课日期课题博客网站子页效果图制作与切片优化计划学时2教学目标知识目标1.掌握博客网站子页效果图的设计流程（绘制草图、页面布局、色彩设计分析、网页内容设计分析）。2.掌握使用Photoshop制作子页效果图的方法。3.掌握子页效果图切片与优化的方法。能力目标1.能够熟练运用Photoshop完成博客网站子页效果图的设计与制作。2.能够对子页效果图进行切片与优化处理。素质目标1.培养批判性思维。2.培养提出问题和解决问题的能力。教学重点1.子页效果图设计流程（绘制草图、页面布局、色彩设计分析、网页内容设计分析、制作子页效果图）。2.使用Photoshop制作页眉、内容区域（6个栏目）、页脚的方法。3.切片的顺序（由上而下、由背景到前景）及页眉、内容区域、页脚的切片方法。教学难点1.内容区域各栏目的制作技巧（图层文件夹组织、矩形选框工具固定大小、图层蒙版的使用、文字排版设置）。2.切片时区分需要切片的图片和可在Dreamweaver中实现的效果。教学模式及教学方法讲授法、案例分析法、实操演示法教学活动及主要环节素质培养【课前导学】复习模板的创建和应用方法。预习教材"5.2.1博客网站子页效果图制作"和"5.2.2切片与优化"，了解博客网站子页效果图的设计制作和切片过程。培养提出问题和解决问题的能力。【课中践学】【情景导入】（约10分钟）1.教师提问：博客网站主页完成后，如何设计制作子页效果图？引导学生思考子页与主页在设计上的联系与区别。2.介绍在工作任务4.2中完成了博客网站主页的设计与制作后，接下来完成其子页的设计与制作。3.强调子页在色彩上与主页保持一致，以绿色和白色为主。培养批判性思维。【项目实施】（约70分钟）5.2.1博客网站子页效果图制作依据博客网站项目分析、项目设计对该网站的子页效果图进行设计与制作。1.子页效果图设计博客网站子页效果图的设计包括绘制草图、进行页面布局、色彩设计分析、网页内容设计分析几个部分。绘制草图：子页草图包含logo及横向通栏、导航条、栏目1至栏目6、版权信息等区域。进行页面布局：根据草图进行页面布局。色彩设计分析：为使网站整体风格协调，子页在色彩上与主页保持一致，以绿色和白色为主。网页内容设计分析：页眉设计包含logo设计、导航栏设计、横向通栏设计，方法可参照主页设计；内容区域共包含6个栏目；页脚与主页页脚相同。2.子页效果图制作子页效果图的制作包括绘制页面结构图、设置网页页面背景、制作页眉、制作内容区域、制作页脚5部分。（1）绘制页面结构图新建Photoshop文件，名称为"生活感悟"，画布尺寸为980像素×790像素。调出标尺（快捷键Ctrl+R），将单位设定为"像素"，利用辅助线绘制页面结构图。各区域尺寸：logo及横向通栏980px×150px、导航条980px×40px、栏目1至栏目6各460px×150px、页脚980px×50px。（2）设置网页页面背景新建图层并命名为"页面背景"，设置前景色为#226039，选择"编辑"→"填充"命令填充颜色。（3）制作页眉页眉区域制作与主页页眉基本相同，换了"logo背景图片"，将小相框中的图片换成"帅哥"图片。文字效果制作：选择文本工具，设置字体为"微软雅黑"、样式为"Regular"、大小为"48px"、消除锯齿方法为"平滑"、颜色为"白色"，在导航菜单"留言板"上方输入"生活感悟"。为文字添加"投影"样式，各参数采用默认设置，适当调整文字位置。（4）制作内容区域新建图层文件夹"内容区域"，在其中新建"栏目1"文件夹。新建图层"栏目1背景"，使用矩形选框工具（固定大小460px×150px）在标尺坐标(20,220)处绘制矩形选区，填充前景色#1b8f46。打开"栏目1图片.jpg"拖入文档，使用自由变换适当缩小。使用矩形选框工具（固定大小135px×135px）在图片适当位置单击，单击"添加图层蒙版"按钮，将添加蒙版后的图片移动至标尺坐标(30,220)。选择文本工具，设置字体为"宋体"、大小为"13px"、颜色为"白色"、行间距为"18"，在栏目1图片右侧输入文字。制作其他栏目，完成内容区域制作。（5）制作页脚子页页脚区域的制作与主页页脚相同。5.2.2切片与优化1.页眉切片将子页中的导航文字隐藏，选择切片工具将页眉划分为3部分。选择"文件"→"存储为Web和设备所用格式"命令，设置格式进行优化，对切片命名并保存。2.内容区域切片将内容区域中不需要的文字隐藏，使用切片工具对内容区域中的图片进行切片，对切片进行优化并保存。3.页脚切片对页脚中文字的特殊效果进行切片，对切片进行优化并保存。培养提出问题和解决问题的能力。【任务总结】通过本节学习，掌握了博客网站子页效果图的设计与制作流程（包括绘制页面结构图、设置背景、制作页眉、内容区域和页脚），以及切片与优化的方法，为后续使用Dreamweaver制作子页提供了素材基础。培养批判性思维。【课后拓学】复习子页效果图制作和切片优化的操作步骤。预习教材"5.2.3博客网站子页布局及实现"，了解使用Dreamweaver制作博客网站子页的方法。培养提出问题和解决问题的能力。

网页设计与制作教案授课教师授课班级授课日期课题博客网站子页布局及实现计划学时2教学目标知识目标1.掌握使用Dreamweaver建立子页及设置页面属性的方法。2.掌握使用"CSS设计器"面板设置CSS样式的方法。3.掌握使用表格布局制作子页logo及横向通栏、导航条、内容区域、页脚的方法。4.掌握设置链接及链接样式的方法。能力目标1.能够熟练运用Dreamweaver和"CSS设计器"面板完成子页制作。2.能够运用表格布局完成博客网站子页各部分的制作并设置链接。素质目标1.培养批判性思维。2.培养提出问题和解决问题的能力。教学重点1.建立子页及子页图片文件夹，通过"CSS设计器"面板设置body样式（字体、大小、颜色、margin、padding）。2.使用表格布局制作子页logo及横向通栏、导航条，通过"CSS设计器"面板添加选择器并设置属性。3.制作内容区域（7行7列表格合并单元格、插入图片、设置背景色和文字）、页脚及设置链接样式。教学难点1.内容区域7行7列表格的单元格合并操作及各单元格属性的精确设置。2.通过"CSS设计器"面板定义选择器（如.daoHang、.content、.greenBackground等）并应用到表格元素的流程。教学模式及教学方法讲授法、案例分析法、实操演示法教学活动及主要环节素质培养【课前导学】复习博客网站子页效果图制作和切片优化的相关知识。预习教材"5.2.3博客网站子页布局及实现"，了解使用Dreamweaver制作子页的步骤。培养批判性思维。【课中践学】【情景导入】（约10分钟）1.教师提问：完成子页效果图设计和切片后，如何将效果图转化为实际的网页？引导学生思考子页布局的实现。2.介绍在完成博客网站子页效果图的设计与制作后，使用DreamweaverCC2019制作子页。3.强调制作过程包括建立子页及图片文件夹、复制素材、制作各部分及设置链接。培养提出问题和解决问题的能力。【项目实施】（约70分钟）5.2.3博客网站子页布局及实现在完成博客网站子页效果图的设计与制作后，使用DreamweaverCC2019制作子页，其制作过程包括建立子页及相应的子页图片文件夹、复制素材、制作子页logo及横向通栏、制作导航条、制作内容区域、制作页脚、设置链接及链接样式。1.建立子页及相应的子页图片文件夹启动DreamweaverCC2019，打开"MyBlog"站点。在"files"文件夹上右键选择"新建文件"，命名为"shengHuoGanWu.html"。在"files"文件夹上右键选择"新建文件夹"，命名为"ganWu_images"，用于存放制作子页所需的图片素材。双击"shengHuoGanWu.html"进入编辑环境。选择"窗口"→"CSS设计器"命令打开面板，单击"源"左侧按钮选择"在页面中定义"，单击"选择器"左侧按钮输入"body"，设置文字字体为"宋体"、大小为"13px"、颜色为黑色，设置margin和padding属性。2.复制素材将子页效果图的切片全部复制到站点根目录下"files"文件夹的"ganWu_images"文件夹中并修改名称。3.制作子页logo及横向通栏选择"插入"→"Table"命令，设置行数和列数均为1、表格宽度为980像素。在"CSS设计器"面板中添加选择器".logo"并设置属性，将".logo"样式应用到表格（在"属性"面板中将Class设置为"logo"）。在表格内插入"banner01.jpg"和"banner02.jpg"。添加选择器"*"并设置margin、padding、border均为0。4.制作导航条在logo下方插入1行1列、宽度980像素的表格。在"CSS设计器"面板中添加选择器".daoHang"，设置背景属性和布局属性，将样式应用到表格。在表格内插入1行7列表格，添加选择器".daoHangtrtdtable"设置文本属性和布局属性，在7个单元格中分别输入栏目名称。5.制作内容区域在导航条下方插入7行7列、宽度980像素的表格。添加选择器".content"设置背景属性和布局属性，应用到表格。对49个单元格进行合并：合并1至7单元格、43至49单元格、8/15/22/29/36单元格、14/21/28/35/42单元格、16至20单元格、30至34单元格。合并后设置各单元格属性：1单元格高20；2、20单元格宽20；8、14、21单元格高20；5、11、17单元格宽20；3/6/9/12/15/18单元格宽155高150；4/7/10/13/16/19单元格宽305高150。在1/3/5/7/9/11单元格中分别插入图片lanMu1.jpg至lanMu6.jpg。在"CSS设计器"面板中添加选择器".greenBackground"，设置文本属性（颜色白色）、背景属性（背景色#1B8F46）和布局属性。将2/4/6/8/10/12单元格的"目标规则"设置为".greenBackground"，输入各栏目文字。6.制作页脚在内容区域下方插入1行1列、宽度980像素的表格。添加选择器".yeJiao"，设置背景属性（background-color为#032e13）、文本属性（text-align为center）和布局属性，应用到表格。在表格内插入"yeJiao.jpg"图片。7.设置链接及链接样式在导航条中选中文字"首页"，在"属性"面板中单击"链接"属性右侧的"浏览文件"按钮，将"首页"链接到主页"index.html"。用同样方法完成其他链接设置。在"CSS设计器"面板中添加选择器"a:link"设置文本属性，添加"a:visited"设置与"a:link"相同的文本属性，添加"a:hover"设置文本属性。设置主页"index.html"的栏目"生活感悟"链接到子页面"shengHuoGanWu.html"，预览效果。培养批判性思维。【任务总结】通过本节学习，掌握了使用DreamweaverCC2019和"CSS设计器"面板完成博客网站子页制作的方法，包括建立子页及图片文件夹、设置body样式、制作logo及横向通栏、导航条、内容区域、页脚，以及设置链接和链接样式的方法。培养提出问题和解决问题的能力。【课后拓学】复习博客网站子页布局的实现步骤。预习教材"5.3.1校园网站子页效果图制作"和"5.3.2切片与优化"，了解校园网站子页效果图的设计制作过程。培养批判性思维。

网页设计与制作教案授课教师授课班级授课日期课题校园网站子页效果图制作与切片优化计划学时2教学目标知识目标1.掌握校园网站子页效果图的设计流程（绘制草图、页面布局、色彩设计分析、网页内容设计分析）。2.掌握使用Photoshop制作校园网站子页效果图的方法。3.掌握校园网站子页效果图的切片与优化方法。能力目标1.能够熟练运用Photoshop完成校园网站子页效果图的设计与制作。2.能够对校园网站子页效果图进行切片与优化处理。素质目标1.培养批判性思维。2.培养提出问题和解决问题的能力。教学重点1.校园网站子页效果图设计（草图、页面布局、色彩设计分析、网页内容设计分析）。2.使用Photoshop制作页眉、内容区域（左侧导航栏目和右侧栏目内容）、页脚。3.切片与优化的操作方法（页眉切片、内容区域切片、页脚无须切片）。教学难点1.内容区域左侧导航栏目的制作（矩形选框工具描边、直线工具分隔线、子栏目名称排列）。2.右侧栏目内容的制作（矩形框、直线段分隔、校园图片插入与文字排版）。教学模式及教学方法讲授法、案例分析法、实操演示法教学活动及主要环节素质培养【课前导学】复习博客网站子页布局及实现的相关知识。预习教材"5.3.1校园网站子页效果图制作"和"5.3.2切片与优化"，了解校园网站子页效果图的设计制作和切片过程。培养提出问题和解决问题的能力。【课中践学】【情景导入】（约10分钟）1.教师提问：校园网站子页与博客网站子页在效果图设计上有什么不同？引导学生思考校园网站子页的特色。2.介绍本节将对神州高等职业技术学院校园网站子页效果图进行设计与制作、切片处理。3.强调校园网站子页在色彩上与主页保持一致，主要采用蓝色和白色。培养批判性思维。【项目实施】（约70分钟）5.3.1校园网站子页效果图制作依据校园网站项目分析、项目设计对该网站的子页效果图进行设计与制作。1.子页效果图设计绘制草图：子页草图包含logo及横向通栏、导航条、学校概况栏目（含学校简介、办学理念、历史沿革、机构设置、学校荣誉、校园文化6个子栏目）、左侧栏目的具体内容（默认显示学校简介）、版权信息。进行页面布局：根据草图进行页面布局。色彩设计分析：为使网站整体风格协调，子页在色彩上与主页保持一致，主要采用蓝色和白色。网页内容设计分析：页眉采用与主页页眉相同的设计方式；内容区域分为左右两部分，左侧以导航形式对学校概况子栏目进行分类展示（6个栏目），右侧显示相应栏目的具体内容，默认显示"学校简介"；页脚包括版权、地址、联系方式等基本信息。2.子页效果图制作（1）绘制页面结构图新建Photoshop文件，名称为"学校概况效果图"，画布尺寸为980像素×900像素。调出标尺，将单位设定为"像素"，利用辅助线绘制页面结构图。各元素尺寸：logo及横向通栏980px×150px、导航条980px×40px、导航栏目210px×200px、栏目内容750px×650px、页脚980px×50px。（2）制作页眉页眉区域的设计方法与主页页眉相同。（3）制作内容区域新建图层文件夹"内容区域"，在其中新建"左侧"文件夹，再在"左侧"中新建"学校概况"文件夹。新建图层"边框"，使用矩形选框工具（固定大小210px×200px）绘制矩形选区，选择"编辑"→"描边"命令设置边框颜色为#c1bebe。选择文本工具输入"学校概况"（黑体、15px、黑色），使用直线工具（颜色#c1bebe，按住Shift键）在"学校概况"下方绘制210像素直线段。在直线段下方依次输入子栏目名称"学校简介""办学理念""历史沿革""机构设置""学校荣誉""校园文化"（宋体、13px、黑色）。制作右侧栏目内容：新建图层文件夹"右侧栏目内容"，新建图层"边框"，绘制750px×650px矩形框。输入"学校简介"（黑体、15px、黑色），绘制750像素直线段。新建图层"校园图片"，打开"校园图片.jpg"复制到当前图层。选择文本工具输入"学校简介"栏目的对应文字（宋体、13px、黑色）。（4）制作页脚新建图层文件夹"页脚"，选择文本工具在页面底部输入版权信息等文字内容（宋体、9点、黑色）。5.3.2切片与优化本小节对页眉中的背景图片进行切片。1.页眉切片将"学校概况效果图.psd"页眉中的导航文字隐藏，选择切片工具将页眉区域划分为3部分。选择"文件"→"存储为Web和设备所用格式"命令，设置格式进行优化，对切片命名并保存。2.内容区域切片内容区域效果除了"校园图片.jpg"以外，其他效果均可在Dreamweaver中实现，因此只需要对"校园图片"切片。3.页脚切片页脚区域无特殊效果，因此无须切片。培养提出问题和解决问题的能力。【任务总结】通过本节学习，掌握了校园网站子页效果图的设计与制作流程（包括绘制页面结构图、制作页眉、内容区域左侧导航栏目和右侧栏目内容、页脚），以及切片与优化的方法，为后续使用Dreamweaver制作校园网站子页奠定了基础。培养批判性思维。【课后拓学】复习校园网站子页效果图制作和切片优化的操作步骤。预习教材"5.3.3校园网站子页布局及实现"，了解使用DIV+CSS和模板技术制作校园网站子页的方法。培养提出问题和解决问题的能力。

网页设计与制作教案授课教师授课班级授课日期课题校园网站子页布局及实现计划学时2教学目标知识目标1.掌握应用样式表实现页面效果的方法（建立子页及CSS文件、设置页眉、内容区域、页脚）。2.掌握应用模板实现页面效果的方法（建立模板及CSS文件、设置可编辑区域、应用模板生成网页）。3.掌握DIV+CSS布局中浮动和定位的综合运用。能力目标1.能够熟练运用Dreamweaver完成校园网站子页的制作。2.能够运用样式表和模板两种方法实现校园网站子页的布局。素质目标1.培养批判性思维。2.培养提出问题和解决问题的能力。教学重点1.应用样式表实现页面效果：建立子页及CSS文件、设置页眉（banner和navigation的HTML和CSS）、内容区域整体布局（content、left、right）及各部分、页脚。2.应用模板实现页面效果：建立模板及CSS文件、设置各部分布局、设置可编辑区域、应用模板生成网页。3.两种方法中HTML代码和CSS样式的编写。教学难点1.DIV+CSS布局中浮动（float）和清除浮动（clear）的综合运用，以及内容区域高度自适应（height设置为100%）。2.模板中可编辑区域的设置与应用模板生成网页的流程。教学模式及教学方法讲授法、案例分析法、实操演示法教学活动及主要环节素质培养【课前导学】复习校园网站子页效果图制作和切片优化的相关知识。预习教材"5.3.3校园网站子页布局及实现"，了解使用样式表和模板技术制作校园网站子页的方法。培养批判性思维。【课中践学】【情景导入】（约10分钟）1.教师提问：博客网站子页使用表格布局，校园网站子页可以使用什么布局方式？引导学生思考DIV+CSS布局和模板的应用。2.介绍本节将利用两种方法进行校园网站子页布局：应用样式表实现页面效果和应用模板实现页面效果。3.强调两种方法各有优势，模板方法可以提高制作网页的效率。培养提出问题和解决问题的能力。【项目实施】（约70分钟）5.3.3校园网站子页布局及实现下面将利用两种方法进行校园网站子页布局。1.应用样式表实现页面效果（1）建立子页及相应的CSS文件启动DreamweaverCC2019，打开"MySchool"站点。在"files"文件夹上右键选择"新建文件"，命名为"xueXiaoGaiKuang.html"。选择"文件"→"新建"命令，选择"CSS"选项创建样式表文件，命名为"xueXiaoGaiKuang.css"保存到CSS文件夹。在子页代码视图中添加<link>标签建立样式表与子页的关联。（2）复制素材子页效果图的切片与主页页眉的切片相同，可直接使用主页页眉的切片。将"校园图片.jpg"复制到站点根目录的"images"文件夹下，命名为"xiaoYuanTuPian.jpg"。（3）设置子页页眉在子页代码视图中添加banner（两张图片）和navigation（无序列表形式的9个导航菜单项）的HTML代码。在CSS样式表中添加页眉样式：*设置全局样式（margin、padding、font-size），a:link/a:visited设置链接样式，#banner设置宽高，#navigation设置背景图片和尺寸，