Personal tools
最新动态 ·  中心介绍 ·  实验教学 ·  实践创新 ·  自主学习 ·  中心建设 ·  共享论坛 管理
文档操作

《网设计与制作》教学大纲

课程代码:0800737

课程负责人:何明贵

课程中文名称:网页设计与制作

课程英文名称:Web Design and Development

课程类别:必修

课程学分数:2

课程学时数:36

授课对象:新闻学专业网络传播方向本科学生

本课程的前导课程:计算机基础与应用


 

一、教学目的和要求

随着Internet(国际互联网)的发展,网页服务变得越来越重要。一方面要能够在网上获取自己所需要的信息,另一方面,还需要懂得制作网页。本课程正是针对培养学生设计与制作网页的能力而开的。

网页的设计与制作是一门与计算机结合十分紧密的课程。既需要一定的理论知识,也需要一定的实际操作能力。

本课程对学生有如下要求:

1.       了解网页的组成,一般包括哪些元素。

2.       掌握网页描述语言,即与平台无关的超文本链接语言----HTML语言----有关文字、图片、表格、链接、框架、表单等方面的标记及其使用方法。

3.       用于控制HTML所描述网页的效果的技术――CSS技术,介绍其在尺寸、字体、颜色以及及它一些方面的使用方法。

4.       掌握一些与网页设计与制作相关的软件,如FrontPage、Dreamweaver、Flash等的使用方法,能通过这些软件做出一定的网页效果。

5.       掌握动态网页制作的一些技术,服务器端动态网页的制作技术,客户端动态网页制作技术DHTML。

6.       掌握常见的网页发布的方法、流程等相关知识。

7.       了解网页设计制作方面的新技术、动态,如XML、ASP、JSP、PHP技术等等。

二、课程内容与学时分配

周次

教学内容

教学方式

第1周

概述

多媒体教学2学时

第2周

HTML基础

多媒体教学2学时

第3周

HTML基础

多媒体教学2学时

第4周

HTML常用常用标记介绍

多媒体教学2学时

第5周

HTML常用常用标记介绍

多媒体教学2学时

第6周

HTML常用常用标记介绍

多媒体教学2学时

第7周

CSS技术

多媒体教学2学时

第8周

CSS技术

多媒体教学2学时

第9周

CSS技术

多媒体教学2学时

第10周

动态网页介绍

多媒体教学2学时

第11周

动态网页介绍

多媒体教学2学时

第12周

动态网页介绍

多媒体教学2学时

第13周

用FrontPage制作网页

多媒体教学2学时

第14周

用Dreamweaver制作网页

多媒体教学2学时

第15周

用Dreamweaver制作网页

多媒体教学2学时

第16周

用Dreamweaver制作网页

多媒体教学2学时

第17周

网页设计其它软件介绍

多媒体教学2学时

第18周

网页设计其它软件介绍

多媒体教学2学时

 

 

       第一章         概述

主要内容:

WWW网页浏览服务在Internet各种服务中的重要地位。

网页的概念、网页的样式、网页的组成元素;网页的种类与用途;与网页相关的概念介绍,如域名、URL(统一资源定位器)、超链接、书签、表单、数据库、动态网页、服务器/客户端(Server/Client)运行模式、服务器与浏览器、网站发布等等。

站点的概念;站点创建的基本原则与流程、网站策划书的编写、站点的发布知识;页面设计要求;建立站点、设计网页所需软硬件设备等等。

网站制作的分工、人员分配,如网站策划人员、版面美工人员、网络软件编程人员、采编人员、网站测试人员、网站维护人员等等。

重点讲授:

1.       WWW与Internet的关系。

2.       Web结构的基本组成

3.       网页的组成及分类

4.       网站制作的基本流程

 

       第二章           HTML基础

主要内容:

HTML的概念;HTML的发展及其概述;HTML的特点;HTML的工作原理。

Web页的概念;标记的概念;Web页的基本结构,如HTML标记、TITLE标记、BODY标记、注释等。

HTML语言中,特殊字符的表示方法。

最后,介绍一个简单的页面的制作过程。

重点讲授:

1.       HTML的概念及其发展。

2.       HTML标记及属性的使用。

3.       HTML的使用方法、特点。

4.       基本的HTML文件结构。

 

 

       第三章           HTML常用标记介绍

 

主要内容:

文本格式方面:如文本分段、文字对齐、控制文本的显示效果、列表格式等等。

图像与超链接方面:如Web图像格式、使用网页图像要点、图像标记符IMG、页面中的动画等;超链接的相对地址与绝对地址、页面间的链接、锚点链接、电子邮件链接等以及图像映射方面的知识。

表格与框架方面:表格的基本构成、合并单元格、表格的边框颜色对齐等的属性设置、使用表格及嵌套表格进行页面布局;框架的作用、框架结构、框架的边框效果、利用边框进行网页布局等等。

