Lesson Two: Tutor Demonstration:
Planning your site.
Gathering your assets - list
Plan your site - map diagram

Student Tasks:
Sketch a plan for your Homepage (index.html)
Take a piece of A4 paper, turned landscape or sideways. With a pencil sketch out your initial design.Your design can be as regimented or fluid as you choose to make it. You will want your home page to be like a front door to your site. You will want it to create a good first impression. It needs to be clear, welcoming, and offer a summary of what your site is about. See http://duckegg.org/teachingsite/page%20seven.html
Divide it into zones: One for the site logo, one for navigation, one for a short description of your site and one for an image.
Sketch a plan for your page.one(page_one.html)
follow the same zone idea, but remember that you will be getting into the content of your site on page one. So now is the time to build it around the content. See http://duckegg.org/teachingsite/page%20one.htm


1 Gathering your assets.
2 Creating your 'look'.
3 Web graphics.
4 Background images.
5 Navigation Bar.
6 Flash Buttons.
7 Text content.
8 Images
9 Site Architecture
10 Interactivity/Behaviours

1 Gathering your assets.
Content at this stage comprises:
Name of website
Colour scheme/style/treatment
Text
Images

2 Creating your 'look'.
It is worth getting the layout of one page just right before you start on your second page. Then you will copy the first page over and over again, for following pages, maintaining a consistent site style.
Similarly, sticking to a small group of colours will also help to maintain clarity and ease of use for the user. Remember that jarring colours will make the user click away from your pages.
Obviously, you will consider the purpose of the site when selecting colours and styles. Neutral colours and graphics for big business organisations and more expressive, idiosyncratic graphics and colours for small independent sites. For examples:
See Web sites not to copy:
See Web sites to copy: http://kukuxumusu.com/web/index_cas.php

3 Web graphics.
Background images. Magical repeated patterns. These very small files can be created in Photoshop.
Q: How do I insert a Background Image?
A: On the Menu bar go to Modify>Page Properties>Background image. Locate your image, images/mauve.bg.gif, (saved in your Images file under your site root folder), select it and click OK.
When inserted as background images they repeat endelessly, using very little file space.
See Creating Background images.

Logo or head content. Every site deserves it's own logo or unique graphic identity. Create one in Photoshop, save to the size needed for the space on your page, as a jpeg or giff (or png). See Saving images for the web. If you plan to do this later, then insert an image placeholder for the time being, giving it a name and size.

Animated giffs. These little moving images add life to your pages. They are quite easy to make in Photoshop/ImageReady. See Creating Animated Giffs.

5 Navigation Bar.
This you can make quite easily with the help of Dreamweaver, see Flash Buttons (or you can create one using your own pre-created button images). It goes hand-in-hand with knowing how many pages you are going to have in your site. Create it once and then copy and paste it into each page.

Q: How do I create a Navigation Bar?
A: On the Menu bar go to Insert>Layer. Click inside this layer and go to Insert>Table. A dialogue box will come up and ask you how many columns and rows you want in your table. Recall how many pages you have in your website, referring to your website plan. Depending upon whether you wish your Nav.Bar to run across your page or down one side you will EITHER, if you have 4 pages including your Home page, put 4 in the columns box and 1 in the row box OR 1 in the columns box and 4 in the row box.
Click OK and your table will appear in your layer. You can now insert all the Flash buttons.

6 Flash Buttons.
Q: How do I create Flash Buttons?
A: Click inside the first cell of your table.
On the Menu bar go to Insert>Media>Flash Button. A dialogue box comes up and gives you a wonderful array of button styles to choose from. Choose one which fits in with your colours and styles. Write in your button text, choose your font, it's size and link, (where you want the button to take the user). Click OK.
Continue this process for each button in turn.
Save your page. On the Menu bar to to File>Save.


7 Text content.
8 Images

9 Site Architecture
a) linear b) tree c) mesh
Three ways to plan and design a website:
different models for establishing links within a site:
Linear: implies a wizard approach where the user must complete one form before moving to the next. Its role is mainly as a means of breaking down long e-forms into manageable chunks.
Tree: is the conventional one and easiest for the user to understand.
Mesh: implies faceted navigation, where you can reach your goal by following links corresponding with different characteristics “facets” of the entity. Faceted navigation is most appropriate in large complex sites where you are effectively looking things up in a database.

10 Interactivity/Behaviours
Homework