using dreamweaver cs4 to answer p3 june 2010
TRANSCRIPT
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 1/20
Creating a web page to meet the June 2010 practical exam criteria
Page 1 June 2010
Creating a folder
Before you start, create a folder called June 2010 Website inside your ICT folder.
Creating a new site
1. Run Adobe Dreamweaver CS4:
2. Click on the icon below to create a new website:
3. Notice that the following window appears (Don’t worry if yours says Unnamed Site 1):
4. Click on the Advanced tab at the top of the window:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 2/20
Creating a web page to meet the June 2010 practical exam criteria
Page 2 June 2010
5. Change the site name to June 2010:
6. Click on the Documents icon to change the Local root folder to N:\ICT\ June 2010
Website\ (If you do not have a folder called June 2010 Website in your ICT folder then
create one):
7. Click on the OK button at the bottom of the dialog window to create a new site. Notice that
you have your folder displayed in the Files Panel:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 3/20
Creating a web page to meet the June 2010 practical exam criteria
Page 3 June 2010
Creating a blank web page
8. Click on the HTML button in the main window:
9. Notice that this displays a blank HTML document (If you cannot see the HTML code then
click on the Split button so that you can see your webpage in HTML and Design mode):
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 4/20
Creating a web page to meet the June 2010 practical exam criteria
Page 4 June 2010
Using a suitable software package, create a new webpage called JXRHC.HTM
Attach the stylesheet JZSTYLES1.CSS to this webpage.
10. Select the File | Save As… menu to display the Save As dialog box. Enter JXRHC.HTM in the
File name box and click the Save button:
11. Double-click on the text CSS Styles in the windows pane:
12. Click on the Attach Style Sheet button and select the JZSTYLES1.CSS file:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 5/20
Creating a web page to meet the June 2010 practical exam criteria
Page 5 June 2010
13. If you haven’t copied this file to your June 2010 website folder you will get the following
message (If you don’t get this message then ignore point 14):
14. Click on the Yes button to copy the file to your website folder:
15. When the Attach External Style Sheet dialog box appears click on the OK button to apply the
style sheet formatting to your webpage (your page background should turn pale blue):
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 6/20
Creating a web page to meet the June 2010 practical exam criteria
Page 6 June 2010
Create the top table using the contents of JXTOP.HTM
16. Right-click on the icon for the html file JXTOP and select Open With | Adobe Dreamweaver
CS4:
17. Making sure that you have highlighted all of the table, and not just part of it, copy it using
Ctrl-C or the Edit | Copy menu:
18. Click on the JXRHC.HTM tab towards the top of the page:
19. Paste the table into the design area of your webpage (If the Image Description (Alt Text)
dialog box appears just click the ok button):
20. Notice that the table looks differently once it is pasted into your web page:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 7/20
Creating a web page to meet the June 2010 practical exam criteria
Page 7 June 2010
21. Highlight the table and enter Top in the Properties Window to name this table:
Set the table width to 100% of the width of the window.
22. Highlight the table set units to % and W to 100:
23. Notice that the table is now the width of the page:
At the top of the page create an anchor called START
24. Click after the word <body> in the HTML window to place the cursor at the top of the page:
25. Select the Insert | Named Anchor menu:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 8/20
Creating a web page to meet the June 2010 practical exam criteria
Page 8 June 2010
26. In the Named Anchor dialog box enter START:
27. Click on the OK button. Notice that an anchor appears just above the table:
Replace the text candidate name, Centre number, candidate number with your name, Centre
number and candidate number.
28. Delete and replace the text so that your work resembles the one shown below (note: your
name and not mine will be displayed and you will need to make up a candidate number):
Create the middle table with 3 rows and 2 columns as shown in the diagram on the previous page.
Set the table width of the middle table to 90% of the width of the window.
29. Position the cursor at the end of the table and press the ENTER key to position the cursor
below the TOP table:
30. Select the Insert | Table menu:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 9/20
Creating a web page to meet the June 2010 practical exam criteria
Page 9 June 2010
31. When the Table dialog box appears set the Rows to 3, Columns to 2 and the Table width to
90 percent:
32. Click on the OK button to insert the middle table:
33. With the table still highlighted enter Middle in the Table dropdown box in the Properties
window:
Align the middle table with the centre of the window
34. With the table still highlighted select the Format | Align | Center menu:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 10/20
Creating a web page to meet the June 2010 practical exam criteria
Page 10 June 2010
35. Your middle table should be aligned like the one shown below:
Place the image JXHARBOUR.JPG in the left cell of the middle table.
36. Highlight the left three cells of the middle table and click the right mouse button to display
the shortcut menu. Select the Table | Merge Cells menu:
37. Notice that the left three cells in the middle table are merged:
38. Click on the left cell in the middle to highlight it. Select the Insert | Image menu and choose
the image JXHARBOUR.JPG from the ICT folder on drive W:
39. Click on the OK button to insert the image. (If you get the following message asking you to
make a copy of the image in your website folder then click Yes and save it):
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 11/20
Creating a web page to meet the June 2010 practical exam criteria
Page 11 June 2010
40. Resize the table so that your page resembles the one show below:
41. Insert the image JXTTITLE.JPG in the top row of the TOP table and put a gap between the
two tables (If asked to make a copy of the image in your website folder click Yes). Check that
your page looks like the one shown below:
Use the contents of the file JXTEXT.TXT to place the following text, as style h3, in the middle
table:
42. Open the file JXTEXT.txt in Notepad:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 12/20
Creating a web page to meet the June 2010 practical exam criteria
Page 12 June 2010
43. Copy each line into the table so that your table looks like the one shown below (You may
need to resize the row heights so that they are even):
44. Highlight the three columns and then select Heading 3 from the Properties window:
45. Your table should now look like one shown below:
Create the bottom table using the contents of JXBOTTOM.HTM:
46. Select the File | Open menu to open the JXBOTTOM.htm web page.
47. Highlight all of the HTML code by using Ctrl-A:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 13/20
Creating a web page to meet the June 2010 practical exam criteria
Page 13 June 2010
48. Copy of the code by using Ctrl-C
49. Click on the JXRHC.HTM page
50. Select the line just above the </BODY> tag:
51. Use Ctrl-P to paste the HTML code into your web page (you might need to click on the
refresh button at the bottom of the page to see this table):
52. Select the Insert | Image menu to insert the image JXFOOTER.jpg into the second row of the
table:
Set the table width of the bottom table to 100% of the width of the window.
53. Highlight the bottom table then enter the text BOTTOM in the table dropdown box:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 14/20
Creating a web page to meet the June 2010 practical exam criteria
Page 14 June 2010
54. With the BOTTOM table highlighted set the table width to 100 %:
Replace the text Place anchor here with an anchor called SNOWZONE
This anchor must not be visible on the page.
55. Highlight the text Place anchor here:
56. Select the Insert | Named Anchor menu to display the Named Anchor dialog box:
57. Find the HTML code for an anchor called SNOWZONE by clicking on the anchor:
58. Delete the statement id=”SNOWZONE” and move the HTML code <a
name=”SNOWZONE”></a> above the line TD colspan = “4”> to hide the anchor:
Create a hyperlink from the word Snow in the top table to the anchor that you have just
created.
59. Highlight the word Snow in the top table:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 15/20
Creating a web page to meet the June 2010 practical exam criteria
Page 15 June 2010
60. Select the Insert | Hyperlink menu and select #SNOWZONE from the Link dropdown menu:
61. Click on the OK button to add this hyperlink.
Make only the words Click Here a hyperlink to the anchor called START
62. Highlight the text Click Here:
63. Select the Insert | Hyperlink menu and select #START from the Link dropdown box:
64. Click on the OK button to add this hyperlink.
Select the most appropriate image from those obtained in step 1 and use this to replace the
word Sun in the bottom table.
65. Delete the word Sun and use the Insert | Image menu to insert the following image:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 16/20
Creating a web page to meet the June 2010 practical exam criteria
Page 16 June 2010
Select the most appropriate image from those obtained in step 1 and use this to replace the
word Sea in the bottom table.
66. Delete the word Sea and use the Insert | Image menu to insert the following image:
Select the most appropriate image from those obtained in step 1 and use this to replace the
word Sand in the bottom table.
67. Delete the word Sand and use the Insert | Image menu to insert the following image:
Select the most appropriate image from those obtained in step 1 and use this to replace the
word Contact us in the bottom table.
68. Delete the words Contact us and use the Insert | Image menu to insert the following image:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 17/20
Creating a web page to meet the June 2010 practical exam criteria
Page 17 June 2010
Set the width of each of the images placed in steps 66 to 69 to 160 pixels wide and maintain the
aspect ratio.
69. Highlight the first of the four images and click on the Edit Image Settings button in the
Properties window:
70. When the dialog box opens select the File tab and make sure the width is 160 pixels wide
with the Constrain check box selected:
71. Click on the OK button.
72. Repeat this process with the other three images to ensure they are 160 pixels width.
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 18/20
Creating a web page to meet the June 2010 practical exam criteria
Page 18 June 2010
Create a hyperlink from the image placed in step 67 to point to the file JXSEA.HTM which should
open in a new window called _sea
73. Click on the image of the Sea to highlight it. Click on the right mouse button to display the
shortcut menu. Select Make Link.
74. Select the file HXSEA.HTM and click the OK button (If you are asked to copy it to your
website folder click yes):
75. In the Properties window enter _sea in the Target dropdown box and press the Enter key:
Create a hyperlink from the image placed in step 69 to send an e-mail to [email protected]
76. Click on the image of the mobile telephone to highlight it.
77. Enter mailto:[email protected] in the Link dropdown box in the Properties window:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 19/20
Creating a web page to meet the June 2010 practical exam criteria
Page 19 June 2010
Save the webpage as JXRHC1.HTM
78. Select the File | Save As menu to save the webpage as JXRHC1.HTM
Save the webpage as JXRHC1.HTM
79. Double-click on the text CSS Styles in the windows pane:
80. Click on the Attach Style Sheet button and select the JXSTYLES2.CSS file:
81. Click on the OK button. Notice that the style of the web page changes:
7/27/2019 Using Dreamweaver CS4 to Answer P3 June 2010
http://slidepdf.com/reader/full/using-dreamweaver-cs4-to-answer-p3-june-2010 20/20
Creating a web page to meet the June 2010 practical exam criteria
Page 20 June 2010
Save the webpage as JXRHC2.HTM
82. Select the File | Save As menu to save the webpage as JXRHC2.HTM. Press F12 to preview
your webpage before closing it:
Open the webpage JXSEA.HTM
Attach the stylesheet JXSTYLES2.CSS to this webpage.
83. Select the File | Open menu to display the Open dialog box. Select JXSEA.HTM and click onthe OK button.
84. Click on the Attach Style Sheet button and select the JXSTYLES2.CSS file.
85. Save your webpage and press F12 to preview it:
Make the text Home a link to JXRHC2.HTM
86. Highlight the text Home and select the Insert | Hyperlink menu:
87. Click on the OK button and then press Ctrl-S to save your webpage.