Wednesday, 27 April 2011

web design session II

USING DREAMWEAVER

  • Creating a new document in Dreamweaver is different to Photoshop, Illustrator and InDesign. 
  • Document setups include, HTML - standard coding, PHP - a system that helps search engines work on sites like Amazon and Play.com. This saves space on the website. It works via a spreadsheet to bring information together from the spreadsheet to create a webpage on the spot in search engines. CSS - a way of formatting font sizes and colours etc. JavaScript - this is a system of coding that makes complex HTML codes much more simple.
IN DREAMWEAVER
  • You have 3 windows to view how your work. These are CODE (coding), SPLIT (code and design) and DESIGN.
  • Use the FILES TAB to keep a track of all the files that you are using in your website document.
  • You begin with a code:
  • A key thing with code is that it has to be perfect.
  • When beginning, you can delete the following from the given HTML at the start. You are left with this, which is all you need to begin creating a website:
  • Line 1 - line 9: You are talking in HTML. A '/' in line nine means you have stopped 'talking' in HTML.
  • Line 2 - 
  • Line 4 - Where it says 'untitled document', this is the title of the webpage. This is searchable through Google.
  • Line 7 - Anything  that is between the 'body' brackets will be visible (i.e. designed stuff) on the website.
  • Always work from a 'root folder'.
  • Always title your folders in lower case to prevent errors and corruption.
Go to Site > Create New Site:


Name the website then select the root folder to work from:


In the servers bar above you enter all the information for setting up your website for the internet. All the information you need here is sent to you when you buy web space.

CLICK SAVE

Then your root folder need appears in the files window:


The first thing you need to do is save your webpage into the root folder so that everything is working in unison.
  • Go File > Save As.
  • You have to save your file as 'index.html'. This is for internationalisation so that anyone anywhere can understand it.
  • You are ready to begin designing.

DESIGNING IN DREAMWEAVER


Working with the following template:

  • The first thing you need to do is create the 800x600 template box. Go to Insert > Table. You are given this (this has been filled out for the correct settings):

  • You still need to enter the height of the box. You are given this code:
  •   means nothing appears in code.
  • Type "h" then press return on "height" and simply edit the height in the code.
  • Hold your mouse down and drag onto the box in order to edit the alignment of the box.

COLOUR
  • Click on Bg in this toolbar to change the box colour:
  • To give the background a colour go to the code and edit in the line. As I have done in line 8 here:
  • You are left with this:

EDITING WEBSITE FURTHER
  • You can edit the box by splitting it into columns to create different sections of the website but going into the cell box on the bottom toolbar:

  • Then you can edit the width and height of each of the columns to get different sizes:
  • You cannot simply move boxes. You have to split them to the appropriate the measurements and delete the appropriate boxes.
CREATING ROLLOVER BUTTONS
  • You do this is Photoshop or Illustrator. Create a WEB document in exactly the right size of the button you want to design.
  • You need to create one for the display and one for when you roll the mouse over it.
  • You can use any font you want as this will be an image.
After creating some rollover buttons, here is the result. Nothing amazing or well designed but still evidence of beginning to understand Dreamweaver:




No comments:

Post a Comment