The Manrilla Blog | Life. Art. Religion. Culture.

Welcome to the Web Publishing course offered here at Moore. I have put up this page as means to help you along with some of the course points. I will post summaries, links and any assignment materials here for you so you can bookmark this page. If you have any questions pertaining to the course, please email me at manleymp@design.upenn.edu. An electronic copy of the syllabus can be viewed here. Thanks.

Class Notes

• Week 1
• Week 2
• Week 3
• Week 4
• Week 5-7
• Week 8
• Week 9
• Week 10

Week 1 Oct. 11, 2007

For our first meeting we discussed a general overview of course objectives that were laid out in the syllabus as well as began a brief intro into appropriate practices for beginning the construction of a web page. These included such concepts as

• doctypes
• HTML and XTHML and the requirements of both
• Self-closing tags
• Separating content from markup
• CSS intro: < div > tags, ID’s and Classes

One of the most commonly overlooked key components to building a valid, well-authored web site is choosing a good doctype. The role and function of a doctype is to provide the web browser with information on how to process the type of web document your web page is authored in. This could be HTML 4.01, Strict or Transitional; XHTML 1.0, Strict or Transitional, just to note a few examples. As we begin to build our web pages, I will provide you with ideas on which doctype best suits you. Note, that this declaration must be exact in both spelling and in case) or the doctype may not validate. Here’s a link to the W3C’s web site that has a list of possible doctypes. We’ll be looking at this again later on.

Typography, a fancy word for fonts, is also a key aspect to web design. Not only is it important in terms of what selection of fonts but perhaps more importantly what fonts will the end user being to make use of. The assortment of fonts that might be installed on a user’s machine can encompass a wide variety. Unfortunately, there’s no of telling which fonts might be installed on someone’s machine. We are left with a small selection of serif and san-serif fonts. Such common internet varietals include: Arial, Helvetica, Times, Courier, Georgia, and Verdana to name a few. Often these will grouped together like Arial, Helvetica, sans-serif or Georgia, “Times New Roman”, Times, serif. The order in which the fonts are listed denotes the preferred order of preference. For example, if Georgia, “Times New Roman”, Times, and serif were used, the user’s browser will search their machine for Georgia first, Times second and so on. Picking font combos that display the text intelligible as well as gracefully is one of the components that makes for a web site that is functional and stylish. Check out these links on serif and sans-serif fonts to get a better idea of what they’re about.

Having a web site that is colorful does not always mandate the use of exotic colors. Nor is it advisable for one to have a wide-ranging color palette. There are many well-authored sites that have simple yet elegant color schemes. And while we will not delve deeply into color theory in this course, I would highly advise you to perhaps visit your local library and check out some books on graphic design and color theory to begin to have a basic grasp of how color works and how you can best use it to complement your web site. With that said, color on the web can be a bit tricky. Like fonts, color is in the hands of the user. We have no idea what kind of monitor the user will be view on their end. So you have a choice: web safe or web “pretty” safe. Outside of these two, it’s a wild card as to how effective your color choices will be.

If you’ve used Photoshop at all, you should be used to the eye dropper and it’s ability to pick and choose colors. There are also additional color swatches such as pantone, toyo and trumatch to name a few. When picking colors, see if you color is available in a web-safe color. If not, I would advise looking at its closest match to a pantone color. Remember, these are approximates. The farther you go outside these two choices the better chance you have of your color being displayed incorrectly. The web is about compromise - reaching the largest amount of user’s with as close as the same experience possible.

Paragraphs are paragraphs and headings are headings. There’s a tag for everything and the correct tag should be used for it’s purpose. If you’re writing a paragraph, then it makes sense to use a < p > tag. If it’s a list, the the < ul > or < ol > plus the < li > tags should be used. In web 1.0 or really. 0.9 perhaps, tags were used to compensate for the lack of sophistication that was available in styling web sites. Those days are changing. XHTML and CSS are two languages we use to author web sites that separate the content from market. No longer do we use excessive amounts of break tags < br / > to bump something down. Instead, regular tags or more commonly now, div < div > tags are used in combination with CSS [adjusting the padding or margins, for example] to govern styling on web pages. This makes for cleaner code with loads faster and is also easier to manipulate and maintain. Authoring pages with clean code will ensure your users will spend less time waiting for clumsy code to load as well as making it much easier to make changes in the future.

