Friday 15 March 2013

Super Cars Website

Introduction

In this blog I am going to explain what my website is going to be about and I am going to talk about each of the five web pages I will create and what they will contain. This blog will also contain a navigation diagram which will show how each web page will be connected.

Who's it for ?

 This website I have designed is for super car fans that want to look at the latest cars out there and find the latest information about them. The target audience for the website is anyone from 10 years old on-wards as people from very young ages also loves super cars too.



Navigation Diagram of my Website 
                   






Homepage ( Page 1) 


The homepage which will be called 'home' will contain the logo which is called 'super car' at the top and will then have a navigation bar as well as information on what the website is about.





About Us ( Page 2) 


This page will be called 'About Us' and will introduce the website by talking about what we do and why we made the website. It will have a few images of different car logo's. 







Gallery (Page 3)

The 'Gallery' page contains the images of the best super cars so the users can see what is available on the market. 









High Performance Cars (Page 4)

The 'High Performance Cars' page will show the two most powerful and expensive cars out there and will give information about them for the users to read. 








Contact Us ( Page 5)
 
Finally the 'Contact Us' page is for anyone who wants to contact us for any questions they may have. It has contact details such as my number and email as well as having a map to show where we are located. 







Reference

 Page designs - 10/03/2013 - www.Lumzy.com

Posted by at No comments:

Thursday 14 March 2013

Tools and Techniques (Assignment 2)

Introduction

In this blog I am going to talk about the different tools and techniques used to produce my website and I am going to describe what each tool does.

 HTML

 HTML (Hyper Text Markup Language) is a language for describing web pages. HTML is a markup language. Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file. A markup language is a set of markup tags. The tags describe document content. HTML documents contain HTML tags and plain text. HTML documents are also called web page. HTML language is relatively easy to learn. Many Web development programs (such as Komodo Edit) allow you to create Web pages using a graphical interface. These programs allow you to place objects and text on the page and the HTML code is written for you.

 Example:

<!DOCTYPE html>
<html>
<body>

 <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

 </body>
</html>


CSS
CSS (Cascading Style Sheets) allows a web developer to design a website in terms of the colour and design. CSS does not "create" anything all it does is decorates and align stuff on the web page. HTML (Hyper Text Mark-up Language) is responsible for the construction and the total output of a web page. The main job of CSS is to define what the HTML elements will look like; therefore CSS is built into all HTML tags. 

 Example:

 #container
{
 background:red;
float:left;
}

Komodo Edit
Komodo Edit is a free language editor that allows you to create web pages using many programming languages such as HTML5, CSS, Python, PHP, Javascript and many more. Komodo Edit is available on most operating systems such as Mac, Linux and Windows. Komodo Edit has many tools to help the user such as ready made templates for any language you are using that has the basic codes written out for you. When I was creating my website I used HTML5 and CSS and I used the HTML template and it had all the necessary code written out for me which made it easier for me. 

Lumzy (Wireframe Tool)
A wireframe is a design tool that is used in developing web pages. It is a tool that lets you present  the structure and content of your pages without actually making them. This is done by presenting each section of your make e.g. the header, footer and content in boxes and you would put dummy text and images where your actual content would go. This would then give you an idea of what your web page will look like. Wireframe is also used for designing other products such as cars, the car is made of lots of wires and a prototype is produced to show what it might look like. I made my website wireframe from Lumzy.com.

 A Car Wireframe






Gliffy ( Graphics Program)
Glifffy is graphics tool I used to create my navigation diagram for my website. Gliffy allows you to create diagrams and flowcharts and provides a wide range of tools to use so you can make your diagram very easily. For example it has ready made templates such as a floor plan for a house or a diagram for a website. I used to shapes Gliffy had such as squares and triangles to make my navigation chart and connected them up with  lines. 

 Lorem Ipsum/ Lorem Pixel
Lorem Ipsum is 'dummy text' that is used in website designs or any other document e.g. a poster. The text itself is Latin and was made by Cicero with the words altered. The main purpose of this text is to put it into what you are working on e.g. a website so you can see how the text would look and you can therefore change the font and colour. In the design stages you wouldn't need real text so you would just use Lorem Ipsum. In order to get it you go on the website (www.Loremipsum.com) and you can choose how many paragraphs of text you want. Lorem Pixel is the exact same thing but it has images instead, and you can use them instead of using your real images to change the size and contrast of it etc. The website for Lorem Pixel is www.lorempixel.com.

 Reference

HTML Examples - 14/03/2013 - http://bit.ly/BK9pD

 HTML  - 14/03/2013 - http://bit.ly/dl8XFm

 CSS Introduction  - 14/03/2013 - http://bit.ly/hP4IL

  Wireframe - 14/03/2013 - http://bit.ly/YbtEBX
Posted by at 4 comments:
Subscribe to: Posts (Atom)