1 / 45

Domain 4

Domain 4. Adding Content by Using Dreamweaver CS5. Define a Dreamweaver Site. You must define a local site to improve your workflow and ensure your site works properly Local site : keeps track of links between web pages and dependent files that are assocaited with the website

saul
Download Presentation

Domain 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Domain 4 Adding Content by Using Dreamweaver CS5

  2. Define a Dreamweaver Site • You must define a local site to improve your workflow and ensure your site works properly • Local site: keeps track of links between web pages and dependent files that are assocaited with the website • Root folder: created to save web pages, images, templates, CSS files, and other dependent files

  3. Define a Dreamweaver Site • Once you define the local site, Dreamweaver automatically creates templates and library folders in the local root folder • You will need to define a remote site after you have created a local site so that you can publish your website

  4. Define a Dreamweaver Site • Remote site: the location to which you will publish your website • You can publish a remote site to a File Transfer Protocol (FTP) web server or to a local/network folder using a mapped drive • Web Server: a server that processes websites on the Internet via a web browser

  5. Define a Dreamweaver Site • Dreamweaver will duplicate the local site structure to the remote site through the defined site that you have created • The Servers category in the Site Setup dialog box is where you select the web server that will host your site

  6. Create, Title, Name and Save a Web Page • The home page of the website needs to be named either index.htm or default.htm • Your ISP guidelines tell you which is required for your website to work properly • File, asset and folder names should be one word, lower-case, alphanumeric characters and should begin with a letter

  7. Create, Title, Name and Save a Web Page • Uniform Resource Locater (URL): the address of a web page or asset on the Internet • A web page title is what a user sees in the title bar of the browser

  8. Add Text to a Web Page • You can type text into a page, copy and paste it from another file, or import it from Word, Excel or .txt files • By default, a <p> tag is created when you begin typing • When you press Enter, Dreamweaver automatically creates a new set of <p> tags

  9. Insert Images and Apply Alternative Text on a Web Page • Images make the page more visually appealing to your user • You can add images to a web page in different ways: • Insert Image command on the Insert Panel • Click the Images icon on the Assets panel and click Insert at the bottom of the Assets panel • Simply drag an image from the Assets panel to the location on the page

  10. Insert Images and Apply Alternative Text on a Web Page • You can add alternate text in the Image Tag Accessibility Attributes dialog box or in the Alternate Text text box in the Property Inspector

  11. Insert Images and Apply Alternative Text on a Web Page • Three commonly used file formats for graphics: • GIF: Graphic Interchange Format, a bitmap image format for pictures with up to 256 distinct colors. Supports transparency • JPEG: Joint Photographic Experts Group; supports millions of colors and can be compressed to reduce file size; often used for digital images • PNG: Portable Network Group; a more flexible file format that supports a smaller file size

  12. Insert Images and Apply Alternative Text on a Web Page • Two ways to work with Photoshop files: • Copy selected slices or layers and paste directly into Dreamweaver as a web-ready image; if changes are necessary, they would be made in Photoshop • Work with smart objects

  13. Insert Images and Apply Alternative Text on a Web Page • Smart object: a Photoshop file that has been placed into Dreamweaver whose source information retains a connection to the original Photoshop file • Contains a green icon in the upper-left corner of the image • When a smart object is updated in Photoshop, the icon turns reds indicating the image needs updated • To update, select the image, then click the Update from Original button in the Property Inspector

  14. Insert Images and Apply Alternative Text on a Web Page • Images can be resized directly in Dreamweaver • Resizing an image does not alter the original image file • After resizing, you should also resample the image to reduce its file size and improve download performance

  15. Insert Images and Apply Alternative Text on a Web Page • To resample: Select the Image and then click the Resample button in the Property Inspector • To return an image to its original size: Select the Image and then click the Reset size button in the Property Inspector

  16. Link Web Content, Using Hyperlinks, E-Mail Links and Named Anchors • Hyperlink: text that when clicked takes the user to another web page or opens a file • E-Mail link: activates the user’s default e-mail program and adds the recipient’s e-mail address automatically • Named anchor: adds navigation to a specific location on the same web page or to a specific location on another page within the site

  17. Link Web Content, Using Hyperlinks, E-Mail Links and Named Anchors • Absolute path: a link that identifies the entire URL. Used when the page or file is located on a different server or is an external website • Site-root-relative path: shows the path from the site’s root folder to a page or file located outside the local site • Document-relative path: used for local links within a local site

  18. Link Web Content, Using Hyperlinks, E-Mail Links and Named Anchors • Target Types: • _blank: opens a new browser window with the linked page or file, leaving the current window open • _parent: used when working with framesets • _self: opens the link in the current browser window, replacing the current page • _top: used when working with framesets • _new: similar to _blank

  19. Insert Rich Media • You can insert content in Dreamweaver that has been creates with Flash such as SWF or FLV (Flash video) files • 3 ways: • Click Insert on the Application bar and then click a file type • Click the Media button on the Insert Panel • Click the SWF, Shockwave or Movies buttons on the Assets Panel

  20. Insert Rich Media • Flash File Formats: • FLA: native file format for a Flash source file that can only be opened in Flash; can be published from Flash as a SWF, HTML or FLV file • SWF: An exported or published FLA file that has been optimized for viewing on the internet; often used to play animations; can be previewed in Dreamweaver; cannot be edited • FLV: a video file that can be viewed with a Flash player

  21. Insert Rich Media • When you insert a SWF file, the Select SWF dialog box opens • If the SWF file is not currently located in your root folder, Dreamweaver prompts you to copy the file • Live View mode allows you to view the SWF file without leaving Dreamweaver

  22. Insert Rich Media • When you insert a FLV file, the Insert FLV dialog box opens, where you can browse for the file and set the skin playback controls and size of the placeholders • If the FLV file is not currently located in your root folder, Dreamweaver prompts you to copy the file

  23. Insert Rich Media • FLV video types: • Progressive Download Video: downloads the FLV file to the hard disk of the visitor, and the video begins to play before the download is complete • Streaming Video: delays playback for a short time until the video loads in the buffer to provide a smooth playback You must have access to the Adobe Flash Media Server to enable Streaming Video on a web page

  24. Insert Rich Media • When you insert a SWF or FLV file into a document, Dreamweaver automatically inserts code that detects whether the visitor has the correct version of Flash player

  25. Insert Rich Media • You can add different types of sound files and formats to a document • Some factors to consider before deciding on a format and method for adding sound are: • Purpose • Audience • File size • Sound quality • Difference in browsers

  26. Insert Rich Media • Commonly used audio file formats: • .midi or .mid: The Musical Instrument Digital Interface format is for instrumental music, does not require a plug-in and is supported by many browsers • .wav: The Waverform format has a good sound quality, does not require a plug-in, and is supported by many browsers; you can record your own WAV files from a CD or microphone

  27. Insert Rich Media • .aif: The Audi Interchange File Format, has good sound quality, does not require a plug-in, and can be played by most browsers; you can also record AIFF files from a CD or microphone • .mp3: The Motion Picture Experts Group Layer 3 is a compressed formats that creates substantially smaller sound files. If an mp3 files is recorded and compressed correctly, its quality can equal that of a CD. Users must install a plug-in such as QuickTime, Windows Media Player or RealPlater to play mp3 files

  28. Insert Rich Media • .qt. .qtm, .mov: The QuickTime (MOV) format was developed by Apple for both audio and video; the plug-in required to run a QuickTime file is installed on Macintosh operating systems, and is also available for PC

  29. Insert Navigation Bars, Rollover Images and Buttons Created in Fireworks • You can use Fireworks to design and create navigation bars, rollover images and buttons, and then export them for use in Dreamweaver • In Fireworks, you select HTML and Images as the export type • In Dreamweaver, you insert the object by pointing to Image Objects on the Insert Menu, and then click Image Placeholder, Rollover Image of Fireworks HTML, depending on the object

  30. Insert Navigation Bars, Rollover Images and Buttons Created in Fireworks • Rollover image: an image that, when the mouse passes or rolls over it, will change to another image • The Insert Rollover Image dialog box allows you to select both the original and rollover images, enter alt text and create a link

  31. Build Image Maps • Image map: an image that has clickable, linked areas, known as hotspots. • Any image can be turned into an image map by simply drawing hotspots • Hotspot: an area on an image that is clickable and contains a link

  32. Build Image Maps • The hotspot tools become available in the Property Inspector when you select an image • There are three hotspot tools: • Rectangle, circle and polygon • If you have more than one image map on a page, it is important to name the image map in the Map name box in the Property Inspector • Dreamweaver names images maps Map by default

  33. Import Tabular Data to a Web Page • Dreamweaver allows you to import tabular data one of three ways: • Click File on the Application bar, point to Import, click Tabular data • Click Insert on the Application bar, point to Table Objects, click Import Tabular Data • On the Insert panel, click the Data category, then click the Import Tabular Data button

  34. Import Tabular Data to a Web Page • The Import Tabular Data dialog box allows you to set the initial settings for your table; you can modify these settings later in the Property Inspector

  35. Import & Display a Microsoft Word or Excel Document • Click the Import command on the File menu to select either a Word or and Excel file • Dreamweaver provides several import options that support the original structure and formatting in the source document

  36. Import & Display a Microsoft Word or Excel Document • Import options: • Text only: text is imported without formatting; if the original text is formatted all the formatting is removed • Text with structure: text is imported with the structure of the document’s paragraphs, lists and tables; formatting such as bold and italics is not maintained • Text, structure, basic formatting: the structure and basic formatting are maintained

  37. Import & Display a Microsoft Word or Excel Document • Import options, cont: • Text, structure, full formatting: the structure, basic formatting and styles are maintained • Clean up Word paragraph spacing: if either the Text with structure or Text, structure, basic formatting are selected, this option removes extra space between paragraphs

  38. Import & Display a Microsoft Word or Excel Document • You can add a link to a Microsoft Word or Excel document into a web page • Drag the document to the location on the page where you would like the link to appear • In the Insert Document dialog box, you can select to insert the contents or to create a link • The linked text is the name of the linked file, which you can edit

  39. Import & Display a Microsoft Word or Excel Document • You can create Forms in Dreamweaver to gather information from visitors • Visitors can submit a form by clicking the submit button ; the info is sent to a server • The server-side script or application processes the data either via e-mail or through an application server such as PHP, ASP or ColdFusion

  40. Import & Display a Microsoft Word or Excel Document • You can insert Forms by: • Using the Forms command on the Insert menu • Clicking the Form button in the Forms category on the Insert panel • When you create the Form a red dashed line indicates the boundaries of the form • You must place form objects within these boundaries • Form objects: allows users to enter information

  41. Import & Display a Microsoft Word or Excel Document • Form objects on the Insert Panel: • Text field: accepts any type of alphanumeric text entry • Checkbox: users can select multiple responses within a single group of check boxes • Option button: users can select only one response within a single group of option buttons • File or image field: lets users browse to a file or an image on their computer and upload the file as form data

  42. Import & Display a Microsoft Word or Excel Document • Form objects, cont • Buttons: used to submit form data or to reset the form; other actions such as totaling the cost of items can also be defined in a script • List menus: values are displayed within a scrolling list; users may select multiple options

  43. Import & Display a Microsoft Word or Excel Document • The form information is sent to the server using either the POST or GET method

  44. Import & Display a Microsoft Word or Excel Document • The POST method: • Sends info to the web server with a header and a body message • Use this method when: • Inserting, updating or deleting records on a server • Data that is sent by e-mail

  45. Import & Display a Microsoft Word or Excel Document • The GET method • Default value • Form data is encoded in the URL • The URL is composed of: • Name of the page • Form data • Limited to 2,000 characters • This info can be seen by anyone viewing the web page

More Related