Share
In deze zelfstudie leert u hoe u een Photoshop-bestand neemt en converteert naar een geldige, jQuery-enabled, Pagelime CMS geïntegreerde website, gereed voor overdracht aan uw klanten zonder codering, met behulp van Photoshop, SiteGrinder 3 en Pagelime.
SiteGrinder 3 is een fantastisch softwarepakket met veel functies, door de mannen bij Media Lab, waarmee je een website kunt spotten in Adobe Photoshop en deze binnen enkele minuten kunt exporteren naar een volledig geldige, gehakte en functionerende website zonder codering kennis noodzakelijk. Pagelime is een eenvoudig CMS, ontworpen met uw klanten in gedachten, dat onmiddellijke integratie in een website mogelijk maakt zonder enige codeervaardigheid vereist. Met Pagelime kan uw klant eenvoudig en gemakkelijk bewerkingen uitvoeren op inhoud, afbeeldingen wijzigen, pagina's toevoegen en verwijderen en zijn eigen website fundamenteel beheren op een manier die ze kunnen begrijpen, alles binnen een schone, merkvriendelijke webapplicatie.
De zelfstudie duurt ongeveer 10-15 minuten en veronderstelt een algemene kennis van SiteGrinder 3. Als je nog niet helemaal klaar bent om te snuffelen aan je Siteminder-vaardigheden, ga dan naar de SiteGrinder 3-tv-site van Media Lab voor een geweldige set videozelfstudies die meer dan u op de hoogte brengen van hoe u uw site kunt implementeren. Over het algemeen is het systeem echt cool en heeft het een TON van functies. We raden je ten zeerste aan te beginnen met Essentials 1 - Workflow, ik heb persoonlijk genoten van de knoppen en animatie, die details geeft over hoe je pijnloos jQuery-effecten toevoegt en echt leuke vervolgkeuzemenu's en Essentials 2 - Content. Als je alleen tijd hebt voor één, bekijk dan Essentials 1 - Workflow om op snelheid te komen.
Ik zal je stap voor stap instructies geven met meer diepgaande informatie in elke stap.
Vandaag zullen we een "Compani" -sjabloon gebruiken die de bemiddelaar van SiteGrinder ons royaal heeft uitgeleend, maar bijna elke website die in Photoshop is bespot, kan "SiteGrinder-klaar" worden, door het toevoegen van SiteGrinder-hints en het op de juiste manier opmaken van je lagen. Nogmaals, deze tutorial gaat ervan uit dat je kennis hebt van de SiteGrider-opmaak en hints gebruikt. Als u dit niet doet, raden we u aan SiteGrinder 3 TV te bezoeken en de eerste twee delen van de essentiële site van SiteGrinder bij te houden. Om deze sjabloon of een reeks andere sjablonen te downloaden, kunt u hun wikipagina bezoeken met de sjabloondownloads.
Omdat SiteGrinder standaard geen CSS-klassen voor afbeeldingen toegankelijk maakt voor de gebruiker, kunnen we door het toevoegen van de hint "-inhoud", SiteGrinder dwingen de IMG-tag (image) binnen een DIV weer te geven. Deze DIV zal dan later beschikbaar zijn in de SiteGrinder 3 Design Manager om een CSS-klasse eraan toe te voegen. Dit is belangrijk omdat, om Pagelime correct te laten werken, alle bewerkbare regio's, of "dingen die u wilt dat de client kan veranderen", moeten worden getagd met dezelfde speciale CSS-klasse, we zullen dit in meer detail in stap bespreken 4.
Als de SiteGrinder 3-engine nog niet is geopend, wordt de SiteGrinder 3-engine gestart. Nadat de Engine is gestart, genereert SiteGrinder een rapport over eventuele fouten of waarschuwingen die het in de sjabloon kan vinden. Bekijk de fouten en corrigeer eventuele ernstige fouten * (u kunt er ook voor kiezen ze te negeren, de site moet nog steeds worden gebouwd). Nadat u de fouten hebt opgelost, gaat u verder naar de pagina Build and Deploy. Hier moet je de pagina's afvinken die je wilt laten bouwen door SiteGrinder. In deze zelfstudie bouwen we alleen de startpagina op. Nadat de gewenste pagina's zijn geselecteerd, klikt u op "Build".
* Opmerking: als u de testsjabloon SiteGrinder 3 gebruikt met een demo of basisversie van SiteGrinder 3, is het mogelijk dat u een rapport tegenkomt met 2 "ernstige" fouten. Bekijk de fouten zorgvuldig. Het is zeer waarschijnlijk dat de fouten worden gegenereerd omdat u verwijst naar tags zoals - $ of -blog binnen de sjabloon waarvoor extra plug-ins vereist zijn. De Commerce-add-on voor - $ en de controle-add-on voor -blog. Als dat het geval is, kun je toch doorgaan. In deze zelfstudie bouwen we de pagina 'winkel' of 'blog' niet op, dus deze fouten zijn niet relevant.
In de Design Manager kunt u extra bewerkingen en stijlverklaringen doen voor de implementatie van het ontwerp en de CSS-klasse. De meeste van je tekst- en randeffecten moeten hier worden gedaan en niet in de PSD. Bovendien kunt u uw animatie / jQuery-functies ook vanuit dit scherm aanpassen. Nogmaals, kijk voor meer details op Site Grinder TV.
Voor deze zelfstudie maken we geen echte CSS-stijlen met kenmerken. In plaats daarvan voegen we eenvoudigweg een klassenaam toe aan een paar tags op de site die Pagelime kan gebruiken. Navigeer in Design Manager naar de vervolgkeuzelijst 'Rand- en achtergrondstijlen'. Gebruik de vervolgkeuzelijsten naast de elementen en voeg een nieuwe stijl toe met de naam "bewerkbaar" zonder extra attributen. Klik op Toepassen. Nadat u de stijl eenmaal hebt toegepast, is deze toegankelijk in alle andere vervolgkeuzemenu's. Selecteer elke andere regio die u wilt kunnen bewerken door Pagelime en pas dan op die elementen toe.
Wanneer de site wordt geïmplementeerd in Pagelime in stap 13, definiëren we deze css-klasse "bewerkbaar" als de signaalklasse voor Pagelime om regio's gebruikers bewerkbaar te maken. In essentie kan deze tag alles worden genoemd wat je wilt, zolang het maar uniek is. We raden je aan het iets begrijpelijks te maken voor eenvoudige referentie.
Selecteer de nieuw gebouwde pagina's in het inzetgebied. Nadat u de pagina's hebt gecontroleerd die u wilt implementeren, selecteert u de site die u wilt implementeren in de vervolgkeuzelijst met de naam 'Implementeren naar'. Mogelijk moet u een nieuwe site maken als u geen eerdere sites heeft. Geef het een naam, selecteer alleen lokaal en klik op OK.
Deze "site" verwijst eenvoudigweg naar de manier waarop naar de map op uw lokale computer zal worden verwezen. Maak je niet al te veel zorgen over hoe het heet; je moet het later gewoon kunnen identificeren. De naam mag ook geen spaties of speciale tekens bevatten.
Op dit punt is de site-HTML en -markering al concurrerend, dit is bereikt in de fase "Build", Sitegrinder compileert nu en slaat die .html- en gerelateerde bestanden op naar uw computer in de map die u hebt geselecteerd.
Het lijkt op de Design Manager en heeft een lokaal adres. U moet definiëren welke pagina de standaard laadpagina op uw site zal zijn, of de "Index". Vink het vakje "index" aan naast de gewenste pagina, dit zal ervoor zorgen dat SiteGrinder het bestand hernoemt naar "index.html" bij FTP-upload naar uw server.
Zodra dit allemaal is ingevoerd, klikt u op OK.
Het serveradres begint waarschijnlijk met ftp. Bij het instellen van het externe pad wordt ten zeerste aangeraden om de functie "Bladeren" te gebruiken voor de meest nauwkeurige map. Het "HTTP-adres" zal zijn waar SiteGrinder je naartoe zal sturen na het uploaden, dus het is waarschijnlijk het beste om het domein of de subdirectory te kiezen waar je aan het uploaden bent..
Bij de eerste upload zal elke uploadoptie exact hetzelfde doen, omdat er in essentie geen bestanden op uw server staan. Maar om veilig te zijn, wanneer ik een nieuwe implementeer voor het eerst upload, kies ik altijd voor Upload Everything om ervoor te zorgen dat ik een nieuwe, schone kopie krijg op mijn server.
>
Hierdoor wordt uw pagina (of wat u ook hebt ingevoerd als uw HTTP-adres) weergegeven. U kunt zien dat uw pagina nu live is. Dat is ongeveer het voor het gedeelte SiteGrinder, daarna gaan we verder met het implementeren van de site in Pagelime voor eenvoudige bewerking.
Als u nieuw bent bij Pagelime, kunt u de aanmeldingspagina bezoeken om een gratis account te krijgen voor gebruik met SiteGrinder. Pagelime is een geweldig eenvoudig CMS dat de implementatietijd drastisch verkort en uw klant iets geeft dat zij kunnen begrijpen.
Wanneer u zich aanmeldt voor een PRO- of zakelijke account, heeft u naast alle standaard Pagelime-functies en plug-ins de mogelijkheid om de backend volledig te personaliseren en te voorzien van een eigen merk. Pagelime biedt u de mogelijkheid om de CMS volledig te labelen van URL naar logo en kleurenschema. Hiermee kunt u uw klant een consistente en merkervaring bieden tijdens het werken met u en op hun site. Hiermee kunt u ook de service markeren en cashflow toevoegen aan uw inkomstenstroom. U kunt clients instellen op automatisch terugkerende factureringscycli voor het gebruik van uw CMS, ofwel Pagelime, rechtstreeks vanuit Pagelime Account / Billing Manager.
Als u verdere hulp op deze pagina nodig heeft, heeft Pagelime enkele uiterst nuttige tooltips die aan de rechterkant verschijnen wanneer elk veld is geselecteerd. Gebruik deze als referentie voor wat u moet invoeren en hoe u het moet opmaken. Je kunt ook je verbinding testen aan de onderkant van de pagina. Het wordt aanbevolen dat u de functie "Bladeren" gebruikt bij het selecteren van het bestandspad, want dat zorgt voor de meeste nauwkeurigheid. Zorg er ook voor dat u uw geavanceerde instellingen (volgende stap) wijzigt voordat u op "Site-instellingen opslaan" klikt
Dit kan worden gewijzigd in elke speciale klasse die u in stap 4 hebt genoemd in de SiteGrinder Design Manager.
Dit is hoe Pagelime identificeert welke regio's bewerkbaar moeten zijn. Als deze klassenaam niet overeenkomt met de klasse die u in stap 4 hebt toegevoegd, of als de klassen die u in stap 4 hebt toegevoegd, niet consistent zijn met deze 'Bewerkbare CSS-klassenaam' op uw pagina's, kunt u die regio's binnen de Pagelime niet bewerken Site-editor. Als je echter bent vergeten de klasse aan een regio toe te voegen, maak je dan niet bang, en als je niet bang bent voor een beetje HTML-code, hoef je niet eens terug te gaan naar stap 4. Je hoeft niet zelfs een externe editor zoals Dreamweaver moet gebruiken. Gebruik in plaats daarvan, wanneer u een pagina hebt geselecteerd om te bewerken in de Pagelime Site Editor, de rechter vervolgkeuzelijst en selecteer bewerkingscode. Dit opent een rijke, gemarkeerde syntaxisweergave van de raw-code van uw site waarmee u handmatig CSS-klassen kunt toevoegen. Raadpleeg voor meer informatie over dit proces een zelfstudie, genaamd Handmatig CSS-klassen toevoegen via de Pagelime Site-editor
Als de SiteGrinder 3-engine nog niet is geopend, wordt de SiteGrinder 3-engine gestart. Nadat de Engine is gestart, genereert SiteGrinder een rapport over eventuele fouten of waarschuwingen die het in de sjabloon kan vinden. Bekijk de fouten en corrigeer eventuele ernstige fouten * (u kunt er ook voor kiezen ze te negeren, de site moet nog steeds worden gebouwd). Nadat u de fouten hebt opgelost, gaat u verder naar de pagina Build and Deploy. Hier moet je de pagina's afvinken die je wilt laten bouwen door SiteGrinder. In deze zelfstudie bouwen we alleen de startpagina op. Nadat de gewenste pagina's zijn geselecteerd, klikt u op "Build".
* Opmerking: als u de testsjabloon SiteGrinder 3 gebruikt met een demo of basisversie van SiteGrinder 3, is het mogelijk dat u een rapport tegenkomt met 2 "ernstige" fouten. Bekijk de fouten zorgvuldig. Het is zeer waarschijnlijk dat de fouten worden gegenereerd omdat u verwijst naar tags zoals - $ of -blog binnen de sjabloon waarvoor extra plug-ins vereist zijn. De Commerce-add-on voor - $ en de controle-add-on voor -blog. Als dat het geval is, kun je toch doorgaan. In deze zelfstudie bouwen we de pagina 'winkel' of 'blog' niet op, dus deze fouten zijn niet relevant.
Als u Site-instellingen opslaat, bevestigt en slaat u de FTP- en Pagelime-instellingen op die u zojuist hebt ingevoerd. Dit zorgt er ook voor dat Pagelime opnieuw wordt geladen. Nadat u klaar bent, kunt u terugkeren naar het Sitestashboard.
Met deze plug-in kunt u afbeeldingen uploaden en beheren via Pagelime. Het is vereist dat u deze plug-in hebt bijgewerkt om ELKE foto te beheren op een pagina waarop Pagelime is ingeschakeld. Als u zin heeft in uw afbeeldingen, raden we u ook aan Beeldoptimalisatie in te schakelen waarmee u de beeldkwaliteit kunt regelen en foto-effecten kunt toevoegen vanuit Pagelime.
In het menu Sitefuncties kunt u ook een aantal extra functies activeren, zoals paginasjablonen en inhoudsgeschiedenis. Inhoudsgeschiedenis kan zeer nuttig zijn bij het maken van doorlopende bewerkingen op een site, omdat het al uw eerdere bewerkingen van een sessie registreert en u in staat stelt om inhoud terug te draaien als een fout of onjuiste wijziging wordt aangebracht.
Klik gewoon op een afbeelding of tekst, het hoofdgedeelte of de kleine zwarte bewerkingsballon. Hiermee wordt een WYSIWYG-editor geopend (die ook een HTML-weergave heeft) of de ZoomCrop-browser voor afbeeldingen. Van hieruit kunt u eenvoudig de inhoud bewerken, opslaan en vervolgens, wanneer u klaar bent met alle wijzigingen op een pagina, klikt u op de publicatieknop onder 'Pagina-acties'. Hiermee worden al uw bewerkingen live naar uw openbare site verzonden.
Als u dit aan uw klant wilt doorgeven, maakt u een nieuwe gebruiker onder uw accountbeheerder en geeft u deze rechten aan de site. Die gebruiker zou dan inloggen via uw eigen URL of cms.pagelime.com - zo simpel is het. De daadwerkelijke bewerking wordt behandeld in de video hieronder, of we hebben ook een kortere video van 5 minuten die direct kan worden bewerkt als je een opfriscursus nodig hebt.
Merk op dat u bij het bewerken van de afbeeldingen binnen deze DIV's over het midden van de afbeelding moet zweven en naar het pictogram voor kleine afbeeldingen moet zoeken. Klik op dit gebied om toegang te krijgen tot de ZoomCrop-browser. Vergeet niet dat de Afbeeldingsgalerie-plug-in moet zijn ingeschakeld. Als u op de DIV-tag klikt, activeert u de afbeelding in een WYSIWYG-editor die, hoewel deze wel werkt, niet is wat we willen en ons niet de beste bewerkingsbesturing voor onze afbeeldingen zal geven. Deze situatie is gecreëerd omdat SiteGrinder een DIV rond de afbeelding heeft gemaakt. Als je dit handmatig wilt herstellen, kun je de code bewerken en de bewerkbare tag uit de omringende div verwijderen en in plaats daarvan de klasse naar de IMG-tag verplaatsen, dit kan ook allemaal gemakkelijk binnen Pagelime gedaan worden, zie onze blogpost / tutorial erover, Handmatig CSS-klassen toevoegen via de Pagelime Site-editor
Als u wilt publiceren, klikt u op de vervolgkeuzelijst 'Pagina-acties' en klikt u op Publiceren. BAM !, u bent klaar!
Bedankt voor het volgen van deze tutorial. Als u vragen, opmerkingen, probleemoplossing, wensen, hoop of dromen over Pagelime heeft, kunt u de PageLime-forums of de documentatie wiki bezoeken.
Accentsconagua