As the web continues to grow and evolve so does the languages we use to author them. HTML is being replaced by a better, cleaner and more effecient language: XHTML. Unlike HTML, XHTML has a number of new requirements such as the closing of tags. Additionally, all tags must be authored in lower-case letters. No more < P > tags. There are also a number of tags that have been excluded in favor newer, more semantic tags. The < b > tag and the < i > have changed to the < strong> and < em > tags respectively. Tags such as < u > have been removed as a tag altogether and instead must be authored with CSS [for example, < span style="text-decoration:underline;" >]. Another critical change to be aware of is the necessity for all tags to close. While it was optional in HTML to have an unclosed paragraph < p > tag, it must now but closed at the end with a < /p >. Likewise, non-closing tags such as break tags < br > and image tags < img > must now be closed like < br /> and < img /> respectively. In addition, the < img > tag must contain the attribute alt=”" [note the quotes - they must be present even if they contain no additional text. We will discuss 503 standards in a future class].

As some of you can see, a refresher course in having a working knowledge of tags will be essential for understanding the newer, more modern methods of authoring web sites, even if you choose to use an application such as Adobe’s Dreamweaver. For next time, you should bring any web projects you have to class. We’ll also begin to work with editing and manipulating code [XHTML and CSS] as well as looking at site designs. Below you will find some useful links for upcoming projects:

• Color Schemes: this link will allow you to pick and choose examples. Note the monochrome option - this is an excellent way of coming up with some veritable color schemes.
• doctypes: a good article on ALA’s site. See what uses the doctypes have.
• XHTML: Geek out and get a really indepth review of what XHTML’s all about.

- top

---

Week 2, Oct. 18th, 2007

This week we talked a little less theory and did a bit more practice. From the looks on your faces, I gather that this is more pleasing. I assure you, as we move forward, we’ll be doing much more practice and I’ll try not talk blather on so much!

For demonstrating purposes, I used Cyndy Drue’s web site [www.cyndydrue.com] to illustrate some of the web design concepts we talked about in Week 1 and start applying it. I put up a mock site of Cyndy’s here. Cyndy’s web site contains a lot of information that pertains to various activities she belongs in. As I had stated in Week 1, having a clear manifesto of what a web site is about is one of the key first steps to developing a web site. Without it, one’s direction gets diluted as soon as you begin trying to add content.

Cyndy’s case is a bit different than what we had talked about before in that her site already exists. This brings about a unique set of challenges as well. My recommendations for her site are thus:

• Re-editing the copy: the copy is the textual info that describes all of cyndy’s activities. In her case, that’s photography, a radio personality, and it looks like she’s got a blog that she wishes to begin as well as some biographical info.
• Site layout: Cyndy’s site is dire need of some graphical restructuring [sorry Cyndy!!]. The purpose of this is two-fold. 1] to give her site a new “branding” or graphical look that speaks to the visitor something about Cyndy. 2] Holding, containing and directing content - by restructuring her content she can better provide the user with a clear sense of site navigation as well as direct the user’s experience there. This is especially important in Cyndy’s case in that without a clear idea of how she wants to direct visitor’s to her site and while they’re there, a user will quickly get lost and s/he may also not get to all of the really interesting things that Cyndy does.

Cyndy’s index page [the original intro page] was just her logo, a sort of header proclaiming the month and a large image followed by the site navigation. We decided that this was not the best way to draw users into the experience at Cyndy’s web site. Instead, we opted to start pulling some of the info inside Cyndy’s site and display it on the index page. By doing this, visitor’s immediately get into the meat and potatoes of who and what CyndyDrue.com is. In fact, this tactic of having a small “splash page” is an outdated way of building sites. It makes much more sense to “get down to business”. One suggestion I had made was to look around you at various forms of media; magazines and newspapers were two examples I used in class. Magazines have the luxury of being print media but even then, they usually will pepper the front cover with tidbits of info on what’s contained inside. I recommend this approach when building your sites. There’s no need for a “cover sheet” - we’re not faxing anyone.

A few thing’s you’ll need:

• The Mock Site
• The files
• Or you can just view source and look at the two of them: current & original
• W3C Markup Validator [we’ll discuss this in class]

