Multimedia Communication 1 April, 2006

Text and Layout

김 희 준

Multimedia Communication 2 April, 2006

Text in Graphics

유연성▲ 본문을 그래픽스로 간주▲ 그래픽스 프로그램에 그것을 조작하는 것이 가능

그래픽 디자인 안에 본문을 집어넣고 표현하는 것이 이상적인 방법▲ 포스터 , 포장 , 편지지의 인쇄 문구 , 책 표지 , CD 와 DVD 표지들

이상적으로 권장하는 표현▲ 아웃라인 폰트들을 가진 벡터 그래픽스와 비트맵 폰트들을 가진 비트맵의

이미지 통합

Multimedia Communication 3 April, 2006

Vector Text

아웃라인 폰트들로 설정된 본문▲ 벡터 그래픽스 프로그램에서 물체로 간주▲ 색상 , 패턴 변형 및 회전 , 반사 , 크기도 변형가능

Fill shapes with text, set text along a path▲ Tools 을 이용해 어느 한 공간에 text 로 채우면 , 그 경로를 따라 일정

방향으로 text 가 자리를 잡는다 .▲ Text remains editable

Text in shape/along a path will accommodate transformations of the shape/path

Multimedia Communication 4 April, 2006

Bitmapped Text

Convert text to pixels Can apply usual effects and filters

▲ Usually keep text on separate layer, so effects can be applied to it independently

Text can no longer be edited as text▲ Can't change font, spell check, change wording, etc▲ Must be retouched like any other image

Multimedia Communication 5 April, 2006

Layout

Most text is laid out according to conventions

Words are arranged into lines, combined into paragraphs placed on the page

Special formatting (e.g. italicization) may be applied to words within a paragraph – inline/character formatting

Paragraphs may be set in special ways (e.g. indentation) – block-level/paragraph formatting

Multimedia Communication 6 April, 2006

Formatting

Inline Formatting▲ Apply formatting to spans of characters within a block

Font characteristics and size, Color, Baseline offset for superscripts and subscripts

▲ Character styles collect together a set of properties used for some purpose (e.g. emphasis) to be applied by name

Ensures consistency, eases modification

Block-level Formatting▲ Each block will have default settings for the formatting of

characters (font, size, etc) Over-ridden by inline formatting

▲ Blocks may be left-aligned, centered, right-aligned or justified

Multimedia Communication 7 April, 2006

Markup

Instructions embedded in a document to control its formatting

WYSIWYG – markup consists of invisible control codes, formatting is displayed as you type

Tag-based – text of document is interspersed with special commands known as tags; separate rendering phase is needed to display the formatted document▲ Tags are lexically distinguished from text

Multimedia Communication 8 April, 2006

Stylesheets

Logical conclusion of structural markup:▲ Complete separation of content and structure from appearance▲ Markup tags only indicate structure▲ Specification of the appearance is left to a separate mechanism▲ Stylesheet provides rules describing how each type of element should be

displayed

Multimedia Communication 9 April, 2006

HTML

Hypertext Markup Language

Evolved from original version with tags suitable for marking up scientific papers; now supports variety of embedded multimedia as well as richer variety of layout features▲ Recent versions emphasize structural markup, but there are

visual markup features left over from earlier versions

Multimedia Communication 10 April, 2006

HTML Markup

HTML markup divides document into elements

Each type of element has a name

Elements may be nested (subject to restrictions)▲ Must be properly nested – if an element starts inside another,

it must end inside it too

Each element is introduced by a start tag and terminated by an end tag▲ Text in-between is the element's content

Multimedia Communication 11 April, 2006

Tags

Element's start tag is its name enclosed in angle brackets: <p>, <h1>, <div>, …

Element's end tag is its name preceded by a slash, enclosed in angle brackets: </p>, </h1>, </div>,…

Empty elements (with no content) have start and end tags run together: <img />, <hr />,…

Multimedia Communication 12 April, 2006

Character Entity References

Need a mechanism for inserting <, > and other special characters into a document without having them interpreted as start of a tag &c

Use character entity references &lt; &gt; for < >▲ N.B. final ; is part of the reference

Now need a way of inserting &: use &amp;

Numeric character references, e.g. &#60;▲ Number after # is ISO10646 character value

Multimedia Communication 13 April, 2006

Attributes

Named properties of an element

Values are assigned within start tag <hr size="12" width="50%" />

Values must be enclosed in "s

Flags are turned on by assigning their own name <hr noshade="noshade" />

