Wps

548 views
465 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
548
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wps

  1. 1. myaiesec.net web publishing system <ul><li>training tutorial </li></ul>
  2. 2. Introduction <ul><li>This tutorial is meant to demonstrate every step required to create a website using the web publishing system (WPS) built into myaiesec.net </li></ul><ul><li>We will begin by explaining the basics of page structure, then create a new website step by step, showing you how you edit information, and where it will display on the website </li></ul>
  3. 3. For this exercise... <ul><li>We will create a fictional Member Committee page. Our fictional MC will be called “Secondlife” </li></ul><ul><li>We will perform every action required to publish a website for the Secondlife MC so you can follow along </li></ul>
  4. 4. Introduction <ul><li>The websites are composed of 4 navigation “cells” that contain links to move around the site, we will call them nav1, nav2, nav3, and nav4 for this tutorial </li></ul><ul><li>Content is displayed in the main frame of the website </li></ul>
  5. 5. nav1 nav2 main nav3 nav4 (not shown but appears in side bar) Navigation
  6. 6. Navigation <ul><li>Tabs along the top represent pages in our website. In the WPS each page is a folder. So when you want to create a new page you need to create a new folder within the WPS </li></ul><ul><li>You can also define wether or not that folder will appear as a tab in nav1 or remain hidden </li></ul>
  7. 7. Navigation <ul><li>As you can see when you click a tab additional selections become visible. Each of these selections represent a page contained inside the “About AIESEC” folder on the WPS </li></ul><ul><li>You can also define wether these pages display in the nav2 bar or not </li></ul>
  8. 8. Navigation <ul><li>On the left bar (nav3) you can select “articles” about different topics within the section. </li></ul><ul><li>here after clicking on “work abroad” in the nav2 bar; examples of work abroad opportunities appear in the nav3 bar </li></ul>
  9. 9. Navigation <ul><li>If you click on an article and there is more information within it the fourth navigation level will appear </li></ul><ul><li>here you can see that after you click “Global Development Group” selections pop up for each member of the group (ABN, Cadbury and so on) </li></ul>
  10. 10. First Steps <ul><li>We will now take you through the steps needed to create your first page. </li></ul><ul><li>Feel free to follow along by opening your browser window as you view these slides </li></ul>
  11. 11. First Steps <ul><li>To begin creating web pages log onto your myaiesec.net account </li></ul><ul><li>click on the “Web Publishing” link found within the left navigation column </li></ul>
  12. 12. First Steps <ul><li>The Web Publishing screen will load </li></ul><ul><li>Disable pop-up blockers on your web browser </li></ul><ul><li>Click “Web Publishing” in the far right navigation bar </li></ul><ul><li>A new window will open containing the WPS </li></ul>
  13. 13. First Steps <ul><li>If you see this window double check that your pop-up blocker is disabled and click “Reopen window” </li></ul>
  14. 14. First Steps <ul><li>The explorer panel looks like this. From here you can find all of the projects you have access to (top drop down menu) and see the files in each project (right cell) </li></ul><ul><li>You can only see projects you have permissions to edit </li></ul>
  15. 15. First Steps <ul><li>First we need to find your country folder, select you’re countries name in the projects menu to do this. Next navigate the folders that appear as follows: </li></ul><ul><li>Select entity (AI/GN/MC/LC/Team) in the folders </li></ul>
  16. 16. First Steps <ul><li>As you can see any folder you have permission to edit is in black, and folders you do not have permission to edit are grey </li></ul><ul><li>Note: as our MC is fictional there is no folder on the WPS, so we will create it within another folder. Your country will have a folder however </li></ul>
  17. 17. index.html <ul><li>To create a home page for the Secondlife MC we need to create an index.html file. This is easy to do using templates and the “what you see is what you get” (WYSIWYG) web editor included in the WPS. The next few slides will demonstrate this. </li></ul>
  18. 18. index.html <ul><li>Select your country’s folder as instructed in the previous slide </li></ul><ul><li>Click “New” in the top bar </li></ul><ul><li>Select “Page with free text” to create your index.html file. </li></ul>
  19. 19. index.html <ul><li>Name your page, and select a template from the drop down menu. You can change these options later if you need to. </li></ul><ul><li>Ensure both check boxes are selected and click Continue >> </li></ul>
  20. 20. index.html <ul><li>Each template is for a different purpose. There are many to pick from, but you need to select the right template for your topic </li></ul>
  21. 21. index.html <ul><li>Keywords help search engines find your website, and the description field is what search engines display to readers so they know what your site is about </li></ul><ul><li>The Add to Navigation box adds a link to this page in the top navigation bar </li></ul>
  22. 22. index.html <ul><li>If you need to change the properties of the file you can click the page icon (see right) and select “properties” then “advanced” on the second page. You can change its name, position, appearance and other options </li></ul>the index.html file is your homepage, it is what you edit when you need to change the first page people see
  23. 23. index.html <ul><li>you can edit what your index.html file displays by clicking this icon as well, and then selecting “Edit Page” the WYSIWYG editor will then open </li></ul><ul><li>The WYSIWYG editor will be familiar to you if you use word processor programs like Microsoft Word often </li></ul>
  24. 24. Creating other Pages <ul><li>to create another webpage on your site you need to create a folder. All folders you create will automatically appear in the top navigation bar (you can un-select this option if you choose) </li></ul>So you have created your first page, now you need to add others to complete your website. Pages like “about us” “contact us” “current events” and other information web browsers may be seeking
  25. 25. Creating other Pages <ul><li>Click “New” in the top menu bar but select “Folder” this time </li></ul>
  26. 26. Creating other Pages <ul><li>Follow the same steps you did to create your index.html file. </li></ul><ul><li>The “Insert After” menu selection is how you select the order of your tabs. Here I have selected to show this tab in the last position (see bottom image) </li></ul>
  27. 27. Creating other Pages <ul><li>When you create a new folder it will automatically have you create a new page within that folder. </li></ul><ul><li>Remember the descriptions box is what will display in search engine results, so be sure to give a short (10-20 word) description of the page that includes keywords! </li></ul>
  28. 28. Creating other Pages <ul><li>I have created three pages for this website, “Home”, “About Secondlife”, and “Virtual Events” </li></ul><ul><li>There is no tab in the nav1 bar for my index.html page because it was not created inside a folder. It is up to you to determine how you want navigation to work on your site, and the WPS gives you this flexibility </li></ul>
  29. 29. Creating other Pages <ul><li>Why not want a tab in nav1 for a page? </li></ul><ul><li>You may want to create an alternate website for a project that you don’t want connected to the main website </li></ul><ul><li>You may want to provide information only to users who are given specific links to follow! (think email campaigns!) </li></ul><ul><li>Marketing reasons, its really up to you! </li></ul>
  30. 30. Second Level Nav bar <ul><li>You can see how this looks in the WPS. Note one folder for each page and the index.html file </li></ul><ul><li>To create pages on the nav2 bar we simply create folders inside these folders </li></ul><ul><li>To demonstrate we will create some folders in the “Virtual Events” folder </li></ul>
  31. 31. <ul><li>I have created three pages within the “virtual events” folder </li></ul><ul><li>You can see how these pages display on our website </li></ul><ul><li>When someone clicks “press events” we want them to be able to select events by months, so we need to create a new folder for each month we want as an option... </li></ul>Second Level Nav bar
  32. 32. Third Level Nav bar <ul><li>Within the “press events” folder I have created two new pages; January Events, and May Events </li></ul><ul><li>They are displayed in the nav3 bar </li></ul><ul><li>You can complete the same steps you used to create pages in the nav3 bar to create pages in the nav4 bar </li></ul>
  33. 33. Editing Your Pages <ul><li>Page edits are very simple with this WPS! </li></ul><ul><li>Simply click the page icon next to the .html file you want to edit and then select “Edit Page” and it will load in the WYSIWYG editor! </li></ul><ul><li>from the WYSIWYG editor you can click on the magnifying glass icon to see what your page looks like in a web browser, your default web browser will load with the source code. Using this you can see your page without actually making it “live” on the internet </li></ul>
  34. 34. Publishing Your Pages <ul><li>When a webpage is ready to “go live” you simply click on the page icon and select “Publish directly” </li></ul>
  35. 35. Finishing Touches <ul><li>You can add images to your pages, tables and backgrounds, and just about any formatting you can do in a word processor can be re-created within the WYSIWYG editor </li></ul><ul><li>To find the functions, hoover your mouse button over the different options, and a description of the button will appear </li></ul>Cut
  36. 36. Adding Photos <ul><li>It is supper easy to add photos to your website! </li></ul><ul><li>First go to the main folder, the one where we created our very first index.html page. Create a new folder called “images” where you will store all of the pictures you want to use on your website! </li></ul><ul><li>Once the folder is created, open it and then click on “upload” in the top bar to begin loading images you want to use into the folder. The steps are illustrated on the next slide </li></ul>
  37. 37. Uploading Photos Step 1 Step 2 - find files and upload Step 3 - Check file by clicking to open, it will appear in a new browser window
  38. 38. Uploading Photos Step 4 - copy the image location from the browsers navigation bar and save it. you will need it soon
  39. 39. Uploading Photos Step 5 - Go back and find the page that you want to insert the image into and open it in the WYSIWYG Editor
  40. 40. Uploading Photos Step 6 - Place your curser where you want the image to appear, and then select the “ insert/modify image ” button
  41. 41. Uploading Photos Step 7 - in the pop up window you will see a selection for “Image URL:” Paste the image location you copied and saved earlier here, then click Preview to double check it is the right file
  42. 42. Uploading Photos Step 8 - after hitting ok your image should appear where your curser was. You can resize this image, put it in tables, or anything else you can do in a word processor!
  43. 43. Uploading Photos Step 9 - Last step: click the magnifying glass to preview your site and see how it looks! Experiment with different photo layouts to find what works best for you
  44. 44. That it! Creating a website is very easy with the new WPS, once you understand the navigation and folders it is easy to edit web pages using the WYSIWYG editor just like you would create documents in Microsoft Word! If you have any questions about the WPS, please feel free to contact the global communication crew at gcc@ai.aiesec.org, or your MC’s Communications responsible

×