Dreamweaver Domain 4: Adding Content By Using

2y ago
12 Views
2 Downloads
1.52 MB
41 Pages
Last View : 22d ago
Last Download : 2m ago
Upload by : Roy Essex
Transcription

Dreamweaver Domain 43Dreamweaver Domain 4: Adding Contentby Using Dreamweaver CS5Adobe Creative Suite 5ACA Certification Preparation:Featuring Dreamweaver, Flash, and Photoshop1KellerAdobe CS5 ACA Certification Prep

ObjectivesDefine a Dreamweaver site.Create, title, name, and save a web page.Add text to a web page.Insert images and apply alternative text on aweb page.Link web content, using hyperlinks, e-mail links,and named anchors.Dreamweaver Domain 43 2Keller Adobe CS5 ACA Certification Prep

Objectives (continued)Dreamweaver Domain 43 3 Insert rich media such as video, sound, andanimation in Flash format.Insert navigation bars, rollover images, andbuttons created in Fireworks on a web page.Build image maps.Import tabular data to a web page.Import and display a Microsoft Word or MicrosoftExcel document to a web page.KellerAdobe CS5 ACA Certification Prep

Vocabularyabsolute pathdocument-relativepathe-mail linkForm objectshotspothyperlinkDreamweaver Domain 43 4Keller image maplocal sitenamed anchorProgressiveDownload Videoremote siterollover imageAdobe CS5 ACA Certification Prep

Vocabulary (continued)root foldersite-root-relative pathsmart objectStreaming VideoUniform ResourceLocatorWeb serverDreamweaver Domain 43 5Keller Adobe CS5 ACA Certification Prep

Domain 4.0 Adding Content byUsing Dreamweaver CS5Dreamweaver Domain 43 6 This domain focuses on adding content toyour website.Content can include text that you typedirectly into your web page or that you addfrom an existing Microsoft Word or Exceldocument.To add visual interest to your site, you canalso add images, video, and sound.KellerAdobe CS5 ACA Certification Prep

Objective 4.1 Define a Dreamweaver SiteDreamweaver Domain 43 7 Define a local site to improve your workflow andensure that your site works properly.A local site keeps track of links between webpages and dependent files that are associatedwith the website.You should create a folder in which to save theweb pages, images, templates, CSS files, andother dependent files: this is referred to as aroot folder.KellerAdobe CS5 ACA Certification Prep

Objective 4.1 Define a Dreamweaver Site(continued)Dreamweaver Domain 43 8 You can publish a remote site to a File TransferProtocol (FTP) web server, or to a local/networkfolder using a mapped drive.A web server is a server that processeswebsites on the Internet via a web browser.Dreamweaver will duplicate the local sitestructure to the remote site through the definedsite that you have created.KellerAdobe CS5 ACA Certification Prep

Objective 4.2 Create, Title, Name, and Save aWeb PageDreamweaver Domain 43 9 Create a new page from the Dreamweaver Startpage or from the File menu.The home page of the website needs to benamed either index.htm(l) or default.htm(l); yourISP guidelines tell you which is required for yourwebsite to work properly.File, asset, and folder names should be oneword, lowercase, alphanumeric characters andshould begin with a letter.KellerAdobe CS5 ACA Certification Prep

Objective 4.2 Create, Title, Name, and Save aWeb Page (continued)Dreamweaver Domain 43 10 The URL (Uniform Resource Locator) is theaddress of a web page or asset on the Internet.The address includes the web page filename,folders, and assets, if appropriate.A web page title is what a user sees in the titlebar of the browser.KellerAdobe CS5 ACA Certification Prep

Objective 4.3 Add Text to a Web PageDreamweaver Domain 43 11 You can type text into a page, copy and paste itfrom another file, or import it from Word, Excel,or .txt files.A paragraph tag p is created when you begintyping.When you press Enter (Win) or return (Mac),Dreamweaver automatically creates a new setof paragraph tags for you.KellerAdobe CS5 ACA Certification Prep

Objective 4.3 Add Text to a Web Page(continued)Dreamweaver Domain 43 12When you press and hold Shift Enter (Win) orShift return (Mac), you add a break tag br/ within a paragraph and move the text to the nextline.KellerAdobe CS5 ACA Certification Prep

Objective 4.4 Insert Images and ApplyAlternative Text on a Web PageDreamweaver Domain 43 13You can add images to a web page in different ways.However you insert an image, the Image TagAccessibility Attributes dialog box opens, prompting youto add an alternate text tag.KellerAdobe CS5 ACA Certification Prep

