网页制作上机练习题

《网页制作上机练习题》由会员分享，可在线阅读，更多相关《网页制作上机练习题（9页珍藏版）》请在金锄头文库上搜索。

1、【第一章】 上机练习： 1 1、下载、下载 DreamweaverDreamweaver 8 8 的安装软件，练习的安装软件，练习 DreamweaverDreamweaver 8 8 的安装、启动、关闭的安装、启动、关闭 和卸载。和卸载。 ( (从从 ftp:/web210.28.58.241ftp:/web210.28.58.241 网站下载网站下载) ) 2 2、启动、启动 DreamweaverDreamweaver 8 8 进入其工作界面，分别指出各个组件及其功能。进入其工作界面，分别指出各个组件及其功能。 3 3、在本地计算机、在本地计算机 D D 盘建立一个文件夹，以本人姓名和学

2、号命名，如盘建立一个文件夹，以本人姓名和学号命名，如“李明李明 0701010101”0701010101” 。 然后创建一个站点，站点的名称以本人的姓名的拼音小写字母来命名，如“李 明”的站点名称为“liming”。 在站点根目录下新建 images、photo、music、flash、main 等 5 个文件夹， 在站点根目录下新建 index.html、01.html、02.html、03.html、04.html、05.html、06.html、abc.h tml 等 8 个页面文件。 【第二章】 上机练习 1: 一、打开本地站点根目录下的 03.html 文件，进行如下设置： 1、设

3、置文件头内容： 文件标题：可爱的校园； 插入关键字：学校简介；校园风光；校园文化；教学设施 插入 META：值author，内容你的姓名。 2、设置页面属性： （1）设置页面文本颜色为黄色、背景颜色为绿色； （2）设置标题 1 为 72 像素、红色； 3、插入文本 （1）编辑字体，添加黑体和隶书两种字体； （2）在文档编辑窗口输入“可爱的校园”，格式为标题 1，字体居中，字体为 隶书； （3）录入“学校简介”、“校园风光”、“校园文化”、“教学设施”文字， 格式为段落，分为 4 行，并进行项目列表。 （4）在“校园简介”下面另起一行，录入一段校园简介的文字，不少于 100 字， 首行前面 4

4、个空格； 4、插入图像 （1）从网上下载校园风光图片 3 张，存到网站根目录的 images 文件夹中； （2）在“校园风光”下面另起一行，插入刚下载的第一张图片，修改图片的属 性为 300200； （3）设置鼠标经过图像。把刚下载的第二、第三张图片分别设为“原始图像”、 “鼠标经过图像”，修改图片的属性为 300200； （4）插入一个图像占位符，大小为 300200，颜色为黄色。 5、在文本最后插入水平线。 6、在水平线下面另起一行写入作者姓名，如“作者：李明”。 7、在作者后面 10 个空格后插入日期。 上机练习 2: 一、从学习网站的【网页素材】下载“公园导航图”，在 04.html

5、文件中制作 电子地图，图片使用锚点链接，具有“返回导游图”功能。 二、申请免费空间并上传作业 1、从本网站的【学生空间】-【申请免费空间】，申请 1 个免费的网站空间， 并把网站的域名记下； 2、在【学生空间】栏目找到你的姓名，通过“操作”-“编辑”， 把你的网站域名填写到“作业地址”，同时补充完善个人信息（联系电话、电 子邮件）， 并及时修改你的编辑密码； 3、打开 index.html 做一个简单首页，链接你的作业一和作业二。 4、把 index.html、03.html、04.html 和图片上传到你的免费空间， 以后每次作业在首页 index.html 链接后一起上传到你的空间， 老师

6、将通过空间查看你的作业。 【第三章】 上机练习 1: 一、打开站点根目录下的 01.html 文件，创建一个 4 行3 列的黑色细线表格， 表格宽度 500 像素，单元格间距为 1。 二、打开站点根目录下的 01.html 文件，在练习一制作的细线表格中，合并第 三行的单元格，把单元格高设为 30 像素； 然后在该单元格（即第三行）插入一个线条颜色为红色、宽为 480 像素的一像 素分割条。 三、打开站点根目录下的 02.html 文件，用嵌套表格方式制作“新年快乐”贺 卡。 背景图片从学习网站的【网页素材】栏目的“网页背景”或自己从网上下载。 1、表格一：1 行1 列，宽度 500 像素，高

7、度 318 像素，边框为 0，单元格间 距为 0，单元格边距为 12 像素，背景图像自由选择。 2、表格二嵌套到表格一中：1 行1 列，宽度 100，高度 318 像素， 边框为 0，单元格间距为 0，单元格边距为 12 像素，背景图像自由选择。 3、表格三嵌套到表格二中：1 行1 列，宽度 100，高度 270 像素， 单元格间距和单元格边距都为 8 像素，边框为 10，边框颜色为红色。背景图像 自由选择。 4、将光标放置在表格三内，添加文字“恭贺新禧”，文字居中，字号 68px， 字体为隶书，颜色为紫色。 上机练习 2: 用表格构建课程教学网站首页 从学习网站的【网页素材】栏目下载“教学网

8、站图片”压缩包，下载到本地后 解压，把解压出来的图片复制到网站根目录的“images”文件夹。 打开站点根目录下的 index.html 文件，清空页面内容。按下面步骤进行制作： （一）网页顶部 1、创建表格一：1 行 2 列，宽为 760 像素，边框及边距均为 0，间距为 1，背 景颜色为绿色，居中对齐。 选定表格一的各个单元格，设置背景色为白色，水平为居中对齐。 2、将光标置于表格一左边单元格中，插入 logo.gif 图像。 3、将光标置于表格一右边单元格中，插入 banner.gif 图像。 4、将光标置于刚完成的表格之后，插入表格二：1 行 7 列，宽为 760 像素，边 框及边距均

