Using Dreamweaver CS4 To Answer P3 June 2010

Creating a web page to meet the June 2010 practical exam criteria 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 (Dont worry if yours says Unnamed Site 1):
4. Click on the Advanced tab at the top of the window:
Page 1
June 2010
Creating a web page to meet the June 2010 practical exam criteria
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:
Page 2
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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):
Page 3
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 4
June 2010
Creating a web page to meet the June 2010 practical exam criteria 13. If you havent copied this file to your June 2010 website folder you will get the following message (If you dont 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):
Page 5
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 6
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 7
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 8
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 9
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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):
Page 10
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 11
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 12
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 13
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 14
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 15
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 16
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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.
Page 17
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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 RHC@cie.org.uk 76. Click on the image of the mobile telephone to highlight it. 77. Enter mailto:RHC@cie.org.uk in the Link dropdown box in the Properties window:
Page 18
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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:
Page 19
June 2010
Creating a web page to meet the June 2010 practical exam criteria 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 on the 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.
Page 20
June 2010

Using Dreamweaver CS4 To Answer P3 June 2010

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Using Dreamweaver CS4 To Answer P3 June 2010

Uploaded by

Copyright:

Available Formats

Creating a web page to meet the June 2010 practical exam criteria Creating a folder

2. Click on the icon below to create a new website:

4. Click on the Advanced tab at the top of the window:

5. Change the site name to June 2010:

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:

25. Select the Insert | Named Anchor menu:

30. Select the Insert | Table menu:

32. Click on the OK button to insert the middle table:

50. Select the line just above the </BODY> tag:

80. Click on the Attach Style Sheet button

and select the JXSTYLES2.CSS file:

85. Save your webpage and press F12 to preview it:

You might also like