《网页设计与制作》课程实践考核要点和样题

《网页设计与制作》实践环节考核要求


    《网页设计与制作》是一门实践性很强的课程,考生通过实践应掌握电子商务网站设计的基本原则和基本方法。能熟练掌握用HTML语言编写静态网页;掌握CSS层叠样式表在网页中的应用;掌握JavaScript语言在主动网页中的应用。能熟练使用FrontPage 2003或Dreamweaver工具创建网站并设计网页;能使用Photoshop工具简单处理图像素材;能使用Fireworks工具切割图形,制作简单的GIF动画;能使用Flash工具制作简单的Flash动画;能熟练使用FTP工具Cute Ftp下载网页制作所需的素材,上传并发布所创建的网站,掌握使用WinZIP或RAR工具解压缩下载的素材。考核的具体要求如下:

第一部分 网页内容

一、超文本语言HTML

1、HTML基本结构
掌握HTML文件的基本结构,掌握标记<html>、<head>和<body>的使用,掌握注释<!-- -->的使用。
2、页面排版
掌握标记<title>、<hx>、<br>、<pre>和<center>在网页中的使用;掌握文字效果标记<strong>(<b>)、<em>(<I>、<cite>)、<u>、<strike>、<sup>、<sub>和<font>的使用,掌握<body>标记属性bgcolor、background、align和text的设置;掌握特殊符号“<”、“>”、“””和“&”在网页中的表示方法。
3、清单列表
掌握标记<menu>、<lh>、<li>、<ul>、<ol>和<li>的使用和相关属性的设置。
4、表格
熟练掌握应用表格来布局网页的各种元素;掌握表格标记<table>、<tr>、<th>、<td>和<caption>的使用;掌握<table>标记属性border、width、cellspacing、cellpadding和bgcolor的设置;掌握<th>、<td>标记属性width、height、align、valign、bgcolor和nowrap的设置;掌握单元格的合并,即及相关标记属性rowspan和colspan的设置。
5、图片
掌握<img>标记的使用,及相关属性width、height、hspace、vspace、border、align和alt的设置。
6、超级链接
掌握<a>标记的使用,及相关属性的设置;掌握同一网页内的链接,同一网站内其他网页的链接,其他网站网页的链接;掌握图片超级链接,图片上部分区域的超级链接及相关标记<map>、<area>使用和属性的设置。
7、多媒体
掌握<embed>标记的使用,及相关属性width、height、autostart和loop的设置
8、表单
掌握表单标记<form>和表单元素标记<input>的使用及有关标记属性的设置,掌握普通按钮、发送按钮、重置按钮、文本框、密码框、复选框、单选按钮、选择菜单框和文本域框的使用。
9、框架
掌握框架的基本格式;掌握框架标记<noframes>、<frameset>和<frame>的使用及相关属性src、cols、rows、marginwidth、marginheight、border的设置;掌握框架中的超级链接。
10、META标记
掌握<meta>标记的使用,利用该标记实现动态链接、动态排列文件和网页关键词设置。

二、CSS层叠样式表

1、掌握CSS的基本规则和在网页中引用CSS的方法,重点掌握嵌入式样式单的使用,掌握<style>标记。
2、掌握使用类选择符或ID选择符在网页中引用CSS中的样式。
3、掌握锚伪类的使用,即a:link、a:vistied、a:actived、a:hover的使用
4、掌握CSS中的文本属性letter-spacing、text-decoration、vertical-align、text-align、text-indent、line-height的使用,颜色及背景属性color、backgroung-color、background-image、background-repeat、background-attachment、background-position的使用,字体属性font-family、font-size、font-style、font-weight的使用。

三、JavaScript语言

1、掌握脚本标记<script>的使用及属性的设置,JavasSript语言在网页中的使用。
2、掌握JavaScript语言的变量、表达式的使用,掌握数学操作符(+、-、*、/、%)、逻辑操作符(&&、||、!)、比较操作符(==、!=、>=、>、<=、<)、字符串操作符(+),及操作符的优先级。
3、掌握变量声明,赋值语句,函数定义语句(function),条件语句(if…else),循环语句(for、while、break、continue)、对象操作语句(this)。
4、掌握对象的属性、方法的使用(对象.属性、对象.方法)。
5、掌握内置对象:String对象(属性:length,方法:indexOf()、substring()),Date对象。
6、掌握浏览器对象:Window对象(方法:open()、close()、alert()),document对象(方法:write()、writeln())
7、掌握常用事件(Load、Click、Select)及处理。

第二部分 网页制作工具

一、网页设计工具

网页设计工具涉及FrontPage和Dreamweaver两种软件,要求考生熟练掌握其中一种软件完成考核中关于网页设计部分的题目。
1、掌握使用网页制作工具建立网站,打开已存在的网站。
2、掌握使用网页制作工具在网站内创建新网页,编辑修改网站中已存在的网页。
3、掌握同网站有关的所有网页和网页中用到的素材必须在网站的文件夹中。
4、掌握使用网页制作工具完成静态网页的布局。
5、掌握使用网页制作工具完成静态网页的制作
6、掌握使用网页制作工具,对HTML语言中标记的使用和标记属性的设置。
7、掌握使用网页制作工具,自定义CSS样式,并在网页中使用自定义的样式。
8、掌握使用网页制作工具,编写简单的JavaScript脚本。

