Margins using CSS
9:59 PM Posted by BlogTechno
margin-top: length percentage or auto;
margin-left: length percentage or auto;
margin-right: length percentage or auto;
margin-bottom: length percentage or auto;As you can also see in the above example you have 3 choices of values for the margin propert
- length
- percentage
- auto
You can also declare all the margins of an element in a single property as follows:
margin: 10px 10px 10px 10px;If you declare all 4 values as I have above, the order is as follows:
- top
- right
- bottom
- left
If only one value is declared, it sets the margin on all sides. (see below)
margin: 10px;If you only declare two or three values, the undeclared values are taken from the opposing side. (see below)
margin: 10px 10px; /* 2 values */
margin: 10px 10px 10px; /* 3 values */You can set the margin property to negative values. If you do not declare the margin value of an element, the margin is 0 (zero).
margin: -10px; Elements like paragraphs have default margins in some browsers, to combat this set the margin to 0 (zero).
p {margin: 0;}Note: You do not have to add px (pixels) or whatever units you use, if the value is 0 (zero).
You can see in the example below, the elements for this site are set to be 20px (pixels) from the body
body{
margin: 20px;
background: #eeeeee;
font-size: small;
font-family: Tahoma, Arial, "Trebuchet MS", Helvetica, sans-serif;
text-align: left;
}
CSS Spans
9:54 PM Posted by BlogTechno
Spans are very similar to divisions except they are an inline element versus a block level element. No linebreak is created when a span is declared.
You can use the span tag to style certain areas of text, as shown in the following:
<span class="italic">This text is italic</span>Then in my CSS file:
.italic{
font-style: italic;
}The final result is: This text is italic.
CSS Divisions
9:53 PM Posted by BlogTechno
Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. A division can contain all the parts that make up your website. Including additional divisions, spans, images, text and so on.
You define a division within an (X)HTML file by placing the following between the <body></body> tags:
<div>
Site contents go here
</div>Though most likely you will want to add some style to it. You can do that in the following fashion:
<div id="container">
Site contents go here
</div>The CSS file contains this:
#container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}Now everything within that division will be styled by the "container" style rule, I defined within my CSS file. A division creates a linebreak by default. You can use both classes and IDs with a division tag to style sections of your website.
IDs in CSS
9:44 PM Posted by BlogTechno
IDs are similar to classes, except once a specific id has been declared it cannot be used again within the same (X)HTML file.
I generally use IDs to style the layout elements of a page that will only be needed once, whereas I use classes to style text and such that may be declared multiple times.
The main container for this page is defined by the following.
<div="" id="container" everything="" within="" my="" document="" is="" inside="" this=""></div>
I have chosen the id selector for the "container" division over a class, because I only need to use it one time within this file.
Then in my CSS file I have the following:
#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}You will notice that the id selector begins with a (#) number sign instead of a (.) period, as the class selector does.
Classes in CSS
9:36 PM Posted by BlogTechno
The class selector allows you to style items within the same (X)HTML element differently. Similiar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an (X)HTML file.
To put it more simply, this sentence you are reading is defined in my CSS file with the following.
p {
font-size: small;
color: #333333
}
font-size: small;
color: #333333
}
Pretty simple, but lets say that I wanted to change the word "sentence" to green bold text, while leaving the rest of the sentence untouched. I would do the following to my (X)HTML file.
p {
font-size: small;
color: #333333
}
font-size: small;
color: #333333
}
Then in my CSS file I would add this style selector:
.greenboldtext{
font-size: small;
color: #008080;
font-weight: bold;
}
font-size: small;
color: #008080;
font-weight: bold;
}
The final result would look like the following:
To put it more simply, this sentence you are reading is styled in my CSS file by the following.
Please note that a class selector begins with a (.) period. The reason I named it "greenboldtext" is for example purposes, you can name it whatever you want. Though I do encourage you to use selector names that are descriptive. You can reuse the "greenboldtext" class as many times as you want.
Website Navigation Tips
9:15 PM Posted by BlogTechno
Effective Navigation Guidelines
While designing the navigation for your site keep the following points in mind:
* Organized Links
Make sure your links are well organized according to the order of importance. Visitors should be easily able to find what they are looking for under different categories.
E.g. All our main links are found on the top i.e. our services, products,portfolio, resources etc.Other interesting links are found on the right of the page. These are common and consistent throughout the site.
Finally if the web page belongs to a guide E.g web design guide you will find the related links below the right menu and also at the bottom of the page.
Note: Related links are very important as visitors coming to a particular page will probably be interested in more information you have under the same topic.
* Clear and Prominent
Once you have decided on your navigation links, you need to think of the best place to put them. Navigation should be clear and consistent. Try to design your navigation on the top or on the left as these are the first places our eyes go to. Also locate the primary links high enough on the page so that they are visible without scrolling. Navigation images should be seamlessly integrated into the site design. Avoid putting navigation links at the bottom of the page as visitors will need to scroll right down to see the links. If you like you could put the important links at the top AND bottom of the page just to make sure your visitors don't miss the link.
* Consistent
Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Don't confuse your visitors by putting your navigation links in different places in different pages.
* Easy to understand
Make your links easy to understand and to the point. Usually you won't have enough place to have long links so make use of the space wisely. Visitors need to know where they will go on clicking on a particular link, so make sure your links are understandable or nobody is going to click on your links, which will defeat the purpose of designing a good navigation system.
* DHTML Menus
If you have a large number of links under categories and sub-categories you could use navigation menus to organize your links. There are many cut 'n' paste scripts available on the Net that you could use to create great navigation systems. A favorite resource center is SimplyTheBest.net, you'll find tons of useful navigation menus that are very easy to install on your site.
Keeping these basic points in mind you can go ahead and design an effective navigation system for your site. Take a look at other sites to get some ideas on good navigation techniques! Another good idea would be to use eye-catching visuals and small chunks of information to draw visitors to click on a link.
Default values in CSS for browser compatibility
2:38 PM Posted by BlogTechno
* {margin:0; padding:0; border:0}
to the top of their CSS file to reset everything. But do you really thing that it is enough to reset everything? Use following code block on the top of your CSS file and see what else you’ve missed to reset.
a:link, a, a.visited
{ text-decoration:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,blockquote,th,td,p
{ margin:0; padding:0;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var
{ font-style:normal; font-weight:normal; }
ul,ol { list-style:none; }
caption,th { text-align:left; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
{ text-decoration:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,blockquote,th,td,p
{ margin:0; padding:0;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var
{ font-style:normal; font-weight:normal; }
ul,ol { list-style:none; }
caption,th { text-align:left; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
CSS to load hover buttons faster
10:38 AM Posted by BlogTechno
Example
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}
The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.
Changing Link Colors with CSS
10:29 AM Posted by BlogTechno
This guide shows how to specify link colours with CSS whether you want the same colours for all links or different colours for certain links. Also includes how to change the colour “onmouseover” (hover colour).
Specifying the default colour
If you want to specify the default colours which will be used in a web page you should use the following code. These colours will be applied to all links in the document.
<style type="text/css">
a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
</style>
This code specifies that all links should be black (#000000), active links should be blue (#0000ff), links which have been visited should be green (#008000) and the hover colour, when you mouseover the link, should be red (#ff0000).
The text decoration has been specified as “underline” which disappears on mouseover. Text-decoration can be “none” “underline” “overline” “line-through” “blink” or “inherit”. You can also add many other styles such as borders, font-family etc.
Note: If you specify the “color” you should also specify the “background-color”.
Specifying different colours for different links
If you want to have different colours or styles for certain links you need to assign those links a class and write the styles for each class.
Assuming we have two links “Blue Bold Link” and “Red Italic Link” we assign each a suitable class link this:
<a href="blue.htm" class="blue">Blue Bold Link</a>
<a href="red.htm" class="red">Red Italic Links</a>
Our css for these links would be in this form: (note: blue=#0000ff, red=#ff0000)
<style type="text/css">
a.blue:link {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:active {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:visited {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:hover {color: #0000ff; background: #ffffff; font-weight: bolder;}
a.red:link {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:active {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:visited {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:hover {color: #ff0000; background: #ffffff; font-style: normal;}
</style>
You can have any number of link styles on a page once you assign each one a class and specify the styles for each class. Effective use of “hover” can add a lot to a web page. Experiment!
Email Links using Dreamweaver
6:27 PM Posted by BlogTechno
A mailto link will only work if the browser supports e-mail and is setup to work with a local e-mail system.
Step 1 : In the document window position the insertion point where you want the email link to appear, choose Insert>Email Link, the Email link window opens.
Step 2 : In the first input box enter the text you want to appear in the document as an email link and in the next box type in the email address. Next click on OK.
Step 3 : Now you'll see the text as an email link in your document. In the property inspector the Link input box will contain the text ' mailto:mail@tutorailsforweb.com’
To create an e-mail link using the Property inspector:
Step 1 : Select the text or an image in the Document window's Design view.
Step 2 : In the Link text box of the Property inspector, type mailto: followed by an e-mail address. (Do not type any spaces between the colon and the e-mail address) eg. mailto: mail@tutorailsforweb.com
Creating anchors in Dreamweaver
6:24 PM Posted by BlogTechno
Creating anchors and linking to them
Step 1 : Place the cursor in the section of the page you want to link to.
Step 2 : Select Insert>Named Anchor and type a short descriptive name for that section and click on OK. A yellow anchor icon will appear. If you want to edit it double click on this icon.
Step 3 : At the top of the same page type a link which is going to link to this anchor. With this link selected go to the link box of the property inspector type a # sign followed by the anchor name. If the link is given from another page then the file name has to be given before the anchor name, eg. book.html#para8
Get organized with layers in Photoshop
9:47 PM Posted by BlogTechno
- Name your layers descriptively: Double-click the name of the layer to rename it from “Layer 3” to something more helpful, such as “left column background.”
- Group layers together: Photoshop allows you to group layers together into “folders.” If you’re making a web site comp, you may find it helpful to group together the layers that hold objects related to the top header area, for example. You can also name the groups descriptively. You can even group groups together into subfolders. Click the folder icon in the bottom of the Layers palette to create a new group. (And a keyboard shortcut: Select your layers first, hold Shift, then click the folder icon. This will automatically create a new group with those selected layers so that you don’t have to drag them into the folder later.)
Integrating these skills and tips into your Photoshop workflow will save you time – and we always need more of that!
Non-destructive editing techniques in Photoshop
9:44 PM Posted by BlogTechno
Let me give you an example of the difference between “destructive” and non-destructive editing. One common modification for pumping up the contrast on a photo is to use the Image > Levels command and dragging the outer sliders towards the center:
his permanently changes the photo (i.e., once you save and close it, there’s no going back), so it’s an example of destructive editing.
To change the levels non-destructively, you can add an Image Adjustment layer in the Layers palette. Click the Create new adjustment layer icon in the bottom of the Layers palette and choose Levels.
The same Levels dialog box will come up and you can make the same changes, but instead of permanently changing the photo layer, you’ll see an additional layer come up in the Layers palette.
The beauty of adding the adjustment layer is that you can always go back and change the adjustment by double-clicking on the Levels 1 thumbnail. Or, you can turn it off by clicking the eye icon to hide the layer. Or, you can remove it completely by deleting the layer! You can add more adjustment layers on top of this one to continue to make “changes” to the photo – all without touching the original photo. In contrast, using the Levels command directly on an image means that if you change your mind and want to redo your adjustments, you’d have to start over with a fresh copy of the original photo.
Other tips for non-destructive editing:
- Use adjustment layers for photo-type adjustments. Most of the adjustment-type changes you would make to an image layer can be done using adjustment layers for non-destructive editing, as I’ve shown in the Levels example above.
- Use vector shapes with layer style effects. Using the marquee tool to create a rectangle selection, filling it with the paint bucket tool, and adding a gradient using the gradient tool, results in a pixel- or raster-based layer where you’d pretty much have to recreate the layer if you wanted to make significant shape or color changes. In contrast, creating a vector rectangle and applying a gradient layer effect allows you to change the shape of the rectangle or change the gradient effect at any point very easily.
- Use layer masks to hide portions of layers. Using the eraser tool will permanently remove information from a layer. Instead, add a layer mask and use it to hide the parts of the layer that you don’t want to show. You can then always go back and edit the layer mask to hide or show more of the original picture or remove the layer mask altogether.
Creating Actions in Photoshop
9:33 PM Posted by BlogTechno
1. Opening the photo.
2. Going to File > Image Size and entering in a new width or height, then clicking OK.
3. Saving the photo for the web in a different folder.
4. Closing the photo without saving.
Instead of going stir-crazy by doing this for all of your 257 photos, let Photoshop do the work by creating an Action! Here are the basic steps for making your own custom Action:
1. Open the Actions palette by going to Window > Actions.
2. Click the “Create new action” icon in the bottom of the Actions palette.
3. Name your action – for example, “Resizing photos.”
4. Notice that the recording button is immediately active, so any commands that you do in Photoshop will be recorded. If you’re not ready to record, hit the Stop button. When you’re ready, click the Record button to begin recording again.
5. I would start with the photo already open before recording (you’ll see why later on). Then, you can proceed with your normal steps and perform your tasks on the photo, including saving the photo for web and closing the photo without saving. As you perform your tasks, you’ll see a list of Photoshop commands building under the Actions palette. When you’re done, hit the Stop button.
6. For this particular example, however, I’m going to deviate slightly from what I would normally do. Let’s say you have a mixture of landscape and portrait photos. When resizing the image, you would pick the larger dimension and change that size. Creating an action this way, however, would force you to make two separate actions – one for portrait photos, one for landscape photos. Luckily, Photoshop has a built-in command for “fitting” the resized photo into a certain area. So when recording my action, instead of going to Image > Image Size, I’ll go to File > Automate > Fit Image and type the width and height that I want the image to be resized within.
7. So, my Action would really look more like this, with the Fit Image instead of Image Size command:
With your action complete, let’s test the action. Open up another photo, click on the name of the action in the Actions palette, and hit the Play button. Photoshop will go through the steps of your action. Check to make sure that the photo was resized and saved for web properly.
If all looks well, you’re ready to batch and automate! Go to File > Automate > Batch. Most likely your new action will already be selected, but if not, select it from the dropdown list. Change the Source to Folder and click the Choose button to set the folder to your collection of high-res photos that need to be resized. Also set the Destination to Folder and set this location to where you want the web-ready photos to be saved. Finally, you can set the other options for renaming the saved file or overriding commands as necessary. One important option to set is to change the Errors dropdown to Log Errors to File, click the Save As button, and select the filename and location for your error log file – this way, if Photoshop runs into a problem, it will log the issue and keep going instead of stopping the process completely.
Then click OK, sit back (or go take a lunch break), and watch Photoshop perform its magic!
More keyboard commands for photoshop
9:24 PM Posted by BlogTechno
But there are many, many other “hidden” keyboard commands for performing a variety of actions. Here are some that I’ve found to be indispensible in my daily Photoshop workflow:
- Holding the Shift key generally constrains movements to straight horizontal, vertical, or 45-degree angles. For example, if you’re using the Move tool to move a layer, holding the Shift key will allow you to move it perfectly horizontally (or vertically, or at a 45-degree angle) so that you don’t have to guesstimate your placement.
- The Alt key will often allow you to copy things, depending on the context. When you have the Move tool selected, holding the Alt key and then using the Move tool will allow you to copy the selected layer to a new layer. Or, if you’re working in the Layers palette, holding the Alt key down, clicking on a layer, and dragging it to another spot in the Layers palette will create a copy of that layer. The same thing works with the Path Selection tool when you’re working with paths.
- Holding the Ctrl key and then clicking on a thumbnail in the Layers palette makes a selection based on the pixels in that layer.
- Ctrl-D will clear all selections, such as selections you’ve made with the Marquee or Lasso tools.
- Holding the space bar temporarily switches you to the Hand tool so that you can easily move your canvas around.
- Change the layer opacity by simply typing in a number.
There are also more obscure keyboard shortcuts that you may or may not find useful. For example, here is a very small sampling of commands that you can use just for navigating around the Layers palette:
- Alt-[ and Alt-] allow you to select different layers in the Layers palette by moving up and down the layers
- Ctrl-[ and Ctrl-] allow you to move the selected layer up and down the Layers palette, thus changing the layer order
- Shift-Ctrl-[ and Shift-Ctrl-] move the selected layer to the very bottom or the very top of the layer order, respectively.
- Holding Shift-Alt and then using the [ or ] keys allow you to select multiple adjacent layers
Keyboard shortcuts for tools in Photoshop
8:49 PM Posted by BlogTechno
Keyboard shortcuts for the tools are displayed in a tooltip along with the name of the tool when you hover over the tool. In the diagram below, I’ve hovered over the Move tool. The keyboard short cut shows up in parentheses – in this case, if you’re in Photoshop and simply hit “v” on your keyboard, you’ll automatically switch to the Move tool.
Some tools have flyout menu options for selecting from similar tools. Often, these tools share the same shortcut. In the example below, you can see that the Brush tool, Pencil tool, and Color Replacement tool share “b” as the keyboard shortcut. Simply hitting “b” on your keyboard will switch to whichever tool was previously selected (in this case, the Brush tool). To switch to the Pencil or Color Replacement tools, you’ll have to type Shift-B to cycle through the other tools.
The easiest way to begin learning keyboard shortcuts is to focus on a couple of the tools that you use most often and practice using the keyboard shortcuts for them. As you commit them to memory and instinct, you can add on other tool shortcuts as you go! Here are the ones that I personally use most often:
* M – Marquee tools
* V – Move tool
* C – Crop tool
* B – Brush, Pencil tools
* U – Vector shape tools (rectangle, ellipse, etc.)
* P – Pen tools
* A – Direct Selection and Path Selection tools
* D – Changes the foreground color to black and the background color to white
* X – Switches the foreground and background colors
* Q – Changes between Quick Mask and Standard modes
Intro to Flash toolbar
8:40 PM Posted by BlogTechno
Arrow:
This is used for when ever you are not using any of the other tools. It selects individual objects or frames or a marquee for selecting multiple objects. It operates the tool bar and menu systems. etc.
Brush:
The Brush tool is not unlike the pencil but it allows you to create thicker objects and if you're in the mood it can also do calligraphy but I'll let you figure that one out.
Dropper:
Use the eyedropper tool to copy fill and stroke attributes from one shape or line and immediately apply them to another shape or line. The eyedropper tool also lets you sample the image in a bitmap to use as paint.
Eraser:
Pretty self explainatory really.
Hand:This tool moves your whole movie around the stage and saves you from having to select everything or move individual frames.
Tip:
To quickly use the hand tool without selecting it from the tool bar hold the space bar down. You will notice your mouse pointer will change into the hand tool. Now drag the stage and when you're finished let to of the space bar.
Ink Bottle:
This tool creates lines around objects. For example, after selecting the tool and clicking on a circle object it will create a circular line around it. This can then be turn into a separate object.
Lasso:
This is used for selecting single or multiple objects in hard to reach places by allowing you to draw a line which then becomes the selection.
Line:
This tool does what the title suggests. It draws lines. Useful for drawing polygons and other weird shapes the Oval and Rectangle tools can't deal with.
Magnifier:
You will be able to zoom in on your stage and objects with this tool. Holding down the "Alt" key will change the pointer to a "minus" sign. This will enable you to zoom out.
Oval:
A very useful tool which allows the designer to create circles and ovals of any size. Remember: When you draw a oval, Flash creates a border around it if you have a border colour selected. So if you don't want it there either turn the border colour off or click on the border of the object, this will highlight the border, and delete it. (these borders can be useful in your design)
Paint Bucket:
This will fill objects with a colour of your choosing. In a more advanced tutorial we'll teach you how to also create gradients. The paint bucket can then be used to fill objects with gradients.
Pencil:
This tool draws freehand lines. Useful for strange Motion paths etc. In addition some bright sparks at Macromedia have granted you the ability to straighten and smooth the ravages of your unsteady hand. Have a play with this by choosing Modify> Curves> ...
Rectangle:
Another useful tool and you guessed it! It draw squares. When you draw one it will create a border too if you have to border colour selected. Clicking on the border once and it will only highlight one side. A double click will highlight all four sides.
Text:
This tool allows the designer to create text in a movie or to create text fields.
How to buy domain names for your web site
11:21 AM Posted by BlogTechno
Step1:First you need to know what you're planning to do with your website. It's important to know what type of service you're going to be providing with your website.
Step2:Next, you should jot down some words or phrases for a possible domain name. Write down as many as possible because depending on what type of website you're planning to build the domain name you have in mind may not be available.
Step3:Next, you should go to a website that sells domain names. Godaddy.com is one of the best places to purchase cheap domain names. Go Daddy discounts domain names when you purchase other products from them like their web hosting packages. You can pretty much use them for a one stop shop. They are simply the best resource to get your domain names cheap.
Step4:Finally, enter the possible domain names you collected and check their availability with Go Daddy's domain name look up tool.
Step5:Once you've found the domain name that fits your needs you simply go to check out and purchase it. Congratulations, you have your domain name. The next step is to build that website.
Building a Flash Animated Website
11:14 AM Posted by BlogTechno
Step2:Visit FlashKit.com. Click on "Movies." You'll see many different categories. All of the movies are Open Source, which means that the creator is offering to share their creations with you and you are free to use them and manipulate them however you like.
Step3:Now click on "Interfaces" and from there, go to "Sites." As you look through the different developers' work you'll have many to choose from when designing your site. When you find one you like, you will have the option to "Download.fla" which will save a file to your computer that includes ALL of the files for that particular example. The download will be ZIPPED (which means it's compressed and bundled for ease in downloading). All Windows machines come with a program that will "unzip" a zipped file. Find the file you downloaded, double click on it and your computer will automatically decompress it.
Step4:Open your Flash program. Go to File and find the file you just download. One of the files will end in FLA. That's the one that Flash needs. Once you've opened it in Flash you can change things like text and artwork to make it meet your needs.
Step5:If you run into a snag, or your changes so completely mess up the original file that you can't repair it, just go back to FlashKit and download it again.
Step6:Save your file often! When the movie is done to your satisfaction, choose "File" and then "Export Movie."
Step7:Start Dreamweaver. On a new HTML page, click on the Flash symbol. It will prompt you to find the Flash movie you just created. Click on the name and Dreamweaver will automatically add all the coding you need. Save the webpage you just created.
Step8:Upload the webpage and the Flash movie file to your server. Surf to the URL and check to make sure it works right. Double check in Internet Explorer, Firefox and Netscape.
Adding images to web pages
11:08 AM Posted by BlogTechno
Step1:The simple HTML code to do this can be seen in this screenshot. Look at the screenshot and write down the code exactly as it appears.
Step2:In the code above where I have denoted URL between quotes, you will insert the URL or Uniform Resource Locator to your own images. These images are typically stored at a hosting website where a direct link can be obtained. Here is a picture example showing what the code should look like now.
Step3:Paste this whole string into the section of your web page that allows HTML code.
Step4:Make sure when using this code that you include all slashes, quotes and other special characters exactly as they appear in the screenshots. Otherwise, this code will not work.
Adding SWF Files to a webpage in Dreamweaver
11:05 AM Posted by BlogTechno
Step2:Open a page in Dreamweaver and place the cursor in the position where you want to insert the movie.
Step3:Choose Insert > Media > SWF. A Select File dialog will open. Navigate to the .swf file and choose it. I suggest that you store the .swf file in the same folder as the .html file in which you are embedding it.
Step4:Fill in Object Tag Accessibility Attributes to give your movie a title for accessibility purposes.
Step5:Dreamweaver inserts the Flash code. You can preview it using the Play button in the Properties panel. Use the Properties panel to set the width and height for the movie and to set Loop and Autoplay the way you want it. Save your work.
Step6:In this process you see a message from Dreamweaver telling you that you need to save the dependent files swffix_modified.js and expressinstall.swf into the Scripts folder. Click OK to do this. When you upload the page to the server, upload the HTML page, The SWF file and the Scripts folder.
A redirecting script for webpages using Dreamweaver
10:45 AM Posted by BlogTechno
A redirect script will automatically change to another web page within a certain time. No clicks or other hassles.
Step1:Open your webpage in an editing program. Some web hosts have built in HTML editors. I use Dreamweaver but you can also use Notepad.
Step2:Find the Head code. Find the Head code. HTML is just a language like English or French or Spanish - don't be intimidated! At the top of the page of HTML coding find the HEAD code. There may already be stuff written between the open and closing sections.
Step3:Type the META tag that you see in blue in the image to the left or you can cut and paste it below adding the brackets to the beginning and end.
meta http-equiv="refresh" content="N; URL=other-web-address"
Instead of the words "other-web-address" you should type in the URL of the webpage you want your visitors to go to.
The URL is the address you can see in the bar at the top of your web browser. It usually begins with http.
Change the N to how many seconds you want the browser to wait before it takes your visitor to the new page. I usually just want them to go immediately so I put a zero in place of the N. You may want them to read something first, in which case you could put 10 or even 30 in place of the zero. Test it and see how fast you want the page to refresh.
Step4:Save your page being sure to retain the extension. The extension is the end part after the period. It might be HTM or HTML or SHTM. Now upload it to your host server and test it live online. It should automatically refresh and load a new page in place of the original page.
Step5:You can have your page refresh to any URL - web page address - you want.
Creating frames based web page with Dreamweaver
10:34 AM Posted by BlogTechno
Creating a Frames-Based Page
Step1:Start Dreamweaver and locate the Objects palette.
Step2:Click on the downward pointing arrow next to the palette's visible section (usually Common) and choose Frames.
Step3:Select the type of frameset (frame layout) to be used from the options listed.
Step4:Click on one of the empty frames to begin inserting content into the frame.
Step5:When finished, choose Save from the File menu to save the frame. Give the frame an appropriate name, such as topframe.html or sidebar.html, for easier editing later on.
Step6:Choose Frame from the Window menu to open the Frame Inspector. Use the Frame Inspector to make changes to the frame, adjusting such aspects as width, height and border thickness.
Using Existing Pages as Frames
Step1:Make sure the Frame Inspector is open. In the Frame Inspector window, click on the frame where the existing page will be located.
Step2:Open the Properties palette by opening the Window menu and selecting Properties, or by pressing Ctrl+F3.
Step3:Locate the Source (SRC) field and type the name of the file to be used in the frame, or click the Folder button to browse your hard drive for the file.
Step4:Make any other formatting changes to the frame, then click on another frame in the Frame Inspector window to insert a file or add content directly.
Step5:When finished, save the frames-based page by selecting Save All from the File menu. If you haven't made any changes to the pages themselves and only want to save the frameset, choose Save Frameset from the File menu.
Step6:Preview the page by choosing Preview in Browser from the File menu.
Text Effects using CSS in Dreamweaver
10:13 AM Posted by BlogTechno
1. Text Links Rollover
This effect is got by using the hover property for the tag or any named css style used for links. For defining the default text link rollover throughout the site you can set the a:hover style. Open your site in Dreamweaver and do the following:
1. Open any page of your site and select window > CSS Styles and Click the New CSS Style button (+ icon), a pop-up window will show up.
- Setting a:hover - Select Advanced in the Selector Type. Now select a:hover from the Selector list box.
- Setting any other link style's hover - if you have already created a css style called say "links", to set the links:hover style - Select Advanced in the Selector Type. Now type links:hover in the Selector list box space. [To use this style just select and right click the tag in the tag selector located at the bottom left of the Document window. For the Set Class attribute select links from the list.]
3. In the CSS Style Definition pop-up window that appears give the Text specifications in the Category: Type. Now try the following effects separately or together:
- Tick the checkbox none if you don't want any underline to appear for the links on rollover.
- Tick underline if you want it to appear (this is usually used if the a:link or .links style is given the none property for no underline to appear for the links without rolling over them).
- Give the weight as bold.
- Change the link color property to something other than the a:link color.
2. Text Case Setting
In case you want a style that always displays in upper or lower case no matter how the text is typed you can set the Case property to capitalize, uppercase or lowercase in the Category:Type text specifications.
3. Text Spacing
To make the text appear neatly spaced on your site and for easy readability you can set the Line Height property in the Category:Type text specifications.
Tip: Set the line height to approximately 1.5 (one and a half) times the font size for it to look smart. The content in our site has a font size of 11 and line height of 16.
4. Line-through Effect
If you are selling products on your site you might want to give a discount and show the old and new prices (example: $100 $50). To give a strike through effect for the old price you can make a style with the Line-through property in the Category:Type text specifications ticked.
Including sound files to web pages
10:10 AM Posted by BlogTechno
1. Select the link (either text / link) to play sound and open the Behaviors panel.
2. Click Add (+) button and select the 'Play Sound' option from the Actions pop-up menu.
3. Select the sound file by clicking the browse button, or enter the filename path in the 'Play Sound' text box and click Ok.
4. Select the desired event to play the music/sound. For more events, change the target browser in the 'Show Events For' pop-up menu.
5. The coding necessary to play the selected sound file is automatically generated by Dreamweaver.
6. Save and test your file in a web browser. That's it you've learnt how to play music/sound in a web page when an event is triggered.
Pop-up Menus using Dreamweaver
10:04 AM Posted by BlogTechno
Pop-Up Menus can be easily created using the Show Pop-Up Menu of the Dreamweaver behaviors panel (similar to the Fireworks pop-up menu). The options can be set using the dialog box to create either a horizontal or a vertical pop-up menu. You can use this dialog box to set or modify the color, text, and position of a pop-up menu.
For Example: See our Top Links - Services, Portfolio, Rates & Deals, Web Products, Free Resources and About Us
1. To create a pop-up menu for an link (either text / image), create a link, select it and open the Behaviors panel (Shift+F3).
2. Click the Add (+) button and select Show Pop-Up Menu from the Actions pop-up menu.
3. Set options for the pop-up menu with the help of the dialog box that appears using the following tabs:
- Contents - to set the name, structure, URL, and target of individual menu items.
- Appearance - to set the appearance of the menu's State (Up / Over) and to set font choices for menu item text.
- Advanced - to set the properties of the menu cells, say width, height, color, border width, text indention, and the length of delay before the menu appears after the user moves the pointer over the trigger.
- Position - to set position of the menu relative to the triggering image or link.
5. Save and test your file in a web browser. That's it you've learnt how to create pop-up menus using Dreamweaver Behaviours.
Pop-up Windows using Dreamweaver
9:50 AM Posted by BlogTechno
Pop-Up Windows can be easily created using the 'Open Browser Window' of the Dreamweaver behaviors panel. You can give the URL and set the window properties using the 'Open Browser Window' dialog box.
For Example:
- To create a pop-up window for any link, create the link (either text / image) using '#', select it and then open the Behaviors panel (Shift+F3).
- Click the Add (+) button and select 'Open Browser Window' from the Actions pop-up menu.
- Select the URL to be opened and set the window properties, say width, height, attributes (Navigation toolbar, Location toolbar, Status bar, Menu bar, Scrollbars as needed, Resize handles) and a name.
- To edit a pop-up window, select the link and then double-click the 'Open Browser Window' in the Actions column of the Behaviors panel to make the necessary changes.
- Save and test your file in a web browser. That's it you've learnt how to create pop-up windows using Dreamweaver Behaviours.
Rollover Buttons using Dreamweaver
9:33 AM Posted by BlogTechno
Using Rollover Buttons & Images is one of the most common web design ideas adapted by designers the world over because of its simplicity. Creating Rollover buttons or images using Adobe Fireworks or Adobe Dreamweaver is very easy. Read on!
Example 2: This example uses Rollover Images, Vector Shapes, Paste Inside, Drop Shadow
Example 1: This example uses Swap Images, Rollover Buttons, Curves, Vector Shapes, Paste Inside, Drop Shadow. View/Buy complete site using this design: Template 7 - Food
What it does
In Rollovers, a button or image changes (swaps) itself on rolling over it (onMouseOver event) and reverts back to the original image on rolling out of the web object (onMouseOut event). The on-rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. Place your mouse over the Buttons in Example 1 and the Images in Example 2 to see their rollover effect.
How it works
The whole functionality is controlled by the JavaScript functions automatically generated by Fireworks or Dreamweaver. These functions are very optimized and you can always trust the code generated by Adobe Software :-) If you are a programmer-cum-designer it is good to know what the code does: There are 4 functions generated MM_preloadImages, MM_swapImage, MM_swapImgRestore and MM_findObj. Their names are self explanatory to what they do.
Create your own attractive Rollover Buttons and Images
Using Macromedia Fireworks: Create a new file in Fireworks and follow these steps:
- Position the initial buttons/image to be displayed correctly and place it in a layer named "buttons" or "links" in Frame 1.
- Duplicate the buttons/images layer once. Double click the new layer name and rename it to "rollovers". Tick the "share across frames" option which is seen while naming the layer and then click outside. Lock and make invisible the buttons/images layer.
- In layer "rollovers", change the color/effect of the rollover buttons or rollover images.
- Open the Frames panel, you will see just one frame called Frame1". Duplicate the frame once. Go back to Layer Panel(make sure the frame 1 selected before going back to layer panel)
- Open the "Web Layer" and insert separate slices for all the buttons/images. Open the Behaviors Panel. Now, select all the rollover buttons/images slices and click the (+) button in the behaviors panel, select Simple Rollover from the list. Another way to do it is, select individual slices, right click and select Add Simple Rollover Behavior from the list.
- View how they work in the preview window and then export your PNG file. Fireworks will automatically create your html file and images in the directory specified. While exporting just check if the HTML and images option is selected in the 'Save as Type' list box and the export slices option is selected in the 'Slices' list box. Test your HTML file in your browser.
You have just learnt to create your very own rollover buttons and rollover images using Macromedia Fireworks!
Using Macromedia Dreamweaver:
1. Design your buttons/images and their rollovers in any graphic editor. Export them to your site's images folder.
2. Now in your web page, click Insert > Image Objects > Rollover Image. In the pop-up window that appears give your rollover a name, alt tag, link and browse to locate the Original Image and Rollover Image. Click on OK.
That's it, you have just learnt to create your very own rollover buttons and rollover images using Macromedia Dreamweaver!
Publishing a site in Dreamweaver
9:27 PM Posted by BlogTechno
To set up your local and remote sites in dreamweaver, create a Dreamweaver site definition to allow you to manage the files within Dreamweaver.
1. Select Site > Manage Sites, the Manage Sites dialog box appears.
2. click New, and select Site from the pop-up menu. The Site Definition dialog box appears. If the dialog box is showing the Advanced tab, click Basic.
3. The first screen of the Site Definition Wizard appears, enter a site name to identify your site within Dreamweaver.
4. The next screen of the wizard appears, asking if you want to work with a server technology. Select the No option to indicate that for now, unless you have dynamic pages and know your technology.
5. The next screen of the wizard appears, asking how you want to work with your files. Select the option labeled "Edit local copies on my machine, then upload to server when ready (recommended)." Click the folder icon next to the text box and locate your site root folder locally.
6. The next screen of the wizard appears, asking how you connect to your remote server. Select FTP/SFTP for a remote server or Local/Network for an intranet site.
7. If you selected FTP, enter the following options:
* Enter the hostname of the server (such as ftp.smartwebby.com).
* In the text box that asks what folder contains your files, enter the path on the server from the FTP root folder to the remote site's root folder. If you're not sure, consult your system administrator. In many cases, this text box should be left blank.
* Enter your user name and password in the appropriate text boxes.
* If your server supports SFTP, select the Use Secure FTP (SFTP) option.
* Click Test Connection.
* If the connection is unsuccessful, consult your system administrator.
8. If you selected Local/Network, click the folder icon next to the text box and browse to the remote site's root folder. You may want to deselect the Refresh Remote File List Automatically option for improved speed.
9. Click Next. Don't enable file check-in and check-out for the site. Click Next.
10. Click Done to finish setting up your local and remote sites.
Upload your files to the remote site server
To make your pages publicly accessible, you must upload your pages to your site. After setting up your local and remote sites, you can upload your files from your local folder to the web server.
1. In the Files panel (Window > Files), select the site's local root folder.
2. Click the blue Put Files arrow icon in the Files panel toolbar.
3. Dreamweaver copies all the files to the remote site folder you defined. This operation may take some time, as Dreamweaver must upload all the files in the site.
4. Open your remote site in a browser to make sure everything uploaded correctly.
That's it, you have successfully completed our tutorial on publishing your site!
Useful tips while using Adobe Dreamweaver
8:45 PM Posted by BlogTechno
2.Switch to the Code View by pressing F10.
3.In the Design View of Dreamweaver you can View your page in the default browser by pressing F12.
4.Insert a line break tag by pressing Shift+Enter.
5.Give non-breaking space by holding down Ctrl+Shift and clicking Space. Instead of clicking the space bar continuously (you will get characters one after the other), release the Ctrl+Shift between clicks to the space bar. You will get the desired space in half the number of characters (better HTML code).
6.Use different kinds of bullets to make your lists look attractive. Read our tutorial on Bullets.
7.Use a common structure (template) for your site pages - Learn how to create Dreamweaver Templates.
8.Place common code into include files - Learn how to create and use Server Side Includes (SSI)
9.Create rollover buttons/images in Dreamweaver.
10.Use In-built optimized client side javascript scripting generated by dreamweaver called Dreamweaver Behaviors. The most Useful Behaviors are as follows:
* Check Browser
* Check Plug-in
* Go to URL
* Jump Menu
* Open Browser Window
* Play Sound
* Popup Message
* Preload Images
* Show Pop-Up Menu
* Swap Image/Swap Image Restore
* Validate Form
Server Side Includes (SSI)
8:43 PM Posted by BlogTechno
Server Side Includes are files that have some commonly used code that can be reused by many pages in your site. When you use a SSI file the server takes the entire content of the file and inserts it into the page, replacing the include code. As an example, imagine you have a large portal web site with links at the top, bottom and sides common to all pages (or a section of pages). To make the site easy to maintain you can have the header, footer, right menu and/or left menu as include files. So when there is a change to be made you just need to make the changes, save and upload the corresponding include file and not the many files using it.
How are Server Side Includes better and different from frames?
Though frames are sort of similar to Server Side Include files, we do not recommend their use as not all browsers support them. In frames each frame is a separate page with its own tags (unlike SSI where they cannot have these tags) and is called in the main page where the frames are defined.
Create your own SSI file and call it by using the given code
Create a file which contains the reusable code with the extension .htm, .html, .asp or .php
Very Important: If you are using highly confidential ASP/PHP code (or any other web technology), like your database connection string or some business logic, in your include file then make sure the include file is named .asp/.php so that no one can open the include file and see your code.
You cannot use include files in HTM or HTML files, You can use them only in SHTML, ASP, PHP pages, etc. - that support include files.
Now go to the page that will use the include and add the following code in the appropriate place:
SHTML or ASP:
PHP:
Calling Server Side Includes into your page using Macromedia Dreamweaver
In your page, keeping your cursor in the place where the include file should come, Click on Insert > HTML > Script Objects > Server Side Includes (for MX 2004) or Insert > Server Side Includes (for Dreamweaver 4). In the pop-up window that appears select your include file, give the path as relative to Site Root (for ASP) and click OK.
Dreamweaver Templates
8:40 PM Posted by BlogTechno
A Template is basically a structure used commonly for many items (pages in a web site in our context). A Dreamweaver Template is a common structure created and used for all or some pages of a web site using the Adobe Dreamweaver tool. There can be any number of dreamweaver templates for a web site. That is, each section of a web site can have its own template with variations in structure or color from the others.
As an example, lets say you want to built a web site which has 20+ pages with a lot of content. For this we recommend using a common template or templates - where all pages or a group of pages have one basic design and only the content varies. This way even if your site is a little distracting due to necessary design effects, your design is noted once (hopefully with a appreciative eye :-) and then the visitor focuses on the content automatically.
Tip: A clean consistent layout with a neat navigation that uses a lot of white space will enhance your site's look, readability and stickiness factor.
What are the advantages of using Dreamweaver Templates?
In the current web design & development world Adobe Dreamweaver has become the top tool used globally by designers and web programmers. One of the main attractive feature of Dreamweaver which has made it so popular IS? Yes you guessed it right, The Dreamweaver Template and the ease with which these templates can be created and used by even beginners.
The Adobe team keep all current technology developments into play with their upgrades. We recommend their latest offering - Adobe Dreamweaver CS3 - to anyone who wants to create or maintain web sites efficiently - even with little or no past knowledge. In a nutshell, all you need to do is:
Design the common structure and save it as a Dreamweaver Template with the content area(s) editable.
Apply it to all your web site pages or create new pages using the template and insert your content in the editable area(s). No kidding, its that simple!
Another huge advantage of using Dreamweaver Templates is when you want to modify the common elements of your pages. All you need to do is make your changes to the template and save it. All the pages using the template are automatically updated without you having to check and modify each page. Thus dreamweaver templates save a lot of precious development and maintenance time!
For Developers and Clients: The key advantage dreamweaver templates provide is separation of design & code from content for pages using templates. This means that :
Developers and their clients can breath easy knowing that the code and design cannot be messed up by inexperience in handling the prepared web pages as non-editable regions are locked and cannot be edited from within Dreamweaver.
This helps Clients to confidently make changes to their web site pages (created by their web designers) without having to go back and forth for every minor content change. Furthermore with just a little practice they can create web pages (using the prepared template) and maintain their own web site easily. One real life example is our very own Dreamweaver Template clients, who with a limited budget purchase & download a top quality ready-to-use Dreamweaver Template from our web site, then customize, upload and set live their cool web site within a couple of days.
How to create a Dreamweaver Template?
Design your web site with a common structure in mind that features in all the pages.
Tip: Follow a simple header, footer, side menu(s) & common navigation design approach for visitors to easily identify with your web site - at least for your inside pages.
The next step is to save this common structure as a Dreamweaver Template. For this, open File and and click on Save As Template. Give it a name (usually just 'template') and click on Save.
This template file will be saved under the folder called Templates (which is automatically created by the Dreamweaver) with a .dwt extension.
In case you get a message saying that your dreamweaver template doesn't have any editable regions, just ignore it as it is a new template without any pages under it. You can add the editable regions after saving the template (.DWT) file.
How to create an Editable Region for a Dreamweaver Template?
An Editable region is a named region in a Dreamweaver Template where content can vary from page to page. These Editable regions can contain text or media specific to that particular page. To create an editable region in a Dreamweaver Template, place your cursor in the template where you need an editable region and then go to Insert >> Template objects >> New Editable region. Give it a name. Click OK. You will find the name of the editable region surrounded in a light blue box in the place where you inserted it.
Tip: Make sure your editable region tag is not within a paragraph or other block tag as it will not let the text you insert in your actual pages format properly.
How to create a new web page using your dreamweaver template?
Now you are all set to use the template in your pages.
For Dreamweaver MX and Above: Click File New.. In the pop-up window that appears go to the Templates tab and select the desired template.
For Dreamweaver 4: Click New from Template and select the desired template from the pop-up window.
To fill the content for that page, go to the editable region(s) and enter your page specific content. Remember you can edit only the editable region(s) in the page and not the elements included within the template.
How to apply the Template to your existing template based or non-template web pages?
For Dreamweaver MX and Above: To apply the template to an existing page, select Modify >> Templates >> Apply template to Page..
For Dreamweaver 4: To apply the template to an existing page, select Modify >> Templates >> Apply template to Page..
In case your pages already used a dreamweaver template you can safely apply another template by specifying the editable regions into which the existing editable regions should be copied. Your task is made simple - you are not asked to do this - if you have the same editable region names in both templates.
Tip: Thus, to easily toggle between your dreamweaver templates use a common naming convention for all your editable regions. For example use 'content' for the content area, 'right_menu', 'left_menu' or just 'menu' for the possible menu areas, etc.
For non-template pages just instruct dreamweaver to place all non-editable region content that could get kicked out into the content area editable region - this way you don't loose any data stored in the original page.
How to Modify & Update a Dreamweaver Template?
So you have made the template and the pages using it. How do you modify the common elements of your template pages? All you need to do is make your changes to the dreamweaver template and save it. All pages are automatically updated on request. Simple!
Tip: Use Server Side Includes in your Dreamweaver Template
We highly recommend the use of Server Side Includes (SSI) with dreamweaver templates for large websites. Include files save you the trouble of updating and uploading numerous pages having the same content. For example in your dreamweaver web site if you navigation links are in an include file you can change your navigation at any time and will have to upload only that single include file.
How to make a Dreamweaver Template XHTML Compliant?
Open the dreamweaver template file (example: template.dwt) under your Templates folder in Dreamweaver (MX & above).
Now choose File > Convert > XHTML
Next just save it and update the template for all files using it.
Effective Navigation Guidelines
6:24 PM Posted by BlogTechno
While designing the navigation for your site keep the following points in mind:
• Organized Links
Make sure your links are well organized according to the order of importance. Visitors should be easily able to find what they are looking for under different categories.
E.g. All our main links are found on the top i.e. our services, products,portfolio, resources etc.Other interesting links are found on the right of the page. These are common and consistent throughout the site.
Finally if the web page belongs to a guide E.g web design guide you will find the related links below the right menu and also at the bottom of the page.
Note: Related links are very important as visitors coming to a particular page will probably be interested in more information you have under the same topic.
• Clear and Prominent
Once you have decided on your navigation links, you need to think of the best place to put them. Navigation should be clear and consistent. Try to design your navigation on the top or on the left as these are the first places our eyes go to. Also locate the primary links high enough on the page so that they are visible without scrolling. Navigation images should be seamlessly integrated into the site design. Avoid putting navigation links at the bottom of the page as visitors will need to scroll right down to see the links. If you like you could put the important links at the top AND bottom of the page just to make sure your visitors don't miss the link.
• Consistent
Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Don't confuse your visitors by putting your navigation links in different places in different pages.
• Easy to understand
Make your links easy to understand and to the point. Usually you won't have enough place to have long links so make use of the space wisely. Visitors need to know where they will go on clicking on a particular link, so make sure your links are understandable or nobody is going to click on your links, which will defeat the purpose of designing a good navigation system.
• DHTML Menus
If you have a large number of links under categories and sub-categories you could use navigation menus to organize your links. There are many cut 'n' paste scripts available on the Net that you could use to create great navigation systems. A favorite resource center is SimplyTheBest.net, you'll find tons of useful navigation menus that are very easy to install on your site.
Keeping these basic points in mind you can go ahead and design an effective navigation system for your site. Take a look at other sites to get some ideas on good navigation techniques! Another good idea would be to use eye-catching visuals and small chunks of information to draw visitors to click on a link.
Useful Tips for Effective Web Design
6:21 PM Posted by BlogTechno
1. Fast Loading web site designs - This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load.
2. Clear Navigation - Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top - that's usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links.
3. All Resolutions - Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels.
4. Browser Compatibility - Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don't stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don't give up too soon, usually with patience these problems can be easily fixed.
5. Readable and professional looking fonts - Don't ask me how many times I've clicked out of a site just because the font is in Comic Sans and the color is a bright pink or green. Just by looking at the font you feel that the site is not a professional site. Don't use Comic Sans and other fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.
6. Minimize the use of images - I believe that sometimes simple designs are the most effective for the web. Keep your site simple but neat. Don't clutter your page with big, bulky images that take ages to load. Instead use tables creatively and design eye - catching icons that will draw a visitor's attention to a particular section of your site. Tip - Visitors are usually more interested in content than in design.
7. Use of white space - Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site.
8. Check for broken links - Always check for broken links within a site before uploading it to your web server. In Dreamweaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links - Entire Site. If you don't have this facility you need to upload your site and then check it using online tools like Net Mechanic.
Designing Websites for All Screen Resolutions
6:19 PM Posted by BlogTechno
Before you start you need to decide on your lowest screen resolution. Your web site will have to be designed keeping the lowest resolution in mind. Through our research we have found that less than 0.5% are on the 640 x 480 resolution So we ignore that completely. The next important resolution is the 800 x 600 resolution. Some of our visitors are on this resolution so we use this as our lowest screen resolution. This means that our web site has to fit all resolutions equal to or higher than 800 x 600.
Step 2: Design Your Web Site on This Resolution
Once you decide on your lowest screen resolution you need to design your web site for that resolution This means that all your graphics will be designed for this resolution. Design your web site and export the images as you would normally do.
Step 3: While converting your design to HTML make sure all your tables are measured in terms of percentages
Important: This is the trick to developing web sites for all resolutions. You need to work in terms of percentages and not pixels. If you work in pixels you are giving an absolute measurement to a table, whereas working in percentages gives a relative measurement. The table will be a given percentage of the screen resolution.
I hope you have understood this clearly. I'd like to explain this with an example. If you were to design a site for a 800 x 600 resolution, you would probably make a table with width 800 px and height 600 px. Now if you were to design a web site for all resolutions you need to make a table with width and height 100%, so that whatever the screen resolution may be the web page will scale to fit the page. It will be 100% of the screen resolution or whatever percentage you choose to give it.
The first step is to make a table with 100% height and 100% width. You could make it 95% if you want some white space around it.
Step 4: Within the table measure cells in terms of pixels except for the cell for the content
This a very important step. You need to give a fixed measurement to all your cells except for the content cell. You can leave this cell blank.
Step 5: Insert images and content
Once you have designed your tables in terms of percentages you need to insert your images and content. The usual layouts will probably have a logo which can come on the top left corner and your navigation buttons in the top right or left navigation bar.
For more complex layouts you will need to use background fills to design your web sites. Remember since you are designing web sites to fit all resolutions you need to position your images accordingly (for your header). The easiest principle I follow (if possible) is to use the top left and right corners for fixed images and let the middle tile according to the size of the page.
Step 6: Test your site in all the resolutions
The last step is to test your site in all the resolutions that are available on your computer. To do this you need to:
1. Right click on your Desktop and click on Properties
2. Click on the tab Settings
3. Under Desktop area click shift the scale to 800 x 600, 1024x768 or higher if possible
4. Once you have chosen the resolution you want to check the site in, click on the Test button
5. If you can see the bitmap clearly you can click on Apply.
Check your site in all the resolutions and if it is working fine you've successfully designed and developed a web site for all resolutions. Congratulations!