ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Put a landing page online

?Download as PPT, PDF?
?
F
franceguide

The document provides a step-by-step guide to uploading images and HTML code for a landing page to an FTP server and then publishing the landing page on a website. It involves using FileZilla to upload images, editing the HTML in Dreamweaver to update image paths, copying code snippets, and navigating a back-office interface to assign links and publish the page.

1 of 36
Download to read offline
How to: Put a landing page online 101
After Reflex has sent you the landing page by email, and after unzipping the file you received, this is what you have on your desktop: A file with the images (1) and a page in HTML (2) (1) (2) Step 1
What you want to do is to put the images in our ftp online. You need to use fileZilla. Below is FileZilla just after you open it (by cliking on the FileZilla icon on your desktop). Enter your ftp address (1), your user name (2) and your password (3). And then click on quickconnect (4). Step 2 (4) (1) (2) (3)
Step 3 Below is the now connected FileZilla. You can see on the right a lot of folders. You want to create one dedicated file among them to the landing page, or you can use one already there. It¡¯s up to you. To create a folder, right click anywhere with your mouse anywhere in this area, and then click on create directory
Step 4 Enter the name of the new directory (1). Make sure to pick your name wisely. Pick something easy to remember and connected with the landing page (usually the name of the campaign for which the landing page was created). And click on OK (2) (1) (2)
Step 5 Find the new folder among the others and open it by clicking on it.
Step 6 Following the same process as in steps 3 and 4 (right click, create a new directory¡­) create a new file named ¡°images¡± in the folder you just opened. Click on the file images now! Keep this in mind for step 13. It¡¯s going to be part of the path you will need in step 13
Step 7 Now you can see on the remote site (2) that you are in the file images and that this file is, so far, empty (2). (2) (1)
Step 8 (1) (2) (3) On the left (1) you see the files in your computer. You want to find the images file with all the images from the landing page. Click on it (2) and you will see all the images listed inside (3). Select them all.
Drag them all with your mouse from (2) to (3). You are done with the ftp, the images are now all on it. (2) (3) Step 9
(2) Now, you have to work on the HTML page itself (see step 1). Right click(1) on it with your mouse and then on ¡°open with¡± (2) in the menu and click on Adobe dreamweaver (3). Step 10 (1) (2) (3)
Step 11 When Dreamweaver is open, by default your page is split between the code (1) and the page as you can see it in a web browser (2). (1) (2)
Step 12 Click on code (1). Then you see the page only in code (2). Now you can see all the images in this page (3). There are a lot of them, so the code may reach the bottom of the page! (2) (1) (3) (3)
Step 13 Now you have to paste the path to the images you downloaded in the ftp in the code for each image of the landing page. The path is below. The green part never changes. To find the red part, see step 6. Path http://us.maison-de-la-france.com/us/ gotoday-traveler/
Step 14 When you are done, this is what you see.
Step 15 Now you need to copy the code between ImageReady slices (1) and End ImageReady slices (2) (1) (2)
Step 16 Open the BackOffice and enter down your login (1) password (2) and click on valider (3) (1) (2) (3)
Step 17 Then click on ¡°Arborescence¡± (map of the site)
Step 18 Find in the ¡°arborescence¡± the node where you want to put the landing page and click on the + near the name of the landing page (1) (1)
Step 19 With your mouse do a right click on ¡°accueil¡±, below the name of the landing page (1) (1)
Step 20 ¡° Propri¨¦t¨¦s¡± pops up below accueil after you do the right click.
Step 21 Click on ¡°propri¨¦t¨¦s¡±.
Step 22 ¡° Click on ¡°redaction¡±
Step 23 Right click over here on the little yellow pen.
Step 24 Click right over here on the little icon that looks like <>
Step 25 You need to paste the code you copied in step 15 into the empty field.
Step 26 Now the codes are copied. Click again here.
Step 27 Now you see the landing page as it will appear on line (more or less ? ). Click on ¡°valider¡±.
Step 28 After clicking on ¡°valider¡± you are automatically directed to this page. Click on ¡°enregistrer¡± (1). And then click again on the little yellow pen (2) (1) (2)
This window pops up after you have clicked on the pen in the previous step. Now you want to apply the links on the landing page. Select a text or image on which you want to apply a link (1) and then click on the chain in the menu (2). Step 29 (1) (2)
The usual window for links pops up. You need to choose between(1) ¡°cr¨¦er un lien vers un mode ou une page¡± when the link goes to our website or (2) ¡°cr¨¦er un lien libre¡± when it goes to a partner¡¯s website Step 30 (1) (2)
www.mylink.com (1) In the example below we chose ¡°cr¨¦er un lien libre¡±. You have to enter the link (1) and then to click on valider le lien (2) Step 31 (2)
Now you have to activate the tracking by clicking on ¡°Souhaitez vous activer le tracking¡± (1) Step 32 (1)
Enter a tracking name for the link (1). In general, use landing - the-name-of-the-campaign - the-name-of-the-link : ie: landing-gotoday-subscribeenews for the link on subscribe to our enews on the landing page of the campaign in partnership with Go-today. And choose between lien de navigation (if the link goes to our website) or lien de sortie (if it goes to a partner¡¯s website) (2) Step 33 (2) (1)
Click on ¡°lien classique¡± (1) and on ¡°dans une nouvelle fen¨ºtre¡± (2) and on ¡°valider les informations et g¨¦n¨¦rer le lien¡± (3) Step 34 (1) (2) (3)
Click on ¡°fermer cette fen¨ºtre et appliquer le lien¡± (1). Then repeat steps 29 to 35 for all the links you want to apply on the landing page. Step 35 (1)

More Related Content

Put a landing page online

  • 1. How to: Put a landing page online 101
  • 2. After Reflex has sent you the landing page by email, and after unzipping the file you received, this is what you have on your desktop: A file with the images (1) and a page in HTML (2) (1) (2) Step 1
  • 3. What you want to do is to put the images in our ftp online. You need to use fileZilla. Below is FileZilla just after you open it (by cliking on the FileZilla icon on your desktop). Enter your ftp address (1), your user name (2) and your password (3). And then click on quickconnect (4). Step 2 (4) (1) (2) (3)
  • 4. Step 3 Below is the now connected FileZilla. You can see on the right a lot of folders. You want to create one dedicated file among them to the landing page, or you can use one already there. It¡¯s up to you. To create a folder, right click anywhere with your mouse anywhere in this area, and then click on create directory
  • 5. Step 4 Enter the name of the new directory (1). Make sure to pick your name wisely. Pick something easy to remember and connected with the landing page (usually the name of the campaign for which the landing page was created). And click on OK (2) (1) (2)
  • 6. Step 5 Find the new folder among the others and open it by clicking on it.
  • 7. Step 6 Following the same process as in steps 3 and 4 (right click, create a new directory¡­) create a new file named ¡°images¡± in the folder you just opened. Click on the file images now! Keep this in mind for step 13. It¡¯s going to be part of the path you will need in step 13
  • 8. Step 7 Now you can see on the remote site (2) that you are in the file images and that this file is, so far, empty (2). (2) (1)
  • 9. Step 8 (1) (2) (3) On the left (1) you see the files in your computer. You want to find the images file with all the images from the landing page. Click on it (2) and you will see all the images listed inside (3). Select them all.
  • 10. Drag them all with your mouse from (2) to (3). You are done with the ftp, the images are now all on it. (2) (3) Step 9
  • 11. (2) Now, you have to work on the HTML page itself (see step 1). Right click(1) on it with your mouse and then on ¡°open with¡± (2) in the menu and click on Adobe dreamweaver (3). Step 10 (1) (2) (3)
  • 12. Step 11 When Dreamweaver is open, by default your page is split between the code (1) and the page as you can see it in a web browser (2). (1) (2)
  • 13. Step 12 Click on code (1). Then you see the page only in code (2). Now you can see all the images in this page (3). There are a lot of them, so the code may reach the bottom of the page! (2) (1) (3) (3)
  • 14. Step 13 Now you have to paste the path to the images you downloaded in the ftp in the code for each image of the landing page. The path is below. The green part never changes. To find the red part, see step 6. Path http://us.maison-de-la-france.com/us/ gotoday-traveler/
  • 15. Step 14 When you are done, this is what you see.
  • 16. Step 15 Now you need to copy the code between ImageReady slices (1) and End ImageReady slices (2) (1) (2)
  • 17. Step 16 Open the BackOffice and enter down your login (1) password (2) and click on valider (3) (1) (2) (3)
  • 18. Step 17 Then click on ¡°Arborescence¡± (map of the site)
  • 19. Step 18 Find in the ¡°arborescence¡± the node where you want to put the landing page and click on the + near the name of the landing page (1) (1)
  • 20. Step 19 With your mouse do a right click on ¡°accueil¡±, below the name of the landing page (1) (1)
  • 21. Step 20 ¡° Propri¨¦t¨¦s¡± pops up below accueil after you do the right click.
  • 22. Step 21 Click on ¡°propri¨¦t¨¦s¡±.
  • 23. Step 22 ¡° Click on ¡°redaction¡±
  • 24. Step 23 Right click over here on the little yellow pen.
  • 25. Step 24 Click right over here on the little icon that looks like <>
  • 26. Step 25 You need to paste the code you copied in step 15 into the empty field.
  • 27. Step 26 Now the codes are copied. Click again here.
  • 28. Step 27 Now you see the landing page as it will appear on line (more or less ? ). Click on ¡°valider¡±.
  • 29. Step 28 After clicking on ¡°valider¡± you are automatically directed to this page. Click on ¡°enregistrer¡± (1). And then click again on the little yellow pen (2) (1) (2)
  • 30. This window pops up after you have clicked on the pen in the previous step. Now you want to apply the links on the landing page. Select a text or image on which you want to apply a link (1) and then click on the chain in the menu (2). Step 29 (1) (2)
  • 31. The usual window for links pops up. You need to choose between(1) ¡°cr¨¦er un lien vers un mode ou une page¡± when the link goes to our website or (2) ¡°cr¨¦er un lien libre¡± when it goes to a partner¡¯s website Step 30 (1) (2)
  • 32. www.mylink.com (1) In the example below we chose ¡°cr¨¦er un lien libre¡±. You have to enter the link (1) and then to click on valider le lien (2) Step 31 (2)
  • 33. Now you have to activate the tracking by clicking on ¡°Souhaitez vous activer le tracking¡± (1) Step 32 (1)
  • 34. Enter a tracking name for the link (1). In general, use landing - the-name-of-the-campaign - the-name-of-the-link : ie: landing-gotoday-subscribeenews for the link on subscribe to our enews on the landing page of the campaign in partnership with Go-today. And choose between lien de navigation (if the link goes to our website) or lien de sortie (if it goes to a partner¡¯s website) (2) Step 33 (2) (1)
  • 35. Click on ¡°lien classique¡± (1) and on ¡°dans une nouvelle fen¨ºtre¡± (2) and on ¡°valider les informations et g¨¦n¨¦rer le lien¡± (3) Step 34 (1) (2) (3)
  • 36. Click on ¡°fermer cette fen¨ºtre et appliquer le lien¡± (1). Then repeat steps 29 to 35 for all the links you want to apply on the landing page. Step 35 (1)