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:

James Williamson reviews how to "use the CSS Property inspector to easily create, edit, and apply cascading style sheets (CSS) to your document."


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: adobe, Adobe Systems, Business, Dreamweaver, Google, Lynda.com, Microsoft, web design, Workspace, YouTube

Check this out:

Dreamweaver CS4 has a complicated workspace that we will explore carefully in the first few clas meetings. You may find this Youtube video from Adobe and Lynda.com very useful if you are new to Dreamweaver CS4 and feel somewhat overwhelmed by the richness of the workspace. James Williamson will help you to "Learn to work in Design view, Code view, Split view, and Vertical split view [and to] switch between workspaces optimized for designers and developers." Enjoy.


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: adobe, Adobe Systems, Business, Dreamweaver, Google, Lynda.com, Microsoft, web design, Workspace, YouTube

Check this out:

If you would like a preview of the full power of Dreamweaver DS4, this video tutorial with James Williamson is just the thing. Williamson helps you to "become familiar with the workspace and creating new documents. . . . [It also shows] how you can style text using CSS, preview and edit files, and manage files."

I must warn you, however, that this introductory Web design class (IDCC 370) will not be able to do much, if anything, with Spry, Adobe's Ajax component. If you want to pursue that, sign up for IDCC 380, Web Design II.



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: adobe, Adobe Systems, Ajax, Dreamweaver, Lynda.com, Spry, web design, Workspace, YouTube

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:

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