回麻雀苑主页          到麻雀苑-搜狐博客

本学期网页设计作业指导书

媒体:原创  作者:段保珠
发布:老麻雀 2010-2-23 23:42:26

 

作业目录

1

认识HTML代码

2

站点创建和网页布局

3

站点设计入门练习

4

图层、行为、时间轴的应用

5

特效代码的插入

6

框架的应用

7

浮动框架的应用

8

表单的使用

9

CSS样式的应用

10

模板的应用

11

网页图片的优化及预处理

12

Flash动画及在网页中的应用一

13

Flash动画及在网页中的应用二

14

应用IIS服务器

15

完整站点的设计制作

 

 

 

 

 

 

 

 

网页作业一

作业名称

认识HTML代码

编号

1

作业目的

了解并初步掌握使用HTML代码编制网页

作业内容

按教师要求,修改完善教师提供网页的HTML代码

作业要求及结果

一组HTML代码编制的网页

作业步骤

及

具体要求

作业步骤:

1.         阅读教师提供的一组网页的HTML代码。

2.         按照教师提出的要求,使用“记事本”修改网页中代码。

3.         修改完成后,保存,浏览修改的结果。

4.         选作内容:在理解的基础上,按教师要求,使用HTML代码编制1-2个简单的网页。

5.         将完成的网页文件夹,上交给教师讲评

 

具体要求

1.         将所有网页版权中的班级、学号、姓名更换成自己的班级、学号、姓名。

2.         更改首页的标题改。

3.         将首页之外的所有网页的某标识文字,更改字形字体颜色。

4.         替换某页的两个图片。

5.         在某页插入两个图片。

6.         将某页的一段文字改成滚动字幕形式(走马灯)

7.         为某”页几个文字添加超链接,指向首页。

8.         为某页的一个表格添加背景色。

备注及

注意事项

 

 

网页作业二

作业名称

站点创建和网页布局

编号

2

作业目的

了解并掌握创建站点和网页布局的规范及操作

作业内容

创建站点、创建网页、实现网页布局

作业结果

一个包含6个网页的站点文件夹

作业步骤

 

1.         创建站点

2.         创建站点所属子文件夹。

3.         在站点根目录创建首页index.htm。

4.         在站点子文件夹内创建其他网页。

5.         在首页进行布局设计

a)         分辨率的设置(800×600兼容1024×768)

b)        主标题的安排

c)        导航栏的安排

d)        主体内容的安排

e)         版权的安排

6.         其他网页的布局设计。

7.         链接的完成。

8.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         必须使用表格实现布局。

2.         站点文件夹、子文件夹、网页、以及图片的命名,不得包含汉字和空格。

3.         必须有放置图片的image文件夹。

4.         首页index.htm必须放置在站点根目录。

5.         其他网页必须放置在对应的子文件夹内。

6.         每页的标题设计不要忽视。

7.         网页设计使用的素材可以自己搜集,也可以使用教师提供的

 

网页作业三

作业名称

站点设计入门练习

编号

3

作业目的

了解并掌握站点设计的基本规范、步骤和方法

作业内容

创建一个符合规范的小站点

作业结果

一个不少于6个网页的站点文件夹

作业步骤

 

1.         创建站点和所属子文件夹。

2.         创建首页index.htm。

f)         布局设计

g)        导航设计

h)        内容安排及插入所需页面元素

i)          版权设计

3.         在站点子文件夹内创建并设计其他网页。

4.         实现各网页间的链接。

5.         检查测试。

6.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         必须先创建站点,再进行网页设计。

2.         网页设计必须先进行布局设计在插入内容。

3.         注意所有的设计规范。

4.         站点使用的素材可以自己搜集,也可以使用教师提供的

 

网页作业四

作业名称

图层、行为、时间轴的应用

编号

4

作业目的

掌握网页中图层、行为、时间轴的应用

作业结果

应用图层、行为、时间轴网页的站点文件夹

作业内容及步骤

 

 

1.         创建站点和首页index.htm。

2.         首页及其他页必须实现的内容。

a)         屏幕窗口中的浮动图片广告。

