Making a webpage using DreamWeaver

1. Making a webpage using DreamWeaver

2. Start/All Programs/AdobeDreamWeaver

3. If you get this dialog box, click OK

4. Create New HTML document

5. HTML • HTML stands for Hypertext Markup Language. • Hypertext refers to the presence of links in a page. The links allow a viewer to move directly to another document that may have a different location. • Markup Language refers to a coding system that indicates how a document is structured or how it should be rendered (using ordinary printable characters rather than special control characters).

6. HTML Tags • To distinguish between text and the marking up thereof, HTML uses tags. • HTML tags are keywords placed within angle brackets <>. • Many HTML tags work in pairs. There is an opening tag and a closing tag which impose their effect on the hypertext enclosed between them. • The closing tag has the same keyword as the opening tag but the keyword is preceded by a slash.

7. Adding a title to a page in Design view

8. The page so far in code view

9. Use File/Save As to give your page a name and location

10. Filenames • Your filename should have the extension .htm or .html • The case of the name is sometimes important, so pay attention to whether it is MyPage.htm of myPage.htm or mypage.htm, etc. • I strongly recommend that you do NOT have spaces in your filenames.

11. Browser default file names • The filename index.htm is a special filename because browsers are designed to look particular filename if a folder is specified, but a filename is not specified. Examples include • Index.htm (or index.htm, Index.html, index.html) • Welcome.htm • Home.htm

12. Seeing file extensions (I) Go to Start/Control Panel If you are in “Category View” switch to “Classic View”

13. Seeing file extensions (II) Click on Folder Options. Then on the View tab, make sure Hide extensions for known file types is NOT checked.

14. Seeing file extensions (III) In My Computer, you should now be able to see the file extension – in this case .htm

15. Return to Design view, click on arrow to show Properties Viewer, then click on Page Properties

16. Use the dialog box to choose the font, font size, text (font) color and background color for the page

17. Color Codes • One could also enter the color code for one’s choice in the corresponding textbox. • In HTML color codes use the RGB scheme in which one determines the amount of red, green and blue that will be combined to make the color by choosing three numbers each between 0 and 255. • The numbers are expressed as hexadecimal numbers (base 16) and concatenated (placed one after another) and preceded by a pound sign #.

18. RGB Code for Dark Blue in Logo This screen capture shows using the eyedropper tool in Photoshop and the Color palette to determine the RGB values for the dark blue of the logo.

19. Logo dark blue color code calculation 2 To convert from decimal numbers to hexadecimal numbers, you can use the calculation under Start/Programs/ Accessories/Calculator. Click on View/Scientific and enter the decimal number to be converted. And the click on the Hex radio button. The result should have two hexadecimal digits (0-9 or A-F). If the result has only one digit, a “0” should be placed in front of it. Putting the Red, Green and Blue results together yields Logo gray: #003366

20. Result so far in Design and Code Views

21. You might want a background image instead. If you find an background image that you like on a page, right click on that background and choose Save Background As … Then use the dialog box to place the image in the same location as the html file. Remember its name (and extension).

22. Return to Page Properties, click on the Browse button and find the image you saved.

23. Result in Design and Code View

24. You can also search for background images

25. Embedded versus referred to • When one inserts an image in a Word document, the image is embedded into the Word document. As a result if you want someone to view the document, you only need to send one file – the Word document. • When one inserts an image in an HTML document, the image is referred to by the HTML document. As a result if you want someone to view the document, you must send two files – the HTML document and the image file.

26. Relative versus Absolute Path • When the HTML document refers to the image file, it provides a path so that the image file can be located. • A file’s path may be absolute (a complete (full) path or an explicit, full URL, e.g. http://www.lasalle.edu/index.htm) or relative (a shorter path that starts with the same location as the file doing the referring). • Image files are generally referred to by a relative address. • The previous warning message occurred because we had not saved the HTML file. Since the HTML file had no location, a relative address could not be provided for the image file.

27. Add a header in Split View

28. Go to Insert/Table

29. Fill in the number of rows and columns in the dialog box

30. Result (that &nbsp; is HTML code for a space)

31. Place the cursor in one of the cells, then Insert/Image, then use dialog boxes to find image to place on webpage

32. Result: The HTML code for the image is <img src="Captain_John_Smith.jpg" alt="John Smith" width="180" height="230" />

33. In the next cell, enter some text

34. Highlight two cells in the next row, go to Modify/Table/Merge Cells

35. Make a list using the list button on the Properties area at the bottom

36. The list will contain links, go to Insert/Hyperlink and fill out the dialog box Text is what will show on the page, while link is where is will go if clicked. If you want an additional page to appear, use the drop down list to make the target: _blank.

37. Result of hyperlink HTML code for a hyperlink: <a href = "http://en.wikipedia.org/wiki/John_Smith_of_Jamestown">More about me</a> Notice the opening and closing tags. The stuff between them is what shows up on the page. The “href” attribute says where to go if the link is clicked.

38. Add a few more links

39. Posting your webpage • In order for other people to be able to see your webpage, you must copy the files to a web server – a computer set up to share web pages with the world. • Our web server is called alpha. • Next we will show two ways to post your web page on the alpha: WinSCP and WS_FTP

40. If using WinSCP to post your webpage

41. Go to Start/All Programs/WinSCP

42. Enter the host name (alpha.lasalle.edu), your username and your password and click Login. How the passwords are made changes from time to time, but for this time try the first five numbers of your La Salle id number, an underscore, and the first three letters of your username. For example, if your id number is 2345678 and your username is smithj28, then the alpha password would be 23456_smi

43. The two sides represent the local computer (where you are working) and the remote server (where you want to place your webpage) Local Remote

44. Click on the public_html folder. This is the folder that the world has permission to look at.

45. To copy a file from the local to the remote destination, drag the icon for the file from the local side to the remote side If you decide to change anything on the page, then edit the file locally and re-send it. The new file will overwrite the old file.

46. Don’t forget to send over the image files as well

47. If using WS_FTP to post your webpage

48. FTP: Start/All Programs/WS_FTP/WS_FTP File Transfer Protocol (FTP) is a protocol (a set of rules) that moves data from one computer to another through a network, such as the Internet. Filezilla is a free FTP application if you wanted to have one at home. (You would want a “client” as opposed to a “server”.)

49. Fill in host (alpha.lasalle.edu), username and password How the passwords are made changes from time to time, but for this time try the first five numbers of your La Salle id number, an underscore, and the first three letters of your username. For example, if your id number is 2345678 and your username is smithj28, then the alpha password would be 23456_smi

50. Double click on the folder public_html on the remote system