|How to Build Your First Website with a Free Website Template
The look of your website will define your business for every person that visits. It will attract a specific type of audience, and communicate the quality of your products/services before they even see them. The goal of this tutorial is to help you build a quality website from a generic free website template while saving a bit of the money you worked to hard to get.
If you haven't checked out collection of free website templates just yet, here's link:
As you consider the website templates available to you, ask yourself the following questions:
1) What is the purpose of my website?
Begin by visiting the websites of your competition. Make a list of the ones you like and the ones you don't like, and then ask yourself why? Next, begin your search for website templates that meets the needs of your business.
Downloading Your Website Template
Unpacking Your Website Template
In this folder you may find:
PS Files - If your folder includes PS (Photoshop) files your template can be edited with Adobe Photoshop, Photoshop Elements.
Finding Editing Software
Adobe Photoshop - If you need Adobe Photoshop you may download the full version of the application for a free 30 day trial on the Adobe website.
Editing Your Website Template
Photoshop - After you have downloaded Photoshop, you can click on the Photoshop software icon to open Photoshop. Next, choose Open in the File menu, and then select your file and click Open to open your website template Photoshop file in the workspace. To edit the text, simply select the black arrow from the tool bar, and click on the text. A text box will appear around the sample text. At that point you may begin adding information about your product/service. In some cases you may not have the correct font installed on your computer. You may be able to find that font on a free font website. To add an image, create a new layer, and select Open from the File menu. Find the image that you would like to add to your template, click on it, and then click Open. Position the new image, and then delete the old layer. You could also create the new layer, and then copy/paste the new image. If you template file has been pre-sliced, then be careful when replacing the image. It must be exactly the same size, and must be placed in exactly the same location. Changes may create display issues when viewing your website in a browser. Adobe Illustrator - After you have downloaded Adobe Illustrator, you can click on the Adobe Illustrator software icon to open Adobe Illustrator. Next, choose Open in the File menu, and then select your file and click Open to open your website template AI file in the workspace. Then simply select the black arrow from the tool bar, and click on the text. A text box will appear around the sample text. At that point you may begin adding information about your product/service. In some cases you may not have the correct font installed on your computer. You may be able to find that font on a free font website. If the text is grouped with graphics, you may need to click several times to get to the text. Once you have added your product/service infomation, click on the white space surrounding the design. To add an image, select Open from the File menu. Find the image that you would like to add to your template, select it, and then click Open. Click on the image to select it, copy it, then paste the image into your website template file. Resizing the image is as easy as it is in your word processing program. Select the image with the black arrow, and drag the corner until it's the right size for your template. Text Editor - After you have downloaded your text editor, click on the software icon to open it. From the File menu, select Open. Select the file that you want to open, and then click Open. Your HTML file will be displayed in source code view. Find the text that you would like to edit, provide information about your business/service, and save the file. Be careful not to make changes to the code that serves to format your text and images. Dreamweaver - After you have downloaded Dreamweaver, click on the Dreamweaver software icon to open Dreamweaver. Dreamweaver will allow you to open and view any HTML file in very much the same way as it will appear in your browser, while it writes the source code for you as you adjust the text and visual appearance. From the File menu, select Open. Select the file that you want to open, and then click Open. You will see your template in the workspace. Make any edits that your find necessary, and then save your work.
The Cross Road
If you desire to press on, you will need to assess the needs of your particular template, complete the source code, decide if your would prefer a .html, or .php site, and load the source code and image files into your FTP client. After your get everything looking right in your favorite browser, you will need to check for issues in all of the popular browsers including Firefox, Safari, Explorer and Google Chrome.
HTML Website - A simple website structure where each page must be edited manually.
If this seems a little daunting, you might consider allowing an experienced website designer help you complete your journey.
Turning Your Abobe Illustrator Template into HTML Code
Uploading Your Website Template
To open the workspace you will need to click on the FTP software icon, and then enter your account infomation, including:
1) Hostname (www.yourwebsite.com)If you didn't record this information when you purchased hosting, you can contact your website hosting provider for it. When you have entered the information, click Connect. To publish your files, you will drag and drop your files into the FTP workspace. Begin by dragging your index file into the root directory. Next, create a folder in your root directory, and name it "Images". (If your website template came with HTML files, it will most likely expect the file to be named as such.) Drag and drop your images into this folder. If you have a small website that you anticpate will always be small, you may place these pages in the root directory as well. If you expect your website to grow quite large over time, you will want to consider creating additional folders that will group similar sets of pages. The addition of the various set folders will necessitate the change of your navigation links, depending on the names you gave to the folders.
For example, the general application articles on this website are placed in a folder called "general". The website URL is thus structured in the following way:
Once loading is complete, you may type your website address into your favorite browser to review your work.
My free eBook Pinterest Marketing FAQs will help you get started with Pinterest, answering many of the questions you will have about how to make a splash on Pinterest.
by Andrew Fling
Get your first link from us. Add our link on your new website, and we will give you a
high quality link from our family of websites for free! More info...
© 2018 Wave Music, LLC. All rights reserved.