Wednesday, April 20, 2011

Week 3 Review -- Building Menus

Now that we have finished building the banner for a web page (Banner Tutorial) we need to add our Navigation Menus.

On the web page that we are building, we are now ready to add the menus. You can start, as we did in class, using the menus generated by Ian Lloyd's "List-o-matic" at accessify.com. You can choose Horizontal Menus or vertical menus.

I added both to the following web page. To see the steps read the pages "Source"  in your Browser (Usually menu item: View > Source.

This is the link to the actual page you see below

Read the source to see how a vertical list was made to line up in a line horizontally...





You, can find more info about how Navigation menus work, samples that you can use and other places on the web where you can build fancy custom menus or download free menu generators. More Menu Tutorials  Don't forget to read the commented source.

Finishing your home web page.

1. Adding the Content

2. Centering the web page in a browser (read the source)

Questions?  Send that e-mail!

Thursday, April 14, 2011

Week 2 Review -Building a Web Page

1. Some Simple Rules
Before we begin we need to follow the "rules" for xhtml (Formatting your content)
and Styling the content with CSS

The Basic xhtml Rules
Please read about the basic xhtml rules on the class website

The Basic CSS Rules
Please read about the basic CSS rules on the class website

2. Building A Web Page - The Banner
I put together a step by step tutorial, it begins by building your web sites banner.
All the parts necessary to build a "demo" web page are in your "master" web site folder.

This is the link where you will find The class "Build a page tutorial -Part 1, The Banner" 
There are 7 steps

Have Fun!  I'll be going over the rules and tutorial steps in the class, and then we'll advance to Part 2, building the navigation menus. 

Got a question,email me or if you are ready for part 2, I'll send you the link.


Wednesday, April 13, 2011

Week 2 Review -Preparing and using Images

The use of images and background graphics on a web page can make a big difference on how the page stands out and shines.

Images can be placed on a web page using the image tag, or as a  CSS "background-image"

In order for a web page to "load" quickly the images need to be reduced to the 'size' they are used on the page.

If you are not working with an artist/graphics person, you'll need to make your own images, backgrounds, graphics, logos, and take your own photographs.

You can certainly use a program like Adobe's Photoshop, but, there are other FREE alternatives.

If you need a Photoshop like program you can use some free on-line (edit in a browser) programs.
I like Sumo Paint http://www.sumopaint.com/home/

You can use SumoPaint to make logos, gradients and other graphics.
On the class CD you'll find these graphics, they were made quickly in Sumopaint

If you are graphically challenged you can use on-line logo generator to make your logo
This is from Cooltext.com It's a bit out there, but fun! (Click on the lmage below and you'll see what I mean by "out there!)

If you use Google's free Photo Organizer, Picasa, you'll find that Picasa has a direct link to another online Photoshop like program called Picnik It's designed to work with your photos...
You can use the combination to prep your images for your website

One of the graphic elements that you need to generate are thumbnails for your photos or, if you are making a "Shopping Cart" you'll need smaller images of your products. A stand alone program that can generate thumbnails may be all you need. This FREE (PC) program can also change the file formats of your graphics or photos.

PC Only (free)
Folkes Easy Thumbnails

For more information about making Thumbnails on the class web site read "Making Thumbnails (and Galleries) Doesn't have to Hurt"

Next: Building your home page --starting with the Banner.






Enhanced by Zemanta

Tuesday, April 12, 2011

Week 2 Review -Links

Links are what makes the internet work, interactive.

You can link to web documents, such as other web pages, pdf files, photographs, graphics videos and so on.

You can Bookmark, or link to different locations on a web page using an index, especially useful if you have a long web page the "goes below the fold" with different sections or chapters.

You can, with a link trigger and e-mail client (Program) to open with the e-mail address you want the e-mail sent to...

You will find all the information you need to make these kinds of links, along with samples on the Class Website page called Links

Next: Image editing on the Web

Wednesday, April 06, 2011

Week 1: Tip Turn on extensions in Windows XP, Vista and Win7 AND Macs too!

Howdy
Almost forgot.  It's important that you know the extension of your files, especially for your graphics, photos and movies.

Mac and Windows OS's by default hide the 3 letter file extension for all files... You need to know what they are as the extensions are part of the filename and is needed by ALL browsers so they knows what to do with the file... Here's how you set that up

On Windows XP
  • Open My Computer, and select Folder Options from the Tools menu
  • Click on the View tab, turn off Hide MS-DOS file extensions for known file types, by unchecking the box 
  • Press OK.
On Windows Vista
  • Go to My Computer and choose Organize > Folder and Search Options
  • Select the View tab and deselect "Hide extensions" for known file types 
  • Press OK. 
On Windows 7
  • Open an Explorer window and choose Organize > Folder and Search Options
  • Select the View tab -- and deselect the Hide extensions for known file types
  • Press OK. 
To see the above with pictures and arrows go to  Indezine.com 

Making Extensions visible in OS X (Mac)

open the Finder, then choose
Menu
Finder > Preferences
Choose the Advanced Tab
Check the Show all file extensions box







Got a question, send that email!

Tuesday, April 05, 2011

Week 1: Setting Up the Free Coffee Cup HTML Editor

Howdy
This video from the CoffeeCup Website takes you through the steps to set up Your website project(s), For our Class the Your "Master-website" Folder on your computer.
After you have copied the "YourWeb-site" Folder to your USB drive, and renamed it.  Watch the video and follow the steps.


When you are done with the video the Editor's MY Website Tab, Local Disk, should look like this...



Have fun playing with the free HTML Editor, and working on formatting the content.for your website.

Questions?  Send an e-mail

Week 1: Homework

Howdy
Step1: 
Setting up our work environment
Install at least 3 browsers, Internet Explorer, Firefox and Chrome (You might also consider Safari and Opera)
Install CoffeeCups Free HTML Editor, you can download it from CoffeeCup's Website
Install a text Editor, Notepad2, or Komodo Edit
Install ftp software FileZilla

Step 2:
Setting up your Master "Local" website

 From the Class CD Copy the YourWeb-Site Folder to a Flash Drive (USB Stick Drive) so you can work on your site at school or at home or at work!


 Also copy the "empty" Website-Parts" folder to your flash drive.
(After you are done with class you can copy the folders  to your "My Documents" folder)

Step 3:
Sit down with a pencil and paper and write out / sketch out what you want to put on your home web page (index.html)
Inotherwords the most important stuff on YOUR web page... the content!
I'll follow up in a couple of days on setting up CoffeeCup's Free HTML Editor...

But, if you can't wait --play!
Got a question, Post a comment or send me an e-mail

Monday, April 04, 2011

Week One - A Tip "Write a Good, and Unique Title <title></title> for EVERY web page!"

The W3C Quality Assurance Tips for Webmasters.

The Quality Assurance group has put together a list of items that make a "quality" web page.

At the top of the list is the "best" thing you can do to assure a high ranking by web search engines. The best thing? Write a good <title> for your web pages.
Here it is...

 

<title>: the most important element of a quality Web page
The <title> element in HTML is designed to provide a short piece of text that should stand for the document in cases such as:
• window title bars
• bookmark lists
• result lists from search services
A good title
So take care to give your page a good title:
not too short
"Section One" won't help much when it shows up in a search results list. Section one of what?. Better: <title>Section
One of the Modern Music Guide</title> or even better <title>Time Frame (the Modern Music Guide, Section 1)</title>
not too long
Because only 60 to 80 characters are displayed in many window titles, menus, etc.; you can give a more detailed/pleasant title in the top level heading of your document, e.g. <h1>Section One: When has the Modern Time Commenced, Musicwise?</h1> (with a link to the whole Modern Music Guide for context).

 

There are more tips, you'll find them here at The W3C Quality Assurance Tips for Webmasters website.