Tuesday, 12 November 2013

DESIGNING FOR WEB: WORKSHOP 3




The above imagery shows the rollover applied to the 'home' navigation link. These buttons are designed on illustrator.

The size for the buttons 218w  x150h. This is set in pixels in illustrator when a new WEB document is opened.
Text can then be applied within the box.

The dimensions of the container are 1024 x 768 pixels.









Each layer needs to be saved differently, i.e. type/rollover.


To apply in dreamweaver:


The first line is for the home rollover shown above. The second, 'container' is the box the contents  are placed into. Links need to come before the closed div button to ensure they don't spill into the content.



Both images for the rollover are placed above with relevant labelling.

The webpage when viewed now shows all working links on the top.


Relevant coding for each rollover button shown above.

Design Sheet.

In coding links. a # standards for a blank page.


Link to homepage.


Links to pages added, i.e. contact.html

Not viewable yet through live preview due to no linked sites.



When the homepage is saved, change the content (here a sentence) to see how content changes when rollover links are pressed, and a relevant page will now be linked.







Save each page separately as work.html etc and preview, all the links will save.

Save each file on their own under SAVE AS to specify not SAVE.

We now have a working website which needs content applying and formatting, and then applied.

Applying Type:

Using  the box model.


Sizes and dimensions must be worked out before to ensure accurate design.


Coding on style sheet for the two columns for content; left and right.



Coding for the two columns was also placed in the coding after the style sheet has been edited.

<p.> stands for paragraph break

<br> stands for a line break



Font sizes can be changed.


Colour can also be changed.

A header can be added by altering the css style sheet.
These are shown below:




The changes to header and type colour can be seen above.

The H1 tag can be applied anywhere.


Applying Imagery:

Once a photo was applied and resized to the correct pixel size, 437 px.
Maximum height can be 518 px.
This was done in photoshop.






Try and reduce the image size to as little as possible (compression) to reduce file size.
Change name to smaller name, still with extension.



Insert > Image > Select File
Replacement for text in right hand side column.
Images should always be saved into the images folder in the root folder.




The webpage now shows both text and image as well as a header.


Here I have changed the background colour and header colour. 

For adding video to websites, using Vimeo.


Use the embedded code. On Vimeo options on size etc can be adjusted changing the relevant code at the same time for you. This is then copied into the correct column or cell.

For sound use Sound Cloud to add music to web pages. This is done in a similar way with an embedded code. It works in the same way as Vimeo.


Both these sites are streamed direct, so isn't running off the websites bandwidth etc. There is also no buffering before streaming, and content plays straight away.

Image galleries can also be added, for example, Light Box.


Interface, next and close buttons can be edited.  

It also gives you a guide on how to apply to your website.


Dimensions:


No comments:

Post a Comment