Web Design

1
Web Design

• Week 4How To Design A Site
• Dreamweaver Tutorial

2
Class Structure

• Introduction To Web Site Design and File
  Management
• Dreamweaver Overview

3
Web Site Management

• The Process of designing a site
• First Know that Dreamweaver, Photoshopall
  software packages are only tools YOU are the
  artist!!
• Decide who/what your audience/purpose is..?
• Decide on Colours and Style etc do you have a
  logo?
• Design a Template for all pages
• Design all set pieces what are these?

4
Working Example

• Real life work-in-progresswww.aondesign.com/test2
  (to be www.knocklyonparish.com)
• Parish Web Site (lets have a look so far)
• Now lets go through our steps

5
1. Audience/Purpose?

• Really Everyone
• Age From Youth (important to target)
• Elderly (Active in parish)
• People with NO knowledge of Internet
• Conclusion must be
• Simple well laid out easy to navigate - all
  pages the same
• Attractive For youth so some nice features!
• Informative interesting enough to return to

6
2. Colours And Style?

• We decided to go simple
• Have a logo (bonus)
• Colours (decided to go with orange and blue)not
  too dull (actually quite fresh) can look quite
  technical / electric (blue also associated with
  Our Lady)
• Style same format to all pages MUST be easy to
  navigate so must be able to see all sections on
  all pages!

7
3. Design a Template for Pages

• Well be doing this ourselves in this class but
  lets have a sneak preview
• I also use Frames well also talk about this
  soon.
• So when you design your template you see what
  areas will be common to all pages
• You will also see what set pieces you will need
  for each page

8
(No Transcript)
9
Design your set pieces

• The set pieces in my site areTitle
  ImageHeadingRight ImageOther
  PossibilitiesBackgrounds (for different
  sections)
• You may need different Templates also

10
Some examples

• Link Image
• Page Title
• Heading
• Suggestion Box!?
• Bacground image

11
How to approach File Management

• Create folder (Parish_Site) (dont do this
  its just an example)
• Inside this will be your site files only the
  pages that will be displayed
• Then there will be an image folder containing all
  images that will be displayed
• There will also be a templates folder as
  discussed
• Everything else will be in a sub_folder I call
  extra

12

• Inside extra I will have sub folders relevant
  to that site example photos, sample_title,
  sample_heading etc any other examples?
• Maybe Word documents I receive from the parish
  with text for the pages Why have them separate?
• So they are not accessed. And so they dont take
  up space

13
Showing this graphically
14
NowBack To Dreamweaver!

• A closer look
• Dreamweaver does a certain amount of file
  management for you youll see this in the
  tutorial!
• You define a site (tell dreamweaver where to save
  your pages etc)
• Useful when you have designed more than one site.

15
(No Transcript)
16

• you should create your folders manually
• You dont have to worry about this for a while
  well be back to all of this It is important to
  get a feel for it first though.

17
Lets get stuck in!

• Dreamweaver tutorial
• This tutorial should take between 2 4 hours we
  will start it here and you will be expected to
  finish it at home.
• The Help files can be printed (I suggest you do
  this!)
• They are set out very well
• First the tutorial (an excellent overview of all
  features)
• Then a chapter on each feature (you can use this
  for reference as you improve)
• Questions are COMPULSORY!