Setting Up · New Pages · Text and Links · Inserting Objects · Tables · Publishing
Basic Set-Up & Using Video
This video may take up to two minutes to preload. Choose the small play button to begin watching the tutorial video.
A local site is comprised of files on your local disk (i.e. the files that are saved on your desktop or hard-drive) that corresponds to files saved on your remote site which are the files saved on the server.
A site definition is a set of defining characteristics for a local site plus information on how the local site corresponds to the remote site. This is how to set up a site definition:
- Open Dreamweaver CS 3 in order to set up a local site. To create a site definition, use the dropdown menu to choose Site > Manage Sites, and click new site.
- Click on site. On the top side of the wizard, select the Basic tab. Type in a name for your website, and the URL where it will be located. Click next.
- Click No, I do not want to use server technology. Click next.
- Select the option labeled Edit local copies on my machine, then upload to server when ready. There are a variety of ways to work with files, but this is the easiest and safest option. In the text box, specify a folder (or browse for one) on your local disk where Dreamweaver should store the local version of the site’s files.
- Select FTP for how you connect with your server. Under the host name enter webdrive.stolaf.edu. Select a folder on the server to upload files to. All websites on the St. Olaf server begin with /home/www/ excepting personal homepages which begin with /www/. For example, the MDC's folder is /home/www/services/mdc/. Enter your login name and password, as well. Click test connection to see if the connection is set up properly. Click next.
- Click No, do not enable check in and check out. Click next.
- Review your settings and click done.
Creating a New Page
- Use the dropdown menu to choose File > New.
- On the left side of the new page window, click the Basic Page tab.
- Select HTML Template under Page Type:.
- Find a layout you like under Layout:.
- Click Create.
Creating a New Page from Template
If your website has templates appropriately set up (like the St. Olaf webpages), it is possible to save a lot of formatting work by using a pre-created template.
- Use the dropdown menu to choose File > New.
- On the left side of the new page window, click the Page from Template tab.
- Select your website under Site:.
- Find a template you like under Template for Site:.
- Click Create.
There are three ways to edit a webpage using dreamweaver- Code view, Split view, and Design view.
Code Split Design Shows the raw HTML code.
Most difficult to use and see changes.Shows both Code and Design views at once.
Offers most flexibility for experienced users.Shows what the website will look like when uploaded.
No knowledge of HTML necessary- easiest mode to use.
Working with Text
Entering text in Dreamweaver is similar to entering text into a word processor- start typing and text will appear where the cursor is blinking. Use the Property Inspector (access it using the dropdown menu Window > Properties, it will appear below the Document window) to make changes to the text such as font, color, size, etc. To make changes to text already present on the page, highlight the text you would like changed and then use the Property Inspector.
Changing the Color Scheme
In order to change the color scheme (including background and text) use the dropdown menu to choose Modify > Page Properties. Choosing a different Category (on the left) will allow the manipulation of things like what links look like before and after being visited.
Creating Hyperlinks
- Highlight the text you want to transform into a link.
- Using the Property Inspector, input into the Link field type the full URL of the website to which you want to link (ex: http://www.stolaf.edu)
- If you would like an email link, input mailto: name@url.com in the Link field
Creating Anchors
An anchor is a marker in a document that you can use to jump to quickly- effectively allowing a hyperlink to another part of the same document. In situations where large amounts of text and excessive scrolling are necessary, consider using anchors.
- Use the dropdown menu to access Insert > Named Anchor.
- In the anchor dialog type in a name for your anchor.
- Click OK.
- To link an anchor click the link button, but instead of inserting a URL in the link section, select the name of your anchor from the drop down menu.
Inserting Horizontal Rulers
Horizontal rules are often used to create visual breaks between different sections of a web page. To insert a horizontal rule, use the dropdown menu to access Insert > HTML > Horizontal Rule. You can change characteristics of the horizontal rule by entering different values into the Property inspector at the bottom of the screen.
Inserting Images
To insert an image use the dropdown menu to access Insert > Image. Select the image from the file browser. Be sure to add in an alt text for the visually impaired and those with slow internet connections.
Inserting Rollover Images
To insert a rollover image use the dropdown menu to access Insert > Image Objects > Rollover Image. Select the image from the file browser, and select the image you would like it to change to when the mouse is over it. Be sure to add in an alt text for the visually impaired and those with slow internet connections.
Inserting Flash Applets
To insert a Flash applet use the dropdown menu to access Insert > Media > Flash. Select the .swf Flash file from the file browser, and select the Flash file.
Tables are a very easy way to organize data into an eye-pleasing, readable format. Used properly, they can turn a disorganized scrap heap of information into a well-functioning and accessible website.
Starting a Table
To insert a table, use the dropdown menu to choose Insert > Table. In the Table Size heading, select how many cells you want in your table. Do this by selecting the proper amount of rows and columns you would like to use. Rows multiplied by columns will give the total cells in the table. Also be sure to set how wide the table ought to be and how thick the border ought to be.
If the top row or leftmost column (or both) of your table is devoted to headings or labels, be sure to click the appropriate eader type for easier formatting.
Table Manipulation
- Clicking and dragging the outer edge of the table will change its dimensions.
- With the dropdown menu, select Insert > Table Objects > to access a dropdown menu that allows the addition of extra rows or columns.
- With the dropdown menu, select Modify > Table > to access a dropdown menu that allows the maniuplation of many elements of the table.
Publishing your website (if the remote site was set up properly as explained in the setup documentation) is as easy as using the dropdown menu to select Site > Put. This uploads all of the website to the remote server. Test your pages and links to ensure everything looks and works like you intended. Congratulations on your website!