网页设计与制作大纲(常用版)

网页设计与制作大纲（常用版）(可以直接使用，可编辑完整版资料，欢迎下载）

《网页设计与制作实训教程》大纲网页设计与制作大纲（常用版）(可以直接使用，可编辑完整版资料，欢迎下载）一、课程的地位与性质“网页设计与制作”是高职动漫设计与制作专业的职业技术课程，重点讲述网页设计与制作的基础知识、基本理论和基本技能，是一门包含了网页、网站的概念、网页主要工具软件HTML、dreamweaver中文版的使用等诸多知识的操作性极强的技能型应用课程。“网页设计与制作”以“信息技术与应用”和“计算机辅助平面设计”为前期基础课程。二、课程的任务与目的通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件dreamweaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。本课程培养学生的职业素养和创新能力，为日后走向工作岗位打下理论与实践基础。通过本课程的学习实现学生思想过硬、理论基础扎实、实际工作能力强的教学目标。三、课程总体结构、教学环节和课时分配章课程内容课时小计讲授实验案例其他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学时教学目的：掌握DreamweaverMX工作区、菜单的基本使用方法。教学重点与难点：DreamweaverMX开发环境的界面布局与基本操作。第一节DreamweaverMX网页开发环境一、选择工作区二、工作区窗口三、面板组和属性检查器四、编辑代码和视图切换第二节其他相关工具第三节图片处理基础一、网页图像文件格式二、图片的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基本知识的掌握，还要对网页的主要概念和操作内容进行模拟和训练，通过课堂学习、课后练习和模拟实验、实训及到业务部门实习，使基本技能的训练得到加强，培养学生实际操作的能力。3、考试：①考试形式：无纸化考试,实验课考试。②评卷标准：60%期末卷面+40%平时成绩及上机操作六、使用说明本大纲适用于电子商务专业。本大纲推荐使用的教材为《网页设计与制作实训教程》（中国水利水电社出版，白征、李云程主编，21世纪高职高专新概念教材，2006年7月出版）编写人：（签字）董华亮教研室主任：（签字）系（部）主任：（签字）编写日期:200执行日期:200网页的设计与制作第27卷第10期

2021年10月

赤峰学院(自然科学版)

JournalofChifengUniversity(NaturalScienceEdition)

V01.27No.1O

0et.2021

网页的设计与制作

吴振华

(赤峰学院物理与电子信息工程系,内蒙古赤峰024000)

摘要:本文是以指导”赤峰学院第四届’挑战杯’大学生课外学术科技作品竞赛”的网页设计——物

理与电子信息工程系网建站为例谈谈网页设计的相关问题.首先说明了系网站的页面设计与制作主题,站

点的规划以及网页设计的风格,最后简要地介绍所需工具,材料的收集和网页的制作.在对学生的指导上

重点突出设计思想和制作流程.本网站主要由物理系简介,教学管理,专业简介,课程简介,精品课程,EDP

考试,信息资源以及学生管理等栏目组成主页.

关键词:页面布局;站点规划;网页制作

中图分类号:TP391文献标识码:A文章编号:1673—260X(2021)10—0037—03

对非计算机专业的学生,如何让其在最短的时

间内能够掌握网页设计制作技术,并能制作出好的

参赛作品是问题的关键.根据学生的实际情况初步

制定指导计划:一是根据参赛作品的要求确定网页

制作的主题,以方便对素材的收集和准备工作;二

是选择网页制作工具,确定指导学习的内容.最终

目的是使学生在最短的时间内掌握网页制作技术,

并能做出高质量的作品参加竞赛.

1站点的规划与设计

1.1确定网页设计制作的主题

确定网页设计的主题是决定网页设计活动最

关键的一步.主题是否鲜明,不仅是参赛作品能否

中成功的问题,更是网页设计制作的一个非常重要

的技术指标.由于作品确定以物理与电子信息工程

系为网站作为主题,就要以专业设置,课程建设,教

学管理等因素确定网页设计及制作的类型.有了明

确的主题,并要按照视觉心理规律和形式将主题传

达给评判人.这就要求网页设计不但要简练,清晰

和精确,而且在强调艺术性的同时,更应该注重通

过独特的风格和强烈的视觉冲击力,来鲜明地突出

设计主题.

1.2规划站点的结构

根据参赛作品要求及素材的具体情况,决定采

用树形结构,如图1所示,处于顶部的是站点的首

页,在首页上链接若干个二级网页,每个二级网页

图1系站点结构

链接若干三级网页.

1.3确定网页的风格

在网页设计过程中包含着主观和客观两方面

的因素.在确立了网页主题和结构之后,就要在颜

色搭配,页面布局和内容结构进行风格设计.网页

风格的设计虽然没有统一的标准,但一定要符合人

们的心里感受,要么给人生动活泼,要么给人雅致

整洁,要么给人宁重严肃.成功的网页设计给人们

留下的都是难忘的记忆.只有形成了自己风格的网

页,才能有无限的生命力.

颜色搭配是网页风格设计的关键.当我们距离

显示器较远时候,看到的不是网页优美的版面或者

是美丽和图片,而是网页的色彩.网页色彩搭配设

计包括背景色彩,色调的选择和文字,图片色彩的

选择.我们知道:白纸黑字是永远的主题,谁都说不

出不好来.而网页最常用流行色是:

?

兰色——蓝天白云,沉静整洁的颜色.

?

绿色——绿白相间,雅致而有生气.

?

橙色——活泼热烈,标准商业色调.

?

暗红——宁重,严肃,高贵,需要配黑和灰来

压制刺激的红色.

几种固定搭配是:

?

蓝白橙——蓝为主调.白底,蓝标题栏,橙色

按钮或ICON做点缀.

?

绿白兰——绿为主调.白底,绿标题栏,兰色

或橙色按钮或ICON做点缀.

?

橙白红——橙为主调.白底,橙标题栏,暗红

或桔红色按钮或ICON做点缀.

?

暗红黑——暗红主调.黑或灰底,暗红标题

栏,文字内容背景为浅灰色.

在具体的设计制作中,主页采用了深蓝,浅蓝

一

37—

和白色几种颜色的搭配,其它页面根据内容的需要

进行了亮色与暗色近似色的搭配,并且在一个页面

里都控制在3—4种色彩内.

页面布局设计页面布局类型有不同的分类

方法,有的将网页布局分为”国”字型,拐角型,标题

正文型,左右框架型,上下框架型,综合框架型,封

面型,Flash型,变化型等;还有的将网页布局分为

骨骼型,满版型,分割型,中轴型,曲线型,倾斜型,

对称型,焦点型,三角型,自由型等;不管那类分法

都可以简单地概括为:

(1)最上面是网站的标题以及横幅广告条,接

下来就是导航链接,在下面就是网站的主要内容,

左右分2栏,或3栏或4栏,最下面是网站的一些

基本信息,联系方式,版权声明等.

(2)上面是标题及广告横幅,接下来的左侧是

一

窄列链接等,右列是很宽的正文,下面也是一些

网站的辅助信息.在这种类型中,一种很常见的类

型是最上面是标题及广告,左侧是导航链接.

(3)最上面是标题或类似的一些东西,下面是

正文.

(4)左右或是上下为分两部分,左面或上面是

导航链接,有时最上面会有一个小的横幅,右面或

下面是正文.

(5)在网站的首页,放置一些小的动画或图片,

再配上几个简单的链接或者仅是一个”进人”的链

接甚至直接在首页的图片上做链接而没有任何提

示的页面.

(6)以上页面结构的结合,做的无规律可循,相

对复杂一些,大多和图片结合进行的布局.

本例中,主页采用了最上面是网站的标题,接

下来是跑马灯消息,导航链接,在下面就是网站的

主要内容.左中右分3栏,左边是最新消息滚动窗

口,中间部分是系的主要内容,最右边是图片切换

窗口.最下面是网站的版权声明等.

内容结构设计内容结构设计的比较简单,页

面链接的层深为二级.并采用树形结构,各栏目之

间都能方便地跳转.

在进行网页风格设计时,需要注意:

?

尽量使用网页中的标准色彩.文字的链接色

彩,图片的主题色,背景色,边框的色彩等都要使用

标准色彩.

?

网页中要使用标准字体和字号.在所有的标

题,文字,图片里要使用统一的标准字体.

?

在网页中使用统一的图片处理效果.

?

网页中尽量使用自己设计的花边,图案和按

钮,以突出网页的特点.

2工具的选用和介绍

2.1网页制作工具选用的是AdobeDreamweaver

cs软件

一

38一

Dreamweaver是美国MACROMEDIA公司开发

的集网页制作和管理网站于一身的所见即所得网

页编辑器.它是第一套针对专业网页设计师特别发

展的视觉化网页开发工具,利用它可以轻而易举地

制作出跨越平台限制和跨越浏览器限制的充满动

感的网页.

它包含HomeSite和BBEdit等主流文字编辑

器.帧(frames)和表格的制作速度快的令您无法想像.

进阶表格编辑功能使您简单的选择单格,行,栏或

作未连续之选取.甚至可以排序或格式化表格群

组,Dreamweaver支援精准定位,利用可轻易转换成

表格的图层以拖拉置放的方式进行版面配置.所见

即所得Dreamweaver成功整合动态式出版视觉编

辑及电子商务功能,提供超强的支援能力给

Third—party厂商,包含ASP,Apache,BroadVision,

ColdFusion,iCAT,Tango与自行发展的应用软体.

目前版本的DreamweaverCS5最突出的亮点有三

处:①对CMS的支持功能;②对CSS的校验;③对

PHP更好的支持.CS5还内置了webkit引擎,可以

模仿Safari,Chrome浏览器预览网页效果.

2.2动画制作工具选用的是AdobeFlashCS软件

Flash是一种创作工具,设计人员和开发人员

可使用它来创建演示文稿,应用程序和其它允许用

户交互的内容.Flash可以包含简单的动画,视频内

容,复杂演示文稿和应用程序以及介于它们之间的

任何内容.通常,使用Flash创作的各个内容单元称

为应用程序,即使它们可能只是很简单的动画.您

也可以通过添加图片,声音,视频和特殊效果,构建

包含丰富媒体的Flash应用程序.Flash特别适用于

创建通过Intemet提供的内容,因为它的文件非常

小.Flash是通过广泛使用矢量图形做到这一点的.

与位图图形相比,矢量图形需要的内存和存储空间

小很多,因为它们是以数学公式而不是大型数据集

来表示的.位图图形之所以更大,是因为图像中的

每个像素都需要一组单独的数据来表示.

2.3图像处理工具选用的是AdobePhotoshop软

件

Photoshop:它是由Adobe公司开发的图形处理

系列软件之一,主要应用于在图像处理,广告设计

的一个电脑软件.平面设计是Photoshop应用最为

广泛的领域,无论是我们正在阅读的图书封面,还

是大街上看到的招帖,海报,这些具有丰富图像的

平面印刷品,基本上都需要Photoshop软件对图像

进行处理.

3网页设计制作的过程

3.1资料信息的收集

在确定主题,规划站点结构和内容之后,还要

收集相关的资料信息.资料信息是人类的科学文化

知识,各种思想和各种实践活动赖以记录,保存,交

流和传播的一切印刷品和视听材料的统称.资料信

息搜集是有一定技巧的.包括;规划资料,具体搜

索,编辑整理等.

将需要的资料信息搜集完成后,并不是可以直

接应用在网页设计中,因为这些资料往往是凌乱

的,不系统的,还需要大量的编辑工作.首先要仔细

分析资料信息,确定哪些需要,哪些不需要,哪些需

要修改和整理.

本例网页”物理与电子信息工程系”需要搜集

准备的信息资料有以下几种:

?

“物理系概况”栏目方面的图片及相关文字资

料,可以到系办去搜集.

?

“教学管理”,”精品课程”等栏目的相关资料

到系教务办去搜集.

?

“专业介绍”,”课程介绍”,”EDP考试”,”信息

资源”等栏目相关内容到系各教研室去搜集.

?

“精彩瞬间”,”学生管理”等栏目的相关资料

到系学生办去搜集.

以上几点都是实现网页工程项目所需要的前

期搜集准备工作,这是完成网页设计不可缺少的一

个步骤.

3.2网页的制作

首先用Photoshop图形处理软件来处理图片,

制作LOGO和超链接图标;其次用Flash软件制作

所需的动画;最后利用Dreamweaver软件制作网页.

本例中的网页是用html语言编写的一个关于

“物理与电子信息工程系”的网站,htnl中文翻译为

“超文本标记语言”,所谓”超文本”就是指页面内可

以包含图片,链接,多媒体等非问字的元素,通过

html语言将这些元素表示出来,就形成了html代

码.

html的结构包括头部head,主体body两大部

分,其中头部描述浏览器所需的信息,而主体则包

含所要说明的具体内容.另外,html是网络的通用

语言一种简单,通用的全置标记语言.它允许网页

制作人建立文本与图片相结合的复杂页面,这些页

面可以被网上任何其他人浏览到,无论使用的是什

么类型的电脑或浏览器.其主要特点如下:

(1)简易性,html版本升级采用超集方式,从而

更加灵活方便.

(2)可扩展性,html语言的广泛应用带来了加

强功能,增加标识符等要求,html采取子类元素的

方式,为系统扩展带来保证.

(3)平台无关性.虽然Pc机大行其道,但使用

MAC等其他机器的大有人在,HTML可以使用在

广泛的平台上.

部分页面采用DIV+CSS进行页面布局.

DIV+CSS是网站标准(或称”WEB标准”)中常用术

语之一,DIV+CSS是一种网页的布局方法,这一种

网页布局方法有别于传统的HTML网页设计语言

中的表格(table)定位方式,真正地达到了w3c内容

与表现相分离.其优点在于:①使页面载人得更快

.

②降低流量费用.③修改设计时更有效率.④保持

视觉的一致性.⑤更好地被搜索引擎收录.⑥对浏览

者和浏览器更具亲和力.我们都知道网站做出来是

给浏览者使用的,对浏览者和浏览器更具亲和力,

DIV+CSS在这方面更具优势-由于CSS富含丰富的

样式,使页面更加灵活性,它可以根据不同的浏览

器,而达到显示效果的统一和不变形.

在”专业简介”,”课程简介”以及”精彩瞬间”还

用到了iframe元素.iframe元素的功能是在一个

html内嵌一个文档,创建一个浮动的帧,可以嵌在

网页中的任意部分.Iframe虽然内嵌在另一个

HTML文件中,但它保持相对的独立,是一个”独立

王国”,在单一HTML中的特性同样适用于浮动帧

中.通过Iframe标记,我们可将那些不变的内容以

Iframe来表示,这样,不必重复写相同的内容,这有

点象程序设计中的过程或函数,减省了多少繁琐的

手工劳动.

3-3网页测试

在制作过程中随时浏览每一张网页,及时发现

网页中的错误,并改之.

本次参赛作品——网页设计制作是静态网页.

静态网页是相对于动态网页而言.也就是以.htm,.

html,.shtml,.xml等为后后缀的.在html格式的网页

上,也可以出现动画,滚动字母等.这些”动态效果”

只是视觉上的,与动态网页是不同的概念.

静态网页每个网页都有一个固定的URL.且网

页htm,.html,.shtml等常见形式的后缀,网页内容

一

经发布到网站服务器上,无论是否有用户访问,

每个静态网页的内容都是保存在网站服务器上的,

每个网页都是一个独立的文件.静态网页的内容相

对稳定,因此容易被搜索引擎检索静态网页没有数

据库的支持,在网站制作和维护方面工作量较大,

因此当网站信息量很大时完全依靠静态网页制作

方式比较困难.静态网页的交互性交叉,在功能方

面有较大的限制.尽管”静态网页”存在许多不足,

但是初学者要学好网页制作不妨从”静态网页”制

作学起.

做好一个网页不是一件容易的事,对个人的要

求是全方位的,需要有扎实的知识和综合素质,要

有全身心投入到网页世界的决心和勇气,去不断的

学习,去不断的探索;同时去不断的充实,去不断的

完善自我.

一

39—

《网页设计与制作》教学大纲适用专业（类）：计算机类、电子商务类专业总学时：80（理论教学50，独立实训：30）编制人：徐凯制订时间：2021年3月一．课程介绍随着计算机网络的迅速发展，网页设计已成为当今社会上一种非常热门的技术。《网页设计与制作》课程是我院计算机网络和计算机应用专业的一门核心课程，它涵盖了HTML语言、DREAMWEAVER及JavaScript脚本语言等三部分内容，全面介绍WEB站点设计的基本操作技术和使用技巧。二．课程的性质和任务1.课程的性质（本课程在整个教学体系中的地位）本课程是计算机类专业的一门主要专业课，是本类专业的核心技能课程。2.课程任务本课程的培养目标是使学生掌握网页设计与制作的基本知识，使学生具备利用常用网页设计工具进行多媒体网页设计的技能，培养学生进行网页设计的逻辑思维和抽象思维的能力，为今后从事网站的建设和管理工作打下良好的基础。三．课程目标1.知识目标（1）熟练掌握网页制作软件Dreamweaver8的基本操作和使用技能（2）掌握网页制作的基本规范和站点的建立（3）熟练掌握网页中页面属性的设置方法（4）熟练掌握在网页中插入图像、flash动画、背景音乐、视频文件等多媒体元素的方法（5）掌握各种超级链接的使用方法（6）熟练掌握用表格和层布局网页的方法（7）掌握表单在网页中的使用方法（8）掌握框架、模板和库制作网页的方法（9）掌握网页特效的制作方法（10）掌握域名和空间的申请过程（11）掌握网站测试的方法（12）掌握网页的上传和网页的维护2.技能与素质目标（1）培养学生收集、处理信息，准备、加工素材的能力（2）培养学生设计网页、布局网页的能力（3）培养学生的策划能力、色彩感悟力、和想象力（4）培养学生勤奋学习，发现问题后解决问题的能力（5）培养学生自主学习能力和知识应用能力（6）具有高度责任心和良好的团队合作的能力三．教学内容及学时分配1．理论教学，共50学时理论项目名称计划课时教学内容和知识目标教材章节网站名称项目1：网页赏析2（1）欣赏优秀的网页，激发学习网页设计的兴趣（2）分析优秀网页的布局结构、视觉效果等（3）了解构成网页的基本元素（文本、图像、动画、声音等）（4）了解网页的相关概念和术语（网页、网站、域名、WWW等）项目2：网页制作工具2（1）了解一些制作网页软件（Frontpage）、图像处理软件（photoshop，Fireworks）、动画制作软件（Flash）等的使用（2）了解Dreamweaver的版本（3）了解Dreamweaver的安装与卸载过程（4）熟悉Dreamweaver8的启动与退出、工作界面布局和工作环境（5）学会用Dreamweaver创建不同格式的项目文件项目3：规划站点2（1）掌握创建站点的操作过程（2）掌握管理站点的操作过程（多个站点、站点的导入和导出）（2）学会创建站点目录结构、管理站点的文件（3）掌握网站的规划（文件结构和层次结构）（4）掌握目录名和网页的命名规范、色彩搭配、尺寸规范项目4：页面控制2（1）掌握Dreamweaver8的参数设置方法（2）设置页面头内容（设置通用头、添加Meta、关键字、页面刷新）（3）掌握页面属性的设置方法（背景效果、边距、标题字样式）（4）掌握调整页面视图尺寸的方法项目5：文本操作2（1）掌握在网页中输入文本（2）掌握文本属性参数的设置（字体、大小、颜色、对齐方式等）（3）掌握对文本编辑的操作（添加、拷贝、删除、剪切、查找和替换、撤销）（4）掌握在网页中插入文本列表和特殊符号（5）掌握输入空格和实现文本换行的方法（6）学会在网页中插入水平线和日期及属性的设置（7）掌握检查页面文字拼写的方法项目6：图像操作2（1）掌握图像的插入方法（2）掌握图像属性的设置方法（图像的属性、图像热点）（3）掌握图像与文本混合编排的方法（4）掌握插入鼠标经过图像的方法（5）了解插入图像占位符的操作方法（6）掌握交互图像的制作方法（7）掌握插入导航条的制作方法项目7：使用表格2（1）掌握在网页中插入表格（2）掌握表格中参数的设置（行数、列数、宽度、边框、对齐方式、单元格间距、边距、背景等）（3）掌握表格的基本操作方法（拆分、删除，合并等）（4）掌握布局页面表格的方法（5）掌握绘制嵌套表格的方法（6）掌握在表格中插入文字和图片并定位的方法项目8：层的使用2（1）掌握描绘层和插入层、选择层和激活层（2）掌握层的属性设置方法、调整层的大小和位置（3）掌握在层中输入文本和插入图像的方法（4）掌握嵌套层的创建（5）掌握利用层布局页面的方法（6）了解层与表格之间的相互转换方法（7）掌握使用层制作下拉菜单的方法项目9：HTML语言2（1）掌握Dreamweaver8的HTML源代码编辑功能。（2）掌握快速标签编辑器、标签选择器和标签编辑器的使用方法（3）掌握常用的HTML标记的含义及其应用（4）学会手工修改HTML代码（文本、图像、表格）项目10：制作多媒体页面2（1）掌握在网页中插入flash动画（透明Flash背景）及属性的设置（2）掌握在网页中插入flash按钮和flash文本及属性的设置（3）掌握在网页中插入视频和音频的操作方法（4）掌握在页面中插入背景音乐（5）学会制作flash图像查看器项目11：超级链接（上）2（1）掌握绝对路径和相对路径的概念（2）掌握创建页面间的链接和网站间的链接的操作方法（文本、图像和动画）（3）掌握属性检查器中的“目标”选项的含义（4）掌握创建E-mail链接的操作方法项目12：超级链接（下）2（1）掌握制作下载超链接的方法（2）掌握制作脚本链接的方法（3）掌握创建锚点链接的方法（4）掌握制作图像映射的方法（5）学会通过手工修改HTML的方式实现链接（6）掌握测试链接的有效性的操作方法项目13：表单网页（上）2（1）掌握在表单网页中插入表单域（2）掌握在表单域中插入文本域（3）掌握隐藏域的制作方法（4）掌握在表单域中插入单选按钮组和复选框（5）掌握在表单域中插入列表和菜单项目14：表单网页（下）2（1）掌握按钮、图像域和文件域的制作方法（2）掌握标签和字段集的制作方法（3）掌握跳转菜单的制作方法（4）学会通过手工修改HTML的方式实现表单网页项目15：CSS美化网页（上）2（1）掌握CSS样式表的基本语法和定义位置（2）掌握CSS样式表的创建方法（3）掌握CSS美化普通文本、美化背景项目16：CSS美化网页（下）2（1）掌握CSS美化表单、美化链接、美化图像（2）掌握CSS美化鼠标、光标、页面滚动条（3）掌握外部样式表的使用项目17：网页特效（上）2（1）学会使用时间轴制作特效的操作方法（2）学会使用插件制作特效的操作方法项目18：网页特效（下）2（1）学会使用行为制作特效的操作方法（播放声音、弹出浏览器窗口、设置状态栏信息、检查表单、设置框架文本、设置状态栏文本、设置导航栏图像、显示隐藏弹出式菜单）项目19：JS技术（上）2（1）掌握JavaScript的基本语法（2）了解JavaScript的对象，掌握Window对象、Document对象和常用的内置对象（3）掌握JavaScript代码嵌入HTML代码的方法项目20：JS技术（下）2熟悉应用JavaScript技术制作几种常见的网页特效（日期/时间、图片、文字、表单、页面）项目21：框架网页2（1）掌握在网页中创建框架的操作方法（2）掌握为框架命名并导入框架源文件的操作方法（3）掌握保存框架集文件和各个框架操作文件（4）掌握设置框架集属性和框架属性的操作方法（5）掌握编辑框架内容的操作方法（6）了解设置超级链接的操作方法项目22：模板和库2（1）理解模板和库的作用（2）掌握模板的创建和将已有网页生成模板的操作方法（3）掌握模板的编辑，包括创建可编辑区域、定义可编辑区域、定义重复区域和更新模板（4）掌握库的创建、库的编辑（5）掌握用库和模板制作网页项目23：实例分析4（1）掌握网站的开发流程，了解网站的规划与组织（2）掌握网页设计的规范（3）熟练制作首页（4）熟练制作其他页面（5）培养制作布局较为复杂网页的能力（6）学会综合利用文字、图片、flash动画、视频文件等素材制作网页项目24：网站的上传和维护2（1）掌握网站测试的方法（检查链接、生成站点报告、检查目标浏览器、验证站点）（2）了解域名的设计与申请方法（3）掌握申请网站空间的过程（4）设置远程主机的信息（5）掌握网站的发布方法（6）掌握网站页面的上传（7）了解网站的维护与更新2．独立实训，共30学时实训项目名称计划课时教学内容及能力目标教材章节网站名称实训1：工具软件的使用2（1）了解一些制作网页、处理图像、制作动画等软件（2）熟悉Dreamweaver8的启动与退出（3）熟悉Dreamweaver8的界面布局和工作环境实训2：站点规划和网页的整体设置2（1）掌握Dreamweaver8的参数设置方法（2）熟练掌握站点创建和管理的操作方法（3）掌握页面属性的设置方法（4）掌握设置页面的尺寸规范和色调搭配（5）掌握网站中网页名称和目录的命名规范实训3：文本和图像的操作2（1）掌握在网页中输入文本、输入空格、实现文本换行和编辑文本的方法（2）学会在网页中插入水平线、日期和特殊符号（3）掌握网页文本格式化操作（4）掌握图像的插入方法，图像属性的设置方法（5）掌握图像与文本混合编排的方法实训4：表格的使用2（1）掌握表格和单元格的添加、删除、合并的