IDCC 370, Web Design I, William Buchholz, Bentley College, Waltham, MA 02452

Creating Pseudo Class Selectors with Dreamweaver, 02/09/10

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 "Site Map" 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 pseudo classes:

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 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:

Navigation 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: botnavbar, bottom navigation bar, class, Dreamweaver, Garrick Chow, hover state, LoVeHAte, Lynda.com, pseudo class, tutorial

posted by WJB at Tuesday, February 09, 2010 | 0 Comments | Links to this post

Greeked Text and Page Validation File, 02/08/10

Check this out:
Here is the file you will needto supply your greeked text, source note, and the validation URLs for your Web site footer: 370 Site Greeked Text, Source Note and Validation.

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: greeked text, validation, w3c.org

posted by WJB at Tuesday, February 09, 2010 | 0 Comments | Links to this post

Template: Wrapper, Header, Contents, Footer, 02/02/10

Check this out:

Now the fun begins: template creation. Exercise 2 is a guided tutorial through the creation of your site template. You will receive a handout in class stipulating all the steps necessary to create a viable template: Exercise 2: Creating Your Site Template,

Be sure that you understand conceptually the design principles depicted in the graphic below 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).

Nested model of wrapper, header, contents, and footer.

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, contents, CSS, Dreamweaver, Exercise 2, footer, header, sibling, template, wrapper

posted by WJB at Tuesday, February 02, 2010 | 0 Comments | Links to this post

Cascading Style Rules, an Introduction, 02/02/10

Check this out:

The 'Cascading Style Sheets' PowerPoint tutorial

In 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

posted by WJB at Tuesday, February 02, 2010 | 0 Comments | Links to this post

Assignment One and Dreamweaver in the Lab 01/28/10

Check this out:
Just thought you might like to know you could be working on ex1-myweb.htm (exercise 1) without using Dreamweaver. The discussion content can be written in Word and then ported over into your Web page. I would encourage you to write as much of that discussion material as you can now.

Also, some of you were wondering about the CIS lab hours (Smith 212). You can get the latest updates on the hours by visiting the CIS lab link for their hours. Note: the hours currently posted are the holiday hours. A new schedule should be appearing shortly.

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: CIS Lab Hours, Exercise 1, Word doc

posted by WJB at Thursday, January 28, 2010 | 0 Comments | Links to this post

Web Site Directory Structure and Exercise One, 10/27/10

Check this out: Web Site Directory Structure Tutorial

We will work through this tutorial carefully in class. The thumbnail image to the left links directly to the PowerPoint Web tutorial (for your convenience).

The information in this tutorial is vital. Understanding this and undertaking the suggested "best practices" will save you a lot of grief as we proceed through the course. Be sure to ask questions that may occur to you as you study the slides in this tutorial. I have some real horror stories to share with you from students who did not take directory structures and Web backup seriously enough.

You may want to print out the tutorial (Web Site Directory PDF). That way you'll have the slides and my discussion notes right in front of you . . . and you can make any additional notes you might need right on the printout.

You should also use the information in this tutorial to flesh out your discussion in exercise 1 on directory structure. I'll show you in class a quick and easy way to access a particular slide and its notes as well as a method on how to grab the slide URL, rather than laboriously typing it into 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: best practices, directory, PowerPoint, Web site directory

posted by WJB at Monday, January 25, 2010 | 0 Comments | Links to this post

Exercise 1c: Creating Your Prototype Site, 01/25/10

Check this out:

With any luck, today we will finish Exercise 1, creating the shell of your world class IDCC 370 professional portfolio Web site.

This final part of the exercise will involve creating the actual Exercise 1 page for your exercises portion of the Web site. You will place two graphics on the page: the Web Directory Model from Assignment 1 and the Web site hierarchy graphic displayed in this announcement. Finally, you will document this whole procedure, being very careful to cite your sources correctly. Here is an Adobe PDF of the in-class exercise entitled "Exercise 1c: Creating Your Prototype Site."

An element of the documentation of Exercise 1 involves discussing the hierarchy of your IDCC 370 Web site. Here is the graphic representation of the top-tier gateway pages to your site:

In class you will download this file and insert it in the appropriate place in your documentation for Exercise 1. You will then link the individual page icons with their respective resources.

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: documentation, free Web graphics, graphic, hierarchy, model, site map

posted by WJB at Monday, January 25, 2010 | 0 Comments | Links to this post

Exercise 1b: Creating Your Prototype Site, 01/25/10

Check this out:

Next class we will continue creating the shell of your world class IDCC 370 professional portfolio Web site.

This next phase will involve setting up the Web itself: hyperlinking all the pages with each other, and testing in the browser to make sure the Web is fully functional. I think you will find this exercise both informative and entertaining. Here is an Adobe PDF of the in-class exercise entitled "Exercise 1b: Creating Your Prototype Site."

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: hyperlink, portfolio, prototype, Web

posted by WJB at Monday, January 25, 2010 | 0 Comments | Links to this post

Creating Your Prototype Site, 01/20/10

Check this out:

Creating your Web for IDCC 370 will involve carefully constructing a root folder, sub-folders, various Web pages (or "files" in Dreamweaver-speak) deposited in their correct folders, and a "start" or "home" page.

With any luck, we will finish this entire exercise in class, so you will not have to worry about setting up phase one of your site this next week. Here is an Adobe PDF of the in-class exercise entitled "Exercise 1a: Creating Your Prototype site."

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: prototype, site setup

posted by WJB at Wednesday, January 20, 2010 | 0 Comments | Links to this post

