User-Friendly Navigation: Three-Click Model

User-Friendly Navigation

Image via Flickr by eirikso

Visitors to your page want to quickly be able to access information or they will leave to try the next page on the list, so create the navigation so any page can be accessed in three clicks or less.

Embed Elastic Videos

Embed Elastic Videos

Image via Flickr by tetradtx

When embedding videos, design them to be elastic, so they will fit into the browser window whether your user is using an ultrabook, tablet or phone, the video embed will expand to the full width of the boundary.

Keep Objects Within Boundaries: Min-Max Width

Keep Objects Within Boundaries

Image via Flickr by “Caveman Chuck” Coker

This property allows you to set the max width of an object to keep it within any boundaries. You can design objects to be responsive and auto-size to the maximum width of the boundary.

Relative Values Make Your Website Flexible

Keep Objects Within Boundaries

Image via Flickr by danorth1

One way to design your website is by setting all the elements and boundaries to layout in a set pixel area, but the more visually appealing way is to set the layout relative to the screen size. Relative margins, relative font size and relative padding all look much more appealing when they are flexible relative to how the user is viewing your page. Also, think on lines of making your website mobile friendly. Though a smartphone like a Galaxy s3 features a bigger screen than regular smartphones, you would still not be able to get the full visual experience if you don’t think of mobile devices when you design.

Wrap Unbreaking Text to Avoid Breaking the Boundary

Wrap Unbreaking Text to Avoid Breaking the Boundary

Image via Flickr by erika g.

If you have long web addresses or other text that does not break run past the boundaries of an object, use the word-wrap property to break the text into multiple lines and stay within the boundary.

Use a Seamless Image for a Seamless Background

Use a Seamless Image for a Seamless Background

Image via Flickr by webtreats

If you use a large image for the background of your page, chances are it will tile on many users’ monitors, so to get around this and to also minimize the size of your website, use a seamless image. These do not show borders or boundaries when they are tiled and make for a perfect singular background no matter how large or small the screen is. This will ensure that a user has the same experience playing games on a pc or notebook as they will have on a tablet.

Site Maps Are Integral to Your Site

Site Maps Are Integral to Your Site

Image via Flickr by Grapejuice Girl

Users want to quickly find information on your website and a site map is the quickest and easiest way for someone to see where they can find what they are looking for. It is also a great tool to have your pages show up on search engines.

Visual Depth Draws Viewers In

Visual Depth Draws Viewers In

Image via Flickr by paul bica

Although very simple and common, adding depth to your pages is a nice touch that makes your pages more visually appealing. Adding drop shadows, ribbons that wrap around borders and perspective are a few ways to achieve this.

When designing your next page try adding a few of these tricks to take the design to the next level and keep your readers coming back for more.

Sources

http://www.webdevelopersnotes.com/tips/webdesign/index.php3

http://www.onextrapixel.com/2011/06/20/creating-depth-in-web-design-5-design-tricks/

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

Author information

schatman

Shaun Chatman is a well published author on many authority sites. He lives in Dunedin, FL, and spends his free time playing with his kids or his collection of gadgets.

TwitterFacebookGoogle+

Terminal or the Terminal emulator is a text based program in Mac operating systems. Users can use the Terminal to manipulate the operating system using text commands. There may be many websites that you may want to block. In Windows, you can do with the Browser itself. In Mac, it can be done with the Terminal. However, it may appear to be a bit complicated.

With this tutorial, you will be able to block websites on Mac, by using text commands with the Terminal. You will get used to the technique once you do it yourself.

How to block Websites using Terminal

• Step 1: Click the Finder
• Step 2: Now from the Finder menu, select Applications
  
  You will now be able to see a few folders.
• Step 3: Find the Utilities folder and click it. You will now see the Terminal application
• Step 4: Click Terminal. The Terminal window will now open up. Before starting, you have to backup the hosts.txt file. In this tutorial, we will back up the file in the desktop.
• Step 5: In the Terminal window, type ‘cp /etc/hosts ~/Desktop/hosts.txt’, without the quotes
• Step 6: Hit Enter. This will copy the hosts.txt file to your desktop as backup.

Blocking websites

