第一篇:空間建設
四、空間的建設和美化
有關于空間的基礎操作稍后有服務中心的講師和大家介紹。接下來我就和大家一起交流一下空間美化和運用的幾個常見的軟件。這些軟件在網絡上應接不暇,我這兒選擇的是比較簡單易于操作的幾個,將來大家熟悉了以后還可以下載更加專業的軟件來協助我們的空間建設。
(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.tmdps.cn/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.tmdps.cn/UploadFiles/BlogFile/8/270623/p1.jpg“)no-repeat;}
自己PS一張1005*150像素大小的圖片并傳到網上,記住圖片的URL,替換代碼中的方法二:
整個頂部設背景
.banner {filter:alpha(opacity=0);}
.pageBody{background:url(”http://www.tmdps.cn/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.tmdps.cn/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.tmdps.cn/shubiao/bianxing/36.ani');} A {CURSOR:hand}
其中:'http://www.tmdps.cn/shubiao/bianxing/36.ani'為鼠標指針形狀的URL,可到該網站上去找自己喜歡的鼠標形狀,語句:A {CURSOR:hand},將超鏈接的指針形狀設置回手形。
插入flash掛件的代碼