Purchase of Dreamweaver CS4, 01/20/10

Check this out:

Bentley U. student purchase of Dreamweaver CS4

I know that a good number of you are interested in purchasing Dreamweaver CS4. Here are the instructions for the licensed student purchase through Bentley U. Note the student price is $99, plus shipping and handling. This price cannot be beat. I highly recommend that you take advantage of this if you can.

It's very important that you purchase the correct platform (Windows or Mac), as this software is not returnable and not refundable for any reason.

Windows Platform License
https://owa.bentley.edu/owa/redir.aspx?C=dcc911fc496548bb9cecf2dceca2aecb&URL=http%3a%2f%2fwww.cdwg.com%2fshop%2fproducts%2fdefault.aspx%3fEDC%3d1603103 (add to cart)

You must also add 1603100 to the cart for the media (from the shopping cart use the quick cart function)

Note: If you have trouble accessing this page, copy the entire URL into your Web browser address bar and press enter.

Macintosh Platform License
https://owa.bentley.edu/owa/redir.aspx?C=dcc911fc496548bb9cecf2dceca2aecb&URL=http%3a%2f%2fwww.cdwg.com%2fshop%2fproducts%2fdefault.aspxEDC%3d1603099 (add to cart)

You must also add 1603096 to the cart for the media (from the shopping cart use the quick cart function)

Your order total including media should be $115.69 plus tax and shipping, and your order should arrive within 2-3 weeks.

If you have any problems, email https://owa.bentley.edu/owa/redir.aspx?C=dcc911fc496548bb9cecf2dceca2aecb&URL=mailto%3astudentsales%40cdwg.com or contact Bentley's sales rep, Lisa West-Woodard, at https://owa.bentley.edu/owa/redir.aspx?C=dcc911fc496548bb9cecf2dceca2aecb&URL=mailto%3aLisawes%40cdw.com

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: adobe, Dreamweaver, Windows platform

posted by WJB at Wednesday, January 20, 2010 | 0 Comments | Links to this post

Dreamweaver CS4 Tutorial: Views and Workspaces, 01/20/10

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

posted by WJB at Wednesday, January 20, 2010 | 0 Comments | Links to this post

Setting Preferences in Dreamweaver CS4, 01/20/10

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

posted by WJB at Wednesday, January 20, 2010 | 0 Comments | Links to this post

Defining, Exporting, and Importing Your 370 Site, 09/20/10

Check this out:

Making sure that your Web is in a self-contained, portable, folder is critically important when using Dreamweaver.

Because the machines in Smith 110 are reimaged every midnight, you will need to import your Web each class period. This Web importing is an easy process, once you understand the reasoning for it and perform the import/export operation a few times.

Here is an Adobe PDF of the tutorial entitled "Defining, Exporting, and Importing Your 370 Site. 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, export, import, ste file

posted by WJB at Wednesday, January 20, 2010 | 0 Comments | Links to this post

The "Social Media Revolution," 01/17/10

Check this out:

If you want to get an interesting dose of perspective, view this video on the "Social Media Revolution":

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: internet, social media, Web

posted by WJB at Sunday, January 17, 2010 | 0 Comments | Links to this post

Welcome to IDCC 370, Web Design I, 01/16/10

Check this out:

A revolutionary development in communication, the World Wide Web offers unprecedented access to mass audiences. This introductory course focuses on the principles and practices necessary to create effective pages for the Web.

You will receive instruction in writing hypertext documents, designing Web pages, authoring well-formed XHTML, CSS (Cascading Style Sheets), and meeting a variety of technical challenges.

The course focuses on purpose, scope, and audience considerations in page design; writing informative and persuasive on-line documents; designing coherent, portable, navigable, and interactive pages; and employing the fundamental principles of color theory, typography, layout and graphic design for the Web. This little model Web site will give you some idea of what we are up to.

Combining lab, lecture, and discussion, you will learn the best practices of electronic design to create your own interactive Web sites. Be sure to check into the class Web site every day for announcements.

A Bentley Web designer. Source: Microsoft Clipart, file j0182543,jpg. (n.d.). Retrieved January 13, 2007.

Here is a picture of a Web designer. And this is what you want to turn into? I look forward to our journey together into the wonderful world of Web 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.

Labels: Cascading Style Sheets, CSS, design, graphic design, layout, Semantic Web, spider, typography, Web designer, Web site directory, World Wide Web, XHTML

posted by WJB at Saturday, January 16, 2010 | 0 Comments | Links to this post

IDCC 370: Web Design I Spring 2010

IDCC 370 Announcements

Creating Pseudo Class Selectors with Dreamweaver, 02/09/10

Greeked Text and Page Validation File, 02/08/10

Template: Wrapper, Header, Contents, Footer, 02/02/10

Cascading Style Rules, an Introduction, 02/02/10

Assignment One and Dreamweaver in the Lab 01/28/10

Web Site Directory Structure and Exercise One, 10/27/10

Exercise 1c: Creating Your Prototype Site, 01/25/10

Exercise 1b: Creating Your Prototype Site, 01/25/10

Creating Your Prototype Site, 01/20/10

Purchase of Dreamweaver CS4, 01/20/10

Dreamweaver CS4 Tutorial: Views and Workspaces, 01/20/10

Setting Preferences in Dreamweaver CS4, 01/20/10

Defining, Exporting, and Importing Your 370 Site, 09/20/10

The "Social Media Revolution," 01/17/10

Welcome to IDCC 370, Web Design I, 01/16/10