Coding

Document Sample
Coding Powered By Docstoc
					                                                                                         Dream Weaver MX Coding




                                         Dreamweaver 6.0 MX


2) Coding:

This part of the program is concerned with learning how to use Dreamweaver MX to
hand-code web pages. In this part we will use the code panel which includes tag inspector
Snippets, and references this panel is shown in the following figure:




Hint: You can Dreamweaver's workspace as follows Edit > Preferences, then clicking
the button "Change workspace" in the General preferences category, then choose the
required workspace and restart Dreamweaver




---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -١-
                                                Where “Smart” Start
                                                                                         Dream Weaver MX Coding




For the purpose of this lesson we will create a new page and add it to the site designed in
the previous lecture. The new page will have the name location_start.htm this page will
look as the following figure




After creating this page we should have the file named index.htm and location_start.htm
opened in Dreamweaver.


Now delete the previous link made for locations page                                             from the navigation
bar at the top of the page.



---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -٢-
                                                Where “Smart” Start
                                                                                         Dream Weaver MX Coding



Now Switch to the code view to see the file's source code by clicking the button                                     or by
choosing View > Code

Hints:
      - To switch between the pages quickly, press Control+Tab or click the tab at the
      bottom of the page.
      - You must maximize the page to see the tabs.




Our Lesson today will start at the point where we will add the image that we have just
deleted but in another way.




Add an image by dragging it :

   1. Open index.htm in Code view, if it’s not already open.
   2. In the Files panel group, open the Assets panel.




---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -٣-
                                                Where “Smart” Start
                                                                                         Dream Weaver MX Coding




   3. Select the image file for btnLocations.jpg.
   4. Drag the image file to the page code, and then drop it in the code for the third cell in
      the first table.

        Tip: Look for the code for the Home and Customer Service buttons. Drop the
        Locations image before the closing </td> tag for the table cell that follows the two
        cells for those buttons.

        Dreamweaver inserts the code at the insertion point to create the image.

   5. Choose File > Save.

Add a link with the Tag Chooser:

Now you’ll make the button you added link to the Locations page. In addition to manually
entering code for a link and using the Insert bar to add a link, you can use the Tag
Chooser.

---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -٤-
                                                Where “Smart” Start
                                                                                         Dream Weaver MX Coding




To write code with the help of the Tag Chooser:

   1. Open index.htm in Code view, if it’s not already open.
   2. In the code for the first table, find and select the code for the Location button you
      inserted in the last section.

        Note: Make sure you highlight the entire <img> tag.

   3. Right-click the selected text, and then select Insert Tag from the popup menu.




        The Tag Chooser appears.




---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -٥-
                                                Where “Smart” Start
                                                                                         Dream Weaver MX Coding




   4. Choose HTML Tags, Page Elements, General, and then select A in the right pane.

        Note: You can also choose HTML Tags, and then select the A tag in the right pane,
        without first selecting Page Elements, General.

   5. Click Insert.
      A tag editor for the anchor tag (<a>) appears.




---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -٦-
                                                Where “Smart” Start
                                                                                         Dream Weaver MX Coding




   6. In the HREF text box, enter location_start.htm or click the Browse button to browse
      to the file.

        Note: If you want to link to a web page, enter the page’s URL.

   7. Click OK to close the tag editor.
   8. Click Close to close the Tag Chooser.

        Dreamweaver inserts the code in your page to create the link.

   9. In the Document window, choose File > Save.

Edit a tag

Next, you’ll use the Tag Inspector to find a specific tag in the Locations page and quickly
make changes to it.

To edit a tag using the Tag Inspector:


---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -٧-
                                                Where “Smart” Start
                                                                                         Dream Weaver MX Coding



   1. Open location_start.htm in Code view, if it’s not already open.
   2. Do one of the following to open the Tag Inspector, if it’s not already open:
        o Choose Window > Tag Inspector.
        o In the Code panel group, click the Tag Inspector tab.

                 The Tag Inspector gives you a structured view of all the tags in your page. It
                 also displays the attributes of each tag.




   3. In the Document window Code view, find the text for the heading “Rental
      Locations.”
---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -٨-
                                                Where “Smart” Start
                                                                                         Dream Weaver MX Coding




   4. Select the non-breaking space entity (&nbsp;) between the paragraph tags that
      follow the heading:

        <p><FONT SIZE="+2" COLOR="#FF6600">Rental Locations</FONT></p>
        <p>&nbsp;</p>

   5. Choose Insert > Table, then click OK in the Insert Table dialog box to accept the
      default values.

        Dreamweaver inserts table code.

   6. Click the Refresh button on the toolbar.

        The Tag Inspector panel updates so that focus is on the Table tag you just inserted.
        A list of attributes appears below the tag.




