Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.
In this lesson, you will begin adding simple content to an HTML page.
Lesson Goals
When you choose to create a new HTML document via CTRL+N or File > New..., you get the following New Document dialog box:To start with a basic blank HTML page, you should select HTML for the Page Type. But what about the DocType? The DOCTYPE is used to specify the "flavor" of HTML you want to use.
It used to be pretty important to understand the different DOCTYPEs, but with the introduction of HTML5, there is an easy way out, which we highly recommend as it is both simpler and backward compatible. DOCTYPEs differ, so just go with the new HTML5 DOCTYPE as it's easier to remember.
It is possible that you are working on a development team or project that has standardized around one of the other DOCTYPEs. If so, you may want to stick with that one. However, unless otherwise instructed by a manager or site administrator, you should choose the HTML5 DOCTYPE.
The title of an HTML page does not show up on the page itself, but it is important to include for a couple of reasons:
In Dreamweaver, you enter the page title in the Document Title field on the Properties panel:
To illustrate, let's add a title to ClassFiles/dreamweaver-cc/Exercises/hello-world.html:
The paragraph is the default format for a block of text. Just like in a word processor, when you press Enter at the end of one paragraph, Dreamweaver begins a new paragraph.
To illustrate let's add a paragraph to ClassFiles/dreamweaver-cc/Exercises/hello-world.html:
HTML supports six levels of headings. Heading 1 is the most important and Heading 6 is the least important. Like paragraphs, headings are block-level elements, meaning that they affect the whole line of text (or multiple lines if the heading is long enough to wrap). Later in the course, we'll see how you can control the look of headings, but by default, they are bold and the size of the text changes based on the heading level:
There are several ways to add headings in Dreamweaver, but the most common is to use the Properties panel. To illustrate:
To add a new paragraph after a heading, place the cursor at the end of the heading text and press Enter.
Blockquotes are used to designate quoted blocks of text. In Dreamweaver, blockquotes are added by clicking on the Blockquote icon in the Properties:
To remove the blockquote, click the Remove Blockquote icon () to the left of the Blockquote icon.
To illustrate let's add a blockquote to ClassFiles/dreamweaver-cc/Exercises/hello-world.html:
Dreamweaver users often use blockquotes incorrectly as a quick and dirty way of indenting paragraphs. You should not do this. Blockquotes should only be used to indicate that the content is taken from another source. The proper way to indent paragraphs for formatting purposes is to use CSS.
In this exercise, you will add content to your web page.
As we have discussed, when you press Enter in Dreamweaver, a new paragraph gets added. Sometimes it is desirable to have a hard return appear within a paragraph. In HTML, this is called a break. In Dreamweaver, you can add a break by pressing Shift+Enter.
Breaks should be used only for content such as poems or addresses. They are very often mistakenly used for formatting purposes only, use CSS alternatives to layout your basic content.
Special characters (i.e., characters that do not show up on your keyboard) can be added to your pages by choosing Insert > HTML> Character . If you do not see the character you are looking for - Insert > HTML> Character > Other... will allow you to choose more symbols.
In this exercise, you will make some modifications to /index.html.