Dreamweaver CC Named Anchor Tag Missing?

[Moonie]

Insert > Named Anchor

This command has been removed. Does it exist elswhere, or does one have to hand code the HTML in DWCC?

[Nancy OShea]

Named anchors are deprecated since HTML4.  It's much simpler to use Div IDs in your markup:

     <div id="foo">

          Some content here....

     </div>

Then link to the ID on the same page like this:

     <a href="#foo">Some Link</a>

Or to a different page like this:

    <a href="pagename.html#foo">Some Link</a>

Nancy O.

[Moonie]

Hi Nancy,

Thank you for your response, and example code.

While I unerstand that it is possible, even simple, to hand code the obsolete 'Anchor' code ... my question to Adobe is why remove the facility to insert 'Anchor' code without creating a replacement facility in DWCC.

I understood that the reason for using Dreamweaver was to benefit from the various coding features it provides.

To me, this seems a very retrograde step on their part. Particularly when their cost of their latest business model is supposed to be negated by the addition of simplified and 'Added Value' services and facilities.

Cordially,

Colin.

[Jon Fritz]

The reason it was removed is there is absolutely no reason for it anymore, it was dropped from html back in HTML4. Using an anchor tag in this manner is just not necessary. The "new" way is much more flexible and IIRC, takes one less step in Design View and ultimately creates leaner code (faster downloads, albeit only slightly).

To make a link that goes to a specific spot in your page, you only need to know the html id of the element you want to link to.

In Nancy's example, all you do from the Design View of DW is highlight the text/image you want to turn into a link and enter #foo as the link itself and you get the exact same affect as putting a Named Anchor in the beginning of the <div id="foo"> and then adding a link to it.

If  you want to add more "anchors" within a long single container (a list of Q&A for example), you can highlight any text/image in Design View and then in the Properties inspector, add an ID. That will create a set of <span> tags around the text/image with an html id that you can reference  by simply adding #the_id_name to the Link field in the Properties inspector.

So instead of making the page, then adding anchors, then linking to them, you can make the page and link to the ids of the elements on the page, any element, not just <a> tags.

[Moonie]

Hi John,

Thank you for the kind response - most helpful!

We are not web designers, we just run an online shop, so do not have the grasp of the 'Professionals.' Consequently we have always had to follow the recommendations provided by Dream weaver. Such as  …

http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c3ea.html

Create a named anchor

          • In the Document window’s Design view, place the insertion point where you want the named anchor.

          • Do one of the following:

                    • Select Insert > Named Anchor.

                    • Press Control+Alt+A (Windows) or Command+Option+A (Macintosh).

                    • In the Common category of the Insert panel, click the Named Anchor button.

          • In the Anchor Name box, type a name for the anchor, and click OK. (The anchor name can’t contain spaces).

The anchor marker appears at the insertion point.

Note: If you do not see the anchor marker, select View > Visual Aids > Invisible Elements.

As a consequence, we were taken aback when Command+Option+A (Macintosh) no longer had any effect in DWCC.

Cordially,

Colin

[Moonie]

Hi John,

Thank you for the kind response - most helpful!

We are not web designers we just run an online shop, so do not have the grasp of the 'Professionals.' Consequently we have always had to follow the recommendations provided by Dream weaver. Such as …

http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c3ea.html

Create a named anchor

• In the Document window’s Design view, place the insertion point where you want the named anchor.

• Do one of the following:

• Select Insert > Named Anchor.

• Press ControlAltA (Windows) or CommandOptionA (Macintosh).

• In the Common category of the Insert panel, click the Named Anchor button.

• In the Anchor Name box, type a name for the anchor, and click OK. (The anchor name can’t contain spaces).

The anchor marker appears at the insertion point.

Note: If you do not see the anchor marker, select View > Visual Aids > Invisible Elements.

As a consequence, we were taken aback when CommandOptionA (Macintosh) no longer had any effect in DWCC.

Cordially,

Colin

[Preran]

Hi Moonie,

Thank you for the feedback. Will pass this to the concerned person to update the doc.

Thanks,

Preran

[Jeannie-TSG]