Ok - down to the nitty gritty. Cyndy’s new site redesign is based on a central “container” which is centered on the middle of the web page. Drawing some inspiration from her old page, we used a blue background for the page and making the “container’s” background white. This gives the site some contrast and draws the eye immeditatly to what’s going on. From here, we have her site structure:

• container
• header - holding the logo
• navigation
• content - content is heralded by an < h1 > tag telling is it’s October, followed with a short series of paragraphs giving us some small bites what what lays inside.

Here’s the markup:

• < body > - This tag starts the XHTML content
• < div id="container" > - This is the middle content that holds all the paragraph texts, images and so on
• < div id="header" > - This holds Cyndy’s logo
• < img xsrc="00_media/graphics/headfrontsm.gif" mce_src="00_media/graphics/headfrontsm.gif" alt="title" width="205" height="35" / > Said image.
• < /div > - This < div > tag closes the “header”

Now we begin the navigation

• < div id="nav" > - Cyndy’s navigation has been redone using an unordered list [since that’s what her navigation is - it’s a list of info in a non-alphanumeric order]
• < ul>
• < li class="inline-first">< a xhref="../index.htm" mce_href="../index.htm" >home< /a >< /li>
• < li class="inline" >< a xhref="../01_bio/Bio.htm" mce_href="../01_bio/Bio.htm" >bio< /a >< /li>
• < li class="inline" >< a xhref="../02_photography/Photography.htm" mce_href="../02_photography/Photography.htm" >photography< /a >< /li>
• < li class="inline" >< a xhref="../03_contact/Contact.htm" mce_href="../03_contact/Contact.htm" >contact< /a > < /li>
• < li class="inline" >blog< /a >< /li>
• < /div > - This < div > tag closes our navigation

And now, on with the show!

Our main content is now kept in a < div > tag called, “content”. This houses the main textual info as well as any images and such. The break down is simple. October is a header of sorts, hence the < h1 > tag followed by a paragraph. This is the sequence that “content” will use. In terms of styling, you can look at the stylesheet [CSS] to see how we’re controlling the content. I’ve decided that any images that might be used on this page should be smaller, as visitors who really want to see Cyndy’s photography can follow that specific link. The image is also “floated” to the right [we’ll discuss CSS and other techniques such as floating this Thursday]. I’ve also given the < img > some padding so the text doesn’t bump right up against the image. Given the amount of textual content Cyndy may have I thought that I’d also style a < blockquote > for her, so that she can give a sort of headline or highlight that will breakup the monotony of text she has, pacing the reading of her text. Finally, we close the < div > tag of our “container” < div > and conclude with a “footer” that gives a copyright disclaimer.

For now, take some time and view the source of the web page. If you have the means, print out the stylesheet as well as the XHTML content begin to look at them side by side. We’ll go over these things in class. For homework, I would like for you all to be familiar with the tags that are being use:

• body, div, h[1, 2, 3, etc], p, a, blockquote, ul, ol, and li

You should also know what a < span > tag is, what a class is, an id and the differences between them. As usual, if you have any question, please email me. Bring ideas and content with you so we can start building. The site files we were working on can be downloaded here as a ZIP file containing the modified index.htm as well as the original .htm file.

We also talked about designing a separate print stylesheet that will tell a printer how to display our content on the page but I will review this again on Thursday. For a short primer, read over this article on ALA’s web site.

- top

---

Week 3, Oct. 25th, 2007

This week we worked on how to translate layouts in print to the web. This exercise helped us see how we separate content from markup. One rule to keep in mind in terms of translating print designs to the web is that all such translations are non exact. The web is one medium; print another.

We also learned how to configure Dreamweaver/FTP clients to connect to a web server. For our class, I have provided you all with space on my own domain at www.manrilla.net/web_publishing/dev/ - this space is for your use and it’s where I’ll have you put up your class work. Below are some steps for setting up your FTP client/Dreamweaver.

First, launch your client [Dreamweaver in this instance]. From the menus at the top, select Site.

From Site we want to either Manage or Edit a site and we’ll call it Web Publishing. Selecting the Advanced tab, click on the first choice, Local Info. Here’s where we’ll name our site: Web Publishing. You can map the Local root folder to your C Drive [or Documents folder on a Mac] and title it Manrilla\web_publishing\dev\username, substituting username for your first name. You can leave the Default images folder blank.

