Quick Start Guide

139
8
CHAPTER 8
Tutorial: Working
with Code
As you add text, images, and other content to a web page, Dreamweaver 8
generates HTML code. This tutorial explains how to use Code view to
display a document’s underlying code, and how to add and edit code
manually.
If you’ve already set up your site and completed the previous tutorials, you
can continue working in the same index.html file.
If you haven’t completed the previous tutorials, you can still complete this
tutorial. First, set up your site by following the instructions in “Tutorial:
Setting Up Your Site and Project Files” on page 49. Next, use the
index_code.html file in the cafe_townsend/completed_files/dreamweaver
folder to complete this tutorial. The index_code.html is a duplicate copy of
the finished index.html file from Chapter 6, “Tutorial: Formatting Your
Page with CSS,” on page 99.
In this tutorial, you will complete the following tasks:
Look at the code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Switch to the coding workspace (Windows only). . . . . . . . . . . . . 142
Add a tag with the Tag Chooser . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Edit a tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Look up information about a tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Add an image with code hints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Check your changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Print your code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
NOTE
If you begin this tutorial with the completed index_code.html file, instead of
the index.html file from Chapter 6, “Tutorial: Formatting Your Page with
CSS,” on page 99 certain steps and illustrations in the tutorial will not
match what you see on your screen.