TinkerTech.net Logo - resources for the aspiring web designer
Google Search
wwwsite

 

Home > Tips

2/23/05 - I thought I would write up a few of the tips that Mani gave us last week when she came to speak to class.

Relatively Absolute - This is the article that made positioning "click" for Mani. After visiting the site, I found another article on floats that you may find useful.

PNG Transparency - Mani displayed Nomad Ecological Consulting; where she utilized PNG Transparency - I found a resource on how to use PNG files in IE. AListAPart also has an article on Cross-Browser Variable Opacity with PNG: A Real Solution. You can see the actual JavaScript that she used for the Nomad site here. Webfx also has an article on PNG Behavior. Main said the PNG Transparency script that has worked best thus far is as follows:

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", alphaBackgrounds);
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
}
}
}
}

Resetting the padding and margins - Mani also discussed the trick for resetting margins and padding since browsers tend to have inconsistent settings. Here is the code that should be used at the top of your CSS file:

* {
margin:0;
padding:0;
}

Heading Images - Helping search engines index you site - The problem with having a heading image at the top of your web page is that search engines need text at the top of the page to properly index your site. Mani showed us a way to provide search engines with the needed text while still creating a beautiful design.

In the CSS code create an ID with the the background set as the image banner.

#logo {
width:745px;
height:149px;
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
background:url(../images/logo.jpg) no-repeat top left;
}

Position the nested H1 tag off the page.

#logo h1 { /* hides H1 headings in browsers that support css so that only image is seen ... H1 headings will display in browsers not supporting CSS*/
font-size:.01em;
position:relative;
left:-5000px;
margin:0;
padding:0;
}

In the XHTML document place an h1 tag nested in the ID with the title of the page

<div id="logo">
<h1>Sheriar Designs: Impeccable Code, Beautiful Design</h1>
</div>

!important ignored by Internet Explorer

If you would like to add some CSS code that will be ignored by IE, use !important

