Design For Web - Dreamweaver Workshop (1)

We are using three of these languages which are:-

- HTML
- CSS
- JAVASCRIPT

XML and PHP are mainly used for database driven websites. This could be something like amazon's product list. All amazon is, is one page, with a search bar and different catergories at the top. The rest of the content is created from a database.

How these websites work is from a spreadsheet of the products and info.

Search Engines are also another platform which would use the PHP or XML and it is extremely complicated. Therefore Graphic Designers would never work in these fields because this is left for trained people in that field.

WYSIWHG - What you see is what you get. The design section of dreamweaver is based of what you will see here will be you visual website.

This is the design section.

This is the code for a blank webpage in the code panel.

Stripping it to the basics

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

We have deleted this top line and moved up the second line and changes it to just the <html> because we don't really need this.

Meta tag

I've also deleted the meta tag line because this is also unnesacery.

This is the basic code for the website.

<html> - This is just telling the website the language that the code is working in. In this case, HTML. If the web browser didn't know this it wouldn't be able to read it. This is open HTML.

</html> - the forward slash at the begining basically just means that the HTML is ending. this is close HTML.

<head> - Anything that is inside the head tag means that you can declare different languages within the design. Such as using CSS inside of the HTML language. Anything in the head tag is not visible in the design but is just functionality.

<title> </title> -

Anything that is written in black generally is going to be visible in the design.

<body> </body> - This is going to be everything that is in the website. All the design and anything that is visible.

This is basically all you need for a website to work.

All web browsers do the same thing in interoperation

Root Folder

URL - This basically a folder on another computer that by typing in the address gives us access. For a website to work we need this folder that contains everything on the website or else it work.

So when we see 'Broken Links' on website, this means that the file is missing from the folder and therefore not visible. Another example is clicking on a link that come up with an ERROR page which means that the page is missing from the folder.

The technical name for this folder is the Root Folder.

Creating the Root Folder

I have created the Root Folder in the User Work which is essential when working on a networked system.

I have named the folder dp2 for this session and then gone on to create a sub folder called 'images'.

It is in this folder that we are going to store all the media for the website. This is image, audio and video.

It is also useful to have another folder called psd's just while you are working in photoshop for the layouts. But this is not needed on the final folder for the website, or for this session.

Linking the Root Folder to Dreamweaver

We can go to Site>New Site to create the new website.

For this brief, we need to create a local website on the computer we are working on. Generally though, we would post this website to a server to make it accessible to the world.

I have named the website the same as the roof folder and also found the root folder and linked this up to it by going to find it then clicking save.

This now gives us the folder information in the bottom right hand tab of 'Files' which means we have set up the root and can now save the website. This is ultimately going to become our home page for what we are designing.

Saving the Index

When saving (Save>Save As) we don't need to choose the location because it will autmatically select to save it into the

It would make sense to call the homepage 'home' but this is wrong because this is an English language and the web is universal. The web will look for a specific filename which has the be the same everywhere in order for it to know what to display.

The actual name we have to choose for the first page to be shown is 'index.html' everything else doesn't really matter what it is called. If you don't have an index page, nothing will show up in the URL.

Previweing Your Site

If you click the little globe, you can preview the website in browsers. As you can see the top of the tab is called Unititld Document.

The start means is it not saved. if I click CMD and S this is now disappeared because it is saved.

I have now added 'Hello' within the body of the website which gives us a website!

Formatting Fonts and Creating Layouts

We are now working is CSS which is more advanced than HTML. HTML is limited and CSS can work with more advanced creative designs.

Never copy and paste code from HTML into CSS. This makes it stop working without there being a visible problem in the code. The problem is because of pasting.

CSS

We are creating a separate document called Cascading Style Sheet which means we only have to type out the code once and we can link this to all the HTML pages. This saves us typing it out loads of times in HTML for every page.

(Create > New) Were only going to use a blank paged because we don't want to use Dreamweaver's Templates.

Line two is a 'Note' to the creator. This doesn't actually effect anything on the website. This lets us know what code is doing what. So whenever we see the /* */ this is just notes that the creator has left.

To create a body tag we just type in ' body { '

The colon separates the font family ' : ' from the Helvetica. We end the setting by putting a semi-colon on the end ' ; '

We can then have a look to see if this has worked before carrying on. To do this we need to close the curly bracket which is the 'body' end.

We can now save this (CMD & S) and save this as 'stylesheet.css'.

Linking the Style Sheet to the Homepage

On the right hand side you can see the box which is called 'CSS Styles' and at the bottom there is a little link symbol. When you click this is will come up with the 'Attach Style Sheet' option where we can browse for this sheet and click ok to link it.