Saturday, July 31, 2004

I have been looking at Photo Blogs this week and thinking about the many ways that one can display images and move through images. Here is an interesting concept. Look at the way it is constructed as a book, with the pages, and how you can move through it. What do you think?

Friday, July 23, 2004

Your web site LIVE!
After you complete you site you need to think about how and where it will be hosted in order to have it accessible to the world. There are any number of options, some costing more money than others, and offering a variety of services and hosting plans. You may already have some space available through a school or work location, or perhaps you have a current ISP (Internet Service Provider) that gives you server space along with your email account.
You do not need your very own Domain Name to have a web site, but that can be an additional cost that can start from $10/yr.

Thursday, July 22, 2004

Rollovers / Mouseovers
I have some javascript code that we will use to make some simple image rollovers. Dreamweaver makes it pretty easy to do, all you need to prepare are the on and the off states of your image(s).
Here is a page that gives simple instructions as to making a rollover in Dreamweaver. If you want to dig deeper into scripting and understanding what the actual code is all about, here is a page that walks you through creating a rollover with Javascript. The code used is similar to the code that I have supplied.

Style Sheets (CSS)
Style sheets allow you to separate the structure of the web page (HTML) from the design. You can really fine tune the look of your page, and the placement of the various page elements. I have several page examples that you can take a look at and view the source.
Paragraph formatting

Transparent Gifs
There are times when you want to have the graphics on the page blend seamlessly into the background. When the background is made up of many colors (is patterned for example), you need to create a transparent gif. You can do this in PhotoShop and I will show you how this morning. Scott is making a page that requires transparent gifs, so he will be our Guinea Pig today!

Wednesday, July 21, 2004

Background Images
You can use an image for the entire page background, or images in individual table cells. Remember that your site needs to be readable and that means distracting backgrounds are usually a bad idea. I'll show you some of the different ways that background images can be used. Here is some of the CSS code that can be added to the body properties of your html page.

HTML Tables
Tables are a great way to organize the content of your web page. Instead of just having everything flow from left to right and down the page, you can use tables to contain the content and get a more precise layout. But tables can be a difficult concept to grasp at first. Today I will work with students individually to translate their mock ups (from paper or from PhotoShop) to HTML.

Tables are based on a grid, you have probably used tables for displaying data in MicroSoft Word or Excel. I have a few links that you can look over to familiarize yourself with some of the terminology and to see a few examples of how tables can be formatted to display on the web page. The more practice, the more it will make sense, so if you feel brave enough, you can try and add a table in BBEdit to your practice page we started yesterday.

Tuesday, July 20, 2004

HTML Tags
Today we are going to take a look at the structure of a basic HTML page and specifically at the tags that make up the "language" that tells the browser how the page should be displayed. HTML stands for "Hypertext Markup Language" and it acts as instructions read by the browser application when a url is loaded into the window. URL - "Uniform Resource Locator" (the web address). This language is specific and must not contain errors or the page will not display correctly. "Computers only do as they are told"
I have created a few page examples to look at (and please view the source!). The first shows how various font faces and sizes are displayed, the second shows a basic table structure with various attributes. We will discuss all these terms in this mornings class, and create some sample and basic pages.

Monday, July 19, 2004

HTML Editors
We have been discussing HTML and web pages and editors this morning and I am sure most of you are thoroughly confused. This class will be focused on using BBEdit as an HTML editor, but there are more options out there that you should be aware of. Dreamweaver is probably the best known
WYSIWYG editor. We will take a look at it and discuss the differences between a WYSIWYG editor and a text editor like BBEdit. Another option for the PC machines is Homesite. It is somewhere inbetween Dreamweaver and BBEdit. Of course, any HTML file (with the correct extension) can be opened in a text edit program such as Notepad, TextEdit, WordPad. You just won't have access to tool bars or palettes which contain shortcuts to tags.

Saturday, July 17, 2004

Welcome to the web design workshop. I hope to use this blog as a way of communicating with the class and also as a way for the class to communicate with each other. You each have the ability to post comments or questions at the end of each of these posts. Please share ideas, questions, links to interesting sites with the rest of the class.

Supplies: You can use a zip disk, burn a CD, a USB flash drive, firewire or USB hardrive, or an iPod, to transfer or store your files. If you plan on working at home in the evenings you will need to think about how you will be transfering your files. As far as HTML books go, there is a lot of information online, and I will have some handouts that cover basic HTML tags. We will be using BBEdit, a text editor, to create the pages.

Content: Think about what you need to begin creating your web site. What is your site all about? What do you need to make it happen (images, graphics, photographs, written content...)

Inspiration: I will be providing links to interesting sites. Bring some of your favourite sites to share with the class also.