17 June 2013
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 inside each other. 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.
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.
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.
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.
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
Your site visitors will see this title in the browser's title bar or tab when they view the page in a web browser.
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
<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:
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.
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.
<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.
<div> an ID gives it a unique identity that will be used to apply CSS styles to it later.
<div> appears on your page, surrounded by a dotted line in Design view, and with some placeholder text inside (see Figure 9).
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.
<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.
<header>element for the main heading and navigation bar.
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.
<nav>element to the page by clicking Navigation in the Insert panel (it's the eighth item from the top).
<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.
Note: An ID cannot contain spaces or special characters.
<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.
<ul>tags are nested inside the opening and closing
<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.
<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.
<article>needs to go after the hero
<div>, and it should have the ID main (see Figure 16).
<aside>element by clicking Aside in the Insert panel, and use the following settings:
<footer>element by clicking Footer in the Insert panel, and use the following settings:
<footer>doesn't need an ID, so leave the ID text field blank.
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.
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.
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.
In Dreamweaver, select the placeholder text in the first
<article> element, as shown in Figure 18
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.
<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). 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).
<article>, copying and pasting "Ride the Cable Cars" and the following three paragraphs.
<aside>, copying and pasting "Cable Car Tips" and the following two paragraphs.
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.
<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.
<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.
©in Code view, and the copyright symbol appears in Design view.
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.
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.
<article>tag in the Tag selector, as shown in Figure 23.
<article>and move the insertion point to between the closing
</article>tag and the closing tag of the hero
<article>element, and the Property inspector displays its details, as shown in Figure 24.
In this section, you'll insert an image with a caption between the second and third paragraphs of the main
<article> using the HTML5
<article>, which begins with "Riding the Cable Cars."
<p>tag in the Tag selector, in the same way as you did with the
<article>tag in the previous section.
</p>tag of the second paragraph and the opening
<p>tag of the third paragraph.
<figcaption>elements with placeholder text in each element.
<figure>element should be automatically selected. Press Delete to remove it.
<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.
<a>tags, with the name of the file being linked to in the href attribute, as shown in Figure 26.
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.
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
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
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.
<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.
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.
If your page looks different from Figure 29, compare your code with index.html in first_website_pt2_end.zip, which you can download from the link at the top of this page.
In Part 3 of this tutorial series, Using CSS for layout, you’ll start creating the style rules to implement the design concept in Figure 1.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Tutorials and samples