統雄社群-相關主題
Picture Overview,圖片格式概論
Graphic,美工繪圖
Image,影像
Icon,圖示
Favicon,網址標誌
Picture Mgt,圖片管理
Picture Taking,圖片製作
Positions,圖片位置
Background,背景圖
Layer,圖層
Image Map,影像地圖
Cover,封面設計
Vector Graphic,向量圖
Animated Graphic,動畫
數位出版設計:意涵/樣式篇Web Design: Blocks - Epistemological/Digital Aesthetics - Formation Methodology

數位出版設計:意涵/樣式篇網站/網頁設計:圖文框實作-知識美學/數位美學建構方法

Blocks include pictures, tables and other objects such as shape and border, division, inline frames, embedded maps, photo gallery... etc.


Picture

圖片格式概論 An Overview

Technology Basics (A Chinese version for supplementary reading)

與圖片有關的中英文名詞相當混淆,統雄老師的文創系列用「圖片 Picture」涵蓋「美工繪圖 Graphic」與「影像照片 Imaging」2種類型。「美工繪圖 Graphic」包括靜態的「美工圖 Graphic Art」與動態的「動畫 Animated Graphic」;「影像照片 Imaging」包括靜態的「攝影 Photo」與動態的「視訊 Video」。

圖片的檔案格式,在資訊技術上又分為點矩陣、和向量圖2類,常用的檔案格式如下。

 
File names
Method
Embedded tool
Bitmap Picture
bmp, gif, jpg
Painting
Picture
Vector Graphic
png, svg, wmf, mix
Outlining
Drawing (FP only)

Bitmap picture could be graphic or image. Drawing tools are based on XML which is supported by FP only.

美工繪圖 Graphic

美工繪圖 Graphic 是指人為使用各種媒體工具所繪製的圖片,通常強調線條感。

We have some ambiguous terms here. Generally, graphic refers to man-made, artificial art work. It emphasizes the outline of the picture and is saved in the file such as .gif.

影像照片 Image

影像照片 Image 是指使用各種攝影工具所捕捉實際存在物體形象的圖片,通常強調色彩感。

Again, generally, image refers to the real record of natural sight. It emphasizes the color of the picture and is saved in the file such as .jpg.

圖片掃瞄之解析度設定

圖片掃瞄如果日後要提供印表機印出,其解析度設定必須先在掃瞄器端設定為 200 dpi。

圖片掃瞄如果預試在螢幕、網路輸出,其解析度為72 dpi,日後輸出為印刷品,將有問題。


美工繪圖設計與創作 Graphic Drawing

識別系統與LOGO標誌設計 Identity System and Logo Design and Practice

圖示設計數位美工手繪設計

 


數位相片設計與創作 Picture Taking

攝影設計 Digital Photo Design


網頁圖片處理

 

圖片匯入 File-Import

下載各種檔案格式合法的圖片。下載 5 張以上圖片,作為以下網頁圖片處理的練習。

如果已經有同步完成的個人化圖片,則可以直接使用個人化圖片。

It is a better method to include your pictures or other files into your web.

Exercise: Down load and import pictures from tx.liberal.ntu.edu.tw/MediaFiles

圖片資料夾管理 Picture Folder Management

所有圖片應集中在單一資料夾中,以利管理。

After editing your pictures, save it to a specific folder such as 'image'. It will be easier for common uses and further management.

圖示或縮圖放大

有時會把圖片的縮圖作為圖示,可以使用目標框架為另開視窗的方法,展示原圖、甚至放大。

點選以下圖示以觀察其應用,同時注意「跳出註解」效果

TxTip Tip: Show the original or another size of a pic.

Click the minimized icon and choose _blank. It will result the original size in another window.

Click to enlarge

alt and title 圖片的說明與跳出註解

alt="當圖片無法顯示時,圖片的說明。"

title="tooltip text,對定位文字或圖片的說明與跳出註解"。

圖片工具列 View-Toolbars-Pictures

精細的圖片製作,應使用專業影像處理軟體。

圖片工具列,常用的為剪裁、定位、重新取樣。

另在「影像地圖」單元,會教授區域範圍與連結。

The toolbar will pop-up automatically when you click a graphic or image.

It is convenient to decide the position of graphics by FrontPage.

However, it is better to process the graphics by another professional  software prior to include your graphics into the web. It is also good for your web's efficiency and keep the originals of  your graphics.

加入個人化主圖、頂圖、橫幅方法

請使用教材檔案練習。


Advanced Settings of  Positions圖文框定位進階 Advanced Settings of Positions

圖文框定位有4種定位,對單一圖片差異不大,但對重疊圖層影響深遠。

Static: 靜態位置

An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) .

預設狀況,即跟著前後物件物件上下移動,除了要作圖層,不設亦可。

Absolute: 絕對位置

An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties.

對「外包的區域元素」其邊界的絕對座標位置,也就是在頁面上,始終不動,使用的座標是左上右下。也因此,只要在外包元素內,放在程式任何一段均可。

使用圖層工具拉圖層時,預設均為絕對位置。但是,使用絕對位置,一定會和不在圖層內的物件產生重疊。對初學者而言,除非是作背景,否則非常困擾。

Relative: 相對位置

An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.

對「鄰近的區域元素」至其邊界的距離,所以在程式中不能隨便移動。

相對位置在頁面上比較穩定,不怕前後文修改,是重疊圖層較佳的選擇,只是要在拉出圖層後,先改為相對位置、再重調整,手續較多,請參見進階說明

Fixed DesignFixed: 固定位置

An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 and after (strict mode) .

對瀏覽器而言的固定位置。使用在頁面捲動時,仍有必要持續顯示提示者。通常為小範圍,避免影響其他主題。譬如本網站的分類目錄:

Example: Table of Contents

語法是:

<div style="position:fixed;"> 


背景圖片 Background Picture

背景圖片 Background Picture 是指全頁面的底圖,通常也是「視覺識別標幟系統」之一,且常為四方連續圖。

.CSS 檔案 + dwt 範本法

使用.CSS 檔案 + dwt 範本法,僅需在範本工具夾內:

!TXTemp

更換背景圖片:

TxBackG.gif

該工具夾內,目前提供了黃、與綠的 2 個背景圖片。

更多可分享之背景圖片樣本:

Page background samples Page background samples.

背景圖片 Background Picture單頁設定法

在各單頁設定背景圖片,除非特殊目的,不建議使用。

右鍵〉網頁屬性

〉設定格式

注意:如果呈現「不可使用」之灰色,表示已設定在 css 中。

EW/SP support flexible user defined theme. However, you have to do it separately.

The following is for the background.

To add background, right click the page:

Or, you may manually insert the syntax as:

<body style="background-image: url('path/folder/name.gif')">

backgrounds Use lighter/simple backgrounds for pages of reading while dark/busy backgrounds are only good for ads or special reasons.


網頁影像處理相關講義 Image Processing Readings

視覺設計/數位攝影/數位美工 Visual Design/Digital Photo/Digital Clipart

TxAdvanced More Advanced Skills of PhotoImpact


向量圖 Vector Graphic

Statistics Diagram


動畫 Animated Graphic

Animator Practice

TxAdvancedConvert data into visual presentation

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題