Een aangepaste pagina-indeling maken in SharePoint 2013-NavantisNavantis Blog

in mijn laatste artikel documenteerde ik hoe een basispagina te maken in SharePoint 2013. Basispagina ‘ s definiëren de Globale chrome-elementen van uw website. In dit artikel wordt uitgelegd hoe u aangepaste pagina-indelingen kunt maken in SharePoint 2013. Zie dit Microsoft-artikel voor meer informatie over het SharePoint 2013-paginamodel.

uw Paginaopmaak plannen

in dit voorbeeld gaan we een deel van een pagina op onze website opnieuw maken (www.navantis.com):

In ons vorige artikel hebben we een basispagina gemaakt die de koptekst, voettekst en globale typogrammen voor deze pagina definieerde. Nu gaan we een pagina-indeling maken die dit basisformaat volgt. De inhoud zal dynamisch zijn, zodat u op basis van deze lay-out zoveel pagina ‘ s kunt maken als u wilt.

in onze paginaopmaak gaan we de volgende gebieden definiëren als “Field controls”. We gaan ze allemaal maken in een enkele inhoud container en ze expliciet indelen om ons ontwerp te weerspiegelen:

de broodkruimel linksboven we kunnen SharePoint ‘ s broodkruimel trail gebruiken en we zullen het abonnement op de nieuwsbrief insluiten in de pagina-indeling omdat we niet willen dat dit expliciet wordt gedefinieerd in de lay-out.

Defining Your Content Type

dus voordat we het HTML-werk doen, laten we een content type (Een definitie voor content velden) maken die elk van deze velden voor onze pagina definieert. Op basis van het bovenstaande plan hebben we de volgende velden nodig:

  • Grote hoofdregel
  • Rechtsblurb
  • Linkslist
  • Linkskolomtitel
  • Linkskolomtekst
  • Rechtskolomtekst

In elk geval zijn dit HTML-besturingselementen. SharePoint 2013 kunt u andere soorten inhoud te definiëren voor deze velden, zoals afbeeldingen. Afbeeldingen in SharePoint 2013 kunnen in specifieke dimensies worden weergegeven en SharePoint 2013 zal een afbeelding dynamisch weergeven aan de opgegeven om ervoor te zorgen dat ze mooi in uw gedefinieerde lay-out passen.

om een content type te maken, ga naar Site Settings – > Site Content Types (onder Web Designer galeries). Als u kijkt naar de inhoudstypen van de pagina-indeling, ziet u bestaande types voor artikel, catalogus, welkomstpagina, enz. We gaan een inhoudstype maken voor onze lay-out. Klik op Create and type in a name for your new content type:

onder Parent Content Type, kunt u de parent uw content type zal erven van selecteren. Als u kijkt naar de bestaande inhoudstypen voor paginaopmaak, worden deze overgenomen van de inhoudstype-pagina. Pagina is in de groep publiceren inhoud Types. U kunt ook opgeven welke groep u uw nieuwe inhoudstype wilt plaatsen – u kunt het toevoegen aan de groep bestaande inhoudstypen voor Paginaopmaak of uw eigen aangepaste groep maken.

wanneer u uw nieuwe inhoudstype hebt gemaakt, zal SharePoint 2013 de kolommen weergeven die automatisch zijn overgenomen van het type pagina-inhoud. Laten we enkele nieuwe toevoegen om onze aangepaste velden weer te geven. Klik op de kolom toevoegen van nieuwe site en laten we elk veld toevoegen:

voor elke kolom kunnen we het type opgeven. Voor die velden die we expliciet willen stylen, kunnen we de optie enkele regel tekst gebruiken om de auteur van de inhoud in platte tekst te laten zetten die door de sjabloon zal worden opgemaakt. Voor die velden die we meer controle willen geven aan de auteur van de inhoud, kunnen we het veld opgeven als volledige HTML-inhoud en dan zal de auteur van de inhoud in staat zijn om in elke HTML te zetten met behulp van de rich text editor. Voor onze velden, laten we deze aanpak gebruiken:

    • LargeHeadline – Één regel tekst
    • RightHandBlurb – Meerdere regels tekst
    • LeftLinkList – Volledige HTML
    • LeftColumnTitle – Één regel tekst
    • LeftColumnText – Volledige HTML
    • RightColumnText – Volledige HTML