9、为 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 图像后，插入表格

10、四：6 行 1 列，宽为 90%，间距为 1， 背景色为绿色。 4、将光标依次放在表格四第 1 个到第 6 个单元格中，设置单元格高为 25，水 平居中，背景色为白色。 在 6 个单元格中分别输入文字“知识点一、知识点二、知识点三、知 识点四、知识点五、知识点六”。 5、将光标置于表格三的中间单元格中，设置其宽度为 66%，插入 9.gif 图像。 6、将光标置于 9.gif 图像后，插入表格五：5 行 1 列，宽为 95%，间距为 1， 背景色为绿色。 7、分别将光标置于表格五的第一个到第五个单元格中，设置高为 25，背景色 为白色。 分别链接此前各次作业。 8、将光标置于表格三右边的单元格

11、中，设置其宽度为 16%，插入 10.gif 图像。 9、将光标置于 10.gif 图像后另起一行，输入文本：友情链接。 10、插入表格六：1 行 1 列、宽为 90%，设置单元格高为 1 像素，背景色为红色， 切换到源代码窗口， 将单元格中的空格符号“ ”删除，使其变为一像素分割条。然后在后面 录入 3-5 个网站名称。 （三）网页底部 1、将光标置于表格三后，插入表格七：3 行 1 列，宽为 760 像素、边框及边距 均为 0、背景色为绿色的表格，设置排列方式为居中对齐。 2、将光标置于表格第 2 行的单元格中，设置该单元格为水平居中对齐，然后输 入作者单位、姓名（学号）、联系电话和电子邮

12、箱， 并插入本人的电子邮件链接。例如：“文学院：李明（0701010101），联系电 话：13977188888，电子信箱：”。文本的颜色自主选择。 （四）在标题栏中输入标题为“新世纪课程教学网站”。设置页属性：点击菜 单【修改】【页面属性】， 并选择背景图像 11.gif，将上边距设为 50 像素。保存，按 F12 预览。 上机练习 3：利用表格布局创建网页 从学习网站的【网页素材】栏目选择下载“水晶缘图片”或者“家乡印象图片” 压缩包，下载到本地后解压， 把解压出来的图片复制到网站根目录的“images”文件夹。打开站点根目录下 的 05.html 文件，按下面步骤进行制作： 1、单击【属

13、性】面板的【页面属性】按钮，弹出【页面属性】对话框，单击 【背景颜色】下拉按钮， 在弹出的颜色调板中选择粉红色（【家乡印象】不用选择背景色），在【页边 距】区域的文本框中设置页边距为“0”。 2、将工具栏切换到【布局】工具栏，单击【布局】按钮。 3、将鼠标指针移动到文本窗口中，按住鼠标左键拖动鼠标指针，在文档窗口中 绘制出布局表格。 4、选中布局表格，在【属性】面板中选中【固定】单选按钮，在【宽】和【高】 的文本框中分别输入数值。 （其中：【家乡印象】设为 1000760，【水晶缘】设为 800650。） 5、单击【布局】工具栏中的“布局单元格”按钮，将鼠标指针移动到文档窗口 中，按住鼠标左键

14、拖动鼠标指针， 在布局表格中绘制出布局单元格。页面最后单元格输入输入作者单位、姓名 （学号）、联系电话和电子邮箱， 例如：“文学院：李明（0701010101），联系电话：13977188888，电子信箱： ”。文本居中，颜色自主选择。 6、参照“水晶缘图片”文件夹中的“水晶缘.mht”文件模板（在“家乡印象图 片”文件夹中则是“家乡印象.mht”文件）， 在布局表格中绘制布局单元格，将所有图像文件插入到布局单元格中。插入完 成后，单击文档窗口上方的“退出”切换到标准模式。 7、在标题栏中输入标题（标题名称自定）。保存，按 F12 预览当前网页。 【第四章】 上机练习: 一、从学习网站的【网页

15、素材】栏目下载“喜庆音乐”，解压后把音频文件拷 贝到 music 文件夹， 在 02.html 文件的“新年快乐”贺卡添加背景音乐，音频文件可自由选择，并 循环播放。 例如在页面代码前插入 music 文件夹中的 newyear.mid 文件： 二、从学习网站的【网页素材】栏目下载“透明背景 flash”，解压后把文件 拷贝到 flash 文件夹， 用 Dreamweaver8 打开 index.html 文件进行如下编辑： 1、把 banner.gif 替换为该单元格的背景图片，设置该单元格的宽和高为 540114，在该单元格插入透明背景的 flash。 2、把“知识点一、知识点二、知识点三

16、、知识点四、知识点五、 知识点六”设置为 flash 按钮。 三、创建 FLASH 电子相册 从学习网站的【网页素材】栏目下载“校园风光”图片素材或者自找素材， 然后从【软件下载】栏目下载“Flash SlideShow Builder”电子相册软件制作 FLASH 动画相册。 生成 SWF 动画并插入到 index.html 中，替换 9.gif 图片。 作品要求： 1、标题：校园风光(或其它标题名称) 字幕：广西师范学院 制作者：作者单位：姓名（学号）。如：文学院：李明（07000001） 2、幻灯大小：400*300（保持宽高比），帧速：25fps；添加背景音乐，自动循 环播放。 【第五章】 上机练习: 打开站点根目录下的 02.html 文件，制作 CSS 滤镜效果。 1、选中菜单“文本”“CSS 样式”“新建”，在弹出的【新建样式规则】 对话框中输入名称，点击“确定”。 2、在弹出的【保存样式表文件为】对话框中输入文件名，然后点击“保存”。 3、弹出