Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Viewing File Extensions
Click on Computer.
Click on Organize.
Click on Folder and search options.
Click on View.
Make certain that Hide extensions is unchecked (no tick in box).
Click on OK.
Start
Adobe Dreamweaver CS5
DrmW01-Module_05B_v3.doc
Page 5B-1
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Opening a Site
Click on
Site>Manage Sites..
If you can see the site name TV Shows, click on it.
Click on Done.
Skip to the next section called Everyone Do This
If you cannot see
TV Shows THEN click on Import…
Open the Students drive.
Open your folder.
Open your
Exported Websites
DrmW01-Module_05B_v3.doc
folder.
Page 5B-2
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Page 5B-3
Click on
TV Shows.
Click on Open.
Click on
TV Shows.
Click on Done.
Everyone Do This
Click on File>New.
Click on Blank Page>HTML>2 column, left sidebar, header and footer.
DO NOT Click on Create.
Click on Layout CSS control.
Click on Create New File.
DrmW01-Module_05B_v3.doc
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Click on Create.
You are asked to name a CSS style sheet.
Name the file styles02.
Click on Save.
Switch to Design View.
Click on File>Save As.
Name the file
Lesson05B
DrmW01-Module_05B_v3.doc
Page 5B-4
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Click on Lesson05B.
Modify CSS Settings
Click on styles02.css.
Find the "container" width.
This webpage has a total width of 960 pixels.
Change the container width to 800 pixels.
The sidebar and content settings need to equal 800 pixels.
DrmW01-Module_05B_v3.doc
Page 5B-5
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Page 5B-6
Adjust these settings as seen below.
Click on File>Save.
Arrange Screens
Arrange your screen so that Dreamweaver and Chrome are both visible.
Click on Chrome.
Type a Control O (O for Open).
Open your Website01 folder.
Open your Lesson05B html file.
Make certain that your screen is arranged as seen below.
DrmW01-Module_05B_v3.doc
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Page 5B-7
Close Source Code.
Your first task is to change the headings Link 1 Link 2 and Link 3.
Carefully edit the HTML as seen below.
Click on File>Save in Dreamweaver.
Refresh the webpage in Chrome.
Check that the changes have been made.
DrmW01-Module_05B_v3.doc
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Delete link 4 as it is not needed.
Click on File>Save in Dreamweaver.
Refresh the webpage in Chrome.
Did link 4 vanish?
Find the paragraph below.
Delete the text.
Leave the paragraph markers as they might be useful later.
DrmW01-Module_05B_v3.doc
Page 5B-8
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Click on File>Save in Dreamweaver.
Refresh the webpage in Chrome.
Did the sidebar text disappear?
There is another paragraph to delete.
Find the paragraph below.
Delete the text.
Leave the paragraph markers as they might be useful later.
Test your changes.
There should be no additional text in the sidebar.
DrmW01-Module_05B_v3.doc
Page 5B-9
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Find the heading "Instructions"
Chang the heading to "Home Page".
Test the change.
Delete all the text between these paragraph markers.
Do not delete the paragraph markers.
DrmW01-Module_05B_v3.doc
Page 5B-10
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Test the change.
Click back to the Design View.
Create Logo
There is provision for a 180 by 90 pixel logo.
Let's create a 180 x 90 pixel logo.
Start Adobe Illustrator.
DrmW01-Module_05B_v3.doc
Page 5B-11
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Click on File>New.
Enter the following settings.
Click on OK.
Click on File Save As.
Open your Website01 folder.
Open your _images folder.
Click on Save.
Click on OK.
DrmW01-Module_05B_v3.doc
Page 5B-12
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Create a dummy logo.
The example below was created using the Blob Brush Tool.
Click on File>Save.
Click on File>Export.
Select the PNG file format.
Make certain Transparent is selected.
Click on OK.
DrmW01-Module_05B_v3.doc
Page 5B-13
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Switch back to Dreamweaver.
Click on where the logo is to be positioned.
Click on Insert>Image.
Open your images folder.
Select your Lesson05 logo.
Click on OK again.
DrmW01-Module_05B_v3.doc
Page 5B-14
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Click on the place holder text "Insert_logo"
Delete the placeholder.
Test this change.
Click on Code.
Delete Footer Text
Find the footer text.
Delete the footer text.
Leave the paragraph markers intact.
DrmW01-Module_05B_v3.doc
Page 5B-15
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Test the change.
Create Hyperlinks to Webpages
Look at your file list.
Find the file names for Fox, CBS and Channel 10.
Note the exact spelling of these file names.
Find the following block of code.
Very carefully delete the
DrmW01-Module_05B_v3.doc
#
symbol.
Page 5B-16
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Page 5B-17
Click inside the FOX USA quote marks.
Very carefully type in the three file names.
Double check your spelling of the names as any mistake will be very
annoying to correct.
Click on File>Save.
Create Individual Webpages
Click on File>Save As.
Name the file Lesson05B-Fox.
Find the words "Home Page"
Change these words to "Fox USA"
Click on File>Save.
Click on File>Save As.
Change the file name to Lesson05B-CBS
DrmW01-Module_05B_v3.doc
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Change "Fox USA" to "CBS USA"
Click on File>Save.
Click on File>Save As.
Name the file Lesson05B-Channel-10
Change "CBS USA" to "Channel 10 Australia"
Click on File>Save.
Check that you have the following four files.
DrmW01-Module_05B_v3.doc
Page 5B-18
Module 5B
Dreamweaver01
Modify a Navigation Template (ver 3)
Webpage Testing
Refresh the webpage.
Click on the link to Fox USA.
Did the Fox page appear?
Click on the Back button.
DrmW01-Module_05B_v3.doc
Page 5B-19
Module 5B
Test the other links.
DrmW01-Module_05B_v3.doc
Dreamweaver01
Modify a Navigation Template (ver 3)
Page 5B-20