Studio Brief 3: Web Session - Workshop 1

Abbreviation 

HTML - Hypertext markup language - is the language used within dreamweaver

CSS - Cascading style sheets

WYSIWYG - What you see is what you get

SEO - search engine optimisation

FTP - File transfer Protocol

URL - Uniform resource locator - address to the folder that contains your website

HTTP - Hypertext transfer protocol

UI - User interface

UX - User experience

Limitations

Web safe colours
only 216 colours that can be represented on a website. Web safe colours can be shown in most adobe programmes to help you choose an appropriate colour for web.

When colours first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 'web safe colours' were identified.

These colours were. are reproduced consistently across the web using HTML, specifically a six or where possible a 3 digit hexidecimal code.

E.g. Red - #FF0000 / #FF0

The RGB colour mode is capable of reproducing 16 million diferent colours, significatnly more than HEX colours.

Red 256 x Green 256 x Blue 256 = 16,777,216

The wider range of colours can now be reproduced using CSS rather than HTML

The full RGB colour range would only work on fairly new computers. Choose your target audience carefully, as you may end up designing a website that can not be shown on certain peoples computer.

Web Safe Fonts
For a chosen font to display consistently across different computers a standard font must be used

Further to this a font family is chosen giving several fall back options to ensure maximum compatibility between browsers and systems.

With CSS you can install a font onto the web server so that it will work on any computer. Using this technique can break copyright laws of certain font families.

Size of the website
640x480

800x600

1024x768 - suggested size

1920x1080

2880x1800 (220ppi)

File Formats

PNG

GIF

PDF

JPEG

72ppi is suggested, but is massively outdated. 72ppi is used to keep to file size very small and easy to load.

768 x 1024

header = 160

Basic Coding


<html> tells the web browser that you are using the html language 
</html> shows that you are going to stop using the html language

All tags have an open and close tag. One has a code and the other has a slash (/) with the code to show that it is the end.

Some examples are:

<title> and </title>
<head> and </head>
<body> and </body>

The content of the website has to be written in between the open and close tags.

Here is an example:

The code will look like this:
 Here is how the preview looks in Dreamweaver:
And here is how it looks tested in a web browser
In a CSS file we write down the attributes that we are going to give to part of our website. Below we have use { and } to make the body text a variety of fonts.
Here is how the website looks once we have changed the font with CSS
We can see that the original code is now linked with our stylsheet.
Here we have created a blue box that surrounds the text with CSS code.
The code for this is seen below as 'container'
We used a code to centre align the box and change the height and width.
All the code under 'container' helped us do this.

Tuesday, 28 October 2014 by Ashley Woodrow-smith
Categories: , | Leave a comment

Leave a Reply