數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2015年5月15日 星期五

圖文互搭基礎技巧:插入背景圖



圖文互搭的寫作基礎技巧:插入背景圖

一、排版寫作;二、分層文本;三、圖文互搭。這三個數位文本面向,是撐起數位文本的媒材布局所常見的手 法,即技巧。
插入背影圖後,可以再DIV或Table裡面,在圖的上面,繼續 編輯/寫作。

技巧,不是單純的工具性的技巧,而是對文本結構,對意義呈現模式的一種寫作的安排。
因此,技巧是「方法」,也是讓意義「客觀化」展現自己的一種「中介」手段;這是套用我對黑格爾的解理。



DIV插入一張背影圖(←click) // 復原
可以繼續在 DIV裡面編輯/寫作(←click) // 復原


我們可以在背景圖的上面,
繼續我們的編輯/寫作的動作。
這使得文字可以互搭於圖片,
形成強烈的圖文互文性的意義呈現。
背景圖的 CSS 語法,請放在<body>之後:
<style>
.backimag0515 {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 520px 390px;
}
</style>
***
選項語法:
background-position: left 5px top 3px;

注意:left/center/right; top/center/bottom; 三選一。紅字為距離,可省略。
***




DIV插入二張背景圖(←click) // 第一張 // 第二張 //
復原


多張背景圖的 CSS 語法,請放在<body>之後:
<style>
.backimag051502 {
background-image: url(第一張照片網址), url(第二張照片網址);
background-repeat: no-repeat, no-repeat;
background-size: 250px 188px, 250px 188px;
background-position: left top, right bottom;
}
</style>



教學影音:




插入背景圖的 更多寫作技能:

一、背景圖的妙用
二、DIV + CSS 隨心所欲搞定網路排版寫作(二): 放入背景圖
三、5秒搞定動態圖檔 Gif 檔! 【←Gif檔直接拿來做動態背景圖】
四、用背景圖拼貼圖像 plus 文字安排的大、中、小
五、把影音貼到照片上面去



沒有留言:

張貼留言