- Web Template
- Flash Template
- Resume Template
- Photoshop Template
- Word Template
- Powerpoint Template
- Oscommerce Template
Web Template
What is a Web Template?
Web templates are ready-made web designs used to design websites for rapid deployment. A web template will include most of the source files necessary for further customizing the template. It can be edited using WYSIWYG editors such as Frontpage, Dreamweaver etc.
How to Edit HTML file templates
Opening HTML file in HTML editors
You can edit the HTML file with any HTML editors. You can choose HTML editors like Dreamweaver or Frontpage to edit the HTML file. Right click on the HTML file and open it with Dreamweaver or Frontpage.
Opening HTML file with Dreamweaver
From the file menu, click open, browse to the correct location and select the HTML file to edit.
Opening the HTML file with Frontpage
From the file menu, click open, browse to the correct location and select the HTML file to edit.
Editing Text in your HTML template
When you open the HTML file in Dreamweaver or Frontpage, you will see all the text blocks with dummy text. You need to replace the text with your own text. All most all the HTML templates are extendable. You can insert all the needed text in the HTML blocks. In HTML editors like Dreamweaver and Frontpage, you can see how your website looks after editing. You dont need to add tags or any other commands.
Adding Images in your HTML template
To make your website unique you need to add your images in the HTML file. You can replace the existing images with your new image.
Editing images in Dreamweaver
Click on the image you want to edit or replace. You will see the image source link "Src" option at the bottom. Edit this link with the new images link. This will replace the old image with your new image. To edit the template image, you needed to edit the PSD file in photoshop and save the image. Then replace the image link.
Editing images in Frontpage
Right click on the image you want to edit or replace and select picture properties. In the picture properties, select "General" and edit the "Picture Source". This will replace the existing image with new one.
Setting Hyperlinks in HTML template
The Hyperlink will help you to navigate from one web page to another. You can set the hyperlink for the text or image.
Setting hyperlink in Dreamweaver
On selecting the text or image in Dreamweaver, you will see "Link" option below. You can add the desired hyperlink there. eg: " https://robot.lk.com ". On clicking on the particular text or image, the web page will navigate to robot.lk.com.
Setting htyperlink in Frontpage
Right click on the image or text you need to insert hyperlink and select hyperlink properties. You will see an Address field. Insert the web address and click "Ok".
Flash Template
What is a Flash Template?
A flash template is a ready-made web design using Flash. A web template will include most of the source files necessary for further customizing the template. It can be edited using Macromedia Flash.
Resume Template
What is a Resume Template?
A resume template is a ready-made design for a resume. The resume templates can be edited using Ms Word. You will get all the source files needed to edit the template.
PhotoShop Template
What is a Photoshop Template?
A photoshop template is a ready-made design using Adobe Photoshop. It is used to edit the images and text images for websites. You will get all the source files needed to edit the template.
Editing Photoshop Template
The PSD file is recognised by Adobe Photoshop. The PSD file will be layered for easy modification of the image file. All the image sources for your web design is available in it. You can edit the text, image, colors, or even add your own photos to your web design template and save the optimized image data for web using Adobe Photoshop.
To manage your PSD file, open it with Adobe Photoshop. It's easy, simply select "File / Open" from the top of the menu and browse to the location of your PSD file. An other simpler way to open the file is to right click on the PSD file and select "open with / Adobe Photoshop". You can also drag-and-drop it from your file browser to your Adobe Photoshop window. If the PSD files on your computer are associated with Photoshop software, simply double click it to open in Adobe Photoshop.
Editing text in Adobe Photoshop
For simplicity in modification and allow search engines to scan your information, most part of content text is represented in HTML as plain text. To get the perfect look, to attract visitors and make them stay on your website, your webpages not only needed usefull contents but perfect and beautiful external views. For this reason some portion of the text is represented as images in HTML. You can edit this text using Adode photoshop.
With your psd source file already opened in Adobe Photoshop, press "T" key to use type tool. Click with type tool cursor the text you want to edit. If you get a message "The following fonts are missing..." it means that you have not installed all fonts needed to modify text.
Shortcut keys
"Shift + Enter" - start typing from the new line
"Ctrl + Enter" - quit editing mode
"ESC" - discard all editing changes
To change text attributes such as font family, style or color etc, select text properties you want to modify. In the option panel you find dropdown menu for text, align, icons and color. Using this menu you can edit the font family, fonts style, size and color. After editing the text you should update it to your webdesign.
Editing images in Adobe Photoshop
You can insert your company logo and image content to create a unique website. Open the PSD file in photoshop to edit the images. You can hide the original image before inserting your image or logo. This will help to to easily understand the needs. You can also remove the images if you are don't need it.
To select a layer, choose "Window / Layers". The highlighted layer in the layer list is the current selected layer. Click on the "eye" icon on the left of the layer to hide the layer. The image associated with the layer will disappear. An other easy way to select the layer is to right click with the mouse on the image, it will list the layers containing images will appear. You can choose different layer to adjust the selection. Now you have selected layer with image you want to remove. To hide it, click on "eye" icon at the left of layers name. Click trash can icon at the right bottom corner of layers list panel to remove it.
To add your own image to PSD file just drag and drop it from file browser to your Adobe Photoshop window, Or you can use "File / Open" form the menu. Your image will appear in separate window of Adobe Photoshop program. After the modifications drag and drop the image to the template using the move tool. Move the image to the right position. If the inserted image is overlapped by other images, you need to move it up in the layer list, until the layer image gets visible. After editing all the images you should save the images.
How to update changes to HTML template
To get the edited images you should know some basics about slices in Adobe Photoshop. The slices in the PSD file represents image or background in HTML file. To see slices choose "View / Show / Slices" from the menu. To manage the slices use the slice tool (hotkey "K"). Select " File / save for web " for the menu to save the edited image for website. Make sure the updating image don't overlap with other image. To get the image for small buttons, bring it forward. If you need plain text in HTML, you should hide the text. First select the text layer you need to hide and click on the "eye" icon. Now update date the images using "Save for web" hotkey "Ctrl+Alt+Shift+S".
You will get a new window to optimize the images. Here you can select the image quality. Select the slice using the select slice tool, in the right you will get panel with image options. You can change the quality, the image type. Select the slices you need to update by holding the "Shift" key. Click on the save button on the top of the window. Change the file type options to images only and save it with a new image name. It will be better if you save the new images separately to a different folder.
You will get all the new images in the folder. Copy and paste the new images to the templates "images folder". Replace the old image file name with the new image in the HTML file. Now check the modification's in the HTML file.
Word Template
What is a Word Template?
A word template is a ready-made design using Ms Word. It is used for submitting reports, letter writing, semiar report etc. You will get all the source files needed to edit the template.
How to Edit the Word Template
You will get a Zip file for the word template. Normally it contains a DOC file and the images used. You need to edit this DOC file get your customized word documentation.
Opening the DOC file
Open the DOC file in Microsoft word. To open the file, take "File > open" and select the file you need to edit.
Editing the text in Word template
Click on the text you need to edit. You will see a rectangular box around the selected text. Edit the template text with your own text. You can also edit the font, colour etc of the selected text. To change the font, select the text and from the menu select "Format > Font". You can change the font style, colour, size etc.
You can duplicate the page and create more number of pages for your documentation.
CSS Template
What is a CSS Template?
A CSS template is a Cascading Style Sheets template. You can edit this CSS template to change the fonts, color, display and layout of your website.
What is CSS?
CSS is "Cascading Style Sheets". CSS is a set of rules that effect the display properties of your web pages. You can use CSS to display colors, fonts, colors, and layouts. CSS style are also known as rules.
What is the use of CSS file
The CSS files contains blocks of codes. Each block is referred as rules. You can incorporate these rules into your HTML. This will help to save time and browser compatibility. You can edit this CSS file and see the difference on all your web pages liked to it.
Website design created using Cascading Style Sheets (CSS) technology. Cascading style sheets provide web developers an easy way to format and to style web pages. CSS is very much compatible with almost all browser' s.CSS templates allow enhanced browser and platform compatibility. This will help your website to look similar in all web browsers.
Normally the style sheets are included as a separate file in the root directory of your domain and all the web pages are linked to it. This will help the web pages to load faster and enable browser compatibility.
Editing CSS template
You will see a file style.css in the template. You can open this file in Dreamweaver. You can also open the CSS file linked with the HTML in dreamweaver. Select the menu "Window > CSS Styles". This will open the style sheet related to the HTML file. You can edit the CSS file and save it.
Powerpoint Template
What is a Powerpoint Template?
A powerpoint template is a ready-made design using Ms Powerpoint. It is used to design beautiful powerpoint presentations etc. You will get all the source files needed to edit the template.
Oscommerce Template
What is an Oscommerce Template?
An Oscommerce template is a ready-made design for Oscommerce. It is used to design website using oscommerce features. You will get all the source files needed to edit the template.
How to install an Oscommerce template
You will get a Zip file when you download the template. Unzip it and save it on your computer. You will get a folder with the template name. Rename it as "Shop" or "OnlineShop". Then copy this folder to your root directory of your webserver. Now you can install it from your browser. Type "http:// domain-name/shop/" in your browser. The install process begins. Click "Install". Select both "Import Catalogue Database" and "Automatic Configuration" and press Continue. You need to add the following details.
Database Server – your database server address
Username – the user who has rights to create and change databases
Password – password of the user
Database Name – the name of your Oscommerce database
Session Storage – keep sessions' values
After filling the details press "Continue". Oscommerce will process the test connection with the database server and you will get the results. If Oscommerce fails to process the connection, then contact your administrator to check server settings. Then press "Continue now" and soon all the values will be added to the database. Now you can check the Oscommerce configuration settings. After checking the settings press "Continue".
press "Continue" to finish the installation.
Now you can check your online shop. You will see few notifications at the top. To avoid this and for better functioning follow the steps below.
1. delete the catalogue install from "your domain/shop" folder
2. mark "domain/shop/includes/configure.php" file as read only.
To make changes to your on-line shop, type "http://domain/shop/admin/" on your browser. For better security rename the folder "admin" with your secret name and access it accordingly from the browser.
How to edit the images in Oscommerce template
You will find the PSD file in the "Source" folder of the template. Open the PSD file in photoshop, edit the needed images and text and save the images. Update the new images to the main "Images" folder of the template using the same name. Copy these images to the same location on your web server. The new images have now been updated to your website. Now you can refresh your website, you will find the new images loaded on your website.