design practice: Design For Web - Dreamweaver Induction

Before starting to design a website, it is important to understand that the designer must have a clear idea, concept and design for the website, as Dreamweaver is a programme that puts the design on to the web, but not a programme in which to design a website.

Limitations of Web Design

Print - 300dpi
Screen - 72dpi/96 dpi
Retina Displays - 221 dpi

This means that it is important to understand the format in which the design is likely to be viewed, because the quality can alter depending on what display is being used. This is referred to as designing for the lowest common denominator.

Similarly, not all colours translate well onto different systems, so there are a selection of web safe colours, allowing the colour to be consistent on all monitors.

Another limitation of designing for web are fonts used. The font used for the design will not be displayed on an end users monitor unless it is embedded into the page they're viewing. When you use a font that doesn't translate to the end users screen, it will be replaced with a similar option over the default Time New Roman.

Dreamweaver welcome page

Our websites will be in HTML format as it is the most simple to use.

Dreamweaver is presented in a WYSIWYG format (what you see is what you get) so design view shows the site as it would be seen online, code view shows only code, and split view splits the screen to half design and half code.

In order to understand the way Dreamweaver works, we are mainly looking and code view, and above shows the code for a blank page. Some of the coding for this page isn't necessary so we deleted the top line, excluding <html> which determines the language in which we're coding and allows the page to actually work.

The remaining coding above is all that is required for the functionality of the page. The <title> determines what will show up on the tab bar, right now shown as 'Untitled Document'. <head> is the bracket that contains the coding responsible for the functionality of the page, and all visible content falls into <body>.

All of the pages are required to be saved in a 'root' folder to ensure it's functionality when the site goes live.

In the <title> bracket I put Sarah Butler, which would show up as the name of the page, and put in 'Hello Everyone!' to sample how the coding appears.