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 < > for < >▲ N.B. final ; is part of the reference
Now need a way of inserting &: use &
Numeric character references, e.g. <▲ 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