OCR Nationals – Unit 2 – Web Authoring

Dreamweaver – The Essential Skills for iMedia

Name: ______
iMedia – Web Authoring (Unit 2) - Creating a Complex Site

HINT: Work through this guide carefully.

KEEP IT – it will REALLY help you for your coursework task

USEFUL HELP VIDEOS:

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”

PAGE 2: contact.html

Include the map of Conyers (ConyersMap),

The following details:

ConyersSchool Tel: 01642 783253 Fax: 01642 783834

Address: Green Lane, Yarm, Stockton on Tees, TS15 9ET

The map should be hyperlinked to the Conyers website (

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
/
  • iMedia
  • Applied
  • GCSE
  • OCR Nationals

  1. English
/
  • Language
  • Literature
  • Speaking

STEP-BY-STEP-GUIDE

STEP 1 - Creating a folder structure

  1. In your documents, create a folder called “ConyersSite.”
  1. Within it, create a folder called “images”
This is where you will store all of your site content. /
  1. Copy all of the files from inside the “Complex Site Assets” folder into your images folder.
This is in Shared  Nationals 2010 Unit 2 Site Tasks  AO2 Practice /

STEP 2 – Defining a site

  1. Start Dreamweaver. Go to Site  New Site
  1. Complete the Site Definition by entering a site name.
  1. For the Local root folder: browse to the folder “ConyersSite” which you made in step 1.
  1. 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. /


STEP 3 – Creating a template

  1. Go to File  New
  1. Select Blank Template  HTML Template
  1. Go to Modify  Page Properties
  1. Set appropriate text and background colours. You could type in the # number as shown here.
  1. 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
/




  1. Set the title to be “ConyersSchool”
/
  1. 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. /
  1. Merge the first row’s cells together by highlighting them. Then right click go to table  merge.
-Do the same foe the last row. /
  1. 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) /
  1. 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. /
  1. Adjust the embedded table by setting the first column to use 25% of the space.
  1. 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. /


  1. Highlight your MIDDLE row.
  1. 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
  1. Enter in textual descriptions for your links in each cell (HOME, SUBJECTS, SCHOOL)
/


  1. Click in your bottom row (the biggest).
  1. In the properties sheet, set the Horizontal position to left and the Vertical position to top.
/

  1. 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).
  1. Click inside your last row.
  1. Go to Insert  Template Objects  Editable Region
/

  1. Type in a name for your editable region, called “MainBody”
  1. Press OK.
/
  1. Type a message in the blue box you want to display on a new page, prior to it being edited.
  1. Press ENTER to expand the blue area.
/
  1. Save the template (File  Save)
  1. Give the template a name “ConyersTemplate” and press save.
/

STEP 4 – Adding aStylesheet.

  1. In Dreamweaver, open your template within your site, using the file browser.
-your template should load on the screen /

  1. Click on the CSS window to expand it. If you cannot see it, go to: Window  CSS Style
-it should look like this /

  1. Click on the + icon to add a stylesheet
Remember a stylesheet lets you use same fonts, styles and sizes throughout your site. /
  1. Make sure the you have “class” selected.
-Under name enter “.heading” (include the full stop).
-Under define in: select “(New Style Sheet File)”
-Press OK
-Save the stylesheet as ConyeryStyle.css /
  1. 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. /
  1. 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), /

  1. Set up the style you want your normal text to be like. Press OK.
/
  1. 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. /
  1. Repeat step 9, this time, writing text “normal writing” and assign your “body” style to it.
/
  1. Your CSS file will be open in the top tabs. Click on it and press save.
/

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. /
  1. Enter a title in the white box.
- Save the file as index.html /
  1. 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.

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”
/ 
  1. Highlight your HOME menu text.
  1. In the properties sheet, next to the link text box, click on the folder. Find the file in your site called “index.html”
/  
  1. You will see that Dreamweaver will create a RELATIVE link to the page. This is a link to a page within YOUR site.
  1. Do the same for SUBJECTS and CONTACT, linking them to the corresponding pages.
/
  1. Go to File  Save. You will get a list of pages which have been made with that template.
  1. Press “Update” this will change all your pages with the changes you have just made. How clever is that!
  1. Press CLOSE when it is finished updating.
/

  1. Open one of your other pages, you will notice the changes have been made.
  1. 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.

  1. Delete your three links and merge the cells together of where they were.
/
  1. Go to Insert  Image Objects Navigation Bar
/
  1. 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. /
  1. Click on the + to add another link.
/
  1. Repeat this process for Subjects and Contact. Everything you need is in your images folder.

  1. Once you have done this, you should end up with three Nav Bar elements.
  1. Press OK. Your navigation bar will appear in your web page.
/

  1. 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
  1. Go to Insert  HTML  Head Tags  Meta
/
  1. Type in “author” as the value.
  1. In the content box, type in your name.
/
  1. Repeat steps 2-4 but change the value to “description.” In content, enter a short description of your site.
/
  1. 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. /
  1. Press the CODE button. You will see the META tags have been added.
-Press DESIGN to switch back to normal view. /


  1. Save the template and update your site.

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.
/
  1. Open the Google Search code. This is inside your images folder.
  1. Highlight the code, right click and press copy.
/
  1. Go back to your index.html page where the table is you’ve just created. Click in the MIDDLE column.
  1. Press the CODE button. Do not click!
  1. Go to edit  paste.
/

  1. Your code will copy into your web page.
/
  1. Press back on the DESIGN button.
  1. 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.
/

  1. Save your page and test your search box in a browser.
/

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.
/
  1. Select the Browser Compatibility Check
  1. Click on the play button and go to settings.
/

  1. Tick the web browsers and set the versions you would like to check your web page is suitable for. Press OK.
/
  1. If your check does not start straight away, Go to the Play button and select ”Check Browser Compatibility”
/
  1. 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”
  1. 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.

iMedia Unit 2 – Web Authoring Walkthrough1