Dreamweaver Help: common functions and operations

Transcription

1 Dreamweaver Help: common functions and operations To learn about Dreamweaver CS6 environment view YouTube video: Setting up Dreamweaver Preferences By default, Dreamweaver generates XHTML 1.0 documents. To change the default document to HTML5, do the following. 1. From the main menu select Edit > Preferences (at the end of the list). The Preferences dialog box opens. 2. In the Category section (on the left side), select New Document. 3. In the New Document section set the Default Document Type (DTD) to HTML5: 4. Accept other defaults and click OK to close the window.

2 Dreamweaver Environment Switching between views in the Document window There are three view types in Dreamweaver: Code view, Split view, and Design view. Design view: By default, the Document Window (the area that displays the current document as you create and edit it) is opened in the Design view. The Code view shows the code that is generated by Dreamweaver. The Split view splits the document window showing two panes: the Code and the Design views. In this view you can add content and view the code generated by Dreamweaver. Dreamweaver workspaces You can change the entire Dreamweaver layout by changing the way the panels and bars are arranged. You can even create and save your own layout. To change the Dreamweaver layout, click the Designer Workspace drop down menu located at the top right hand panel and choose Classic:

3 This will change the location of the Insert panel so it will be easier for you to locate HTML elements you want to insert in your document. Below you can see the Insert bar with Common category selected. This tab allows you to insert common HTML elements: Note: You can manually undock and dock panels in the Document view. If you want to restore the default layout, click the Workspace drop down menu and choose Reset Classic (or reset Designer if you like to work in the Designer workspace). Properties panel The Properties panel is one of the most important panels in Dreamweaver. It s located at the bottom of the Dreamweaver document window. The Properties panel is used to apply many of the most frequently used HTML tags and to define attributes for those tags. This panel is context sensitive: it displays different setting options each time you select a specific element in the document window, such as text elements, images, tables, and other elements of a web page layout. If you don t see the Properties panel, choose from the main menu Window > Properties.

4 CSS Styles Panel The CSS Styles Panel is the most important panel for HTML element formatting. It s located on the right section of the Dreamweaver document layout. The CSS Styles panel is used to add CSS rules to the selected HTML elements. Each time you want to add a new CSS rule, click the New CSS Rule icon (the plus (+) icon) located in the bottom of the panel (circled red). Files Panel The Files panel enables you to view and reorganize files and folders in your web site, whether they are associated with a Dreamweaver site or not, and perform standard file maintenance operations, such as opening, moving, linking to and deleting files. Dreamweaver is a site management application allowing you to manage the entire web site. When you define a web site in Dreamweaver, the application creates a local copy of your web site structure retaining all the relationships within the site in its memory. Before you start working on your site, define it in Dreamweaver. The process of defining a web site in Dreamweaver refers to creating a pointer to a specific folder on your computer s hard drive (or even flash drive). After the site is defined you can have a full automated control over the entire web site assets, hierarchy of file and folders, and global operations such as site wide find and replace operations, assets managements, site wide reporting, and more.

5 You may want to use the following online video resources to learn more about Dreamweaver environment: Dreamweaver for Beginners Dreamweaver Environment (15 min) r_h9j3bs Intro to Adobe Dreamweaver CS6 Step by Step Lecture (part 1) Welcome screen tutorials/the welcome screen.html (6 min) Adding HTML5 tag library Dreamweaver CS6 doesn t provide any GUI tools for inserting HTML5 tags (<header>, <article>, <section>, <aside>, <footer>, and other new tags). Adding these tags manually in the Code view may be time consuming. Fortunately, Dreamweaver allow you to create a new HTML5 Library and choose HTML5 tags from an interface called Tag Chooser. To add HTML5 tags, follow the following steps: 1. Select Edit > Tag Libraries to open the Tag Library Editor dialog box. 2. Click on the plus + icon at the top and select New Tag Library 3. Give your new tag library a name, for instance, HTML5 tags 4. Check HTML checkbox in the Used in the bottom section. 5. Now, click on the plus + icon again and select New Tags 6. Type the list of HTML5 tags in the Tag names box: article, aside, header, nav, section, footer. 7. Next, you can add HTML5 global attributes to these tags. Click the Plus icon again and select Add Attributes

