IDCC 370: Web Design I   Spring 2008

Check this out:

Next class, 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 css pseudoclasses: a:link; a:visited; a:hover; 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 <p> 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 (below; click to enlarge):
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:

As I have mentioned in class numerous times, you will need to become familiar with the css box model, as that forms the conceptual and technical underpinning of all layout, navigation, and design elements using Cascading Style Sheets (CSS).

Note this figure from Andy Budd. You can see from this set of "boxes" how the container metaphor works and how white space can be introduced into page design. In class, we will continually put this box model into action, as we work throughout the semester with margins, borders, and padding. Of course, all of this guides the shape of the ultimate container: our "wrapper" div. I think you will enjoy the design power that css and its box model give you.

Next class, we will continue to work on our template, and as we do, you will see the large number of ways that the CSS box model plays a major role, in layout, design, and ultimately navigation.

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: Andy Budd, Cascading Style Sheets, CSS box model, design, Hakon Wium Lie, internal navigation, layout, template

Check this out:

Tuesday, September 25, be prepared to take a quiz on the materials we have covered so far in class, especially the first seven slides of the PowerPoint tutorial on Cascading Style Sheets and the actual implementation of css using Dreamweaver.

Also, be sure that you understand conceptually the design principles depicted to the right regarding the wrapper container that holds three other containing elements for your Web template: header, contents, and footer (click on the graphic to see an enlarged version).

Proper nesting of these containers is critically important in designing the structure of your template. Note that the wrapper div contains the siblings: header, contents, and footer. It may seem strange that the contents div is at the same relational level as the header and footer divs, but think of these containers as all needing to be separate (but not equal) and contained within a parent element.

The commented markup is inserted to clarify the relationships of the divs, identified by their particular unique IDs (click on the graphic at left to see an enlarged version).

Note in the markup itself how the sibling divs (header, contents, and footer) are contained in the parent div (wrapper), which is contained in the ultimate parent, the <body> tag. This containment exhibits proper nesting of the divs, without which your Web template would not function properly.

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: container, CSS, Dreamweaver, sibling, wrapper

Check this out:

In undertaking exercise two, Web site template construction, you will tackle 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, you will recall, 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 will need to supply paragraphs of text. In the design business, this text is known as "greeked." (Click on this image to find out Microsoft's explanation of "Lorem ipsum.") Here is the "greeked" text you should use when pouring content into a template:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Copy the paragraph above, and insert it into your template at appropriate points. Duplicate and expand it where necessary.

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:

For exercise one, I am asking your to refer to the PowerPoint tutorial on Web Site Directory in your discussion. The correct APA (American Psychological Association) format is important for all our documentation activities this semester. Exercise 1c, Sourcing Your PowerPoint Slides, is a pdf file that provides examples of two types of APA documentation directly related to PowerPoint slides. Be sure to follow these instructions to the letter.

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: American Psychological Association, APA, documentation, pdf, sourcing, Web site directory

Labels: Cascading Style Sheets, child, CSS, CSS box model, form elements, hierarchy, Lee Underwood, parent-child relationship, parent-child-sibling, relationship, sibling, sibling relationship, XHTML

Check this out:

It's here and ready for you to pick up. As a Bentley student, you can get your very own copy of Studio 8, a $999 value for $146 plus tax. Just proceed to the front desk of the Academic Technology Center in the Adamian Academic Center, Room 168. The office is open Monday-Friday, 8:30 to 4:30, but you might want to phone ahead to make sure that someone is there to help you (781/891-3421).

As there is a limited number of these packages available, I would highly recommend that you pick yours up as soon as possible.

Just tell Laura Ford or her assistant that you are there to pick up your copy of Studio 8. Be sure to provide your student ID card so the software can be charged to your account. That's all there is to it.

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.

Labels: Academic Technology Center, Dreamweaver, Laura Ford, Studio 8

Check this out:

Remember, when using Dreamweaver to create a site and work on its pages throughout the semester, you must always design and develop inside a Dreamweaver configured environment. Creating and accessing your site folders and pages in Dreamweaver allows the program to track the necessary metadata that updates the links to your Web assets. Remember: a Web is nothing more than a collection of linked assets.

As you know, we have defined, exported, and imported your IDCC 370 Web in class to give you the tools necessary to access your site easily using all of Dreamweaver's capabilities. Here is some site setup documentation (this pdf file opens in a new window) that guides you through the process. Print this out if you think you need to refer to it often.

You may also find this Youtube tutorial from Tutbid.com to be a good review: Dreamweaver tutorial! Define Local Root/Site Folder.

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.

Labels: Dreamweaver, metadata, site setup, tutorial