is1825 multimedia development for internet applications lecture 2: working with css rob gleasure...
Post on 20-Jan-2016
218 Views
Preview:
TRANSCRIPT
IS1825 Multimedia Development for Internet ApplicationsLecture 2: Working with CSS
Rob Gleasure
R.Gleasure@ucc.iehttp://corvus2.ucc.ie/phd/rgleasure/index.html
IS1811
Today’s lecture Discussion of Continuous Assessment Part 2 Conceptualising a Website The CSS box model CSS borders and outlines CSS fonts Exercise with CSS
Assignment
Due Tuesday 10th March at 10.00am
Pick a music artist of your choice. You have been commissioned to design their website. This is essentially a brochure website, it need only provide information and advertise acts and events – it doesn’t need to take bookings.
Note, you can also copy/paste written information about acts, etc. from online sources. Note: you don’t need to spend hours writing reviews of jazz acts yourself, that isn’t the point of the exercise and won’t earn you marks.
Assignment
The main objective of this assignment is to demonstrate your competency with HTML and CSS. The marks available will be divided into two areas:
1. Quality of code, i.e. Parsimony – avoids long complicated workarounds done to
avoid using certain aspects of HTML or CSS (i.e. if a method we’ve covered is the best way of doing something, use it)
Complexity – makes use of an adequate breadth and depth of HTML and CSS functionality
Robustness – bug-free, consistent across multiple browsers
Assignment
Legibility Consistent spacing and indentation, adequate
comments, sensible file structure
2. Quality of style and presentation Layout – both within individual pages and across the site Appropriate use/choice of colours and imagery Appropriate presentation of content – includes proper
structuring of information and text blocks, as well as good choice of fonts
Cohesiveness and overall tone – focused towards an appropriate audience
Assignment
Most of all, it must appear professional!
No HTML editors may be used, only a text editor (e.g. Notepad, Notepad++) and a browser (e.g. Internet Explorer, Chrome, Firefox).
The website you create must: Contain between 4 and 8 pages
It may also contain a .txt or .doc file justifying choices of style
Conceptualising a Website
We spoke in the first term about the importance of design, both from a navigational perspective and from an aesthetic perspective
We also spoke about how a design is effective if it serves a purpose, i.e. is function-led, rather than technology-led
Thus, when we start designing we do NOT jump straight into coding up a page
We begin with a pen and paper or with a digital equivalent (this is sometimes called ‘wireframing’.
Conceptualising a Website
Begin by deciding what pages you feel you will need as part of your website
Then decide how these pages can be grouped and what specific pages must link to other specific pages
This should form the basis for the navigation around your site
Identify the group of pages likely to be of most interest to users This group may benefit from being placed within an ever-
present navigation mechanism (typically a navigation bar) Is there another group of pages likely to be of frequent interest?
If so, a second navigation ever-present navigation bar may be suitable
Conceptualising a Website
Now you can begin conceptualising the layout of specific pages
How does the grouping of pages impact on how those pages should be structured?
We know pages early on in the navigation process should contain less information, while more specific pages can contain more
Grouped pages should probably be structured to contain about the same amount of content)
Conceptualising a Website
What parts of the structure can be repeated across all pages to reinforce Repeatability and unify the site?
What parts of the structure can be changed?
From here, sketch out basic structures for your home page and any groups that you feel should share a structure
These should usually be kept ‘low-fidelity’ at first, i.e. rough designs based on how the Webpage breaks down into ‘boxes’
Try and get this part of your Jazz Website planned out this week!
CSS technology is a dedicated style component which plugs into HTML
It offer much more flexibility and control than regular HTML style atributes (which are being depreciated)
CSS can be located in four places Browser defaults External .css files Internal style sheets in the <head> of a HTML document Inline style inserted directly into HTML elements with the style
attribute
Last Class
HTML elements can usually be thought of as boxes this can help us make sense of their layout
The CSS box model contains 4 things Margins Borders Padding Content
From www.w3c.org
The CSS Box Model
When you set the width and height of an element, you are setting the width and height of the content area
The total width an element will take up on a page will be= width + padding + border + margin
These properties can usually be set as follows
p {height:100px;width:250px;padding:10px;border:5px solid gray;margin:10px;
}
The CSS Box Model
Sometimes we will want to apply some style to an area of the page, or a section of content, without wrapping that area or section of content in any particular HTML tagTo this end, we have two ‘empty’ tags built into HTML:
The <span> tag is used to apply style to pieces of text, e.g.
One word in this <span style=“font-style: italic;”> sentence </span> is italic
The <div> tag is used to create divisions on a page, such that styles may be applied to entire ‘panels’, e.g.
<div style=“background-color: 005500”> <h2> Hello World! </h2><p> It’s great to be here! </p>
</div>
Two HTML tags of note
The <div> tag is especially useful when you bear in mind the CSS box model
Being able to wrap a bundle of elements in a <div> tags allows us to ‘box up’ whole sections of the page
Note: Don’t forget that, in HTML tags are nested This means that this is legal:
<div> <p></p></div>
But this is not…
<div><p></div></p>
Two HTML tags of note (continued)
Using CSS, you can set a number of properties in an element’s border The Border Style
This can be dotted, dashed, solid, double, groove, ridge, inset or outset e.g. border-style: solid;
Border Color This can be any colour e.g. border-color: #ff0000;
Collapsing Borders You can also specify no border properties at all using the
border-collapse property e.g. border-collapse:collapse;
CSS borders
Individual sides You can specify whether you want styles to apply to only the
top, bottom, right, or left,
e.g. border-left-style: solid;
border-top-color: #ff0000;
It is also possible to specify all the border properties in one property, Do this using the shorthand border
e.g. border:5px solid #ff0000;
Note: when using shorthand, the order must = width-style-colour
CSS borders (continued)
From
www.w3c.org
CSS border properties
From
www.w3c.org
CSS border properties
You can also draw an outline around elements, outside the border edge (this is effectively a second border)
From
www.w3c.org
CSS Outlines
Consider the following code
<html>
<head>
<style type="text/css">
body { background-color:rgb(210, 210, 155); }
h1 { color:rgb(40, 40, 75); }
p { text-indent: 20px; }
div { border-style: ridge; text-align: center; height: 250px;}
span { border-style:dotted; }
</style>
</head>
<body>
<div>
<h1> Our page for lecture 15 </h1>
<span>We'll use this to try out some CSS</span>
</div>
</body>
</html>
Trying it out
Backgrounds in CSS
The CSS background properties define the background effects of an element. This includes the ability to control the background colour of an element set an image as the background repeat a background image vertically or horizontally position an image on a page
Backgrounds in CSS
CSS background properties
Taken from w3schools
Backgrounds in CSS
E.G. To set a background colour:
body {background-color: yellow}
To set an image as a background: body
{background-image: url(‘image.jpg')
} To set an image repeated as a background:
body {
background-image: url(‘image.jpg');background-repeat: repeat
}
Text in CSS
The CSS text properties allow you to control the appearance of text. This means you can change the colour of a text increase or decrease the space between characters in a text align a text decorate a text indent the first line in a section of text
Among other things..
Text in CSS
Text properties in CSS
Taken from w3schools
Text in CSS
E.G. To set the text colour for h1:
h1 { color: #00ff00; }
To align the text in paragraphs: p { text-indent: 50px; }
To set the letter spacing across the page: body { letter-spacing: 2px; }
CSS font families There are a huge number of font families Generally, these can be divided into serif and sans-serif See http://www.w3.org/TR/CSS2/fonts.html#generic-font-
families for a list
From
www.w3c.org
CSS Font properties
CSS font-style and font-weight Thes is mostly used to specify italic or bold text but can also
set text as variationse.g. font-style: italic;
font-weight: bold;
CSS font size This can be used to make text bigger/smaller than the default
e.g. font-size:120%;
You can also use pixels (px) or the em size unit. The em unit is recommended by W3C but percentages work on pretty much every browser
CSS Font properties
From
www.w3c.org
CSS Font properties
Exercise
For this exercise, we’ll be working only with inline and default styles. Do not use any built-in HTML style attributes (apart from style)
Create a webpage called lab3.html Create a table on this page with 3 rows and 2 columns For this table
Set the width of this table to 80%, the border-collapse to ‘collapse’, the margin to be 0.5em
Add an outline which is 0.2em groove rgb(155, 205, 205) Using the <col> tag, set the width of the first column to be 15%
and the second column to be 85%
Exercise (continued)
Change the background-color of the cells as follows Set the top-left as rgb(150, 200, 200) Set the top-right as rgb(215, 190, 240) Set the mid-left as rgb(195, 180, 250) Leave the mid-right unchanged Set the bottom-left as rgb(180, 220, 220) Set the bottom-right as rgb(230, 195, 255)
Set the padding of each cell as 2em Add a <h1> to the top-right cell stating ‘Lorem Ipsum Dolor’, then
set the color of this heading to rgb(75, 80, 175) Set the vertical-align of the mid-left cell to be text-top Add 3 identical links on new lines to the mid left linking to
http://www.ucc.ie, each containing the clickable text Lorem and each followed by a line break
Exercise (continued)
Add a h3 to the mid-right cell with the words ‘Lorem Ipsum Dolor’ and make it color rgb(75, 80, 175)
Add the following text to the same cell (after the heading):Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Add a paragraph to the bottom-right, in which text-align is set to center, text-transform is set to ‘capitalize’, font-size is set at 110%, font-weight is bold, and make it color rgb(75, 80, 175)
Then add the text ‘dolor sit amet’ to this paragraph
Exercise
You should end up with a page that looks like this
Want to read more?
Links and references http://www.w3schools.com/css/css_boxmodel.asp http://www.brainjar.com/css/positioning/
top related