Voor elk veld, een site maken kolom.

nu hebben we Velden om de inhoud op te slaan, laten we nu een pagina-indeling maken.

een pagina-opmaak aanmaken

om een pagina-opmaak te maken, gaat u naar de Design Manager en klikt u op 6. Paginaopmaak Bewerken. Klik op een pagina-indeling maken. Geef uw pagina-indeling een naam, kies uw basispagina en uw inhoudstype dat u zojuist hebt gemaakt.

Als u een voorbeeld van uw pagina – lay-out ziet, ziet u dat het er niet veel uitziet-we moeten de HTML rond de veldbesturingen bijwerken om de lay-out goed te formatteren.

uw Paginaopmaak publiceren

voordat u uw paginaopmaak kunt gebruiken, moet deze worden gepubliceerd. Om uw paginaopmaak te publiceren, gaat u naar Site –Instellingen – > basispagina ‘ s en paginaopmaak. U zult twee bestanden zien-een is HTML en een is ASPX. in SharePoint 2013, de HTML is nu de master en u kunt het bewerken met behulp van een HTML-editor. SharePoint 2013 genereert dan automatisch het ASPX-bestand. Om uw lay-out te publiceren, klikt u op het HTML-bestand en vervolgens publiceren:

dit zal zowel de HTML-en ASPX-bestanden publiceren, waardoor ze nu beschikbaar zijn om een pagina te maken op basis van uw lay-out.

een pagina aanmaken

om een pagina aan te maken op basis van onze nieuwe opmaak, gaat u naar nieuwe pagina.

als u vervolgens naar Page –> Paginaopmaak gaat, vindt u onze nieuwe Paginaopmaak in de lijst met beschikbare Paginaopmaak. Wanneer u de pagina-indeling schakelt, moet u nu alle velden zien die we eerder hebben gemaakt in ons inhoudstype.

u kunt uw inhoud invullen door deze in te typen of te kopiëren en te plakken van uw bestaande website of van office-documenten zoals Word. Het kopiëren en plakken is dramatisch verbeterd ten opzichte van eerdere versies!

hier is mijn inhoud nu ingevuld:

nu kunnen we onze pagina publiceren…

onze inhoud is er, maar de lay-out weerspiegelt niet wat we want…so Bewerk nu de HTML om onze lay-out bij te werken.

Paginaindelingen aanpassen

Paginaindelingen in SharePoint 2013 zijn gewoon HTML-bestanden met veel extra opmaak om aan te geven waar de besturingselementen worden geïnjecteerd. We kunnen nu het HTML-bestand aanpassen via de design manager. U kunt eenvoudig een kopie van het HTML-bestand pakken, uw wijzigingen aanbrengen en uw bestand opnieuw uploaden en SharePoint 2013 zal de rest doen. Er zijn twee manieren om het bestand te pakken:

  • Ga naar Design Manager – > 3. Upload ontwerpbestanden en breng een netwerkstation in kaart naar uw hoofdpagina directory.
  • Ga naar Site-Instellingen – > basispagina ‘ s en pagina-indelingen en u kunt uw bestand downloaden.

na een paar keer itereren met de pagina-indeling en het verplaatsen van de fragmenten die door SharePoint 2013 in de juiste spots, hebben we nu een mooi opgemaakte pagina:

alle inhoud binnen het hoofdpagina gebied wordt volledig beheerd door SharePoint kan gemakkelijk worden gewijzigd door een auteur van de inhoud.

dit artikel is geschreven door Chris Woowilll
Christopher Woowilll is de Vice President, publieke Sector voor Navantis. Met meer dan 15 jaar ervaring in het plannen, beheren en implementeren van technologische strategieën in zowel de publieke als private sector, Christopher is verantwoordelijk voor de publieke sector verkoop, strategie en levering van oplossingen voor onze klanten in de gezondheidszorg, de overheid, gemeenten en het onderwijs.

Write a Comment

Het e-mailadres wordt niet gepubliceerd.