• Step 1: After copying the hosts.txt file, type ‘sudo pico /etc/hosts’, without the quotes
• Step 2: Hit Enter, upon hitting Enter, the system will prompt you for the Administrator password.
• Step 3: Provide your administrator password and then hit Enter. The /etc/hosts file will now appear. Now you have to go to the bottom of the file.
• Step 4: Use the arrow keys and navigate to the bottom of the file. When you have reached the bottom, you can add the website that you want to block.
• Step 5: Enter the IP address ‘127.0.0.1’, without the quotes, first
• Step 6: Just after the IP address, type the domain name of the website you want to block
  For example, typing “127.0.0.1www.yahoo.com” (without the quotes of course) will block Yahoo on your Mac.
  The theory is as follows. 127.0.0.1 is your Local Macintosh IP. If you type the website domain name following this IP, it will tell the computer that this is the address for that domain. A website domain and a computer can never have the same IP as this can confuse the system. Due to this command, the browser of the system won’t be able to differentiate that domain you have given, to a webpage. So technically, the website will be blocked.
• Step 7: Enter all the domains you want to block this way, with domains on separate lines
• Step 8: Once you are done entering the domains, press and hold Ctrl and then hit X.
  You will now exit the terminal, and a Save prompt will appear.
• Step 9: Press Y to Save

To put the changes into effect

• Step 1: For Mac OS 10.4.X, type the following and hit Enter lookupd –flushcache
• Step 2: For Mac OS 10.5.X and higher versions, type the following and press Enter
  sudo dscacheutil –flushcache
  
• Step 3: Click the Terminal menu and then click ‘Quit Terminal’ to exit
• Step 4: Open any browser and type in all the domain names to make sure they are blocked.
  

  Conclusion

  This is how you can block websites by modifying host file. The website will be blocked to all users of the system. This also applies to all browsers in the system. However, if you want to block sites by keywords, you require professional blocking tools.

Author information

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.

Creating a Myspace profile

• Step 1: Launch your web browser
• Step 2: Go to https://new.myspace.com/signup

  In this page, you can either register for a new account or use your old Myspace account and update it. You may also use your Facebook or Twitter account to join the new Myspace by syncing those accounts with Myspace.

  

• Step 3: Provide your details and check the checkbox at the bottom of the page
• Step 4: Click Join
  You are now a member of the new Myspace. The website will prompt you to associate with items such as ‘Musician’, ‘Fan’, ‘Comedian’ etc.
• Step 5: Choose the options you like or skip this step
• Step 6: Choose whether to connect through Facebook. If you choose this, it will automatically add all the artists, whose page you liked on Facebook to your Myspace account.
• Step 7: Create and personalize your profile

  
  You can add a profile picture, and describe about yourself.

• Step 8: Choose whether you want the profile to be Public or Restricted
• Step 9: Click Take me to Myspace when you are done

Using the new Myspace

You will now be taken to the profile home screen.

• Step 1: Click on the speech bubble to post a status update, just like in Facebook
• Step 2: Search for friends in other social networks like Facebook and Twitter using the Search bar
• Step 3: Search for a track
• Step 4: Click on a track in search results to play it in the Myspace music player. You can also see fans and followers of the band you have searched, if you scroll to the right. In order to ‘like’ a song as in Facebook, you can choose the similar ‘Connect’ option in new Myspace. For that,
• Step 5: Click on the linked circles symbol beside the name of the track you played. A menu will now appear.
• Step 6: Click Connect
  
• Step 7: Click Queue to list the track in the current list you are listening to
• Step 8: Click Share to share the track with your friends
• Step 9: Click Add to Mix to add the track to the new playlist. Add to Mix option also allows you to create a new playlist, where the track can be added. To know the latest news in the world of music,
• Step 10: Click Discover on the toolbar next to the Music player

Conclusion

In the new Myspace, you will also be able to view the pages of the bands. These pages will have descriptions of the band, their photos, events and their new updates. You will also be able to play the musical videos of the band. The new Myspace is designed for music lovers, who can also have a good time discussing music related stuff and sharing music with their friends in other networks.

Author information

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.

Getting started

• Step 1: Create a new ActionScript 3.0 document in Flash
• Step 2: Now press Ctrl+J
• Step 3: Set the stage size of your preference. In this tutorial, we will be using the size of 1024×600. Now you need to create buttons.

Creating buttons

• Step 1: Use the insert options in Flash to create a button. You can create a button of your design. In this tutorial, we will use rectangular buttons.
• Step 2: Create as many buttons as you like and give them instance names so that they can be used in ActionScript 3.0. That is, home_btn, about_btn, contact_btn for the three buttons in the image below.
  
  Clicking on any of the 3 buttons in the image, should immediately show the content with a panning effect. For this, a strip of content is a better option. So when you click a button, the strip will scroll sideward to show the content. For this, you need to create a movieclip.