margin-left: 2.7em !important; (all browsers with the exception of Internet Explorer with have a 2.7em left margin.

margin-left: 2em (Internet Explorer will have a 2em left margin)

Commenting CSS - It's important to use detailed comments in your CSS code.

Here are a few of the helpful sites that Mani mentioned or sent to me

  1. StopDesign
  2. Position is Everything - A web site dedicated to this issues of CSS positioning.
  3. CSS Discuss
  4. Web Standards Project
  5. CSS Zen Garden
  6. MezzoBlue
  7. Eric Meyer
  8. SimpleBits
  9. Web Standards Group
  10. Andy Budd
  11. Layout Resovoir
  12. Brain Jar
  13. CSS Max Design
  14. Design Meme
  15. Design Principles
  16. Digital Web Magazine
  17. Evolt
  18. HTML Dog (Son of Suckerfish - Menus)
  19. Autistic Cuckoo - Relatively Absolute Article
  20. What Do I Know
  21. Saila
  22. Steel Dolphin

1/14/05 - Wow, it's been a long time since I've put a tip on this page, time for some fresh content! It's a good idea to periodically backup your Dreamweaver site settings. When you backup your site settings the backup file is saved with an *.ste extension. This file includes your Remote site information (FTP username, login name, and password), Local Site Information, (the local path to your root folder), and any testing server information you may have setup. This is especially handy if you have to switch to a different computer or you want to setup classroom site definitions at home. This process does not backup the actual site files (html). To manually backup your Dreamweaver Site Definitions, perform the following steps:

  1. Click Site > Manage Sites.
  2. Select the site you would like to backup from the list, click Export.
  3. Select Back up my settings (includes login, password and local paths).
  4. Save the site definition file inside your site folder (you can save it to another folder, but it should be easy to find in the site folder. You may want to give this file the same name as your site.
  5. Repeat this process for each of your sites.
  6. To Restore the Site Settings.
  7. Click Site > Manage Sites.
  8. Click Import.
  9. Browse to your site folder and locate the ste file, click Open.

If you are prompted for to Choose the local root folder for site "sitename", navigate to the folder that contains your site files (html). You will probably receive this message if you copy a site definition in class and then Import the settings at home. You must tell Dreamweaver where the local files are located if they are not found in the same "exact" folder path that was used when you performed the Export. Since you do not have a drive F:\ at home, you will have to navigate to the new folder location. A new site cache will be recreated and you're done!

11/19/03 - We will create fall greeting cards in class today. The materials that you need can be found here.

10/23/03 - There are times that you may want to use a font in a graphics program without installing it to your system (remember that too many installed fonts use valuable computer resources (i.e., slows down your computer)). You can keep a folder of fonts on your C:\ drive. I store the fonts that I don't use all the time, but I want to be able to access quickly in a separate directory called C:\fonts. When you want to use a font that is located in the C:\fonts folder, open the folder and double click the font name. When you double click the font a preview window will appear, minimize the preview window. Open the graphics program that you want to use and the font should be available. Keep in mind that you must minimize the font window and you must open the graphics program after you minimize the font. The font must be opened and remain open whenever you are editing a file that uses it. I know this trick works in Paint Shop Pro, Fireworks, and Photoshop. Visit putertutor.net for additional information on installing and managing fonts.

There are additional fonts available in the classroom on our server for your web projects. They can be accessed in Windows Explorer on drive download on 'rop' (R:) in a folder called fonts. You can use the above directions to temporarily use the fonts or you can install them. To install fonts right click the Start menu and select Explore. Open the Winnt folder on drive C:\ and then select the fonts folder from within the Winnt folder. Click File > Install New Font. Navigate to the download on 'rop' (R:) drive and select the fonts folder where the fonts are stored. The available fonts will appear in the list of fonts, click the font that you want to install/use and click Ok. (You can select more than one font by holding down the CTRL key while clicking the font names.) The font will now be available for use. Please do not install all of the fonts in the directory on your system. There is a folder on the back top shelf (next to the closet) that contains printouts of all of the available fonts.

9/29/03 - It is very important to get into the habit of proofreading your HTML code. Here are a few tips for proofreading. Thank you to Dale Mead for his additional suggestions on proofing.

  1. When quotations are used, such as around tag attribute values they should be used in pairs. Make sure that you have an even number of quotes in your code. There should usually be a space after a quotation mark.
  2. HTML, Cascading Style Sheets and JavaScript all commonly use punctuation in pairs. A very handy way to minimize omitting one of a pair is to first create the pair, then go back between them to add content. For example, write width="", and then go back and put in the content: width="50%". This works for "", <>, (), [], {}, and even <!-- -->.
  3. Make sure that spaces are used appropriately. Make sure that there is a space after a quotation mark, a space between an <a href> tag,
  4. Check to be sure that correct casing has been used. Generally, this means using only lower case for all HTML tags and attributes. Use upper case or upper-and-lower case only in content or values that your site visitor will see, to comply with standard English usage.
  5. Make sure that all tags are closed. You can take the pairs practice (tip #2) one step further to close tags: Create the tag (e.g. <table>), then the closing tag (e.g., </table>), and then back up between them to add content. This significantly reduces omissions.
  6. If you can't find an error in your code on the computer monitor, print the code and proofread it again. Place a straight-edge under each line of code to proofread it more accurately.
  7. Use an HTML validator to help find mistakes in code. Open your page in Dreamweaver. Dreamweaver will highlight some HTML code errors.
  8. Don't forget: Internet Explorer serves as an JavaScript validator when you preview your page out of TextPad. If it picks up an error, it puts a yellow Alert triangle at the bottom left corner of the preview window; double-click on it to get a clue. When you read the IE alert, also note if the Previous button is active; if so, click on it to see a previous error that might be causing the initially revealed error.
  9. Be sure to test your pages on several different browsers.
  10. Have a friend proofread your code and content.
  11. Take a break. It's easy to miss errors when you have been reading something for too long.
  12. Use a spell checker.
  13. Read your content out loud.
  14. For tips on proofreading JavaScript, read Tutorial 8 of the HTML/XML assignment sheet.
  15. If you receive a JavaScript error in the classroom that includes a link to another web site the site may be blocked by our firewall and this would cause a script error. This error may only appear in our classroom and not on other systems.

10/16/02 - With my new passion for digital photography, I have recently signed up with a lot of photography groups, bought a lot of books, and read a lot of magazines. You could say I've gone over the edge with this, but I'm really enjoying my new hobby.

First I took Digital Photography and Digital Darkroom classes at LVS Online, along with some other classes. The classes were awesome. I'm going to take the Digital Photography class again in November, just so I have an excuse to go out and take photos. I joined a photoblog web ring called 1000 Words. A blog is an on-line daily journal (similar to a diary). A photoblog is a daily journal of photos. A web ring is a group sites with similar subject matter linked together by a piece of HTML code. There are web rings for everything imaginable from adoption to zoology. Web rings allow surfers to find lots of sites on a particular topic and they also increase traffic for site owners.

1000 Words Web Ring's only requirement is that you post a photo on your site for other members of the ring and the general public to view every 4-7 days. Most people who belong to this web ring use some type of journal/blogging program. You can use http://www.blogger.com or you can setup a blog system on your own server. Most blogging programs require that your server have MySQL and PHP enabled and have CGI/PERL capabilities. Since I am also taking a PHP/MySQL class at LVS, I decided to try out my luck with various blogging programs. I figured that this would also be a good project to help me to learn PHP.

CafeLog has a blog program called b2. b2 is written in PHP and uses MySQL as the database. Configuration is straightforward (requires knowledge of HTML), but the manual is very easy to understand and the files that you have to configure have comments to instruct you on how to change the configuration information. b2's blog page is connected to a CSS template, this template controls the look of the page. You can configure the template any way you like as long as you know CSS. Once you get everything configured, there is a web page interface that you use to type your journal entries, after they're typed, you click Blog This and the entry is online in a matter of seconds. I am in the process of decorating my b2 Photoblog, so excuse the mess, but you can see it in action here http://www.tinkertech.net/blog/index.php.

I am also setting up another blog with a program called Movable Type. I've seen a lot of photoblogs that use this program. The installation instructions were very involved, so for $20 I had them install it on my server for me. MT used XML, MySQL and PERL. There is a web interface like b2 that allows you to customize your blog and add entries, etc. Like b2, the style of the site is controlled with a CSS file, so you can modify the look of the site. There are also a variety of styles/templates that you can choose from and there are sites devoted to blog templates, styles, and tutorials. I have not gotten to add any entries to or customize my MT blog yet, but you can see what the blog looks like when it's first setup here http://www.tinkertech.net/photolog/.

There is also a program called pMachine. I haven't had a chance to check it out yet, but it looks very feature rich.

I'm finding that this is a really good way for me to improve my PHP, MySQL, and CSS skills. I think that it's important to have a fun project to work on to learn something rather than just doing lessons in a book. So if you're interested in photography, writing, or you want a way to quickly post news clips or updates on your site, check out some of these blogging programs.

Here are a few sites that I found helpful:

Web Reference CSS Layout References & Info BlogStyles
HTML Goodies - CSS Blue Robot Layout Resevoir
GlassDog Web Design Glish - CSS Layout Techniques
Love-Productions.com PHP Princess
Skinning a Web Site  

Next Page

Tips - Page 1 | Page 2 | Page 3 | Page 4 | Page 5

Stop by my Amazon Store for gifts for the web developer.

Visit Robin's Blog for more web design and development resources.
©Copyright 2001-2006 - Robin Wood - Send Questions or comments to robin at tinkertech dot net.
Last Updated: December 19, 2006