Adding Dynamic Bits
You can add interesting bits on basic static web pages that can make them feel a bit more lively and provide modular information, like maps for directions. Often these items will not validate properly, so if you do use them, make sure to add a comment before the inserted code that doesn't validate so that you can recognize (and then ignore) the issue.
You also might have questions on other finishing touches, so I will list a few goodies here in the form of How Do I? questions/answers.
How do I:
Show the W3C Validator without the icon?
Place the Validator Icon code inside your page footer section, remove this code (<img src=”http://www.w3.org/Icons/valid-xhtml10-blue” alt=”Valid XHTML 1.0 Transitional” height=”31” width=”88” />), and replace it with the word Validate.
Make sure my site is ready for indexing?
• Use Google Webmaster Tools - you must have an existing Google/Gmail account to log in before you can add the website you want to check.
• You can also try the free tools on AddMe.com - meta tag generator, keyword den- sity, broken link check.
• Will only work on a remotely loaded website (not your local computer or pen drive).
• Make sure to validate your live site too!
Offer plug-ins on my site?
By plug-ins, I mean adding the option for a visitor to download a program that will allow them to access something on your website. Just look up and provide these links (as need- ed) on your website to send the visitor to the download area, where s/he can download the program to install in his/her computer to view the related material you are publishing on your website.
• Acrobat Reader
• QuickTime
• Flash Player
Embed a Google Map?
It's easy, there are short simple samples of how to embed the map of your choice. You can either choose a map that you can manipulate (just like on the http://maps.google.com web page) or choose to use the Static Map.
Make sure to add the Google Maps API Key in your head section (a meta tag) for later troubleshooting.
Embed a Google Calendar?
Another easy item - you can embed a Google calendar once you (or your client) has a Gmail account and a Google calendar set up. There's an events publisher too.
Embed a Google-based external RSS feed?
It's easy too, and you can choose more than one feed source and from 3 different layouts.
Make sure to add the Google AJAX API Key in your head section (a meta tag) for later troubleshooting.
Add a Google Search engine to my website?
You can check with your web host (like DreamHost) to see if the host provides this option for free. The Google version is not free, but you may find a free or low cost search module to embed into your HTML code. These may be ad-sponsored, so double-check before you add one to your website and find you have ads popping up.
Add a social networking toolbar so folks can bookmark and share my site?
Just go to AddThis.com and choose your service (website) and format, then embed the code into your web page as needed. “Help your visitors share your content everywhere. Generate traffic back to your site and increase your site's search engine ranking.”
Embed a video/media?
YouTube has code on each video's page that you can use to either link to the video on YouTube or to embed the video itself into your page.
You can also search online for an HTML generator for embedding different media.
Add a simple photo gallery?
You can add a simple gallery to your website without knowing much CSS or JavaScript. Lightbox 2 is one example, and Picasa is another.
Create a Favicon to show up in the tab of my website on the Internet?
• Go to favicon.cc to create a graphic
• Download when you are finished
• Put the favicon.ico file into your webserver directory - main directory where your index page is.
Explore other widgets to add to my website?
Visit Widgipedia for a variety of free open source widgets to embed/use. They are not all for beginners, so plan to have the time to explore, do trial-and-error, etc.
Sell items on my website?
If you really, really must have a basic purchase option on a website, you can use PayPal. Your client will have to set up a PayPal Account and do the financial heavy lifting before you can add any PayPal links/process to the website.
• DO NOT let yourself get pushed into doing the account yourself!!
• Make sure you have ample time to do this - at least 3-4 weeks for your first time (including dealing with your client, your client setting up the account, setting up and testing the shopping cart and buttons, etc.).
• Go to PayPal for all the information on the database driven PayPal Shopping Cart.
• Check out the Website Payments Standard too. It is not a shopping cart.
Do Conditional Formatting for different IE and Firefox CSS style sheet files?
<head>
Title, metatags, AND then:
<!-- STYLE SHEET IN APP_THEMES activating based on browser sniffed-->
<link rel=”style sheet” type=”text/css” href=”styles.css” />
<!--[if IE]> <link href=”iestyles.css” rel=”style sheet” type=”text/css”>
<![endif]-->
<!--[if !IE]>--> <link href=”styles.css” rel=”style sheet” type=”text/css”>
<!--<![endif]-->
</head>
Find simple things to add to my sites?
• DHTML Goodies
• Dynamic Drive
Get a fixed navigation when page is scrolled?
In your Cascading Styles, add the following attribute/value pairs inside your <div> class for navigation:
position:fixed; width:???; top:???; left:???;
Add an alternate style sheet to my web page?
Add the following link to the alternate style sheet in your web page's <head> section:
<link media=”screen” rel=”alternate style sheet” title=”alternate style sheet” type=”text/css” href=”altstyles.css” />
Add a style sheet for printing?
Add the following link to the print style sheet in your web page's <head> section:
<link media=”print” rel=”style sheet” type=”text/css” href=”printstyles.css” />
Add a style sheet for mobile devices?
Add the following link to the mobile devices style sheet in your web page's <head> sec- tion:
<link media=”handheld” rel=”style sheet” type=”text/css” href=”mobilestyles.css” />
Create a Tag Cloud?
You can plug in your completed website at http://www.tagcloud-generator.com/, which will capture existing links. Then you can use the style options to set link colors, random link sizes, etc. Note: The tool builds inline, not CSS, styles. You can still get a lot out of it and create classes in CSS based on the inline styles.
What happens if I set a specific height or width on an element (like a <div> for layout), and the content inside cannot fit?
This is called overflow, and you can learn more at the CSS Tricks - The CSS Overflow Property
Where can I learn about other CSS tricks?
You can go to a website called CSS Tricks. It covers all sorts of neat stuff, like CSS sprites, CSS transparency settings, and other CSS goodies. Keep in mind that CSS trick should be about mastering clean CSS with new and evolving ways of coding, nbot relying on old, out-of-date hacks from when CSS was new and browsers were. . . old.
Sitepoint also has 10 useful CSS tricks, such as dealing with minimum and maximum width, disappearing text or images in IE, a 3-d push button effect, and more.
Smashing Magazine has a great listing of many exciting CSS tips.