Step 3: Dreamweaver CS3 Tutorial – Edit a webpage
[This is Step 3 of the Dreamweaver CS3 Tutorial]
Open an existing page
Double click the page in the Files Panel
Different views of your webpage
By default the webpage will open in design view and it will show how the webpage will be displayed online. But you can also opt to view the html code or both in a split window.
Inserting Text
You can type in text just as you would in any text editing software. You can apply styles (font, font size, bold, text-align, …) to it from the Properties panel below.
Inserting Images
You can insert images Insert > Image. You can also position them :
- Click on the image.
- Open the Properties Inspector. Select the required alignment from the ‘align’ drop down menu. You could also set the alignment of the cell/ div tag in which the image will be placed.
Preview your page in a browser
The Design view gives you a rough idea of what your page will look like on the web, but you must preview the page in a browser to see the definitive end result. Although browsers produce the same results in general, each browser version can display HTML pages somewhat differently. Dreamweaver attempts to produce HTML that looks as similar as possible from one browser to another; sometimes differences can’t be avoided, however. Thus, previewing your work in a browser is the only way for you to see what your site visitors will see after you publish your pages.
- Open the page you want to preview
- Press the F12 key (Windows) or Option+F12 (Macintosh). Your primary browser launches, if it’s not running already, and displays the page
Note: Dreamweaver automatically detects your primary browser and uses it for previewing your pages. If the preview doesn’t appear, or if it doesn’t appear in the browser you expect, switch back to Dreamweaver (if necessary) and select File > Preview in Browser > Edit Browser List. When the Preview in Browser Preferences dialog box appears, add the correct browser to the list. For more information, click the Help button in the Preferences dialog box.
<< Go back to step 2: Create a new webpage