Final Website

Overall with my website I am very proud of myself! Huge sense of achievement!

For my first page I wanted to make our range of work to come up.. So I did I made an animation in photoshop, with each photo being on for 2 seconds then smoothly fading out to the next image. I then uploaded it as a gif into the images folder. 

About I obviously kept the same layout throughout and within here i decided to add pictures of use with our USP. I typed this out as it would then make the website more searchable in google and such search engines as the type would be found. 

 With the work page I firstly decided to make them black and white then scroll over and they turned to colour. However as I was going with the simplistic white background it looked abit boring. So I decided to keep the colour yet once you click on a photo it enalrges.

I also decided to change and edit my own buttons for the window that pops out. I decided to change the type on the buttons to fit in with my design.

 The blogs page - this looks fairly simple! However the photographs are used as links and once you click on them they take you to each of our blogs.

 The contact page is kept clear and simple, with a map of our location containing tube references along with our address and email contact details.

Website development.. 

Since its a high quality print for retail business I want it to be clean cut and have a serif font of which can speak for itself. 

Web 3

To begin with Dreamweaver will not open your page, you then have to click Manage site - Edit. Then link dreamweaver back to the root folder.

As we now have our main page, we want to create the other pages of the website. However instead of creating 5 more separate pages and going through the process again, you can convert the page into a Template.

 When saving rename as the template.

Once the main section of which you had clicked in and converted to a template is done it will have have this type below:

 Even though the page has been changed to a template it still states that it is a HTML page.. which we do not want we want it to be a .DWT (dreamweaver template) so you must save the template and name in template.

 This will then appear in the files column in the right hand corner.

 Then by making the page a template, you can go to File - New - Page from template. This then creates an identical page to the template.

 For the first new page save it as index to replace the initial index.

 Then you create 5 more pages for your website in the same way.. File - New - Page from template.
Then make sure you then save them as the page name etc Work.

 It should then look like this at the top of the page:

 Then to linking the pages. You click on the first page then in properties there is a little box called link, you can either click on the file next to it and find the page you want to link it too. Or you can use the target next to it and drag that to the page you want in the files column in the right hand bottom corner.

And repeat this for all the other pages.

 Once you have linked the pages, then go to File - Save All. Then you will see this message below:

 Click update then this message below will come up then click close.

If you copy and paste text into the coding it won't keep the formatting, if you paste it into the design it will. 

 If you want the text in a certain area on the page you just create a table then paste the type into there and edit the padding. By editing the padding it will make the text further away from the outline of the table.

 To change the font highlight it - Properties bar - page properties - change font and size.

For the heading it is different:

Highlight - Properties - Page properties - Headings ( CSS) - change font and size THEN properties bar - Format - Heading

Also the type will automatically align the font in the centre of the page in the properties bar you can go to vertical and align at the top.

When putting images onto the webpage - make sure they are all the right size saved at 72dpi and as a png. 

Web 2

Html - most common form.

PHP communication between database and a web page for example Amazon or Asos.

CSS - a page that holds all formatting then link it to each separate page - so the coding doesn't have to be on each separate page. 

Javascript - used for things such as drop down menus

META tags - key words of which are found by search engines.

<html> starting

</html> ending

 <title> Unintitled Document </title>
This is in the browser not on the web page.

Dreamweaver - Site - New Site (to create a new website)
Dreamweaver - Site - Manage Site ( to open existing one)

<body>   anything between these two tags will be visible on the web page </body>

A website firstly needs to have a route folder. With a sub folder of images.
Then go to Server - Site - New Site to link you page to the folder.
Put the site name in and link folder beneath.

 To then run the page, you will have bought a domain name and server.

Once you have clicked save from the Site menu, it will then have the folder in the files menu in the right hand corner which will hold all information you want on the web page.

To create the actual page, you firstly go onto Insert - Table

Then fill in the size of the page you want, number of rows and columns, and even though you don't want any cell padding or anything you must put a 0 to just let it know there is nothing there. 

There is not a height option so in the coding option, click after the width and press space. Then a drop down menu will appear, press H then height will come up, then you just type in the height you want (600)

To make columns in your design you click in the cell. Go down to the properties bar at the bottom and there are two buttons under the name Cell. Click on the one on the right to split it.

 It splits into equal sections, you then click in the cell and go down to the properties and change the W & H to the wanted pixels.

 Then to get the different sections you do the same but split the cells into rows in stead of columns.

 To create the text use Photoshop! Photoshop - Web - then edit the dimensions to the size of a button or whatever you want to make ( 100px x 50)

 Duplicate the type save one version into the route folder with the type on and one without the type to create a rollover button.

Then in Dreamweaver go to Insert - Image - Image Rollover then name it and upload both types of the button.