Dreamweaver MX is an excellent HTML editing package, with lots of features (such as enhanced Java, JavaScript and Plug-in management). It is not a free program - but you can buy it at a discount from the Cornell Campus Store for $99 (http://www.cbs.cornell.edu). Other HTML editors, including free ones, can be found on the CIT page.
Sample Web Pages - Look at sample web pages to get an idea what you want to create. You can do this by searching topics of interest to you on http://www.google.com. Keep your audience in mind when creating your page.
We will now define a site and create a web page with text, headers, lists, external and internal links, colors, tables, and graphics.
Define Sites
- Right click on the Kerberos Key at the bottom right of the computer and exit the application. You only have to do this in the lab, not on your own computer.
- Go to the Start Menu/MacroMedia/MacroMedia Dreamweaver MX. This will open the program and a blank untitled page.
- Dreamweaver is more complicated than other HTML editors because it requires you to define your website first. However, this will save time in the long run. Click on Define Sites. Answer the questions, using this information:
- Save your file as MySite, No to server technology, select Edit locally then upload to remote server.
- Save to either My Storage Drive S (Homes) or to the C:\temp directory, depending on how you logged in (your user id or generic login, respectively). The difference is you will have continued access to files in My Storage Drive S, but files in the C:\temp are purged after 30 days and may get mixed up with other files if you name them the same as someone else.
- Choose FTP as a connection method. Next line for FTP address: www.people.cornell.edu, leave blank "What folder on the testing server do you want to store your files in?" and fill out your netid and password. Click on Test Connection.
- Click No, do not enable check-in and check-out.
Open New Page
- Use the current blank page or open a new page by going to File/New. Type a header, short paragraph and list. Highlight various words and apply formatting changes from the Properties Inspector window. Notice you can view the HTML code at the same time as the design page by clicking on the appropriate icons.
- Save you page as something unique - netid.html or .htm. You can name it what you like, as long as the extension ends in .htm or .html and there are no spaces. Use index.html if you wish to replace the default People page (but not in today's class or you'll overwrite other people's files). Save to the S: Homes drive or if you logged in with a generic password, save to the Temp directory.
Create a Link
- Click on Link icon in the menu bar. In the text field, type the name of a site you'd like to link to, such as Cornell. Type in the URL of the site (such as http://www.cornell.edu). Click outside the box. Save your document.
- Normally you can preview the document by clicking on the Globe at the top menu bar, but don't try this in the lab - it crashes the computers. You should be able to do this on your home computer. The best way to test your page in the lab is to open a web browser, go to File/Open, and click on Browse to find the file you just created in Dreamweaver. See FTP instructions
Insert a Graphic
Images - Find some images to put on your web pages. Suggested sites:
Great Buildings Collection at http://www.greatbuildings.com
Metropolitan Museum of Art at http://www.metmuseum.org
Edgerton Center of Online Photography http://web.mit.edu/Edgerton/
- Be sure you have saved your document as yourname.html to homes on S: or C:/temp.. The following steps won't work if you haven't saved your document.
- Check the web site's FAQ or copyright link to see if it is OK for you to put their image on your web site. Many allow this for personal, educational use.
- To capture an image, right click and select "save picture as" and give the picture a name, such as picture.jpg. Make sure you save it to the Homes (S) Drive or C:/temp in the same folder as your web page.
- Then click in your html document where you want the picture. Go to Insert/Image to locate the location and name of your picture.
- Click yes to copy the picture to your folder. This is preferable to using "copy" because then you are not downloading the image from another server each time the picture is viewed (if the webmaster of that server removes the image you would lose yours as well).
Change Background Colors
- To change the color of your background, go to Modify/Page Properties.
- Click on the rectangle next to background to choose your color. Click OK. You can also change the color of your text here.
Create a Table
- Create a table by clicking on Insert/Table.
- Enter the number of columns (such as 2) and columns (5) you want.
- You may choose a border and change the cell spacing (space between cells) and cell padding (space within cells) or accept the defaults and adjust it later.
- Type in the items so it looks like the table below (or create your own table). To move from cell to cell use the tab key. You may change the layout by going to Insert/Table to add rows, columns, etc.
- For other table mark-up with samples, see the Table Sampler.
Time
| 8 am | 9am | 10:10 am | 11:15 am |
Class
| Physics | Chemistry | Psychology | Math |
Create an Internal Link
Internal links are good if your document is long and you want to link from the top to various items below. A good example is linking table of contents to the sections in your document.
- Postion your cursor where you want to link to. Go to Insert /Named Anchor. Type in the text you want, such as skills and type a short word for the link if the text is long.
- Upper/lower case does matter here and there should be no spaces. Click OK.
- Position your cursor at the top of your document, where you want to link from. Click the hyperlink icon in the menu bar. Type the text skills, and choose #skills from the choices of links. (Do not text before clicking on the hyperlink icon.)
- Save your document and test your link by opening a web browser, go to File/Open, and click on Browse to find the file you just created in Dreamweaver.
Link to a New Page
Create a link from your page to another page that you create.
- Make sure you still have your webpage from Dreamweaver open.
- Go to File/New/Basic page. You will toggle back and forth between the two pages.
- Type any information you wish on the new page. Be sure to give it a title and save it in the same directory as your other files. The name must have .htm or .html as an extension, for example page2.html.
- Go back to your original html page. Highlight the words you want to link FROM. Click in the Link box and type in the name of the file you created (such as page2.html). You may also click on the file folder icon to browse for the html file. Remember upper/lower case does matter here. Save you files, then test your link through your browser to see if it works.
