Gebruik van Anchor-tags in een Content Area of Content Editor Web Part

Veelal bij SharePoint gebaseerde internet sites zie je dat pagina’s grote lappen tekst bevatten, bijvoorbeeld op pagina’s als ‘over ons’ of ‘onze geschiedenis’. Het kan dan handig zijn om te gaan werken met bladwijzers.

Middels een bladwijzer kan je bovenaan een pagina een klein menu opnemen met links naar de hoofdonderdelen van de pagina of onderaan de pagina een link zetten om naar bovenaan de pagina te springen.

In HTML is de code eenvoudig:

De doellocatie krijgt een “a name” gespecificeerd.

Voorbeeld: <a name=”bladwijzer”>bladwijzer</a>

De link naar de doellocatie is als een normale link, dus middels “a href”, maar in tegenstelling tot een URL verwijst een bladwijzer intern. Dit wordt dit als “#bladwijzer” opgenomen. Dus een # als interne marker.

Voorbeeld: <a href=”#bladwijzer”>link</a>

De werking zoals hierboven uitgelegd, gaat echter niet op voor SharePoint. Wanneer je hier een bladwijzer opneemt middels bovenstaande regels, ziet SharePoint dit niet eens als link.

Binnen SharePoint doe je het volgende:

Ga naar de doellocatie van de namespace en voeg de code toe:

Voorbeeld: <a id=”bladwijzer” name=”bladwijzer”>bladwijzer</a>

Verschil met de standaard HTML manier hierboven is dat SharePoint behalve de naam van de bladwijzer ook de volledige URL van de pagina nodig heeft.  Ga naar de plaats waar je de link naar de bladwijzer wilt opnemen en voeg dan de volgende code in als volgt:

Voorbeeld: <a href=”http://www.website.nl/pages.aspx#bladwijzer”>link</a>

Dit werkt prima voor het Content Editor Webpart en Content Area!

Debuggen met Firebug en IEDeveloperToolbar

Tijdens projecten loop ik vaak tegen een vervelend terugkerend probleem aan. Klanten hebben vaak specifieke wensen en eisen m.b.t lay-outs van hun portals. Dit wordt ingericht door gebruik te maken van Cascading Style Sheets en HTML.

Binnen Sharepoint of DotNetnuke, is het vaak lastig om de juiste template of css snel te lokaliseren en daar aanpassingen op door te voeren die een gewenst resultaat op de lay-out heeft. Ik ben op zoek gegaan naar software die Thysia kan helpen sneller inzicht te krijgen in hoe templates en/of css-bestanden zijn opgebouwd.

Ik heb voor zowel Internet Explorer als Firefox twee uitstekende tools gevonden. De eerste is de Internet Explorer Developer toolbar van Microsoft voor Internet Explorer. De hoofdfunctionaliteiten van deze toolbar heb ik even uiteen gezet:

• Lokaliseer en selecteren van specifieke elementen op een webpagina
• Validatie van HTML, CSS, WAI en RSS web feed links
• Het kijken van HTML object classes namen, ID’s en details zoals link paden enz.
• Code wijzigen waarbij de pagina(in cache) direct wordt aangepast, zodat je heel snel wijzigingen kunt doorvoeren

Voor Firefox gebruik ik de tool Firebug. Firebug integreert naadloos met Firefox en biedt leuke mogelijkheden als het gaat om het aanpassen, debuggen en het monitoren van CSS, HTML en Javascript live in elke webpagina.

Opgesomd komt het grotendeels overeen met de functionaliteiten zoals ik die benoemde voor de Internet Explorer Developer Toolbar, echter vind ik persoonlijk dat Firebug in Firefox net wat soepeler werkt. Het is allemaal net even wat makkelijker om css-classes te herkennen, te selecteren en on-the-fly aan te passen.

Niettemin zijn dit twee tools, welke absoluut handig zijn voor efficiënter en sneller tot een mooi grafisch portal-resultaat te komen.