b)        图层显示隐藏的应用(如下拉菜单、文字对应图片……)

c)        图片交换

d)        弹出窗口的行为

3.         选择实现的内容。

a)         播放及停止实践轴

b)        弹出信息文本框

c)        设置文本

4.         可以自行创意应用图层、行为、时间轴的网页

5.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         所有设计项目要与网页的内容匹配

3.         行为的激活方式要适用并和内容匹配。

4.         不得设计纯技术应用,无具体内容的网页

 

网页作业五

作业名称

特效代码的插入

编号

5

作业目的

掌握特效代的应用

作业结果

1-3个网页的站点文件夹

作业内容及步骤

 

 

1.         特效代码的收集

2.         特效代码软件的使用

a)         万旭

b)        网页设计精灵

c)        网页特效梦工厂

d)        ……

3.         复制代码插入网页

a)         插入的位置定位

b)        插入的方法

4.         检查应用效果。

5.         必须有系统日期时间、设为首页、添加到收藏夹三个特效

6.         选作鼠标、链接、图片、窗口三个以上特效

7.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         有些特效代码插到同一个网页中,可能有冲突

3.         插入的特效要与内容匹配

 

网页作业六

作业名称

框架的应用

编号

6

作业目的

掌握网页框架应用的方法

作业结果

6个以上网页的站点文件夹

作业内容及步骤

 

 

1.         框架集网页的制作

2.         框架初始网页的制作。

3.         链接目标的使用:

a)         默认位置的链接

b)        连接到新窗口

c)        连接到整页

d)        连接到本窗口

4.         链接内容和方式的区别:

a)         框架页中返回链接的设计

b)        链接框架集

5.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         框架集页的标题不得缺少。

3.         合理的使用框架页滚动条(一般不得出现水平滚动条)

4.         框架集和各个框架页背景颜色设计要匹配

5.         框架边框的应用要合理

 

网页作业七

作业名称

浮动框架的应用

编号

7

作业目的

掌握网页浮动框架应用的方法

作业结果

6个以上网页的站点文件夹

作业内容及步骤

 

 

1.         浮动框架的创建

2.         浮动框架的初始设置。

a)         名称的设置

b)        初始src的设置

c)        滚动条的设置

d)        大小的设置

3.         链接浮动框架:

a)         框架页中网页的设计(宽度<=浮动框架宽度)

b)        链接的方法

4.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         浮动框架中被链接的网页不少于三页。

3.         浮动框架中网页背景和整页背景要匹配

4.          

 

网页作业八

作业名称

表单的使用

编号

8

作业目的

掌握表单制作和应用的方法

作业结果

一个表单网页

作业内容及步骤

 

 

1.         创建表单域

2.         添加表单项,并进行设置。

a)         文本框、密码框、多行文本框

b)        单选钮

c)        复选框

d)        下拉列表

e)         提交按钮、重置按钮

3.         动作的编辑(E-mail方式)。

a)         方法

b)        内容

4.         检查表单行为的使用

5.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         使用表格,将每个表单项放置到不同单元格中,使得设计美观。

3.         表单项不得少于四种,项目不得少于六项

4.         注意表单项设置的正确合理

5.         不得省略动作设计

6.         不得省略检查表单的行为

7.          

 

网页作业九

作业名称

CSS样式的应用

编号

9

作业目的

掌握CSS样式的应用

作业结果

4-8个网页的站点文件夹

作业内容及步骤

 

 

1.         创建css样式文件

a)         类型

b)        链接

2.         在本页的应用

3.         在其他网页中的使用

a)         导入

b)        链接

4.         设计制作链接不同表现方式的CSS样式。

5.         设计站点内统一字体、字型、字号的CSS样式。

6.         将CSS样式应用到各个网页

7.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         选用的网站,不得少于四页。创建CSS样式,修饰整个网站。

3.         修饰的结果须统一协调、美观、恰当。

4.         创建应用的CSS样式必须有链接、文字、行距的样式。

5.         选作背景、图片、列表、方框、等其他CSS样式

6.          

 

网页作业十

作业名称

模板的应用

编号

10

作业目的

模板的制作及在网页中的应用

