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

Floating Callouts and Graphics, 11/16/09

Check this out:

Our focus in class will be on creating a number of CSS rules that allow you to float callouts and graphics left and right. The float, as many of you have learned already, is an essential design concept in CSS. Shaking hands.

Using your exercise six cleanly scrubbed, XHTML-ized, Semantic Web-proofed, well-formed and valid text, Open Communication Climate, you will plant two callouts and two graphics, both left and right, making necessary adjustments to the graphics and text to improve design for readability and overall aesthetics. You will want to pay special attention to the relationship of the graphics, callouts, paragraph size, and headings: a full-bore design experience is about to be yours.

The graphics above left and right are the ones you will use for this exercise. I will provide written instructions and will work through the design and rule-writing with you in class. I think you will find working with the float to be a lot of fun.

Exercise 6a, 6b, 6c.

While you will be receiveing printouts of the exercise in class, you may want to have electronic access to them in pdf form:

At the bottom of your newly designed page, you will add this source note after the Buchholz source note:

Microsoft Office Clip Art Photographs: j0406569.jpg (Shaking hands) and j0289517.jpg (2 women in office). (n.d.). Microsoft Office 2003. Redmond, WA: Microsoft Corporation.

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: CSS, Float, Graphics, Microsoft Clip Art, Open Communication Climate, scrubbed, Semantic Web, source graphic, spell-check

posted by WJB at Monday, November 16, 2009 | 0 Comments | Links to this post

Optimizing a Word Doc for XHTML 11/11/09

Check this out:

Next class, we will begin our assignment three design project using this Word doc about open communication in the workplace. In class, I will provide specific directions on how to handle this document, which will become exercise 6. The basic idea is to show you how to import a Word doc. file and then to scrub up the XHTML in preparation for named fragments and style rules application (readied for the Semantic Web). This will be practice for assignment three, due no later than 4:30 p.m., December 14 (day) and December 16 (eve).

Here is a character set code that will be important in this assignment: iso-8859-1. I will explain why this is important and how to use it as you move toward styling your own essay for assignment three. Don't forget where this code is.

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: Assignment 3, iso-8859-1, named fragment, Open Communication Climate, scrubbed, Semantic Web, Word doc

posted by WJB at Wednesday, November 11, 2009 | 0 Comments | Links to this post

Commenting CSS and Style Rules Order, 11/11/09

Check this out:

You will spend a good deal of time in this class making sure that your css rules are properly ordered. As the 370.css file continues to grow (we'll be adding a good number of rules in the next few weeks), you will want to be able to traverse the rules easily. Thus, in addition to good structure, you will want to add some descriptive sign posts along the way.

In setting up your signposts, you will need to comment your CSS style rules in the hierarchical chunks I keep alluding to in class. This css commenting model (pdf) will give you an idea of the way I have commented my 370.css thus far. Feel free to use this document as a reference point in your own commenting of 370.css for Assignment One. I will address any concerns you may have next class.

If you are interested in some further commenting ideas, check out "Brownspank, a standards-conscious Web Designer for Brown Battery Studios," who has posted an interesting article on CSS comments: Maximize CSS Comment Usage. Take a look at this for some good commenting ideas.

The graphic below illustrates the order (hierarchy) of your CSS rules in 370.css (click image to enlarge):

Remember that your 370.css must not only be in the correct hierarchy but also thoroughly and intelligently commented.

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: Assignment One, Assignment Two, Brown Battery Studios, Brownspank, commenting, CSS, w3c.org

posted by WJB at Wednesday, November 11, 2009 | 1 Comments | Links to this post

Adobe Dreamweaver CS4 30-day Free Trial Download 11/11/09

Check this out:

Keeping in mind that the final assignment is due December 14 (day) or December 16 (eve), you may want to take advantage of the 30-day free trial download of Dreamweaver CS4. Time this carefully so that you will be able to use the free trial through the Assignment Three due date.

As the product marketers at Adobe say about Dreamweaver CS4:

"Design, develop, and maintain standards-based Web sites and applications. Build world-class Web sites and applications with one of the industry's leading Web authoring tools.

Adobe Dreamweaver CS4 30-day free trial download.

Adobe® Dreamweaver® CS4 software is ideal for Web designers, Web developers, and visual designers."

You can easily download a free 30-day trial version. When you get to the Adobe download page, mouse over the DW icon (third from the top in the second column), and you will see the graphic above. Note that you can buy, try, or learn more about DW. Click on "Try". You will then be taken to a screen that requires you to create an account if you are new to Adobe; if you already have an account with Adobe, just sign in. Let me know if you have any problems with this procedure.

Happy designing in the comfort of your own home. :)

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: CS4, download, Dreamweaver, free 30-day trial, web design

