This tutorial demonstrates how to create a website using the myaiesec.net web publishing system (WPS). It shows how to set up the basic page structure and navigation, create a sample website for a fictional Member Committee called "Secondlife", and add pages, folders, images and content. Key steps include creating an index.html homepage, adding additional pages through new folders, uploading and inserting images, and publishing pages live on the website. The WYSIWYG editor allows dragging and dropping content like in a word processor.

1. myaiesec.net web publishing system training tutorial

2. Introduction This tutorial is meant to demonstrate every step required to create a website using the web publishing system (WPS) built into myaiesec.net 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

3. For this exercise... We will create a fictional Member Committee page. Our fictional MC will be called “Secondlife” We will perform every action required to publish a website for the Secondlife MC so you can follow along

4. Introduction 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 Content is displayed in the main frame of the website

5. nav1 nav2 main nav3 nav4 (not shown but appears in side bar) Navigation

6. Navigation 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 You can also define wether or not that folder will appear as a tab in nav1 or remain hidden

7. Navigation 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 You can also define wether these pages display in the nav2 bar or not

8. Navigation On the left bar (nav3) you can select “articles” about different topics within the section. here after clicking on “work abroad” in the nav2 bar; examples of work abroad opportunities appear in the nav3 bar

9. Navigation If you click on an article and there is more information within it the fourth navigation level will appear 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)

10. First Steps We will now take you through the steps needed to create your first page. Feel free to follow along by opening your browser window as you view these slides

11. First Steps To begin creating web pages log onto your myaiesec.net account click on the “Web Publishing” link found within the left navigation column

12. First Steps The Web Publishing screen will load Disable pop-up blockers on your web browser Click “Web Publishing” in the far right navigation bar A new window will open containing the WPS

13. First Steps If you see this window double check that your pop-up blocker is disabled and click “Reopen window”

14. First Steps 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) You can only see projects you have permissions to edit

15. First Steps 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: Select entity (AI/GN/MC/LC/Team) in the folders

16. First Steps 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 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

17. index.html 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.

18. index.html Select your country’s folder as instructed in the previous slide Click “New” in the top bar Select “Page with free text” to create your index.html file.

19. index.html Name your page, and select a template from the drop down menu. You can change these options later if you need to. Ensure both check boxes are selected and click Continue >>

20. index.html Each template is for a different purpose. There are many to pick from, but you need to select the right template for your topic

21. index.html 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 The Add to Navigation box adds a link to this page in the top navigation bar

22. index.html 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 the index.html file is your homepage, it is what you edit when you need to change the first page people see

23. index.html 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 The WYSIWYG editor will be familiar to you if you use word processor programs like Microsoft Word often

24. Creating other Pages 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) 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. Creating other Pages Click “New” in the top menu bar but select “Folder” this time

26. Creating other Pages Follow the same steps you did to create your index.html file. 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)

27. Creating other Pages When you create a new folder it will automatically have you create a new page within that folder. 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!

28. Creating other Pages I have created three pages for this website, “Home”, “About Secondlife”, and “Virtual Events” 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

29. Creating other Pages Why not want a tab in nav1 for a page? You may want to create an alternate website for a project that you don’t want connected to the main website You may want to provide information only to users who are given specific links to follow! (think email campaigns!) Marketing reasons, its really up to you!

30. Second Level Nav bar You can see how this looks in the WPS. Note one folder for each page and the index.html file To create pages on the nav2 bar we simply create folders inside these folders To demonstrate we will create some folders in the “Virtual Events” folder

31. I have created three pages within the “virtual events” folder You can see how these pages display on our website 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... Second Level Nav bar

32. Third Level Nav bar Within the “press events” folder I have created two new pages; January Events, and May Events They are displayed in the nav3 bar You can complete the same steps you used to create pages in the nav3 bar to create pages in the nav4 bar

33. Editing Your Pages Page edits are very simple with this WPS! 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! 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

34. Publishing Your Pages When a webpage is ready to “go live” you simply click on the page icon and select “Publish directly”

35. Finishing Touches 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 To find the functions, hoover your mouse button over the different options, and a description of the button will appear Cut

36. Adding Photos It is supper easy to add photos to your website! 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! 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

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. Uploading Photos Step 4 - copy the image location from the browsers navigation bar and save it. you will need it soon

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. Uploading Photos Step 6 - Place your curser where you want the image to appear, and then select the “ insert/modify image ” button

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. 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. 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. 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