Making a webpage using DreamWeaver CSC 152 (Blum)1

Start/All Programs/Adobe Design Premium/AdobeDreamWeaver CSC 152 (Blum)2

If you get this dialog box, click OK CSC 152 (Blum)3

Create New HTML document CSC 152 (Blum)4

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). CSC 152 (Blum)

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. CSC 152 (Blum)

Adding a title to a page in Design view CSC 152 (Blum)7 Split view: code on left, design on right

Use File/Save As to give your page a name and location CSC 152 (Blum)8

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. CSC 152 (Blum)9

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 CSC 152 (Blum)10

Seeing file extensions (I) Go to Start/Control Panel Use View by: Small icon CSC 152 (Blum)11

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

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

If you don’t have the Properties Pane at the bottom, go to Windows/Properties. Click on Page Properties CSC 152 (Blum)14

Use the dialog box to choose the font, font size, text (font) color and background color for the page CSC 152 (Blum)15

16 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 #. CSC 152 (Blum)

RGB Code for Dark Blue in Logo 17 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. CSC 152 (Blum)

18 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/Porgrammer 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:# CSC 152 (Blum)

Result so far in Design and Code Views CSC 152 (Blum)19

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). CSC 152 (Blum)20

Return to Page Properties, click on the Browse button and find the image you saved. CSC 152 (Blum)21

Result in Design and Code View CSC 152 (Blum)22

You can also search for background images CSC 152 (Blum)23

24 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. CSC 152 (Blum)

25 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. 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. CSC 152 (Blum)

Add a header in Split View CSC 152 (Blum)26

Go to Insert/Table CSC 152 (Blum)27

Fill in the number of rows and columns in the dialog box CSC 152 (Blum)28

Result (that is HTML code for a space) CSC 152 (Blum)29

Place the cursor in one of the cells, then Insert/Image, then use dialog boxes to find image to place on webpage CSC 152 (Blum)30

Result: The HTML code for the image is CSC 152 (Blum)31

In the next cell, enter some text CSC 152 (Blum)32

Highlight two cells in the next row, go to Modify/Table/Merge Cells CSC 152 (Blum)33

Make a list using the list button on the Properties area at the bottom CSC 152 (Blum)34

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. CSC 152 (Blum)35

Result of hyperlink HTML code for a hyperlink: More about me 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. CSC 152 (Blum)36

Add a few more links CSC 152 (Blum)37

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 CSC 152 (Blum)38

If using WinSCP to post your webpage CSC 152 (Blum)39

Go to Start/All Programs/WinSCP CSC 152 (Blum)40

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 Social Security Number, an underscore, and the first three letters of your username. For example, if your id number is and your username is smithj28, then the alpha password would be 12345_smi CSC 152 (Blum)41

The two sides represent the local computer (where you are working) and the remote server (where you want to place your webpage) LocalRemote CSC 152 (Blum)42

Click on the public_html folder. This is the folder that the world has permission to look at. CSC 152 (Blum)43

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. CSC 152 (Blum)44

Don’t forget to send over the image files as well CSC 152 (Blum)45

View your page in a browser: note that the index.htm is optional but only because it has that special name CSC 152 (Blum)46

Make a change like setting the border to 0, then resend it CSC 152 (Blum)47

Result (without borders) CSC 152 (Blum)48

Assignment Your assignment is to make a webpage that contains at least one image and one link and to post it on the alpha. Send me the URL (website address) of your page. CSC 152 (Blum)49