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!