作业结果

6-8个网页的站点文件夹

作业内容及步骤

 

 

1.         使用网页生成模板

2.         编辑模板

a)         删除非共用内容

b)        添加设置可编辑区

c)        保存模板

3.         应用模板生成新网页。

a)         生成

b)        在可编辑区添加内容

4.         更改模板

5.         使用新模板更新网页

6.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         模板设计过程中,可编辑区的合理设置。

3.         会使用模板更新网页的两种方法。

4.         注意模板页的标题要适用所有生成的网页。

5.         注意从模板中脱离的使用。

6.         网站中至少有一页应用从模板中脱离。

7.         选作两个模板,并生成对应的网页。

 

 

网页作业十一

作业名称

网页图片的优化及预处理

编号

11

作业目的

掌握网页中图片预处理的规则和方法

作业结果

1-3个应用图片网页的站点文件夹

作业内容及步骤

 

使用Fireworks预处理网页中的图片,然后应用到设计的网页中

1.         选择网页中使用的图片

2.         使用Fireworks进行以下处理。

a)         优化(适用的尺寸、适度的清晰、最小的体积)。

b)        使用切片技术分割图片(切割用于网页中的大幅图片)。

c)        裁剪图片(长宽不合适的图片)。

d)        改变图片透明度(应用到背景的图片)。

e)         背景透明的图片(应用的移动的图片)。

3.         使用按钮图片制作软件制作一批按钮图片。

4.         将预处理过的图片应用到网页中(相册图片)。

5.         选作内容:

a)         图片的批处理。

b)        网页相册。

c)        热区链接。

6.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范,尤其注意布局规范和图片文件命名规范。

2.         网站所有图片不得使用老师提供的素材。

3.         主页的背景须使用图片切片拼接。

4.         所有应用到网页中的图片需<50K。

5.         网页的图片须和网页内容匹配。

6.         删除image文件夹中所有不用的图片文件。

7.         供用户下载的图片不能进行优化,但要保存在单独文件夹中。

 

网页作业十二

作业名称

Flash动画及在网页中的应用一

编号

12

作业目的

掌握Flash帧动画、渐变动画的制作及在网页中的应用

作业结果

1-3个网页的站点文件夹

作业内容及步骤

 

 

1.         Flash帧动画的制作。

2.         移动渐变的Flash动画的制作。

3.         使用引导层移动渐变的Flash帧动画的制作。

4.         将渐变动画插入到网页。

a)         插入的位置定位。

b)        插入的方法。

5.         检查应用效果。

6.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         Flash动画的内容要与网站匹配。

3.         Flash动画的大小要与插入预留位置匹配

4.         Flash动画的背景要与网页背景匹配

 

 

网页作业十三

作业名称

Flash动画及在网页中的应用二

编号

13

作业目的

掌握Flash形状渐变、蒙版动画的制作及图片切换插件的应用

作业结果

1-3个网页的站点文件夹

作业内容及步骤

 

 

1.         形状渐变Flash动画的制作。

2.         蒙版Flash动画的制作。

3.         图片切换插件的设置和应用。

4.         将Flash动画及插件插入到网页。

a)         插入的位置定位

b)        插入的方法

5.         检查应用效果。

6.         将完成的网页文件夹,上交给教师讲评

备注及

注意事项

1.         注意设计规范。

2.         Flash动画的内容要与网站匹配。

3.         Flash动画的大小要与插入预留位置匹配

4.         Flash动画的背景要与网页背景匹配

5.         Flash图片切换插件的设置要完整,选用图片与插件设置的宽高相匹配。

 

网页作业十四

作业名称

IIS服务器的设置和使用

编号

14

作业目的

掌握站点的设置和使用方法

作业结果

开通IIS,在局域网上测试网站

作业内容及步骤

 

 

1.         使用Dreamweaver的“结果”面板检查站点中的网页

2.         架设IIS服务器测试站点

c)        虚拟目录的设置

d)        使用IP地址访问站点

e)         浏览站点中每个网页

3.         修改检查出错误的网页。

4.         找老师检查IIS开通和网站测试情况。

备注及