表单方面:表单的作用;文本框与口令框、复选框与单选框、文件选择框、按钮、多行文本框、选项菜单等常用表单控件的应用;表单数据接受的实现原理等等。

网页中的特殊对象:如多媒体对象、Java小程序对象等等。

 

 

 

       第四章           CSS技术

 

主要内容:

CSS(Cascading Syle Sheet、层叠样式表)的概念、CSS的用途;

CSS中对属性单位的控制,包括厘米、英寸、毫米、点、像素等长度单位,百分比单位,颜色单位等;

定义CSS样式表的方法:在标记符中直接嵌套样式信息,在SYTLE标记符中定义样式信息,链接外部样式表中的样式信息等几种方法。

CSS样式定义:HTML标记符、具有上下文关系的HTML标记符、用户定义的类、用户定义的ID以及虚类等方式。

CSS属性:与字体与文字相关的属性、颜色与背景属性、布局属性、定位和显示属性、列表属性以及鼠标属性等等。

CSS过滤器(filter)介绍:将特定的效果应用于文本容器、图片或者其它对象,只能是HTML的控件元素,即在网页上定义了一个矩形空间,浏览器窗口可以显示这些空间,包括:BODY、BUTTON、DIV、IMG、INPUT、MARQUEE、SPAN、TABLE、TD、TEXTAREA、TH等。例如,可以创建阴影效果(IMG{filter:alpha(Opacity=80)})、模糊效果、翻转效果等等。

 

 

 

       第五章         动态网页介绍

 

主要内容:

动态网页的实现技术。利用HTML的脚本标记符SCRIPT来插入客户端脚本,如JavaScript脚本、VBScript脚本等;在表单的输入元素标记符内直接添加脚本,以响应输入元素的事件;通过在SCRIPT标记中的scr属性中,添加外部脚本文件来实现较大、较复杂的脚本程序。

使用浏览器对象来实现动态效果:文档对象模型(Document Object Model,简称DOM)的概念;document对象、window对象、Form对象等对于实现动态网页的原理。

DHTML技术的介绍。

服务器端动态网页技术介绍:服务器端动态网页的实现原理;服务器端动态网页的优缺点及其应用场合;CGI技术介绍;ASP技术介绍;PHP技术介绍;JSP技术介绍。

 

 

 

       第六章           用FrontPage制作网页

 

主要内容:

FrontPage软件的介绍;用FrontPage制作网页的特点;FrontPage的操作界面,如工具栏、视图区、页面编辑区、下拉菜单、弹出菜单等等;用FrontPage进行网页制作的一般步骤;新建或者打开一个站点、建立编辑与保存页面,以及站点的管理等等;

在FrontPage中制作网页元素的过程:文字的处理,如文字的输入、字体与字号字形的编辑、文本的装饰、段落属性如对齐的设置;表格的制作与编辑;图片的插入、图片属性的设置、图片的简单编辑;视频文件的插入,如AVI、RAM、ASF;声音文件的插入,如WAV、MID、RAM、MP3等;框架(Frame)的制作。

超链接的制作:创建文本超链接;创建图像超链接;创建图像映射(map)链接,如矩形热点、圆形热点、多边形热点;利用书签建立页面内部的链接;对超链接的更改删除等编辑操作。

其它一些FrontPage插件的插入:时间戳的插入;字幕(marquee)的制作;悬停按钮;广告横幅;以及动画效果等等。

在FrontPage使用CSS样式表,以及对各种CSS方式的支持;导航条的作用与制作;站点的管理等等。

讲解一个利用FrontPage制作网页的实例。

 

 

 

       第七章           用Dreamweaver制作网页

 

主要内容:

Dreamweaver软件介绍;Dreamweaver的操作界面,如下拉菜单、对象面板、工具面板、浮动面板、对象属性面板、页面编辑窗口、代码视图以及Dreamweaver的站点管理窗口等等。

Dreamweaver制作网页的一般步骤:创建网站、建立页面、创建其它子页面;以浏览器里对整个网站进行测试;发布到因特网服务器上;网站更新与维护。

创建本地站点;打开站点、编辑站点;创建远程站点;本地站点的上传与本地远程站点的同步更新。

使用可视化助手,如标尺和网格,草图等。

插入文本、编辑文本、插入特殊符号、插入段落缩进空格、插入日期、插入水平线;文本格式设置,如段落和标题、段落对齐和字符样式、设置文本字体、设置字号和字符颜色;创建列表;创建超链接,如内部超链接、锚点链接、外部超链接、电子邮件链接等;

页面布局与修饰:插入图像,翻转图像、制作Web相册;插入多媒体对象,如插入Flash动画对象、插入Shockwave电影等;使用表格进行布局,建立表格、选择表格或单元格;设置表格属性、设置单元格属性;创建框架、保存框架、设置框架集和框架的属性。