Objective 4.4 Insert Images and ApplyAlternative Text on a Web Page (continued)Dreamweaver Domain 43 14You can edit or add alternate text after you haveinserted an image by selecting the image in thedocument window and then typing the text in theAlternate text text box in the Property inspector.KellerAdobe CS5 ACA Certification Prep

Objective 4.4 Insert Images and ApplyAlternative Text on a Web Page (continued)Dreamweaver Domain 43 15Three file formats for graphics are commonly usedin web pages: GIF, JPEG or JPG, and PNG.KellerAdobe CS5 ACA Certification Prep

Objective 4.4 Insert Images and ApplyAlternative Text on a Web Page (continued)Dreamweaver Domain 43 16There are two ways to work with Photoshop files inDreamweaver:––KellerThe first is to copy selected slices or layers andpaste them directly into Dreamweaver as a webready image.The second method is to work with smart objects. Asmart object is a Photoshop file that has beenplaced into Dreamweaver whose source informationretains a connection to the original Photoshop(PSD) file.Adobe CS5 ACA Certification Prep

Objective 4.4 Insert Images and ApplyAlternative Text on a Web Page (continued)Dreamweaver Domain 43 17 A smart object contains agreen icon in the upperleft corner of the image.When the object hasbeen updated, the iconturns red, which servesas a visual clue that thechanges need to besynchronized inDreamweaver.KellerAdobe CS5 ACA Certification Prep

Objective 4.4 Insert Images and ApplyAlternative Text on a Web Page (continued)Dreamweaver Domain 43 18 You can resize imagesby selecting the imageand then dragging asizing handle.To maintainproportions of theimage, press and holdShift, and then drag acorner selectionhandle.KellerAdobe CS5 ACA Certification Prep

Objective 4.5 Link Web Content, UsingHyperlinks, E-Mail Links, and Named AnchorsDreamweaver Domain 43 19 A hyperlink is the text that when clicked takes the userto another web page or opens a file.An e-mail link activates the user’s default e-mailprogram and adds the recipient’s e-mail addressautomatically.A named anchor adds navigation to a specific locationon the same web page or to a specific location onanother page within the site.KellerAdobe CS5 ACA Certification Prep

Objective 4.5 Link Web Content, UsingHyperlinks, E-Mail Links, and Named Anchors(continued)Dreamweaver Domain 43 20 An absolute path is a link that identifies the entireURL, such as http://www.adobe.com.A site-root-relative path shows the path from the site’sroot folder to a page or file located outside the localsite. It begins with a forward slash (/) that represent theroot folder, such as /market/images/banner.jpg.You use a document-relative path for local links withina local site. The link identifies only the portion of thelinked file that is different, such as images/banner.jpg.KellerAdobe CS5 ACA Certification Prep

Objective 4.5 Link Web Content, UsingHyperlinks, E-Mail Links, and Named Anchors(continued)Dreamweaver Domain 43 21In the Hyperlinkdialog box, youenter the text ofthe link, set thelink, and set atarget on theTarget pop-upmenu.KellerAdobe CS5 ACA Certification Prep

Objective 4.5 Link Web Content, UsingHyperlinks, E-Mail Links, and Named Anchors(continued)Dreamweaver Domain 43 22You can create an e-mail link as a hyperlink byplacing the insertion point at the location where youwant the e-mail link to be located. Next, open theEmail Link dialog box and type the text you wantfor the hyperlink in the Text text box, and then typethe e-mail address in the Email text box.KellerAdobe CS5 ACA Certification Prep

Objective 4.5 Link Web Content, UsingHyperlinks, E-Mail Links, and Named Anchors(continued)Dreamweaver Domain 43 23 Creating a named anchor is a two-step process.First, you create the named anchor, and then youcreate the link to the named anchor.The Named Anchor dialog box is where you cantype a name for the anchor in the Anchor nametext box, such as top.KellerAdobe CS5 ACA Certification Prep

Objective 4.6 Insert Rich Media such asVideo, Sound, and Animation in Flash FormatDreamweaver Domain 43 24You can insertcontent inDreamweaver thathas been createdwith Adobe Flash,such as SWF orFlash video (FLV)files.KellerAdobe CS5 ACA Certification Prep

Objective 4.6 Insert Rich Media such as Video,Sound, and Animation in Flash Format(continued)Dreamweaver Domain 43 25 You can select a video type for an FLV file:Progressive Download Video or Streaming Video.Progressive Download Video downloads the FLVfile to the hard disk of the visitor, and the videobegins to play before the download has completed.Streaming Video delays playback for a short timeuntil the video loads in the buffer to provide a smoothplayback. You must have access to the Adobe FlashMedia Server to enable Streaming Video on a webpage.KellerAdobe CS5 ACA Certification Prep

