77范文网 - 专业文章范例文档资料分享平台

网页制作上机练习题

来源:网络收集 时间:2020-04-15 下载这篇文档 手机版
说明:文章内容仅供预览,部分内容可能不全,需要完整文档或者需要复制内容,请下载word后使用。下载word有问题请添加微信号:或QQ: 处理(尽可能给您提供完整文档),感谢您的支持与谅解。点击这里给我发消息

【第一章】 上机练习:

1、下载Dreamweaver 8的安装软件,练习Dreamweaver 8的安装、启动、关闭和卸载。

(从ftp://web@210.28.58.241网站下载)

2、启动Dreamweaver 8进入其工作界面,分别指出各个组件及其功能。 3、在本地计算机D盘建立一个文件夹,以本人姓名和学号命名,如“李明0701010101” 。

然后创建一个站点,站点的名称以本人的姓名的拼音小写字母来命名,如“李明”的站点名称为“liming”。

在站点根目录下新建images、photo、music、flash、main等5个文件夹, 在站点根目录下新建index.html、01.html、02.html、03.html、04.html、05.html、06.html、abc.html等8个页面文件。

【第二章】 上机练习1:

一、打开本地站点根目录下的03.html文件,进行如下设置: 1、设置文件头内容: 文件标题:可爱的校园;

插入关键字:学校简介;校园风光;校园文化;教学设施 插入META:值-author,内容-你的姓名。 2、设置页面属性:

(1)设置页面文本颜色为黄色、背景颜色为绿色; (2)设置标题1为72像素、红色; 3、插入文本

(1)编辑字体,添加黑体和隶书两种字体;

(2)在文档编辑窗口输入“可爱的校园”,格式为标题1,字体居中,字体为隶书;

(3)录入“学校简介”、“校园风光”、“校园文化”、“教学设施”文字,格式为段落,分为4行,并进行项目列表。

(4)在“校园简介”下面另起一行,录入一段校园简介的文字,不少于100字,首行前面4个空格; 4、插入图像

(1)从网上下载校园风光图片3张,存到网站根目录的images文件夹中; (2)在“校园风光”下面另起一行,插入刚下载的第一张图片,修改图片的属性为300×200;

(3)设置鼠标经过图像。把刚下载的第二、第三张图片分别设为“原始图像”、“鼠标经过图像”,修改图片的属性为300×200;

(4)插入一个图像占位符,大小为300×200,颜色为黄色。 5、在文本最后插入水平线。

6、在水平线下面另起一行写入作者姓名,如“作者:李明”。 7、在作者后面10个空格后插入日期。

上机练习2:

一、从学习网站的【网页素材】下载“公园导航图”,在04.html文件中制作电子地图,图片使用锚点链接,具有“返回导游图”功能。

二、申请免费空间并上传作业

1、从本网站的【学生空间】--【申请免费空间】,申请1个免费的网站空间, 并把网站的域名记下;

2、在【学生空间】栏目找到你的姓名,通过“操作”-“编辑”,

把你的网站域名填写到“作业地址”,同时补充完善个人信息(联系电话、电子邮件),

并及时修改你的编辑密码;

3、打开index.html做一个简单首页,链接你的作业一和作业二。 4、把index.html、03.html、04.html和图片上传到你的免费空间, 以后每次作业在首页index.html链接后一起上传到你的空间, 老师将通过空间查看你的作业。

【第三章】 上机练习1:

一、打开站点根目录下的01.html文件,创建一个4行×3列的黑色细线表格,表格宽度500像素,单元格间距为1。

二、打开站点根目录下的01.html文件,在练习一制作的细线表格中,合并第三行的单元格,把单元格高设为30像素;

然后在该单元格(即第三行)插入一个线条颜色为红色、宽为480像素的一像素分割条。 三、打开站点根目录下的02.html文件,用嵌套表格方式制作“新年快乐”贺卡。 背景图片从学习网站的【网页素材】栏目的“网页背景”或自己从网上下载。

1、表格一:1行×1列,宽度500像素,高度318像素,边框为0,单元格间距为0,单元格边距为12像素,背景图像自由选择。

2、表格二嵌套到表格一中:1行×1列,宽度100%,高度318像素, 边框为0,单元格间距为0,单元格边距为12像素,背景图像自由选择。

3、表格三嵌套到表格二中:1行×1列,宽度100%,高度270像素,

单元格间距和单元格边距都为8像素,边框为10,边框颜色为红色。背景图像自由选择。

4、将光标放置在表格三内,添加文字“恭贺新禧”,文字居中,字号68px,字体为隶书,颜色为紫色。

上机练习2: 用表格构建课程教学网站首页

从学习网站的【网页素材】栏目下载“教学网站图片”压缩包,下载到本地后解压,把解压出来的图片复制到网站根目录的“images”文件夹。

打开站点根目录下的index.html文件,清空页面内容。按下面步骤进行制作:

(一)网页顶部

1、创建表格一:1行2列,宽为760像素,边框及边距均为0,间距为1,背景颜色为绿色,居中对齐。

选定表格一的各个单元格,设置背景色为白色,水平为居中对齐。

2、将光标置于表格一左边单元格中,插入logo.gif图像。 3、将光标置于表格一右边单元格中,插入banner.gif图像。

4、将光标置于刚完成的表格之后,插入表格二:1行7列,宽为760像素,边框及边距均为0,间距为1,背景颜色为绿色,居中对齐。

5、选定表格二的各个单元格,设置背景色为白色,水平为居中对齐。 6、在表格二7个单元格中依次插入1.gif、2.gif、3.gif、4.gif、5.gif、6.gif、7.gif图像。

(二)网页中部

1、在表格二后面,插入表格三:1行3列,宽为760像素,边框及边距均为0,间距为1,背景颜色为绿色,居中对齐。

选定表格三的各个单元格,设置背景色为白色,水平为居中对齐,垂直排列为顶端对齐。

2、将光标置于表格三的左边单元格中,设置单元格的宽度为18%,插入8.gif图像。

3、将光标置于8.gif图像后,插入表格四:6行1列,宽为90%,间距为1,背景色为绿色。

4、将光标依次放在表格四第1个到第6个单元格中,设置单元格高为25,水平居中,背景色为白色。

在6个单元格中分别输入文字“●知识点一、●知识点二、●知识点三、●知识点四、●知识点五、●知识点六”。

5、将光标置于表格三的中间单元格中,设置其宽度为66%,插入9.gif图像。 6、将光标置于9.gif图像后,插入表格五:5行1列,宽为95%,间距为1,背景色为绿色。

7、分别将光标置于表格五的第一个到第五个单元格中,设置高为25,背景色为白色。

分别链接此前各次作业。

8、将光标置于表格三右边的单元格中,设置其宽度为16%,插入10.gif图像。 9、将光标置于10.gif图像后另起一行,输入文本:友情链接。

10、插入表格六:1行1列、宽为90%,设置单元格高为1像素,背景色为红色,切换到源代码窗口,

将单元格中的空格符号“ ”删除,使其变为一像素分割条。然后在后面录入3-5个网站名称。

(三)网页底部

1、将光标置于表格三后,插入表格七:3行1列,宽为760像素、边框及边距均为0、背景色为绿色的表格,设置排列方式为居中对齐。

2、将光标置于表格第2行的单元格中,设置该单元格为水平居中对齐,然后输入作者单位、姓名(学号)、联系电话和电子邮箱,

并插入本人的电子邮件链接。例如:“文学院:李明(0701010101),联系电话:13977188888,电子信箱:liming@126.com”。文本的颜色自主选择。

(四)在标题栏中输入标题为“新世纪课程教学网站”。设置页属性:点击菜单【修改】→【页面属性】,

并选择背景图像11.gif,将上边距设为50像素。保存,按F12预览。

上机练习3:利用表格布局创建网页

从学习网站的【网页素材】栏目选择下载“水晶缘图片”或者“家乡印象图片”压缩包,下载到本地后解压,

把解压出来的图片复制到网站根目录的“images”文件夹。打开站点根目录下的05.html文件,按下面步骤进行制作:

1、单击【属性】面板的【页面属性】按钮,弹出【页面属性】对话框,单击【背景颜色】下拉按钮,

在弹出的颜色调板中选择粉红色(【家乡印象】不用选择背景色),在【页边距】区域的文本框中设置页边距为“0”。

2、将工具栏切换到【布局】工具栏,单击【布局】按钮。

3、将鼠标指针移动到文本窗口中,按住鼠标左键拖动鼠标指针,在文档窗口中绘制出布局表格。

4、选中布局表格,在【属性】面板中选中【固定】单选按钮,在【宽】和【高】的文本框中分别输入数值。

(其中:【家乡印象】设为1000×760,【水晶缘】设为800×650。)

5、单击【布局】工具栏中的“布局单元格”按钮,将鼠标指针移动到文档窗口中,按住鼠标左键拖动鼠标指针,

在布局表格中绘制出布局单元格。页面最后单元格输入输入作者单位、姓名(学号)、联系电话和电子邮箱,

例如:“文学院:李明(0701010101),联系电话:13977188888,电子信箱:liming@126.com”。文本居中,颜色自主选择。

6、参照“水晶缘图片”文件夹中的“水晶缘.mht”文件模板(在“家乡印象图片”文件夹中则是“家乡印象.mht”文件), 在布局表格中绘制布局单元格,将所有图像文件插入到布局单元格中。插入完成后,单击文档窗口上方的“退出”切换到标准模式。

7、在标题栏中输入标题(标题名称自定)。保存,按F12预览当前网页。

【第四章】 上机练习:

一、从学习网站的【网页素材】栏目下载“喜庆音乐”,解压后把音频文件拷贝到music文件夹,

在02.html文件的“新年快乐”贺卡添加背景音乐,音频文件可自由选择,并循环播放。

例如在页面代码前插入music文件夹中的newyear.mid文件:

二、从学习网站的【网页素材】栏目下载“透明背景flash”,解压后把文件拷贝到flash文件夹,

用Dreamweaver8打开index.html文件进行如下编辑:

1、把banner.gif替换为该单元格的背景图片,设置该单元格的宽和高为540×114,在该单元格插入透明背景的flash。

2、把“●知识点一、●知识点二、●知识点三、●知识点四、●知识点五、●知识点六”设置为flash按钮。

三、创建FLASH电子相册

从学习网站的【网页素材】栏目下载“校园风光”图片素材或者自找素材, 然后从【软件下载】栏目下载“Flash SlideShow Builder”电子相册软件制作FLASH动画相册。

生成SWF动画并插入到index.html中,替换9.gif图片。

作品要求:

1、标题:校园风光(或其它标题名称) 字幕:广西师范学院

制作者:作者单位:姓名(学号)。如:文学院:李明(07000001)

2、幻灯大小:400*300(保持宽高比),帧速:25fps;添加背景音乐,自动循环播放。

【第五章】 上机练习:

打开站点根目录下的02.html文件,制作CSS滤镜效果。

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读,免费范文网,提供经典小说教育文库网页制作上机练习题在线全文阅读。

网页制作上机练习题.doc 将本文的Word文档下载到电脑,方便复制、编辑、收藏和打印 下载失败或者文档不完整,请联系客服人员解决!
本文链接:https://www.77cn.com.cn/wenku/jiaoyu/965830.html(转载请注明文章来源)
Copyright © 2008-2022 免费范文网 版权所有
声明 :本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
客服QQ: 邮箱:tiandhx2@hotmail.com
苏ICP备16052595号-18
× 注册会员免费下载(下载后可以自由复制和排版)
注册会员下载
全站内容免费自由复制
注册会员下载
全站内容免费自由复制
注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信: QQ: