Download Dreamwaver iMedia Guide

Creative iMedia – Unit 211 – Web Authoring
Dreamweaver – The Essential Skills for iMedia
Name: ______________________________
Creating a Complex Site
HINT: Work through this guide carefully.
KEEP IT – it will REALLY help you for your coursework task
USEFUL HELP VIDEOS: www.teach-ict.net/software/dreamweaver/dreamweaver.htm
SCENARIO:
Conyers school are looking to create a small internet site, which will provide parents with some basic
information about the school, contact details and a list of subjects available at Key Stage 4. The site will
need to look professional and be compatible with a range of browsers. They have provided the following
information for each page:
Whole Site:
SITE BANNER / TITLE
HOME LINK (ROLLOVER)
SUBJECTS LINK (ROLLOVER)
CONTACT LINK (ROLLOVER)
MAIN SITE CONTENT HERE (Discussed in detail below)
PAGE 1: index.html
Should include the Conyers School Logo.
Google Search box
Conyers School Aerial image
The following welcome text:
“Thank you for taking an interest in our school. Conyers is a friendly place, characterised by excellent
relationships between students, staff and parents. We are proud of our reputation as a high-achieving and
caring school, committed to placing the individual needs of students at the heart of all we do.
We have high expectations for everyone in our school community, aspiring to excellence in teaching and
achieving impressive standards in learning. Alongside this, there is much to celebrate in the diverse
achievements of Conyers students apart from purely academic. Outstanding success beyond the
classroom in sport, music, drama and art is one feature of life at Conyers which makes it such a productive
place to learn.
I hope the information in this web site is useful
John Morgan
Headteacher”
Creative iMedia Unit 211 – Web Authoring Walkthrough
2
PAGE 2: contact.html
Include the map of Conyers (ConyersMap),
The following details:
Conyers School
Tel: 01642 783253
Fax: 01642 783834
Address: Green Lane, Yarm, Stockton on Tees, TS15 9ET
The map should be hyperlinked to the Conyers website (www.conyers.stockton.sch.uk)
PAGE 3: subjects.html
Should list 5 subjects which are offered at Key Stage 4 – using a numbered list. Should also include bullet
points of what the subject involves. This would be best in a table. E.g. below
1. ICT
2. English
Creative iMedia Unit 211 – Web Authoring Walkthrough







