http://corvus2.ucc.ie/phd/rgleasure/index.html


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

 Due Tuesday 10 th 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.

 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

 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

 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

 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’.

 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 everpresent 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

 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)

 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


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




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;
}




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 tag
To 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>
<p>
Hello World! </h2>
It’s great to be here! </p>
</div>




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>


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 ;


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

From www.w3c.org

From www.w3c.org

 You can also draw an outline around elements, outside the border edge (this is effectively a second border)
From www.w3c.org

 Consider the following code
<html>
<head>
</head>
<body>
<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>
<div>
<h1> Our page for lecture 15 </h1>
<span>We'll use this to try out some CSS</span>
</div>
</body>
</html>


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


CSS background properties
Taken from w3schools

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
}


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 properties in CSS
Taken from w3schools

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-fontfamilies for a list
From www.w3c.org



CSS font-style and font-weight
Thes is mostly used to specify italic or bold text but can also set text as variations e.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

From www.w3c.org


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%












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 topright 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



Add a h3 to the midright 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

 You should end up with a page that looks like this

 Links and references
 http://www.w3schools.com/css/css_boxmodel.asp
 http://www.brainjar.com/css/positioning/