网页设计与制作大纲.doc

网页设计与制作实训教程大纲一、课程的地位与性质“网页设计与制作”是高职动漫设计与制作专业的职业技术课程，重点讲述网页设计与制作的基础知识、基本理论和基本技能，是一门包含了网页、网站的概念、网页主要工具软件HTML、dream weaver中文版的使用等诸多知识的操作性极强的技能型应用课程。“网页设计与制作”以“信息技术与应用”和“计算机辅助平面设计”为前期基础课程。二、课程的任务与目的通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件dream weaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。本课程培养学生的职业素养和创新能力，为日后走向工作岗位打下理论与实践基础。通过本课程的学习实现学生思想过硬、理论基础扎实、实际工作能力强的教学目标。三、课程总体结构、教学环节和课时分配章课程内容课 时小计讲授实验案例其他1Intelnet和www660002HTML基础808003网页规划和网页设计606004网页制作与编程工具404005建立本地站点404006制作第一个网页404007表格及其应用404008CSS基础及应用4049框架基础及应用40410行为及应用20211层与动画40412JavaScript编程基础60613实例网站制作40414复习220合计62854四、教学内容第一章 概述 6学时教学目的：掌握HTML的基本语法、学会用HTML编写简单网页。教学重点与难点：HTML的基本语法、HTML的主要标记、表格标记及其属性、超级连接标记。第一节 Internet简介一、Internet的历史二、Internet的网络结构三、Internet的应用第二节 Internet的IP地址与域名一、IP地址及结构二、IP地址分类三、IP地址的特殊属性四、域名系统第三节 Web站点和网页一、Web站点和网页二、Web的运行机制第二章 HTML基础 8学时教学目的：掌握HTML的基本语法、学会用HTML编写简单网页。教学重点与难点：HTML的基本语法、HTML的主要标记、表格标记及其属性、超级连接标记。第一节 HTML简介一、HTML的特点二、HTML的基本框架第二节 HTML编程入门一、HTML程序结构二、编写一个简单网页第三节 常用HTML标记一、文本相关标记二、图片的HTML标记三、层的HTML标记四、滚动标记第四节 列表标记一、无序列表二、有序列表三、定义列表第五节 表格标记和属性第六节 超级连接一、程序编写步骤二、程序清单第七节 支持多媒体一、插入音乐文件二、插入视屏文件第三章 网站规划和网页设计 6学时教学目的：掌握网页设计、网站规划的基本方法。教学重点与难点：网站规划、网站内容组织和导航、网页色彩设计、网页版面设计第一节 网站规划一、网站内容规划二、题材的选择与定位第二节 网站创意和风格一、设计创意的获得二、确定网站风格三、网站内容组织第三节 页面内容设计一、页面整体视觉效果二、页面内容编排第四节 信息结构和导航设计一、网站的信息结构二、网站导航设计第五节 网站首页设计一、确定网站首页功能模块二、设计首页的版面第六节 网页色彩一、色彩的视觉效果二、页面色彩搭配三、HTML的色彩属性值第四章 网页制作与编程工具 4学时教学目的：掌握Dreamweaver MX工作区、菜单的基本使用方法。教学重点与难点：Dreamweaver MX开发环境的界面布局与基本操作。第一节 Dreamweaver MX网页开发环境一、选择工作区二、工作区窗口三、面板组和属性检查器四、编辑代码和视图切换第二节 其他相关工具第三节 图片处理基础一、网页图像文件格式二、图片的Web格式第五章 建立本地站点 4学时教学目的：掌握在Dreamweaver中建立和维护站点的方法教学重点与难点：在Dreamweaver中建立站点并维护站点第一节 网站文件结构 一、网站名称二、设计站点结构第二节 在Dreamweaver中定义站点第三节 维护和管理站点一、站点面板二、编辑和删除站点三、在站点中操作文件第四节 制作网页的基本流程第六章 制作第一个网页 4学时教学目的：掌握各种网页元素及其属性的设置方法第一节 实训准备第二节 文本元素一、文本输入二、设置文本属性第三节 图像元素一、插入图象二、设置图像的属性第四节 超级链接一、文本超级链接二、锚点链接三、邮件链接四、创建空链接和脚本链接五、图片超级链接六、翻转图片链接第五节 flash元素一、插入flash按钮二、插入flash文本三、插入flash动画第七章 表格及其应用 4学时教学目的：掌握表格的基本操作方法。第一节 实训准备第二节 表格基础一、表格的基本操作二、设置表格属性三、设置单元格属性四、表格的修改五、在表格中插入元素第三节 表格排版技术一、表格排版二、用表格制作细线第四节 表格技巧和应用一、制作细线表框二、制作圆角表格三、制作阴影表格四、处理表格数据第五节 实例表格布局步骤第八章 CSS基础及应用 4学时教学目的：掌握CSS的基本概念，掌握用Dreamweaver定义CSS样式的方法，能按给定的样式规格说明制作符合设计要求的CSS样式，并能对样式进行修改和引用。第一节 CSS基础知识一、CSS的语法规则二、在网页中添加CSS样式第二节 Dreamweaver中的CSS一、新建样式和样式文件二、设置样式参数三、编辑CSS样式参数四、引用CSS样式五、附加样式表六、利用CSS浮动面板第三节 CSS应用一、用CSS修饰文本二、改变超级链接的样式三、用CSS美化表格第四节 CSS的扩展属性一、阴影滤波器二、alpha滤波器第九章 框架基础及应用 4学时教学目的：掌握框架的基本概念和操作方法，会用框架制作网页；掌握设置和修改框架属性的方法，以及框架页面导航的链接方法第一节 框架介绍一、实例设计说明二、创建框架集三、保存框架四、框架浮动面板和属性设置第二节 实例框架制作一、素材准备二、布局分析三、实现方法和步骤第三节 内嵌框架第十章 行为及应用 2学时教学目的：理解行为的工作原理，掌握事件和动作等基本概念；掌握行为面板的使用方法；掌握常用事件和动作的添加方法。第一节 行为面板的使用第二节 添加行为一、播放声音二、弹出消息窗口三、弹出公告牌窗口四、改变对象属性五、检查插件六、显示/隐藏层七、交换多张图片八、拖动层第十一章 层与动画 4学时教学目的：掌握层、层面板的操作方法；掌握层的属性设置方法，层与表格的转换方法。掌握层、动画、行为等技术的综合应用方法。第一节 层的属性设置与操作一、创建层的方法二、层的属性设置三、层的操作四、层的浮动面板第二节 用层制作拼图游戏第三节 用层制作下拉菜单第四节 网页动画一、时间轴面板二、时间轴动画三、制作浮动广告第十二章 JavaScript编程基础 6学时教学目的：了解JavaScript语言基本知识，掌握JavaScript程序的网页应用方法。教学重点与难点：JavaScript的基本数据类型和程序结构、自定义函数及调用、常用内部对象、JavaScript程序的网页应用方法。第一节 JavaScript语言的特点第二节 JavaScript和Java的区别第三节 在网页中嵌入JavaScript程序一、JavaScript的开始于结束标记二、在JavaScript中使用注释标记第四节 JavaScript的基本数据类型一、常量二、变量第五节 程序结构一、分支结构二、循环结构第六节 自定义函数一、函数的构成二、函数的定义和调用三、链接JavaScript脚本程序四、JavaScript的内部函数五、函数的返回值第七节 JavaScript的内部对象一、数组对象Array二、日期对象Date三、数学对象Math四、字符串对象String第十三章 实例网站制作 6学时教学重点与难点：实例网站设计说明、制作和程序应用详解第一节 实例说明一、设计说明二、实例图解第二节 创建实训网站一、网站结构设计二、建立站点三、站点结构实现第三节 制作第一个网页一、制作准备二、页面布局分析三、制作步骤与参数四、CSS样式规格第四节 制作第二个网页一、制作准备二、页面布局分析三、制作步骤与参数四、制作图片热区链接五、网站链接结构第五节 制作第三个网页一、制作准备二、页面布局示意三、制作步骤与参数四、设置文本的CSS第六节 制作第四个网页一、制作准备二、页面布局示意三、制作步骤与参数四、时间轴面板的操作方法第七节 制作第五个网页一、制作准备二、页面布局分析三、制作步骤与参数四、制作时间轴动画第八节 制作第六个网页一、制作准备二、页面布局分析三、制作步骤与参数第九节 程序应用：交换图片一、程序应用背景二、程序源码与说明三、使用程序的步骤第十节 程序应用：图片渐显渐隐一、程序应用背景二、程序说明与应用1三、程序说明与应用2四、程序说明与应用3第十一节 程序应用：图片旋转运动一、程序应用背景二、程序源码与说明三、使用程序的步骤第十二节 网页背景移动与音乐第十三节 程序应用：星光闪入一、程序应用背景二、程序说明与使用五、教学建议1、必须以实际出发，密切联系当前网络的实际情况，要按照洋为中用、外为我用的精神，认真学习网页设计知识，加强动手能力的培养，不断提高解决实际问题的能力。2、在学习中不仅要注重HTML和dreamweaver基本知识的掌握，还要对网页的主要概念和操作内容进行模拟和训练，通过课堂学习、课后练习和模拟实验、实训及到业务部门实习，使基本技能的训练得到加强