Announcements

What we did

We finished Web Gazette Stage 2.

We started the Resume assignment.

We learned some stuff – the slide shows are in the two posts below this one, so scroll down.

What’s coming up

Your HTML resume is due on Tuesday, Sept. 18. You’ll have a chance to upload your assignments and test them. A critique will follow at about 6:00.

After that, we’ll have quiz-like activity. I’ll put you in groups to research some questions about HTML and web design. You’ll be able to use your text, notes and the internet.

Here’s a recap of what you should have read in the text by now:

• Chapter 1
• Chapter 2
• Chapter 4
• Chapter 5
• Chapter 6: Adding Links, pages 95-113
• Chapter 11: CSS Orientation, pages 207 – 214
• Chapter 12: Formatting Text, pages 225 – 243
• Chapter 13: Colors and Background, pages 265-278

CSS review + fancy bullets, email links, and centering your page.

CSS review, Google fonts, generic elements and more!

When I was explaining Web Gazette Stage 2, I neglected to give one important piece of information. Here’s a summary:

The way your assignment is now, all the images are styled to float to the left. This css selector, as you can see, has the “float:left” declaration:
img {
margin:0 15px 15px 0;
float:left;
}

With that, all the images scoot to the left and all the non-image elements wrap around the images to the right of the images.

But we don’t want the logo to float and have the headline wrapping around it. We want both of those elements to stack up like blocks from top to bottom – that’s called “the normal flow” of html.

So we have to override that “float:left” just on the logo image.

We can do that with what’s called an inline style. You can apply CSS styles to individual elements. Here’s how you would apply the relevant style to the logo:

<img src="madisonclg_logo.png" alt="Madison College Logo" style="float:none">

That inline style overrides the more general style in the stylesheet, and it should now work.

See you tomorrow!

So! What did we find out about this week?

Some new html elements

This week we concentrated on lists, links and images. We also learned about how to invisibly comment your web page.

Need a review? Read chapters 2 and 5 in Learning Web Design.

The relevant portions in Chapter 5 are pages 69 – 77, pages 84 -87, page 92 and page 99.

Elements have attributes

Sometimes they’re really important. Take the anchor element. What’s an anchor element, such as <a href=”http://www.w3schools.com”>,without the href attribute and value? Not that useful.

Elements can be block-level or inline

Most elements are block-level (they start a new line). But a few are inline. See Learning Web Design page 84.

CSS

We added some style to our web pages using CSS. For simple instructions on doing so, see page 65 of Learning Web Design.

Looking to Week Three

Next week, we’ll finish Web Gazette Stage 2 and begin our next assignment – a simple HTML resume. So, be sure to have your resume information rounded up. We’ll start work on it Tuesday the 11th. It will be due before class on Tuesday September 18.

Everyone has a good start on the fundamentals of making web pages, to wit:

• Web pages are made of HTML – hypertext markup language documents – which are read by browsers like Firefox and Internet Explorer.
• HTML is made up of elements, such as headings and paragraphs and the html element itself.
• Most elements are made up of tag pairs – <title>Page Title</title>, for example.
• But some elements are singletons – <hr>, for example, is a single tag that makes a horizontal rule.
• HTML elements are semantic. In other words, an <h1></h1> heading is the most important heading on a page, and an <h6></h6> is the least important.

In class, we made a basic web page template for use in all our pages in this class. And we started on our first hands-on html page – Web Gazette Stage 1.

Hello students enrolled in Web Page Design!

This class is designed to help you learn the vocabulary of web  design, to get a solid background in web design fundamentals, and to create several basic web sites.

This will help you as designers because, frankly, much of print design is web-driven these days. Many marketing strategies function without  magazine ads or wrapping a bus. But they all include a website. The logos, illustrations, and layouts you conceive during your careers will benefit from knowing how those things will work on the web.

Opportunity Knocks

One of the sites you design for this class will be a portfolio where you’ll display  the other sites you create in this class.

I strongly suggest you use this opportunity to start creating a portfolio for professional use. Right this minute!

Having a website where clients and prospective employers can get a feel for your work is essential. It doesn’t have to be super-fancy. Some of the coolest professional web portfolios I’ve seen are very bare-bones — just the designer’s name and contact info, and thumbnails that link to larger examples of the work. But all the cool kids have one!

Ann Foley
[email protected]