INDEX:
Section 1: Logging in as an administrator to your website
Section 2: Initial changes to set up the entire site
Section 3: Replacing headers in the LaFolio theme
Section 4: Creating a page and configuring it to be viewable
Section 5: Managing pages in WordPress from given .zip and .txt files
Section 6: Adding media to your pages
Section 7: Widgets
------
1. Logging in as an administrator to your website
As a student/faculty, you have a website on the sites.lafayette.edu server with your username; you can modify this site to create your Foreign Language ePortfolio.
· First, navigate to sites.lafayette.edu and login with your network ID and password.
· You are directed to a page that is your "Dashboard". On the left hand panel, are the tools you can use to create and configure your webpages
· If you click "Pages", you can create new pages, which may be made visible to the public, and may contain media files.
· If you click "Media", you can upload media files to a storage location from which you can link them in your web pages.
· In order to use the ePortfolio Templates, you must BE ABLE TO ADD MEDIA AND PAGES to your website: details of which are in following subsections.
------
------
2. Initial changes to set up the entire site
Set up your LaFolio site using the templates on the ePortfolio “Tools” site developed by your language professors.
Plug-ins:
The “Plug-ins” tab appears on the left hand-toolbar when you log into your website and navigate to Dashboard.
· Scroll through the available plug-ins and click “Activate” for the following three important plug-ins:
o “Anarchy Media Player”
o “NextGEN Gallery”
o “TinyMCE Advanced”
· These plug-ins make your website easier to manage and configure.
Settings:
· Click on the “Settings” tab on the left hand toolbar
· Click “General” to open up the following page
· Make changes to your general settings page as necessary: enter a title for your site, enter “Lafayette College e-portfolio scholar” as the tagline and enter your email address.
· Click “save changes” at the bottom of the page.
· Now click on “Reading” under “Settings”
· Click on “A static page”, and specify which page will be static in your website: it will be the page that the site will open to when someone navigates to your site url.
· Select “My Journal” for the “posts” page if you want to include a blog.
· Click “save changes” so these changes are recorded.
· Click “Privacy” under “Settings”
· It is recommended that you select the second from the top option, which allows everyone to view the page. No one will be allowed to edit anything on the site, except for fields in blog pages or pages where comments are enabled.
· Lastly, we must add a feature to improve the performance of the text-editing feature available when you edit pages for your website.
· Click “TinyMCE Advanced” under “Settings”
· Drag and drop toolbars from the bottom ‘pool’ to the top three grey bars (toolbar space), too create this following setup:
That’s it! The site’s settings are done. Now let us change the way your site looks.
Appearance:
The appearance tab appears on the left hand-toolbar when you log into your website and navigate to Dashboard.
· Click on “Themes”. Activate the Mandigo Theme.
· Click “Theme options”.
· Scroll down to “Layout Options”, and select the first option “Use the 1024px theme look instead of the default 800px one”
· Scroll down to “Header” and select:
o “Use slim (100px smaller) headers”
o “Use random images from the user uploaded files or the images/headers subfolder”.
· Scroll down to “Navigation” and “Submenu animation speed:” select “instant” for both “appear” and “disappear”.
· Scroll down to “Pages to Exclude from Header Navigation”: here select the pages that you will not want to display on the header as direct links. Note: Currently you have no pages, so do nothing, but keep note of this section when you add more pages. Having too many pages in the header can be distracting. Pages often have sub-pages and are made accessible from a parent page and not on a global header.
· Scroll down and click “Update Options >”, which is a button on the left.
------
------
3. Replacing headers in the LaFolio theme
LaFolio uses a wordpress pre-built theme called Mandigo. In this theme, the user has the option to change the header image visible at the top of the site (the default is a maroon header with LaFolio written on the right).
* To change the header, crop the desired header image to 737 x 226 size.
* Rename the cropped file specifically to "mandigo_header.jpg".
* Sign-in to the sites.lafayette.edu login prompt and navigate to the website's dashboard.
* Click the "Media" tag on the left side of the menu and click "Add New".
* Upload the cropped and renamed file to the media library.
* Click "Media" again to view the entire media library. The new header should be in the list, as well as the old header. Click the old header file, and the "delete permanently".
Note: It is necessary to delete the old header before the new one is effective on your site because Mandigo uses the header file's name to locate its header, and the old header file also has the same name.
------
------
4. Creating a page and configuring it to be viewable
· Click the "Pages" tab on the left hand panel.
· Select "Add New" under "Pages"
· Give your new page a title, such as "Profile" or "Course Archives", in the top field of your new page edit window.
· In this window you see a text-editor menu that functions like your word-processing software. You can add text, change fonts/colors/sizes, add media files (images, videos, etc.) and also create links to other pages or media files.
· Once you are done editing a page, click "Publish" on the right hand panel of your page. After the first time, you will no longer see a "Publish" button; instead there will be a "Update" button.
· By default, your webpage allows comments from visitors. To deactivate this, in your page edit window, scroll down to the "Discussion" section, and uncheck "Allow comments" and "Allow tracebacks and pingbacks on this page". Click "Update".
------
------
5. Managing pages in WordPress from given .zip and .txt files
The page templates for a number of pages are available on the Language resource center website: sites.lafayette.edu/fllrc go to “Resources > tech tips > ePorfolio tools
· Open your website (see "Logging in as an administrator to your website")
· Open a new window, navigate to the foreign language resource center website “ePortfolio” tools.
· All the template pages use some media (image, document, video) files, and you must import them to your website's media directory:
o Click to download the "media.zip" file
o Extract the zip file to view all the media files inside
o Go to your website window and click "Media" on the left-hand panel
o Click "Add new"
o Browse to your newly-created folder ("media") and UPLOAD all the files one at a time
o You will have to "Add new" every time for each new file.
· Now you are ready to create the pages with the given templates.
· Click on the link to the template for the particular page you want: this will download a pageName.txt file.
· Open the .txt file. Select all and copy the entire page (ctrl+a, ctrl + c).
· Create a new page (see "Creating a page and configuring it to be viewable"), and give it the title you want.
· In the text editor for the page, you will see two tabs "Visual" and "HTML". Click HTML to switch tabs.
· In this HTML editor text area, delete anything that might already be there. Paste the previously copied text file (ctrl+ v) into the HTML editor.
· Click the "Publish (Update) " button on the .
· To make changes to the template, you do not need to change the HTML code, just toggle to the "Visual" tab and make your changes.
· Click "Update" to finalize changes to your site.
------
------
6. Adding media to your pages
The NextGEN gallery plug-in makes adding any type of media to your pages very easy.
· Open the page where you want to put your media, and click on the “Add media” button to the right of “Upload/Download”
· In the dialog box that opens, select from your NextGEN gallery and add the images/videos you want.
· Note: When adding multiple images/videos, the “Visual” tab may have formatting issues.
· Click “Preview Changes” on the right to open up the current site and see if the media is displayed correctly. If image titles do not align with the image, correct this with the following ‘hack’:
o Click the “HTML” tab of your page
o Scroll down to where your images/image titles are
o Add this snippet of code to create spaces between lines wherever necessary (adding an ordinary space or break will be ignored by Wordpress.
br / <br />
o Click “Preview Changes” to check the look of your page
o Repeat the procedure as often as necessary to make the adjustments.
When uploading video files, be sure to convert them to .flv (flash video) format:
· On a Windows machine:
o Click the “Start” button (bottom left of the taskbar) and enter “Adobe Flash CS3 Video Encoder” in the search field
o Open the application and click “Add” to select your video file
o You should see your media file in the work pane
o Click on your file and then click “Settings” on the right
o In the popup window, click on the drop-down menu and select “Flash 8 - Medium Quality (400kbps)”
o If your video file is high resolution and you would like to preserve this quality (sacrificing loading time for the viewer) then you select “Flash 8 – High Quality (700kbps)” from the menu
o Click “OK” from this menu and, in the work pane, click “Start Queue”.
· On an Apple iMac:
o Click the spotlight search button on the top right corner of your screen (magnifying glass icon)
o In the search field, type in “Adobe Media Encoder CS4”
o Open this application and click “Add” to browse and select your video file
o You should see your media file in the work pane
o Click the drop-down button in the “Preset” column
o Choose “FLV – Web Medium (Flash 8 and higher)”
o If your video file is high-resolution and if you would like to preserve this quality (sacrificing loading time for the viewer), then you can select “FLV – Web Large” or “FLV – Web Medium, Widescreen Source”
Once a preset is selected, click “Start Queue” and wait for your media file to be formatted.
------
7. Widgets:
Widgets are add-on features to your site. Normally WordPress delivers a pure blogging environment; even though you are building a mostly non-blogging site, you can also create typical Blog pages. For pages that will retain blogging options, these features can be selected from “Widgets”.
· Click the “Widgets” link under the “Appearance” tab
· There will be a variety of widgets already in place. Add the two important widgets called “NextGEN Slideshow” and “NextGEN Widget” by clicking “Add” on them.
· NextGEN Slideshow will create an option to view your images/videos in a slideshow.
· NextGEN Widget allows visitors to scroll through your gallery and view images in a managed environment.
· When the widget edit window opens, select where on your blog page you want to keep this widget, and then click “Save Widget” and you’re done!
------