New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating and saving a new document

From: Dreamweaver CS3 Essential Training

Video: Creating and saving a new document

Okay, now that we have our blank site created, let's take a look at how to do one of the most basic and common tasks in {italic}Dreamweaver,{plain} which is creating a new blank page. What you're going to find in {italic}Dreamweaver {plain} if you haven't figured it out already, is that there are lots of different ways to accomplish many different tasks in this program. For instance, I mentioned earlier that you can find almost all the objects under the Insert bar under the Insert menu. Off the top of my head I can think of three or four ways to create a new blank page in {italic}Dreamweaver.{plain} Do you have to know all the different methods for accomplishing the same task in order to use {italic}Dreamweaver {plain}to your advantage? Absolutely not. Throughout these movies I'm going to be showing lot's of different ways to do things, but I strongly encourage you to try them and figure out which methods work best for you and the way that you like to work.

Creating and saving a new document

Okay, now that we have our blank site created, let's take a look at how to do one of the most basic and common tasks in {italic}Dreamweaver,{plain} which is creating a new blank page. What you're going to find in {italic}Dreamweaver {plain} if you haven't figured it out already, is that there are lots of different ways to accomplish many different tasks in this program. For instance, I mentioned earlier that you can find almost all the objects under the Insert bar under the Insert menu. Off the top of my head I can think of three or four ways to create a new blank page in {italic}Dreamweaver.{plain} Do you have to know all the different methods for accomplishing the same task in order to use {italic}Dreamweaver {plain}to your advantage? Absolutely not. Throughout these movies I'm going to be showing lot's of different ways to do things, but I strongly encourage you to try them and figure out which methods work best for you and the way that you like to work.

If you are into key board commands, you might want to remember the ones you use most often. If you prefer the mouse you don't have to clutter your brain with keyboard commands and instead just click around the interface to do you work . So, in this movie I would like to show you some of the ways to create a new blank page in {italic}Dreamweaver CS3.{plain} At this point I have already created a new blank site and I can see empty folder sitting here in the files panel. Let me start by showing you my preferred method for creating a new page. I'm just going to come in here to the files panel and right-click, or control click if you have a one button mouse, on the main site folder and then choose New File. {italic}Dreamweaver {plain}generates a new blank page for me and prompts me to name it. So, let's say I am creating the home page of my site first.

So, I'm going to call this one "index.html" and there's my page. If I want to start working on it I just double click and off I go. The main advantage to this method of creating a page and the reason I prefer it over the others, is that it saves me a couple of steps. By, right-clicking on the files panel and creating my page that way, my page is automatically saved in my Local root folder, which is where I want to save all pages that have to do with my site. I don't have to worry about opening a new page and hitting File, Save and then naming my file and then navigating in to the Local root folder. If I make any changes to this page, like if I give this page a title of "Welcome to Teacloud", I can just choose File, Save or hit commander Ctrl + S and my files automatically save with out having to choose a save location because have already created that location when I right clicked on the Local root folder.

This is the fastest way to create a new blank page. So, there is my index page. Now, what's another way to create a page? Since I have my welcome screen open here, I can come under the Create New column and choose from several styles of pages here. I'm only really concerned with creating HTML pages right now, so I'll just click HTML to generate a new page. I do realize that I just said that I want to create an XHTML compliant page but I clicked HTML, I'll talk about that difference in the very next movie. For now, just notice that {italic}Dreamweaver {plain}has opened a brand new blank page for me and notice up top here is says "untitled". It sure looked like this was a faster way to create a blank page, all I had to do was click the HTML button and up popped this page, but the issue here is that, unlike the first page I created this page is not yet saved. When ever you create a new page using this method, you should first save it, that way {italic}Dreamweaver {plain}will know exactly where the page will reside in your site and will be able to properly write the code for pages and images linked to and prompt his page. So, I'll choose File, Save.

I want to make sure that I am saving this in my Local root folder. {italic}Dreamweaver {plain}should and I stress should, automatically display your Local root folder here which it is, it's got my teacloud_site_04 folder selected here, but you want to make sure to check and make sure that's in fact where you are. Remember, every page in your site needs to be in your Local root folder. If you're not in that folder, you can just click the Site Root button here and it will automatically take you there. Now, we need to name this file, let's say this is going to be the page for methods on brewing teas. I'll just call this, "brewingtea.html." and we'll click Save. Since you should always give your page a title, we'll call this "teacloud.com: brewingtea". I always like to put the name of the site in the page title just incase my viewers bookmark the page, then they'll know which site the book mark refers to. And, we'll save that again.

So, that's the second method of creating a new page, using the welcome screen. If you have chosen not to have the welcome page display in {italic}Dreamweaver {plain}or if you just want some more options for creating a page. Another method is to choose File, New or press Command N or Ctrl + N on windows and then you will see this new document window appear. In here you get tons of new options to create all sorts of different pages and to chose from several different types of Templates. You can choose from the basic categories of Blank Page, Blank Template, Page from Template, Page from Sample and other and on and on.

