IDCC 370: Web Design I Fall 2009

Labels: botnavbar, bottom navigation bar, class, Dreamweaver, Garrick Chow, hover state, LoVeHAte, Lynda.com, pseudo class, tutorial

Check this out:

In the final class this week, we will explore more carefully the ins and outs of cascading style rules. It is very important to create rules with the proper syntax and punctuation. The "Cascading Style Sheets" PowerPoint tutorial will serve as our introduction to the formal aspects of CSS (here is a printed PDF version of the tutorial with notes).

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Cascading Style Sheets, CSS, PowerPoint, punctuation, style rules, syntax, tutorial

Check this out:

As you know, editing your preferences is very important whenever you use Dreamweaver on the workstations in Smith 110. Here is an Adobe PDF of the tutorial entitled "Setting Preferences in Dreamweaver CS4." You may find it useful on occasion to review this document--at least until the entire operation becomes second nature to you.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Dreamweaver, PDF, preferences, tutorial

Check this out:

Next, we will be working with our site templates to visually set the signature and the bottom navigation bar. The three views of the nav bar and signature (at right; click to enlarge) show the progression from unstyled to completely styled (note: the exercises link is in the hover state, bottom graphic).

To create this set of "faux buttons" in css, you will be working with the four css pseudoclasses:

1. a:link
2. a:visited
3. a:hover
4. a:active

Placing these pseudoclasses in the correct order in your css file is critically important. An easy way to remember them is this acronym: LoVeHAte (LinkVistedHoverActive).

To make these buttons work, you will create a style class .botnavbar and attach it to your bottom navigation paragraph tag. I think you will find this whole styling activity to be fun and an instructive introduction to your next challenge: the top navigation button bar:

Garrick Chow, from Lynda.com, has a nice review on Creating pseudo class selectors with Dreamweaver. Feel free to watch this tutorial to reinforce what we will learn in class about css pseudoclasses and design.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Dreamweaver, Garrick Chow, Lynda.com, pseudo class, tutorial

Check this out:

In undertaking exercise two, Web site template construction, you will be tackling some rather sophisticated design approaches that combine XHTML and CSS (Cascading Style Sheets). To gain a better understanding of the standards involved, please review the first seven slides in the PowerPoint tutorial on Cascading Style Sheets.

Also remember that when you create content for the Web in Dreamweaver, you must never use the alignment icons on the properties bar, as depicted (and crossed out) here:

These icons insert deprecated HTML attributes into your page markup (align="left"; align="right"; align="center"; align="justify"). Instead of these deprecated attributes, use CSS in creating your Web site according to standards.

When we create our site template, we are establishing the layout and design that will be used ultimately to generate all the pages of the site. Note that in creating this exercise, you supplied paragraphs of text in Latin. In the design business, this text is known as "greeked." (Click on this image to find out Microsoft's explanation of "Lorem ipsum.")

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: alignment icons, attribute, Cascading Style Sheets, CSS, deprecation, Dreamweaver, greeked text, layout, template, tutorial

Check this out:

In the final class this week, we will explore more carefully the ins and outs of cascading style rules. It is very important to create rules with the proper syntax and punctuation. The "Cascading Style Sheets" PowerPoint tutorial will serve as our introduction to the formal aspects of CSS (here is a printed PDF version of the tutorial with notes).

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Cascading Style Sheets, CSS, PowerPoint, punctuation, style rules, syntax, tutorial

Check this out:

Next, we will be working with our site templates to visually set the signature and the bottom navigation bar. The three views of the nav bar and signature (at right; click to enlarge) show the progression from unstyled to completely styled (note: the exercises link is in the hover state, bottom graphic).

To create this set of "faux buttons" in css, you will be working with the four css pseudoclasses:

1. a:link
2. a:visited
3. a:hover
4. a:active

Placing these pseudoclasses in the correct order in your css file is critically important. An easy way to remember them is this acronym: LoVeHAte (LinkVistedHoverActive).

To make these buttons work, you will create a style class .botnavbar and attach it to your bottom navigation paragraph tag. I think you will find this whole styling activity to be fun and an instructive introduction to your next challenge: the top navigation button bar:

Garrick Chow, from Lynda.com, has a nice review on Creating pseudo class selectors with Dreamweaver. Feel free to watch this tutorial to reinforce what we will learn in class about css pseudoclasses and design.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Dreamweaver, Garrick Chow, Lynda.com, pseudo class, tutorial

Check this out:

In the final class this week, we will explore more carefully the ins and outs of cascading style rules. It is very important to create rules with the proper syntax and punctuation. The "Cascading Style Sheets" PowerPoint tutorial will serve as our introduction to the formal aspects of CSS (here is a printed PDF version of the tutorial with notes).

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Cascading Style Sheets, CSS, PowerPoint, punctuation, style rules, syntax, tutorial