building websites

Producing a website

0 Comments 06 April 2012

Producing a website can sound like a daunting task, but if you start with the correct knowledge and a little guidence you will find it alot easier.

Website folder organisation

Making sure all files are organised into specific folders defined by what file extension or type they are is very important. The usual structure of a website consists of the ‘root‘ folder. This is where the index page of a website is located, index is the primary page that the rest of the website will use for the content. Here is the example of the folder structure on the server as you can see index.php is shown this is the home page of the website and has all the information required to keep the site layout the same. The style of the website is controlled by what is called a CSS file (Cascading Style Sheet) this is stored in the ‘css’ folder. All the images of the website are stored in the ‘images’ folder, this folder is organised into sub-folders Headers, Main, Menu, Content. Headers would contain the header images or banners, Main would include anything that is used for the main structure of the website such as shadows and footers and main background images, menu contains all menu images such as the mouse overs, backgrounds for the menu and finally content which contains all images used for pages like news, features and any additional images which will appear next to the text in the content of the site.


Planning and Producing Websites

Most of time The content of a website is very important as someone will only visit your website if it has something relevant to what they are looking for. The content for the website i have chosen as an example is a personal website which i have just finished building. The content of my website is quite varied but focuses on Car Modification with members and a forum and articles. the website is expected to attract a large number of visitors as alot of promotion for the site will be done, such as car stickers and adverts.

Planning a website can take alot especially if it a complex website. Planning is usually done on paper noting all the specs and features that a site will require for it to be useful to the user. The next step of the process is for the designer to created an image of the website incorporating all the usability asked for by the client once this is done the final image is handed over to the developer who will slice the image and crop parts out and then begin to build the framework of the website gradually adding the images and colors. once the site is built the functionality of the website is added, most websites created now are coded in  PHP (Pre Hypertext Processor) this is another programming language which is not as well known as HTML but has 100 times more functionality such as the ability to connect with a database.

Creating links within a web page is a very easy process to do. First make sure you know the address of the page, it doesn’t matter if the link is going to be to an internal or external web page its is done the same way.

• Firstly you open a TAG in this case the tag will be an ‘Anchor tag’ so you open it like so ‘<a>’
• After the ‘a’ put a space and type href=”"
• In-between the speech marks enter the address that you want to link to making sure you include http:// and making sure there are no spaces in the address.
• At the end of the address after the speech mark close start tag with a ‘>’
• After the  ‘>’ enter the text you want to be hyper linked such as ‘click here’. 
• Now close the anchor tag by typing ‘</a>’
• Now you are finished the code should look something like this:  <a href=http://www.examplesite.com/>Example Hyperlinked text</a>

Lot of people say that products such as Dreamweaver are industry standard, but i think software like this doesn’t teach you anything and most of the time it is easier to code a website by hand using simple editing and formatting tools such as PSPad which is widely used in the company i work for instead of big name applications. Most websites offer a WYSIWYG (What You See Is What You Get) interface for entering content but i will be showing how to enter content in the code. if you are changing content in the code then tag’s are heavily relied upon, most compliant tags begin with a opening and a closing tag which is always closed with a forward slash shown here <opening tag></closing tag> Simple tags are used to perform formatting changes such as:

• <br /> this is used to move to display text on a new line
• <p></p> this is used to define a paragraph.
  
• <b></b> for BOLD example”<b>This is my Bold text</b>”
  
• <u></u> for UNDERLINE
  
• <i></i> for ITALICS
  

Producing a website and the software used.
Producing a website requires the use of lots of different types of software, from the website being designed to the website being built and integrated and being uploaded to a live server. There are many different applications that do the sort of thing just some either do it more efficiently or cost more.

Design Software.
Most professional design companies will use big name software like Adobe Photoshop or Fireworks for making their web designs, the positive side of using these applications is that they provide advanced tools for creating high end designs but on the negative side the software licenses cost a lot and if not being used by an experienced professional would take a long time to learn how to use the software properly. Cheaper alternatives which are easier to use include Gimp and Paint Shop Pro these applications don’t have as much functionality but cost less and can be alot easier to learn. Below are 2 screenshots one showing the UI of Gimp and the other showing photoshop.