posted by WJB at Wednesday, November 11, 2009 | 0 Comments | Links to this post

Course Withdrawal Date, Friday, November 13, 11/11/09

Check this out:
Here is a message for you and me from Dean Ellis, Office of Academic Services:

"Please be aware that the final deadline for students to withdraw from a full semester Spring course is Friday, November 13. Withdraw from the course by November 13.

Withdraw from the course by November 13.

The only exceptions considered are for late occurring medical or family crises. Poor performance in a course is not considered an extenuating circumstance for late withdrawal. Therefore, I encourage you to talk with students now if you fear they are in danger of failing and should consider withdrawal."

You know where your grade and absences put you at this point in the semester. If you think you are in danger of receiving a bad grade for the course--one that will seriously affect your GPA--make an appointment with me to discuss your progress in the course. Remember that the final two assignments are more challenging than the first; you will need to devote a good deal of time to them.

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: course withdrawal, GPA, Jane Ellis, withdrawal

posted by WJB at Wednesday, November 11, 2009 | 0 Comments | Links to this post

Banners and Buttons, 11/09/09

Check this out:

It's time now to put the finishing touches on your template and top-tier pages. With the banner in place (Exercise Four in pdf), you are now ready to move on to the top-tier navigation bar: Exercise Five (in pdf). This "nav bar," in conjunction with your banner and CSS colors for backgrounds and text tags, will complete the "look and feel" of your site. You will soon have your professional brand.

I think you will be amazed at how attractive your site will be when the banner and buttons are activated on all your pages. If you click on the screenshot to the left, you will be able to see some of the buttons and banner detail in the template page for exercise 5. With any luck, we will be able to complete the lion's share of this exercise in class. At any rate, you will receive a sheet of directions that will allow you to work on your own outside of class.

For the next two classes or so, you should bring your Assignment One, if you have not finished correcting it yet, and any exercises that you may need to complete or polish up. If there is time in class, you may be able to tackle some of this material. Remember, Assignment Two with the annotated copy of Assignment One, is due Wednesday/Thursday, November 18/19, at the beginning of class.

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: Assignment One, Assignment Two, banner, buttons, CSS, css buttons

posted by WJB at Monday, November 09, 2009 | 0 Comments | Links to this post

Assignment One Corrections, 11/03/09

Check this out:

As a group, you created some wonderful Web sites for Assignment One. Congratulations to you all. I want, however, to highlight some areas to watch out for when creating a Web site and in making your corrections on the assignment. Here goes:

Writing and proofreading: The Web is both a graphic and a written medium. In Web design, you must be very careful on both fronts, as you are publishing to the world. Make sure that your writing is concise and correct. Watch your phrasing (how you say something), punctuation, spelling, and proofreading (shift/F7 in Dreamweaver results in the spellcheck utility, pictured at right). Good writing is critical in the design of Web sites. If your site is riddled with errors, your credibility and professionalism plummet. People will not trust the information you are trying to convey. A site that is untrustworthy is just taking up cyberspace. Don't let that be you.
ALT and title: Be sure that all graphics contain Alternative Text (ALT) and the title attribute. This becomes very important as you construct your pages for Assignments Two and Three.
Contrast: In Web design, when setting text against a background color or layer, you must be very careful to create high contrast, otherwise the text will not be visible. The extreme, as I've mentioned, is black text on a black background or white text on white. It just doesn't work. In some of your pages, you put dark text against a dark background: no go. Note too that when you use a black page background, your visitors will have a difficult time reading blue and maroon hyperlinks. You need to change the color of the background, hyperlink, or text.
Vertical spacing: Some of you have too much space vertically—usually extra enters. Kill them.
Page titles: Remember that the <title> tag is your visitor's (and your) best friend for all the reasons discussed in class. Make sure that all your tags are structured so that the key identifying information for the page itself comes first, followed by key site identification information. Here is the ideal model: <title>Biography, William Buchholz, IDCC 370, Fall'09, Bentley University, Waltham, MA 02452</title> Another: <title>Exercise 5 – The Finished Template, William Buchholz, IDCC 370, Fall'09, Bentley University, Waltham, MA 02452</title> You get the idea.
Click here: Avoid this. Remember, you should always make in-line hyperlinks descriptive of their destination. Rather than “William Buchholz resume, click here,” you should set the link descriptively: “William Buchholz resume.” Creating descriptive links helps your site visitors and, of course, contributes to more effective SEO.
Quoting and paraphrasing: Some of you are still confused about how to handle quotes and paraphrases. The easiest rule of thumb is this: if you use three words or more in a row from your source, be sure to put quotations around this material. You can intersperse your commentary with quotes, but be very careful about this. And remember to refer to the handout for Exercise One (1c: CreatingYour Prototype Site) that spelled out exactly how to create your documentation both in the text and in the sources.

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: "click here", alt, Assignment One, background, contrast, meta tags, proofreading, shift f7, sources, spacing, spell-check, writing

