1. Do you want to make info graphics for the US Election?
Do you want your work to be covered by the BBC?
Brilliant for your portfolio and CV!
Contact

2. Dreamweaver CS6
Using CSS3 and HTML5 to make our web-page dynamic.

3. We will be using the following applications:
Adobe Dreamweaver CS6

4. Source Files MyBU -> Production-> Unit Materials ->
HTML/CSS Workshops ->
HTML/CSS Lesson 4 Files

5. Today, we will be covering:
Workshop Overview
Today, we will be covering:
Creating Multiple Pages
Building a Navigation Bar
What CSS3 is
Adding custom fonts
Adding a fade transition

6. Setting up the Site Open up the .zip file you just downloaded.
Inside will have a site directory. Copy and paste it to your ‘temporary work’ folder (or ‘documents’).
This is a premade web-page that we will be using for today.

7. Setting up the Site Open up Dreamweaver. Site-> New Site
Name the site as ‘HTML5 and CSS3 Lesson 4’.
Set the ‘local root’ folder as the ‘site’ folder that you just moved into your documents.

8. The header is missing a logo, so lets insert one!
Inserting an Image
The header is missing a logo, so lets insert one!
I have already made a 130px by 130px logo to add (in the ‘images’ folder) so confirm that.

9. Removing the Background-Color
The logo’s division area will now have a background color, behind the image.
Remove the CSS line of:
Because the image is a .png, its transparent parts (The outside of the circle) will have the content of the division ‘behind it’ display through.

10. Background Image
When designing a website, we sometimes won’t want to stick to using standard background colors.
We can use CSS to insert an image, and tile it repeatedly across an entire section of a page.

11. In the CSS for the <header>, remove this line:
Background Image
In the CSS for the <header>, remove this line:
And type in this:

12. Background Image
Select ‘grey-pattern.jpg’ and you should have a complete line of code of this:
However, insert a background image will only place 1, and not repeat if the user has a bigger screen.
Add this:

13. However, these fonts are only viewable in certain browsers.
CSS3 Fonts
With HTML5 and CSS3 we can add our own fonts, which we can download from online.
However, these fonts are only viewable in certain browsers.
Internet Explorer does not support ‘Web-Fonts’ yet and will display a default alternative instead.

14. CSS3 Fonts www.dafont.com Choose a font.
Preview what your text will look like.
Download and save it into the ‘fonts’ folder of your website.

15. CSS3 Fonts www.dafont.com Choose a font.
Preview what your text will look like.
Download and save it into the ‘fonts’ folder of your website.

16. CSS3 Fonts To create a custom font reference:
Type the name of your font. This can be custom.
Source link to your saved font.

17. To apply this custom font to your headers and text:
CSS3 Fonts
To apply this custom font to your headers and text:

18. <h2>
Now that we have used <h1> for the title of the website, we now need to specify a <h2> for the content of each web-page.
It is good, and ideal, practice to state what each page is, for the user.

19. Lorem Ipsum

20. Hyperlinks
Building a website with all the content on 1 page is quite boring and cluttered.
So, we need to use a Hyperlink to allow our users to navigate to other pages/external websites.

21. To establish a hyperlink, we need to use the <a> tag property.
Important: You MUST close this tag. Anything inside it WILL link the user to the target page.

22. Opening the link on a New Window
A standard <a> tag will directly take the user to a new URL.
Apply this to open the URL in a New Window when clicked:

23. Stylising our <a> Tag
As with any tag in HTML, you can style it using CSS.
One particular CSS rule I like to use is this:
This removes the default underline style.

24. Navigation Bar
This should be the main method your user should take in navigating through your website pages.
This should be located either in the header of the page, or in the sidebar.
A smaller, more simplified, version should appear in the footer as well.

25. Navigation Bar
The navigation bar can be displayed horizontally or vertically.
Normally, use a horizontal list for the top of the page and a vertical list for a sidebar.

26. Lists
Inside the <nav> tags, type in this:

27. Lists Everything in between this tag is part of an ‘unordered’ list.
Use a <ol> tag for an ‘ordered’ (Numbered) list.
Use the <li> tag for each ‘bullet point’ or ‘list item’ in the list.

28. So lets use CSS to style it.
List Styles
This looks horrible!
So lets use CSS to style it.

29. List Styles
Some web-pages will have lost of lists of hyperlinks, so lets give our navigation list an id:
And in our CSS:

30. List Styles Those bulletpoints make our navigation menu look dated…
Use this to get rid of them:
We now have a vertical menu! However, we want to create a horizontal menu for this site.

31. Changing our menu from vertical to horizontal is very easy!
List Styles
Changing our menu from vertical to horizontal is very easy!
Add this:

32. List Styles
The <nav> division has a horrible background color on it.
Remove this to make it transparent:

33. List Styles <ul> for properties of the list area.
<li> for properties for each item in a list.
<a> for properties of the hyperlinks.

34. You will probably want to:
Experiment!
Try applying custom font styles to the <a> hyperlinks in the list.
You will probably want to:
Change the color.
Play around with the margin between each object.
Push the entire list down so it is inline with the ‘Digital Media Design’ text.

35. Hovering over a Hyperlink.
Users like to have some form of ‘response’ or visual feedback when they hover something they can interact with.
So, we want to apply a style that is applied to a Hyperlink, when the user hovers their mouse over it.
This way, it indicates that the link can be clicked.

36. Hovering over a Hyperlink.
Add this:
Any style inside this style bracket will be applied to a list’s <a> tag when the user hovers over it with the mouse.
Experiment!

37. Hovering over a Hyperlink.
Add this:
Any style inside this style bracket will be applied to a list’s <a> tag when the user hovers over it with the mouse.

38. Experiment! My Suggestions:
Alternate the text color and background color:
Add an underline:
Add italics:

39. Try sticking to perhaps 1 or 2 styles.
Warning!
Using too many styles or decorations could make the link look horrible.
Try sticking to perhaps 1 or 2 styles.
This will be just enough to let the user know that they have hovered their mouse over something that can be interacted.

40. CSS3 We can also apply CSS3 effects to our Hyperlinks.
CSS3 Styles such as Drop Shadow, Gradients and Custom Fonts.
However, these will only happen on certain browsers.
Internet Explorer is being a pain-in-the-butt again…

41. Multiple Web pages
When building a website, you want to keep your layout/styles, for each page, almost exactly the same.
However, we don’t want to have to retype ALL of the code again!
So, here is a quick way to recreate our web-page…

42. Multiple Web pages Open up your index.html page. File -> Save As
Rename it to your desired page (about.html, work.html etc) and save it into your ‘site’ folder.
Edit content on the page!

43. Multiple Web pages
Your CSS sheet will apply to ALL of the sections of your HTML pages.
Before editing content, make sure you check which page you currently have open.
Double-check Hyperlinks to make sure they work!

44. The method I use is this:
Current Page
A personal preference is to leave the user some sort of indicator of the page they are currently on, in the navigation bar.
The method I use is this:

45. A span tag allows you to apply styles to parts of text.

46. Useful Web Design Links
Kuler – Color Scheme Generator
Lorem Ipsum – Text Generator
CSS3 Generator – Preview CSS3 Styles
CSS3 Browser Support

47. Post Workshop Activity
Add a <footer> division to each of the pages.
Build a simpler version of your navigation bar that will appear on each page.
Create a VERTICAL menu on the ‘Contact’ page with links to your Facebook, Twitter, LinkedIn, Blog etc.