Objective 4.6 Insert Rich Media such as Video,Sound, and Animation in Flash Format(continued)Dreamweaver Domain 43 26When you insert an SWF or FLV file into adocument, Dreamweaver automatically inserts codethat detects whether the visitor has the correctversion of Flash Player. If the visitor does not havethe correct version, Dreamweaver displays a promptto download the latest version.KellerAdobe CS5 ACA Certification Prep

Objective 4.6 Insert Rich Media such as Video,Sound, and Animation in Flash Format(continued)Dreamweaver Domain 43 27You can adddifferent types ofsound files to adocument,including .wav,.midi, and .mp3.KellerAdobe CS5 ACA Certification Prep

Objective 4.7 Insert Navigation Bars, RolloverImages, and Buttons Created in Fireworks ona Web PageDreamweaver Domain 43 28 You can use Fireworks to design and createnavigation bars, rollover images, and buttons,and then export them for use in Dreamweaver.A rollover image is an image that, when themouse passes or rolls over it, will change toanother image.The Insert Rollover Image dialog box allows youto select both the original and rollover images,enter alternate text, and create a link.KellerAdobe CS5 ACA Certification Prep

Objective 4.8 Build Image MapsDreamweaver Domain 43 29 An image map is an image that has clickable,linked areas, known as hotspots.Any image can be turned into an image map bysimply drawing hot spots.The hotspot tools become available in the Propertyinspector when you select an image in thedocument window.KellerAdobe CS5 ACA Certification Prep

Objective 4.8 Build Image Maps (continued)Dreamweaver Domain 43 30 If you have more than one image map on a page, itis important to name the image map in the Mapname box in the Property inspector.Once you draw a hotspot, Dreamweaver promptsyou to add alternate text in the Alt text box in theProperty inspector.In addition to adding alternate text in the Propertyinspector, you can also add a link and a target forthe link.KellerAdobe CS5 ACA Certification Prep

Objective 4.9 Import Tabular Data to a WebPageDreamweaver Domain 43 31 Dreamweaver allows you to import tabular data.The delimiter can be a tab, comma, semicolon,colon, or other character.KellerAdobe CS5 ACA Certification Prep

Objective 4.9 Import Tabular Data to a WebPage (continued)Dreamweaver Domain 43 32 You can alsoinsert tables.The Table dialogbox allows you toset the initiallayout for thetable.KellerAdobe CS5 ACA Certification Prep

Dreamweaver Domain 43Objective 4.9 Import Tabular Data to a WebPage (continued)33 You can modify table properties in the Propertyinspector after you have created a table. When a cell is selected the Property inspector changesand you can add color and align the contents of the cellvertically, horizontally, or both.KellerAdobe CS5 ACA Certification Prep

Objective 4.9 Import Tabular Data to a WebPage (continued)Dreamweaver Domain 43 34 You can modify the number of rows and columns ina table using the Table Objects command.In the Property inspector, you can also split a cellinto additional rows or columns or merge rows andcolumns.KellerAdobe CS5 ACA Certification Prep

Objective 4.10 Import and Display a Microsoft Wordor Microsoft Excel Document to a Web PageDreamweaver Domain 43 35Dreamweaver providesseveral import optionsthat support the originalstructure andformatting in the sourcedocument, whichmakes it advantageousto format the sourcecontent to fit yourneeds.KellerAdobe CS5 ACA Certification Prep

Objective 4.10 Import and Display a Microsoft Wordor Microsoft Excel Document to a Web Page(continued)Dreamweaver Domain 43 36 You can also add a link to a Microsoft Word or Exceldocument into an existing page in Dreamweaver.In the Insert Document dialog box, you can select whetherto insert the contents of the document or create a link.KellerAdobe CS5 ACA Certification Prep

Objective 4.10 Import and Display a Microsoft Wordor Microsoft Excel Document to a Web Page(continued)Dreamweaver Domain 43 37 If you would like to gather information from visitors to yourwebsite, you can create forms in Dreamweaver.Visitors can submit a form by clicking the submit button;the information is sent to a server.First, you need to create a form using the Form button; ared dashed line indicates the boundary of the form.You must place form objects within the boundaries of theform.Form objects allow users to enter information.KellerAdobe CS5 ACA Certification Prep

Objective 4.10 Import and Display a Microsoft Wordor Microsoft Excel Document to a Web Page(continued)Form objects on the Insert panelDreamweaver Domain 43 38KellerAdobe CS5 ACA Certification Prep

