Showing posts with label Dreamweaver. Show all posts
Showing posts with label Dreamweaver. Show all posts

Wednesday, December 16, 2015

How to insert and play media objects in Macromedia Dreamweaver?

You an insert a Flash move or object, QuickTime or Shockwave move, Java applet, ActiveX control, or other audio or video objects in a Dremweaver document.

To insert a media object in a page:
1.                  Place the insertion point in the Document window where you want to insert the object, then do one of the following:
·        In the Insert bar, select Media, then click the button for the type of object you want to insert, or drag it to the Document window.
Dreamweaver

                  ·        Choose the appropriate object from the Insert > Media or Insert > Interactive Images 
                         submenu.
In most cases, a dialog box appears letting you select a source file and specify certain parameters for the media object.

        Adding video
            You can add video to your web page in different ways and using different formats. Video can be downloaded to the user or it can be streamed so that it plays while it is downloading. The most common streaming formats available on the web for the transmission of video files are Realmedia, QucikTime, and Windows Media. You must download a helper application to view these formats. With these formats, you can stream audio and video simultaneously.

            If you’d like to include a short clip that can be downloaded rather than streamed, you can link to the clip or embed it in your page. These clips are often in the AVI or MPEG file format.

            You can use Director to create Shockwave movies for Flash to create interactive, low-bandwidht, multimedia presentations for the web. With Flash, file size is surprisingly small, and the technology works across many platforms. (Of course, users must first download the free paler plug-in before they can view these files.)

How to create a CSS style sheet in Dreamweaver?

1.                  Choose File > New.
2.                  In the New Document dialog box, select the CSS style Sheets category from the category list on the left.
The list in the middle column of the dialog box is relabeled CSS Style Sheets. A list of pre-designed style sheets appears.
3.                  In the CSS Style Sheets list, select a style sheet. For the Global Car rental site, select Basic: Verdana, which redefines the body, td, and the tags by specifying fonts for them. Then click create

Dreamweaver creates a new text file containing a small set of predefined CSS styles.
4.                  Choose File > Save to save the new CSS file. Save it in the site’s assets folder; name it text.css (or any other name you like).
5.                  Choose File > Close to close the CSS file.

To style your text using CSS styles:
1.                  In the window menu, choose and HTML file (such as index.html).
Note: If your system preferences are set to now show file extensions, the index.html file appears in the window menu with the name index.
2.                  Choose Window > CSS Styles to display the CSS Style panel.
3.                  A the top of the CSS  Styles panel, click the Edit Styles radio button to show available styles.
If you haven’t previously defined styles for this document, no styles are available.
       1.                  At the bottom of the CSS Style panel, click the Attach Style Sheet button.
2.                  In the Link External Style Sheet dialog box, click Browse to locate a style sheet.
3.                  In the Select Style Sheet File dialog box browse to and select the new style sheet you created in the assets folder, then click OK (Windows) or Choose (Macintosh) to attach the style sheet.
4.                  In the Link External Style Sheet dialog box, click OK to attach the style sheet.
The style sheet’s name and contents appear in the CSS Style panel. The styles defined in the style sheet are applied to the text in the HTML document. For example, body text appears in Verdana.
5.                  Save your document.

To edit the styles in the style sheet:
1.      At the top of the CSS Style panel, click the Edit Styles radio button to show available styles.
2.      Select the name of the CSS file in the CSS Styles panel and click the Edit Style Sheet button at the bottom of the CSS Style panel.
A dialog box appears showing the names of the styles in the style sheet.
                  3.   Select one of the styles, such as body, and click Edit.
                        The CSS Style Definition dialog box appears.
                  4.   Enter a size for the text, such as 13 pixels. Adjust other options as you like.
                  5.   Click OK to redefine the style.
                  6.   Edit the other styles. To create the styles used in the Global Car Rental site, set the body, td,
                        and the styles to a size of 13 pixels.
                        When you're done editing styles, click the save button to save your changes and close the 
                        stylesheet dialog box.
                        The changed styles are applied to your document. For example, body text appars in 13-pixel
                        verdana.

Set a style for links.
              With the new styel appled you can barely distinguish the hypertext links in the documents. Let's create a style for the links.
          1.     In the CSS Styles panel, click the New CSS Style button (+) locateed at the bottom of the 
                  panel.
                  The New CSS Style dialog box appears.
          2.     In Type, select Use CSS Selector.
          3.     In the Selector pop-up menu, select a: link.
          4.     In Define In, select This Document Only.
          5.     Click OK.
                  The CSS Style definition dialog box appears.
          6.     Set the following Type attributes for the Link:
                  In Decoration, select Overline
          7.     In color, in the text box, enter #FFCC99.
          8.     Click OK.
          9.     To see the style you applied to the links you must view the page in a browser, press F12 to 
                  preview your page.