Movieclip

• Step 1: Create a movieClip with the width of 1024 (the width of the window)
• Step 2: Give the height of the clip of your preference and name the movie clip as ‘content_mc’
  

Code

• Step 1: Create a new layer for ActionScript so as to provide the codes
• Step 2: Copy and paste the code that follows
  import fl.transitions.Tween;
  import fl.transitions.easing.*;

  home_btn.addEventListener(MouseEvent.CLICK,panContent);
  about_btn.addEventListener(MouseEvent.CLICK,panContent);
  contact_btn.addEventListener(MouseEvent.CLICK,panContent);

  function panContent(evt:MouseEvent){
  var buttonName:String = evt.target.name;
  switch(buttonName){
  case “home_btn”:
  new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,0,1,true);
  break;
  case “about_btn”:
  new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,-1024,1,true);
  break;
  case “contact_btn”:
  new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,-2048,1,true);
  break;
  }
  }

  Note: The first two lines of the code import Tween and Easing classes for the movie clip. The next three lines are event listeners, so that the button responds for click events. Whenever a user clicks any of the buttons, the event function will be executed. The rest of the code is for the pan function. That is, for click events, this pan function will be executed. The ‘Switch’ would perform a different function for each button.

Now the page needs to be published.

Publishing the page in HTML

• Step 1: Select Publish Settings and go to the HTML tab in the dialog box
  
• Step 2: Select ‘Flash Only’ for template and make sure the checkbox right below it is unchecked
• Step 3: Give 100 x 100 percent dimensions after selecting ‘Percent’
• Step 4: In Playback, check ‘Display menu’ and ‘Loop’ checkboxes
• Step 5: Select ‘High’ for quality, ‘Window’ for Window mode and ‘Default’ for HTML alignment
  Step 6: Select ‘No Scale’ for Scale
• Step 7: Choose ‘Center’ for both Horizontal and Vertical Flash alignments
• Step 8: Check the ‘Show warning messages’ checkbox and then click OK button
• Step 9: Now ‘Publish’ the flash and run the HTML. If your screen size is over 1024 pixels in width, then you will see additional content in the panning strip, instead of just seeing ‘Home’. To avoid this,
• Step 10: Apply a mask over the Content layer from the Options

Conclusion

The effect is added to the webpage. Click on any of the three buttons in the webpage after running it to see the strip scrolling sideward to show the content. You can tweak this method creatively to make it more attractive.

Author information

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.

The typesetting capabilities of Fireworks CS4 allow text wrapping around shapes and offers consistency with Illustrator and Photoshop. The editing of symbols in their places is also possible. With Fireworks, designs can be exported as PDF documents, web-enabled Adobe applications or as CSS layouts including external style sheets. The software offers a plethora of effects to enhance web designs, one of them being the text overlay effect. 

Steps to blur image and blend text with it

The first step is to blur the image. After blurring the image, Overlay effects can be blended with it. The following are the steps adopted for blurring an image and blending text with it using overlay blend mode of Fireworks. First, make sure that the image, on which the overlay effect is to be applied, is of good quality and colors.

1. Open the image you want to make as the background image on Adobe Fireworks CS4.
2. Use ‘Zoom Blur’ tool in order to blur background image. Even though there are various kinds of blur tool, we make use of Zoom Blur in this tutorial. For this, select background image, then go to Filters. Choose Blur and then select Zoom Blur.
   
3. On clicking on Zoom Blur option, a popup window will appear showing ‘Amount’ and Quality’ with default values. Set values for these entities as 30 and 20 respectively. This will blur the background image with a zoom effect. Now you can add the text overlay effect to this image.
4. Use ‘Text Tool’ next. Type the required text above the background image.
5. The text you just typed will now appear white in color in the image. The next step is to apply overlay effect to this text. This is done so that the text will blend with the color of background image and reflects the same color as that of the image.
6. Now, select the text. You can observe that the Blend mode option available on right hand side of properties window has turned to ‘Normal’. On clicking over the arrow, many options will be available to you. Choose ‘Overlay’ effects.
   

   Any of the other effects can also be chosen to get the corresponding effect. You have now successfully applied the text overlay effect on the image.

7. Other images can be used to get different text overlay effect. It is preferable to choose good quality colorful pictures so as to get great text overlay effect.

Conclusion

