Web Design Basics with DreamWeaver MX
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 from the Program Menu. The program opens with a blank page and the Welcome Screen.
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.
The easiest way to create a new site is to choose from the New section of the Welcome Screen Dreamweaver Site. This will open up a dialog box for you to create you site. This can also be done by going to Site>New Site.
A new window will open that looks like this.
Within the two fields you will want to enter the name of the site, for example Mr. O’Brien’s Social Studies Site. In the other field you will want to enter the location of the folder where you are going to save all of your files related to the site. I use one folder per site for example I might also make Mr. O'Brien's Personal Site which would have a different URL then Mr. O’Brien’s Social Studies Site. You can also do other more advanced things such as setting up version control and server information within this window. Once you have set these two fields you will want to click Save.
Now you have the most basic pieces of your site. You can always change settings if you need to later by going to Site>Manage Sites which allows you to change your overall site settings.
Once you have your site the next piece is to begin to think about is the layout of your site, and how this will affect the layout of your web pages. Looking at other peoples sites can be helpful at this point. Take notice of what their layout looks like and what page elements they have. One more piece to realize, not all sites are created equally. Some people use software that does most of the work for them, all they do is enter the text. This is different than using something like Dreamweaver, where you are actually building the individual elements.
With that said I would like to share a couple of places that talk about design elements to get your head around it.
- 9 Essential Principles for Good Web Design
- Simplicity in Good Web Design : Advantages & How -to
- Advanced Common Sense (Author Steve Krug wrote the book about how to make web pages that people will be able to use)
- World Wide Web Consortium which oversees the way the web is built, and the standards its built on.
One of the things that you need to think about as you design is who is your audience and what type of technology might they be using to access your site? As you think about this it can be helpful to take out a piece of paper and begin to sketch out the pages that you'd like to create and where the navigation for those pages will be. This way as you begin to build your site you will have all the elements to create a simple template to use.
Beginning Pages and Organization
One of the nice things about Dreamweaver is that it helps you organize your files in a way that will minimize your headaches as your create it. First along the right hand side of your screen you should notice a section called Files that looks like this.
This is will show all of the files that you have created or are using in your site. Since everything that you are creating has to be uploaded to a web server at some point and time you will want to make sure that anything you have is included in this folder. A few general things that I like to do even before creating my pages is to create folders to hold all of my stuff. I usually create three folders called images, pages, and content. This way I can keep things organized so that I can find them later. To do this you can simply go to our area that shows our files, and then we can right click on site folder and choose New Folder and create your three folders. A quick point on naming files for the web, 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 (_). If you do use these characters it can cause problems.
Now we are ready to create our first page. So remember that sketch of your page find it so you can start the layout process. The first page for any website is the index page. This page is called either index.html or index.htm. So go ahead and click on File > New and you will presented with a screen that looks like this
This window shows you the variety of different types of pages that you can create. There are some basic templates that are available to you so you can pick something that makes sense to use as it relates to your initial design, or simply start with a blank page and build your own template. Once you have chosen the page type you will be presented with your selection. At this point it is a good habit to save it, so at this point we will want to go to File > Save and since this is our first page, and what will become our home page we will want to name it index.html. Another good habit to get into is giving the page at title 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.
300px You will want to add something like Mr. OBrien's Social Studies: Home Page where it says untitled document.
Now that you have your first page what I like to do is create all of the navigation that I am going to have and then create the pages that correspond to the navigation. So if we take my Social Studies class example on of the links I might have is to our course documents, one to our syllabus, and perhaps one to our class calendar. So I take the time to create these navigation links so that I can then quickly create pages after that.
Creating the Index Page
Since Dreamweaver offers a lot of templates you can simply choose one and get started by replacing their content with your own. The following directions look at a way to create your own page. This uses the concept of using tables to create structure. This isn't the best way to do this, but is an effective practice if you don't have an understanding of CSS and other web tools.
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. There are multiple ways to insert content within your web page one of the simplest is to use the Insert window that is part of the Dreamweaver application.
We will be referring to this as we begin to build our page. One helpful strategy to organize the page is to insert a table inside of the page. Click on the icon labeled Table which will open another window, which will give you a selection of options to create the table. I usually set the number of columns and rows one more than I think I need. So if I want to create a two row layout I would create a three row table, and the same with the columns. I also tend to work with percentages rather than pixels, as a beginning web designer this is much easier to work with. If you'd like to add borders to a table you can choose to do this, as well as either cell padding or spacing. Once you have all of these setting to your liking click OK. 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 Table 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,300px
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.
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.
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.
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.
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. Since you already have a first page created often times the easiest way to create a second is to use the Save As file command, which allows you to take your index.html page and save it as something else. The reason to do this is that it allows you to create an exact replica of what you already have so you are able to
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.
Uploading Files to a web server
The following section will totally depend on how the web server is set up to accept connections from Dreamweaver. There are some common ways that people connect to a web server. The first is through FTP (file transfer protocol), the next is via network shares, also referred to as network drives, and sometimes they are connected by something call WebDav. Each of these is slightly different in what needs to be entered into Dreamweaver.
To set up your web server for your web page the first thing that you will want to do is in your file browser window
you will want to change from Local View to Remote View, where you will be prompted to Define a remote site. When you click on the Define a remote site link you will be taken to a screen where you can add a server, by clicking the plus sign.
When you click the plus sign it will open another window where you will add the information about the server. For example the FTP fields you might get from your web hosting company would look something like this;
Server Name: My Site (this is something to keep track of things that you create)
FTP Address: myhosting.com
root directory: (you can leave blank)
web url: http://www.mysite.com
Once you have the information in there, click the Test button just to make sure that everything connects and if you have no errors go ahead and click save. Now you can upload your files. To do this you will want to click on the connecting button on your file browser window, which looks like the electric plug. Then highlight the files you'd like to upload and then click on the Up arrow, which will send the files to your web server. If you get a message about dependent files such as this
in most cases you will want to say Yes, as you want any files that go along with your page to be uploaded as well. Remember anytime you make changes on your local computer you will have to upload the new file to your web server, as it will have the old file.
Adding Interactive Media to Your PagesIn DreamWeaver MX you have the ability to add Flash buttons and some other interactive media, without having to leave the DreamWeaver program. If you look at the tool bar at the top of your page you will notice that there are tabs along the top. One tab is called Media. If you click on this tab your icons on the toolbar will change. With the Media tab selected you should see a toolbar that looks like the following image.
- Flash Elements- These would be movies you have created in Flash
- Flash Button- This allows you to easily add a nice looking button to your page
- Flash Text- This allows you to easily add Flash text without leaving Dreamweaver
- Shockwave- This allows you to add Shockwave files that you would have created outside of DreamWeaver
- Applet- If you have some Java programming background you can choose to add Java Applets
- Param- This deals with more advanced web development and helps create parameters for media
- ActiveX- This is used to add Microsoft ActiveX controls to media, another advanced option
- Plugin- This is what you want to use when you would like to add a movie and make it play when the page opens
Adding Flash ButtonsIf you want to jazz up your site using flash buttons DreamWeaver makes this easy. First place your cursor where you would like to add the button. Then click on the Flash Button icon in the toolbar. This will open a menu that looks like this.
First you will want to decide on the style of the button. In this example I picked StarSpinner. Next you will want to fill in the Button text that you want to appear. china phone
For this example I created a classroom policies button. You can change the size and kind of font here if you like. Then simply browse to the page that you would like to link the button to. You will want to make sure that you give the button a name that makes sense for later use. Then click Apply if you would like to see how it appears on your page before clicking OK. When you are sure it looks satisfactory to you click OK. You can always change the way the button looks in the future if you would like.
If you want to have movies or audio files on your web page the easiest way to do this is save them to a specific folder and then link to the file itself. This will allow the user to manipulate the page in a way they would like. Whether it is simply opening the file or downloading it.