Uploading your website

To upload the website to the server, there are several things to be done first.

Firstly, you need a to define the website settings by giving name to the website, and the address of the website folder that has been given (mine is http://www.mimitessier.co.uk/2009-10-3HUM0423/marcia/)

Secondly, in the 'Advanced' tab in the "Site Definition", under the "Local Info" , define the local root folder and the images folder. The local root folder is the project folder that is made to contain the webpages, and the images folder is located inside the project folder and according to its name, it is to contain the images used later, plus the sliced images (if the website layout is being made in the photoshop).

Next, under the "Remote Info", choose "Access" option to FTP, and type in the ftp host address, and also the host directory, and typed in the login address and the password. For security purposes the one used for my website (Hearts village), all the necessary details to define the website can be found in the word document back in week 2 folder on studynet.

After filling in all the necessary details, it is best to click the 'test' button just do that to confirm it can connect to the server.

If the website is done, then the only thing left is just to upload it. To upload it, first, click the "Connect to remote host" button, under the "Files" box in the right-hand side. Then, click the "Expand to show local and remote files" button that is still on the "Files" box. It will open up a window where it will show the 'remote site' files on the left hand side, and the 'local files' on the right hand side. Next, to upload, highlight all the files that will be uploaded in the 'local files' folder, then click the "Put file(s)" button, the one that looks like up arrow. When it has upload all the files, you will be able to see all the files will be available on the "Remote site" folder on the left-hand side.

The next time if there is any changes made to the website, and you will need to upload it again, you can do it by just clicking the 'synchronize' button, and it will sync the remote site to the local site.

Putting scrollbar

If the content that is typed went over the specified layout area, it is reasonable to use a scrollbar. And the way to put a scrollbar is by changing the properties of the CSS style. So click the content CSS style, and see the properties box underneath. Under the 'positioning' category, change the 'overflow' option to auto, and any content that is deemed to go over the specified area (layout), will automatically have a scrollbar on the content body

Centering layout

I have been trying to centre my layout in dreamweaver for days. The simplest way to do it is to select the Table_01 CSS style which is your outer box of the layout and change its alignment to center. But for some reason, mine would not work. So, after tweaking around here and there, I finally managed to get it to the centre.

First, select the Table_01 properties by double clicking it, then under the "Box" categories, uncheck the "same for all" under "Margin", and make the Right and Left option to "auto". Next, the "Positioning" category, change the "position" from "absolute" to "relative", and it should do the trick!

Now I have make my layout to be in the centre, and it works in the Google Chrome and Mozilla Firefox browser, though unfortunately not in Internet Explorer.

Footer

In the footer, it is quite common to put things like:

• About us
• Contact us
• Terms of service
• Privacy policy
• Site map
• Address and/ phone number

But since this is only a page that is informing people about an event, I do not think that it is necessary to put all those things accept sitemap. But then, I have put my sitemap as a button in the navigation bar. So I will only put the "©2009. All Rights Reserved".

Using the template

When the HTML file that I have created by saving it in Photoshop, by opening it in Dreamweaver, it will automatically put the sliced images in order as how it supposed to be. Just like the layout I have made in Photoshop.

The next thing to do is just inserting the editable region in the places where 'the content' will change. So for example, in my case, I wanted the red bar that is just below the banner to show the title of the currently viewed page, so I will put an editable region in that 'red bar' area. And also I put an editable region in the content area, because the content will change accordingly to the page.

After putting the editable region and save it as a template, I can then make new pages from that template. The purpose is to save me the time of making another layout for every page I was going to have, and also with only the editable region, I could not mess around with the other elements of the page (i.e: the buttons, the banner).

Then after getting the editable region done with, you can start typing inside the region. Although, I was having a bit of problem with the image background of the editable regions. It kept on getting itself deleted every time I tried to type in something on it. So, the way to solve it is by selecting the image in the editable region and deleted it. Then, go to the CSS style properties of that area, and in the background category, manually insert the image of it to the 'background-image". So for example, my red bar image name is "redx20bar", I deleted the image and then go to the CSS rules table and find its name, then I go to its properties and manually insert the red bar image back from the images folder when it prompted me to do so.

That way, anything that I typed inside that editable region will go on top of that background image without having the image disappear.

Template

I have made the template in photoshop, and it looks like this.

Afterwards, I sliced it accordingly, starting with the banner, the red banner underneath it, the area where the contents going to be, and the navigation buttons on the side.

When saving, Dreamweaver also allows the sliced image to be save with different file type for each. For example, it lets the banner to be save as .jpgor as .png, your choice. But the best type for the images to be saved is by using the "PNG-24" option.

Next, choose the 'Save for web and devices" in the photoshop menu, and save those images where the main folder of your project is. To be able to have the images in order when they opened up in Dreamweaver, upon saving, in the "Save as type" option, choose to save it as "HTML and Images".

The reason to save it as "HTML and Images" is that the images of the slices will form a folder called "images" which is going to be your the image root folder. And the HTML file is to be open with the Dreamweaver and the slices images will be in order, just how it looks in Photoshop.

Wireframe Plan

Here is a plan on the wireframe

It is done by photoshop.

Wireframe and sitemap

Wireframe is the blueprint of the website. It gives the structure on the navigation of the website.

It is definelty needed especially the initial planning stage as it will keep track about:

• the title of each individual webpage
• the content of it
• and demonstrate its functionality

And so, even within it, our own comments on how the website is getting along with the user can be added to. For example, whether it is user friendly, or can they find the information easily, since sometimes too much information can clutter the page appearance.

Wireframes can be created with Microsoft Visio (which seems to be popular as it gives professionalism to the user), Adobe Photoshop can also be used, as well as Adobe Illustrator, Flash, and even on Dreamweaver itself.

And since it is only re-designing the current website, I have decided to just go with flat wireframe where it would be done in Microsoft Word, rather than the HTML type. This is just a safety measures that I have included all elements that I was supposed to include in the project.

SITEMAP

For the time being, it will have about 7 pages including the home webpage. Here's a brief introduction about the content.

1. INDEX ~ "Home" ~ The welcoming page. It will include an introduction on the village festival, and any brief history about it (if there is any). Might include some pictures like the festival ground and whatnot.
2. Page 1 ~ "Competition" ~ There will be a list of what kind of competition that will happen. And maybe a bit of explanation on what kind of activity it is (with pictures to describe).
3. Page 2 ~ "Performances" ~ A list of performances that is going to be held that day.
4. Page 3 ~ "Schedule" ~ The schedule of the activities.
5. Page 4 ~ "Stalls" ~ The range of stalls that is going to participate (ex: foods, charities, or groups like WWF and the likes).
6. Page 5 ~ "Gallery" ~ Will contains pictures in the form of a slideshow
7. Page 6 ~ "Contact Us" ~ Contains the contact details of who is in charge so they could ask for more information. There will also be a bit of 'recruitment' line, where asking people to voluntarily helping out in the event.

As for now, that will be it. I will upload the sitemap and the wireframe after this.

Initial planning

ANALYSIS ON THE ORIGINAL WEBSITE

The project is to re-design a website for a village festival. While the current webpages are designed with 'doodle-like' pictures (for the background) and using primary colours for easier viewing. I think it is because it is a website for informing people about a village festival which will involved a lot of children, therefore, it is essential to design a website that would be attractive to children.

MY PLAN TO RE-DESIGN THE WEBSITE

Although, it is important to attract people to come to the festival through the website, I think it is also good to make it simple and only to contain the information needed. Ex: pictures from last year festival, the type of events that is going to be held, contact information, and etc.

I will still make us of the idea of a template for easier handling of the website in Dreamweaver. But for the webpages, I will make it simple looking, and using more toned and darker colours, such as brown, black with yellow as a contrast (Though I might changed my mind during the actual designing in Dreamweaver). The background will be a solid colour rather than pictures so it easy to be looked at in the monitor.