1. Internal and External Style sheets
With CSS you can create both internal and external style sheets. An internal style sheet controls the style and layout of just one page (or maybe just a table on a page) while an external style sheet controls the style and layout of multiple pages. So far you’ve just used internal style sheets and today you will learn how to create an external one.
While internal style sheets are located on your page in the <head> section, external style sheets are located in a separate file. The code that links an external style sheet is placed in the <head> section:
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” >
So an example webpage with an external style sheet could look like this:
<html>
<head>
<title>CSS- Working with External Style Sheets</title>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” >
</head>
<body>
<h1>Nothing much to see here, just an example!</h1>
</body>
</html>
External style sheets can be created using either Notepad or Dreamweaver. Just like with our webpages, how you save them matters and that is how they will be understood to be style sheets.
External style sheets are saved with the file extension .css. For example, stylesheet.css.
Remember: when working with an external style sheet, you will have at least two files open at all times- your style sheet, and your webpage. You will have your style sheet and webpage open in Notepad, and your webpage will also be open in Firefox for previewing. When you make changes to your style sheet, save them, then refresh your webpage to see the changes.
2. Website Re-creation Project
Today you will begin working on your website re-creation projects. You are re-creating two pages of a chosen website. For example, if you do Google, show me the home page and what a search page looks like, and both pages must be linked together. If you do Facebook or Twitter, show what the home page or log-in screen looks like, and then show the page after a user is logged in, and, again, both pages must be linked together.
You can either re-create your website as close to how it looks as possible or put your own twist on it and do something new.
Everyone must choose a website today and run it by me before the end of the period. It can be any website you want.
This project will include:
– Setting up a page with HTML and CSS with an external style sheet (I will help you get going with this)
– Potentially using Photoshop or Fireworks to create or edit graphics and images (not every computer has them, you can also use Paint or an online image editor)
– Using CSS to select appropriate colors and fonts, and to lay out your page
Remember, projects are worth 50% of your grade.
What to do today: PLAN
1. Choose your website
2. Determine what you want to do- recreate it, change it up
3. Use Firebug (right click on page, then go to Inspect Element with Firebug) to check out the code of the webpage you’re re-creating. It will be helpful to you in determining layout, appropriate colors and fonts, etc.
4. Decide how you will lay out the page. Think about our class examples from last week. You saw how to set up a three-column layout with a header and also experimented with positioning different sections of a website. Look at the page you are re-creating and decide how you want to organize the content on the page. It doesn’t have to be too complicated- keep it simple!
5. Draw/sketch a rough outline (wireframes) of your two pages. You can do this by hand or on your computer. Cool tool to try- Wirify. Drag the Wirify link to your bookmarks bar, go to another webpage, click the Wirify link, and check out a “wireframed” version of the website. Also try https://moqups.com/#!/ for more wireframing. Or try this https://www.lucidchart.com/– click try it now.
6. Download and save graphics and images. This is the one and only time you will be allowed to use logos and images from another site since it is for educational purposes only in our classroom. You could never legally do this- and should never do this- when working on your own projects. Normally, you would either create your own graphics or use free stock images.
Helpful resources for selecting fonts and colors:
CSS Reference Sheet- see CSS properties for text (font and size)
http://speckyboy.com/2008/10/06/css-typography-reference-sheet-get-creative-with-your-headlines/
CSS Font and Text Style Wizard- Test out styles for text and preview changes
http://www.somacon.com/p334.php