Introduction to Creating Websites and Web Architecture
Before we can begin working in Dreamweaver, a certain degree of theory is needed. Website
creation has a number of rules which have appeared over the years to keep consistency in design, and to
make web designer’s lives easier, by having the same starting point each time we create a new website.
To explain this further we will look at folder architecture. In the diagram above taken from the video
walk through, you will see there are a number of pre-set folders to be created before we think about opening
Dreamweaver.
The first stage is to create a new folder somewhere on your computer, this is referred to as the Local folder.
In Dreamweaver this will be explained in ‘Defining a Website’ later. This folder is created for two reasons, so
Dreamweaver knows where all the pages will be, as well as for security. As you get more advanced you may
wish to design websites for other people, even host websites from your machine, for this reason we cut off
websites from the rest of the gubbins on our machine like accounts, private info etc..
Having given this new folder a useful and memorable name, we open it and create two more sub folders.
We already have something to work with so no designers block! The two sub folders are named 'Hmtl'
and ‘Images’. This is standard practice, and although you can decide to make as many supplementary
folders as you wish for other articles relating to your website, we always create a Html folder for all the
web pages for that site, and an Images folder for all the images be they Gif or Jpeg.
Lastly we must remember to keep these areas distinct, otherwise it will cause problems. Keep
everything for your website in the designated folders, and everything relating to other stuff outside of the
folders elsewhere on your machine.
You will notice one page floating in the website folder, not in the Html folder as you might expect. This is the
only exception to the rule. The Index page, index.html is referred to as the Homepage. This is the first page
you create in Dreamweaver and is named ‘index’ as it is the first file the webspace, when you come to upload
the finished website to the internet, looks for when someone types in your www.webaddress.co.uk
Lets have a quick look at basic HTML as well while we are looking at theory.
this is my page title
this is were everything goes that we see in web pages on the
internet!
This is a very small web page with little going on but it is a web page. HTML, the language we use to create
web pages is essentially a text and image editing language. It allows us to place objects, images, text, tables
etc on screen using a series of commands that our Internet web browsers understand.
HTML is quite simple to learn, in fact less than 10 years ago all web pages were created in Notepad, before
we had Dreamweaver. However, we now have Dreamweaver there is no longer a need to ever see the
coding but it is useful to understand the layout and function of the main parts of the page.
Every single website or web page, no matter how elaborate, on the Internet contains these Tags
which are designed to work a little like a story. In any story it is customary to have an introduction, the
main text and a conclusion and HTML is based on this principle.
First of all the introduction, the part of the code we can see above. This
tells the web browser a lot about your web page, where you are, what you are saying etc, called Meta Data
in the industry because we don’t read it but the programs and computers that run the Internet do. This is
also vital for Search Engine registration and is covered in the Basic page creation tutorials.
Next is the this is the main body or the story. This is the area we see all the animations,
text, tables, links,etc.,
Finally all of this is encapsulated in the tags which tell the browser window when your page
starts and stops.
Although there is a lot more to the HTML language than this, Dreamweaver does everything for us now,
but it is handy to know what it looks like so you are not put off by it.