25
TECH2018 Internet More about CSS and Page Layouts
| Date post: | 25-Dec-2015 |
| Category: |
Documents |
| Upload: | rose-octavia-norris |
| View: | 229 times |
| Download: | 0 times |
TECH2018
Multimedia and the Internet
More about CSS and Page Layouts
xhtml - page structure appearance - color and positionappearance - stylesheets publishing - paper v web
XHTML - Summary xhtml page structure
elements, attributesdiv, p, h1-h6, Comments <!-- comment -->span and li - demonstration
id and class attributes with “values”○ to identify individual elements
xhtml page appearance – color, fontcss – style rules {property:value}
xhtml page layout - positioningcss – 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>s are 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>eadings are 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 pageSimply use logicuse id and class as needed
Multiple pagesPlan shape of each pagegive each page an identical structure
even if not every page has the content is each element
make id and class totally consistent
CSS
Cascading style sheet
Used to define appearance of the pageAppearance = layout, color, font, etcCascading because Browser default External CSS - user defined Internal CSS In-line style
style-sheet
A separate stylesheet (e.g. VWSP.css)Containing a series ofelement {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
xhtml css
labs
aboutVW.html VWSP.css
../css/VWSP.css
<link rel="stylesheet" type="text/css" href= "../css/VWSP.css" />
../ css/
colo(u)r
Always set BOTHcolor – textbackground-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 rgb red green blue#rrggbb hexadecimal 00-FFrgb(0,255,187) values 0-255rgb(20%,0%,30%)20% red and (no green) and 30% blue
http://www.december.com/html/spec/colorspottable.htmlhttp://web.forret.com/tools/color_palette.asphttp://www.wellstyled.com/tools/colorscheme2/index-en.htmlhttp://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
4 layout options (3 divs)
A B
C D
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}
