maximum flexibility obtained by treating text as graphics and manipulating it in graphics program...
Post on 26-Dec-2015
223 Views
Preview:
TRANSCRIPT
Maximum flexibility obtained by treating text as graphics and manipulating it in graphics program• Ideally suited to graphic design
incorporating text Posters, packaging, letterheads, book
jackets, CD and DVD covers,…• Vector graphics with outline fonts or
bitmapped images with bitmapped fonts Increasingly, combine the two approaches
344–345
Text set in outline fonts can be treated as object in a vector graphics program• Transform; apply colour, gradient and
patterns• Fill shapes with text, set text along a path
Text remains editable Text in shape/along a path will
accommodate transformations of the shape/path
345
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
345–346
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
347
Apply formatting to spans of characters within a block• Font characteristics and size
• Colour
• 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
348
Each block will have default settings for the formatting of characters (font, size, etc)• Over-ridden by inline formatting
Blocks may be left-aligned, centred, right-aligned or justified• May hyphenate
Set spacing on all four sides of block (indent etc)
Use paragraph styles for consistency
348–351
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
351–352
Tags identify logical elements of a document (headings, lists, tables,…)• Contrast visual markup – tags control
aspects of appearance (fonts, indents, …) Formatting may be defined for each
type of element (cf. paragraph and character styles)
Permits separation of concerns between structure and appearance
Makes it easier for programs to analyse structure of documents
353–355
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
355–356
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
356–357
HTML redefined using an XML DTD XHTML 1.0 adopted as W3C
Recommendation Jan 2000 Almost compatible with HTML 4.0
• Legal XHTML is legal HTML 4, but not vice versa
• XHTML is more strict than HTML 4 Can usually use HTML to mean XHTML
or HTML 4
357
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
357–358
Element's start tag is its name enclosed in angle brackets: <p>, <h1>, <div>, …• XHTML names consist of lower-case letters
and numbers 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 />,…
358–359
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 & General mechanism for hard-to-type
characters Also numeric character references, e.g.
<• Number after # is ISO10646 character value
358–359
Named properties of an element Values are assigned within start
tag <hr size="12" width="50%" />
Values must be enclosed in "s Attribute names are all lower-case Flags are turned on by assigning
their own name <hr noshade="noshade" />
• Just omit flag attribute to turn it off
360
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"><html> <head> … </head> <body> … </body></html>
362–363
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
CSS rules have the form• selector { declarations }
Can embed rules in a style element within the head of an HTML document
360–361
Name – declaration applies to all elements of the named type
Name.class – declaration applies to all elements of the named type whose class attribute has value class
Name#id – declaration applies to the unique elements of the named type whose id attribute has value id
361, 368
property: value; Set of properties is defined in the
CSS standard• Inline and block-level formatting• Absolute and relative positioning of
elements
361
Indent first line of each paragraph 4pc
p { text-indent: 4pc; } Except paragraphs of class noindent
• p.noindent { text-indent: 0pc; } Use a hanging indent on paragraphs
of class hang p.hang { text-indent: -4pc;
margin-left: 4pc; }
361–362
p – paragraphs h1, h2,…,h6 – level 1, 2,…,6(!)
headers blockquote – long quotations (not
indented paragraphs) pre – pre-formatted text div – arbitrary division
• use class or id attributes in conjunction with stylesheet rules
365–366
ul – unordered list ol – ordered list li – list element
• Use li elements within ul and ol elements
• Within ol, li elements are automatically numbered; ul, bulleted by default
dl – definition list• Use pairs of dt (term) and dd (definition)
elements within dl
365
Relatively complex constructions providing for wide variety of tabular layout
table elements contain tr (row) elements containing td (data, i.e. cell) elements• Further facilities for spanning columns and rows,
adding captions and headers, etc Tables were very commonly used to lay
out pages• Effective and reliable, but CSS positioning is
officially endorsed way of doing this
365
Elements indicating explicit inline formatting (e.g. font) deprecated – conflict with structural markup
More abstract inline elements OK• em (emphasis), strong, etc
span element identifies arbitrary spans of text• Use class and id attributes in conjunction
with stylesheet rules to apply inline formatting
367
Five properties control font characteristics• font-family• font-style• font-variant• font-weight• font-size
Used in conjunction with line-height
368–369
Value is a list of font names in decreasing order of preference• No guarantee that any specific font will
actually be used (may not be available to browser)
Can use generic font families – browser will substitute an appropriate available font• serif, sans-serif, monospace, cursive, fantasy
p.elegant { font-family: "The Sans", Verdana, Helvetica, sans-serif }
369
font-style may be normal, italic or oblique (i.e. slanted)
font-variant may be normal or small-caps
Effect is to choose an appropriate member of the font family selected by the font-family property• Slanted font may be used for italic if no real
italic font is available
370
Absolute sizes may be specified in any unit
Sizes relative to browser default may be chosen from xx-small, x-small, small, medium, large, x-large, xx-large
Sizes may be a percentage of inherited value, or specified in em or ex units of inherited font
Relative size changes specified with smaller or larger
371
line-height property specifies leading normal – chosen by browser, usually
1 to 1.2 times font size (i.e. too small)
Use percentage (150%), ratio (1.5) or ems (1.5em) to specify leading relative to font size
line-height and leading can be combined within a font declaration: 14pt/21pt
371
Combine all five font properties into a single declaration for font
Can include composite size/leading Any omitted properties take on default
values Order is unspecified, but browsers
seem to prefer style, variant, weight, size, family
•p { font: italic bold 14pt/21pt "The Sans", Verdana, Helvetica, sans-serif }
371–372
• background-color and color properties control the colour of background and text
• Values specify colours in sRGB colour space• rgb(r%, g%, b%)• rgb(r, g, b) where r, g, b are in range 0–255• #rrggbb where rr, gg, bb are hex values
rgb(80%,40%,80%) rgb(204,102,204) #CC66CC
372–373
text-align property can take values left, right, center or justify
Can only be sensibly applied to block-level elements
body { text-align: left } p.display { text-align: center }
373
Layout algorithm:• Each element is notionally placed in a box• Inline elements and text placed next to
each other horizontally, then fitted into available width to form blocks
• Blocks are placed vertically on top of each other
Stylesheet may be used to modify placement of elements
374
Each box may be surrounded by a border Border is separated from contents by
padding Beyond border, margins separate box from
its neighbours on all sides Plethora of CSS properties can be used to
set border width, style and colour, padding and margins, box's height and width
Text colour and background colour can be set separately for each box
374–375
Boxes may be 'floated' to left or right margin, while text flows round them
float property can take value left or right clear property can take values left,
right, both or none, specifying which sides may be adjacent to a floating box• If clear = left, box is forced to go below the
bottom of any left-floated element, and so on
375
Set position to absolute, then specify values for top and left properties, setting the position of the top left corner of the box• Tedious calculations, usually done by
interactive manipulation in Web authoring program
• Can use relative units Boxes may end up on top of each other,
z-order property specifies stacking order Preferred alternative to use of tables for
layout
375–377
• 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
377
top related