6 8. Select the HTML5 tags library you created before and select the tag you want to give attributes to. You can comfortably add global attributes to all new HTML5 tags, for example: 9. Click OK when done. 10. Now if you need to add a new HTML5 tag, choose from the main menu Insert > Tag. The Tag Chooser opens. 11. Select desired HTML5 tag from the HTML5 library (as shown below): 12. Click Insert.

7 Changing Dreamweaver workspace In Dreamweaver you can create a custom workspace by moving and manipulating Document windows, bars and panels. You can even create your own named workspace and switch between workspaces by choosing the Workspace switcher located in the Application bar at the top right hand side of the window. I would recommend using Classic workspace which places the Insert bar horizontally at the top of the document window. This insert bar location provides a better visibility of all HTML elements that you may want to insert to your document. Defining a web site in Dreamweaver Before starting your new web site project in Dreamweaver CS6, define a new site. Defining a new site activates Dreamweaver's ability to resolve links, check related files, make global changes, create reports, and manage assets. You can define a web site in your local hard drive or even in the removable drive. To define a web site, do the following: 1. Start Dreamweaver and choose from the Welcome window: Dreamweaver Site. Alternatively, you can choose from main menu Site > New Site. The Site Setup dialog box opens. 2. Click the folder and find your site root folder (the folder where you have all the files and the images folder. Select the folder.

8 3. Click Open. 4. Then click Select 5. Click Save to close the Site Setup dialog box. 6. Your new web site name appears in the Files panel You can create multiple web sites in Dreamweaver and switch between them by clicking the Sites drop down arrow and choosing the site name from the list. Starting a new HTML5 document 1. Open a new HTML page. Do one of the following: Launch Dreamweaver and click the HTML link in the Welcome screen to open a new HTML page Launch Dreamweaver and choose from the main menu: File > New... and choose Blank Page HTML from the New document dialog box. Inserting Common HTML Elements Inserting headings 1. Inserting HTML Headings (<h1>, <h2>, <p> elements). Do one of the following: In the Design view, go to the Properties panel. In the Properties, click the Format drop down menu and choose the heading element (as shown below):

9 Easier way: Click Ctrl+1 to add the <h1> element, CTRL+2 to add the <h2> element, and so on. To create a bold face type, click CTRL+b or choose the B icon from the Properties panel. Creating lists Do one of the following: From the Properties panel click the list icon (Ordered or Unordered): Type the text for the first item and then click Enter to create a new list item. To complete the list, click Enter twice. Entering paragraphs Enter the text and click Enter: (each time you click the Enter key, a new paragraph will be inserted). Creating a line break Click Shift+Enter to create a new <br> element Adding a <blockquote> element Click Enter to start a new paragraph. Type text then select the paragraph text in the document window and click the Indent icon in the Properties panel: Add Special Characters (HTML Entities): To add special characters, such as Copyright symbol, go to the Insert panel (at the top of the Document window) and click the Text tab. Click the last icon in the Insert bar and choose the desired character:

10 Note: form the Text tab you can choose other text elements, such as <abbr> tag, or Definition list (<dl>) element. These elements are not included in the Properties panel. Adding Hyperlinks To add a Hyperlink choose Insert > Hyperlink (Alternatively, click the Hyperlink icon in the Common tab of the Insert bar); then fill in the values for the Hyperlink dialog box. To insert an address: Insert > link (Or click the icon on the Common icon menu) Adding Images To add an Image, choose Insert > Image (Or click the Image icon on the Common tab in the Insert menu):

