LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team.

Transcription

1 Dreamweaver I Dreamweaver is a WYSIWYG (what you see is what you get) HTML editing tool that is powerful enough to be used by professionals, yet is still comfortable enough for amateurs who want more than what Netscape Composer has to offer. I have not used Front Page but from talking with those who have used both it and Dreamweaver, Dreamweaver is a step up. This documentation with help you create a website with three pages. Step 1 To begin Click on Site Step 2 Click on New Site LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team.

2 Step 3 We will create a name to our website. On the SITE NAME text box, Type in My First Website 2 P a g e

3 Step 4 We will locate the file that contains all the materials that we need to build your website by Clicking on the folder icon. Step 5 Double Click on the folder and we ll notice that inside there are no files. 3 P a g e

4 Step 6 Click Select Step 7 Once back on our previous dialog box, we will Click Save 4 P a g e

5 Step 8 Notice how now we have all our files in our FILES PANEL. We will be using all of these files to build our website. Step 9 We will begin to create our first page by selecting HTML under the CREATE NEW Column. Click HTML 5 P a g e

6 Step 10 Click on Insert Step 11 Click Table 6 P a g e

7 Step 12 We will Type in Rows: 3 and Columns: 1 and Table Width: 600 pixels. Make sure it looks like the picture below Step 13 Click OK 7 P a g e

8 Step 14 To have our table nicely placed on the middle, we will go to our PROPERTIES PANEL on the bottom of the page and right next to Align Click Default Step 15 Choose and Click Center 8 P a g e

9 Step 16 We will insert our first image banner from our Files Panel. Click on Banner Step 17 To insert our image, Click on the icon called Banner and we will drag the image and drop it to the first cell as shown the picture below 9 P a g e

10 Step 18 On Alternate Text: type Banner as shown the picture below Step 19 Click OK 10 P a g e

11 Step 20 We will next create buttons, but in order to do that, we will insert a new table in the middle cell by having our cursor blinking in the middle cell Step 21 Click Insert 11 P a g e

12 Step 22 Click Table Step 23 Type at Rows: 1, Type at Columns: 3, Type at Table Width: 600 pixels 12 P a g e

13 Step 24 Click OK Step 25 Notice how we have inserted a table that is inside the previous table we have created before. 13 P a g e

14 Step 26 Now we will insert the first image button form our Files Panel. Click on home.gif Step 27 Click on home.gif and drag the image and drop it to the first cell 14 P a g e

15 Step 28 Type at Alternate Text: home button Step 29 Click OK 15 P a g e

16 Step 30 We have now inserted our HOME BUTTON Step 31 - Now we will insert the Second image button form our Files Panel. Click on about.gif 16 P a g e

17 Step 32 - Click on about.gif and drag the image and drop it to the Second cell Step 33 - Type at Alternate Text: about button 17 P a g e

18 Step 34 Click OK Step 35 Now we will insert the third image button from the Files Panel. Click contact.gif 18 P a g e

19 Step 36 Click on contact.gif and drag the image and drop it on the third cell Step 37 Type at Alternate Text: contact button Step 38 Click OK 19 P a g e

20 Step 39 We will then center our buttons by selecting all three cells. Step 40 From the Properties Panel we will go to Horizontal option and Click on Default 20 P a g e

21 Step 41 Click Center Step 42 Now the three buttons should be centered Step 43 The last bottom cell, we will insert some random text 21 P a g e

22 Step 44 To insert the text, Click on the randomtext.txt icon Step 45 Click and drag the randomtext.txt icon and drop it to the last cell 22 P a g e

23 Step 46 Make sure to Select Text Only Step 47 Click OK 23 P a g e

24 Step 48 You should now see some random text on the last cell Step 49 We will insert another image to identify our page by dragging and dropping the picture after the first word from the Files Panel 24 P a g e

25 Step 50 Click and drag it to the first word Step 51 Type in Alternate Text: Welcome Image 25 P a g e

26 Step 52 Click OK Step 53 Now, with the picture already inserted, we notice how the image is pushing down the text 26 P a g e

