Thursday, 5 May 2011

web design session III

CREATING THE OTHER PAGES OF A WEBSITE


On a website, all the pages have a general template. To set this up in Dreamweaver, click the desired 'Editable Region' and go:

  • Insert > Template Objects > Editable Region
  • Then save it as a template. It should be saved as a .dwt file.
  • Go File > Save as Template and save it as 'template'
Once this is done you have a 'templates' folder with the template in your folders tab:


To create a new webpage go:
  • File > New Document > Create From Template

Then (IMPORTANT) save this template over the original index file.

Now you are ready to create the other webpages. To do this do the following:
  • File > New Document > Create From Template > Page From Template > (Select .dwt Template) > Create then go: File > Save As > (Save as an appropriate page name (i.e. - 'Home' or 'About') > Save
  • Repeat this for every page you wish to create with the original template.

The advantage of doing this is that you can link the button to the original template. This save loads of time.

To link the buttons:
  • Click on the desired button in the .dwt template
  • Find the 'link' bar in the properties toolbar and drag from the crosshair thing to the desired .html file sitting in the folders section with the blue arrow.

Drag from this:

To this:


Then go:
  • File > Save > Update (or something) to keep it up to date.
Then go:
  • File > Save All to save every page.
  • Change the content on every page to differentiate between the pages when you preview.
Now the website is working. All is left to is to add all the content. However, this is not as simple as it sounds (I would imagine...)


FORMATTING TEXT
  • You can use filler text to test layouts in Dreamweaver. You can get good filler text on www.lipsum.com.
  • You have to copy and paste whatever text you want into the DESIGN VIEW rather than the script view.
This is what you get:


To get padding on the text:
  • Cut the text you have
  • Go Insert > Table and make the table the exact size of the area you want text in and add the desired padding.
You are left with this:


To change the font:
  • Click 'Page Properties' in the properties tool bar at the bottom.

To alter the title go to the Headings sub section in the Page Properties window:


You must highlight your desired heading then go Format > Heading 1 to select it as a heading. Then go to the Page Properties window as instructed above.


This is the result:



IMAGES

The simplest way to put images into a website is:
  • Insert > Images
  • Then just find the image
To get coding for come interesting image gallery functions you can visit the website, LIGHTBOX 2

You can edit your own buttons and stuff on the gallery functions to make it more personal and unique.
  • Once you download the gallery function, you should put everything that is downloaded into the root folder. To change the buttons on the gallery function just find the image files for the buttons and use the sizes as a template in Photoshop or Illustrator. Save the files as the name of the original images.
  • You NEED the CSS folder and the JAVASCRIPT folder. Just copy the image into your own image folder.
  • On the index page that you download with the gallery function, you just need to copy and paste the elements of code that are given into your own website script.

VIDEO

Do add a video from Youtube or Vimeo:
  • Find the embed code on the desired video and copy it.
  • Place the text in the script view in the appropriate place.
  • Edit the text you don't want out in the design view.
If you want to put videos into something like an image gallery:
  • Go on 'Yox View' which is a website that offers galleries like Lighbox 2 but it works with videos and images also.
  • The embedding instructions are given in a very similar way to Lightbox 2.

MUSIC

If you want an mp3 player on your website, there are thousands available. However, most of them charge. www.premiumbeat.com is one of the best. It is completely free.
  • Upload the mp3s into your images folder.
  • Embed the player like you have everything else.

GETTING WEBSPACE
  • Get the cheapest webspace you can as they are all more or less the same.
  • Use and English company as they will be awake is something goes wrong.
  • Use www.123-reg.co.uk as they offer cheap domain names.
  • Here you can search the domain names that you desire to check if they are available.
  • www.one.com is good for web hosting. It offers unlimited bandwidth.
  • You get fined for going over your bandwidth. Be aware of this.
  • Nothing is ever free. Be aware of this. If they say it is free. You might get some inappropriate adverts coming up on your website.
  • Always go for the smallest package. You'll never really need anything else.
To upload your website from Dreamweaver to the internet to make it go live:
  • Go to: Site > Manage Sites > Edit > Severs (Sub Page) > + Sign
  • You can test a website on www.freetzi.com which is a free hosting website but you get crazy adverts popping up. It's good for testing.
  • Type all the information that your hosts give you then your website goes live almost immediately.
  • To get to the top of google you need to update your website every day. If you upload a blank file every day then you will rise in the rankings.
  • The website CUSHY is a good way of managing your website wherever you are.

No comments:

Post a Comment