How to Set Up Layout Mode in Adobe Dreamweaver CS3
Layout mode is the WYSIWYG section of a Dreamweaver page. Whenever a file is opened in Dreamweaver, there are view options of Layout (Design), Code and Split (Code + Layout). Design view allows those not versed in HTML coding to design a Web page in the same graphic way that PageMaker and InDesign allow print layouts to be created. Dreamweaver automatically generates the code in the background that makes a website both visible and operational.
Other People Are Reading
Instructions
-
-
1
Open a new file in Dreamweaver. Choose "File," "New," "Blank Page," "HTML" or "None." Click "Create" when done. Options vary depending on which version of Dreamweaver is being used.
-
2
Click the "Design" icon to show a blank page like any graphic design program. Dreamweaver defaults to the "Split" or "Combo" view, showing both graphic and code windows.
-
-
3
Insert a table. Click "Insert," "Table" or click the "Table" icon. A outline appears in your window including however many rows and columns (cells) you selected. Table cells can be altered, combined, increased or decreased at any time.
-
4
Select the table by clicking on its name at the bottom of the document window, or clicking in the upper left corner of the table itself. Once selected, make properties visible by clicking on "Window," "Properties." At the alignment tab in the Property Inspector, choose "center" to center your page in all browsers.
-
5
Add additional tables within the main table, add layers (DIVs) for custom placement beyond the alignment in table cells. Click on any table cell to select it to import an image, a Flash movie, or type text.
-
6
Preview your document in a Web browser by clicking the globe icon.
-
1
Tips & Warnings
When you first create a website in Dreamweaver, Dreamweaver asks you to set up a central storage location for all your web files. You can always look at or edit this selection by clicking "Site" from the top menu, and choosing "Manage Sites" from the menu that appears.
References
Resources
- Photo Credit valentine's day card image by Jaroslaw Grudzinski from Fotolia.com
