实验五 网页制作(2) 图片、文字、
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
格的编辑
一、实验目的
1.掌握利用表格进行网页布局的
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
。
2. 掌握层的应用方法。
3.掌握超级链接的使用方法。
4.掌握如何在网页中添加Flash等动态效果。
二、实验任务
1、制作网页world.html,样张如下:
在制作网页world.html的过程中,我们将要学习如何用表格布局网页和如何向网页中添加flash元素。
首先这个网页共由5个表格组成:
table1用来展示网站的LOGO图片。
table2是一个2行的表格,第一行有6列,分别添加6个Flash按钮,这样可以使他们的距离显得很均匀,第2行添加本网页的标题和相关的信息。
table3中间又嵌套了一个表格table4,table4比table3要小一点,这样做的目的是为了使文字不至于顶着table3的边缘显示,可以更加美观。
table4是一个3行的表格,第一行分为两列,分别放置Flash图片和文字,这样可以使网页显得很工整。第二行用来展示FLASH视频。第三行用来放置文字。
Table5是一个1行1列的表格,放置网站的版权信息。
实现本网页的操作如下:
(1)插入1行1列的table1,宽:1004px,高:407px,表格居中显示,插入背景图:banner.jpg(说明:px——像素)
(2)插入2行6列的table1, 宽:1004px,高:218px,表格居中显示,插入背景图:web-a1.jpg,在第一行的六个单元格中分别添加Flash按钮,并设置按钮的属性:样式:Glass-Silver,字体:华文彩云,目标:_self,按钮文字分别设为“首页”,“学习生活”,“关于考研”,“青春足迹”,“多彩世界”,“勤工俭学”,链接也分别设置为相应的网页。
在第二行中添加 “如何在三个月内学会看懂美国电视节目” 并设为标题1格式,再添加时间“2010-03-10”和图片:“line.jpg”,设置第二行为水平为居中显示,垂直为底部显示。
(3)插入1行1列的table3,宽度:1004px。表格居中显示,插入背景图:web-b1.jpg,
(4)在table3中插入3行1列表格table4。宽度:966px,表格居中显示。
将第一行拆分成两列,在第一行第一列插入Flash:“27.swf”,设置属性,高:180px,宽:230px,对齐:“左对齐” ,启动“自动播放”和“循环”复选框。
在第一行第二列中输入素材。(见后面详细操作部分)。
在第二行中插入Flash Vedio:english.flv。宽度:400px,高度:300px,启动“自动播放”和“自动重新播放”复选框
在第三行中输入素材。(见后面详细操作部分)。
(5)插入1行1列的table5,宽度:1004px,插入背景图片:web-c1.JPG,再和制作work.html中一样添加版权信息。
(6)网页背景颜色:#537B35。左、上边距:0、0。网页标题:心灵家园-青春足迹。
网页
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
中用到的元素:表格,页面属性,Flash,Flash按钮,Flash视频,图片。
2、制作网页world.html,样张如下:
在网页index.html的中,我们将要学习如何用层来布局网页,和如何在网页中利用层来制作动画效果。在index.html中表格和层的布局和用途如下图所示。其中最大的表格是一个1行1列的表格,用来放置主页图片,然后在上面放了三个层,分别放一首小诗,友情链接和蝴蝶图片。
实现本网页的操作如下:
(1)打开网页index.html。
(2)在网页右下角绘制layer1,左:650px,上:170px,宽:280px,高:230px。然后将素材复制到层中间,(见下面具体操作部分)。设置字的属性:大小:特大,颜色:#819D52,字体:划文行揩。
(3)在网页下方绘制layer2,左: 320,上:580,宽:500,高:25。在层中输入:“友情链接: 网易|新浪|重庆工商大学|中国同学录|大渝网”。设置字的大小:12px。
(4)在网页左上角绘制layer3,插入图片hudie1.gif.,为layer3制作动画效果。
网页设计中用到的元素:层,时间轴
3、为网页添加链接。
(1)为index.jpg和各网页的“返回首页”图片添加热点链接。
(2)为index.jpg创建邮件链接。
(3)为index.jpg创建站外链接。
(4)打开work.html,在标题下添加导航条:“首页|学习生活|关于考研|青春足迹|多彩世界|勤工俭学”,并依次链接。
(5)为work.html中的“勤工俭学”创建空链接。
(6)为world.html创建锚点链接。
(7)为study.html创建下载链接。
三、实验步骤
启动Dreamweaver 8,继续编辑网站“心灵家园”中的网页。
任务一:使用表格,层布局并编辑网页,
1、制作“心灵家园”网站的网页world.html——使用表格布局网页
(1)在web文件夹下新建网页world.html,插入一个1行1列的table1
1)表格宽度:1004px 高:407px。在浏览器窗口中“居中”。
2)插入背景图片:banner.jpg
(2)插入一个2行6列的table2
1)表格宽度:1004px 高:218px,。在浏览器窗口中“居中”,表格的背景图为 web-a1.jpg。
2)把光标放在第一个单元格,点击菜单“插入”——〉“媒体”——〉“Flash按钮”。在弹出的对话框中按照下图设置按钮的属性。然后按“确定”即可插入一个Flash按钮。
3)在属性面板上设置Flash按钮的属性,高:40 px,宽:120 px,背景色:#CCC158。(或者用吸管吸取按钮附近的颜色可以整体颜色更协调)
4)按照上面的办法依次插入剩下的五个按钮:“学习生活”,“关于考研”,“青春足迹”,“多彩世界”,“勤工俭学”。
5)将第二行全部合并,输入:“如何在三个月内学会看懂美国电视节目”,回车再输入:“2010-03-10”,再回车插入一个图片:“line.jpg”。选中标题“如何在三个月内学会看懂美国电视节目”设置属性:格式 “标题1”。选中第二行,设置水平为居中显示,垂直为底部显示。
(3)插入一个1行1列的table3
1)表格宽度:1004px。在浏览器窗口中“居中”。表格的背景图为 web-b1.jpg。
2)在表格中嵌套插入一个3行1列的表格table4,宽度为966px,设置该表格为“居中对齐”。将第一行拆分成两列,将光标放在第一行第一列,然后点击菜单“插入”——〉“媒体”——〉“Flash”。在弹出的对话框选中27.swf后点击“确定”。然后设置属性,高:180px,宽:230px,对齐:“左对齐” ,启动“自动播放”和“循环”复选框。
3)在第一行第二列中输入下面的素材。
“很多人学了很多年的英语,参加了很多的
培训
焊锡培训资料ppt免费下载焊接培训教程 ppt 下载特设培训下载班长管理培训下载培训时间表下载
班,可还是学了忘,忘了再学,最后还是丢了个一干二净,白花了那么多的钱和精力.为什么会是这样的结局呢?其实道理大家都明白.语言这个东西,你不用就会退化.平时我们在国内都不讲,不听英语,而在课堂上学的英语材料又离我们的生活太远,所以对大多数人来说,把课堂上学的英语都还给老师是再正常不过的事情了.
为了给自己创造一个学英语的语境,有钱人的小孩可以选择出国或所谓的全英语贵族学校.但对于绝大多数的普通百姓来说,这是一条无法承受的道路.如果是在从前,我们也许只好认命了.但是现在是互联网的时代,英语语境也不再是有钱人的专利了.在网上可以很方便地观看到美国的电视台的节目,所以即使在家里,我们普通百姓也可以有和在美国一样的英语环境.
由于平时学校里学的英语都是超慢的语速,绝大部分的人在一开始都很不习惯听美国电视台里的那种正常的语速.由于这道门槛,很多人都在一开始就放弃了看懂英语电视的念头.这其实是非常可惜的.因为只要你一旦跨过了这道门槛,看英语电视电影就会成为你生活中的一部分,你就再也不用花钱和时间去参加各种英语学习班了.
为了帮助大家顺利地跨过看懂英语电视节目这道门槛,我会从MSNBC(由微软公司和美国国家广播公司合办)的网站上选一些轻松而且贴近生活的节目片段,将其中的播音用文字写出来,并附上中文翻译.请大家按照下面的三大步骤练习,保证绝大多数的人都可以在三个月内初步看懂MSNBC节目. 欢迎大家加入晴思小雨的听力训练营,一起学习,一起进步。”
4)将光标放在第二行,然后点击菜单“插入”——〉“媒体”——〉“Flash Vedio”。按照下图设置属性,然后按“确定”即可在插入一个Flash视频文件。
5)在第三行中输入下面的素材。
● 步骤一:
打开Google翻译网.
● 步骤二:
在本考友群的交流区里打开一个标有[MSNBC视频]的话题,将话题中的英文说明完全背下来.如果遇有不懂意思或发音的单词或词汇,通过上面的Google翻译网来查询其意思和发音.(在Google翻译网中点击黑色的小喇叭图标就可听到对该单词的发音.)
● 步骤三:
在将英文文字说明都背熟了以后, 点击话题中的视频图标,打开MSNBC视频,反复放,直到大部分内容都听懂为至.
我会在每周末挑选二到三个比较有趣的MSNBC视频,将其文字写出来并附上中文翻译.如果大家能够在每周背熟并听懂二到三个MSNBC视频(每个MSNBC视频的持续时间为大约二分钟左右),那么三个月之后就记熟了二十五个左右的视频.有了这二十多个视频在肚子里垫底,再看MSNBC视频就不会觉得害怕了.继续坚持下去,看得懂的东西就会越来越多,兴趣也会越来越大.这样一来,看英语电视也就不知不觉地成了你的生活中的一部分了.
(4)插入一个1行1列的table5
1)宽度:1004px,高度:104px,插入背景图片:web-c1.jpg
2)插入一个横线
3)在横线后面回车,输入“建议使用IE5.0以上版本,1024*768以上的分辨率浏览本站 版权归个人所有”
4)将光标至于“版权归个人所有”前面,点击菜单“插入”——〉“HTML”——〉“特殊字符”——〉“换行符”。选中这两行,设置为“居中”显示。
(5)设置页属性
网页背景颜色:#537B35。左、上边距:0、0。网页标题:心灵家园——多彩世界。
(6)保存并预览网页。
2、制作主页——使用层布局网页
一般使用“表格”设计复杂结构。对于高级页面布局,请使用层。层是存储内容的容器,可在层中添加图像和文本。层可放置在文档的任何位置,就如同Word中的文本框,可以为网页设计者提供对元素像素精确放置的良好控制。