▲ Just omit flag attribute to turn it off

Multimedia Communication 14 April, 2006

HTML Block-Level Elements

p ▲ 본문에서 단락을 구분

h1, h2,…,h6▲ 문서 제목의 글자 크기를 1~6 까지 사용

blockquote ▲ 인용문 등을 사용 (not indented paragraphs)

div – arbitrary division▲ 단락구분 / 마지막 줄 안 띄어줌

Multimedia Communication 15 April, 2006

HTML Lists

ul – unordered list

ol – ordered list

li – list element

▲ UL,OL 태그 사용시 목록을 적을 때

dl – definition list

▲ <DL></DL> 용어정의 목록을 시작하는 곳에 사용

▲ <DT> 용어의 이름

▲ <DD> 용어의 대한 설명

Multimedia Communication 16 April, 2006

CSS

Cascading Style Sheets

Simple stylesheet language that works well with HTML and is supported by most Web browsers

Used to specify visual properties of each element

Can embed rules in a style element within the head of an HTML document

Multimedia Communication 17 April, 2006

Declarations & Examples

property: value; Set of properties is defined in the CSS standard

▲ Inline and block-level formatting▲ Absolute and relative positioning of elements

Examples▲ <style type="text/css">

<!-- h1 { color : red ; font-size : 14px; font-family : 돋움체 ; }// 이것은 <h1><h1> 태그 내에 있는 텍스트 기타 요소에 대해서 색은 빨간색 , 글자크기는 14px , 글자체는 돋움체로 하라는 것

b { background : green; font-size : 10px; } -->// 이것의 경우는 <b></b> 태그 내에 있는 요소에 대해서 배경색은 녹색 , 글자크기는 10px 로 하라는 의미

</style>

Multimedia Communication 18 April, 2006

CSS Typography

Five properties control font characteristics▲ font-family

글꼴을 말함 -> font-family: " 센스체 "," 돋움체 "," 궁서체 " 다른 속성과 함께 사용할 때는 font-family 속성을 가장 나중에 설정

▲ font-style font-style 속성은 글자체의 스타일을 지정 / normal , italic , oblique 값

▲ font-variant 단순히 보통의 텍스트를 작은 대문자 폰트를 이용해서 작은 대문자로 바꾸어 주는

것

▲ font-weight 폰트의 굵기를 지정해주는 속성 lighter , light , normal , bold ,bolder 값

▲ font-size 말 그대로 글자크기를 조절해주는 속성 px, pt ,in ,cm

Multimedia Communication 19 April, 2006

word-spacing , letter-spacing

word-spacing▲ 단어사이의 여백을 조절해주는 기능

letter-spacing▲ 글자사이의 여백을 조절해주는 기능

Ex)<style type="text/css"><!-- h1 { word-spacing:5px; } h2 { letter-spacing:7px; }--></style><body> 태그매니아 스타일 시트<h1>word-spacing 속성은 단어사이의 여백 조정 </h1><h2>letter-spacing 속성은 글자사이의 여백 조정 </h2></body>

Multimedia Communication 20 April, 2006

text-align , text-indent

text-align ▲ 글자뿐만 아니라 이 속성에 포함된 요소의 정렬방식을 결정

text-indent▲ 들여쓰기의 길이를 정해주는 기능

Ex) <style type="text/css">

<!-- p { font-size:13px; color:blue; text-align:right; } .love { text-indent:5%; text-align:left; } --> </style> <body> <p> 디스플레이의 경우 </p> <p class=love>PDP 의 경우 ....</p> </body>

Multimedia Communication 21 April, 2006

positioning & Layer

position , left , top

position 속성▲ absolute( 절대적위치 ) – 화면 해상도에 상관없이 고정 위치▲ relative( 상대적위치 ) – 화면 해상도에 비례하여 위치

z-index ▲ 레이어 효과를 사용할 때 레이어의 층의 순서를 결정해주는 속성▲ z-index 값이 작을수록 아래 층을 의미▲ Ex) .love { font-color : green; z-index : 1; position : absolute; left : 100px; top : 150px; }

.story { font-color : orange; z-index : 3; positon : absoluet; left : 150px; top : 100px; }

Multimedia Communication 22 April, 2006

External Stylesheets

Can put a collection of rules in a file and refer to it from within an HTML document

link element with href attribute pointing to stylesheet, rel="stylesheet", type="text/css"▲ <link href="styles.css" rel="stylesheet" type="text/css" />

Allows same set of styles to be used in all pages of a Web site, global changes made easily