CLEO · Dreamweaver. The first stage is to create a new folder somewhere on your computer, this is...
2
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.
Transcript of CLEO · Dreamweaver. The first stage is to create a new folder somewhere on your computer, this is...
Introduction to Creating Websites and Web Architecture
Before we can begin working in Dreamweaver, a certain degree of theory is needed. Websitecreation has a number of rules which have appeared over the years to keep consistency in design, and tomake 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 openingDreamweaver.
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 theweb 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 thefolders 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 theonly 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 a very small web page with little going on but it is a web page. HTML, the language we use to createweb pages is essentially a text and image editing language. It allows us to place objects, images, text, tablesetc 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, beforewe 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 Tagswhich are designed to work a little like a story. In any story it is customary to have an introduction, themain text and a conclusion and HTML is based on this principle.
First of all the introduction, the <head><title></title></head> 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 Datain the industry because we don’t read it but the programs and computers that run the Internet do. This isalso vital for Search Engine registration and is covered in the Basic page creation tutorials.
Next is the <body></body> 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 <html></html> 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.
<html><head><title> this is my page title </title></head><body>this is were everything goes that we see in web pages on theinternet!</body></html>