Next, let’s select the second choice on the left, Remote Info. This is the part that will tell Dreamweaver how to connect to the web server. Access refers to the type or method of how we’ll connect to the server. In our case, it’s FTP [file transfer protocal for all you geeks out there]. The FTP host is: ftp.manrilla.net. Host directory should be left blank. Our Login ID is web_pub2007@manrilla.net. The password is the one I gave you in class. Email me if you don’t have it [incidentally, without the password, the setup won’t work with Dreamweaver so email me first before you do so]. You can save the password if you choose. Last, select the Use passive FTP box. You can click the Test button to make sure your credentials work. From here you should be all set. You’ll upload your files into your folder and violá! - you should be good to go.

Going back to this week’s lesson, we took our class notes [the sample word doc] and converted it to XHTML. In doing so, we learned to use the appropriate tags for the appropriate markup. Headers get < h > tags {< h1 >, < h2 >, etc]. Paragraphs get < p > tags. And text that’s deliniated as a list gets the < ol > or < ul > tag depending on whether or not it’s an ordered/unordered list. Remember, XHTML is all about getting away from using tags to “style” a web page. So instead of multiple break tags we used an ordered list with list items < li >. As we move forward, we’ll see how CSS is used to style our markup [i.e., make certain fonts of one family or another, bold our header tags, etc]. But as we move forward, as we’ll see this week, CSS is so much more than simple styling. It is also used for layout.

We also saw the importance of using the validator. Not only is the validator key in helping us make sure our pages are compliant but they will point out where we may be having errors or conflicts in our code. As we saw in class, one of the students pages wasn’t displaying correctly. With a quick trip to the validator, we were able to pinpoint the source of the “bad code” and correct it. I highly recommend bookmarking that page. We’ll be using the W3C validator more in the future to help us keep our pages clean and efficient.

Additional Sources

• Basic CSS primer
• XHTML Primer

If you have not already done so, let me know and I can recommend a few good books or additional sources for all of you to memorize XHTML and CSS. Coding tools like Dreamweaver are nice but to become competent in web design, you will need a functioning understanding of XHTML and CSS without needing to access automated coding software like Dreamweaver. Hey, even machines make mistakes!

- top

---

Week 4, Nov., 1, 2007

Well, it’s Week 4 and I can see that most of you seem to be absorbing the material, though it does cause funny beads of sweat to appear on all of your foreheads. But as you can see, we are starting to apply what it is we’ve been discussing in class - the use of ID’s and CLASSES and so forth, to create symantic and well-styled layouts. Several of you have done an excellent job of taking class examples and appropriating them with your own adjustements. Let me say that this is the way to go! Only through “making it your own” will you truly begin to create and build web sites and pages on your own.

And now that I’ve got my Sunday sermon out the way, I’ll prcede to recap what we talked about this Thursday.

We began our session with a short quiz:

Quiz 1 – Web Publishing

1. What is a DOCTYPE?
2. What is its purpose or function?
3. What is HTML and XHTML?
4. Name one of the major differences between the two:
5. What does CSS stand for?
6. What does it do?
7. What is the difference between an “ID” and a “CLASS”?
8. What types of media can we use CSS to modify?
9. When designating measurements, are pixels the only unit to be used or can we use em’s, pt’s, or inches?

Extra credit: Why are these two tags incorrect in XHTML but correct in HTML?

1. < a xhref=”http://www.manrilla.net/” mce_href=”http://www.manrilla.net/” alt=”A really cool web site” title=”A really cool web site” > Manrilla < /a>
2. < img xsrc=”http://www.manrilla.net/blog/imgs/image.jpg” title=”A picture”>

If you didn’t make it to class, write down and take the quiz and bring it with you next Thursday. The purpose of this quiz was to give me a better idea of how you’re absorbing the class material.

Besides torturning you with a quiz, we also had planned to watch a couple of short movie clips in class to help illustrate and demonstrate some of the topics we were talking about for the last several classes. One is on class selectors and the other is a short piece on CSS terminology, such as properties and values. They’re both short and sweet but I think they can offer you a bit of additional insight into what we’ve been talking about.

So now we’ve gotten to the point where we’ve got a bit of code under our belts and a few design ideas - now what? Well, as many of you demonstrated in class on Thursday, you’ve begun to take the class models and appropriate them for yourselves. This made me, as your teach, clap my hands when no one was around and smile. Yes, design goes way beyond classroom examples and really starts when you take it, tinker with it, even break it, and then learn how to put it all back together again.

