Wednesday 7 November 2012

Design for Web - Group HTML Session

Open up dreamweaver to develop your html and tss.

Choose HTML:


Design view of webpage: A lot of space. Very basic. 
click on the code tab at the top: what you see here is the coding for a website. 


delete line 1 and 3=

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

line 3 is meta tag : key words in search engines. create searchable words and embedded in this code. 

basic website to create EVER:

line one:

<html> : form this point onwards we will be speaking in hypertextlanguage. telling the web browser what language you are speaking in, if you didn't tell it then the web would get confused.

line 8:

</html> : finished talimg in HTML because of / symbol means end.

line 2:

<head> : head tag is not visible in website, makes website function in certain way. makes it function in a way, declare languages in head tag. 

<body></body> : for design of anything visible on the website. 

For website to work you need folder that contains everything inside website.  Error page: page isn't inside the folder etc. The technical name for this folder is the ROUTE FOLDER. 



save a your route folder: no capitals, no punctuation, no spaces etc
create subfolder in route folder called images, maybe create one called psd's etc > for high quality images just to make to easy to work on. 



call site name what the domain name is or company name etc. We need to tell dreamweaver where the folder is stored, find and open in local site folder. 
 save:


you should have this at bottom right to show that you site can go active. IF YOU DONT HAVE THIS THEN YOUR SITE WILL NOT WORK. 

Will become homepage: 

file > save as


do not name the homepage home because it is global : it has to have the name:


INDEX.HTML (lowercase)

url will always display index html page that is inside that folder > first page has to be called this. 




You have to save and preview in browser to make sure everything / it is working. 

Untitled browser.


Hold cmd and tab to flick intreet and ream weaver fast:



cmd and s = save cm and r = refresh


skip formatting in HTML > it is very limited.
creative designs = CSS 

you should NEVER copy and paste code: stops the website to work. 

Work with CSS : create a separate document called CSS, we can do advanced layout and only type evthing once and from that you link the CSS to HTML pages, better then re-typing. 

Formatting Text:

file > new >

blank page


choose CSS and blank page:


second line does not effect anything: it is used for notes and to highlight what code is doing what. 


eveyrsinhle stting needs to be on a differnt line. 
press return for nect line and each new thing needs to go on a separet line.

type in f for f > font family>helvetica etc


save CSS
link Css to index page







link should appear on the code n the index page.

cmd s  on index > command r on internet.

























HTML and CSS design and build by John Duckett - READ THIS

I found this session very interesting and at the moment the coding seems to be quite satisfying, however the column have proposed a some quite tricky problems which have been hard for me to understand. 

No comments:

Post a Comment