The text overlay effect works well when blended with blurred images. However it can be used in normal images as well, resembling a watermark. The text overlay effect effectively blends the text with the background color in the image, and then reflect that same color in the text as well. You should also make sure that good quality images are used. Adobe Fireworks offers several blur techniques for blurring the image.

You will also be able to select the amount of blur for the images. But for applying text overlay effect, the Zoom Blur option is more preferred. The software also comes with options for advanced text effects. Mastering the options and its uses can help you develop amazing overlay effects, rather than just blending a text with a blurred image.

Author information

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.

This tutorial will instruct you to add a Facebook recommendation bar into your WordPress website.

How to add Facebook recommendation bar

1. Step 1: Log in to your WordPress Admin
2. Step 2: Go to Plugins and select Add New
3. Step 3: Type ‘Facebook’ in the field and click on ‘Search Plugins’
   The search results will now appear, with details of the plugin and an option to install the plugin.
4. Step 4: Click on the Install Now link
   After downloading the package and installing, the computer will display a message that the plugin has been installed successfully.
5. Step 5: Click on Activate Plugin
   This will add a Facebook plugin to your WordPress website. However, if you want to use the plugin, you should do a few things in Facebook.

Setting up a Facebook app to use the plugin in WordPress

1. Step 1: Go to Facebook app page after logging in to Facebook
2. Step 2: Click on the “Create New App” button on the top right side of the page
3. Step 3: Fill up the form including details in ‘App Name’, ‘App Name Space’
4. Step 4: Click ‘Continue’ when you are done
   Now you will be asked to enter more details of your new application.
   For the Site and Mobile web URLs, make sure you include ‘http://’ at the front and ‘/’ at the end (without quotes)
   
5. Step 5: After filling up the form, click on ‘Save Changes’ Once the changes are saved,follow the below steps
6. Step 6: Copy and paste your App ID, your App Secret and the Namespace to a Notepad file
7. Step 7: Save the Notepad file and log out of Facebook

Setting up Facebook plugin in WordPress

1. Step 1: Go to WordPress Admin and select Facebook on the left sidebar.
2. Step 2: Copy and paste or enter the details in the fields (saved in Notepad file)
   
3. Step 3: Click ‘Save Changes’
   Now you will be redirected to the ‘Options’ page for plugins.
4. Step 4: Check the ‘Recommendations Bar’ checkbox to activate it.
5. Step 5: Set the required options. The options include Trigger, Read Time, Action and Side.
   Trigger – Indicates the percentage of the page to be scrolled by viewer before the bar appears
   Read Time – Time in seconds of the viewing time, after which the bar will appear
   Action – Choose to show either the ‘Like’ or ‘Recommend’ button in the bar
   Side – Choose where you want the recommendation bar to appear (either bottom left or right)
6. Step 6: Click on ‘Save Changes’

The Facebook recommendation bar is now activated and available in the website created in WordPress. To test this yourself, open any article from your blog or website for which the plugin was added. When the article opens, you will be able to see the recommendation bar on the bottom left or right (depending on the settings you chose). The links will also have a ‘Like’ button.

Conclusion

With a simple, easy-to-use interface, the Facebook recommendation bar makes it easier for your viewers and fans to promote your articles, in the blog or website, on Facebook. The bar also features a ‘Like’ button. However, only two articles appear in the bar at a time.

Author information

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.

This post is basically for those who want to run their first program under php. I just want to give an introduction related to PHP before starting:

It is server-side scripting language for producing dynamic Web pages.PHP was originally created by RasmusLerdorf in 1995. Th full-form of PHP is a recursive name i.e. PHP Hypertext Preprocessor.

PHP program can be run under various like WAMP, XAMPP etc.

• WAMP Server: this server is a web development platform which helps in creating dynamic web applications.
• XAMPP Server: It is a free open source cross-platfrom web server package.

I am using XamppServer to run my program, you can download it from the following link:
http://www.apachefriends.org/en/xampp-windows.html
After downloading, just follow the following step to start xampp server:

Step1

Install XAMPP

Step2

Assume you installed xampp in C Drive.
Go to: C:\xampp\htdocs

Create your own folder, name it as amit.

Step3

Now create your first php program in xampp and name it as “amit1.php”:

<html>
<head><title>Amit4 php</title></head>
<body>

<?php
  	# operator
	print "<h2>php program to add two numbers...</h2><br />";
              $val1 = 20;
              $val2 = 20;
              $sum = $val2 + $val2;   /* Assignment operator */
              echo "Result(SUM): $sum";