This Thursday will be mostly review and exploration of taking our ideals thus far and pushing them further. So bring your thinking caps with you.

- top

---

Week 5-7, Nov., 8, 15, & 22, 2007

I hope everyone was able to have a nice break. I will post some updated notes on what we covered in the past couple of weeks.

By now, as we have seen, we have learned how to take rough comps and sketches that we’ve made in other applications such as Illustrator or Photoshop, and learn to translate those ideas into applicable web layouts. I will stress again that the web is a medium of its own. It is not print. It is not canvas. It is the web and thus we must approach it from its own specific venue; with its own advantages and limitations and design accordingly. The example that I used in class was that of Rosali’s layout. Her page is the translation of her comp layout that she did in Illustrator which we sliced up [without using Slices in Photoshop, mind you!] and placed various components of it as background images of her page. Here is her page with just markup and no styling. It quite simple in terms of markup. What really brings her piece to life is the use of placing parts of her drawing as the background image to the top and bottom of her main content. We also added another simple white image to make a rounded corner box for the middle of her page. See the images below:

Background Images for Rosali’s layout

This is the top of the image, which was cut off and placed as the background image for the h1 tag in the “main” div

This is the bottom of Rosali’s image. We’ve placed it as the background image for the “content” div

To complete the seemless look, we’ve take a color sample of the image [in the brown area] and have set that as the background color to the “main” div. When combined, this resembles a seemless piece as seen in our example. The same process was implemented for the white box.

White Box

White box top

White box bottom

To create the white box illusion, we used the rounded square tool in Photoshop and set its color to white while setting the background color of the image [not the web page] to the same color as the brown color in the image. Simply save another version of the same image, reversed 180° and you’ve got your top and bottom pieces.

Here’s the original we sliced up:

Here is one plug-in I’d recommend for all of you to use in the future. It’s a plug-in for the Firefox browser. It allows you to view source on your web pages and color codes the various tags. Here’s the link.

- top

---

Week 8, Nov., 29, 2007

This week found us reviewing the ideas and concepts we used for Rosali’s design. We reviewed how to make rounded corners. I also mentioned in class that when designing, it is crucial to always proof what you’ve got in at least three or four browsers, preferably on multiple platforms like IE6/7 on a Window’s machine, Firefox on both Mac and PC and maybe even Safari or Opera. While you may not use Safari or Opera, it is usually desirable to ensure that any and all visitor’s to your site will get the same experience as well as making sure your design doesn’t “break” in one browser or another.

Next, we took a look at Armando’s site. This is a prototype piece he is developing for a client. I really liked Armando’s design - it is simple, clean and effective. The challenge was to take what he had initially laid down and convert that to a semantic layout.

Armando’s concept is based on a single box model which floats centered in the page. It will consist of a header with the logo he designed followed by a centrally nested navigation piece that will guide users through the site. Following the navigation, the site will provide some information and links to various pages describing the client’s services. So first things first, let’s make sure the layout is semantic [i.e., all tags are appropriate to the data they contain].

If we remove the styles for a moment on Armando’s site, his page starts off well with the header but the navigation needs some work. Initially using GIF’s to replace the text of the links within the navigation, this proves to be a bit clunky and not entirely necessary [as we used in Rosali’s design for her nav]. As you’ll see, this GIF will be replaced by text. But from here his page cascades nicely, with headers and paragraph tags laying out the body of the document and concluding with a footer. Next, we’ll style his document.

