.
Web Tutorials
Want to learn how to use "web standards" -- that is how real web
designers using "industry standard" coding make proper, commercial
websites? Websites that Google loves and ranks highly and that look the same in all browsers? Websites that are easy to add advanced functionality to (ex. search, ecommerce, bulletin boards, etc.)? You need to learn XHTML and CSS. I'll show you by breaking down the book Web Design Before & After Makeovers
(1a) What is CSS? XHTML? Why can't we use HTML and tables like we used to? (brief, one page document) Read me first.
(1b) Before you can make your first page you have to set your website up in Dreamweaver. Print this document out and fill in the blanks accordingly, then let's set up your website.
Want to see a mockup of what we're doing? Click on this and print out:
(2) Creating your first, very simple XHTML page and first, easy Cascading StyleSheet ("stylesheet"). This XHTML page contains your first basic content. The stylesheet contains the basic styles of the website that determines the basic structure (header, footer, and three columns). Feel free to copy these and put your own information in.
(3) Adding some more codes to your XHTML page. Okay, that's cool for starters, but how do you style text? Basically, in the main XHTML page you add <h1> tags to the header division for the title, then to the left, middle and right columns for the titles of the stories. Use short, snappy titles for stories. Then, add text in <p> tags to format the text in the stories -- and the footer.
Then, add these tags to your stylesheet. See my example. And play around using different colors and fonts for your own unique look.
Use free tools to get good color combos (and more). Here I used a monochromatic blue theme.
The darkest blue I will use for text and accents- #00240F
The top royal blue I will use for titles- #0033CC
The medium blue, I will use for the left column- #809FFF
The pale blue I will use for the right column- #BFCFFF
Hmmm, actually, too boring. I'm making the right column bright yellow!
Okay, now to finish up, let's center our website. To the frame tag in the stylesheet, change the margin tag to:
margin: 0 auto;
[Note: if yours doesn't look right, doublecheck your HTML page, notice that I updated the CSS link to "css/practice2.css"]
4th Class: Okay, now we need to get rid of how the text jams up right next to the edges of the columns. To do that we need to add padding to the elements INSIDE OF the main design styles. That is, we won't add padding to the mainColumn, because that would change the width of the column. We will add padding to the styles:
#mainColumn h1 {
padding: 5px 15px 0 15px; /* top right bottom left */
}
Whenever something is in between the /* and the */ it is a comment tag and won't show up for visitors to your website. Notice there are four different values, they correspond to the top padding, right padding, bottom padding and left padding. Sure you could go
padding-top: 5px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;
but it is extra typing you don't have to do.
Lastly, add a style for H2 to at least your main column. And jazz up your H1 tag -- why not try making it a dark background and a light colored text color? Try going font-style: italic to make the H2 style italicized (don't use the <em> tag in the XHTML document, that'll make screen readers shout!
(4b) Okay, I know that your mainColumn is probably longer than your other columns and that the colors behind your other columns doesn't reach all the way to the bottom. Yes, it is tacky looking! To deal with that we need to make a graphic the width of the column and repeat them along the Y axis downward.
5th Class: Navigation and Borders- Adding links and a horizontal menu bar to your website. Also, print this fabulous CSS summary sheet -- all the important codes on one page (thank you Leslie Franke).
6th Class: Images and CSS- Also, adding pictures and getting that trendy rounded top banner graphic. Also, how to add pictures, how to get that trendy dotted background behind the entire website and other background ideas. Yes, we are doing a little Photoshop and getting inspired by the graphics at CSSZenGarden.com.
(7) Creating a two-column layout.
Creating Pop Up Windows
No, not for annoying ads. Say you have some small pictures (some folks call
them "thumbnails"). You can hook it up so when you click on them a large
photo pops up in its own window -- perfectly sized to the photo. It's cool,
check it out!
Color Schemes
Learn how to have beautiful... or funky... or whatever type
of color scheme you want.
Design & Web Help
The fab resource, Designers Toolbox, has a lot of features to help you create better websites including:
CSS Generator
Web Banner Ads size chart
Special Characters in HTML chart
Legal forms for model releases, copyright, freelancers, etc.
and for print folks, a great chart of standard printing sizes for all the most common layouts (envelopes, CDs, postcards, etc.)
How to Create a Print Style Sheet
Kinda annoying how some of these tutorials print out with all the navigation and right-hand pictures and other stuff you'd rather not spend ink on. Well, I learn how to create navigation and right-column free print pages using CSS!
How to Format Web Images so they have a nice space all around them and a very thin, elegant border.
Show Me the Money!
There are lots of way to make money with your website. You can receive online
donations if you are a 501(3)c. You can sell your own products. You can become
an affiliate and sell other people's products and get a percentage of each
sale. You don't need a confusing shopping cart or merchant's account or any
of that stuff, just follow these easy suggestions!
How to Create PDFs
Say you spent a lot of time making a great newletter in Microsoft Publisher
and you want to put it up on your website -- and don't want all that cute
formatting to go down the drain. Or a perfect organizing flyer in Quark or
InDesign or whatever? Turn any document or webpage into a PDF formatted document
-- perfect for the web -- using the program Acrobat (no, not the free Reader,
the $450
program that CREATES PDF files; or get it cheap as part of Adobe Suite at TechSoup.org). Here's how to do it.
Create a Photo That Sits on the Bottom of the Webpage
See how Toshi Reagon appears to be sitting on the bottom of her webpage, even if you scroll around, she stays seated at the bottom! Yes, she is so cool. How'd she do it? Well:
(1) Take a photo and cut the performer out of the background ("mask" it using photoshop) and save as a GIF, make the background has the "transparent" box checked. Too difficult of a masking project? Then make the background white and use on a webpage with a white background.
(2) Then you HAVE to position the image using a stylesheet, otherwise the image will not stay put at the bottom of the page. Use a background image style and make sure it doesn't repeat and is positioned as "bottom" (and left or wherever else you want it). See all the CSS styles for background images (thanks, Dale).
Simple Password
Learn to create the simplest password protection for a webpage. This does
not require a database, just a simple JavaScript. It is not very secure,
but a good first exercise in learning how to create passwords.
Using Addon Domains in LunarPages
Okay, you took my advice and moved up to web hosting from LunarPages.com. Now
you want to take advantage of their ability to host 11 smaller sites
on the resources (and bill) of one site! To do this you have to add an "Addon
Domain."
How to Create Forms
Forms are at the center of any interactive, successful website. People love
to express themselves and forms make this easy and more fun. But, the actual HTML form is only half the job. To work properly, your form has to be linked to a program on your server that will handle the work of receiving the form data and processing it. This can be very difficult for beginners. If you are just starting out, I recomend using a third party service that handles the form data and emails it to the proper folks. Some of these third party services are free and don't spam you with ads. Many people use Response-O-Matic.com. With Response-O-Matic.com you get one free form per website. Here is how to do it!
Assuming you have used you one free form option up at Response-O-Matic.com you are now ready to do the easiest type of form, the CGI-script driven form. This method assumes you have access to the CGI folder on your server (Lunarpage people do, Directnic and super-cheap hosting users do not). Learn about CGI scripting and why you want this! Download a good script for forms. Too hard, can't afford Response-O-Matic, these folks are cheaper (I haven't used, not an endorsement).
Then, when you've mastered CGI script-driven forms, learn the professional way. When you are ready and you have Dreamweaver CS3, use these two tutorials to learn how to make more advanced forms (or this official Adobe tutorial, sorry project files only come with $50 book) using Spry Form Validation. Okay, this tutorial doesn't teach you how to process the form (keep using your CGI script or take a PHP class). There is a great, basic, cheap PHP class by and for nonprofits by Altharia (yes it's in DC, but the money you save in tuition you can take the Chinatown cheap bus & still come out way ahead).
Audio on the Web
People have 5 senses and love to communicate in other ways than print and graphics
(visual). You can add quality audio to your website for FREE! Yes, the programs
SourceForge Audacity and Lame are made for Windows, Mac and Linux.
Lots of CSS Tutorials
These tutorials show you how to do the 52 most common things you'll want to do in CSS, including: CSS navigation, drop shadows on photos, pullquotes, zooming (making type bigger), printing (print style sheet), formatting footnotes and so much more. www.smashingmagazine.com
The Ultimate Tutorials for CSS-Only Drop Down Menus
www.cssplay.co.uk/menus/final_drop.html
Rounded Corners in CSS
How
do can your website get those adorable little rounded corners? Sure, you could
use complex tables or JavaScript. But there is an easier and better way to
do it in CSS. I got this online from the wonderful web technologist, AdamKalsey.com. This tutorial is on his website at:
http://kalsey.com/2003/07/
rounded_corners_in_css/
And here is another way, yes, using Nifty Corners (corners but without using graphics, only JavaScript and CSS). Thank you Alessandro Fulciniti.
Advocacy/Communication Help
www.activationpoint.org
www.smartchart.org
I wouldn't call them tools, but rather, guides to good communication. They get at the fundamentals that so many of us tend to skip in the excitement of shiny technology. The philosophy here is to put together a good communications strategy. The online and offline tools that one uses will then follow more easily.
Favicons
How
do I get those cute
little icons before my website name in the address bar
when it is added to My Favorites? And what the heck are they called (favicons!).
Embed a map on your website
On Google Maps, pull up the map you want to embed-- it can be a location, a business, a set of driving directions, search results, or a map you've created. Then copy the embed code by clicking "Link to this page," and paste the code into your blog or website. You can create a map using the map-making tools in the My Maps tab and display it on your website using this embed feature.
Automatic Bookmark Script
Don't leave it to chance - or a good memory. Instead, remind visitors to bookmark your site while they're reading your content. Use this automatic bookmark script to keep interested visitors coming back for more.
How to Create Email Lists
Okay, there's the easy way and the hard way. Start out with the easy way (Yahoo Groups) and when you are ready switch to the also free and fabulous, PHP List. Read how.
Useability (User-friendly design)
"For 90% of websites, it's more important to focus on communicating clearly, whether they're e-commerce sites, corporate sites, government sites, or non-profit sites. If you are building a porn, gambling or art site you can go for graphics and "coolness" and ignore useability, but otherwise prioritizing user-friendly, clear communication will lead to popular, sucessful website.
Most web designers actually care about the 'Net for its own sake, and go gaga over new technology. In contrast, average users just want to complete tasks online. They don't particularly like the Web, and they'd like to get back to their jobs or families as quickly as possible.
Don't be deluded into thinking that your preferences and interests represent those of normal customers.
One of usability's most hard-earned lessons is that "you are not the user." If you work on a web project, you're atypical by definition. Design to optimize the user experience for outsiders, not insiders. The antidote to artsy and unuseable sites is user testing: find out what representative users need. It's tempting to work on what's hot, but to make a popular website, make money and help people, focus on the basics that customers value." Read entire article on design priorities.
By Jacob Neilson, "the world's leading expert on user-friendly design." Sign up for his free bi-weekly column on web useability.
Website Re-Design Client Survey Tool
An organization doesn't magically grow or raise money by having a website. The website is a TOOL to further an organization's strategic (and fundraising) plan. There is a great online website tool for the client to fill out (or by the consultant with the client if they are not very techie/literate). Also, a more advanced fabulous book with many great tools (and my favorite) is Web ReDesign 2.0: Workflow That Works (by Kelly Goto & Emily Cotler).