posted by WJB at Tuesday, November 03, 2009 | 0 Comments | Links to this post

Sites for Free Graphics, 10/27/09

Check this out:

In thinking of the graphic signature (look and feel) of your site as communicated effectively through the banner, buttons, and color palette, you may need to do a little more exploration for graphics.

Here are three sites that offer a wonderful selection of free photographs (note their fair use policies as published on their sites):

In class you will be able to explore some of these sites to work on your banner as we begin the next exercise. Remember, you will also be experimenting with graphics effects using other free materials from the Microsoft clip art photo collection, brownielocks (http://www.brownielocks.com/backgrounds.html), and GRSites (http://www.grsites.com/archive/textures/).

Note: When you start to download free material, remember to save the graphics in your masters subfolder of the images folder. Be sure to name any file you download with the site name prior to the graphic filename; for example, brownielocks-dribblessplats.jpg. Then, as you acquire graphics from brownielocks and other vendors, the files will be together in the masters subfolder. Remember, you need to credit all your graphics sources and provide links to the graphic (or at least to the site if you cannot link to the graphic). It is very important that you keep all of these files straight, so take care.

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: color palette, design, free Web graphics, graphic design, Graphics

posted by WJB at Tuesday, October 27, 2009 | 0 Comments | Links to this post

Raster and Vector Graphics 10/21/09

Check this out:

We are now ready to venture into the marvelous world of Web graphics: raster (aka bitmap) and vector (using math, geometrical primitives). Exercise 3 introduces you to editing and layout of the major raster graphic format on the Web: jpg (or jpeg). You will download, source, edit, and layout a number of graphics in the next class meeting and for the remainder of the course.

As an introduction to graphics, we will review the tutorial "Web Graphics: Vector and Raster," also available in print form as a pdf file.

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: Exercise 3, free Web graphics, graphic design, Graphics, raster, vector, Web assets

posted by WJB at Wednesday, October 21, 2009 | 0 Comments | Links to this post

Site Design and Graphics, 10/21/09

Check this out:

In preparation for your upcoming assignments, you should be scouting the Web for sites whose design you admire. You will want to pay special attention to the color palette, layout, and design of the banner and navigation areas of the sites. Take your time to explore the sites in the following list:

Make some mental notes (or better yet, jot down some ideas) that you can incorporate into your own site as we move into the final phases of designing your sites.

You will also want to visit free graphics sites for images you can use in your design. In class, and in exercise 4, you will be experimenting with graphics effects using materials from the Microsoft clip art photo collection, brownielocks (http://www.brownielocks.com/backgrounds.html), and GRSites (http://www.grsites.com/archive/textures/).

Free photographs at http://www.free-stockphotos.com/.

When you start to download free material, remember to save the graphics in your masters subfolder of the images folder. Be sure to name any file you download with the site name prior to the graphic filename; for example, brownielocks-dribblessplats.jpg. Then, as you acquire graphics from brownielocks and other vendors, the files will be together in the masters subfolder. Remember, you need to credit all your graphics sources and provide links to the graphic (or at least to the site if you cannot link to the graphic). It is very important that you keep all of these files straight, so take care.

In selecting the graphics sites and downloading your material, you should be thinking of the whole look and feel of your site: colors, graphics, and page design. Do you want your site to be light and airy? Dark and brooding? Serious and professional? Wild and crazy? Subdued and understated? Adventuresome? Cute? Tough? Nationalistic (e.g., Irish, Italian, American)?

We will spend some time in class working through the technical aspects of design, so you should have plenty of opportunity to experiment. But do not save this work for class alone. Work on your design outside as well.

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: brownielocks, color palette, design, free Web graphics, Googling, graphic design, Graphics, GRSites, layout, optimize graphics, source graphic, Web assets

posted by WJB at Wednesday, October 21, 2009 | 0 Comments | Links to this post

Using Dreamweaver to FTP Your Site, 10/14/09

Angel and Devil emoticon available at: http://www.smiling-faces.com/php/moresmilies.php?lan=en&subpageid=4&char=A&offset=0&windowsize=25

Check this out:

We'll spend time in class reviewing your template; then we will pour the contents of all your top-tier pages and exercise 1 into the template. After we pour all your top-tier pages into the template, you will need to title all your pages correctly; for example:

William Buchholz, IDCC 370, Fall ’09, Bentley University, Waltham, MA 02452
About William Buchholz, IDCC 370, Fall ’09, Bentley University, Waltham, MA 02452
Biography of William Buchholz, IDCC 370, Fall ’09, Bentley University, Waltham, MA 02452
Ontology Essay, William Buchholz, IDCC 370, Fall ’09, Bentley University, Waltham, MA 02452

After you supply the correct meta tags to your pages, your Web site shells are ready. Take a deep breath. You've accomplished a great deal so far. But now we are about to embark on the FTP journey.

First, remember that your account has already been created on the IDCC server. Now you need to hook to that server through Dreamweaver. Dreamweaver's FTP utility can be a little confusing the first or second time through, so I hope this advice will help.

Make sure the latest copy of your Web site is on the c:/ drive (most likely a drag and drop from your m:/ drive) to a subdirectory with your last name. Example: C:\Documents and Settings\wbuchholz\My Documents\My Web Sites\370\.

Once you're sure you have the latest version of your Web on the c:\ drive, invoke the site management wizard to edit your specs. I'll walk you through the steps in the wizard, so don't move too quickly. Wait for the whole class to go through this.

The key screen in the wizard is the one where you actually hook to the server and your folder on the server. Here is a screen shot to use as a model (click to enlarge for easier viewing):

If you need some help with this whole process in class, just raise your hand. If you run into trouble at home, just e-mail me at wbuchholz@bentley.edu for more advice — or wait until the next class, and we'll quickly take it from there. Please feel free to comment on this post (nothing dirty, though) and I will respond for all to see.

Labels: Bentley, Dreamweaver, FTP, site setup, Web assets, Web site directory, World Wide Web

posted by WJB at Wednesday, October 14, 2009 | 0 Comments | Links to this post

CIS Lab Hours, 10/08/09

Check this out:

With the due date of Assignment One bearing down on us, you will probably want to spend some time with Dreamweaver in the CIS lab, Smith 212. The hours are posted on the CIS Web site, which you can visit by clicking the hours image to the right. You may want to just call ahead to make sure the lab is open during the posted time you wish to work on your material.

When working in the lab, save your material early and often. Make sure occasionally to save it to your M:drive and USB flash drive, especially if you are working after 11:00 p.m., as the computers in the lab will be refreshed near midnight. You usually get a 15-minute warning before the computer shuts down, but there have been accidents in the past.

Let me know if you have any difficulty accessing the lab during the hours posted.

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: Assignment One, CIS Lab Hours, Dreamweaver

posted by WJB at Thursday, October 08, 2009 | 0 Comments | Links to this post

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

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, October 06, 2009 | 0 Comments | Links to this post

Dreamweaver Tutorial: Styling Text in the CSS Property Inspector, 09/30/09

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

posted by WJB at Wednesday, September 30, 2009 | 0 Comments | Links to this post

Greeked Text and Page Validation File, 09/30/09

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 Wednesday, September 30, 2009 | 0 Comments | Links to this post

Template: Wrapper, Header, Contents, Footer, 09/28/09

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 Monday, September 28, 2009 | 0 Comments | Links to this post

Cascading Style Rules, an Introduction, 09/22/09

Check this out:

The 'Cascading Style Sheets' PowerPoint tutorial

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

posted by WJB at Tuesday, September 22, 2009 | 0 Comments | Links to this post

The XHTML Hierarchy: Thinking Inside the Box, 09/17/09

Check this out:

Lee Underwood's article on the HTML Hierarchy will help you to understand the container model and XHTML hierarchy, both essential to working effectively with Cascading Style Sheets CSS).

Underwood notes in part two of his article: "As we look at the structure of the page we will see that each element is related to another element. This is called a parent-child-sibling relationship [tree structure]. An element that is directly above another element in the hierarchy is called the parent of the element below it.

The element below the parent is called the child. When two elements are equal in the hierarchy, they are known as siblings."

The PowerPoint tutorial on "Getting Started with XHTML" reviews this nesting/container structure at the tag level. We will examine this tutorial carefully in class. If you are thoroughly comfortable with the concepts of hierarchy and containment, you will be better able to master all areas 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, child, CSS, CSS box model, hierarchy, Lee Underwood, parent-child relationship, parent-child-sibling, relationship, sibling, sibling relationship, tree structure, XHTML

posted by WJB at Thursday, September 17, 2009 | 0 Comments | Links to this post

Web Site Directory Structure and Exercise One, 09/15/09

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.

Labels: best practices, directory, PowerPoint, Web site directory

posted by WJB at Tuesday, September 15, 2009 | 0 Comments | Links to this post

Exercise 1c: Creating Your Prototype Site, 09/16/09

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.

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, graphic, hierarchy, model, Web

posted by WJB at Tuesday, September 15, 2009 | 0 Comments | Links to this post

Exercise 1b: Creating Your Prototype Site, 09/14/09

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 Tuesday, September 15, 2009 | 0 Comments | Links to this post

Bentley Ranked 14th Nationally, 09/12/09

Check this out:

I'm not sure if you are aware of this or not, but here is something to be very proud of: Bentley University in April was ranked at number 14 by US News and World Report in their Best Business Schools Specialty Rankings: Information Systems.

Three academic departments at Bentley share this space: CIS, IPM, and IDCC (DUC). Take a look at the company we keep (click the graphic to the right to enlarge).

Further, it is interesting to note that behind us in the rankings are Arizona State University, the University of California--Berkeley, University of California--Irvine, Purdue University, University of California--Los Angeles, and the University of Pittsburgh.

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: Bentley University, DUC, IDCC, IPM, US News Ranking

posted by WJB at Saturday, September 12, 2009 | 0 Comments | Links to this post

Purchase of Dreamweaver CS4, 09/11/09

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 Friday, September 11, 2009 | 3 Comments | Links to this post

Creating Your Prototype Site, 09/10/09

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 Thursday, September 10, 2009 | 0 Comments | Links to this post

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

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, September 09, 2009 | 0 Comments | Links to this post

The "Social Media Revolution," 09/09/09

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 Wednesday, September 09, 2009 | 0 Comments | Links to this post

Dreamweaver CS4 Tutorial: Views and Workspaces, 09/09/09

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, September 09, 2009 | 1 Comments | Links to this post

Setting Preferences in Dreamweaver CS4, 09/09/09

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 Tuesday, August 25, 2009 | 0 Comments | Links to this post

Introducing Dreamweaver CS4, 08/25/09

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

posted by WJB at Tuesday, August 25, 2009 | 1 Comments | Links to this post

Welcome to IDCC 370, Web Design I, 08/11/09

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.

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 Monday, August 24, 2009 | 2 Comments | Links to this post

IDCC 370: Web Design I Fall 2009

IDCC 370 Announcements

Floating Callouts and Graphics, 11/16/09

Optimizing a Word Doc for XHTML 11/11/09

Commenting CSS and Style Rules Order, 11/11/09

Adobe Dreamweaver CS4 30-day Free Trial Download 11/11/09

Course Withdrawal Date, Friday, November 13, 11/11/09

Banners and Buttons, 11/09/09

Assignment One Corrections, 11/03/09

Sites for Free Graphics, 10/27/09

Raster and Vector Graphics 10/21/09

Site Design and Graphics, 10/21/09

Using Dreamweaver to FTP Your Site, 10/14/09

CIS Lab Hours, 10/08/09

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

Dreamweaver Tutorial: Styling Text in the CSS Property Inspector, 09/30/09

Greeked Text and Page Validation File, 09/30/09

Template: Wrapper, Header, Contents, Footer, 09/28/09

Cascading Style Rules, an Introduction, 09/22/09

The XHTML Hierarchy: Thinking Inside the Box, 09/17/09

Web Site Directory Structure and Exercise One, 09/15/09

Exercise 1c: Creating Your Prototype Site, 09/16/09

Exercise 1b: Creating Your Prototype Site, 09/14/09

Bentley Ranked 14th Nationally, 09/12/09

Purchase of Dreamweaver CS4, 09/11/09

Creating Your Prototype Site, 09/10/09

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

The "Social Media Revolution," 09/09/09

Dreamweaver CS4 Tutorial: Views and Workspaces, 09/09/09

Setting Preferences in Dreamweaver CS4, 09/09/09

Introducing Dreamweaver CS4, 08/25/09

Welcome to IDCC 370, Web Design I, 08/11/09