|
|
|
|
Macromedia Dreamweaver MX 2004 Macromedia Dreamweaver MX is a software application that helps you create and manage websites. Because it allows you to add elements to a page using a WYSIWYG (what you see is what you get) editor, anyone can create web pages without knowing much about markup or scripting languages (such as html or javascript). This documentation will show you how to perform the basic tasks involved in creating websites with Macromedia Dreamweaver MX 2004; however, many of the principles still apply to previous versions of the software. The Dreamweaver MX Screen Layout
Creating a New Web Site
Testing Your Pages for Web Compatibility
Working with Pages Uploading Your Site to the Web
Advanced Options
Converting to a
Dreamweaver Web from FrontPage In order to obtain a web on Trinity's server, you must either call or stop by the Help Desk on Level B in the Library and Information Technology Center to submit a request with one of the consultants. Accessing Dreamweaver MX From the Start menu, select Programs. Another menu will pop up, and from there navigate to the Macromedia folder, and then click the Macromedia Dreamweaver MX 2004 icon to launch the program. NOTE: The procedure for opening Dreamweaver may vary depending on the setup of your computer. The Dreamweaver MX Screen Layout The first time you open or create a page in Dreamweaver, your screen should look similar to the one below.
Before you begin creating pages within Dreamweaver, it is best to decide whether you will work on a site on your own computer (locally) or a site directly on the server (live). Working on a site locally means that any changes you make will not be viewable from the Internet until you save and publish the site to a server. This can be very useful when developing your site, in that you may preview your work to ensure that everything is functioning properly before making it publicly available. Also, a local site may be worked on even when you don’t have a network connection. Working directly on the server means any changes that are made and saved take effect immediately. In either case, it is important that you have a backup of your web before making drastic changes. Setting Up a Site Locally To create a site locally on your computer, you must set up a place to store your files on your hard drive. It is recommended that you use the "My Webs" folder within the My Documents folder (Windows) or the "Sites" folder (Mac). An important thing to remember when naming a web folder or file—or generally any computer file really—is to keep it as short as possible and omit spaces. If you have more than one word in your title, you may use a capital letter for the beginning of each word, an underscore between words, or just plain lowercase if it makes for easy readability. To create a site locally on your computer:
The above information is only a generic example. For Trinity web sites you request, you will be given both the server address (i.e. http://webservername/~username) and the web address (i.e. http://www.trincoll.edu/~username), which is the address that is typed into a web browser. Note: The server address is different from the web address. the server address should be kept private and generally only used when connecting to your site via DREAMWEAVER, ftp, or other web maintenance software. Also remember that your username should be entered in the following format: cmpcntr/username. Once you are done, click the Test Connection button to make sure you have entered the information properly (you will get a confirmation that Dreamweaver could connect to your web server). Finally, click Next. The next screen will ask whether or not you want to enable check in and check out, which prevents multiple people from working on the same file at once. This is a good idea if your site will be managed by several individuals at once. Make your selection and click Next. This screen will be a summary of the information you have entered. Click Done to return to the main editing window. You will now see the folder list for your site in the folder view on the right side of the screen, as well as a panel of buttons explained below.
The procedure is pretty much the same as setting up a web on your machine locally, except that you must click on select FTP & RDS Server from dropdown menu that appears when you select New from the Manage Sites dialogue box. Enter the information as illustrated above in step 6. Dreamweaver will then open the web for you, after which you must click Open to view your live site. A disadvantage to working directly on the server is that you will not be able to perform any link checking or generate site reports. To create a home page (and any subsequent pages), select New... from the File menu. This will open the new document window, from which you may select a category and a page type (for a standard webpage, the category will be "basic page" and the page type "html"). Once you have made your selection, click the Create button. Notice that the Properties Inspector now shows many of the properties for that you may like to alter while working with your page, such as font type and size, color, etc. More properties can be applied page wide using the Page Properties button; here you can change the font for the entire page, set the page background, set margins, etc. Once you have created the page, save it by selecting the File menu and then Save. You will get a dialogue box where you may name your page. Your homepage--the first page of your web--should always be named "index.html" or "default.html", depending on the settings of your server. For Trinity web servers a home page is automatically created for you when a site is requested. Testing Your Pages for Web Compatibility You should constantly test your site to make sure that, at the very least, it displays well in the most current browsers (Internet Explorer, Safari, Mozilla, etc.). Ideally your site would also display in previous versions of the browsers as well. Editing a Page. Once you have created and saved a page, it will be displayed in the file menu. You may reopen the file menu if it has been closed by pressing F8. To edit an html page, double-click on it from the folder list to open it in the editing window. You may open any number of pages during one session, navigating between the pages by using the tabs at the top of the editing window as shown below.
Adding Text and Images. One of the most basic tasks you'll be performing when using Dreamweaver MX is adding text and images. The process is similar to creating a document in MS Word, in that you simply place your cursor on the page you would like to edit and type the information you would like to add to your page. Any element that can be included in a word document (including lists, and tables) can also be included in your page. You may also add what is called a "non-breaking" return by holding down the Shift key while pressing Enter. This creates a smaller space between text than would normally be created simply by pressing return.
Before adding any images to your web, make sure they are optimized for the web. This applies for any type of element you will be uploading to the web. To prepare an image, use a graphics program like Photoshop, which will allow you to control the size and resolution of your graphic. Size (height and width in pixels). Keep in mind that people will be using various screen sizes to view your web, so your images should be as small as possible without loosing detail, or use thumbnails that link to the larger image. Resolution. Setting your image resolution to 72 pixels is a good rule of thumb to minimize file size and download time. To insert a picture, simply select Picture from the Insert menu at the top of the screen. Browse to the image you want to upload, and then hit the OK button. Hyperlinks can be made to many objects, including other web pages, pictures, multimedia files, bookmarks, e-mail addresses, etc. Links can also be either text or images, but they work in the same way. A text hyperlink will typically be underlined and/or highlighted (different font color from the main text of the pages). An image hyperlink is a little more subtle, in that it will look like any other image on the page until the user hovers over it. Thus, it is a good idea to make image hyperlinks fairly obvious. While most hyperlinks link to other pages, you can also create links that point to other multimedia files, such as images, audio, or video clips that reside on a web server. Anchors refer to other parts of your page to which you may create an internal link, and can be helpful if your pages are long (the index at the top of this page uses anchors to link to specific content so that it can be easily found). Mailto links are hyperlinks that generate blank emails (using the default mail software on the user's computer) that are addressed to the recipient specified in the link. There are
two ways to create hyperlinks, depending on the complexity. The quickest way
would be to select the text or image you would like to use to create the
link and then use the Properties inspector to quickly set the URL and target
(this same page, a new page, etc.). However, if you are not sure how to
create a link manually, it is best to use the link icon (
If you click on the folder icon, you will get a new dialogue box similar to others you have encountered when saving, opening, etc. However, in addition to browsing or typing in the URL, you can also decide to make the link relative to the document or site root. If the link is to a item that exists in your web or on the server, making the link relative to the site root will save you the extra step of fixing broken links should you need to reorganize your files later. To create a Mailto
link, click on the E-mail Address icon ( To create an
anchor,
place the cursor where you would like place the anchor. Click on the anchor
icon ( Uploading Your Site to the Web If you are already working with a remote site, you simply need to highlight the files you would like to upload in the folder list and hit the Put File(s) icon (which is the blue arrow above the folder list) . However, if you have been working locally until now, you must create a remote server connection before uploading your site. Click on the Site folder and then click the Put File(s) icon. You will then be prompted for server information, and you will need to proceed as outlined in step 6 of "Setting Up a Site Locally" (above). Using Tables for Layout Tables can be very helpful in laying out your text and images for your pages when used conservatively. By using the table as a container to hold your content, you can better control the relative layout--meaning where items appear on the page in relationship to one another--no matter what size screen your site is viewed on. To insert a table, select Insert from the Table menu, and then select Table again. The Insert Table dialogue box will appear, which will allow you to specify table properties (these can be edited later if necessary). When Working with Table Properties, leave the border size set to 0, which is invisible. Also, if the table is being used purely for layout purposes, the width should be set to 100 percent, which ensures that it will grow/shrink to fit the viewer's screen size. Just because you are using a grid, your layout does not have to be grid-like. You may fine tune the properties and layout of the cells (by merging or splitting) to fit and place the elements of your page as needed. While tables can help to organize your design, be aware that they may present accessibility issues for individuals with disabilities. For more information, please see the Web Design Guide for more information. For more detailed information on creating Interactive Forms and other features in Dreamweaver, go to Macromedia support from Macromedia's website at www.macromedia.com. Converting to a Dreamweaver Web from MS FrontPage Web Converting from a FrontPage web to Dreamweaver can be complicated depending on how well organized the site was to begin with, and how much of the code was generated by the FrontPage itself. Thus, it is best to either cut and paste your content between the applications and then clean up the code, or simply start from scratch. Starting from scratch does not mean rekeying all of your text; you may paste it into notepad or some other program to strip the formatting before finally pasting it into Dreamweaver and reformatting. This method is probably easier than trying to clean up the code from FrontPage. |
)
found to the left of the group's title bar to another area of the
workspace.
Connect/Disconnect from remote host.
Refresh the
folder list.
Get Files
from the remote server and download them to the local site.
Put Files
on the remote server.
Check out
files.
Check in
files.
Expand/Collapse
the file panel to show both the remote and local sites, including a last
modified date and the username who has checked out the file if
applicable.
)
on the Insert toolbar, which will open the window below. Text: field is
the text you have highlighted to be your link. From the Link: drop down
menu you may select an anchor, or click on the folder icon to browse to your
computer or remote server. As with the Properties Inspector, you may also set a
target.
)
on the Insert toolbar. The
Text to Display field is the actual text the user will see, which can be
different from the address itself. Once you have created your link, click the
OK button.
) on the
Insert toolbar. A window will pop up allowing you to type in an anchor name. Try
to give the anchor a meaningful name so
that you will quickly remember where on your page it leads to, and then select
the OK button.