CMA Workshop Image Links and Text Links on the Same Line in a Component.
-
Upload
allen-little -
Category
Documents
-
view
219 -
download
0
Transcript of CMA Workshop Image Links and Text Links on the Same Line in a Component.
![Page 1: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/1.jpg)
CMA WorkshopCMA Workshop
Image Links and Text Links Image Links and Text Links on the Same Line in a on the Same Line in a
ComponentComponent
![Page 2: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/2.jpg)
Requested OutcomeRequested Outcome
• List of linksList of links– Each line has two linksEach line has two links– First link to HTML documentFirst link to HTML document– Second link on imageSecond link on image– Second link to Document AssetSecond link to Document Asset
![Page 3: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/3.jpg)
SamplesSamples
![Page 4: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/4.jpg)
Full TextFull Text
• One link in the componentOne link in the component• List of links in the bodyList of links in the body
![Page 5: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/5.jpg)
Full Text – Full Text – Links in the bodyLinks in the body
• Created in a tableCreated in a table• Must already know URL for each linkMust already know URL for each link
![Page 6: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/6.jpg)
Description FieldDescription Field(Short Text)(Short Text)
• Each item is an individual piece of contentEach item is an individual piece of content• Link to HTML file created when content Link to HTML file created when content
createdcreated• The link to the Document Asset is in the The link to the Document Asset is in the
Description/Short Text fieldDescription/Short Text field
![Page 7: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/7.jpg)
Description FieldDescription Field(Short Text)(Short Text)
• Description contains <img src> codeDescription contains <img src> code• Description contains <a href> codeDescription contains <a href> code• These codes must not exceed 2000 These codes must not exceed 2000
characterscharacters
![Page 8: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/8.jpg)
Sample Description CodeSample Description Code
<a href=“/documents/november_<a href=“/documents/november_
objective_79943_7.doc” objective_79943_7.doc” target=“_blank”>target=“_blank”>
<img height=“25” alt=“calendar” <img height=“25” alt=“calendar” src=“/images/calendar_87964_7.gif” src=“/images/calendar_87964_7.gif” width=“49” border=“0” />width=“49” border=“0” />
</a></a>
![Page 9: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/9.jpg)
Title FieldTitle Field
• Each item is an individual piece of contentEach item is an individual piece of content• Link to HTML file created when content createdLink to HTML file created when content created• The Image and link to the Document Asset is in The Image and link to the Document Asset is in
the Title fieldthe Title field
![Page 10: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/10.jpg)
Title FieldTitle Field
• CMA automatically places the open and close CMA automatically places the open and close codes (<a> & </a>) around the entire Title fieldcodes (<a> & </a>) around the entire Title field
• Title of content is first followed by a close link Title of content is first followed by a close link code (</a>) code (</a>)
• Then need <a href> and <img src> codes for Then need <a href> and <img src> codes for image linkimage link
• Do not include close link code (</a>) at the endDo not include close link code (</a>) at the end
![Page 11: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/11.jpg)
Sample Title FieldSample Title FieldNovember 2003: Defining Goals and November 2003: Defining Goals and
Objectives</a>Objectives</a><a href=“/documents/november<a href=“/documents/november_79943_7.doc” target=“_blank”>_79943_7.doc” target=“_blank”><img height=“25” alt=“calendar” <img height=“25” alt=“calendar” src=“/images/calendar_87964_7.gisrc=“/images/calendar_87964_7.gif” width=“49” border=“0” />f” width=“49” border=“0” />
• Entire field must not exceed 255 Entire field must not exceed 255 characterscharacters
![Page 12: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/12.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Get the path for the imageGet the path for the image• Edit the Image AssetEdit the Image Asset• Copy the Asset Path to notepadCopy the Asset Path to notepad
![Page 13: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/13.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Get the path for the documentGet the path for the document• Edit the Document AssetEdit the Document Asset• Copy the Asset Path to notepadCopy the Asset Path to notepad
![Page 14: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/14.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Create an image that links to the Create an image that links to the document in Web Edit Prodocument in Web Edit Pro– Create a content itemCreate a content item– Edit with Web Edit ProEdit with Web Edit Pro– Insert image using the icon on the tool barInsert image using the icon on the tool bar
![Page 15: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/15.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Copy the image path from notepad to File Selection FieldCopy the image path from notepad to File Selection Field• Enter the Alt tag in the Title Field of the Picture Enter the Alt tag in the Title Field of the Picture
PropertiesProperties
![Page 16: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/16.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• The image will be inserted into Web Edit ProThe image will be inserted into Web Edit Pro
![Page 17: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/17.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Select the image by clicking on itSelect the image by clicking on it• Click the Create Link button on the tool bar Click the Create Link button on the tool bar
![Page 18: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/18.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Copy the Document Asset Path from Copy the Document Asset Path from notepad to the Link fieldnotepad to the Link field
• In Target Frame, select New Window In Target Frame, select New Window (_blank)(_blank)
• Link will be added to the imageLink will be added to the image
![Page 19: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/19.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Switch to HTML view in Web Edit Switch to HTML view in Web Edit ProPro
![Page 20: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/20.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Highlight the code to select itHighlight the code to select it• Do not select the paragraph open and close codes Do not select the paragraph open and close codes
(<p> & </p>)(<p> & </p>)• You may want to paste the code into Notepad You may want to paste the code into Notepad
temporarilytemporarily
![Page 21: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/21.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
• Do not save the content entered in Web Edit ProDo not save the content entered in Web Edit Pro• Paste the copied code into the Title of Description field Paste the copied code into the Title of Description field
as desired.as desired.• If in the Title field, delete the </a> code and the end If in the Title field, delete the </a> code and the end
and insert it after the title text.and insert it after the title text.
![Page 22: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/22.jpg)
Getting the CodeGetting the CodeFor those who “don’t do” HTMLFor those who “don’t do” HTML
Special Care in Title FieldSpecial Care in Title Field• Title of HTML content firstTitle of HTML content first• Then close code -- </a>Then close code -- </a>• Paste the link and image code Paste the link and image code
copied from Web Edit Pro nextcopied from Web Edit Pro next• Make sure there is no close code -- Make sure there is no close code --
</a> at the end of the field</a> at the end of the field
![Page 23: CMA Workshop Image Links and Text Links on the Same Line in a Component.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f175503460f94c2d399/html5/thumbnails/23.jpg)
CMA WorkshopCMA Workshop
Image Links and Text Links onImage Links and Text Links on
the Same Line in a Componentthe Same Line in a Component
QuestionsQuestions