---------------------------------------------------------------------------------------------------------------------------
                                                                                                                         -٩-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding



   7. In the Document window, click a few different tags to see how the Tag Inspector
      updates the tag and attributes it displays, then click the Table tag again so that its
      attributes appear in the Tag Inspector.
   8. In the Tag Inspector panel, click in the empty text box beside the align attribute.

        An arrow for a pop-up menu appears.




   9. Click the pop-up menu arrow, and select center.


        Dreamweaver changes the code in the Document window.

   10. Click the Show Design View button on the toolbar or choose View > Design to see
       the table.
   11. In the Document window, choose File > Save.

Look up information about a tag



---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٠-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding



If you need help with a tag’s attributes and attribute values, you can look up reference
information within Dreamweaver.

To look up information about a tag:

You can choose Window > Reference to access the Reference panel. This panel is
integrated in the development environment in the Code group panel.
For information about a specific tag attribute, select the attribute from the pop-up menu.




Add an image with Code Hints

In this lesson you’ll add a logo to the Locations page.

---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١١-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding




To add code to the page manually, simply click in the Document window and start typing.
You can also use the new Code Hints feature in Dreamweaver to speed up your work.

To write code with the help of Code Hints:

   1. Open location_start.htm in Code view, if it’s not already open.
   2. Find the code for the table row that contains the text “The International Car Rental
      Specialists”; select the non-breaking space entity (&nbsp;) in the code for the cell
      that comes before that text:

        <td rowspan="2" bgcolor="#424973">&nbsp;</td>

   3. Type the opening bracket (<) of the image tag.

        A list of tags appears at the insertion point.




   4. Select the img tag from the list, and then press Enter to insert the tag.

        Tip: To quickly scroll to a tag, type the first letter of the tag.

   5. Press the Spacebar to display a list of attributes for the tag.
   6. Type src, and then press Enter.

        A Browse button appears below the code you just typed.

---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٢-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding




   7. Select the browse button to navigate to the image file or enter the image file path,
      Assets/images/logo.jpg.
   8. Press the spacebar, select the alt attribute, and then press Enter.
   9. Type Logo, then move the cursor to the right of the quotation mark that appears
      after the word Logo.



   10. Press the spacebar, select the align attribute, and then press Enter.

        A list of known values for the align attribute appears.




   11. Select top from the list, and then press Enter.
   12. Type a closing bracket (>) to complete the tag.
   13. In the Document window, choose File > Save.

To add an attribute to an existing tag, place the insertion point just before the tag’s closing
bracket (>) and press the Spacebar. A list of attributes appears. Add the attribute and
specify its value, if any.

Check your changes

After making any change to your code, you can get immediate visual feedback.
---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٣-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding



To see a visual representation of your code, do either of the following:

   •    Click the Show Design View button on the toolbar or select View > Design.
   •    View the page in a web browser by pressing F12. To close the browser and return to
        your code, press Alt-F4.

Add a link with the Insert bar

Now, you’ll add a link to the logo image you inserted so that when the user clicks it, the
home page opens.

One way you can create the link is by simply placing an anchor tag (<a>) around the
image tag in the code and setting the anchor tag’s attributes—with or without the help of
Code Hints. Another way to add the link is to use the Insert bar.




To write code with the help of the Insert bar:

   1. Open location_start.htm in Code view, if it’s not already open.
   2. Highlight the code for the logo.jpg image you inserted.

        Note: Make sure you highlight the entire <img> tag.

   3. In the Common tab of the Insert bar, click the Hyperlink button.




        The Hyperlink dialog box appears with the image tag already entered.




---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٤-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding




   4. In the Link text box, enter index.htm or click the folder icon to browse to it.

        Note: To link to a web page, enter the page’s URL.

   5. Click OK.

        Dreamweaver inserts the code in your page to create the link around the image.

   6. Choose File > Save.

Printing your code

You can print your code to edit it offline, archive it, or distribute it.

To print the code:

   1. Open a page in Code view.
   2. Choose File > Print Code.


        Tip: To print with line numbers, choose View > Code View Options > Line
        Numbers before you print.

Optimizing and Debugging Your Code



---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٥-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding



You can use Macromedia Dreamweaver MX to optimize and debug your code. For
example, you can validate your tags.

Cleaning up your code

Use the Clean Up HTML or command to remove empty tags, combine nested font tags,
and otherwise improve messy or unreadable HTML code.

