|
| UNIT
2 Web site design
Webpage 2 - MAKING YOUR WEBSITE
OK! You have planned the the web site,
now it's time to make it!!! You need pages that are fun and
exciting and aimed at the target audience. Plenty of images
then please!! You need to make sure ALL the pages are linked
together, we want everyone who visits the site to be able
to get to every page!!
There are plenty of other ideas you may
want to add to the website; Rollovers, animation, optimised
images, tables, CSS. I will leave it to you. BUT I would like
a page where people can give feedback to us. GOOD LUCK, can't
wait to see the finished product.
SHOW SCREENSHOTS
OF ALL THE KEY FEATURES YOU USE.
|
| Task 1 - Making a set of
basic web pages. |
 1.
Create ONE web page using an appropriate colour scheme, text
and layout.
2. Make sure the PK Image
name can be clearly seen at the top of the page.
3. When finished this will
be a our basic "template" page that all web pages
follow.
4. Create at least 4 other
web pages identical to your template page so you have at least
5 basic web pages.
MERIT/DISTINCTION??
- Use a template in Dreamweaver or CSS, use tables to layout
your text and images.
5. PRINT
OUT your template page to show your basic layout, put it in
your folder. |
Video:
Using
tables(must watch)
Creating
loads of web pages quickly (must watch)
Using
CSS (merit/distinction)
|
Files: |
| Task 2 - Putting images and
text on a web page. |
 1.
Place appropriate images on your web pages.
2. There should be at least 5 images
in the whole site.
3. Add text to your web pages.
4. SCREENSHOT KEY THINGS YOU DO!
MERIT/DISTINCTION??
- Use Fireworks to optimise your images for the web (show
screenshots of this), use a range of images, proofread your
text!
5. SAVE your
web pages and your SCREENSHOTS in your UNIT 2, WEB 2 folder. |
Video:
Insert
text & images (must watch)
How to optimise images in Fireworks |
Files: |
| Task 3 - Adding links to
your pages |
1. Create links
at the top of each page to make a navigation menu.
2. Make sure you can link to ALL YOUR PAGES!!
3. Use at least ONE hyperlink to an external
website.
4. SCREENSHOT THE KEY THINGS YOU DO!
MERIT/DISTINCTION?? -
Use image links, hotspots,, email links and make sure menu
system links well to all areas of site.
5. SAVE your web pages
and screenshots in your UNIT 2, WEB 2 folder. |
Video: Adding
links to your page (must watch)
Adding
image links and hotspots (merit/dist) |
Files: |
| Task 4 - Interactivity |
1. Create a rollover
image or put a flash button in your web site.
2. SCREENSHOT how to do this.
MERIT/DISTINCTION?? -
Make 3 rollovers and a flash button. Place them in a consistent
place. TRY using scripting like JAVASCRIPT.
3. SAVE your web pages
in your UNIT 2, WEB 2 folder.
4. PRINT OUT your SCREENSHOTS,
put your name on, put in folder. |
Videos:
HOW
TO ADD A ROLLOVER AND FLASH BUTTON(must watch)
HOW
TO USE JAVASCRIPT |
Files: |
| Task 5 - User feedback |
1. Create a table
in one of your web pages that includes the following titles.
NAME, AGE, GENDER, POSTCODE, COMMENTS ABOUT
SITE
2. Place instructions at the bottom of the page
instructing the user to print out the form and send to the
following address;
56 Mooorside Ave, Walmsley, B33 4EW
MERIT/DISTINCTION?? -
Place text boxes on the web page and a button for the user
to "SEND" the information online..
3. SAVE your web pages
in your UNIT 2, WEB 2 folder.
4. PRINT OUT ALL YOUR
WEB PAGES FROM THE BROWSER and place in your folder.
5. PRINT OUT ALL YOUR
WEB PAGES IN CODE VIEW and place in folder.
6. PRINT OUT a SCREENSHOT
of your files and folders to show a LOGICAL DIRECTORY STRUCTURE. |
Videos:
1.
HOW TO PRINT YOUR PAGES IN CODE VIEW
|
Files: |
| What to hand in |
- ALL YOUR SCREENSHOTS SHOWING THE
SKILLS YOU HAVE USED
- ALL YOUR WEBPAGES, PRINTED FROM
THE BROWSER
- ALL YOUR WEBPAGES, PRINTED IN
CODE VIEW
- A SCREENSHOT OF YOUR FILES AND
FOLDERS IN A LOGICAL DIRECTORY STRUCTURE.
- GIVE A COPY OF YOUR WEBSITE TO
YOUR TEACHER.
|
