Creating and Saving a New Page


After your local site is defined, you are ready to start working with and creating Web pages. Whenever you create a new page, the first thing you should do is save the document.

1.

Choose File > New. The New Document dialog box appears.

Tip

You can use the keyboard commands Cmd+N (Macintosh) or Ctrl+N (Windows) to open the New Document dialog box. If you want to bypass the New Document dialog box and create a new document immediately whenever using these keyboard commands, choose Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows), select New Document from the Category list, and uncheck the Show New Document Dialog on Command+N (Macintosh) or the Show New Document Dialog on Ctrl+N (Windows). This section also provides you with the option to change the default document type as well as the extension and encoding. The lessons in this book assume that you are using the defaults. Clicking the Preferences button at the bottom of the New Document dialog box is another way to open the Preferences dialog box.

The New Document dialog box opens with two tabs: General and Templates. In this exercise, you are creating a new HTML (Hypertext Markup Language) page. The option to create a new HTML page is located in the Basic category of the General tab. These selections are the defaults and might already be selected for you.

The New Document dialog box also gives you additional options for creating a variety of page types. The Basic Page category offers a number of options in addition to HTML, including CSS (Cascading Style Sheets), JavaScript, and XML. Other available page type categories include Dynamic Pages (that use languages such as ASP, ColdFusion, and PHP) and Page Designs (that you can use as a starting point when creating your own site). You can access specific page types by choosing from the list of categories in the left column of the dialog box that includes Dynamic, Templates, CSS Style Sheets, Framesets, and Page Designs. You won't use any of these additional page types in this exercise, but you should be aware of them. The contents of the middle column of the dialog box change depending upon the category selected in the left column.

Understanding XHTML, XML and Document Type Definitions

Behind the visual appearance of a Web page is code, called a markup language, that is used to produce what a visitor sees in their browserthe markup describes the structure and appearance of a page by labeling elements such as text and images with instructions, in the form of tags and their attributes, as to how those elements should be displayed. Hypertext Markup Language (HTML) is currently one of the most well-known markup languages; however, HTML is limited in nature, particularly in that new features are generally not backward-compatible, and there are a wide number of compatibility issues with HTML for cross-browser use. HTML is an older markup language that is being phased out of use because it doesn't meet current Web standards, nor does it have the potential to evolve to match those standards.

Extensible Hypertext Markup Language (XHTML) replaces and extends the capabilities of HTML by reforming HTML as an Extensible Markup Language (XML) language. XML markup emphasizes and facilitates the separation of structure, content, and presentation by specifying the content and structure of a page, but not the appearance or presentationthe definition of all presentation is handled separately through other means, such as CSS.

The advantages of using XHTML include both backward- and forward-compatibility, operability on alternate Web access devices such as cell phones or handheld computers, and the potential for extensibility. XHTML 1.0 Transitional is a version of XHTML that allows the use of some HTML elements that are deprecatedmarked as obsolete by the World Wide Web Consortium (W3C), which develops Web standards to ensure compatibility throughout the industryand therefore not available in stricter versions of XHTML. Because allowing these deprecated elements enables backward-compatibility through the conversion from HTML to XHTML, XHTML 1.0 Transitional is currently the recommended markup language for Web development.

The use of these languages is defined through the Document Type Definition (DTD). Although invisible to the visitor, the DTD is located at the beginning of the code that comprises the Web page. The DTD declares the syntax of the markup language for the pagethat is, it defines how the browser or other Web access device should interpret the page.


Note

By default, Dreamweaver uses XHTML 1.0 Transitional as the Document Type Definition in all new HTML documents unless you select a different type. You can change the DTD of a new document in the New Document dialog box by choosing the desired type from the DTD menu at the bottom of the dialog box. Throughout this book, you should use the default XHTML 1.0 Transitional DTDdo not change the DTD. You can convert between HTML and XHTML by choosing File > Convert and selecting the type to which you want to convert.

After you click the Create button, a new untitled XHTML document appears, and the Start page closes automatically.

Tip

You can also create a new document directly from the Start page by selecting the file type (such as HTML, as you did in this exercise) from the Create New column. A new document of the type you selected appears, and the Start page closes.

2.

Click the General tab in the New Document dialog box and choose Basic Page in the category list. Choose HTML in the Basic Page list and click the Create button.

3.

Choose File > Save and locate the folder html_docs in Lesson_01_Basics, in which you will save this file. Type yoga.html in the Save As (Macintosh) or File Name (Windows) field and then click Save.

Don't wait until you have text or graphics on the page to savesave your pages as soon as you open new documents. Provided that your file is saved first, when you import graphics or other media, all the paths that reference where those elements are located in your site will be made properly. If you don't save your document, a path name beginning with file:// is used that describes the location of the element you are inserting relative to your hard disk. If you try to insert an object without first saving the document, Dreamweaver warns you that it needs to use a file:// path name for the element. These file:// paths do not work on remote servers because they describe the location of files specific to your computer.

Tip

You can use the keyboard commands Cmd+S (Macintosh) or Ctrl+S (Windows) to save your document. Always remember to save often so you won't lose a lot of work if your computer crashes for any reason.


Macintosh Users: Dreamweaver automatically adds the extension .html to the filename of HTML documents in the File Name text fieldyou must leave this extension or specify a different one for the document to be saved with an extension.

Windows Users: Dreamweaver automatically adds the extension .html to the filename, of HTML documents, when you save if the extension isn't specified in the File Name text field. You can also specify the extension yourself.

Note

Dreamweaver adds the default extension of any file you create. For example, if you create a Cascading Style Sheet file, Dreamweaver will add .css to the filename.


You should always save your documents with the extension .html. If Dreamweaver is giving you a default of .htm, you can change the default by choosing Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows) and selecting the New Document category. The default extension is displayed in a text box. Throughout this book, the extension .html is used in the examples and materials included on the CD-ROM, and the exercises assume that you will be using the default extension.

Tip

The .htm extension is a remnant from the bad old days when Windows could only handle 3 character file extensions. Unless you think that someone with Windows 3.1 is going to be working on this site, there's no reason to ever use the .htm extension as it's generally considered to be unprofessional.


New documents are given a default name of Untitled-1 .html in the Save As text field, with the numbers increasing sequentially for every new document that is created.

Tip

The New Document and Save options are also available on the Standard toolbar, which you can open by choosing View > Toolbars > Standard. Toolbars other than the default document toolbar appear as you add or move them only on the active document; changes are not reflected in other documents.


File-Naming Conventions

Keep in mind that naming your files for use on a Web server is a little different from naming your files for use on your hard disk. It is helpful to know what operating system the server will be usingthe most common systems are Unix, Linux, Windows NT, and Mac OS X. The naming structure is different on Windows from the other *NIX-based operating systems. Unix, for example, is case-sensitive, which means that myfile.html does not equal MYFILE.HTML. Using all lowercase names for your files makes naming files simpler and helps you maintain consistency. You should use only alpha characters (AZ) and numbers (09) to name your files. Here are other important conventions to follow for both filenames and folder names:

  • Spaces. Don't ever use spaces in filenames. Use the underscore or hyphen characters to simulate a space if you need to separate words. Problems can arise because browsers substitute %20 for spaces.

  • Special characters. Don't use any special characters, such as ?, %, *, >, or /. Don't use commas.

  • Numbers. Avoid beginning your filenames with numbers.

  • Length. Keep folder names and filenames as short as possible. Remember that the folder name becomes part of the URL you type to get to the page.





Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net