Again, I'm just going to be working with a basic HTML page here. So, I have Blank Page selected, HTML selected, for my layout, I don't need any of these pre-designed layouts. I'll click Create and again {italic}Dreamweaver {plain}generates a blank document for me just like the welcome screen did. So, I should save this right away. One thing you might want to occasionally do when you save your pages, is to save them in to a sub folder within you main Local root folder, as long as everything is in your main Local root folder you can have as many sub folders as you like, you don't need to use any sub folders if you don't want to, {italic}Dreamweaver {plain}will still be able to keep track of things even if you throw all of your images and pages and style sheets into your main folder.

The question is weather you will be able to keep track of things. I recommend that you organize your self by placing certain pages and images into their own folders, if you feel that you can easily categorize these pages and images together. For example, let's say that the page I just created is going to be the main page that tells the history of tea. I am going to have other pages about tea as well, so it makes sense for me to create an about tea folder. So, I'll click the New Folder button to create a new directory in my Local root folder -- If you're on windows look for a little yellow folder icon that looks like it has a little star bust on it, that's going to be your create New Folder icon in windows.

I'll call this folder "about_tea", remembering not to use any spaces in my naming conventions. Since the page I'm saving is going to be the main page in this about_tea folder, I'm just going to name this page "index.html". Remember, each folder can have it's own default index page. So, there it is, we'll save that and of course we will give that page a title "teacloud.com: the history of tea". We'll go ahead and save that and we can go ahead and close the page. Notice over here in the Files panel, that it continues to update it self and list all the new folders and files that I have created.

There's the brewingtea file that I created. There is the about_tea folder and there's the Index page sitting inside of it. I'm just using {italic}Dreamweaver {plain}to manage my site folder. If I go out and look at the actual site folder itself, you can see here are all the files that have been created, just like I see in {italic}Dreamweaver.{plain} So, there you have a couple of methods for creating new pages as well as new folders. Again, I prefer to do all of that from the Files panel instead of choosing File, New or starting from the welcome screen. It cuts out the step of having to navigate through your site folder to save your pages.

Let me just give you a couple more quick examples to illustrate how easy it is to use the files panel. Let's say I want to create another page to go inside the about_tea folder that I just created. I'll just right click on there, choose New File and it created a new untitled page inside that folder, because I right clicked on that folder, we'll call this one "fields.html" and that's done. If I want to create a new sub folder in my main Local root folder, I'll just right click the main Local root folder and choose New Folder, and the folder appears in the main root folder because that's where I right-click, we'll call this one "products".

If I want to add some pages to this folder, I can just right click on that folder, choose New File, we'll call this "kettles.html", right-click on that folder again, New File, and we'll call this one "teas.html." You see how I never had to leave the files panel. Everything is named and saved in the right place. I should just go through and give each file a page title for the ones I haven't done so, but that's just a simple matter of opening the page and giving it a title, saving it and closing it again.

That's how you go about creating new pages in {italic}Dreamweaver CS3.{plain}

Show transcript

This video is part of

Image for Dreamweaver CS3 Essential Training
Dreamweaver CS3 Essential Training

129 video lessons · 86865 viewers

