06教案_Web网页设计及实践_专_贾砚池.doc

西南财经大学天府学院教案 TIANFU COLLEGE OF SWUFE西南财经大学天府学院教 案任课教师：贾砚池课程名称：Web网页设计及实践_专 任课班级：12级专科会计电算化25班、12级专科市场开发与营销01、02、03班、12级专科税务02班、12级专科营销与策划01班、12级专科工程14、15、16班授课时间：2013-2014-1学期西南财经大学天府学院教务处制教 案编号：01章节第一讲 网页制作基本知识授课方式讲授+学生讨论教学目的1. 让学生了解该课程讲授的内容、形式以及其考核标准2. 学生根据该课程的特点自己组合成小组，为后面学习形成一个相互协作的团队,培养学生团队协作精神与创新性思维3. 认识网页设计的基础知识(1) 认识Dreamweaver 8中文版教学重点网页设计软件。教学难点网页设计的基本原则时间分配教 学 过 程Min5105551010101515一、 课程简介本课程是公共选修课程，是为非计算机专业学生开设的一门计算机软件应用课程。本课程的主要教学任务是培养大学生的计算机应用技能，使学生掌握网页设计的实际应用方法及技巧，培养学生的设计能力，以满足和适应信息化社会对大学生基本素质的要求。二、 考核方式(1) 考勤：10分。(2) 课堂表现：10分。包括课堂纪律情况、讨论环节参与情况、助教参与情况、小组工作负责情况以及与教师互动情况等课堂表现(3) 实训项目1：10分(4) 实训项目2：20分(5) 实训项目3：20分(6) 实训项目4：30分三、 课堂纪律(1) 旷课4次取消考试资格，迟到3次算一次旷课。每迟到一次扣1分，旷课一次扣5分。(2) 上课要求：课堂上不允许影响他人学习，教师开始授课前进入教室(3) 上机要求：准时出席、保持安静、自觉维护实验室秩序和卫生；按要求以正确的格式独立完成实验题目。(4) 课堂纪律： 上课不准吃零食、嗑瓜子等。 下课后带走自己桌上的垃圾，让课桌上保持整洁。 下课后关电脑(主机和显示器)。 上课不准大声喧哗、玩手机、pad、睡觉等与学习无关的事情。 课堂内严禁看视频、玩游戏。 以上第一次和第二次犯均为警告处理，第三次开始每次扣5分，如果屡次(5次以上)不改者，则取消考试资格。直接进入重修。四、 教师信息及答疑时间设定1) 姓名：温俊2) 电话：138809947283) 答疑：每周五中午12：00-14：00东区广场五、 学习小组的成立以及成员之间讨论(1) 自由分组，每个组4-6人，并选定小组，然后为每个组安排好上机位置，以后就固定座位。(2) 小组讨论：a) 互相认识，加深了解，了解各自的兴趣和长项。b) 选取一个同学为小组长。c) 探讨学习本课程的方法，并由小组长向老师汇报本次讨论的结果。六、 认识网站与网页（讲授）(1) 网页的本质我们看到的网页是由一组文件构成的，它们分别是网页文件（扩展名为.html、.asp等）、图像文件（扩展名为.jpg、.gif等）和Flash动画文件（扩展名为.swf）等。 (2) 网页的功能组成从浏览者的角度看，网页中无非就是一些文字、图像、动画等。但从专业的角度来讲，网页中的元素各有其不同的作用，可以将他们分为站标、导航条、广告条、标题栏和按钮等。(3) IP地址、域名与网址a) IP地址：虽然互联网上连接了不计其数的服务器与客户机，但它们并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“26”就是一个IP地址。b) 域名：由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“”，然后按回车键就可以访问搜狐网站了。c) 网址：网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。(4) 静态网页与动态网页从大的方面讲，网页可分为静态网页和动态网页。通常是从制作技术的角度来区分静态网页和动态网页的，完全采用HTML技术制作的网页称为静态网页；使用HTML、编程语言和数据库共同完成，需要与服务器实时交互的网页称为动态网页。七、 网页设计软件和制作技术(1) 网站管理与网页制作软件目前用于网站管理和网页制作的软件主要是Dreamweaver，其功能全面、操作灵活、专业性强。另外，它还可以作为动态网站的开发环境。在制作网页时，除Dreamweaver外还需要用到Fireworks、Flash、Photoshop等辅助软件。(2) HTML语言简介HTML是Hypertext Markup Language的首字母缩写，中文称作“超文本标记语言”。 HTML语言是网页制作的基础，目前Internet上的绝大多数网页都遵循HTML语言规范，或是由HTML语言发展而来。HTML语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画等在HTML文档中都是用标签来描述的。一个完整的HTML文档由标签开始并由标签结束，所有的HTML代码都应写在标签与标签之间。八、 网站建设流程1确定网站内容 建设网站要有目的性，首先要根据网站的性质和受众，确定网站内容和要实现的功能。 2规划网站结构 确定网站内容后，就要根据网站的内容来规划网站结构。网站结构有两层意思，一是逻辑结构，二是物理结构。 逻辑结构主要是指将网站内容划分成哪些栏目，实际上就相当于网页中的导航条，下图显示了某企业网站的逻辑结构图。 3确定网站要应用的技术 网站要应用的技术包括两个方面，一个是程序和数据库，另一个是运行环境。网站技术与网站的定位、功能和规则都是密切相关的，对于网站的运营，网站的成本，网站目标的达成都非常关键。4网站维护网站维护主要是指网站发布后内容的实时更新。严格来说，每一个网站都应该由专业的定期更新维护。互联网的最大优势就是信息的实时性，只有快速反映，准确报道，吸引更多的浏览者，才能保证网站的流量。九、 网页设计的基本原则1 配色：设计网页时，可根据以下原则确定网页的背景色和主色调，并进行颜色搭配。 （1）网页背景颜色最好选择白色或黑色。（2）可根据网站的性质确定网页的主色调，并且该主色调应贯穿于网站中的全部网页。 （3）设计网页时恰当地利用同类色、邻近色和对比色，可增强网页的层次感、丰富网页的色彩或突出某些重要内容（如导航条或版块标题）。2版式：版式是设计网页时要考虑的一个重要因素。总的来说，各种网页的布局都大同小异。例如，几乎所有网页的上部都有站标、导航条和广告条，中间是各个版块，下部为网站信息区。 3尺寸：页面尺寸是网页设计中必须要考虑的一个问题。目前，我国大部分电脑的显示器是17英寸，其分辨率通常为1024768像素。因此，为避免在浏览网页时需频繁拖动水平滚动条，最好将网页宽度设置为1002像素以内。同时，由于浏览者可以利用浏览器的垂直滚动条快速上下滚动网页，因此对网页的高度没有特别的要求，用户可根据需要设置。十、 讨论由学生分组讨论数据库在实际生活中的应用，并列举相关的例子。由每个小组派出1名组员进行回答。1网站与网页的区别与联系是什么？2网页设计软件和制作技术有哪些？3如果你要建个网站，会是什么主题？什么色调？ 4如果你要建个网站，会是怎样的流程？作业布置1上网时注意观察网页的设计，包括版式、配色、尺寸2查阅资料，列举出3-5个知名网站的IP地址和域名3查阅资料，列举出当前主流的网站制作技术课后总结 教 案编号：02章节第二讲 网页布局授课方式讲授+上机教学目的(1) 掌握表格的创建和编辑。(2) 掌握层的创建和编辑。(3) 熟悉利用表格布局网页。(4) 熟悉利用层布局网页。(5) 掌握利用布局模式布局网页。 (6) 培养学生细心做事的态度。(7) 培养学生实际动手能力和自主学习的能力。教学重点布局模式的应用。教学难点表格的应用。时间分配教 学 过 程Min10101060一、 表格布局的讲解与演示1 创建表格Dreamweaver 8提供了非常完善的表格编辑功能，下面我们首先来看一下如何在网页文档中插入表格。2 选择表格和单元格(1) 选择表格 将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形状时单击鼠标左键。 将鼠标光标移至表格外框线上，当鼠标光标变为 形状时，单击鼠标左键。 在表格内部任意单元格中单击鼠标左键，然后在标签选择器中单击对应的“”标签 。 将插入点置于表格的任意单元格中，表格上方或下方将显示绿线标志，单击最上方或最下方标有表格宽度的绿线中的 ，在弹出的下拉菜单中选择“选择表格”命令。(2) 选择行或列要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头 或 时单击鼠标左键。 (3) 选择单元格可以选择单个单元格，也可以选择连续的多个单元格或不连续的多个单元格 要选择某个单元格，可首先将插入点置于该单元格内，然后按【CtrlA】组合键或单击“标签选择器”中对应的“”标签。 要选择连续的单元格区域。应首先在要选择的单元格区域的左上角单元格中单击，然后按住鼠标左键向右下角单元格方向拖动鼠标，最后松开鼠标左键。 如果希望选择一组不相邻的单元格，可按住【Ctrl】键单击选择各单元格。(4) 设置表格属性选中表格后，可利用“属性”面板查看或修改表格的行、列、宽，以及填充、间距、背景颜色、背景图像等属性。(5) 设置单元格属性在表格的某个单元格中单击，“属性”面板中将显示水平、垂直、宽、高等单元格属性，此时可通过“属性”面板设置其属性。 二、表的高级操作（老师边讲学生边做）1. 拆分与合并单元格在网页制作中，经常会用到一些特殊结构的表格，此时就需要拆分或合并单元格。 (1) 拆分单元格拆分单元格就是将一个单元格拆分成多个单元格。 (2) 合并单元格所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。拖动鼠标选中要合并的连续单元格（此处为第1行中间的3个单元格），然后单击“属性”面板上的“合并所选单元格，使用跨度”按钮 ，则3个单元格合并为1个单元格2. 插入、删除行和列在使用表格组织大量信息时，往往需要在创建好的表格中添加或删除行与列，以增加或减少记录。 3. 移动