Download presentation
Presentation is loading. Please wait.
1
TECH2018 Multimedia and the Internet More about CSS and Page Layouts
3
XHTML - Summary xhtml page structure elements, attributes div, p, h1-h6, Comments span and li - demonstration id and class attributes with “values” ○ to identify individual elements xhtml page appearance – color, font css – style rules {property:value} xhtml page layout - positioning css – style rules {property:value}
4
html, head and body (elements) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en"> Title
5
divs and paragraphs (elements) s are elements for marking up larger chunks s can contain aragraphs, eadings and other s aragraphs are elements for marking up a smaller chunk of connected content – as in English. aragraphs can contain s
6
id and class (attributes) id is an attribute used to uniquely identify and elements class is an attribute used to identify a group of similar elements
7
divs and paragraphs (elements) id and class (attributes) Anne Other has taught mathematics and computing..... Since 1975 Anne has....
8
h1)eadings and spans (elements) eadings are for marking up headings at 6 levels h1 (largest) to h6 (smallest) s are for marking up small chunks of particular significance eadings and s cannot contain div, paragraphs etc.
9
h1)eadings and spans (elements) Teaching Anne has taught programming in C and Java as well as Smalltalk and have also taught Web page design and developing Dynamic web sites
10
Adding XHTML Comments Comments – do not get displayed Anne Other has taught mathematics and computing..... Since 1975 Anne has....
11
lists – unordered (element) Unordered list (bullets) Anne’s Interests One Interest External site of interest to Anne
12
lists – ordered (element) Ordered list (numbers / letters) Anne’s Interests One Interest External site of interest to Anne
13
Designing structure Single page Simply use logic use id and class as needed Multiple pages Plan shape of each page give each page an identical structure even if not every page has the content is each element make id and class totally consistent
14
CSS
15
Cascading style sheet Used to define appearance of the page Appearance = layout, color, font, etc Cascading because Browser default External CSS - user defined Internal CSS In-line style
16
style-sheet A separate stylesheet (e.g. VWSP.css) Containing a series of element {property:value} e.g body {font-family: "Comic Sans MS"}; element {property:value; property:value} e.g body {color:red; background-color:white}
17
Adding a link to your stylesheet Vivienne Westwood <link rel = “stylesheet” type = “text/css” href = “../css/VWSP.css” />
18
stylesheet path xhtmlcss labs aboutVW.html VWSP.css../css/VWSP.css../ css/
19
colo(u)r Always set BOTH color – text background-color – background element {color:your-text-color; background-color:your-background-color}
20
Adding color – names and codes Color namescyan, red etc (limited) Browser safe216 – less important now Color codes rgb red green blue #rrggbbhexadecimal 00-FF rgb(0,255,187) values 0-255 rgb(20%,0%,30%) 20% red and (no green) and 30% blue http://www.december.com/html/spec/colorspottable.html http://web.forret.com/tools/color_palette.asp http://www.wellstyled.com/tools/colorscheme2/index-en.html http://www.w3schools.com/css/css_colors.asp
21
Changing Fonts font-family cursive, sans-serif, serif font-family Arial, “Times New Roman”, “Comic Sans MS” font-size 10pt, 20%, 1.5em font-style italic, normal font-weight bold, bolder.. 100,500, normal font-variantsmall-caps, normal font: normal, cursive, small-caps,1.5em Fonts that work in all browsers http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
22
Examples body {color:#FF99CC; background-color:#660099; font-family:"Comic Sans MS"}.date {color:#FFCCFF; background-color:#660099} #heading {color:#660099; background-color:#CC99FF; font-size:18pt}
23
Positioning elements Absolute – specify position Relative – relative to where it should be Fixed – nailed to the window – no scroll Associated properties top, bottom, left, right, width, height Units – Length - absolute in, cm, px, Length - relative – em, percentage
24
4 layout options (3 divs) A B C D
25
layout examples #heading {position:absolute; top:0;left:0; width:1280px;height:40px} #main {position:absolute; top:40px;left:0; width:1000px;height:500px} #menu {position:absolute; top:80px;left:1000px; width:200px;height:500px}
Similar presentations