Garrick Chow
Author

 
Expand all | Collapse all
  1. 1m 12s
    1. Welcome
      1m 12s
  2. 21m 0s
    1. HTML vs. XHTML
      3m 4s
    2. What is CSS?
      3m 48s
    3. What is XML?
      2m 11s
    4. What is DHTML?
      1m 9s
    5. What is JavaScript?
      1m 23s
    6. File naming conventions
      3m 22s
    7. What is an index page?
      6m 3s
  3. 46m 18s
    1. Setting up your workspace
      2m 39s
    2. The Welcome screen
      4m 11s
    3. Windows and Mac differences
      3m 18s
    4. The Insert bar
      4m 38s
    5. The Property Inspector
      1m 50s
    6. The Document toolbar
      6m 6s
    7. The Document window
      9m 11s
    8. Panels and panel groups
      6m 58s
    9. Saving workspace layouts
      2m 22s
    10. Defining a default browser
      5m 5s
  4. 24m 59s
    1. Defining a site
      9m 5s
    2. File and folder management
      3m 11s
    3. Understanding path structure
      3m 17s
    4. Adding content to a site
      6m 6s
    5. Creating a site map
      3m 20s
  5. 38m 39s
    1. Creating a new blank site
      6m 0s
    2. Creating and saving a new document
      7m 54s
    3. About DOCTYPE
      3m 59s
    4. Inserting images
      9m 26s
    5. Inserting text
      3m 35s
    6. Aligning text and images
      4m 9s
    7. Inserting meta tags
      3m 36s
  6. 45m 58s
    1. Link basics
      6m 4s
    2. Linking with Point to File
      5m 18s
    3. External links
      4m 15s
    4. Creating email links
      5m 49s
    5. Named anchors
      7m 37s
    6. Linking to a file
      7m 35s
    7. Image maps
      9m 20s
  7. 1h 8m
    1. About CSS
      4m 52s
    2. Anatomy of a style sheet
      4m 10s
    3. CSS and page properties
      10m 11s
    4. Moving an internal style sheet to an external style sheet
      6m 46s
    5. The CSS Styles panel
      3m 48s
    6. CSS selectors
      2m 37s
    7. Type selectors
      12m 13s
    8. ID selectors
      10m 21s
    9. Class selectors
      5m 42s
    10. Creating rollovers with pseudo-class selectors
      7m 22s
  8. 42m 54s
    1. CSS vs. the Font tag
      2m 42s
    2. Formatting text with the Property Inspector
      8m 41s
    3. What measurement should I use?
      3m 15s
    4. Managing white space with margins, padding, and line height
      8m 34s
    5. Using font lists
      5m 45s
    6. Aligning text
      2m 47s
    7. Creating lists
      5m 8s
    8. Creating Flash text
      6m 2s
  9. 43m 19s
    1. About tables
      1m 28s
    2. Tables in Code view
      2m 36s
    3. Creating and adding content to tables
      7m 40s
    4. Changing table borders with XHTML
      5m 46s
    5. Coloring tables with XHTML and CSS
      6m 41s
    6. Aligning table content
      6m 39s
    7. Sorting tables
      3m 6s
    8. Setting table widths
      4m 48s
    9. Creating rounded-corner tables
      4m 35s
  10. 28m 22s
    1. Dreamweaver's layout tools
      3m 8s
    2. Tracing images
      4m 58s
    3. Adding AP div tags
      7m 29s
    4. Working with Layout Tables
      6m 55s
    5. Adjusting table widths and nesting tables
      5m 52s
  11. 16m 19s
    1. What is a device?
      3m 14s
    2. Attaching a printer-friendly style sheet
      3m 5s
    3. Styling for print
      7m 41s
    4. Adobe Device Central
      2m 19s
  12. 29m 54s
    1. Rollover rules
      3m 31s
    2. Creating simple rollovers
      5m 36s
    3. Creating disjointed rollovers
      7m 12s
    4. Creating navigation bars with multiple states
      9m 21s
    5. Creating Flash buttons
      4m 14s
  13. 26m 32s
    1. Viewing the code
      6m 9s
    2. Editing in Code view
      3m 0s
    3. The Code toolbar
      5m 11s
    4. Working with Code Collapse
      4m 27s
    5. The Quick Tag Editor
      2m 20s
    6. Working with snippets
      5m 25s
  14. 32m 45s
    1. About forms
      3m 23s
    2. Adding text fields
      9m 52s
    3. Adding checkboxes and radio buttons
      5m 37s
    4. Adding lists and menus
      6m 5s
    5. Submitting form results
      3m 23s
    6. Styling form elements with CSS
      4m 25s
  15. 23m 17s
    1. Opening a new browser window
      9m 38s
    2. Creating a popup message
      2m 50s
    3. Validating text fields
      2m 42s
    4. Getting more behaviors
      7m 2s
    5. Removing extensions
      1m 5s
  16. 14m 58s
    1. External image editor preferences
      3m 18s
    2. Built-in image editing tools
      3m 11s
    3. Roundtrip editing from Dreamweaver to Fireworks or Photoshop
      4m 39s
    4. Copying and pasting
      3m 50s
  17. 34m 16s
    1. Templates in action
      5m 12s
    2. Creating a new template
      6m 36s
    3. Applying templates
      3m 36s
    4. Modifying a template
      1m 40s
    5. Adding repeating regions
      3m 28s
    6. Working with repeating regions
      3m 13s
    7. Adding optional regions
      3m 34s
    8. Creating a library item
      3m 48s
    9. Modifying a library item
      3m 9s
  18. 13m 2s
    1. Using the History panel
      4m 24s
    2. Saving History steps as commands
      3m 25s
    3. Using Find and Replace
      5m 13s
  19. 14m 44s
    1. W3C accessibility guidelines
      4m 6s
    2. Accessibility preferences
      1m 29s
    3. Inserting accessible images
      3m 2s
    4. Inserting accessible tables
      2m 53s
    5. Inserting accessible form objects
      3m 14s
  20. 26m 17s
    1. About media objects
      2m 6s
    2. Linking to audio and video files
      5m 56s
    3. Embedding audio and video files
      7m 7s
    4. Setting parameters
      4m 27s
    5. Inserting Flash content
      2m 37s
    6. Inserting Flash video
      4m 4s
  21. 28m 47s
    1. Getting site reports
      3m 35s
    2. Checking links sitewide
      3m 30s
    3. Signing up with Tripod
      6m 36s
    4. Entering remote info
      4m 13s
    5. Publishing your site
      5m 41s
    6. Updating and publishing pages
      5m 12s
  22. 44s
    1. Goodbye
      44s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.