Web.simmons.edu



HW Assignment 1 – Chapter 1- Introduction to Web Site Design and CSSRead: By now you have read Robin Williams’ The Non-Designer’s Design Book (The book is on the ACM O'Reilly site )I like the 3rd edition best, but the 4th edition is also fine. Briefly review the first two chapters. A source which I am not assinging/ A reference: Eric Meyer on CSS: Cascading Style sheets The Definitive Guide This book is on the ACM OReilly site . Meyer has written a very sophisticated book for professionals. He is a big-deal CSS guru, but reading his book takes work, especially for people new to CSS. On the other hand, if you need a reference on some subtle point, this is the place to go.My CSS Notes Section 1 up through section 1gAny one of the tutorials at htmldog, w3schools or (see immediately below) on the relevant topics.References: The most recent edition of the Eric Meyer’s book is available free at the ACM Site. Eric Meyer is one of the great CSS gurus, as noted above.Tutorials: Both htmldog and w3schools have good tutorials to get you started, but the htmldog one now requires installing extensions to your browser. There is also a good tutorial at If you have used CSS a little, then you might prefer the tutorial at Tutorialspoint At Slide Decks 203 and 204 cover this material.Cheat sheets:There is a fast summary of CSS1 at There are many references to other tutorials and cheat sheets at Learning CSS – important heads-upThe most recent version of CSS is CSS3, but the principles haven’t changed since CSS1. CSS3 has been around long enough that most people just call it CSS. To get started you need to understand the principles – and then you can push it as far as you choose. 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. In this chapter we will focus on basic CSS: – selectors, setting properties for fonts, tables, etc. and an introduction to the very important box model. More advanced work on positioning elements and on responsive web design using CSS grid will be found in the chapter on Responsive Web Design. Watch: 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.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 fontCh 2 is in Arial fontFor in-line styling, the color of text is set with the text property –e.g.<h2 style=”color:black”>Save this file and email it to me and yourself. 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 you should finish Lessons 1-4, 7, and 8 now.If you are using the tutorial at you should have read the first 3 CSS Beginners tutorial and the first 2 CSS Intermediate tutorial.If you are using the tutorial at 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 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.If you are using the tutorial at you should read through the one on Text.If you are using the tutorial at look at slide decks 205-01 through 205-03 but turn to one of the other tutorials for information on color and fonts. 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. (That is, no in-line styling.) Save it as hw8a_yourName.html and email it to 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 yourself. In class we will talk more about tables, colors and fonts, and selecting on attributes.(Details are at )You should check how your page looks to color-blind users – either at and or from one of the Tools for Accessibility on the Resources page. Accessibility is a very important issue. Read: My CSS Notes –Section 7 on Lists and the corresponding tutorial in any one of the 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 includes this information; an easier introduction is at Here we are actually, styling links using pseudo-classes, as further described at Do: You should be able to write down the selectors for styling:a class, an id, a tag (such as all h2 headings), styling common to several elements (such as all ul's and ol's)styling for one element nested inside another (such as an ol nested inside another ol)You want to do this enough so that you can read and write these without referirng to a cheatsheet or reference site. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download