创建表单;设置表单控件属性;添加表单文本标签。

样式的使用:使用HTML样式;使用CSS样式,如使用内部样式、使用外部样式表;导航条的制作;

创建动态效果:创建层、使用层面板、设置层属性、层的对齐与修改、层的嵌套、在层中插入文字或者图像元素、层与表格的转换、制作运动的层;使用行为面板、使用Dreamweaver自带的行为。

 

 

       第八章         网页设计其它软件介绍

 

主要内容:

网页动画制作软件Flash介绍:概述;软件界面布局;概念介绍,如帧(Frame)、关键帧(Key Frame)、符号(Symbol)、符号库;一个简单实例的制作过程。

其它一些素材制作相关软件:ImageReady中对于网页图象的支持功能,如切片、格式转换、压缩比较、颜色转换、动画的制作等;Ulead GIF Animatior软件介绍。

三、教材与参考书

教材:网页制作教程第一版,人民邮电出版社,陈强 孙建华 赵丰年,2001

参考书:[1]网页设计4合一培训教程,机械工业出版社,江春,2000

        [2]动态网页设计培训教程,清华大学出版社,刘育楠,2001

        [3] WEB编程丛书-HTML编程指南, 电子工业出版社, 武焰, 1999

四、作业和考核方式

作业:

       第一章         概述

1、 为什么WWW网页服务在Internet服务中具有重要地位?

2、 网站设计的基本原则是什么?

3、 上网浏览一下一些典型网站,并按所学知识分析一下它们的类型与特点?

4、 网页内容在网络服务器端与客户端的运行模式是怎样的?

 

       第二章           HTML基础

 

1、 简要说明HTML的基本工作原理。

2、 编写一个能够显示背景图案并能播放背景音乐的简单网页。

3、 熟悉特殊符号的表示,如标记符号(<HTML></HTML>)的HTML语言表示代码。

 

       第三章           HTML常用常用标记介绍

 

1、 HTML中与文本相关的标签有哪些?

2、 找一段印刷排版文字,用HTML语言的文字控制标记写出其HTML代码,注意文字大小、对齐等。

3、 为什么在网页链接中要注意相对地址与绝对地址?

4、 简要说明网页中两种常用图像格式GIF和JPEG的区别、各自特点?

5、 用HTML语言编写一个网页,实现单击其中一幅图像,则跳转到另一个页面。

6、 用HTML语言制作一个课程表格。

7、 利用框架有什么优点?

8、 表单在网页中起什么作用?

9、 用HTML代码编写一个网页中经常用到的用户登录窗口?

10、      HTML中加入其它对象的作用是什么?

11、      试在HTML中插入一个Flah对象的动画。

 

 

 

       第四章           CSS技术

1、 简要说明在页面中使用CSS的三种方式,并说明各自的特点。

2、 CSS中用于控制单位的方式各有什么优缺点?各用于什么场合?

3、 上网查看具有较好视觉效果的网站,看其是如何进行CSS样式表定义,以提高可视性的?

4、 试验几种用于控制文字的效果的CSS属性,并看其效果。

 

       第五章         动态网页介绍

 

1、 举例说明向见网页中插入脚本的三种方法。

2、 什么是DHTML技术。

3、 自己实现一个简单的动态网页的例子。

4、 常用的服务器端动态网页实现的技术有哪些,各有什么特点?

 

 

       第六章           用FrontPage制作网页

1、 FrontPage的特点有哪些,适合于做什么样的网页?

2、 练习使用框架页面的建立。

3、 学习在FrontPage页面中插入图片,并对图片进行各种处理,及在图片上添加图片文字。

4、 学习使用FrontPage提供的各种组件来制作网页。

5、 练习FrontPage中的各种主题、模板的使用。

6、 FrontPage中,进行站点管理的功能有哪些?

 

 

 

       第七章           用Dreamweaver制作网页

 

1、 练习用Dreamweaver进行网站的创建与管理。

2、 练习在Dreamweaver里框架的使用。

3、 练习使用表格辅助页面排版。

4、 熟练使用层的功能,来实现页面的设计。

5、 练习CSS样式文件的创建与使用。

 

 

 

       第八章         网页设计其它软件介绍

 

1、 Flash动画的实现原理是什么?

2、 Flash动画有哪些特点?为什么这种动画格式能在网络中得到快速发展?

3、 练习使用Flash制作一个简单动画。

4、 练习使用Ulead GIF Animatior制作一个广告条动画(banner)。

 

考核方式:考试考查 作业



关闭本页
·武汉大学新闻传播学实验教学中心 Laboratory Center for Journalism & Communication, Wuhan University
·Copyright © 2004-2006. All Rights Reserved.
    This site conforms to the following standards: