InContext Editing

[Pcleekske89]

Categorie: Webdesign
Software: Dreamweaver CS4
Moeilijkheidsgraad:

Andere informatie: Tutorial wordt uitgelegd met een Engelstalige versie van Dreamweaver CS4 en een simpel opgemaakte HTML pagina.

--------------------------------------------------------------------------

Inleiding
InContext Editing is een nieuwe functie van Adobe die het mogelijk maakt om online, zonder tussenkomst van een programma voor webontwerp je website te bewerken. Professionele webdesigners kunnen de website maken en publiceren terwijl de leken de teksten e.d. kunnen updaten. Het gaat hier dan ook voornamelijk om HTML site's (hierbij hoort dus ook de HTML inbegrepen in een PHP-pagina.)

Tutorial (in stappenplan)
We gaan er hier wel vanuit dat je al beschikt over een reeds opgemaakte HTML pagina met Dreamweaver

STAP 1 - Het toewijzen van een bewerkbaar gebied

Open een webpagina waarvan de lay-out is opgemaakt in HTML

Hoewel je gedeeltes van je webpagina kunt aanklikken als een bewerkbaar gebied kiezen wij hier voor de volledige lay-out.

Je klikt de buitenste lijnen van je tabel aan. Zorg dus dat deze geselecteerd is.

Nu ga je naar je menu - ga naar "Insert" => InContext Editing en kies "Create Editable Region"

Nu kan je voor de keuze te komen staan en een bericht als hieronder krijgen:

Beide keuzes zijn goed!

Als je het bovenstaande goed hebt uitgevoerd en alles is verlopen naar wens zie je het gekozen gebied omringt door een blauwe stippelijn met links bovenaan getiteld "Editable Region'

TIP: Bij 'Properties' beschik je over de mogelijkheid enkele bewerkingsfuncties uit te schakelen zoals bijv. het invoegen van afbeeldingen, het vet maken van tekst...

Vervolg volgt...

 

[Pcleekske89]

Stap 2 - Registreren bij de InContext Service

Surf naar http://incontextediting.adobe.com/

Kies daar "Create New Account"

Vul daar alle nodige gegevens in en activeer je account indien nodig. Wanneer je dat hebt gedaan surf je terug naar http://incontextediting.adobe.com/ en klik op 'Sign in'.

Wanneer je zich hebt aangemeld ga je linksboven naar "Add site"

Stap 3 - De gegevens om te verbinden met je website ingeven

Er verschijnt een popupvenster. We gaan er hier wel van uit dat het nog steeds de kenner van dienst is die dit instelt.

• Site name: De naam van je website
• Site Adress: Het internetadres van je website (best geen forward URL)

--------------------------
Klik op "Next"
--------------------------

• Connection Method: Je verbindingswijze, meestal is dit FTP
• FTP Host: Je hostadres bij je FTP-server, bij ONE bijv. is dat 'ftp.' gevolgd door je domeinnaam
• Username: De gebruikersnaam waarmee je inlogt op je FTP-server
• Password: Het wachtwoord om verbinding te maken met je FTP-server

--------------------------
Klik op "Test Connection" om na te gaan of de gegevens juist zijn of "Next" om verder te gaan
--------------------------

• Host Directory: De root folder van je FTP-server of een andere map waar je pagina's zijn opgeslagen.
• Media directory: de map waar je mediabestanden e.d.d opslaat, bijv. Flash bestanden, filmpjes...
• Default page: de startpagina van je 'Host Directory', dat is dus de pagina waarop een surfer terechtkomt na het ingeven van je domeinnaam, meestal is dit iets als 'index.htm', 'index.php'...

--------------------------
Klik op "Save"
--------------------------

• Je kan onderaan ervoor kiezen een gebruiker uit te nodigen (iemand die dus je pagina's mag bewerken = invite user), om je website te bewerken (edit site) of om het huidig configuratie venster te sluiten (close)

Stap 4 - Je website online bewerken

Als je een bewerkbaar gebied aan je pagina hebt toegevoegd, en je hebt je geregistreerd kan je vervolgens beginnen met het bewerken van pagina's online.

Daarvoor moet je deze natuurlijk eerst op je FTP-server plaatsen!

Surf naar een/de pagina waar je een bewerkbaar gebied hebt toegevoegd

Windows gebruikers geven de toetsencombinatie CTRL+E in en MAC gebruikers COMMAND+E

Je ziet je webpagina veranderen, er verschijnt een laadbalkje en erna zie je terug je webpagina maar dan met enkele attributen er rond.

Indien je de webpagina wilt bewerken klik je op de knop "edit page"

De bewerkingswijze is nu te vergelijken met dat van een tekstverwerker of een programma voor webdesign, maar dan eenvoudiger in het aantal functies. Vanaf dit punt rust deze tutorial voort op vragen en suggesties en vooral je eigen verkenningsmogelijkheden!