HTML- Language we will lear to use
XHTML- extended language used for more advanced design
CSS- cascading style sheets- the main format used for advanced design coding for really specific aesthetics
WYSIWYG- what you see is what you get. This is what dreamweaver is but this capability is limited
SEO- Search engine optimisation, the accessability of a website through search engines
FTP- transferal through from personal computor to the internet.
URL-uniform resource locator.
A lot of abbreviations are ways to connect between the website and a database where the information os stored (amazon) (PHP XML) as designer you would never need to know how to use these (front end design)
HTTP/HTTPS- getting from the sever to the users screen
UI- user interface
UX- user interface
This is why nowerdays you are more than a website designer (app etc) design to consider the suer experience. This is what you really need to think about when designing a website the experience has to be appropriate to the target audience.
As a designer you have to be aware of the limitation because you have to design for the lowest common denominator so that you know that it will always work.
-Web safe colour:
These colours are what all screens can display. They are from the RGB colour gamut but originally the 8bit screens could only reproduce 256 colours. There are still extreme limitations to colour. Decide before hand the colours of every aspect of the website and then type the hexadecimal code.
Red-
FF0000
FF0
White-
FFFFFFF
FFF
Black-
0000000
000
When entering this code in illustrator or photoshop you can simply enter three digits.
RGB colours are collectively about 16,777,216 in total different shades. How you choose a colour in illustrator or photoshop they can be in 0 to 255, these are the range of a particular colour R, G or b.
In CSS and coding for 100% colour red would be rgb(255,0,0)- these colour limitations are dependent on your choice and identification of you target audience and the kinds of computer that they are likely to have. The full RGB colour range will only work on computers built in the last two or three years.
Many brands that depend on colour for identification have had to change their colour choices so that they are web safe and easily reproduced.
Fonts:
If you choose a non standard font then when someone who doesn't have the font in their computer, accesses the website it will be replaced by times. Choosing a font family rather than a single font. This means that you have fall back fonts.
Georgia, serif
"palatino linotype", "book antiqua", times, serif
if the name of the font is two words you need to put speech marks around it. You can make you list of back up fonts as long as you like.
With CSS you can install a typeface on the website (at font face) this means that the font remains consistent across all computers that access the website. You must insure that the font that you use are not only free to use but also free to distribute because other wise yo are breaking copyright laws. There are ways that you can imbed the font into the website so that it can't be downloaded but this is very complicated but also is a bit of a blurred line when it comes to copy right it. Font squirrel will provide a list of these fonts.
Size:
originally 640 x 480 pixel resolution- this would display very small on most screens
1024x768 is the usual dimensions that designers start at when creating a website. However, iMacs can display up to 2880 x 1800 (220ppi) so this is something that needs to be considered. Numiko says that they design separate website for being accessed through different devices. However, this is not always the answer there are lots of different responsive ways. For this brief it may be best to design numerous different options. 1024 x 768 is the best size to start at.
File Formats:
The type of file you chose to save info as can effect how it appears.
-PNG transparency
-GIF animation
-PDF multiple pages
-JPEG
You can't just work with one type of image i.e. if you needed levels of transparency PNG can support this but JPEG can't and GIF is the only one that can support animation. It is generally accepted that you design 72 ppi however 96ppi is generally accessible by everyone now and apple screens are able to reproduce 220ppi. Mostly people still design at 72ppi because working with file sizes bigger than this really slows down the time it takes the website to load when people have limited bandwidth. For video or image you have two saving options lossy or compressed this is different from losses files such as PSD or TIFF which don't compress at all. This compression is required to allow for easy and smooth access to information.
------------------------------------------------------------------------------------------------------------
Dreamweaver will not work if you do not use the user work file when on the network of the school. You must create a root folder in the user work folder and this is where everything in the website must go.
Any images that the website needs will go in a file within this labeled folder, any HTML page lie loose in the user work folder in the testroot folder. Although you must remember to relocate all work in the user work file to the desktop when you have finished working.
------------------------------------------------------------------------------------------------------------
Never use the open recent column when in college because there is no guarantee that these will open from the correct place and this can cause problems later on. The frist thing that you always must do is tell dream weaver where the root folder is. Never delete the file extention of the files you are working with because the sever will not know what type of file it is dealing with.
Once this is done you have to create you wire frame 10024 px by 768 px the header is 160 px high. Logo will be 260 px wide so that it is square. This can be called a wrapper or container or an envelope. It helps to create a wire frame on paper before you start designing.
When you open up the document you can view the design WYSIWYG capabilities or just the code or a split screen of both.
The <html> means that the server knows that from this point on we are coding in html, this needs to be closed as can be seen at the bottom of the code. The head means the header of the website. Nothing that is visual goes in the head area, this is all the background functionality of the website for example if we are using CSS this is where it goes. SEO also goes here like the tagged names of each page so that search engines can find this. Also key words could be here so that search engines can find your website quickly. The body section contains the content and design of the website goes in this section, this is what is visible.
At every stage save so that you always know that the previous piece of coding is what caused the problem.
This shows the transition between the coding and how the website actually looks online. With CSS you can create a stylesheet which links to every page creating a continuity of look instantaneously.
There is a clear difference between the coding display of the CSS and the HTML displays. Generic CSS links to HTML and specific CSS which creates something called a div.
shows options
To close attributes you need to use a semi colon and then close the curly bracket.
linking stylesheet
font size 0.7 pixels to a point.
We then looked at fixing the background to the top of the page so that there was not gap. The code for this is shown below.
By selecting absolute positioning we then worked out where the left hand side would sit in the middle of the left side of the screen so that the actual centre of the website aligned with the centre of the page.
No comments:
Post a Comment