?>

</body>
</html>

Step4

Now double click on “XAAMP CONTROL PANEL” on desktop and START “Apache”
(icon also appears on the bottom)

Step5

Type localhost on your browser and press enter:
It will show the following:

Step6

Now type the following on browser:
http://localhost/amit/
Below screenshot shows php files created under folder “amit”

Step7

Click on “Amit4.php” and it will show the following:

The RESULT is 40 by adding both the values.
This way you can run your php program in XAMPP server…

Author information

amit2012

Programmer, Technical Writer

Guy passionate about learning, exploring new things.

FacebookGoogle+

Defining a site in DreamWeaver

Step: 1 Bring up the SiteDefinition Window
Once you get into DreamWeaver page, go to the top part and click on ‘Site’ option. This will bring up a menu from which click the ‘New Site’ option. The ‘Site Definition’ window will pop up on the screen afterwards with ‘Basic’ and ‘Advanced’ tabs.


Step 2: Enter the settings in the window
First of all, click the ‘Advanced’ tab located at the top part of ‘Site Definition’ window. You can then view several options under ‘Category’ label. Select the ‘Local Info’ label to bring up the fields for typing the information of the site to be uploaded.
Type the name of the site into the field appears next to ‘Site name’ label. Then, enter the path of the root folder of the site saved in local computer into the ‘Local Root Folder’ field. There is another field called HTTP address field into which you can enter the URL of the remote websites used in the site.
Step 3: Enable the required options
You can find various options along with the site information fields. It is possible to enable or disable them according to your need. If you want to upload the website, then it is required to enable both ‘Refresh local file list automatically’ and ‘Enable cache’ options. These options can be enabled by selecting the checkbox located at their left side. After that, press the ‘OK’ button located at the bottom part.

Setting up Remote Server

Step 1: Choosing server protocol
Click the ‘Remote Info’ option under ‘Category’ label. You can then find a drop down menu icon next to ‘Access’ label appears on the right pane. Press the arrow on that icon and select ‘FTP’ from the available list.

Step 2: Entering Server Options
You need to enter the host name of the remote server into FTP host field. It is possible to enter your domain name if it points to correct host. There is a ‘Host directory’ field which indicates the directory where you need to store the site. You can type public_html or www into that field according to the purpose of the site. After that, enter the username and password for FTP login.
Step 3: Testing the Connections
Once you enter the FTP login details, you can test the connection by clicking the ‘Test’ button located at the right side of ‘Login’ field. If there is no problem with the connection, you can save the username and password by selecting the checkbox next to ‘Save’ label. You must check ‘Use passive FTP’ option before pressing the ‘OK’ button for setting up the remote server.

Testing the Server

If you want to test the server, then click on ‘Testing Server’ option under ‘Category’. Then, choose the remote server model after hitting the arrow button on drop down menu icon near ‘Server Model’ label available on right pane. You need to select ‘PHP MySQL’ server model if you are planning to execute PHP scripts.

Once you finish specifying the preferences, click the ‘OK’ button and get back to DreamWeaver workspace. Go to the top left corner of the workspace and select the site from list menu. You can then press the button to connect the remote server. Then, you can check whether it is possible to upload or download file/directory using the server.

You can use the right list menu to browse the file in local computer or remote server. Choose the file or directory you want to upload or download after that. Click on ‘Up’ arrow button for uploading and ‘Down’ arrow button for downloading.

Conclusion

It is quite easy to upload a website created with DreamWeaver using the in-built options. The DreamWeaver platform also provides the opportunity to test the server after uploading the website. This will ensure the efficiency of both server and website.

Author information

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.

Activating themes on WordPress websites

First go to the WordPress site and log into your dashboard. You can then find a list of options on the left side of the dashboard. Navigate through that list and click on ‘Appearance’ option. The next step is to click on the ‘Themes’ option. Go to right pane and press the ‘Install Themes’ tab for installing a new theme into your website.

You will be given two options afterwards such as uploading themes from your PC/computer and search for themes with free WP theme database. It is also possible to find paid themes in WP theme database with ‘Purchase’ label.

Installing themes from PC

STEP 1: CHOOSING THEMES AND SAVING INTO LOCAL HARD DRIVE

The first step required is to get into any website which provides good themes. You can either download free themes or purchase paid themes. In the first case, you can simply press the ‘Download’ button for downloading the theme into your system. If you choose second option, then you need to enter the payment details before starting the download.
Once you finish downloading the selected theme, open the folder where you saved the theme. Then, check whether the theme is in zip format. If not, change it into a ‘RAR’ file.