二、Photoshop

1、熟悉Photoshop的工作环境。
2、掌握使用Photoshop实现图像文件格式的转换。
3、掌握图层的建立、图层间的关系及透明和图层的合并。
4、掌握对图像的移动、旋转、缩放、选择、复制。
5、掌握对图像部分内容的选取,使用橡皮图章对部分内容的擦除。
6、掌握填充工具的使用。
7、掌握文字的输入及修饰。

三、Fireworks

1、熟悉Fireworks的工作环境。
2、掌握简单的图像编辑。
3、掌握图形的切割。
4、掌握GIF动画的制作。
5、掌握文字的输入及修饰。

四、Flash

1、熟悉Flash的工作环境。
2、掌握图层的使用。
3、掌握绘图工具的使用。
4、掌握对对象的处理。

五、Cute FTP

1、掌握使用匿名方式,从指定的FTP服务器下载考核所需的素材,并使用WinZIP或RAR工具解压缩。
2、掌握使用实名方式,将创建的网站上传到制定的WEB服务器进行发布,并能在浏览器上浏览到上传得网站。

第三部 分使用软件版本

FrontPage 2003简体中文版
Dreamweaver MX 2004简体中文版
Photoshop CS 7.0简体中文版
Fireworks MX 2004简体中文版
Flash MX 2004简体中文版
Cute FTP

附:样题举例
一、创建网站
1、在考盘根目录中建立名为test的“空白网站”。
二、超文本语言HTML
1、在考盘根目录的test站点中,按下列要求设计网页,结果以default.htm保存。
1)请用表格布局整个网页,宽度为700像素,水平居中;水平线的高度为5个像素,棕色;水平线上方图片及文字的位置如上,其中文字:宋体,3号,在单元格中居中,其背景为图片。
2)请用表格布局,在水平线下方,网页右边设计在线调查,文字为2号加粗,在网页左下方插入广告图片,样式如上图。
3)请用表格布局,水平线下方,网页居中偏左设计“本周畅销品种”,样式如上图,文字格式与样张基本相同即可。
4)对畅销品种的图片使用矩形热点,与网页test1.htm建立超链接(该网页在sc文件夹),在缺省窗口中打开;并对网页test.htm中的文字“返回”设置与网页default.htm超链接。
5)在网页底部中间输入设计者的信息:“制作:姓名 张三 准考证号 123456 座位号 100001”字体为5号。


三、CSS层叠样式表
1、在考盘根目录的test站点中,按下列要求使用CSS方法编写一个程序网页,结果以test1.htm保存。
1)在浏览器的左上方显示文字:“在淘宝网主页有花鸟市场栏目”。其字下方为文字:“单击这儿能进入淘宝网花鸟市场”。
2)文字“花鸟市场”的size为150%,color为red,background-color为silver。
3)文字“单击这儿能进入淘宝网花鸟市场”的指向目标为:http://www.taobao.com/vertical/pet/index.php,当鼠标指针移到该文字上,鼠标指针呈手形并且文字变成红色 (color:# ff0000。)
四、JavaScript语言
1、在考盘根目录的test站点中,按下列要求用JavaScript编写一个网页程序,结果以test1.htm保存。
1)在浏览器屏幕的左上角显示一个文本框,其上方显示提示信息:“请正确输入您的邮件地址:”,其右面设置一个命令按钮,上方显示文字:“邮件地址核对”。界面见图示。

2)当在文本框中没有输入任何字符时或者不含有“@”时,用鼠标单击“邮件地址核对” 命令按钮时,则显示一个窗口,上面显示提示信息:“邮件地址输入错误,请重新输入!”
3)当在文本框中输入的字符含有“@”时,用鼠标单击“邮件地址核对”命令按钮时,则显示一个窗口,上面显示提示信息:“邮件地址输入正确!”
五、Photoshop
1、利用图像t0105.jpg中的树枝为素材,制作一幅网页所需的图像文件,如样张,以文件名为g01.gif保存在考盘根目录下,制作的具体要求如下:
1)图像的大小为190X380像素。
2)图像背景的上半部分为橘红色,下半部分为黑色。
3)在图像的左上部分输入文字秋的回忆。
六、Fireworks
1、用素材中的t0101.jpg、t0102.jpg、t0103.jpg、t0104.jpg图像制作一个GIF动画,以文件名为g01.gif保存在考盘根目录下,制作的具体要求如下:
1)GIF动画的大小为200X50像素,对不符合要求的图像,将其右方和下方多余的部分删除。
2)在t0101.jpg图像中增加如下文字“欢迎订阅”。
七、Flash
1、制作如样例效果的Flash动画,以文件名为s01.swf保存在考盘根目录下,制作的具体要求如下:
1)Flash动画的大小为200X50像素。
2)以动画的形式逐个显示文字内容“我能制作Flash动画”。
3)背景为图像文件t0106.jpg。
八、Cute FTP
1、将考盘根目录的test站点中制作好的网站内容,使用FTP方式全部上传到WEB服务器,上传服务器的IP地址为192.168.0.1,用户名为st0001,密码为888888,上传后在IE浏览器中浏览并检查上传得网页,浏览的地址为:htpp://192.168.0.1/st0001。