HW Assignment 1 Chapter 1 Introduction to Web Site Design and CSS

HW Assignment 1 – Chapter 1 Introduction to Web Site Design and CSS

Read: Robin Williams’ The Non-Designer’s Design Book - Read up to page 26. The book is on Reserve in the Library. Eric Meyer on CSS – on-line Cascading Style sheets The Definitive Guide http://www.mykiss.de/index.htm Read Chapter 1 and Chapter 2 Sections 2.1 – 2.3 My CSS Notes Section 1 up through section 1g. Any one of the tutorials at htmldog, w3schools or html.net (see immediately below) on The relevant topics.

References: The first edition of the Eric Meyer’s book is available free on-line at http://www.mykiss.de/index.htm Eric Meyer is one of the great CSS gurus. The book moves fast, but it also has all the important information and no errors.

Tutorials: Both htmldog and w3schools have good tutorials to get you started. There is also a good tutorial at http://html.net/tutorials/css/

Cheat sheets: There is a fast summary of CSS1 at http://www.htmlhelp.com/reference/css/structure.html There are many references to other tutorials and cheat sheets at http://web.simmons.edu/~menzin/WebCentricResources.html#CSS_or_Cascading_Style_Sheets_

Learning CSS – important heads-up The most recent version of CSS is CSS3, but the principles haven’t changed since CSS1. To get started you need to understand the principles – and then you can push it as far as

you choose. Once you have done that you can learn about what the later versions added.

There are a huge number of properties you can set with CSS, and no one knows them all. There are a few which you will use all the time, and you will learn them naturally. Beyond that you should use a cheat sheet/reference card. These are available on-line and I have included one in this folder.

Watch: http://www.youtube.com/watch?v=9SzJt-kg_ak WARNING: This design uses old HTML, not the HTML5 doctype – tho’ it’s recent enough that it should be using HTML5. Also it moves fast and jerkily. It also fails to include the type=”text/css” attribute – which I will insist on. That said, it is a good tutorial.

Read: Look at the code for p7x and p7y in the html programs folder of Chapter 0 (Basic HTML) and make sure that it all makes sense to you. Ditto for p9a.

Do: Problem 1.1 (below) Take the hw3_yourName.html page which you made in HW Assignment 1 for Chapter 0. Re-save it as hw7_yourName.html Add an internal style sheet so that the page uses Arial font. The code for this (inside the style tags) is body {font-family: Arial} Now, using in-line styling so that the Introduction is in red Ch 1 is in blue and Verdana font Ch 2 is in Arial font For in-line styling, the color of text is set with the text property –e.g.

Read: The rest of Section 1 in my CSS notes and Sections 2A and 2B and 3A and 3B. My note on Color in this folder. Continue reading the tutorial of your choice:  If you are using the tutorial at http://html.net/tutorials/css/ you should finish Lessons 1-4, 7, and 8 now.  If you are using the tutorial at http://www.htmldog.com/guides/cssbeginner/ you should have read the first 3 CSS Beginners tutorial and the first 2 CSS Intermediate tutorial.  If you are using the tutorial at http://w3schools.com/css/default.asp you should have read the tutorials in CSS Home through the one on Backgrounds, and the tutorials on Text and Fonts.  If you are using the tutorial at http://reference.sitepoint.com/css you should have read the first two tutorials under CSS Concepts, all except the pseudo- class tutorial under CSS Selectors, and the Color & Backgrounds tutorial under CSS Properties.

Do: Problem 1.2 below. In the folder programs and stylesheets for css there are several simple pages with dreadful styling. Take the program EmbeddedStyleWithTextColor and make it look elegant and formal. You should use styling using only element selectors. Save it as hw8a_yourName.html and email it to me and yourself.

Take the program ExternalStyleWithTextColorv4 and its associated external style sheet.

Add some id’s and classes. Modify the css file so that you use both an overall style for the page and some styles for at least one id and at least one class. The page you end up with should be nice looking, but elegant. Save your css file as hw8b_yourName_Style.css

Save your html file as hw8b_yourName.html and modify its link to the renamed style sheet. Make sure that they are linking correctly; then email both of them to me and yourself.

In class we will talk more about tables, colors and fonts, and selecting on attributes. You should check how your page looks to color-blind users – either at http://www.visibone.com/colorblind/ and or from one of the Tools for Accessibility on the Resources page.

Read: My CSS Notes –Section 7 on Lists and the corresponding tutorial in any one of the 3 tutorials mentioned above. This is very straightforward, and you will not remember the details unless you use this often. What you should take away from this reading is  what the possiblities are for unordered lists (no bullet, one of the standard bullets, or an image of your choice)  what the possiblilities are for ordered lists (various numeric and alphabetic orders)  where to find the details when you want them.

I am not assigning the sections on styling links. Why?  I try at all costs to avoid anything other than the standard colors which everyone recognizes.  If I need to change colors because it is imperative to have a background color which makes my links hard to read, then I can go look it up.  The Eric Meyer book http://www.mykiss.de/index.htm includes this information in Section 2.4 More generally, styling links is done using pseudo-classes.