Using Dreamweaver CS4 to Answer P3 June 2010

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:




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:




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):




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:




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):




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:




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:




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:




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:




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):




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:




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:




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:




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:




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:




Page 16 June 2010


word Sea in the bottom table.

66. Delete the word Sea and use the Insert | Image menu to insert the following image:


word Sand in the bottom table.

67. Delete the word Sand and use the Insert | Image menu to insert the following image:


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 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.




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:




Page 19 June 2010

Save the webpage as JXRHC1.HTM

78. Select the File | Save As menu to 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 20 June 2010


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.

Date post:	13-Apr-2018
Category:	Documents
Upload:	safa-aslam
View:	224 times
Download:	0 times