101.a The Exercise.
Building a basic website.
Through this exercise we will be building a basic website. At this stage we will not be covering any scripts or codes for it, all we need to do is understand how these interfaces work and perhaps start planning and defining our design methodology and process.
The Mind Map
The first thing that we have to do is to define what are we going to present, this could be our main subjects or areas for our website.
What I recommend to do is to create a mind map of all the possible linkage in between our subjects or areas. For this you can use a simple piece of paper.
As you can see we have 4 main topics or areas.
- As external links we will be using Flickr and Apple.
I have also defined the linkage in between our areas. If you look closer into the arrows, we can see that Home is capable of connecting to Portfolio, Clients, Videos, Flickr and Apple. Portfolio can connect to all the areas except Flickr and Apple. We have to be very careful when we design the mind map to be as close and accurate as our main website or at least closest to what we have planned for our interface. Make sure that you won’t leave anything out!
After defining our main areas, the next step in our methodology will be to assign file names to each of our areas.
If you remember from the previous post, we have to create .html or .xhtml documents. The easiest or more logical (for me at least) thing to do is to name our pages with the same or closer name of what we have already defined. This is also very important to integrate into the mind map, since it will be our reference for all our linkeage.
Here is where we start using our first rule: Our first page has to have the filename of index.html so the browser can identify the first starting page for the website. If you call it home.html, the browser will not find the appropriate document to render the information.
The second rule and recommendation for naming your areas or pages will be not to use capital letters, special characters or spaces. The main problem with using special characters or capital letters is that later on it will be more complex to remember which name started with capital letters and which ones don’t.
The problem of using spaces will be that if you are working on a Mac computer and you use a space, when you translate that name with a space into a windows machine, that space will be transformed into a different character because of the way the Windows systems read the file formats, which means your file will have a different name in Windows and your browser will not be able to find it.
The next image shows the names I assigned to the areas of my mind map above.
As you can se above:
- Home = index.html
- Portfolio = port.html
- Clients = clients.html
- Videos = video.html
Making our first website
Now that we know the pages that we require, we can start creating them using Dreamweaver.
Before actually starting to create the pages we need to define the website. This process means that we will map all our files towards a folder, hard drive or location in the computer, so when we place it on a server or any other location, all the files will be linked properly and we will not be having any missing links.
Define a website on DW welcome screen
When you launch Dreamweaver you will get the welcome screen. In there you can find the Dreamweaver Site shortcut.
If your Welcome screen does not open, you can define the site from the files palette. Window-Files (shift+cmd+F).
Manage Sites will allow you to visualise the different projects that you are currently undertaking on your local or network folders, and you can be able to preview them as green folders with the name of your managed site. Make sure you don’t just start storing files on any location on your machine.
If you start to work on a different computer, you will also have to manage your website in relationship to those files again.
When you click on Dreamweaver Site / Manage Sites, you will be able to see the new Site Setup Window. I am working with with Dreamweaver CS5.
Go to Site tab and where it says Site Name, go ahead and type: Exercise01.
Now go to the finder and create a folder on your computer and call it Exercise01 and then use that path on the Local Site Folder, you can use the folder icon on the Site Setup Window. The Servers, Version Control and Advanced Settings we are going to leave them alone.
Lets start making the pages!
We will go to File-New, we will create a New Html with no layout.
Make sure you are on the Design view, by clicking on Design on the top left corner of you Dreamweaver interface.. At any moment you can change your view to Code, Split (Code/Design) or Design only.
Go ahead and type some content on that page which will become our Home, and lets save it as index.html. We will repeat the process of creating the rest of the files by going to File-New; and create new Html with no layout and create your Portfolio, Clients and Videos pages.
If you want to visualise what you just wrote on a browser, you just have to click on the Preview/Review in browser button located on your tools palette.
To start placing content like images or buttons on our website, what we have to do is open our Insert Palette and make sure that palette is on the Common tab. From there we can be able to insert different types of media.
There are three basic ways how we will be creating hyperlinks on our website.
By typing the name of the file on the property inspector, by pointing to the file or by browsing to the file. This process can be also reproduced with images like jpg, png, or gifs.
Here is a video showing the way to create the hyperlinks.
The most commonly used image formats for web are jpg, gif and png. Jpg have the widest colour range and is the most recommended one for pictures. Gif is a very old format that allows us to create some animation with it, it can also contain transparency, the only issue is its compression which is not great. Png is quite a not so old format that most browsers support now and can offer us an excellent compression, transparency but with no animation, This is perhaps the one you want to use for your logos and vector images.
The next video will show you how to place any kind of image into your website and centre it.