- Announcements
- E-mail Buchholz
- WJB Contact Info
- Buchholz Bio Note
- Student Info Form
- IDCC Dept Help
- IDCC Faculty Info
www.flickr.com
This is a Flickr badge showing photos in a set called Miscellany. Make your own badge here.
IDCC 370 Announcements
Thursday, February 21, 2008
Site Design and Graphics, 02/21/08
Check this out:In preparation for your second assignment, 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:
- http://www.456bereastreet.com/
- http://meyerweb.com/
- http://www.simplebits.com/
- http://www.pearsonified.com/
- http://www.cssbeauty.com/
- http://www.bartelme.at/
- http://www.themaninblue.com/
- http://www.andybudd.com/
- http://warpspire.com/
- http://www.briangardner.com/
- http://bittbox.com/
- http://fadtastic.net/
- http://www.davidairey.com/
- http://www.alvit.de/css-showcase/
- http://www.designlinkdatabase.net/
- http://csscollection.com/
- http://www.cssbased.com/
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/).
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.
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/).
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
top of page
Using Dreamweaver to FTP Your Site, 02/21/08
Check this out:We'll spend time in class finishing your bottom navigation class for the template. When 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, you need to make sure that you have an account on the Bentley student server: create your account. Once you've created your account, you need to hook to the 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. Remember, Assignment One is due Tuesday, February 26, at 8:30 a.m.: your site must be FTP'd and printed through the browser over the Internet. All rendered pages printed will display http://www.blogger.com/post-create.g?blogID=2997923# on either the top or bottom margin.
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 shell, Web site directory, World Wide Web
top of page
Wednesday, February 13, 2008
Commenting CSS Style Rules, 02/13/08
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.
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, Brown Battery Studios, Brownspank, commenting, CSS, w3c.org
top of page
Creating Pseudo Class Selectors with Dreamweaver, 02/13/08
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 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:
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
top of page
Sunday, February 10, 2008
CSS Box Model, 02/10/08
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
top of page
Wrapper, Header, Contents, Footer, 02/20/08
Check this out:
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
top of page
Site Template Construction, 02/06/08
Check this out:In undertaking exercise two, Web site template construction, you are 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, 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 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
top of page