This page is about how to update the U3A
Bermagui website, especially the timetable.
The website is hosted by U3A Network NSW: that means they rent space on a server (a large computer with some public access), and the network administrator (netadmin) has used some of that space to set up our website. The overall look of the pages (theme) has been set up by netadmin and we don't have to worry about it.
The website is managed using content-management software called WordPress. There is an editing page (the dashboard) which you can log into with a username and password - get that locally or from netadmin.
Most of our pages don't change much and can
be edited via the dashboard's built-in editor, similar to a word
processor. How to
use the built-in editor
the Timetable page with thirty-odd courses needs to be updated 4x
per year. The timetable is created in an Excel workbook - from that we
make a page for the website, with
hover links to show details of each course. The page is then uploaded: How to publish to the website.
Excel has a
feature called macros that allows repetitive jobs to be done
automatically. A little macro called Sub U3Anew() has been written
for this job. You need to install it in your Excel program. How to get and use the
Back to Maintenance page
There's a basic principle of website maintenance: get the material right on your own computer (the local computer), save a local backup copy, and then publish (paste or upload) to the website. Every little change on the website takes a few seconds, so minimise the number of changes; the website is on someone else's computer, so keep backups safe on your own.
You should also realise that web pages look different in different browsers (they render differently). Most people see your pages in Internet Explorer, so always check the finished page in IE.
the basics of how to edit the News and Dates page. Other pages are similar, but don't
need much editing anyway - except the Timetable page which is automated.
First click on this link: http://bermagui.u3anet.org.au/news-and-dates to see what's on the page now - some items will be out of date. If you've been given material to add, you should edit it locally for easy viewing. You can do that in Word, etc, but there is freeware called KompoZer for writing web pages which is easy to use and more suited to web pages. (KompoZer is very similar to the website's built-in editor, but is on your computer.)
Try to arrange
the material so viewers can see what's there without scrolling.
Instead of lists, spread items across the page.
If you have several long items, put short notes at the top with links to more material below. In KompoZer, select the heading for the section and click the Anchor button at the top. Then at the end of the short note, type "more >>", select it, click the Link button at the top, choose the heading from the list, and click OK.
(For adding pictures, see below.) Save the finished page and open it in IE to see how it looks.
Click on this link: http://bermagui.u3anet.org.au/wp-admin to get the login page in your browser (Internet Explorer or whatever). Bookmark it (In IE, Favorites >Add to Favourites or drag the icon in the Address line at the top to the Links bar). Enter the username and password you've been given and log in. (The browser should remember for next time.)
On the left, under the Pages heading click Pages; under the News and Dates page click Edit. A page window comes up with symbols. Click the symbol (Maximize, 4 rows down, 2nd from right) to get a larger editing window.
Select text you want to delete and press your Delete button.
Copy your finished text from KompoZer, right-click in page window > Paste. (A box may come up with instructions "...You are required to paste it again in this window...") . Click the same symbol (Minimize) to reduce the window. Click the Update button on the right (very important). [If the page were a new one, the button would say Publish.] NOTE: pasting can undo previous formatting entries, and you might have to redo them in the built-in editor.
If you want to add pictures, you must first upload them to the server - see the section How to publish to the website. Then in the page window, click the Insert/Edit Image button - the Shared Images window will come up: choose your image and click insert. BUT, a better way to add a page of pictures is to make the page locally, upload it (and its images) to the folder /wp-content/uploads on the server, and put a link to it on the News and Dates page: type in a caption like Pictures of our event, select it, click the Insert/Edit Hyperlink, click Shared Documents on the left of the window that comes up > choose the page of pictures, and click Apply. (You can put a small picture next to the caption to catch people's eye.)
Advanced: You can paste a table from Excel into KompoZer. Then go Tools > Markup cleaner. After that, you can format the table to look nice (look under the Table menu). Then copy and paste the table into the built-in editor. It can need a bit of cleaning up. Very advanced: to avoid losing your nice formatting, click the KompoZer Source tab and select all the html code from <table to </table>. Then, in the site's built-in editor, click the Source tab and paste the code in the right place. Update immediately - if you make any other changes the editor might undo your formatting!
Back to Maintenance page
The timetable, involving 20-odd courses, has to be changed every term. The Excel macro U3Anew() has been written to automatically write a timetable page with hover text for each course. [Technically, the website Timetable page doesn't actually change, but redirects to an uploaded page.]
The macro is
tailored for a timetable supplied on tab Sheet1 of an Excel workbook. It will search for headings to construct the web page:
"Day", "Course Title", "Name', 'Surname", "Dates", "Time", "Location2", "Phone", "Mobile" & "Course Description".
Location2 is usually the town where the course is held. The others you should understand from a previous timetable.
How to get and install the macro:
This bit is
fiddly. If you're very inexperienced, get help - it only has to be
done once. The instructions are for Excel 2010, but should work
for all later versions.
Create a new
folder (called Pages or what you like) where the workbook will be
saved (as Timetable.xls). Click this link: Sub_U3A.zip
and save to the new folder. Right-click the .zip file > Extract
all. In the wizard, Click Next. In Select a Destination, trim off
the end (\Sub_U3A.zip) to extract to the Pages folder - the
extracted files will be Sub U3Anew().bas (the macro) and Test_macro.xls (to
test the macro if you haven't got a timetable yet).
Now you're going
to get a look behind the scenes at Excel. On the Developer Tab,
click Visual Basic at the left:
[If the Developer tab isn't visible, right-click the ribbon and choose "Customize the Ribbon". On the right, under Main Tabs, click the box next to Developer to put a tick.]
In the picture below, you can see the top left window with VBAProject (PERSONAL.XLS). This is a special Excel workbook where macros are stored for use in every workbook. If your editor already has a PERSONAL.XLS like that, you can skip the next step of creating one.
If there's no
PERSONAL.XLS, go back to the Developer Tab and click the Record
Under "Macro name" put Create_personal or whatever you
like; under "Store macro in", choose "Personal Macro Workbook". A
little blue square will replace the Record Macro button; click it
to stop the recorder:
Go back to the Visual Basic Editor - now you should see PERSONAL.XLS.
Under PERSONAL.XLS, right-click Modules > Import File, browse to the Pages folder and select U3A().bas > Open. A new Module should appear - double-click it. At the top of the right window you should see "Sub U3Anew()" (as in the pic of the Visual Basic Editor above). File > Save PERSONAL.XLS to save your imported file.
Go back to Excel
> right-click the ribbon and choose "Customize the Ribbon". In
the middle, under "Choose commands from", select "Macros" from the
drop-down list. On the right, click "New Tab" near the
bottom. Select "New Tab (Custom)", click "Rename" and name
Select "New Group (Custom)", click "Rename" and delete the name at the foot of the dialog > OK. In the middle Macros column, select PERSONAL.XLSB!U3A and click "Add >>" between the columns to add it to the new Custom Group. With PERSONAL.XLSB!U3A selcted, click the Rename button and rename it U3A or whatever you like. Choose a button from the box (I use the flags symbol) > OK. Your Macros Tab will look like this:
If you already
have a workbook with the timetable, you can test the macro on
that: otherwise open Test_macro.xls. Click the U3A button. After a
while Test_macro should show two extra tabs called Newsletter and
Details, and the Pages folder should open with a web page called
Timetable-detail.html. You can be fairly confident the macro has
run OK - double-click Timetable-detail.html to see it and be sure.
published the timetable to the server, there may be late changes -
courses may be added or dropped. By far the fastest way is to edit
Back to Maintenance page
Having created the Timetable_details page, we have to publish (upload) it to the website.
We have specially been granted File Transfer (FTP) access to do
this - you need to get the separate username and password for
CAUTION: working on the server is very final. There's no recycle bin - if you delete something, it's gone. Keep local backups (ie, on your computer). If you publish a file with the same name and extension as one already there, the old one will be over-written (replaced). Otherwise, if you're careful, it's just like Windows Explorer, but you have to wait while files upload.
It's easiest to upload the Timetable_details.html page using the excellent free program FileZilla. You should download and run the latest FileZilla_n.n.n_win32-setup.exe.
The picture shows the FileZilla windows when connected to the website:
At bottom left are the files in the local Pages folder. You can see that from the window above it, which also shows the full path. (Double-clicking the yellow folder with two dots goes up a level.) At bottom right are the files in the remote uploads folder (ie, on the server) - notice they're the sort of files you expect. You can see what folder from the window above it, which also shows the remote path /wp-content/uploads. The very top window shows the "conversation" between FileZilla and the remote computer.
Your first job is to set up FileZilla to find the local folder and the website: then you bookmark the site for future use. You can set up a different bookmark for a different job (eg publishing a page for redirection from the News & Dates page).
File > Site Manager > New Site.
Host = 184.108.40.206
Servertype = FTP - File Transfer Protocol
Logontype = Normal
User = email@example.com
Password = Webadmin password minus the final "0"
Servertype = Default
Bypass proxy = unchecked
Default local directory = [Browse] to the usual folder with files you upload, eg C:\...\Pages
Default remote directory = /wp-content/uploads
There should be conversation at the top, with finally "Connected" or "Directory Listing Successful" If everything looks good, Bookmarks > Add bookmark > Site-specific bookmark > Name = Uploads.
bottom-left window you should see the page Timetable-detail.html you've
created. Drag it to the bottom-right window,
OR just double-click it. Conversation begins at the top, and
after a while (depending on your upload speed), the file will
appear in the bottom-right pane, indicating it's published. The
conversation will finally say "Directory Listing
Successful". If there's already a file on the server with
the same name, you'll be asked whether you want to replace it.
If you want to look at a file on the server, double-click it, but it won't open - it will be saved to the local folder. Then right-click the local version > Open. (If you double-click it, it will be published to the server.)
Open the U3A
Bermagui website in IE, click on the Timetable link on the right
to see if your new timetable page appears, and mouse over some of
the links to test.
Back to Maintenance pageImages sent you for display on the website often come too big - 100KB is plenty big enough for our images, and 140KB should be the maximum unless for some special reason.
I suggest you save supplied images in a separate folder. If you move the pointer over the image you'll get a tooltip with the size (in bytes or KB: 1 KB = 1000 bytes). If much more than 100KB, you need to resize the image. There is excellent freeware called Irfanview to do this easily (download Irfanview on the right of its home page).
Once you've installed it, double-clicking any image should open it in Irfanview (otherwise open Irfanview and browse to your supplied images folder). Image > Information > Disk size shows the size of the file. If it's too big, Image > Resize/Resample > on the right, click Half > OK. File > Save As > In the File name line add HALF at the end; in the Save as type line choose JPG - JPG/JPEG Format. In the JPEG/GIF save options box on the right, slide the Save quality to 100 (good). > Save. Point to the new file to see if it's small enough. Repeat if necessary. (Advanced users will find other methods.)
Once the graphic is small enough, copy/paste it to the course_details folder and rename it course-name-course-leader.jpg, choosing the actual name from the Filenames tab of Timetable.xls. Open the corresponding course-name-course-leader.html page and you should see the image there.
If you have a
number of images to resize, you can batch process them in
Irfanview. Here are instructions adapted from http://mecrunchy.blogspot.com.au/2008/04/guide-to-resizing-multiple-images-with.html