iMedia
Applied
GCSE
OCR Nationals
Language
Literature
Speaking
3
STEP-BY-STEP-GUIDE
STEP 1 - Creating a folder structure
1. In your documents, within your iMedia Unit 2 folder, create
a folder called “ConyersSite.”
Conyers
Site
2. Within it, create a folder called “images”
images
This is where you will store all of your site content.
3. Copy all of the files from inside the “Complex Site Assets”
folder into your images folder.
This is in iMedia  Unit 2  Level 2  Lessons  Lesson 5
and 6
STEP 2 – Defining a site
1. Start Dreamweaver. Go to Site  New Site
2. Complete the Site Definition by entering a site name.
3. For the Local root folder: browse to the folder
“ConyersSite” which you made in step 1.
4. For the default images folder: browse to the images
folder you created inside your “ConyersSite” folder.
You will now have your site in the “Files” panel. This will
show you your whole site.
Creative iMedia Unit 211 – Web Authoring Walkthrough
4
STEP 3 – Creating a template
1. Go to File  New
2. Select Blank Template  HTML Template
3. Go to Modify  Page Properties
4. Set appropriate text and background colours. You
could type in the # number as shown here.
5. Set the link, visited and rollover link colours here.
This will set what colours your links will be when they
are moved over or clicked on. Press OK
6. Set the title to be “Conyers School”
7. Create the table outlined in the scenario (3 columns
and 3 rows). Do this by going to insert  table.
-
Set the table to be 100% wide
Set the border to be 0 pixels.
8. Merge the first row’s cells together by highlighting
them. Then right click go to table  merge.
- Do the same foe the last row.
9. Stretch your rows out so you have enough space in
the first row for a header.
Do the same in the final row, so you have a large
space to write.
It should look like the picture (without borders on)
10. Click inside your top row. Insert a table inside it
(Insert  Table).
-
Insert 1 row, 2 columns, 100% width and no
border (0). Press OK.
Creative iMedia Unit 211 – Web Authoring Walkthrough
5
11. Adjust the embedded table by setting the first
column to use 25% of the space.
12. Insert the Conyers Logo (centred) and a suitable title
in the embedded table.
HINT: Just drag the image out of your images folder
from the file browser into the correct place.
ENTER ALT TEXT – this is what people who are
using text browsers or people with specific
disabilities will see if your image is not viewable.
This is what it should like so far.
13. Highlight your MIDDLE row.
14. Using the properties tab at the bottom of the screen:
-
Align centre and make bold.
Set the background as yellow (#FFFF66)
Horz: Centre
Vert: Middle
15. Enter in textual descriptions for your links in each
cell (HOME, SUBJECTS, SCHOOL)
16. Click in your bottom row (the biggest).
17. In the properties sheet, set the Horizontal position to
left and the Vertical position to top.
18. You only want people to type in the last row. You
want every other page to have the same top section
and links (i.e. you want to lock them so they stay the
same on each page).
19. Click inside your last row.
20. Go to Insert  Template Objects  Editable Region
Creative iMedia Unit 211 – Web Authoring Walkthrough
6
21. Type in a name for your editable region, called
“MainBody”
22. Press OK.
23. Type a message in the blue box you want to display
on a new page, prior to it being edited.
24. Press ENTER to expand the blue area.
25. Save the template (File  Save)
26. Give the template a name “ConyersTemplate” and
press save.
STEP 4 – Adding a Stylesheet.
1. In Dreamweaver, open your template within your site,
using the file browser.
-
your template should load on the screen
2. Click on the CSS window to expand it. If you cannot
see it, go to: Window  CSS Style
-
it should look like this
3. Click on the + icon to add a stylesheet
Remember a stylesheet lets you use same fonts, styles and
sizes throughout your site.
Creative iMedia Unit 211 – Web Authoring Walkthrough
7
4. Make sure the you have “class” selected.
5.
Under name enter “.heading” (include the full stop).
Under define in: select “(New Style Sheet File)”
Press OK
Save the stylesheet as ConyeryStyle.css
Set up a style for how you want your headings to look
like. You could use the example shown here.
-
Press OK
This is what all your headings will be like.
6. Click on the + again to add another style
-
add a name called “.body”
under Define in: make sure it is the first option (to put it
inside your existing stylesheet),
7. Set up the style you want your normal text to be like.
Press OK.
8. In your page, write “Heading.”
-
Highlight the text.
From the properties sheet, select your “Heading” style.
This is what you do, every time you want a heading.
9. Repeat step 9, this time, writing text “normal writing”
and assign your “body” style to it.
10. Your CSS file will be open in the top tabs. Click on it
and press save.
Creative iMedia Unit 211 – Web Authoring Walkthrough
8
STEP 6 – Saving the template
1. Go to File  Save as Template
-
Give the template a title “ConyersTemplate” and press
save.
You can now use this template to create all your pages in your
site and they will look the same!
STEP 7 – Creating Page 1 (index.html)
1. Open Dreamweaver and make sure your site is
selected (Site  Manage Site)
2. Go to File  New
-
Select Page From Template.
Click on ConyersSite
Click on Conyers Template
Press create.
3. You will now have a new page based on your
template. You will notice that you can only edit the
editable region. Everything else is protected – now that
is cool.
4. Enter a title in the white box.
- Save the file as index.html
5. Begin creating your page according to the scenario.
You will need to copy and paste the google code from your images folder directly into the source code. See
if you can figure this one out!
Set the title to be the appropriate heading style. Set the text to be your body style.
Save your page when you are done.
Creative iMedia Unit 211 – Web Authoring Walkthrough
9
STEP 8 – Creating Page 2 (contactus.html)
1. Create another new page based on your template. Save this as contactus.html
2. Create this page according to the scenario.
Use the file browser to find the images you need and
drag them in.
Use the properties sheet when selecting an image to set
ALT text and hyperlinks (and also to change other
settings).
Set the title to be the appropriate heading style. Set the
text to be your body style.
Remember: an email link is creating by setting up a
hyperlink: mailto:EMAIL-ADDRESS
STEP 9 – Creating Page 3 (subjects.html) – using ordered lists and un-ordered lists.
1. Create another new page based on your template. Save this as subjects.html
Create the web page like it says in the scenario. You may wish to insert a table.
Use the bullet points and numbered buttons from the properties sheet.
Use the styles which you have outlined – think about headings and body text.
STEP 10 – Making changes to the template.
OK, now your website is made, you need to make your links work. You might also have a few corrections.
You don’t want to change them on every single page. Instead we make the changes to the template.
Make sure ALL your other pages are CLOSED before continuing.
Go to File  Open. Go inside your templates folder and find the file “ConyersTemplate.dwt”
1. In your navigation bar, change the word
“SCHOOL” to “CONTACT”

2. Highlight your HOME menu text.
3. In the properties sheet, next to the link text box,
click on the folder. Find the file in your site called
“index.html”



4. You will see that Dreamweaver will create a
RELATIVE link to the page. This is a link to a
page within YOUR site.
5. Do the same for SUBJECTS and CONTACT,
linking them to the corresponding pages.
Creative iMedia Unit 211 – Web Authoring Walkthrough
10
6. Go to File  Save. You will get a list of pages
which have been made with that template.
7. Press “Update” this will change all your pages
with the changes you have just made. How
clever is that!
8. Press CLOSE when it is finished updating.
9. Open one of your other pages, you will notice the
changes have been made.
10. Go and double click on one of your webpages or
go to File Preview in browser. Test your site
links out.
STEP 10A – Adding rollover buttons
What if you don’t want just hyperlinks as menu items. What if, you want buttons which are interactive. Let’s
try some.
1. Open your template.
2. Delete your three links and merge the cells
together of where they were.
3. Go to Insert  Image Objects Navigation
Bar
4. You now need to complete the details for
your first button.
-
Element name: home
Up image: select “homeUp.png” from within
your images folder.
Over image: select “homeOver.png”
Down image: select “homeDown.png”
Enter some ALT text to desribe the link.
When clicked, go to URL: select your
index.html page.
5. Click on the + to add another link.
6. Repeat this process for Subjects and Contact. Everything you need is in your images folder.
Creative iMedia Unit 211 – Web Authoring Walkthrough
11
7. Once you have done this, you should end
up with three Nav Bar elements.
8. Press OK. Your navigation bar will appear
in your web page.
9. Save your template and update your site.
Open one of your pages in a web browser
and test it. See what you think!
STEP 11 – Additional Add-ons
The following extras should be used when building your site.
Adding META Tags
These are REALLY important. They allow things
like search engines to be able to list your website
when people search for it.
1. Open your TEMPLATE
2. Go to Insert  HTML  Head Tags 
Meta
3. Type in “author” as the value.
4. In the content box, type in your name.
5. Repeat steps 2-4 but change the value to
“description.” In content, enter a short
description of your site.
6. Go to Insert  HTML  Head Tags
Keywords
-
In the box provided, enter a list of keywords
which describe your website. This is what
search engines use, when people search
for your site.
7. Press the CODE button. You will see the
META tags have been added.
-
Press DESIGN to switch back to normal
view.
8. Save the template and update your site.
Creative iMedia Unit 211 – Web Authoring Walkthrough
12
Adding Google Search
If you want to add Google Search to a page, this is what you do.
Open up the page you want to add Google Search to. E.g. index.html
1. Inside the editable region, insert a table
which is 1 row, 3 columns, no border.
2. Open the Google Search code. This is
inside your images folder.
3. Highlight the code, right click and press
copy.
4. Go back to your index.html page where
the table is you’ve just created. Click in
the MIDDLE column.
5. Press the CODE button. Do not click!
6. Go to edit  paste.
7. Your code will copy into your web page.
8. Press back on the DESIGN button.
9. Your web page will now have the Google
Search box. You may click on parts of
the search area and change the
background using the properties sheet.
10. Save your page and test your search box
in a browser.
Creative iMedia Unit 211 – Web Authoring Walkthrough
13
Dreamweaver Reports
It is important that you check your website is working and will work on different types of computers.
Dreamweaver can check this quite easily.
WEB BROWSER COMPATIBILITY CHECK
1. Click on Results tab at the bottom left of
the screen.
2. Select the Browser Compatibility Check
3. Click on the play button and go to
settings.
4. Tick the web browsers and set the
versions you would like to check your
web page is suitable for. Press OK.
5. If your check does not start straight
away, Go to the Play button and select
”Check Browser Compatibility”
6. If you have any problems, you will get
them in the list. Double click on them to
go to them. Then you can fix them. Here
we have no errors! Yay!!!
BROKEN LINK CHECKER
1. In the results section, click on “Link
Checker”
2. Click on the play button and select
“Check links for entire current local site”
Dreamweaver will display a list of hyperlinks
which no longer work. You can then double click
on the errors to fix them. Again, no errors here.
Yay!
SPELL CHECKING
Unfortunately, you cannot check the whole site for spelling mistakes. Instead you have to open each page
and do a spell check (from the Text menu), like you would a normal document.
Creative iMedia Unit 211 – Web Authoring Walkthrough
14