Objective 4.10 Import and Display a Microsoft Wordor Microsoft Excel Document to a Web Page(continued)Dreamweaver Domain 43 39 Form information is sent to the server using either thePOST or GET method.The POST method send the information to the webserver with a header and a body message.The GET method is the default value, and the formdata is entered in a URL. The URL is composed of thename of the page, and the format data and is limitedto approximately 2,000 characters.KellerAdobe CS5 ACA Certification Prep

SummaryDreamweaver Domain 43 40 Objective 4.1 Define a Dreamweaver SiteObjective 4.2 Create, Title, Name, and Save a WebPageObjective 4.3 Add Text to a Web PageObjective 4.4 Insert Images and Apply AlternativeText on a Web PageObjective 4.5 Link Web Content, Using Hyperlinks,E-Mail Links, and Named AnchorsKellerAdobe CS5 ACA Certification Prep

Summary (continued)Dreamweaver Domain 43 41 Objective 4.6 Insert Rich Media such as Video,Sound, and Animation in Flash FormatObjective 4.7 Insert Navigation Bars, RolloverImages, and Buttons Created in Fireworks on a WebPageObjective 4.8 Build Image MapsObjective 4.9 Import Tabular Data to a Web PageObjective 4.10 Import and Display a Microsoft Wordor Microsoft Excel Document to a Web PageKellerAdobe CS5 ACA Certification Prep

Dreamweaver Domain 3 Keller Adobe CS5 ACA Certification Prep Dreamweaver Domain 4 Objectives Define a Dreamweaver site. Create, title, name, and save a web page. Add text to a web page. Insert images and apply alternative text on a web page. Link web content, using hyperlinks, e-mail links, and named anchors. 2

Related Documents:

The Extending Dreamweaver CS5 guide describes the Adobe Dreamweaver CS5 framework and application programming interface (API) that lets you build extensions to Dreamweaver. The Extending Dreamweaver CS5 guide provides information about: † How each type of extension works † The API functions that Dreamweaver calls to implement the .

1. Begin by opening Adobe Dreamweaver CC 2017. On a PC, click Start Programs Adobe Dreamweaver CC 2017, or click on the Dreamweaver shortcut on the desktop. On a Mac, click Macintosh HD Applications Adobe Dreamweaver CC 2017, or click the Dreamweaver icon in the Dock. (Figure 3) 2. GETTING STARTED 4 Figure 3.

Dreamweaver bila dibandingkan dengan program sejanisnya ! Keunggulan Dreamweaver Dreamweaver mempunyai keunggulan dibandingan program sejenisnya antara lain : Dreamweaver mempunyai ruang kerja, fasilitas, dan kemampuan yang mampu meningkatkan produktifitas dan efektifitas dalam

Get Dreamweaver And Other Tools Dreamweaver 8, CS3, CS4 or CS5 should be installed on your computer. Make sure you have Dreamweaver on your computer. The latest version from Adobe is Dreamweaver. You may obtain either Dreamweaver 8 or CS3 by going to the IS&T site ist.mit.edu

MEMBUAT DESAIN WEB & APLIKASI BERBASIS UI & UX DENGAN ADOBE DREAMWEAVER CC 2 MEMBUAT DESAIN WEB & APLIKASI BERBASIS UI & UX DENGAN ADOBE DREAMWEAVER CC PENGENALAN TOOL ADOBE DREAMWEAVER & MEMBUAT LANDING PAGE DAFTAR ISI 1. Apa itu Adobe Dreamweaver CC? 2. Fitur-fitur Dreamweaver yang Menonjol 3. Tidak Ada yang Sempurna 4. Rangkuman Harga .

『Dreamweaver CS5 拡張ガイド』では、Dreamweaver での拡張機能の構築に使用する、Adobe Dreamweaver CS5 の ��について説明します。『Dreamweaver CS5 �おりです。

Chapter 2 Getting Started with Dreamweaver CS6 15 Start Dreamweaver CS6 in Macintosh Open the Applications folder (located on the main hard drive). For Lion, you can also click the Launchpad icon on the Dock, and then click the Adobe Dreamweaver CS6icon. Double-click the Adobe Dreamweaver CS6folder or an Adobe Collection CS6folder, if installed.

The new industry standard ANSI A300 (Part 4) – 2002, Lightning Protection Systems incorporates significant research in the field of atmospheric meteorology. This relatively new information has a pro-found impact on the requirements and recommendations for all arborists who sell tree lightning protection systems. Since there are an average of 25 million strikes of lightning from the cloud to .