第一篇:空间建设
四、空间的建设和美化
有关于空间的基础操作稍后有服务中心的讲师和大家介绍。接下来我就和大家一起交流一下空间美化和运用的几个常见的软件。这些软件在网络上应接不暇,我这儿选择的是比较简单易于操作的几个,将来大家熟悉了以后还可以下载更加专业的软件来协助我们的空间建设。
(1)、视频转换和上传:格式工厂、QQ影音
利用“格式工厂”将视频文件换成空间要求的“FLV”格式视频文件以及对大的视频文件进行剪辑处理的方法介绍。
第一步:下载格式工厂软件
A:将视频文件转换成“FLV”格式文件,将所下载软件安装好之后,双击打开,在左侧“视频”栏目中选择“所有转到FLV”的模式,在“添加文件”中进行设置即可。点击“确定”,在“输出目录”中选择自己转换模式后的视频存放位置,然后进行上传。上传时打开我的管理空间。找到右侧栏目“文章视频管理”,找到自己所要发表的板块,例如参赛课例,点击“发表”,输入标题,标签、验证码即可。
B:对比较大的视频文件进行剪辑处理等方法介绍。利用QQ影音。截取视频方法(如下图),用QQ影音,还可合成。红线方框内分别是所需截取视频文件的开始位置和结束位置按钮,红线标记的是开始时间和结束时间。点击按钮分别进行开始、结束时间的定位。如果需要将视频分段裁剪,就需要记好每一段的开始时间和结束时间进行分段裁剪。
(2)课件转换和上传:PPT转换为FLASH
第一步:下载PPT转换器(此处介绍的是转换2003版本的PPT课件)
第二步:使用方法
1、首先进行转换PPT课件大小设置,如下图:
2、点击选项弹出如下操作页面:将长设置成800像素或640像素、宽设置成600像素或480像素(注意:数值越大,在网页页面显示越大,但正常的网页打开时要达到完整显示时最好不超过800*600)
3、点击导航设置转换后的PPT课件在网页中的播放形式。这个可根据自己需要进行设置,一般设置成“不可见的导航控制”和“不启动自动播放”。
4、设置输出转换后的PPT存放地点和输出文件格式。点击输出,选择在自己电脑中的存放位置。注意输出文件格式不要设置成单独分离格式。
5、选择课件
点击文件对话框,在下面点击增加,从自己的资源中找出自己需要转换的PPT课件,双击所选课件。(可以同时转换多个课件)
6、文件转换:点击软件右侧按钮,完成转换。
(3)、图片剪辑、美化软件:美图秀秀
在空间建设过程中我们要利用各种软件对空间背景、空间动画、空间导航栏等进行美化处理。因此需要利用图形图像软件进行图片修改、合成等等操作,接下来,本栏目将对利用“美图秀秀”软件处理图片进行讲解。
第一步:下载“美图秀秀”软件
第二步:将文件下载安装打开,在打开的软件页面中的“新手帮助”中对“美图秀秀”软件的使用方法有比较详细的介绍,我这里主要是分析在空间建设中所需要运用到的软件部分功能。
1、抠图换背景
点击中间“打开一张图片”选取需要的图片,然后点击“抠图笔”根据自己的需要选择抠图笔的模式,一般使用“自动抠图”完成后点击“完成抠图”,显示出的页面右上角会显示出各种类型的背景选择,(也可以在右下角的“更换背景”中选择自己已有的背景图片进行合成)然后选择自己需要的背景替换进去。
2、图片涂鸦与添加文字
如想对图片进行标记说明,可以使用“涂鸦笔”功能以及“文字”功能进行加工处理:选择画笔颜色、大小对所需标记的位置进行涂鸦。
点击软件功能栏的“文字”选择自己需要的文字模式进行文字的添加。
3、利用“消除笔”功能去除图片中自己不想体现部分的操作方法。
点击“消除笔”选择画笔大小,(画笔越小清除效果越好,但相应的占用时间越多)在自己需要清除的位置反复图画,直到处理处自己满意的效果。
4、充分利用软件的“裁剪”功能。
比如在利用“阿里妈妈”在线制作软件制作导航栏或Flash动画时,想要使用自己的背景图片,但是“阿里妈妈”要求的是小于30K的图片,将图片尺寸缩小像素放进去,图片就会模糊,这时候我们就可以利用软件的“裁剪”功能将所需图片一分为几,分批次上传,然后再在“阿里妈妈”中拼接起来,达到自己想要的效果。
(4)、FLASH标题栏、导航等制作方法介绍
对于我们大多数老师而言,没有学习过FLASH制作软件,因而制作专业的FLASH导航或动画难度挺大的,因此,今天我将向大家介绍一款比较简单的、容易操作的FLASH导航制作工具“阿里妈妈”广告牌生成器。通过这个在线制作软件同样能实现简单的FLASH标题栏、导航的制作。
第一步:登陆“阿里妈妈”广告牌生成器网站,进行注册、使用。
网站地址:http://banner.alimama.com/如果有淘宝会员账号就可以直接点击登陆输入用户名和密码进入。
第二步:导航栏、横幅等制作方法介绍。
利用“阿里妈妈”制作FLASH动画可以通过两种方法实现。一种是利用网站已有模块进行修改制作。也可以选择自己设计制作。我们初学者一般利用已有模块进行修改制作。
1、点击“通栏/店招”“图文”进入到网站模版市场。
2、进入模版市场后根据自己空间的设计风格、要求等有选择的在模版分类中进行选择。如下图:在下图中“广告牌类目”中根据“行业类别”“主题”选择自己喜爱的一个横幅进行修改制作。
3、选好自己满意的横幅之后点击“开始制作”按钮。如下图,我们就可以根据这个已有横幅进行修改制作。
4、点击“开始制作”打开如下图:(切记养成每完成一步进行保存的习惯)到这一步就进入了修改制作阶段,接下来我以标题栏为例和大家共同交流如何制作标题栏。——现场演示制作一个标题栏。
4-1:将选择好的模块中的自己不需要的图层进行有选择的删除。
4-2:删除不用的图层后将模块调整为适合自己空间尺寸所需大小。(个人空间中横幅建议尺寸:宽999、高170--210;中间导航栏等建议尺寸:宽480、高可以自由设定。)点击“设置”在红色标记框中输入宽度、高度等尺寸,确定模块的大小。并进一步对不适合自己设计要求的图层进行删除。
4-3:设计模块内容:1。根据自己的喜好和风格进行选择和上传。(上传图片到“我的素材”介绍)在“链接”栏中输入自己想要链接的网页地址。加入图片图层效果以及添加好链接地址。(注意在复制地址时一定要检查是否出现http://重复,如果重复在点击时会出现地址错误而导致打不开链接),点击“功能界面”中的“图片”按钮,有“标签”、“按钮”、“背景”、“我的素材”四个模块,每个模块下又有许多分类,设计时可以根据自己的需要进行选择,增强模块的动画效果,美化效果等。如果想要设计一样的多个图层,可以点击“复制”、“粘贴”进行,点击“功能界面”中的“文字”可以实现对模块加入动态文字或者静态文字功能。
(5)、上传图片到“阿里妈妈”素材库方法
1:点击“我的设计”打开。点击红色标记框中的“素材”按钮。按要求选择图片上传。(图片大小修改在“美图秀秀”软件介绍中有详细讲解)
将制作好的FLASH导航添加到个人学习空间。点击页面右上角“预览保存”打开,点击“输出获取设计”打开,选择FLASH动画URL选项地址复制。将复制好的地址添加到空间之中(我的管理空间——空间装扮——自定义模块——新建flash模块)
(6)、网页音乐播放器软件:音乐在线 播放器制作方法
利用“音乐在线”软件在线制作自己个性化的音乐播放器方法介绍。
第一步登陆“音乐在线”网站,注册网站地址:http://www.xiexiebang.com/mp3.swf然后添加到空间之中(我的管理空间——空间装扮——自定义模块——新建flash模块)
(7)、56电子相册制作方法介绍
利用“56相册视频”在线制作自己的图片播放器。
第一步:登陆“56相册视频”网站,注册。如下图
网站地址:http://photo.56.com/mv/make/
第二步:制作个性化的图片视频播放器
1、注册登陆后打开,首先点击“添加图片”选择“上传本地图片”中的上传多张图片。从自己的电脑中选择自己需要制作的图片上传到网站中,上传的图片可以在“从我的图库选”中找到。
2、播放模式选择。可以根据自己的图片数量、喜爱的播放效果进行选择。
图片添加完成、并选择好播放模式后可以在页面中的“图片信息”中对图片的播放顺序进行拖拽换位,以及删除图片等。
3、相册视频播放背景选择:点击“播放背景”按钮,可以对电子相册视频的播放背景进行选择。(选择后在左侧的预览框中会显示出选择特效。)
4、相册视频播放特效:点击“超级特效”按钮,可以对播放器的播放相册视频时出现的特殊效果进行选择。增强播放的视觉效果。
5、添加音乐效果:点击“添加音乐”可以选择将音乐添加到图片视频播放器之中。(建议不用,因为在空间中可以制作专门的音乐播放器。)
6、预览与保存:点击“预览效果”,可以看到自己制作完成好的相册视频,根据观看效果进行相册视频的修改完善。完成后点击“保存”按钮,在“相册视频名称”后的方框中输入自己相册的名称。
以及同时保存好自己上传的原图到图库中,方便自己下次引用。
第三步,将制作好的“电子相册视频”添加到空间中:点击自己的注册名打开“个人中心”,在左侧栏目中选择“我的相册”点击打开,选择“我的相册视频”点击打开。找到自己需要添加到空间中的相册视频。鼠标移动到该相册视频时在下面会出现橙色的文字信息,选择“转帖代码”点击打开如下图,选择“FLASH地址”复制将复制好的地址添加到空间之中(我的管理空间——空间装扮——自定义模块——新建flash模块)
心的距离不用时间和距离衡量,不管相距多远我们都在同一星空下仰望同一片蓝天!云空间在所有的音乐老师之间架起一座桥梁,让世界没有了距离,我们畅所欲言,我们悉心交流,我们共同进步!让我们一起在勤奋中求发展,成为学科空间的建设者、传播者和受益者,做教育事业的有心人。
第二篇:大学城空间建设代码
背景音乐设置
EMBED style=“FILTER: invert()”src=http://117.135.129.181/wap/856571.mp3 width=1 height=1 type=audio/x-ms-wma ShowStatusBar=“1” loop=“true” >
其中:http://117.135.129.181/wap/856571.mp3歌曲网址,width和height都设为0就不显示播放器了
loop=“true”表示循环播放,type=audio/mpeg表示自动播放
固定大背景设置 背景图片不变,可以使用以下代码:
方法一:可以重复
方法二:不重复
滚动背景代码:随着你拉动滚动条而上下滚动,适合小图片,什么闪烁的星星之类的!图片很小即可,它会自动平铺!
顶部背景设置
方法一:
.banner {background:url(”http://www.xiexiebang.com/UploadFiles/BlogFile/8/270623/p1.jpg“)no-repeat;}
自己PS一张1005*150像素大小的图片并传到网上,记住图片的URL,替换代码中的方法二:
整个顶部设背景
.banner {filter:alpha(opacity=0);}
.pageBody{background:url(”http://www.xiexiebang.com/uploadImage/photo/a0/***TSy4.jpg“)no-repeat scroll 0px 0 transparent;}
.pageMeta img{display:none;}
上图中背景的宽度为1005像素,高度300像素。
解释:
.banner {filter:alpha(opacity=0);}不显示大学城本身提供的banner;.pageBody{background:url(”背景图片地址“)no-repeat scroll 0px 0 transparent;} 设置顶上的背景
.pageMeta img{display:none;}不显示左上角大学城图标
所有模块背景统一换一样的(包括左右、头像、留言本、最新动态等所有模块)
pe=text/css>
.i_space_r,#left,.link,#five_header,.space_lr,.i_space_r.one {background:url(http://www.xiexiebang.com/uploadImage/photo/a0/20111028203328juQg.png);}
头像背景 块(添加右上角矩形框的背景)
左侧右侧背景模块图片或设为透明 设置
有背景的
透明的
.i_space_r,#left {background:url(”“);}
其中:”/UploadFiles/BlogFile/6/211712/beijing2.jpg“为背景图片的URL
如果希望这2块中没背景,也就是透明的,可设:background:url(”“);
留言板背景 模块独设置
#LeaveWordLbl {background-image:url(背景图片的地址);}
底部版权背景 模块边框设置
#bottom { border: 0px;}
#bottom {background:url(/UploadFiles/BlogFile/22/711608/4.jpg);}
以上代码是设置底部版权声明部分矩形框的边框线是否显示及背景。如果希望设置边框线,则将0px设置为1px或其他。
左侧导航栏目背景颜色设置
#left {BACKGROUND-COLOR: #c4fcb0;}
左侧栏目中的图片设置
#divMenu_85605
{background-image:url(/UploadFiles/BlogFile/8/287426/c1.jpg);background-repeat:no-repeat;padding-bottom:70px;background-position:bottomcenter;margin-bottom:10px;} #divMenu_28806 {background-image:url(/UploadFiles/BlogFile/8/287426/c2.jpg);background-repeat:no-repeat;padding-bottom:100px;background-position:bottomcenter;margin-bottom:15px;}
#divMenu_308713{background-image:url(/UploadFiles/BlogFile/8/287426/c3.jpg);background-repeat:no-repeat;padding-bottom:120px;background-position:bottomcenter;margin-bottom:20px;} #divMenu_66460 {background-image:url(/UploadFiles/BlogFile/8/287426/c4.jpg);background-repeat:no-repeat;padding-bottom:120px;background-position:bottomcenter;margin-bottom:15px;} #divMenu_39820 {background-image:url(/UploadFiles/BlogFile/8/287426/c5.jpg);background-repeat:no-repeat;padding-bottom:140px;background-position:bottomcenter;margin-bottom:15px;} #divMenu_39623 {background-image:url(/UploadFiles/BlogFile/8/293276/c6.jpg);background-repeat:no-repeat;padding-bottom140px;background-position:bottom center;margin-bottom:15px;} #divMenu_29854 {background-image:url(/UploadFiles/BlogFile/8/293276/c7.jpg);background-repeat:no-repeat;padding-bottom:140px;background-position:bottom center;margin-bottom:15px;}
第一步:有多少个栏目PS多少张图片,建议图片大小为140*80像素。宽度不能超过170像素,高度任意,建议图片做到一样大小,这样更好看。
第二步:分析你自己大学城的代码,右击自己的空间然后选择“查看源文件”,在源文件中用Ctrl+F查找左侧栏目的名称,如“网页设计客户端技术(”这是我的拉,你查你自己的哟),记录下来那个图片的id,如我的是“85605”,如此方法,将你的左侧栏目的所有id记录下来。
第三步:复制我上面代码的并对它进行修改,举例如下
#divMenu_85605{background-image:url(/UploadFiles/BlogFile/8/287426/c1.jpg);background-repeat:no-repeat;padding-bottom:70px;background-position:bottom center;margin-bottom:10px;}
红色字体部分就是你查到的你的那个栏目的id(注意,你设置的该栏目的图片是在该栏目的顶部显示的);绿色字体部分就是你上传到空间的图片的链接;蓝色字体需要根据你的图片大小去调整效果,padding-bottom为图片距离顶边的距离,margin-bottom为各栏目之间相隔的距离,这2个参数可以通过调整他们的大小测试一下他们的作用。
左边一栏(文字)目标题的字体颜色、字体和字号
.link {color:blue;font-size:14px;”FONT-SIZE: 8pt“>楷体;}
右边一栏(文字)小栏目标题的字体、字号、文字颜色
.i_space_lr.i_title_d {color:blue;font-size:14px;” FONT-SIZE: 8pt;“>楷体_GB2312;}
以上代码可以改变右边一栏“最近登录的好友”、“我发起的学习俱乐部”、“我加入的俱乐部”,3个子栏目标题的字体颜色、字体和字号。
中间一栏(文字)小栏目标题的字体、字号、文字颜色
.title_d {color:blue;font-size:14px;”FONT-SIZE: 8pt“>楷体_GB2312;}
以上代码可以改变中间一栏“我的空间动态”、“简介”、“留言板”、“评论”,4个子栏目标题的字体颜色、字体和字号。
“世界大学城”图标不显示
.pageMeta {filter:alpha(opacity=0);}.welcome {filter:alpha(opacity=100);}
这个图标在左上角,如果设置了背景(不是白色)或背景图片,则这个图片有点碍眼。以下代码可以不显示这个图片,但鼠标指向它的时候,仍会变成手,单击它可以链接到“世界大学城”的首页。
换行代码:
文字链接代码:
改变鼠标指针 形状的代码
BODY {CURSOR:url('http://www.xiexiebang.com/shubiao/bianxing/36.ani');} A {CURSOR:hand}
其中:'http://www.xiexiebang.com/shubiao/bianxing/36.ani'为鼠标指针形状的URL,可到该网站上去找自己喜欢的鼠标形状,语句:A {CURSOR:hand},将超链接的指针形状设置回手形。
插入flash挂件的代码