Creating your first website – Part 2: Creating the page structure
What do I need?
Before starting this tutorial, read and complete the steps in Part 1: Setting up your site and project files. In order to make the most of this article, you need the following software and files:
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.
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.
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.
- 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.
- Select File > New.
- 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).
- Check that DocType is set to HTML5 and click Create.
- Select File > Save, or press Ctrl+S (Windows) or Cmd+S (Mac OS X).
- 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).
- 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 URL http://www.example.com/products/index.html to http://www.example.com/products.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.)
- 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.
- 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.
- 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.
- 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.
- 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.
- If you accidentally delete too much, press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo the previous step, and try again.
- 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.
- 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.
- Press Delete to remove the placeholder text, and type Bayside Beat to replace it.
- 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.
- 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.
- Next, add a <nav> element to the page by clicking Navigation in the Insert panel (it's the eighth item from the top).
- 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.
- Enter "mainnav" in the ID text box, and click OK.
Note: An ID cannot contain spaces or special characters.
- 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.
- 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).
- Delete the placeholder text, and replace it with "Home".
- Press Enter or Return to add a new list item, and type "Sightseeing".
- 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.
- 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.
- 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.
- 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.
- 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>.
- Next, add an <aside> element by clicking Aside in the Insert panel, and use the following settings:
- Insert: After tag <article id="main">
- ID: sidebar
- Finally, add a <footer> element by clicking Footer in the Insert panel, and use the following settings:
- Insert: After tag <aside id="sidebar">
The <footer> doesn't need an ID, so leave the ID text field blank.
- 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.
Using 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.
- 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.
- Open content1.rtf in Word, WordPad, or TextEdit.
- 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.
- 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.
- 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.
- 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.
- 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).
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.
Figure 20. Format the first paragraph as a heading if you copied from WordPad or TextEdit.
- Repeat steps 3–8 with the main <article>, copying and pasting "Ride the Cable Cars" and the following three paragraphs.
- 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.
- 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.
- 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.
- To insert a copyright symbol, open the menu at the top of the Insert panel, and select Common.
- 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.
- Insert a space after the copyright symbol, and type "Copyright 2014 Bayside Beat".
- 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.)
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.
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.
- 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.
- 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>.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
- In Design view, scroll down to the main <article>, which begins with "Riding the Cable Cars."
- Click anywhere inside the second paragraph after the heading.
- Select the <p> tag in the Tag selector, in the same way as you did with the <article> tag in the previous section.
- 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.
- 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.
- The placeholder text for the <figure> element should be automatically selected. Press Delete to remove it.
- Switch back to the Common category of the Insert panel, and click Image.
- 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.
- Select the placeholder text in the <figcaption> element, and replace it with "The cable car terminus near Union Square".
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.
- 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.
- 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.
- Save the new page in the Bayside Beat site root as sightseeing.html.
- Close the page by clicking the X on its tab.
- In index.html, select Sightseeing in the unordered list at the top of the page.
- 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.
- In the Select File dialog box, select sightseeing.html, and click OK (Windows) or Open (Mac).
- 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.
- 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.
- 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.
- 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.
- Convert the remaining three list items into dummy links by selecting the text, and entering the hash sign (#) in the Link text box.
- 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.
- 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.
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 of http://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.
- 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.
- 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 enter http://www.fishermanswharf.org/ in the Link text field in the Property inspector.
- Save index.html, and preview it in a browser. Click the external links to verify that they work.
- 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.