Skip to main content

Labbett button set

Image
By
Hi again, So the first thing that I am sharing here is a button set that Mark uses in his courses. These buttons are currently found on the shared drive, but additionally I uploaded them onto a photo sharing site (picasa). I created a document with the image code and will walk you through inserting the buttons/icons into the course and week headers. The google doc with the code is found on the shared drive: Z:\Icons & Logos\buttons\img style.doc. Click on the images below to enlarge them
Here is the main screen. What we would like to do is put an icon by Week 1. Make sure you are in the Author window and in the HTML editor. Find the icon that you would like to include and copy the code associated with it (underneath the icon)
Paste the code into the html where you would like the icon. Normally this will be in the header. Put the img code between the brackets (it could also be depending on the header style).
If done right, The image will appear beside the header.
Here are the components of the code: img This tag specifies to the html that you are inserting an image style="width: 52px; height: 52px;" This allows you to specify the dimensions of the icon. The original images are about 144 x 144. I reduced them for 52 x 52 for eCollege src="http:// "> This specifies where the image comes from. In this case I uploaded the image onto a public photo sharing site. Troubleshooting If you ever have problems copying and pasting the code from the Word document to eCollege, try copying the code into a plain text editor (such as wordpad or notepad), and then copy and paste the code from the text editor into eCollege. Sometimes copying straight from Word can be problematic as Word tends to format the text beyond what is immediate apparent. The lines of code in the document should be plain text, so you normally shouldn't have any problems copying and pasting directly from Word.
Labels:

Comments

  1. MikeJune 9, 2010 at 1:41 PM

    I did notice those in one of his courses... thanks Sean.

    ReplyDelete
  2. MJL ID BLOGJune 9, 2010 at 4:49 PM

    Also, what i usually do is simply put my cursor where i want the image (In Design mode) and use the Insert Image tool. Then browse for the Icon. Then i will right click and choose properties and change the size to 53x53.

    ReplyDelete
  3. MikeJune 14, 2010 at 10:54 AM

    I've got a concern, though -- this icon set doesn't appear to include some needed icons such as a 'calendar' or 'date' (which I would use for a page about an on-ground class meeting), and some kind of 'speech bubble' or something else appropriate for a discussion thread page. How have you been denoting these types of content with those icons...?

    mike

    ReplyDelete

Post a Comment

Popular posts from this blog

Canvas Conference: InstructureCon 2013

By
This last week I had the opportunity to attend Instructure's annual conference which focuses on it's flagship product, Canvas.  Founded in 2008, Instructure launched Canvas in 2011, and in that same year hosted its first annual conference.  The attendance at the first conference was meager, but in 2012 the attendance numbers grew to 600 attendees.  This year marked the third annual conference, with 1,200 attendees and a giant inflatable panda mascot flocking to the resorts of Park City.  Including staff and volunteers, some 1,500 people gathered to present and attend sessions.  After-hour festivities were themed based on the 1980's and included a conference carnival, visits from the Ghostbusters, a DeLorean (yes I had to google the spelling), and concerts from an 80's cover band and MC Hammer himself. The festivities were grand (and the 80's florescence was blinding), but the real value of the conference was obviously in the sessions.  Here are a few ...
Post a Comment
Read more

basic html tables

By
Hey all, I figure that I would expose you guys to the basics of creating tables in html. There are many ways to do this. The wysiwyg way of constructing a table would be to use the built-in eCollege table wizard, or to build a table in in MS Office or Dreamweaver. These methods offer limited customization, as is the nature of visual editors. In order to really customize every aspect of the table, you must have a working knowledge of the html used to create the table. The basic elements of a table are as follows: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 This is what the code for a basic table with a border looks like. And this is what that table would look like: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 The elements include table rows <tr> and table definitions <td> which are the individual cells. { As an aside, if you ever want to include an empty cell in a table, make sure you put the code: &nbsp;. That...
2 comments
Read more

Storytelling from SMEs

By
So I'm sure you've seen the recent emails about the upcoming CAE "Storytelling in Psychology" event given by Dr. Sandy Siegel. Sandy is one of our best SMEs (she’s in the MACC program) and she is a force in the classroom because of her storytelling skills. I think instructors’ personal/professional stories and vignettes have a lot of power to give a course relevance and heart, especially in a blended or online format with limited or no F2F interaction, and so I’ve been thinking about getting Sandy to audiorecord some brief stories for the courses she SMEs, either as an introductory “tone-setter” or as a springboard for a ‘what would you do?’-type assignment. Thing is, SMEs are rarely the sole instructors on their courses, and I’m thinking that whoever the other section instructors are may not want someone else’s voice (or video) built in, as for that term it is “their” course, not the SME’s. (In a past corporate job of mine we created situation-specific ‘Expert Vi...
1 comment
Read more