Download
1 / 25
250 likes | 372 Views
TECH2018. Multimedia and the Internet More about CSS and Page Layouts. xhtml - page structure appearance - color and position appearance - stylesheets publishing - paper v web. XHTML - Summary. xhtml page structure elements, attributes div, p, h1-h6 ,
E N D
TECH2018 Multimedia and the Internet More about CSS and Page Layouts
xhtml - page structure appearance - color and positionappearance - stylesheetspublishing - paper v web
XHTML - Summary • xhtml page structure • elements, attributes • div, p, h1-h6, • Comments <!-- comment --> • 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}
html, head and body (elements) <?xml version="1.0" encoding = "UTF-8"?> <!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"> <head> <title>Title</title> </head> <body> </body> </html>
divs and paragraphs (elements) <div>sare elements for marking up larger chunks <div>s can contain <p>aragraphs, <h1>eadings and other <div>s <p>aragraphs are elements for marking up a smaller chunk of connected content – as in English. <p>aragraphs can contain <spans>s
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
divs and paragraphs (elements)id and class (attributes) <div id=“main"> <p class=“p1”>Anne Other has taught mathematics and computing..... </p> <p class=“p2”>Since 1975 Anne has.... </p> </div>
h1)eadings and spans (elements) <h1>eadingsare for marking up headings at 6 levels h1 (largest) to h6 (smallest) <span>s are for marking up small chunks of particular significance <h1>eadings and <span>s cannot contain div, paragraphs etc.
h1)eadings and spans (elements) <h1>Teaching</h1> <p class=“p2”> Anne has taught programming in <span class=”language”> C</span> and <span class=”language”> Java</span> as well as <span class=”language”> Smalltalk </span> and have also taught <span class=”language”> Web page design</span> and developing <span class=”language”> Dynamic web sites</span> </p>
Adding XHTML CommentsComments – do not get displayed <!--details correct as of 6-11-07 --> <body> <div id=“main"> <p class=“p1”>Anne Other has taught mathematics and computing..... </p> <p class=“p2”>Since 1975 Anne has.... </p> </div> </body>
lists – unordered (element) Unordered list (bullets) <ul id=“interests”> <li>Anne’s Interests</li> <li>One Interest</li> <li>External site of interest to Anne</li> </ul>
lists – ordered (element) Ordered list (numbers / letters) <ol id=“interests”> <li>Anne’s Interests</li> <li>One Interest</li> <li>External site of interest to Anne</li> </ol>
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
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
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}
Adding a link to your stylesheet <html> <head> <title>Vivienne Westwood</title> <link rel = “stylesheet” type = “text/css” href = “../css/VWSP.css”/> </head> <body> <!-- content goes here in div, p, h span etc --> </body> </html>
stylesheet path labs ../ css/ xhtml css VWSP.css aboutVW.html ../css/VWSP.css <linkrel="stylesheet" type="text/css"href= "../css/VWSP.css"/>
colo(u)r Always set BOTH color – text background-color – background element {color:your-text-color; background-color:your-background-color}
Adding color – names and codes Color names cyan, red etc (limited) Browser safe 216 – less important now Color codes rgbred green blue #rrggbb hexadecimal 00-FF rgb(0,255,187) values 0-255 rgb(20%,0%,30%) 20% redand (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
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-variant small-caps, normal • font: normal, cursive, small-caps,1.5em Fonts that work in all browsers http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Examples <!-- for all text --> body {color:#FF99CC; background-color:#660099; font-family:"Comic Sans MS"} <!-- for a class - date--> .date {color:#FFCCFF; background-color:#660099} <!-- for an id – heading --> #heading {color:#660099; background-color:#CC99FF; font-size:18pt}
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
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}
