Embed Size (px)
Citation preview
Part 2 - Create the page structure–Build an
HTML structure for the page using the Insert
panel, which generates the necessary code
automatically.
What will I learn?
Welcome to the second part of this tutorial series on creating your first website. In this part, you’ll build the HTML
structure for the page using the Insert panel, which generates the necessary code automatically. Although Dreamweaver
creates the code on your behalf, it’s important to keep an eye on the HTML structure that’s being created to ensure
elements are correctly nested. After building the basic structure, you’ll add text, images, and links to the page. At this
stage, the result will look very bland, but getting the structure right is an essential prerequisite to styling the page in
parts 3 and 4 of this series.
Evaluate the task ahead
Typically, the first steps to creating a website begin on a piece of paper or in a graphics-editing application such as
Adobe Fireworks or Adobe Photoshop. Graphic designers usually sketch out a piece of comprehensive artwork (also
known as a comp) for the website to make sure that the initial ideas for the site meet with their client's approval.
Examine the comp
This tutorial provides you with the completed and approved comp for the home page of Bayside Beat, a fictional guide
to San Francisco (see Figure 1). As the web designer, your job is to transform the comp into a working web page. There’s
a copy of the comp, bayside_beat_comp.jpg, in the first_website_pt1 folder that you unzipped to your hard drive in Part
1 of this tutorial series, Setting up your site and project files.
Figure 1. A comp of the Bayside Beat home page layout
Increasing numbers of people are accessing websites on a wide range of screen resolutions from mobile phones through
tablets to laptops and desktops. Creating a website design that adapts to different screen sizes requires considerable
CSS knowledge and skills. To keep this tutorial relatively simple, you’ll work with a display designed primarily for a
desktop or tablet.
What to do if things go wrong
The instructions throughout this tutorial series try to anticipate common errors, and each part contains a ZIP file
showing how the code should look when you have finished. If your page doesn’t look the way you expect, use the
Dreamweaver File Compare feature to compare your files with the download versions. To use File Compare, you need a
third-party file comparison utility, such as WinMerge for Windows. On a Mac, you can use the file comparison tool
in TextWrangler. Both are free.
The most common causes of mistakes are accidentally skipping a step in the instructions, or mistyping a CSS selector.
Retrace your steps to see where you might have gone wrong. Sometimes, the best idea is to start again from scratch. It
can be frustrating, but you can learn a lot from your mistakes.
Of course, if you do get stuck, call for help. The best place is in the Dreamweaver General Discussion Forum, where you’ll
find experts and beginners alike helping each other.
Create and save a new page
You'll start by creating a new page, and saving it in the bayside_beat local root folder of your website.
Note: If you haven't created the bayside_beat local site folder, see Part 1 of this tutorial series, Setting up your site and
project files, for instructions.
1. In Dreamweaver, make sure the Bayside Beat site is selected in the Files panel (see Figure 2).
Figure 2. Before starting work on a site, select it in the Files panel.
2. Select File > New.
3. In the Blank Page category of the New Document dialog box, select HTML from the Page Type list, and <none>
from the Layout list (these two options should already be selected by default).
4. Check that DocType is set to HTML5 and click Create.
Note: HTML5 is the new standard of the markup language for web pages, and is the default in Dreamweaver CC.
Although the standard isn't scheduled to be finalized until late 2014, it's already stable. The HTML5 DocType is
backwards compatible with all web browsers in current use. The only caveat is that you need to attach a JavaScript file
to your pages so that Internet Explorer (IE) 6–8 apply styles to the new semantic HTML5 tags, such
as <header> and <footer>. This is explained later in the tutorial series.
5. Select File > Save, or press Ctrl+S (Windows) or Cmd+S (Mac OS X).
6. In the Save As dialog box, make sure you're in the bayside_beat folder that you defined as the site's local root
folder. Dreamweaver should have selected this automatically, but if a different folder is selected, click the Site
Root button at the bottom of the dialog box (it's next to the Save button in Windows, but it's on the left in the
Mac version).
7. Enter "index.html" in the File Name text box (Windows) or Save As text box (Mac) and click Save. The file name
now appears in the tab of your new document.
Note: Most web servers treat index.html as the name of the default file in a folder, making it a good choice for a site's
home page. It's also common to use index.html as the name of the main file in subfolders, shortening the
URLhttp://www.example.com/products/index.html tohttp://www.example.com/products.
8. In the Document Title text box at the top of your new document, type "Bayside Beat: Cable Cars" (see Figure 3).
Figure 3. Add the page title.
Your site visitors will see this title in the browser's title bar or tab when they view the page in a web browser.
9. Click the page once to move the insertion point out of the Document Title text box. You'll see that an asterisk (*)
appears next to the file name in the document's tab. This asterisk indicates that a file has changed and that you
need to save the file if you want to keep the changes.
10. Select File > Save to save your page.
Build the basic page structure
Web pages are built using HTML, which defines the structure of the content. One of the basic building blocks of web
page layout is the <div> tag, which acts as a container for text, images, and other page elements, grouping them
together so they can be styled in a consistent way. There are special tags for headings, paragraphs, images, and so on.
HTML5 adds new tags, such as <header>, <footer>, and <article>. The new tags perform the same function as a <div>.
The difference is that they also specify the role of the element in the page. Most HTML elements have opening and
closing tags, with the name of the element between angle brackets. The closing tag has a forward slash before the
element name like this: </div>.
You use CSS to position these grouping elements by adding horizontal and vertical space around them (margins) or
inside them (padding). CSS is also used to change the color of text and backgrounds, add drop shadows and rounded
corners, as well as other artistic effects.
If you look at the design comp again, you'll notice that the page is divided into distinct sections. To keep the whole page
together to center it in the browser, everything needs to be inside an outer wrapper. These sections all correspond to
separate grouping elements that act as containers for the content inside of them, as shown in Figure 4.
Figure 4. The page can be divided into distinct sections, all nested inside an outer wrapper.
Insert <div> tags and other grouping elements
In this section, you’ll build the HTML structure using the Insert panel. It’s best to work in Split view because it’s
important to understand the underlying HTML code that Dreamweaver creates on your behalf.
1. Click the Split button at the top left of the Document window to reveal the underlying HTML structure that
Dreamweaver has already built for you (see Figure 5).
Figure 5. Open Split view to see the underlying HTML structure.
2. All the visible content of a web page goes between the opening and closing <body> tags. Make sure the
insertion point is between them, as shown on line 8 of Figure 5. If it isn’t, click anywhere inside Design view on
the right of the Document window. This ensures that the HTML code will be inserted in the correct place.
3. If it isn't already expanded, expand the Insert panel by clicking its tab or by selecting Window > Insert. (In the
Compact workspace [the default Dreamweaver workspace], the Insert panel is grouped with the Files panel on
the right side of the Dreamweaver interface.)
4. The Insert panel consists of several sub-panels (the default is Common). Open the menu at the top-left of the
panel by clicking the down arrow, and select Structure, as shown in Figure 6.
Figure 6. Selecting the Structure category of the Insert panel.
5. The Structure category contains all the grouping and structural elements necessary to build the framework for a
web page. Click the first option, Div (see Figure 7).
Figure 7. Using the Insert panel to add a <div> to the page.
6. In the Insert Div dialog box, leave “At insertion point” selected in the Insert pop-up menu, leave the Class text
box blank, and type wrapper in the ID text box (see Figure 8).
Figure 8. Setting the insertion point and ID for the <div> tag.
Giving the <div> an ID gives it a unique identity that will be used to apply CSS styles to it later.
7. The new <div> appears on your page, surrounded by a dotted line in Design view, and with some placeholder
text inside (see Figure 9).
Figure 9. The <div> and placeholder text appear in both Code and Design views.
Note: If you can't see the dotted line surrounding the <div>, select View > Visual Aids, and make sure there's a check
mark alongside CSS Layout Outlines. Clicking any of the options in the Visual Aids submenu toggles them on and off.
8. The placeholder text should be automatically selected when the <div> is inserted, so press Delete to remove it.
The dotted outline of the <div> should still be visible in Design view, and you should see the insertion point
between the opening and closing <div> tags in Code view, as shown in Figure 10.
Figure 10. The insertion point is between the opening and closing tags.
9. If you accidentally delete too much, press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo the previous step, and try
again.
10. In the Insert panel, click Header (it's the fifth item from the top) to insert a <header> element for the main
heading and navigation bar.
11. The Insert Header dialog box has the same options as Insert Div. Leave the Insert pop-up menu set to "At
insertion point," and enter "top" in the ID text box. Then click OK to insert the<header> tags and placeholder
text.
12. Press Delete to remove the placeholder text, and type Bayside Beat to replace it.
13. Turn the text you have just typed into a top-level heading by selecting Heading 1 from the Format menu in the
Property inspector, as shown in Figure 11.
Figure 11. Converting the text to a level 1 heading.
Note: The large panel at the bottom of the Dreamweaver interface is officially called the Property inspector, not the
Properties panel. The name is historic, but it also avoids confusion with Properties pane of the CSS Designer, which you’ll
learn about in Part 3 of this tutorial series. The Property inspector is context sensitive, giving quick access to the main
HTML attributes of whatever is selected in the Document window. Although there is a CSS button on the left of the
Property inspector, CSS management is now focused on the CSS Designer. Use the Property inspector only with the
HTML button selected.
14. In the underlying code, Dreamweaver wraps the text in <h1> tags, and the heading should be displayed in large,
bold text in Design view (see Figure 12).
Figure 12. Wrapping the text in <h1> tags changes the way it is displayed.
15. Next, add a <nav> element to the page by clicking Navigation in the Insert panel (it's the eighth item from the
top).
16. The <nav> element needs to be inserted just before the closing </header> tag. So, set the Insert pop-up menu to
"Before end of tag." This activates another menu that lists the <body> tag and all other elements that have been
assigned an ID. Open the second menu, and select<header id="top">, as shown in Figure 13.
Figure 13. The dialog box lets you specify where to insert an element relative to another.
17. Enter "mainnav" in the ID text box, and click OK.
Note: An ID cannot contain spaces or special characters.
18. Make sure that only the placeholder text inside the <nav> is selected. If the surrounding <nav>tags are also
selected in the underlying HTML code, click anywhere in Design view, and then re-select the placeholder text.
Be warned that if anything other than the placeholder text is selected, the code in steps 19–22 won't be inserted in the
right place.
19. The navigation menu will be created from an unordered (bulleted) list. So, click Unordered List in the Insert
panel (it's the second from the top).
20. Delete the placeholder text, and replace it with "Home".
21. Press Enter or Return to add a new list item, and type "Sightseeing".
22. Repeat the previous step to add three more items: "Eating Out", "What's On", and "Where to Stay".
Your page should now look like Figure 14. (Check carefully that the <ul> tags are nested inside the opening and
closing <nav> tags.)
Figure 14. The unordered list for the navigation menu is nested inside the <nav> tags.
23. The next element will hold the large image of the Golden Gate Bridge. Click Div in the Insert panel, and use the
settings shown in Figure 15. (In design terms, a large image like this is usually called a “hero image,” which
explains the choice of ID.)
Figure 15. The hero <div> is inserted after the <header> element.
24. Delete the placeholder text in the hero <div>. It will look as though the <div> has disappeared in Design view,
but you should still be able to see the <div> tags in the underlying code.
25. Click Article in the Insert panel. The <article> element goes inside the hero <div>, so leave the Insert pop-up
menu set to "At insertion point." Leave the other fields blank, and click OK.
26. Click Article again. This next <article> needs to go after the hero <div>, and it should have the ID "main" (see
Figure 16).
Figure 16. The main <article> goes after the hero <div>.
27. Next, add an <aside> element by clicking Aside in the Insert panel, and use the following settings:
o Insert: After tag <article id="main">
o ID: sidebar
28. Finally, add a <footer> element by clicking Footer in the Insert panel, and use the following settings:
o Insert: After tag <aside id="sidebar">
The <footer> doesn't need an ID, so leave the ID text field blank.
29. Save the page.
The underlying HTML in Code view should now look as shown in Figure 17. Compare your file carefully with the figure.
Dreamweaver indents the code to show which elements are nested inside others.
Figure 17. The basic HTML structure for the page is complete.
Understanding the relationship between HTML elements is important when it comes to styling web pages. Browsers
treat the HTML structure like a family tree. Elements nested inside an outer element are referred to as children or
descendants. The outer element is known as the parent or ancestor, and elements that are at the same level of the
HTML structure are called siblings. Just like you inherited certain characteristics from your parents, HTML elements
inherit most styles from their parents, but they can also have individual styles of their own. If that concept sounds
strange, it should become clearer once you start adding styles to the web page in Part 3 of this tutorial series.
But first, let’s add some real text content to the page.
Use Paste Special to add formatted text
If you're building a website for someone else, the client will usually provide the text content in a word-processed file,
more often than not in a Microsoft Word document. If the document has been styled using headings and paragraphs,
Dreamweaver will convert the Word styles into the appropriate HTML elements when you copy and paste using the
Paste Special command.
Note: Don't confuse this with saving Word documents as HTML. Copy from Word, and let Dreamweaver do the
conversion.
Because not everybody has Word installed on their computer, the Word documents in the download assets for this
tutorial series have been converted to rich text format (.rtf) files. The files will open in Word if it's installed on your
computer. Otherwise, you can open them in WordPad on Windows (it's in the Accessories folder of the Start menu) or
TextEdit (in Applications) on a Mac.
1. Use Windows Explorer or Mac Finder to open the content folder in the first_website_pt1 folder that you
unzipped to your computer in Part 1 of this tutorial series.
2. Open content1.rtf in Word, WordPad, or TextEdit.
3. Select the "Be Where It's At" heading and the following paragraph, and copy it to your clipboard.
In Dreamweaver, select the placeholder text in the first <article> element, as shown in Figure 18
Figure 18. Selecting the placeholder text in preparation for replacing it.
4. Select Edit > Paste Special, or use the keyboard shortcut Ctrl+Shift+V (Windows) or Cmd+Shift+V (Mac). This
opens the dialog box shown in Figure 19. If you copied from WordPad or TextEdit, the third and fourth radio
buttons will be grayed out.
Figure 19. Paste Special allows you to preserve the structure of word-processed text.
5. Select either the second or third radio button in the Paste Special dialog box, and click OK to paste the text with
structure into the <article> element.
Note: Never use the fourth radio button in the Paste Special dialog box because it inserts proprietary Microsoft code
into your page. When pasting from Word, use the third radio button. Use the second radio button when pasting from
WordPad or TextEdit.
6. If you copied from Microsoft Word, Dreamweaver automatically wraps "Be Where It's At" in <h2>tags,
converting it into a level 2 heading. It also replaces the apostrophe with ’, which is the HTML entity for a
single closing curly quotation mark. The following paragraph is wrapped in<p> tags.
Skip to step 9.
7. If you copied from WordPad or TextEdit, both the heading and the following text are formatted as paragraphs
(in <p> tags). Click anywhere inside the first paragraph, and select Heading 2 from the Format menu in the
Property inspector to convert it into a heading (see Figure 20).
Figure 20. Format the first paragraph as a heading if you copied from WordPad or TextEdit.
8. Repeat steps 3–8 with the main <article>, copying and pasting "Ride the Cable Cars" and the following three
paragraphs.
9. Do the same with the sidebar <aside>, copying and pasting "Cable Car Tips" and the following two paragraphs.
Working with HTML entities
The footer of a web page normally contains a copyright notice and other information, such as links to privacy policies
and contact details. The copyright symbol doesn't appear on computer keyboards, so you need to insert it as a special
character using an HTML entity.
You've already met one HTML entity, ’, in the preceding section. HTML entities always begin with an ampersand
(&) and end with a semicolon (;). Often, they're abbreviations of the character they represent. For
example, ’ represents a right single quote. The copyright symbol is represented by ©.
You can type HTML entities directly in Code view with the help of Dreamweaver's code hints, but the most common
special characters can also be inserted using the Insert panel.
1. Select the placeholder text in the <footer> element, and press Delete to remove it. Don't worry that
the <footer> seems to disappear in Design view. As long as you don't click anywhere in the Document window,
the insertion point remains in the correct place.
2. Select Paragraph from the Format menu in the Property inspector. In Code view, Dreamweaver inserts a pair of
paragraph (<p>) tags separated by another HTML entity, (non-breaking space), as shown in Figure 21.
This is simply a placeholder that disappears automatically as soon as you start adding content to the paragraph.
Figure 21. The non-breaking space is used as a placeholder in an empty paragraph.
3. To insert a copyright symbol, open the menu at the top of the Insert panel, and select Common.
4. Scroll down to the bottom of the panel, and click Character. The first time you select this option, it triggers a
submenu. Select Copyright (see Figure 22). Dreamweaver replaces with© in Code view, and the
copyright symbol appears in Design view.
Figure 22. Inserting a copyright symbol from the Insert panel.
Note: The Insert panel automatically displays submenus only the first time that you select them. Thereafter,
Dreamweaver remembers your most recent selection. To select a different option, click the tiny down arrow on the right
of the icon to reopen the submenu.
5. Insert a space after the copyright symbol, and type "Copyright 2014 Bayside Beat".
6. Save the page.
In the early days of the Web, HTML entities were the only way to use accented characters in a web page. For example,
"café" had to be encoded as café. Nowadays, web pages are normally encoded using UTF-8 Unicode, which
supports nearly every writing system, including English, French, Arabic, Hindi, Japanese, and Thai. As a result, HTML
entities are declining in use. Nevertheless, they remain a useful way of inserting characters that aren't easily available
from the keyboard.
If you copy and paste accented characters or the copyright symbol into Dreamweaver, they won't be converted to HTML
entities, but they will display correctly in a web page. (If they don't, the web server has been set up incorrectly.)
Inserting images
Unlike the structural elements you have inserted so far, there's no option to insert an image relative to a specific
element. This section shows you how to use the Tag selector to move the insertion point to the correct location.
The Tag selector at the bottom-left of the Document window displays a list of tags, showing where you are in the HTML
structure. Clicking one of the tags selects the whole element, allowing you to perform a range of operations, including
deleting, cutting, or copying the tag and all its contents.
Insert an image without a caption
The hero image needs to be nested inside the hero <div>, but outside the <article> element that contains the "Be Where
It's At" heading and paragraph.
1. In Design view, click anywhere inside the "Be Where It's At" heading or following paragraph. Then select
the <article> tag in the Tag selector, as shown in Figure 23.
Figure 23. Selecting a tag in the Tag selector selects the tag and all its contents.
2. Press the right arrow key once to deselect the <article> and move the insertion point to between the
closing </article> tag and the closing tag of the hero <div>.
3. In the Common category of the Insert panel (it should still be selected after inserting the copyright symbol in the
previous section), click Image. If a submenu appears, select Image.
4. In the Select Image Source dialog box, navigate to the images folder in the Bayside Beat site, and select
golden_gate.jpg. Then click OK (Windows) or Open (Mac) to insert the image.
5. The image is inserted after the <article> element, and the Property inspector displays its details, as shown in
Figure 24.
Figure 24. The Property inspector displays the image’s details, including width and height.
6. The W and H text fields show that the image is 1000 pixels wide and 547 pixels high. The design will be flexible,
so you need to delete the values from both text fields. Removing the values doesn't change the size of the image
yet. You'll fix that with CSS in Part 3 of this tutorial series.
7. The Alt text area is for alternative text that describes the image for search engines and non-visual browsers,
such as assistive technology for the blind. Enter a description, such as "Golden Gate Bridge in San Francisco Bay",
in the Alt field, and press Tab to insert the value in the underlying HTML.
Insert an image with a caption
In this section, you'll insert an image with a caption between the second and third paragraphs of the main <article> using
the HTML5 <figure> and <figcaption> elements.
1. In Design view, scroll down to the main <article>, which begins with "Riding the Cable Cars."
2. Click anywhere inside the second paragraph after the heading.
3. Select the <p> tag in the Tag selector, in the same way as you did with the <article> tag in the previous section.
4. Press the right arrow key once to move the insertion point between the closing </p> tag of the second
paragraph and the opening <p> tag of the third paragraph.
5. Switch to the Structure category of the Insert panel, and click Figure (it's the last item). This inserts
the <figure> and <figcaption> elements with placeholder text in each element.
6. The placeholder text for the <figure> element should be automatically selected. Press Delete to remove it.
7. Switch back to the Common category of the Insert panel, and click Image.
8. Select cable_car1.jpg in the images folder to insert it in the web page. You don't need to add a description in the
Alt text area because you'll be adding a caption that will be displayed below the image.
9. Select the placeholder text in the <figcaption> element, and replace it with "The cable car terminus near Union
Square".
Add links
The unordered (bulleted) list in the <nav> element will be turned into a navigation bar in Part 4 of this tutorial series.
The text in each list item needs to be converted into a link. At the moment, the Bayside Beat site contains only one web
page. So, you'll create a temporary page for the Sightseeing link. The other links will be converted into dummy links.
1. Create a new HTML page by selecting File > New. In the New Document dialog box, select Blank Page, and set
Page Type to HTML and Layout to <none>. Then click Create.
2. In the new page, type Sightseeing in Design view. There is no need to format the text. This is simply to identify
the page when you test it later.
3. Save the new page in the Bayside Beat site root as sightseeing.html.
4. Close the page by clicking the X on its tab.
5. In index.html, select Sightseeing in the unordered list at the top of the page.
6. In the Property inspector, click the Browse for File icon next to the Link text box (see Figure 25).
Figure 25. Link to another file by clicking the Browse for File icon in the Property inspector.
7. In the Select File dialog box, select sightseeing.html, and click OK (Windows) or Open (Mac).
8. Click away from the highlighted text in Design view to deselect it. The text has turned blue and is underlined,
indicating that it's a link. In the underlying code, Dreamweaver has wrapped the text in a pair of <a> tags, with
the name of the file being linked to in the href attribute, as shown in Figure 26.
Figure 26. The text in the list item has been converted into a link.
Note: Most HTML tags have names that are abbreviations that make them easy to understand. For example, <ul> stands
for "unordered list," and <li> stands for "list item." So, why do links use the<a> tag? Historically, links were called
"anchors." The href attribute stands for "hypertext reference." Hypertext is the technical name for a text link.
9. Let's try another way to create an internal link. Select Home in the unordered list. Then open the Files panel by
clicking its tab.
10. In the Property inspector, click the Point to File icon (it's immediately to the left of the Browse for File icon, and
looks like a crosshair—see Figure 27).
Figure 27. Drag the Point to File icon to select the file you’re linking to.
11. Hold down the mouse button and drag the icon toward the Files panel. As you drag, the crosshair is pulled
across the screen on a thread. Release the mouse button when the crosshair is over index.html in the Files
panel. This links the text to index.html.
12. Convert the remaining three list items into dummy links by selecting the text, and entering the hash sign (#) in
the Link text box.
13. Save index.html, and preview it in a browser by selecting a browser from the globe icon in the Document toolbar
(see Figure 28), or by pressing F12 (Windows) or Opt+F12 (Mac) to launch the page in your default browser.
Figure 28. Choose one of the browsers installed on your computer to preview the page.
14. Click the Sightseeing link to check that you are taken to the temporary sightseeing page.
Although you can manually type the name of a file you're linking to in the Link text box, the Point to File or Browse for
File icon ensures that the correct filename and file path are used. In this simple site, you're linking only to files in the site
root, but on a more complex site, it's easy to make a mistake, resulting in a broken link.
Create external links
You create external links in a similar way, by entering the URL in the Link field. The URL must begin
with http:// or https://. If you forget, the browser treats the link as internal. For example, if your website
is http://www.example.com, and you enter www.adobe.com in the Link text box, the browser will try to
open http://www.example.com/www.adobe.com instead ofhttp://www.adobe.com.
The most reliable way to create an external link is to load the page you want to link to in a browser. Then select the URL
in the browser address bar, copy it, and paste it into the Link text box in the Dreamweaver Property inspector.
1. Open content1.rtf in the content folder of the tutorial assets that you downloaded in Part 1. The file contains
three suggested external links for index.html.
2. Select the relevant text in the main <article> and sidebar <aside> elements, and paste the URL for each one into
the Link text box. For example, select "Fisherman's Wharf" in the first paragraph of the main <article>, and
enterhttp://www.fishermanswharf.org/ in the Link text field in the Property inspector.
3. Save index.html, and preview it in a browser. Click the external links to verify that they work.
4. Save the page, and preview the page in a browser.
The page should look like Figure 29 in a modern browser. It doesn't look like the design comp yet, but all the content is
presented in a logical order with a level 1 heading at the top, and level 2 headings introducing the text lower down the
page. This is important not only for search engines and assistive technology for the blind, but it also means that your
page will be meaningful and accessible even without being styled.
Figure 29. The HTML elements are all stacked vertically on top of each other.