注意事项

1.         注意检查站点中所有的链接和孤立文件。

2.         严格区分双击打开网页和IP地址访问网页。

3.         选作,将自己家中的计算机开通IIS,放置自己设计制作的网站,供互联网用户访问。

 

网页作业十五

作业名称

完整站点的设计制作

编号

15

作业目的

掌握完整站点设计制作的方法和规范

作业结果

不少于12页的站点文件夹

作业内容、步骤

及要求

 一. 期末大作业的总体要求

1)       设计制作一个自主命题的网站。站点网页总数量不少于12页。如果站点的内容多,规模稍大,可以二到三人合作完成。但平均每人完成的页面不少于12页。

2)       站点设计制作中,所使用的一切技术,要服务于站点的内容,与内容的需求协调一致,。

3)       在指定时间完成上交设计制作的网站。

二.作业的内容要求

1)       站点的主题鲜明,内容健康向上,体现当前的社会精神面貌。

2)       站点的栏目结构清楚,组织安排合理。

3)       各栏目下的网页,页面文字和图片内容充实。

三.设计制作步骤

1)       确定站点的主题和规模。

2)       搜集相关的文字材料和图片素材,使用相关软件整理、编辑素材,制作动画。

3)       站点结构设计。

4)       主页的设计制作。

5)       其他网页的设计制作。

6)       站点的整体调试和测试。

7)       架设IIS服务器,设置网站。

四.设计制作的技术要求

1)       严格注意设计规范

1.       站点文件夹内,除了主页index.htm,其他网页必须放置在子文件夹内。

2.       所有文件命名不得使用汉字、不能包含空格。

3.       所有网页的分辨率定为800×600兼容1024×768

4.       所有网页都要进行布局设计。尤其是主页要有完善的布局。

2)       充分展示所学的设计制作技术

1.       站点中需应用浮动框架技术。

2.       站点中至少有一处使用滚动字幕。或与内容相匹配的flash。

3.       图层、行为技术的适当应用,不少于两处。

4.       特效代码的使用,不少于两处,表现的内容和形式必须与站点内容恰当匹配。

5.       所有图片必须优化后,再使用到网页中,大图片要使用切片技术。

6.       适当选用框架、表单、CSS样式、锚点、模板、插件等技术。

3)       严格进行站点的调试和测试

1.       认真检查每个链接,不得出现链接错误或无效链接。

2.       认真检查导航系统,保证不出现孤立网页和使用“后退”按钮的网页。

3.       上传前,必须将站点使用IIS服务器测试。

4)       杜绝常见的设计制作错误

1.       主页未命名为index.htm,放置在站点根文件夹下。

2.       图片文件不放置在image文件夹内。

3.       网页中的“标题文字”未填写,出现无标题文档。

4.       出现无效链接和不能显示的图片。

5.       未删除多余的垃圾文件,造成站点规模增大。

6.       背景图片未处理,直接使用。造成与页面内容冲突。

7.       随意改变网页中图片的纵横比,使得图片变形。

5)       站点中必须有“关于我们”网页

1.       “关于我们”网页命名为readme.htm,格式自定。

2.       内容包括:①站点简介(主题中心思想、设计目的和基本构思)、②站点结构图、③文件详细列表、④设计过程和使用的主要技术、⑤设计心得体会、⑥设计制作人员。

3.       应尽量将设计的特色和自己的学习亮点表述清楚。

 

 

我也说两句
E-File帐号:用户名: 密码: [注册]
评论:(内容不能超过500字,如果您不填写用户名和密码只能以游客的身份发表评论。)

*评论内容将在30分钟以后显示!
发表须知:
一、用户须严格遵守国家法律和政策,包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定,审慎、合法地利用伊妃(E-file)平台发表言论、作品。
二、用户的言论、行为若涉嫌违法或侵权,用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定,伊妃(E-file)运营方有义务提供用户资料,有义务和权利采取删除、屏蔽、断开链接等各种必要措施。
三、伊妃(E-file)中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。

 

段保珠 版权所有     E-mail:dbz@sina.com
阿酷科技 Arkoo.com  提供底层技术