To clean up the code:

   1. Open a document.
          o If the document is in HTML, choose Commands > Clean Up HTML.
   2. In the dialog box that appears, select from the following options:
          o Remove Empty Container Tags removes any tags that have no content
             between them. For example, <b></b> and <font
             color="FF0000"></font> are considered empty tags, but the <b> tag
             in <b>some text</b> is not.
          o Remove Redundant Nested Tags removes all redundant instances of a tag.
             For example, in the code <b>This is what I <b>really</b>
             wanted to say </b>, the b tags surrounding the word “really” are
             redundant and would be removed.
          o Remove Non-Dreamweaver HTML Comments removes all comments that
             were not inserted by Dreamweaver. For example, <!--begin body
             text--> would be removed, but <!-- #BeginEditable
             "doctitle" --> wouldn’t, because it’s a Dreamweaver comment that
             marks the beginning of an editable region in a template.
          o Remove Dreamweaver Special Markup
          o Remove Specific Tag(s) removes the tags specified in the adjacent text field.
             Use this option to remove custom tags inserted by other visual editors and
             other tags that you don’t want to appear on your site (for example, blink).
             Separate multiple tags with commas (for example, font, blink).
          o Combine Nested <font> Tags When Possible consolidates two or more
             font tags when they control the same range of text. For example, <font
             size="7"><font color="#FF0000">big red</font></font>

---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٦-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding



                would be changed to <font font="7" font="#FF0000">big
                red</font>.



            Show Log on Completion displays an alert box with details about the
            o
            changes made to the document as soon as the cleanup is finished.
   3. Click OK.

        Depending on the size of your document and the number of options selected, it may
        take several seconds to complete the cleanup.

Verifying that tags and braces are balanced

As you write and edit your code in Code view or the Code inspector, you can check to
make sure the tags or braces ({ }) in the page are balanced. Checking to see if tags are
balanced ensures that all tags have matching opening tags and closing tags, and is
especially useful when you use multiple nesting levels in your code—for example, if you
have nested tables within other tables.

To check for balanced tags:

   1. Open the document in Code view.
   2. Place the insertion point in the nested code you want to check.
   3. Choose Edit > Select Parent Tag.

        The enclosing matching tags are highlighted in your code. If you keep choosing Edit
        > Select Parent Tag, and your tags are balanced, eventually Dreamweaver will
        highlight the outermost <html> and </html> tags.

To check for balanced braces:

   1. Open the document in Code view.
   2. Place the insertion point in the nested code you want to check.
   3. Choose Edit > Balance Braces.


---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٧-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding



        The enclosing matching tags are highlighted in your code. Choosing Edit > Balance
        Braces again will highlight the matching tags that enclosed the previous selection.

Indenting code blocks

As you write and edit your code in Code view or Code inspector, you can indent code
blocks to visually separate the block from the rest, making it easier to find.

To indent a code block:

   1. Select the line or lines of the code block that you want to indent. (You must select
      the entire line.)



   2. Choose Edit > Indent Code.

The code is indented. Choose Edit > Outdent Code to move the indented code back.

Copying and pasting code

You can copy and paste source code from another application or from Code view itself.
You can copy and paste the code as text or as code with tags intact.

To copy and paste source code as text:

   1. Copy the code from Dreamweaver or another application.
   2. Place the insertion point directly in Design view, and choose Edit > Paste.

To copy and paste source code with tags intact:

   1. Copy the code from Dreamweaver or another application.

        To copy from Design view, choose Edit > Copy as HTML.

   2. Do one of the following:
        o In Code view, position the insertion point, and choose Edit > Paste. If you are
           using Design view, press F5 to update its display of the document.
---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٨-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding



            o   In Design view, position the insertion point, and choose Edit > Paste as
                HTML.

Inserting HTML comments

A comment is descriptive text that you insert in the HTML code to explain the code or
provide other information. The text of the comment appears only in Code view and will
not display in your web page in the browser.

To insert a comment:

   1. In Code view or Design view, place the insertion point where you want the
      comment.
   2. Click the Comment icon on the Common tab of the Insert bar.




        Use the tooltips to identify the Comment icon.

            o   In Code view, Dreamweaver inserts a <!-- --> tag in the page. Enter your
                comment inside the tag.
            o   In Design view, Dreamweaver displays the Comment dialog box. Enter your
                comment and click OK.




---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -١٩-
                                                Where “Smart” Start
                                                                                        Dream Weaver MX Coding




---------------------------------------------------------------------------------------------------------------------------
                                                                                                                       -٢٠-
                                                Where “Smart” Start

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:12
posted:11/18/2012
language:
pages:20