This tutorial provides you with a foundation for working with Adobe Dreamweaver page management. It is the second lesson in the Adobe Dreamweaver CC Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.
Dreamweaver contains many features to assist you in building pages for your site. For example, you can define properties for pages, including titles, background colors or images, as well as default text and link colors.
The first step for creating a new page correctly was taken when you defined the site in the last exercise. By defining the root folder, Dreamweaver will always create new pages in your site automatically. These pages are now visible in the Files panel in the lower right of your screen.
If your Files panel does not look the same as it does here, choose Window > Workspace Layout > Reset ‘Compact’.2 Click the Folder icon ( ) to the right of the Local Site Folder text field to navigate to any pre-existing files. In the next step you will locate the lesson files we have provided for this chapter.
1 Choose File > New. The New Document dialog box opens.
2 You can create a new page using a predesigned layout, or start with a blank page and build a layout of your own. In this exercise, you’ll start with a blank page while in later lessons you will get a chance to explore some of the other options. Click the Blank Page category on the left side of the New Document dialog box.
3 In the Page Type column, you can select the type of page you want to create (for example, HTML, PHP, and so on). Select HTML if it is not currently selected.
Fixed creates a layout with columns that do not resize based on the user’s browser settings. They are measured in pixels.
Liquid creates a layout with columns that resize if the user resizes the browser window, but not if the user changes the text settings.
HTML5 creates a fixed layout that uses the new HTML5 elements such as <header>, <section> and <article> among others.
4 Click <none> in the Layout column to build the page without using a prebuilt layout.
5 Click the DocType menu in the lower-right corner. This DocType drop-down menu defines the document type for different versions of HTML including XHTML 1.0 Transitional and HTML5. HTML5 is the default setting and is suitable in most cases, so be sure to bring it back to this option.
Choose HTML5 as your DocType.
Your new, blank HTML page.
You should get accustomed to saving pages to your local root folder early and often. It is very important that you store all your site’s resources in one main folder on your hard drive so that the links you set on your computer will work when your site is uploaded to a server.
1 Choose File > Save.
2 In the Save As dialog box, Dreamweaver should have automatically opened your dw02lessons folder which was defined earlier in the Site Settings.
If this is not the case, navigate to your desktop and locate the dw02lessons folder.
3 In the Save As text field, name your file about_us.html.
Notice that even though the file is for the About Us page, you are naming it about_us.html. When naming your files and directories, avoid using spaces, periods, slashes, or any other unnecessary punctuation, as doing so will likely cause the server to misdirect your files.
4 Click Save to save the page in your local root folder. In the Files panel note that the file about_us.html has now been added. Again, site settings are very important in Dreamweaver because files are automatically saved and organized based on having a site definition.