Dreamweaver MX is the Web authoring software of choice at the Kellogg School. The page will provide a brief tutorial on the main points to know in order to maintain and update your Kellogg School website. The emphasis in this tutorial is on websites that have been made using the standard Kellogg School Web template.
For any questions that this tutorial does not cover, please contact your Web rep. We are always glad to answer questions and are available for one-on-one Web instruction.
1. Defining Site Structure
Before you can begin editing a website that uses one of the Kellogg School templates, you will need to establish a local server on your desktop and a site map in Dreamweaver with the help of your Web rep.
Viewing the Site Map in Dreamweaver
Dreamweaver allows the user to set up a "site map" with a remote and a local server. To view your full site map with both remote and local servers at once, press the white button on the far right side of the screen in the Files panel, furthest to the right. If you hover over the button, it says "Expand/Collapse." To go back to the default view, hit the same button again. By default, your screen shows only your local server.
Elements of the Site Map
When your site map appears, it will look like a table with two columns. The left side is the “Remote” site (also known as the W drive or kis-nt2). The right side is your “Local” server. The local server is made of files that only exist on your desktop.
The Remote side (left side, W drive) is the Kellogg server. Everything on the server is live and available on the internet.
The Local side (right side, “My Documents”) is specific to you and your login. It exists only on your computer and does not appear on the internet until you “put” (blue up-arrow) the file(s). You can make and save as many changes as you need to the Local side and no one will see the final page on the internet until you are ready.
back to the top
2. Downloading, Opening, Saving and Posting Files
Downloading Files in Dreamweaver
Before opening a file in Dreamweaver, make sure you have the most up-to-date copy by downloading (or "getting") the file.
To download a file that is already in your Local server: Highlight the file by clicking on it once. Hit the green down-arrow to “get” the copy from the Remote side.
To download a file that is on the Remote server: Hit the Expand/Collapse button, so that you see both the Remote and Local Servers. Highlight the appropriate file on the Remote server by clicking on it once. Hit the green down-arrow to “get” the copy from the Remote side.
Opening Files in Dreamweaver
Once you have downloaded the most up-to-date copy of a file, you can open it.
Only open files from your Local side. To open a file, double-click on it.
By opening a file this way, you automatically check the file out (a green check-mark and your name should appear next to the file). See more about the Check-in/Check-out system below in section 3.
NOTE: Do not open a file by choosing File>Open, like you would a Word or Excel document. This bypasses the Check-in/Check-out system. Someone else could open the file and write over your work.
Saving Files in Dreamweaver
When you are done working on a file in Dreamweaver, save it by going to File > Save at the top of your screen.
If you are saving a new file, make sure that you create a file name with no space in it. If you need a space, use an underscore ( _ ) or dash (-).
To save a file to Dreamweaver, from another program (ex. MS Word)
- Open the file and choose Save As.
- Browse to your Local Server and save the file in the appropriate folder.
- Make sure you rename the file to be concise and without spaces.
- Don't forget to post this file as you would any other.
Posting Files in Dreamweaver
To post a file to the Remote server, click once on the file icon to highlight it (the file name will appear in an opaque line of color; if the line of color is light, it is not highlighted) and “put” it on the server by hitting the blue up-arrow.
- The first time you “put” a file, a box may appear and ask you if you want to post all dependent files with it. Choose No and check “Do not ask me this question again.”
Once you have “put” the file, check it in, by hitting the button that looks like a small lock.
- The first time you check in a file, a box will appear and ask you if you want to post all dependent files with it. Choose No and check “Do not ask me this question again.”
The Local Server is specific to you. It exists only on your computer and does not appear on the internet until you post (blue up-arrow) the file(s). You can make and save as many changes as you need to the Local Server and no one will see the final page on the internet until you are ready.
back to the top
3. The Check-in/Check-out System
One of the benefits of working on the Kellogg School Web server using Dreamweaver is that it allows us to use a network that works on a check-in/check-out system. This system informs those working on the network when someone else is using a file and ensures that no one accidentally writes over anyone else’s work. When you have a file checked out, no one else can check that file out.
When you have a file checked out a green check will appear to the left of the file name. Your name appears to the right of the file in the full site-map view only.
On someone else's computer, this file appears with a red check next to it, so that they will know it is being used.
You can save and close a file and come back to it later without checking it back in first.
When you are completely done with the file, check it back in by hitting the button that looks like a small lock. This “unlocks” the file for other users to open.
Do not check the file back in until you are completely done with it and ready to post it to the internet. Unlocking a file automatically posts any changes to the internet.
back to the top
4. The Web Template and How it Works
The Kellogg School website uses templates to ensure a consistent and accurate look throughout the website. One advantage of using a template is that you can make updates to every page that uses the template by changing one file, instead of several.
When you view a file that uses a template in Dreamweaver it may appear incomplete. The Kellogg logo and the background image will not appear. Don’t worry — this only means that you do not have these images in your local server. When you post the page, it will appear normally on the browser.
In a templated page, you can make any changes you need to the content area only. This includes adding text, images, tables, links, etc.
- The content area is 450 pixels wide. You can not put anything (photos, tables, links, etc) in the content area that is going to be longer than 450 pixels wide.
- If your content area juts out beyond the template border, check the widths of all of your images and tables.
If you need to make a change to the template, contact your web rep, but do not try to make the change yourself.
back to the top
5. Formatting Text
Typing in and formatting text in Dreamweaver is very similar to typing in any other Microsoft Office software (for example, MS Word).
Make any changes to the appearance of text by highlighting it, as you would in MS Word.
The Properties menu (at the bottom of the screen) allows you to select font style, font size, font color, as well as make text bold or italicized.
- Default font color is Black (#000000). You do not need to set the font color as black.
- For more information about the appropriate fonts styles and sizes to use, please refer to the Web Design Standards.
The Properties menu allows you to align text to the left, center or right. Default alignment is left.
The Properties menu allows you to put text into bullet-point and numbered lists. Highlight the text to go into the list and choose the appropriate button, which are located directly beneath the Bold and Italics buttons.
To indent (or outdent) text, choose the buttons directly to the left of the bullet-point and numbered list buttons.
There are three notable differences between typing in MS Word and in Dreamweaver:
- In Dreamweaver, hitting the Enter key makes a full paragraph break. To make a single line break, hit Shift-Enter.
- Dreamweaver will only allow the user to make one space between characters with the Space Bar. You can add more spaces (called "Non-Breaking Spaces") by choosing the Character tab in the Insert menu, which is directly above the work space, and choosing the Non-Breaking Space button, which is the second from the left.
- Don't use the Non-Breaking Space to align text into rows or columns, that is best done with a table. If you use NBS to align text, it will look different from computer to computer, depending on how that person has set their text size and screen preferences. Using a table ensures that your neat rows will still be neat rows, no matter what computer.
- Dreamweaver has a spell-checking option, but unlike Word, it will not visually alert you when you have incorrectly spelled a word. If you go to the Text menu at the top of the screen, you will find the Check Spelling option.
back to the top
6. Making Links
In order to make text into a link, highlight the text you want to make into a link and browse to or type the link into the “Link” space on your property tool box.
When you add a link to a file that is in your website, don't forget to post the file to the Remote server from your Local server.
When adding a link to a file in your Local server, always browse to the file. This will make the link “relative.”
You can link to a file regardless of the file type: htm, pdf, word doc, excel, images, etc.
When adding a link to a file somewhere in the Kellogg School website, other than the files that are in your website, type the entire URL into the space, starting with http://
When adding a link for something outside of the Kellogg School website (including the Northwestern site) type the entire URL (starting with http://) and choose “Blank” in the Target pull-down menu. This will cause the link to open in a new browser window.
Helpful tip: When you are adding a full URL address into the Link space, instead of typing the address, copy and paste it from an Internet browser. URLs can be very long and even one letter wrong will keep your link from working. Copying and pasting ensures that the address is correct.
back to the top
Insert a table into the content area of a Web page by using the table button in the Common tab of the Insert menu in Dreamweaver. The Insert menu appears directly above the work area in Dreamweaver. The table button is the fourth button from the left.
When you have selected the Table button, you will see a dialogue box that asks for several pieces of information. You can always change these components of your table, but it is good to know what your table should look like at the initial set-up.
- Rows = Number of rows in the table
- Columns = Number of columns in the table
- Cell padding = The number of pixels that will "pad" the area around the text or images you put within a cell in the table. 3-5 is usually adequate.
- Cell spacing = Similar to cell padding, this puts the padding between the cells, as opposed to in the cells.
- Width = The entire width of the table, in pixels or percentage of the total content area.
- Border = The line that divides the individual cells of the table, measured in pixels. Can be invisible (0 pixels) or very thick. The table at the top of this page has a border of 1 pixel, to create a thin line between cells. The table that lists all of the Kellogg School's media mentions has a border of 0 pixels, so that the text does not appear to be in a table, but rather, laid out very neatly.
A table is made of cells, rows and columns. The code short-hand that appears at the bottom of the Dreamweaver work area will allow you to highlight separate parts of a table.
- <td> = table cell
- <tr> = table row
- <table> = entire table
- You can select an entire row or column in a table by clicking into the cell at one end of the row/column and dragging to the other end of a row/column. This is similar to highlighting a row or column in Excel.
Tables can be no wider than the width of your template's “Content” area. The width of the content area on most Kellogg School websites is 450 pixels.
Templates can be aligned to the left, right or center. If you are inserting a small table into a page and you would like text to wrap around it, you should align it to the left or right.
If you want a light gray background color in your table, such as appears in many of our tables, the color to use is “eeeeee.”
To add a row to the bottom of a table, use the tab key.
To add a row in the middle of a table, place your cursor in the row directly beneath where you want to add the row and press the key command Control-M.
back to the top
Insert an image into the content area of a Web page by using the image button in the Common tab of the Insert menu in Dreamweaver. The Insert menu appears directly above the work area in Dreamweaver. The table button is the sixth from the left; it looks like a tiny picture of a tree.
Inserting an image is similar to linking to a file that is within your local server. When you select the image button, a box will open that allows you to browse to the image file you want to insert.
- In order to insert an image, it must be in your local server.
- In order for someone else to see that image on your website, the image file must also be on the remote server. Don't forget to post ALL of your files, including images.
For more complete information on images, please refer to the Using Images page.
back to the top
9. Web Styles
The Kellogg School uses a set of guidelines for layout and content that is set out in the Web Design Standards.
If you are working on an Kellogg School website for an academic or administrative department, you must adhere to these guidelines.
All other websites (such as custom faculty websites and conference websites) do not need to adhere to the Layout guidelines, but should still follow the guidelines for Content and Creating Web Pages.
back to the top
You may also want to visit the Dreamweaver Tutorial that is on the KIS website. Please be aware that this tutorial refers to an older version of Dreamweaver and is does not take the templated pages into account.
KIS Dreamweaver Tutorial
If you have any further question, or suggestions for this page, please contact your Web rep.
back to the top