Monday 21 October 2013

Designing for Web Workshop 1

DESIGNING FOR WEB WORKSHOP 1
  • Web standards and limitations
  • Layout
  • Setup
  • Basic coding
When designing for print your limited to what colours and stock, the same as web you are limited to what colours ect. We will look at limitations and layouts this session.

- You have to set up your programme in dreamweaver or your website wont work.

- Web standards - Made up of Acronyms & Abbreviations 

HTML ,XHTML ,CSS , API , WYSIWYG - what you see is what you get  , MIME , SQL , MYSQL
SEO - search , engine , operation , FTP ,URL - uniform locator, XML ,PHP ,ASP ,JSP ,CGI ,AJAX ,ASCII
DNS, GIF ,HTTP, HTTPS, UI - user interface, UX, WWW - world wide web

These are all a language all the spelling and format has to be correct.

 Limitations , or... designing for the lowest common denominator!

 Web safe colours 216 colours you can use consistently through the web

 When colour first arrived on web computers could support a maximum of 256 colours on there 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 three digit hexadecimal code.

 Red 
#FF0000
#FF0

 White
#FFFFFFF
#FFF

 Black
#0000000
#000

 WEB safe colours - 

  • The RGB colour mode is capable or reproducing 16 million different colours , significantly more than HEX 216 colours. 
  • The combination of red , 
  • This wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and photoshop and illustrator, by specifying the percentage of 255 per RGB. - For example 100% Red would be: RGB (255,0,0)
WEB safe fonts - 

For a chosen font to display consistently across different computers a standard font must be used.

Further to this font-family is chosen giving several ''fallback'' options to ensure maximum compatibility between browser and systems. For example is the browser/system does not support the first font it tires next one listed.

Some common font families

Serif fonts

Georgia, Serif 

'' Palatino linotype'', ''Book Antiqua'' Palinto , Serif. '' Times new roman'' , Times , Serif.

Some common Font families 

San Serif Fonts 
  • Arial 
  • Helvetica
  • san serif
  • Tahoma 
  • Genevan 
  • San serif
  • Trebuchet
  • Veranda

CCS font - face 

 The CSS compatibility @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser system.

 However using font face breaches licensing and copyright laws related to specific font foundries

 There are many free font websites which include free license usage for @font-face kits including font squirrel.

 SIZE DIMENSION , PIXEL RESOULUTION

 640 x 480

 800 x 600

 1024 x 768

 1920 x 1080 

 2800 x 1800 (220 ppi)

 File Format

 PNG

 GIF

 PDF

 JPEG

 72PPI

 RGB

 Lossy

 Compressed

 CREATING A WEBSITE
Similar startup and settings to illustrator or anything other adobe programme.

 The first column you can open your recent items and the middle column you can create new document.


  • when you click on code on the panel you can see what goes into a website.
  • we don't need the top line so we deleted it
  • we also didn't need the rest of the second line only <html> so we removed it but kept the angular bracket ( never leave a space between the word and bracket
  • The first line has open <html> and the bottom has close </html> you always need these or the website wont work.
  • The parts in the middle are things that are functionality for the website how we want it to look or what need to be in there. - <head>
  • <meta> are something to do with search engines 
  • <title> increases search engine optimisation.
  • All the design goes between the open and close body tag
  • To finish close with </html>
- Anything that has been designed for the website is all contained in one folder. You need to manage your files or the website wont work.


  • New site , but when your on a new pc we will simply open our root folder to regain our previous work.

Everything must be stored in one folder called ROOT and i have gave the website name first website
Call the homepage index. and save it into root folder.

Preview every time so if you make a mistake and the website stops working you know what changed had that affect.

command S
command TAB
command R

 I changed my name in the title 

I pressed save and previewed it in chrome and there it was on the tab

I then added hello everybody between body and body which will appear on the website i then pressed save.

I then previewed the website again and there the information was.


CREATING CSS

we created new document we selected CSS and clicked create.

Once opening the CSS the text was pink we typed body and open bracket we then typed 'F' this brought up the list of all the options that begin with the letter F.
We then clicked a font family we wanted to use i used Tahoma , Geneva, San - Serif.
It then appeared after the body and open bracket so this would change the font of your text in the code section.
To finish it we put a semi collon ' ; ' then pressed enter a few times and closed bracket
We clicked on the link button which was on the far right hand side pannel and this box come up we next browsed our folder and made sure it saved in our root folder.

This made the CSS file and our orginally web index linked and our text appeared like this ...


I loved the first session creating the actual index for our website in dreamweaver it was clear to understand and a helpful programme to use.

Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)