I ran into an issue with the div-based anchor links in email, so I would say that the anchor links do still serve a purpose.  The div id based links work fine in a browser, but they didn't work at all in an email. 

Unless I'm missing something,  an HTML email still requires anchor links the old-fashioned way. 

[Nancy OShea]

HTML e-mail is a totally different beast.   You're building for e-mail clients, not browsers. 

Quite honestly, I have never used named anchors or links to divs in e-mails.  If the document is that complex, it should be published online or created in Acrobat (pdf) which supports thumbnail links & bookmarks.

http://help.adobe.com/en_US/acrobat/X/pro/using/WS58a04a822e3e50102bd615109794195ff-7cc7.w.html

Nancy O.

[Jeannie-TSG]

It's not a complicated document to include a table of contents in a newsletter.  Many email newsletters include a "Inside This Issue" at the top so people can easily navigate the content.  It's standard practice.

Sending a link to an online source or attaching a PDF (or sending a link to one) would not be-- it would diminish CTRs and conversions drastically. 

[golf25radioman]

Nancy O. wrote:

Named anchors are deprecated since HTML4.  It's much simpler to use Div IDs in your markup:

     <div id="foo">

          Some content here....

     </div>

Then link to the ID on the same page like this:

     <a href="#foo">Some Link</a>

Or to a different page like this:

    <a href="pagename.html#foo">Some Link</a>

Nancy O.

So this outdated Anchor command, replaced by the Div ID has no command in the menus?  One has to do code to make it?  I'll admit I don't do much HTML, understand a fair share - enough to get by.  But don't understand why Adobe would delete a menu command and not replace it with what is the current HTML.  I've read your code and it seems to be much more time consuming than a menu command - that seems backwards to me...

Tom

[Jon Fritz]

Nope, you just add an ID to an element from the Properties Inspector, then link to the id.

It's actually one less step than the old anchor button.

[Nancy OShea]

Assuming you're building to modern web standards, you probably already have IDs in your markup you could use for link targets. Even if you don't, this is still much simpler and more efficient than the old way.

Nancy O.

[golf25radioman]

Nancy O. wrote:

Assuming you're building to modern web standards, you probably already have IDs in your markup you could use for link targets. Even if you don't, this is still much simpler and more efficient than the old way.

Nancy O.

Well, I'm trying to learn modern web standards, but all my current sites I maintain were started back when Adobe's web design software was PageMill!  So I guess I never knew there was a change in the way I was doing things until DW CC.  I'm currently taking online courses but most of my knowledge has been OJT, not any "book learnin'" so to speak.  I see many web sites with the new bells and whistles and I know I'm behind the curve on a lot of stuff.  Just don't know where the time will come from to bring myself current.

I'll play around with see how fast I can adapt away from the anchors to the div method of linking. 

It may be simpler and more efficient, but to me right this minute it isn't.  This took me by surprise today.  I'll adapt - teach the old dog new tricks -

Thanks - Tom

[Jon Fritz]

It really is very, very simple and doesn't require any css being added to your head section...

1. Click or highlight the item you want to set as an anchor. Check if it has and ID  in the Properties window and add one if it doesn't. (for example: anchor_one)

2. Click or highlight the item you want to use as the link back to the anchor. Add the # symbol followed by the id from step one as the Link in the Properties window. (for example: #anchor_one)

Done.

[golf25radioman]

I think I have it now.  I was thinking backwards....no need to elaborate.  I've tested the Div way and it works.  Now I just have to get this old brain to remember it.  <grin>

Are the old Named Anchors any problem?  I would hate to hear I need to go through all the pages and replace them?  And they will co-exist with all the other newer HTML with no problem?

Thanks for all your guideance - all who responded. 

Tom

[Jon Fritz]

You're old pages should be fine for a very, very long time.

You "could" run into issues using the old way under the HTML5 Doctype Declaration, but I'd be willing to bet all of the major browsers will still run them correctly.

[fnegrin]