STEP 2: UPLOADING SAVED THEMES

Once you click on ‘Install Themes’ tab, you can find ‘Upload’ button below it. Then, find out the theme you have saved earlier from the corresponding folder. Click on that theme afterwards and press the ‘Open’ button. You can then find ‘Install Now’ button on dashboard. Click that button for activating the uploaded theme.

Installing themes from WP theme database

STEP 1: SELECTING AN APPROPIATE WP THEME

There is a search field under ‘Install Themes’ tab along with ‘search’ button. You can type the keyword for theme such as color, subject, features or author into that field and press that button. This will bring up thousands of themes on the screen. Click on each theme to view its preview and then select the one you like.
It is also possible to search for themes by clicking ‘Find Themes’ option after selecting the required preferences like color, columns, subject etc. If you want to purchase the themes, then click on ‘Purchase’ link below the theme for entering the payment details.

STEP 2: ACTIVATING SELECTED THEME

Once you select the theme and enter the necessary details for making payment (in the case of paid theme), press the ‘Install’ button. This will start up the installation process. When the process gets finished, hit the ‘Activate’ button for activating the theme on your dashboard.

Setting up activated themes

After activating the themes, you may need to change its settings according to your taste. It is possible to accomplish with ‘Theme Options’ option located under ‘Appearance’. You can click on that option and adjust header, navigation or even home page.

The settings options for themes will differ according to the capabilities and features. Even so, you can understand and configure them very easily. The control panel for certain themes may reside at different place. You need to make sure about this factor before installing a theme by checking author’s information and frequently asked questions.

Conclusion

If you are looking for free themes, then it is better to use the themes available in WordPress theme database as you can install and activate them easily. Even though it is possible to find out paid themes in WordPress database, the varieties for high profile websites are limited. In this case, it is better to look for the services from online paid themes providers.

Author information

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.

Creating web template with Dreamweaver

Step 1: Create basic structure with tools

Open a new page in Dreamweaver by clicking ‘New’ under ‘File’ menu. Use the tools to set up header, footer and navigation bar on new page. When you set these items, keep in mind that they will be common for all other pages in the site. Try not to put any unique item into the new page.

Step 2: Save basic structure as template

After creating the structure, navigate into ‘File’ menu and select ‘Save As Template’ option. This will bring up a small window with a name field. Type a name into that field and press the ‘Save’ button. Then, make sure that you can see a blue bar saying <> on the top part. This indicates that you are in template and the file is saved into ‘Templates’ folder automatically.

Step 3: Make template editable

Select an area in template for editing and place the cursor over there. Go to the top part of the template page and navigate into Insert->Template Objects->Editable Region. Enter an appropriate name into the given field and press the ‘OK’ button. Once it is done, it will show the name on the area selected earlier. You can then add different layouts or other changes on that area.

Using web templates created in Dreamweaver

Once you create the template, you can apply it to a page set up for making website. It is possible to apply the template before and after writing the content. If you choose the later method, then it is required to select an editable region for adding the content.

Applying template into a page

Go to the top part of the Dreamweaver window and click the ‘Modify’ option. Then, you need to point ‘Template’ option and click on ‘Template to page’ option. A window named ‘Select Template’ will appear on the screen after that.

Choose the template you want to apply from that window and select the site name by clicking the drop down menu. After that, press the ‘Select’ button for applying the template to the selected page. If you want to update the page according to template, then you can select the check box next to ‘Update page when template changes’ option.

Selecting editable region

After applying the selected template, you can find ‘Choose editable region for orphaned content’ window. You can apply the content in the template by choosing the editable region from that window and pressing the ‘OK’ button. Once it is done now you add the content into the selected area in the applied template.

Updating existing templates

Launch the ‘Templates’ folder and locate the template you want to update. Make a single click on that template for opening it. Then, you can edit the template in the way you want. Press the ‘Save’ button afterwards for saving all changes.

If you have added the selected template to other web pages, then you will get a prompt message after hitting the ‘Save’ button for applying the same changes to those web pages. You can either click the ‘Update’ or ‘Don’t Update’ button in that message according to your need.

Conclusion

Dreamweaver provides a quite easy way to create web templates according to your taste and need. The expensive web templates from internet are not necessary to make websites for short term use. You can use self-made Dreamweaver web templates for this purpose and save money.

Author information

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.