Wps

myaiesec.net web publishing system

training tutorial

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

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

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

nav1nav2

main

nav3

nav4 (not shown but appears in side bar)

Navigation

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

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

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

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)

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

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

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

First Steps

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

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

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

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

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.

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.

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

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

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

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

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

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


•Click “New” in the top menu bar but select “Folder” this time


•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)


•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!


•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


•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!

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

•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

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

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

Publishing Your Pages

•When a webpage is ready to “go live” you simply click on the page icon and select “Publish directly”

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

CutCut

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

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

Uploading Photos

Step 4 - copy the image location from the browsers navigation bar and save it.

you will need it soon

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

Uploading Photos

Step 6 - Place your curser where you want the image to appear, and then select the

“insert/modify image” button

Uploading PhotosStep 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

Uploading PhotosStep 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!

Uploading PhotosStep 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

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 [email protected], or your MC’s Communications responsible

Documents

Wps