Sorry but this method just doe snot work for me.   If I select a bit of text or simply place the curor before a word  in design view and in the ID field of the property inspector type an id name,  in code view I see it creates a <strong> tag with that name.  Weird .  Then of course when  linking to that id as per your instructions nothing happens of course because a div tag has not been created. Neither has an a tag been created. Only a strong tag with an id name!   They only way I have found to create anchors that work is to manually code an anchor with  <a id="name">  </a>  and then making a link to that id as per your instructions does work .  So I totally miss the named anchor command.  Either fix the id field in the property inspector, or bring it back, please Adobe.  Or someone tell me why I cannot do as Jon Fritz says.... and why a strong tag is created when using the id field!

Thanks!

[Jon Fritz]

You need to have "something" selected, either by clicking an image, highlighting some text or selecting an html element on your page. Sorry, I wasn't as clear as I could have been on that. Doing that will allow you to either see the id already there or add an id to the element or text.

I'm not sure why it would create a set of <strong> tags when you select text and add an ID. It should be a set of <span> tags, if anything, when you select text and add an ID (many times it will select the <p> tag the text is in.

Either way, it definitely doesn't need to be a <div> tag that is linked to with the ID method for anchors. Whatever you link to will end up being the first thing on the page when clicking the link, as long as there is enough room below it to allow for that. If you try to anchor something that is near the bottom of the page, and click the link, it will still be on the bottom unless you add enough space for the browser window to allow it to scroll that element to the top.

Could you post a link to your page, maybe there is something specific in your code that is causing an issue?

[fnegrin]

Thank you for that!  Yes, you were clear, and I did select a bit of text, of course.  But whatever I do , putting something in the ID field in the property inspector just puts an id="name" string  inside whatever other tag is already there. (like into the strong tag in my case since the text is bold).

Nevertheless, for  some reason, now that I have tried again,and while it did not work the 30 other times I tried earlier today ,  the link to that id inside the strong tag now does work.  !!!  So thank you

But for some reason you might explain,  one mystery remains: if the id is embedded in text that exists quite far down the page, the link takes one to that id truly, displaying the paragraph it is in at the top of the window.  But if the id is embedded in text that exists near the real top of the page, linking to it takes to the actual top of the page, with the arae the id is in visible of course, but not at the very top of the window, if you see what i mean

look at http://www.negrin.com/francisco/content.php?mn=2  an dtry the two links in the phrase

"Pages for The Cunning Little Vixen and Il Trovatore are under construction."

You will see the Vixen link take syou to the id and displays it at the top ofthe window,  while the other link takes you to the top of the page the id is on  , but not aligning that text the id is in (which is the text:  "Verdi's Il Trovatore has just opened at the Macerata opera festival") with the top of the window....

thanks for your help!

Adobe still needs to update the help document....

[Jon Fritz]

The second link is using a <td> tag id and that <td> is aligned to the top of the page as expected, however, you use the id more than once, which is not valid.

HTML id's can only be used once in a page, you have it both on a <td> where the link seems to be taking you and on a <p> tag later in the html.

ID's must be unique (the same went for named anchors).

EDIT: There are quite a few other html errors in your pages. You may want to run your site through the validator at http://validator.w3.org and clear any problems out. HTML errors can cause all kinds of display problems and funky, unexpected behaviors.

[fnegrin]

OH! How stupid of me! I had not noticed the name was already used. Thank you so much! Brilliant of you to look through it and answer so fast! Thank you again

[VL Branko]

After reading this text and following your instructions I tried it and it works perfectly.

But, I would like to see a feature in DW like the one they had in GoLive CS2 and earlier versions (2000 - 2005) that tracked all of your name anchors so that you could quickly find them and  point a link to it as seen below. That is not  possible with the new method but was with the old. Now you have to remember everything and since there is nothing to point to you have to manually put in the link address. So while I  certainly can and will do the new method because there is no alternative, I do not see it as a step forward but back. But I suppose if you never had the pleasure to use this feature on GoLive you would not know what you were missing, and thus arises the cliche "Ignorance is bliss."

[VL Branko]

Another thing is that the name anchor tag was a visual cue that allowed you to quickly find it. Now you have to look though all the code to find it.

[Nancy OShea]

Use Ctrl+F to find stuff.

Nancy O.