Web standards & Limitations for a digital screen.
Layout - what limitations & informs it?
Setup dreamweaver for a website.
Basic coding
Web standards
Built up of acronyms & abbreviations.
Such as the ones we are going to look at today:
HTML
XHTML
CSS
WYSIWYG - What you see is what you get
SEO - Search engine optimisation
FTP
URL - Uniform resource locator
WWW - Worldwide web
UI - User interface
UX - User experience
Limitations
Designing for the lowest common denominator.
Screen PPI is 72, although a retina display is 221 PPI
The size of the files.
Internet speeds.
Web safe colours
216 colours to be able to consistently reproduce using HTML, specifically a 3 or 6 hexadecimal code.
216 colours to be able to consistently reproduce using HTML, specifically a 3 or 6 hexadecimal code.
RGB colour mode is capable of reproducing 16 million different colours (256 shades for each value of RGB) but not as consistent as hexadecimal code. And the RGB colour mode is reproduced using CSS rather than HTML. They are read & identitfied exactly the same way that Photoshop & Illustrator red there values, RED (256, 0, 0).
Web safe fonts
Chosen fonts to be displayed consistently across different computers it must be standard.
To ensure maximum compatibility you will chose 'fallback' fonts too this is called a font family, if this isn't done then it will automatically translated to times roman.
The font is not embedded in the website it is taken from the computer which is been used to look at the website.
If you have more than one word when wanting the one font you have to use speech marks to show its one typeface. "New times roman".
Three standard families when designing from web: Serif, Sans-serif, Mono space.
The CSS compatible @fontface allows you to install fonts to a website, which means the font choice remains consistent regardless of system. However this breaches licenses & copyright laws related to font foundries.
Need to look to be able to download the font-face kit. FontSquirrel.com (Free licenses usage)
Size, Dimension & Pixel Revolution
640 x 480 - 1991
800 x 600 - 1995
1024 x 768 - 2004
1920 x 1080 - 2008
2880 x 1800 - 2012 (220PPI)
When designing a website you would design for the lowest common denominator although because how things have vastly changed it would be very small on the latest screen. Although, this can be worked around.
File Formats
Below are the files you would normally work with when designing for web:
When saving an image for internet you need it to look good but not too big, but using compression ratios.
PNG
GIF
PDF
JPEG
-
72PPI
RGB
-
Lossy
Compressed
Dreamweaver
Dont open any documents from recent documents as shortcuts don't work very well when working with websites.
The features column shows you videos that may be too complicated and be hard to engage with.
We are going to create a new HTML today:
If you have the design selected in the top left corner then you will see it how it will appear on the screen. Its best to work in this way as you can see any problems occurring.
This is the code window, this is the code that is used just to even have a blank website.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
We don't need this for the website to adhere properly. You can delete it.
<html xmlns="http://www.w3.org/1999/xhtml">
You dont need the ://xmlns=""http://www.w3.org/1999/xhtml"
<>open tag
</>close tag
<head tags are not visible on the websites this is just for the functionality of the website. So if you wanted to use CSS you would include this on here.
<meta tags are search engine so you can add in key words to allow people to find them on google.
The title is the name of the tab at the top of the web browser page.
Anything you put between <body> </body> will be visible on the website.
So this is what it should look like as you don't need all the information. These are the bare bones that are needed. Although it is best practice to leave them in the future so we can see is what is need we have done this.
File management of web designer is a crucial factor due to the website works by everything been store in one folder called the root. This is like a package on InDesign.
Naming Convention
When naming images and folders don't use capital letters or spaces.
Call your folder the name of the website you are creating.
Then create a sub folder within that called media/images.
We need to tell dreamweaver where this folder is so therefore you have to
You will have to tell them where it in on the computer, you will have to do this every time due to working from user work & different computers everytime.
Then when you have saved the settings of new site in the bottom right hand corner you would find this has popped up. Which shows you all the files & folders you have in the selected files.
We then we need to go to file > save as,
Need the .html as it wont work as a web page, its the type of file it needs to be to work at its purpose.
This is going to be our homepage so we need to call it index.html as this is what the server looks for and if you don't have one it wont work. The other pages can be called anything as they are all going to be linked to the index page. They all need to be lower case and one word, and also it needs to short & sweet (8 characters).
We can now preview it in a web browser.
The best one is google chrome you can make this if not viewing on normal page and the edit browser list.
This the preview of our webpage, you can tell its the one we just set up because of the tab at the top. Good practice will be to always flick back & forth between dreamweaver & google chrome everytime you make a change.
I have now changed the header, but now need to save it, then flick across to google chrome by using cmd & tab. Then refresh and see if it has worked if not you have done something wrong.
I have now added body copy to the website, I haven't told it what font I want to use so therefore you can see that it has used the default typeface of times roman.
In regards to style you can just do all the styling once rather than doing HTML document on every page. You can create a CSS document and link this to the index page and this will quicken the process.
This is how you create a CSS document & how it looks like.
You then need to save it when you need to make sure it has the .css at the end.
We then need to link it to the index page.
We would then put it in the head of the page due to it the formality of the page and you don't want it to be seen.
You then need to select the stylesheet.css so you can link them together
This is what it needs to look like when the style sheet has been added.
You can see it has been successfully adjusted and added the style sheet as my typeface I chose has altered the font to Tahoma and not the default font times roman.
Web safe fonts
Chosen fonts to be displayed consistently across different computers it must be standard.
To ensure maximum compatibility you will chose 'fallback' fonts too this is called a font family, if this isn't done then it will automatically translated to times roman.
The font is not embedded in the website it is taken from the computer which is been used to look at the website.
If you have more than one word when wanting the one font you have to use speech marks to show its one typeface. "New times roman".
Three standard families when designing from web: Serif, Sans-serif, Mono space.
The CSS compatible @fontface allows you to install fonts to a website, which means the font choice remains consistent regardless of system. However this breaches licenses & copyright laws related to font foundries.
Need to look to be able to download the font-face kit. FontSquirrel.com (Free licenses usage)
Size, Dimension & Pixel Revolution
640 x 480 - 1991
800 x 600 - 1995
1024 x 768 - 2004
1920 x 1080 - 2008
2880 x 1800 - 2012 (220PPI)
When designing a website you would design for the lowest common denominator although because how things have vastly changed it would be very small on the latest screen. Although, this can be worked around.
File Formats
Below are the files you would normally work with when designing for web:
When saving an image for internet you need it to look good but not too big, but using compression ratios.
PNG
GIF
JPEG
-
72PPI
RGB
-
Lossy
Compressed
Dreamweaver
Dont open any documents from recent documents as shortcuts don't work very well when working with websites.
The features column shows you videos that may be too complicated and be hard to engage with.
We are going to create a new HTML today:
If you have the design selected in the top left corner then you will see it how it will appear on the screen. Its best to work in this way as you can see any problems occurring.
This is the code window, this is the code that is used just to even have a blank website.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
We don't need this for the website to adhere properly. You can delete it.
<html xmlns="http://www.w3.org/1999/xhtml">
You dont need the ://xmlns=""http://www.w3.org/1999/xhtml"
<>open tag
</>close tag
<head tags are not visible on the websites this is just for the functionality of the website. So if you wanted to use CSS you would include this on here.
<meta tags are search engine so you can add in key words to allow people to find them on google.
The title is the name of the tab at the top of the web browser page.
Anything you put between <body> </body> will be visible on the website.
So this is what it should look like as you don't need all the information. These are the bare bones that are needed. Although it is best practice to leave them in the future so we can see is what is need we have done this.
File management of web designer is a crucial factor due to the website works by everything been store in one folder called the root. This is like a package on InDesign.
Naming Convention
When naming images and folders don't use capital letters or spaces.
Call your folder the name of the website you are creating.
Then create a sub folder within that called media/images.
We need to tell dreamweaver where this folder is so therefore you have to
You will have to tell them where it in on the computer, you will have to do this every time due to working from user work & different computers everytime.
We then we need to go to file > save as,
Need the .html as it wont work as a web page, its the type of file it needs to be to work at its purpose.
This is going to be our homepage so we need to call it index.html as this is what the server looks for and if you don't have one it wont work. The other pages can be called anything as they are all going to be linked to the index page. They all need to be lower case and one word, and also it needs to short & sweet (8 characters).
We can now preview it in a web browser.
The best one is google chrome you can make this if not viewing on normal page and the edit browser list.
This the preview of our webpage, you can tell its the one we just set up because of the tab at the top. Good practice will be to always flick back & forth between dreamweaver & google chrome everytime you make a change.
I have now changed the header, but now need to save it, then flick across to google chrome by using cmd & tab. Then refresh and see if it has worked if not you have done something wrong.
I have now added body copy to the website, I haven't told it what font I want to use so therefore you can see that it has used the default typeface of times roman.
In regards to style you can just do all the styling once rather than doing HTML document on every page. You can create a CSS document and link this to the index page and this will quicken the process.
This is how you create a CSS document & how it looks like.
You then need to save it when you need to make sure it has the .css at the end.
We then need to link it to the index page.
We would then put it in the head of the page due to it the formality of the page and you don't want it to be seen.
You then need to select the stylesheet.css so you can link them together
This is what it needs to look like when the style sheet has been added.
You can see it has been successfully adjusted and added the style sheet as my typeface I chose has altered the font to Tahoma and not the default font times roman.
No comments:
Post a Comment