I was impressed with Armando’s logo and used it as a launching pad on how to stylize the rest of his document. Being that the client’s name is Natural Order, I proceeded with an earth tone in mind. I opened his logo in Photoshop and sampled the hex color of his logo and set that as the background color of his document [body { background: #7c6e5f; } ]. This will increase the sense of style and consistency in Armando’s document. I will also use this color as the font color for both the paragraph and h1 tags in the body of the document. This color will also play a crucial role in the GIF that I will make to use as the background for his navigation but I’ll get to that in a moment.

To create the container we’ll use the following styles. The * with a margin and padding of 0 sets all tags in the document to zero margins and padding. This is a handy technique in taking control of the various browser presets, as all of the various browsers have different default margins/padding that they assign to all the tags. This sets them all to zero. Next we set the body tag’s margins/padding to zero as well as establish the font-family for Armando’s document. I have chosen Helvetica as the font of choice as I feel it closest matches what Armando used in the logo. After the body tags have been established we’ll set some styles for the major tags in the site: the paragraph and header tags. Armando’s site does use more than the paragraph and headers tags but those other tags will get unique styling as we’ll see in a few moments.

Now it’s time to set up the rest of the document. We’ll begin by laying down the #container div. This div will designate how wide our container is [787 pixes wide], center it on the page with the margin: 10px auto, and setting its background to white [#fff].

The next step is a bit trickier. This is for our navigation. As you can see, we’re using a gradient GIF for our background. This was done in Photoshop, creating a very small GIF that uses the background color [#7c6e5f] and the gradient tool [we’ll go over this in class on Dec. 6th]. It is set to repeat [repeat-x bottom] horizontally on our navigation. We’ll lay our text over this. As before, our navigation is essentially an unordered list so we’ll use the ul tag. Take lay it out horizontally, we’ll use the following style: display: block. Aligning the text to center makes it all line up in the middle. The padding settings push the whole nav in the center of the element. Next we style the actual links by making the links in small-caps but applying this style to the li tag. The final step is the actual anchor tags [links] by making them bold, white and 1.75em’s in size. I use em’s as they are more flexible. We’ll talk more about this on Thursday. Last step is the hover state which just gives a neat little dashed line under the link for style.

Our content is what will tell visitors what’s going on in this site. The styles are simple. A simple rounded GIF is used as the background, set to the bottom to give some added style to the site with rounded corners. The background is set to white as the font color was set earlier to #7c6e5f. We pad the top with the margin-top: 1.5em - this pushes it down from the nav, giving us some breathing space. We set the text from left and right with the padding-left/right at 2em’s. Finally, some styling for the H1 and paragraph tags.

The last bit is to wrap it up with the footer, set outside the box. The clear: both property tells it to skip all that came before it, placing it outside the box. Centering is plain and clear. Color is white and font-size is set. That’s it…

Well, not quite. There’s a bit more foot work but it’s pretty simple. I had suggested to Armando that he should try making the pages in various colors. This was done by copying the respective styles and renaming them with the appropriate color as well as recreating the GIF’s to match. See here. One additional point is that the navigation and the footer were made into server-side includes - as you’ll note, the pages are saved with the .php extension. I will go over this with you in class on Thursday. For reading, please check out the articles [1] and [2] on web typography. The articles are quite informative. See you Thursday.

- top

---

Week 9 Dec. 6, 2007

For this week’s class, we went and revisited Armando’s site and fixed his navigation. In doing so we learned how to apply background images that were created as a gradient. This allows us to use all kinds of images and renders the pages with a bit more style then just formatted text.

I also introduced you to the new world of dynamic web pages with the server-side include technique. This “include” is in a sense, a bit of code that, in our case, is saved with the .php extension, and can be used over and over again [as is the case with the navigation in Armando’s site]. To do so you must save the page with the .php extension instead of .htm/l. The reason is that .htm/l is static - meaning that it cannot in of itself interact with the web server to generate code. PHP server-side includes are very useful when you are going to have parts of your site that are going to be used over and over and can save yourself the trouble of having to type all that code again. It also guarantees a measure of consistency [this can be bad as well as good for if you’re code was written poorly in your snippet or just a plain old spelling error, it’ll be everywhere as well!], making your site look more professional.

Server-side includes can be used in a number of ways. Looking again at Armando’s case, it’s broken into three main components: index [i.e., the main body or content of his site], the navigation, and the footer. Armando’s page used to be a static html page which we then did a save-as with the .php extension. Next, we cut out the portion of the navigation that we wanted to reuse and the same with the footer and replaced them within the red php brackets [here’s a zip file with all the trimmings]. Download the zip file and take a look at the index3.html file. As you can see, this is what his file used to be. We simply replaced the “components” that made up those spots. As this course is geared more towards web authoring and publishing, it was beyond the scope of this course to introduce you to server-side scripting languages like PHP but even so, this little “trick” of using PHP like this can be endlessly useful to you as your create and maintain your own sites.

In the above example, the pages must end with the .php extension because the pages are going to use the web server to reference other .php pages [i.e., the nav or the footer] and those declarations must be contained within the red php brackets. But there is a way to make use of php without having to save your pages with the .php extension [though you still could if you choose to use this technique with server-side includes]. In this example, we’ll be taking a php script that will access a folder full of images [in this case, it’s looking in the same folder that the file “rotate.php” is contained in. It looks in this folder for images and the randomly selects one and spits it back out as an image file. This is what I call a php random image generator. There are javascripts that can perform the same task but this is easy [as in you nor I have to write this ridiculously long script] to implement and does not require javascript to be turned on. See for yourself in the sub folder rotate. It contains a small php script called “rotate” - you do not need to edit this script. And contained with in this same directory are the images I want to have rotated. The final step is to point my image tag to the rotate.php file instead of normal image [gif, jpeg, etc.]. And that’s it! Now you’ve got yourself a neat little image rotator that give the user a sense of new content on your site when ever they visit your home page or which ever page you’d like to use this feature on.

As I had promised, here’s a compiled reading list of books that I think you will find helpful as you continue to delve and learn about the ever fascinating/confusing world of web design:

Additional Sources: Recommended Readings

• Designing with Web Standards [2nd Edition] by Jeffrey Zeldman. Probably one of the best books on web design “theory” in terms of helping to define what is and isn’t web design. Highly recommended as a book on those who want to move into web design as a career. Not a code book.
• CSS Web Site Design Hands on Training (Hands-On Training) by Eric Meyer. Also a good book in that it comes with a CD with files of all the examples in the book. Talks a lot about padding/margins which is good plus good examples of using unordered lists as navs and calendars.
• The Art and Science of CSS. Another decent book with good examples on CSS authored sites.
• Grid Systems in Graphic Design by Josef Muller-Brockmann. An excellent book as a primer in graphic design. Many of its principles will assist you as you move towards creating your own graphical interfaces.
• Typography by Emil Ruder. This is an excellent source for grasping how deep and important typography is. Give it a read.
• Grid Systems by Kimberly Elam. Another good book on graphic design and how layouts are conceived. Not directly translatable to the web but nonetheless, a good source book for ideas.
• PHP and MySQL For Dynamic Web Sites by Larry Ullman. If you’re serious about web design you will probably either want to [or be forced to like me] look more seriously at dynamically-driven web sites and how they mesh with databases. MySQL is probably the most user-friendly and has the shortest learning curve. I found this to be a good starting point. Of course I think it would be best if you could actually take a class on programming. Also see his newer version if you want to use PHP 6.

A word about books: first, I am not expecting all of you to go out and buy all of these books. I’m sure many if not all are available through the school’s or the public libraries. Second, a book is a very different thing to many people. You may find that some of these books do nothing for you while you found others that do. That’s great! But in my experience, I am usually able to get one or two things from a book and then have to move on to another gone to get something else. In other words, be cautious about buying the “CSS-Does-It-All” volumes that are out there. Especially something like CSS, which has so many quirks that each book may only contain one or two useful tricks and the rest if just a paper weight. That’s why I’ll caution you against my already rampant bibliomania [book-buying disease]. And remember, the web is perhaps the greatest resource of all. I have listed a site below that’s a great resource for continuing to learn CSS. But in the end, you should by now be able to view source, figure out how to look at someone’s CSS file and “see what they’re doing”. But another word of caution - make it your own! By all means, use that cool technique they’re using for their layout or navigation but use it in such a way that it says “you!” and not “them!”. I would say though, that a reference volume in CSS is probably a good thing for you until you memorize the most commonly used tags. Heck, I even use it as there’s stuff I forget all the time!

Additional Sources

• EM Calculator - what the heck are EM’s and how do I convert my pixel layout to them? Click and get yer answers!
• CSS Creator - a very helpful online community and forum that can provide a ton of additional help on CSS.

- top

---

Week 10, Dec. 13th, 2007

How to link to external CSS file

CSS makes controlling and styling content for web sites easy. Instead of having to control the style as-is for each instance, we can link to a style sheet once and have it control all of our pages. When it comes to linking to our styel sheet we have a couple of options. One: we can use the link tag or two: we can use the import function within our style tags. Here’s option one and option two. There are reasons for both but that’s for additional reading.

Pod Casting

I showed you guys briefly how to write your own XML feed for creating a podcast. As most of it looked like some mobojombo, here’s a link with a FAQ list on how to create your own and have it put up on the iTunes Store.