17 June 2013
Welcome to the fifth part of this tutorial series on creating your first website. In the first four parts, you created a site in Dreamweaver CC and built the home page for Bayside Beat, a fictional guide to San Francisco, using HTML and CSS. However, one page is rarely sufficient for a website. This part shows how to create a second page in harmony with the original page.
There are no hard and fast rules about the correct or best way to add extra pages to a website. One method is to create a Dreamweaver template. Templates have the advantage that you can designate sections that you want to be identical in every page. Dreamweaver inserts instructions in HTML comments that prevent the content from being changed, except in editable regions. When you update non-editable sections in the master template, the changes are propagated to all pages created from it. This approach was extremely useful when complex tables were used for page layout. It's less valuable in modern web design because all the layout instructions are in an external style sheet, which can't be controlled by a template.
Another common method is to copy an existing page, and simply replace its content. In this tutorial, you'll use a slightly different approach, copying common elements, and creating new ones.
If you completed the first four parts of this tutorial series, continue working with your existing files. If you're not sure whether your HTML and CSS is correct, you can download first_website_pt5_begin.zip from the link at the top of this page, and use it to replace your existing files.
Figure 1 shows the home page of the Bayside Beat site as it looked at the end of Part 4 of this tutorial series.
The page is dominated by a large image. This type of image, often called a "hero image," is common on the home page of websites, but repeating this layout on inner pages is probably not a good idea. A hero image is good for setting the mood of a landing page, but inner pages normally give greater prominence to text. The two-column layout is ideal for this.
So, the task is to create the layout shown in Figure 2.
Apart from the lack of hero image with its superimposed block of text, it's identical to the home page. All you need to do is to create the HTML structure, add the text and images, and attach the style sheet. The style sheet does all the rest. In fact, attaching the style sheet before you begin provides some useful shortcuts.
When you started styling the Bayside Beat site in part 3 of this tutorial, the CSS Designer created a new style sheet for you. This time, all you need to do is to attach the existing style sheet.
The background of sightseeing.html should turn pale blue, and the text is displayed in a different font. The styles in main.css are already at work. A black information bar about Web Fonts also appears at the top of the Document window. This is because Dreamweaver has detected that the style sheet uses an Adobe Edge Web Font. You can dismiss the information bar by clicking the X button on the right (see Figure 5).
The second page shares several common elements with the home page, so it makes sense to copy them. If you select an element in Design view, copy it, and paste it back into Design view, Dreamweaver preserves all the associated HTML markup. The other elements can be added using the Insert panel.
Note: Forgetting to replace the placeholder text in the Title text field is one of the most common beginner mistakes. The title is not only displayed in the browser title bar or tab, it's frequently used by search engines. Don't suffer the embarrassment of seeing your masterpiece listed in search results as "Untitled Document."
<header#top>in the Tag selector at the bottom of the Document window, as shown in Figure 7.
<div>around the elements you have just pasted. Click anywhere inside the main heading or navigation bar in sightseeing.html, and select
<header#top>in the Tag selector in the same way as step 4.
wrapperfrom the list, as shown in Figure 9, and click OK.
If the Document window is narrower than 1000 pixels, you won't see the pale blue background on either side, but the main heading should have a white background.
<article>by clicking Article in the Insert panel.
In the Insert Article dialog box, set Insert to "After tag," and select
<header id="top"> from the menu that appears alongside.
When you click the down arrow on the right of the ID text field, note that only three IDs are listed. An ID can be used only once on a page, so
wrapper is no longer listed. Select
main, as shown in Figure 11, and click OK.
Note: When you insert the main
<article> and sidebar
<aside>, the white background of the wrapper
<div> doesn't extend behind them. That's because both elements are floated. The white background will reappear when the
<footer> is added because its style rules use the clear property to move it down below floated elements.
<footer>. In the Bayside Beat design, the
<footer>contains only a few words of text, so it would be easy to continue using the Insert panel, and then just type in the content. However,
<footer>elements often contain a lot more information, so let's copy and paste it.
Switch back to index.html, click anywhere inside the
<footer>, and select it in the Tag selector, as shown in Figure 13.
<aside#sidebar>in the Tag selector.
</aside>tag. Open Split view if you want to check. However, do not click in Code view. This is very important.
If your page doesn't look like Figure 14, the most likely reason is because the focus was in the wrong part of the Document window when you copied or pasted. The rules for copying and pasting are very simple:
Figure 15 shows what happens if you click in Code view before pasting the
<footer> in the previous instructions. Only the text is pasted. The HTML tags aren't preserved.
The situation is worse if you copy in Code view, and then paste into Design view. All the HTML markup is converted into HTML entities (see "Working with HTML entities" in Part 2 of this tutorial series), resulting in all the tags being displayed in the page, as shown in Figure 16.
Unless you’re creating a tutorial where you want to display the code, you should never paste into Design view anything that has been copied in Code view.
The next stage involves replacing the placholder text in the main
<article> and sidebar
<aside> elements. The content for sightseeing.html is in content2.rtf, which you can find in the content folder of the download assets for this tutorial.
<h2>tags. Skip to step 7.
<aside>element with the ID sidebar. Format "Tourist Information" and "Sightseeing Tours" as Heading 2, if pasting from WordPad or TextEdit.
Note: If you get an empty paragraph when pasting from Word, just click inside the blank space and press Delete or Backspace.
The page should now look like Figure 19 in Design view.
Figure 19 identifies a problem with the page as it stands. The Home button in the navigation bar has an aquamarine background, which is intended to signal that it's the current page. The different background is applied by the
thispage class. When you copied the
<header> from index.html, all the HTML code was copied with it. You need to remove the class from the Home link, and apply it to the Sightseeing link.
<a.thispage>in the Tag selector.
<a>in the Tag selector, and select Set Class >
thispagefrom the context menu.
Alternatively, open the Class menu in the Property inspector, and select
thispage, as shown in Figure 21.
As Figure 22 shows, the correct page is now identified in the navigation bar.
There are two images for sightseeing.html. You'll insert them with captions using the
Click anywhere inside the first paragraph in the main
<article>, and select
<p> in the Tag selector, as shown in Figure 23.
<figure>element with a
<figcaption>nested inside. Both elements are populated with placeholder text (see Figure 24).
<figure>element disappears, but the insertion point will be in the correct place as long as you don't click anywhere inside the Document window.
Note: If you prefer to copy and paste the caption from content2.rtf, select the first radio button (Text only) in the Paste Special dialog box. Otherwise, Dreamweaver will wrap the caption in paragraph tags, increasing the vertical whitespace around it.
floatrightclass to the
<figure>element. With your cursor anywhere inside the caption, right-click
<figure>in the Tag selector, and select Set Class >
floatrightfrom the context menu.
Tip: To insert an em dash (—) on Windows, hold down the Alt key and enter 0151 on the numeric keypad. On a Mac, hold down the Shift and Option key, and type a hyphen. Alternatively, switch to the Common category of the Insert panel, open the Character submenu, and select Em Dash. Using the keyboard inserts an em dash in both Design and Code view. Using the Insert panel inserts the HTML entity
— in Code view. Although all browsers display this as an em dash, you'll probably find your HTML code much easier to read if you use the keyboard to insert a dash.
There's just one more thing to do before the page is ready to be uploaded to your website. You need to attach html5shiv.js inside an IE conditional comment to ensure that IE 6–8 apply styles to the new HTML5 elements.
</head>tag (it should be on the same lines as Figure 26).
Congratulations! You've created the home page and an inner page for the Bayside Beat site, and you've learned a lot about HTML, CSS, and Dreamweaver along the way.
The final part of this tutorial series will show you how to publish the pages and their assets to a web server so that other people can view your work. Incidentally, this is what you should do if you run into difficulties. It's only by seeing your pages on a live web server that others can help troubleshoot problems with your HTML and CSS. I'll show you how to connect to a web server and upload your files in Part 6, Publishing your website.
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