27 Step 54 In order to fix this, Go down to Properties Panel towards the Align Click Default Step 55 Click on Left 27 P a g e

28 Step 56 You should see now that the text moved up and it looks better. Step 57 We will activate the three buttons. Click on Home 28 P a g e

29 Step 58 Go to Properties Panel; at Link textbox type index.html (make sure that it s all in lowercase letters). Step 59 Click on About Us 29 P a g e

30 Step 60 - Go to Properties Panel; at Link textbox type about.html (make sure that it s all in lowercase letters). Step 61 Click Us 30 P a g e

31 Step 62 Go to the Properties Panel; at the Link textbox Type .html (make sure that it s all in lowercase letters) Step 63 We will continue by naming your document. In the Title textbox which is under the menus Type Home 31 P a g e

32 Step 64 Click on Home button Step 65 We will now save the page by going to our File menu and selecting Save 32 P a g e

33 Step 66 Click Save Step 67 Type the name index.html so the browser can recognize it as the home page. Make sure you typed the name in lowercase letter at all times. 33 P a g e

34 Step 68 Click Save Step 69 Notice how on our Files Panel the new created page appears 34 P a g e

35 Step 70 To preview our page. Click on the button that has a picture of a globe on it and Click on Preview in Firefox Step 71 You are now able to see how your page looks in your browser window 35 P a g e

36 Step 72 In order to create the next page, we will first delete the current image. Step 73 Once the picture is deleted, the picture below shows how it should be 36 P a g e

37 Step 74 We will now drag and drop the new image for the about us, Click on aboutpic.jpg Step 75 Drop the image at the before the first letter of the paragraph. 37 P a g e

38 Step 76 At Alternate Text: Type about image Step 77 Click OK 38 P a g e

39 Step 78 Notice how the texts alignment is placed Step 79 To fix the alignment, select the image and then go down to Properties Panel. Click on Default then Click Left 39 P a g e

40 Step 80 Notice the difference the image and text is placed. Step 81 We will continue by naming this page about, this helps your visitors understand the purpose of your page. 40 P a g e

41 Step 82 We will now save the new page by going to the File menu and Selecting Save As Step 83 A dialog box will appear. Type about.html (always type in lowercase letters) 41 P a g e

42 Step 84 Click Save Step 85 Notice how on the Files Panel the new created page appears. The new file should say about.html 42 P a g e

43 Step 86- Also notice how new page appears in a new tab under the Menu Step 87 To create the last next page, we will delete again 43 P a g e

44 Step 88 Click on pic.jpg Step 89 Drag and drop the image pic.jpg before the first letter of the paragraph 44 P a g e

45 Step 90 At the Alternate Text: type image Step 91- Click OK 45 P a g e

46 Step 92 To fix the alignment, go down to the Properties Panel and Click Default and Click Left Step 93 In order to create an link, First have the text cursor blinking at the end of the texts and Press Enter to move the cursor to the next line 46 P a g e

47 Step 94 You will type in your desired address which will replace Step 95 To activate your links, first Select your text 47 P a g e

48 Step 96 Go to Properties Panel, Click on the Link box and Type mailto: (make sure that it s all in lowercase letters) followed by the same address you typed earlier Step 97 Once you Click away from your text you will notice that your link is now activated because the text is now blue and it is underlined 48 P a g e

49 Step 98 Now name this document. Type Step 99 Go to File menu and Select Save As 49 P a g e

50 Step 100 In the dialog box Type .html (lowercase letters at all times). Step 101- Click Save 50 P a g e

51 Step 102 The new created page appears in Files Panel. The new file should say .html Step 103 Now we will preview the pages. Click on the button that has a picture of a globe and choose your browser to preview your website. 51 P a g e

52 Step 104 Once you Click on the buttons, you ll notice how your buttons are working and you are taken to the new pages. Step 105 To test the link, Click on the link 52 P a g e

53 Step 106 Choose your service provider and Click OK Step 107 An window should now appear where the user will simply type something in order to reach you and click on the Send button Step 108 You have completed how to do a basic web site. 53 P a g e