Using DreamWeaver MX
From TechHelp
Contents |
[edit] Web Design Basics with DreamWeaver MX
[edit] Creating a Site and the Index Page
The first step in this process is to open your web design software, for this handout the pictures and steps reflect Dreamweaver MX. (Remember the software may be different, but a little poking around in another product will let you do all the same steps). Go to the Start Menu and select Macromedia>Dreamweaver MX from the Program Menu. The program opens with a blank page to start with.
At this point you want to set the foundation of your web site. This is where all of the information that you would need to upload the site to the Internet resides. Dreamweaver gives you the capability to quickly move between the site as it appears on your computer to the way the site actually looks on the Internet. To create your site go to Site>New Site.
A new window will open that looks like this.
Enter the name of your site, for example Mr. O’Brien’s Social Studies Site, and then click Next. The next window you see will look like this.
Select the button that says "No, I do not want to use server technology", then click Next. Your next screen will ask you how you want to edit your pages.
You will want to select the first option which says "Edit local copies on my machine, then upload to server when ready (recommended)",
this will allow you to work on your computer and edit your site wherever you want, you will just have to make sure that when you have a minute that you upload your information to the server that will hold your information.
Before clicking next you will want to check and see where you are going to be storing your web site files. To do this click on the little folder next to the text box in this menu. This will open a menu that will look like this.
What it is showing you is what folder you are going to be saving your site in. You may want to create a new folder to save your website in. I would recommend doing this so that you can save all of your sites information inside of it. I personally use one folder for each site that I create. If you want to create a folder simply click the icon that looks like this
at the top right hand corner of this little screen. This will let you create and name a new folder.
Now that you know where you are going to be creating your site go ahead and click Next. This will open another screen.
This screen gives you the options on how you will be uploading your site to Internet. If you aren’t sure what to do at this point simply select None from the drop down menu and then click Next. 
This will open your last screen that gives you a summary of what you have done . If you are ready to create your site go ahead and click Done.
Now along the right hand side of your main window you should see something that looks like this .
If you don’t see a tab with this information go to Window>Site and this tab will open. The site tab is helpful since it will show you what information you have saved on your computer.
At this point a good habit to get into is giving the page at title and saving the page right away. When you name your page this is what will appear on the Internet browser title bar you will want to enter the title in the tool bar that is at the top of the page, in the space labeled Title.
To save the page go to File>Save and when the save menu comes up check to make sure that you are in the folder you created earlier.
The first page that you are going to create is called the index page, this page is your homepage, and it will be the first page that people see. When you work with web pages you shouldn’t include any spaces, capital letters, or apostrophes. To simulate a space in the name of a page use a dash (-) or underscore (_).
Now that you have saved your page you should see your index page in the site side menu.
To help organize sites it is helpful to keep a separate folder for images and pictures. To do this go to the File menu in the site tab, and select New folder.
Name one images and another pages, remember no spaces or capitals. By saving the images of you site and pages of your site in separate folders it makes it easier to find information you want to work on easily. One thing you don’t want to do is move the index page outside of the site folder or into sub-folders, this page should be kept at the top level of your site files.
[edit] Creating the Index Page
The index page is the first page that your visitors will see. When someone requests your page the web server will access your folder and look first for a page called index.htm or index.html.
Now you are ready to start adding content to the actual page. One helpful strategy to organize the page is to insert a table inside of the page. To do this go to Insert>Table this will open another window for you table size and some properties.
The first thing to consider is the Size of the table. You probably want to have at least two rows and one column. Cell Padding is the amount of space between content inside of the cell and the cell wall. Cell Spacing is the amount of space between each cell. Border Size changes the size of your table’s border. This is measured in pixels (a pixel is; the basic unit of the composition of an image on a display). When the Border Size is set to “0” you will see a dashed line that represents the edges of the table. The last piece of this menu that is important is the Specify Width box. You will want to check this box and set the number to 100 with the in percent box checked. Once you have done this go ahead and click OK. If later on you want to change the way the table looks select the entire table by highlighting the table. If you look at the bottom of the Dreamweaver window you should see a window labeled Properties that looks similar to this,
if you don’t see this menu go to Windows>Properties. This menu will let you edit any object that you have selected, in this instance I have the table selected.
[edit] Adding Text
Adding text and changing text in Dreamweaver is similar to Word. The main concern when dealing with text is not entering it, but viewing it on the web. Most web browsers will read three typical fonts Arial, Times Roman, and Sans. You can use other fonts, but don’t rely on these fonts to appear on every computer.
A few things to keep in mind while you are typing your text are:
- make sure that your text color and background don’t conflict; otherwise people might not bother even looking at the site.
- The idea of point size and justify aren’t as concrete in web design, different screen sizes and different computers will change the way the page is seen.
- Hitting return leads to the illusion of double spacing, to make the text stay closer together use Shift>Return.
Don’t let these things scare you, the fix is not difficult and you will find that your eye becomes more critical as you develop your design skills.
[edit] Adding Images, Colors, and Backgrounds
There are a variety of ways to insert a picture into Dreamweaver, the easiest is to go to Insert>Image. Now you are brought to a menu that lets you select your file from your computer. Go ahead and browse for a picture by using the Look in drop down menu to find where you picture is.
Once you have selected the picture you want make sure that your menu says Relative to: Site Root and then click OK. This should bring up a warning that looks like this.
You want to select Yes since this will automatically put the file you are inserting into your site. This will open a window that asks you where you want to save you image,
so you want to open your image folder and save the picture there. Notice that your image file appears in the site sidebar in your images folder.
The last thing you may want to do that can include images is having a background. One thing to watch is the contrast between your background and your text, as this can be problematic to your audience. To change the background you need to go to Modify>Page Properties, this will bring up another menu.
To add a background image click Browse which will let you find a picture the same way that you would insert a picture. Notice that you can also change the background color, text color, and link colors here. To do this, simply click on the box to the right of the different choices to change the colors. This will bring up a color picker to choose your color.
Once you have changed the properties of your page click Apply to see your changes, or click OK to accept them.
[edit] Creating Links with Text and Graphics
Links in a Web page are designed to point to specific places on the Internet or within your Web site. To insert links you will want to first highlight the text you are going to hyperlink then go to the properties window at the bottom of the screen.
Here you can either paste the link in to the text area, or you can browse for a page that you have created by clicking on the folder icon at the end of the link text area. Now click off of the highlighted text and you should see a link. If you ever have to edit a link you will want to use the properties menu to make your changes.
To insert a link that people would click on a picture instead of the actual text you would want to follow the same steps as above, but instead of highlighting the text you would highlight the picture.
[edit] Creating a Second Page
Now that you have your Home page you may want to create a second page, perhaps a homework page or announcement type page. To create a new page go to File>New. This will bring up a second menu that looks like this,
you will want to select Basic Page and HTML, then click create. This will open a new page, now it is time to give the page a name and save it.