How to work with HTML style in Dreamweaver?

HTML style are he pre-formatted (pre-defined) styles, which are used to format contents of a page (normally texts; headings; body text etc.) more easily and quickly. An new style can also be created as well as can also be edited existing formats.

Creating an HTML style

            You can create styles in two ways; you can format the text in the document and then create a style based on the selected text or you can create a style in the HTML Styles  panel by selecting the formatting attributes you want to apply.

To create a new HTML style:
1.                  In the HTML panel, click the New Style icon; you can also choose Text > HTML Style > New  Style. The Define HTML Style dialog box appears.
2.                  In the Name text box, enter a name for the style.
3.                  Under Apply To, choose how this style will be applied by doing one of the following:
To set a selection style, choose selection.
To set a paragraph style, choose Paragraph.
        Note: A paragraph style applies to the entire text block in which the insertion point
                  is located, regardless of what text is actually selected.
4.                  For when Applying, choose whether to apply the HTML style in addition to the existing style of the selected text or paragraph, or to clear the formatting of the selection or paragraph and apply the new HTML style.
5.                  Under Font Attributes, use the pop-up menus to select the formatting options you want to apply.
6.                  If you are creating a paragraph style, under Paragraph Attributes, in the Format pop-up menu, choose a paragraph tag (for example, paragraph, Heading1, Preformatted).
7.                  For Alignment, click the left, center, or right alignment button to set the paragraph alignment you want.
8.                  Click OK.

Applying an HTML style
      Applying a style is as selecting the text or paragraph you want the style applied to , and then selecting the style in the HTML styles panel.
1        In the lower left corner of the HTML Styles panel make sure the apply option is selected to automatically apply the style you select.
2        In the Document window do one of the following to select the text you want the style applied to:
Place the inserting point anywhere in a paragraph to apply a paragraph style.
Use the cursor to select the text you want a selection style applied to.
3.      In the HTML Styles panel, click the HTML Style you want to apply to the text.
The text automatically updates in the Document window.

Editing an HTML Style
            When you edit and HTML Style, Dreamweaver does not automatically update text that was previously formatted using the HTML Style. To update the style to previously formatted text, you must manually re-apply the style.

To edit an existing HTML style:
1.                  Make sure no text is selected in the Document window.
2.                  In the HTML Style panel, make sure the Auto Apply checkbox is deselected.
If the Auto Apply option is turned on, the HTML style will be applied when you select it in the HTML Style panel.
3.                  In the HTML styles panel, do one of the following:
Right-click the style, then choose Edit from the context menu.
The Define HTML Style dialog box appears.
4.                  In the dialog box, set style attribute options for the style.
5.                  To reset it to the default options click clear.

About the Quick Tag Editor
            The quick Tag editor has three modes:
·                    Insert HTML mode to insert new HTML CODE.
·                    Edit Tag mode to edit an existing tag.
·                    Wrap Tag mode to wrap a new tag around the current selection.
The mode in which the Quick Tag Editor opens depends on the current selection in Design view. In all there modes, the basic procedure for using the Quick Tag Editor is the same:  open the editor, enter or edit tags and attributes, and then close the editor.
      You can cycle through the various modes by pressing Control+T while the Quick Tag Editor is active.
      If you use any invalid HTML in the Quick Tag Editor, Dreamweaver attempts to correct it for you by inserting closing quotation marks and closing angle brackets where needed.

Inserting an HTML tag with the Quick Tag Editor
      You can use the Quick Tag Editor to insert an HTML tag in your document.
  1. In Design view, click in the page to place the inserting point where you want ot insert code.
  2. Press Control+T.
The Quick Tag Editor opens in Insert HTML mode.
  1. Enter the HTML tag and press Enter.
The tag is inserted into your code.
       4.   Press Escape to exit without making any changes.

Saturday, December 12, 2015

How To Attach Stylesheet in HTML

Hello my friends if you are try to learn HTML and CSS but you don't know how to attach stylesheet in html but also there are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents so please follow the bellow steps.

1. see the feagure of attached stylesheet


Your code is must be look like above the image
so if you want to attach stylesheet please goin to the below of the <title>your site name</title>
section
and type or copy the below code and paste after the </title> tag.
<link rel="stylesheet" href="css/style.css">
Note: change value of css and style what is desired name in to the folder
The CSS is folder name and style.css is stylesheet name
so please make sure it what is have inside of your system folder