Intro & Account Setup | Getting Started With Dreamweaver MX | Program Layout | Making a Page | Page Properties
Text and Text Properties | Cascading Style Sheets | Tables | Images | Links
Publishing | Templates | Collaborating | Outside Resources

Creating a New Page
When Dreamweaver MX has loaded, a new blank page usually appears with it. If not, you can get a new blank web page by going to the menu bar and selecting "File," and then "New" (shortcut “Ctrl+N”).

A window called “New Document” that lists different types of blank documents will appear. If you are starting a new page, simply select “Basic Page” from the “Category” column, and “HTML” from the “Basic Page” column. Click on “Create” to begin a new blank page.

Opening a Page
Websites are coded in what is known as HyperText Markup Language, or HTML. That said, the file types of web pages on the Internet are ".html." Web browsers take these HTML files (which we would see as coding), and display it as a graphical user interface, a web page, for users to navigate. To open a web page (an .htm or .html document) in Dreamweaver MX, go to the menu bar and select "File," and then "Open."

Use the window that pops up to browse through your computer to open the file. When you find the file you want to open, click on the “OK” button.

NOTE: Dreamweaver MX is capable of opening any kind of website file, regardless of whether or not it was originally created in Dreamweaver MX. For example, if you have an HTML file that you have coded yourself by hand, you can also open this in Dreamweaver MX and edit it in WYSIWYG fashion. If you are familiar with the technology involved, you can also open ".shtml" files, which may have been coded with SSI.

Saving a Page
In Dreamweaver MX (and any other computer application), you should always make sure to save your work on a regular basis. To save a file in Dreamweaver MX, go to the menu bar and select "File," and then "Save As."

Web Pages and Their Relation to Each Other
The first page of a website is referred to as the "index page." It is given its name, actually, by the filename given to it. All main pages are named "index.html." Why is this? If you were to enter "http://www.yahoo.com" into your web browser, what you are actually telling it to look for is "http://www.yahoo.com/index.html". The index file is loaded, immediately, in all directories on the web. That's why it's important for you to make your main page an index file (by saving it as "index.html").

You can name whatever other pages you create however you like. For example, most pages that contain links to other websites are saved as "links.html" (or, alternatively, you can create a new folder in the same directory as your "index.html", name that new folder "links," and save your links page in the new directory as "index.html").

For example, your main page's URL might look like this:

http://www.eden.rutgers.edu/~yourusername/index.html (where "yourusername" is the eden name you signed up for). Again, alternatively, you could enter in "http://www.eden.rutgers.edu/~yourusername" and it would still load up the "index.html" file.

Eventually, you'll have enough pages that you'll want to "link" back and forth between them all. Be sure to name files appropriately, and keep them all organized. Save all files in the same folder. Don't use special characters when coming up with file names: stick to the basics (lowercase letters, numbers, and the underscore ( _ ) character); definitely do not use spaces in filenames. This can seriously confuse some web browsing programs and servers.

Multiple Pages With Similar Style
You might feel like you're getting a little ahead of yourself on this page, but that's OK! While you haven't yet learned how to format pages, you have learned how to create and save them, which is really the only essential factor for understanding how to work with multiple pages that have similar styles to them.
You will have to have multiple web pages on your site, most likely, and you'll want them all to have the same layout and navigation, but different content. There are several reasons why. The major reason is that you want your site to have a consistent look and feel. If a visitor were to go between different pages of your site that looked totally different, she or he may think it's a different site and become confused.

There's a great (and simple) way to save multiple pages of your web site while retaining the same navigation and layout as your original web page. (Later on in this tutorial, you will learn how to make "Templates" in Dreamweaver MX. Using templates is a different way in which you can save multiple pages with the same layout and edit content within those layouts. Template use is most appropriate for web sites with many web pages, or for projects that have several people collaborating on the site.)

Let's pretend that you have one page of your site already complete. Let's also say, for example, you have sections in your site called "Image Gallery" and "Additional Online Resources" (the former being a page filled with images, and the latter a page filled with links to other websites). In your navigation menu bar on your one completed web page, you have those links linked to documents called "images.html" and "additional_online_resources.html" (you haven't learned how to make links yet, but you're still OK!)
However, you haven't made these pages yet. How are you going to make these pages, and keep the exact same style as your one, already completed page? Will you have to create the layout, again, completely from scratch? Of course not!

With your one completed web page open in Dreamweaver MX, go to "File", and select "Save As." Here, you can save this web page as "images.html" (or whatever web page name you plan to give one of your sections). You can repeat this step to save "additional_online_resources.html" and any other web pages you want to have in your site.

Remember, in order for your web site navigation to work, you must save your files as the file names you specified when making the links for your navigation bar.

By opening these web pages in Dreamweaver, you can add and edit the content for those pages. When you saved the files from the original web page you created, you simply created copies of that one page, but with different file names. Since you don't want multiple web pages of the exact same thing, you need to edit the newly saved web pages, including changing the titles on the pages, images, and text. However, the over-all design is still the same!

>> next