11 Adding the <table> element: 1. Click on either the Table icon on the top Common tab, or choose Insert > Table 2. Then in the Table dialog box, enter in the appropriate textboxes the values for the number of Rows and Columns. 3. Specify the table headers for top, left, or both left and top cells. HTML5 doesn t allow obsolete table properties, such as border, cell padding or width. Leave these fields empty. You will format your table using CSS. 4. To Merge some column cells (perhaps to insert a Header) highlight the contiguous column cells then choose Modify > Table > Merge Cells 5. To Merge some row cells (perhaps to insert a picture) highlight the contiguous row cells then choose Modify > Table > Merge Cells. 6. To delete a table row, select the row and click Delete. 7. To add a table row or column, place your mouse pointer within a table cell. Rightclick and choose Table >Insert Rows or Columns. In the dialog that opens set number of rows or columns to insert. Inserting Page Title and Meta tags 1. To insert the <title> element, locate the Title input box (in the standard bar: Enter the page title and click Enter. 2. To Insert Meta Tags for Author, Description, and Keywords, choose: Insert > HTML > Head tags

12 You can also click the Head:Meta icon in the Common tab and choose specific meta tag: Validating HTML To Validate your HTML code, choose File > Validate > Validate Current Document (W3c) The list of errors (if any) will appear In the Validation panel at the bottom of the document window. Previewing a web page in a Browser To Preview your page in a Browser click on the icon on the toolbar or choose: File > Preview in Browser. To preview a web page in your default web browser, click F12. Formatting HTML elements using CSS Styles panel 1. To format an HTML element, use the CSS Styles panel. If you don t see this panel, choose from the main menu: Window > CSS Styles 2. To create a new CSS rule, you need to select the HTML element you want to format. Selecting an HTML element for formatting One of the ways to select an element is to highlight this element in the Design view by dragging your mouse pointer over it or select the element in the Code view. Selecting an HTML element using Tag Selector The best way to select an element is to click on this element in the Design view, and then locate this element is the Tag Selector bar. The Tag Selector bar shows the

13 hierarchical order of the element in your document that represents the Parent > Child elements relationship. The Tag Selector bar is located immediately below the document window. In the example showed below, the Tag Selector shows selected paragraph element <p> that resides within the div element with id left_column: Styling selected elements After the element is selected, you can create a new CSS rule for this element by clicking the New CSS rule icon (the plus (+) icon) at the bottom of CSS Styles panel. When you click this icon, Dreamweaver determines what element was selected and displays the dialog box with the name of the element you want to format. The screenshot given below shows the Dreamweaver is going to target the paragraph element <p> that is nested within the div with ID left_column:

14 In this case the Selector Type is automatically set up to Compound. If you would like to create a new CSS rule for an HTML tag, you need to click the Selector Type drop down menu and choose Tag. The Selector Name drop down menu will allow you to choose an element from the complete list of HTML elements. Setting the Rule Definition You may want to start with embedded CSS styles for a single HTML document. In this case, the Rule Definition should be set to (This document only). The better way to set up your CSS styles is to choose the CSS external style sheet. To start with external (linked) CSS stylesheet, set the Rule Definition drop down menu to the New Style Sheet (as shown below): After you click OK, Dreamweaver will prompt you to save a new CSS file within your defined web site. Name your CSS file and save it by clicking the Save button. Creating a new CSS rule As soon as you save your CSS file, the CSS Rule Definition dialog box appears.

15 This dialog box shows the list of CSS controls you may want to apply to the chosen element. This list is shown in the Category pane of the dialog box and includes Type, Background, Box, Positioning and other CSS controls. By clicking on each of these categories, you can see the pane with the major CSS properties for each of the categories. Adding additional CSS properties The CSS Rule Definition dialog box offers just the most frequently used CSS controls. Often you want to add additional CSS properties and values to the chosen element. In this case, you need to select the element and click the Current tab in the CSS Styles panel. This will allow you to choose a specific CSS property from the extensive list of CSS properties and set the desired value. In the example shown below, the line height property is set to 1.5: