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

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

SamplesSamples

Full TextFull Text

• One link in the componentOne link in the component• List of links in the bodyList of links in the body

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

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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