Recently in Movable Type Category

Introduction

Windows Live Essentials from Microsoft features several software packages which are available to download for free and which can be used for everyday tasks on the computer. Some of the software available can be seen at this website: http://explore.live.com/windows-live-essentials?os=win7 and they include Photo Gallery, Movie Maker, Mail, Messenger, Writer and Family Safety. 


In this blog post we are going to focus on one of these software packages called Windows Live Writer. Here are a few words about Windows Live Writer extracted from the Windows Live Essentials webpage, http://explore.live.com/windows-live-writer :

"Writer makes it easy to share your photos and videos on almost any blog service--Windows LiveWordPressBloggerLiveJournalTypePad, and many more. Writer is part of Windows Live Essentials, which includes free programs for photos, movies, instant messaging, e‑mail, blogging, family safety, and more. Get Writer or get them all--they're free!"

Writer is indeed easy to use and it allows you to publish to your favorite blog server in a few easy steps or, if you don't already have a blog, you can let Writer create one for you so that you can start posting.  


Download

To download Writer follow this link: http://g.live.com/1rewlive3/en/wlsetup-web.exe


Learn the basics

Let's work through the process of setting up Writer so that you can publish blog posts to your blog. In order to do this you need to have a blogging service such as Blogger, WordPress, MovableType etc. If you do not, you will have to create one.


Follow these steps to set-up Writer: 

1. Open Writer. 

2. The first time you open writer, you get a window message asking you what blog you use. If you don't have a blog you can let Windows Live create one for you by selecting "I don't have a blog; create one on Windows Live for me" and following the instructions which are really easy. If you already have a blog, select the right choice from the list. Figure 1 shows this window message: 


Writer_startup.jpg

Figure 1: Writer, What blog service do you use?


For the purpose of this blog post, we used Blogger as our blogging server to illustrate how to set-up Writer

3. Click Next

4. You will be prompted with another window asking you for the address of your blog (the address people go to to see your website) and your username and password to access that server. In Figure 2 below, we used a test blog hosted by Blogger and we used the username and the password that we would use to log-in into Blogger.


Writer_set-up1.jpg

Figure 2: Writer, Add a blog account

5. Click Next. If everything went well, you should see a window loading your blog. After it finishes loading your blog you will see a final window letting you know that "Your blog has been set up".
6. Type a name for your blog. This is the name that will be used in Writer to distinguish from any other blogs that you will create in Writer. Our blog is simply called Test Blog. 
 
Writer_blogName.jpg
Figure 3: Writer, Your blog has been set up window

7. Click Finish. 

At this point you should be able to write a blog post as you would write a paper in Microsoft Word. To publish your blog go to File -> Publish to Blog.

Another thing that you need to be aware of is the Accounts menu located in the Tools drop-down menu. Here you can manage your accounts by adding a new blog, editing an existing one or deleting one (deleting is referred to removing from Writer). 

A final note about Writer is knowing how to select in which blog to publish when you have multiple accounts created in Writer. To select the blog in which you want to publish go to the Blogs menu and you should see all your blogs listed below the Edit blog settings option. Figure 4 shows our two blogs, Test Blog and Test Blog 2 in this list with Test Blog being selected as the blog where our next blog post will be published. You can tell which blog is selected by the check mark next to your blog's name:

Writer_BlogsMenu.jpg
Figure 4: Writer, the Blogs menu

To get more information on how to use Windows Live Writer, consider accessing the Help menu within Writer. If you have any questions or comments, feel free to contact the STA Office at sta-help@trincoll.edu or at x2589.

Image Links

| No TrackBacks
Normally when you think of links, you think of text that has been coded to take you to a different website. This text is not only boring, but also fails to provide a visualization or explanation of what the linked website contains.

An alternative to text links are image links. Image links are images that have been turned into a link. This can be especially useful in providing an image that is linked to a website explaining its significance, or when providing an image of, for example, a formula whose link takes you to an interactive web page that allows you to solve for the formula. In short the possibilities are numerous and can adapt to any context, whether it is for instructional or personal use. Examples of text vs. image links is provided below:

Text Link:

Student Technology Program

Image Link:

Picture 2.png









This entry will explain how to make any image that you choose into a link. The process is relatively simple, with two methods to creating an image link.

The first method involves creating your own image to be turned into a link. To do so you would follow the simple format:

1. First you make or choose your image

2. Then you upload your image to a server

3. And finally, you input the html code to make an image link

The second method involves using an image that is already available online. To do so you would follow the simple format:

1. Copy the image URL

2. Paste the image URL into the code for an image link.

The following is a description of the First Method:

There are two ways that you can choose your image. The first is to search for your image in a search engine (such as Google, Yahoo, or MSN) and then saving it to your computer as an image file (JPEG, etc.). *

The second option that you have is to create your own image. This can be done by uploading your own picture from a camera, or taking a screenshot of the image that you would like to turn into a link. Please refer to my colleague's, Dobromir Trifonov's, post regarding screenshots:

Take Screenshots....

Now that you have your image selected, you will have to upload it to a server. You can use any server, although for this entry I will assume that you are working with Moodle and will therefore discuss uploading an image file to its server.

First, you must access your course in Moodle and click on the Files link under the Administration box.

files.jpg

Once there you can either make a folder (making a folder will be necessary if you want to have an organized collection of files on Moodle) or simply upload a file.

upload file copy.jpg

Once you have uploaded your file, you will be able to see a link to see your image. Right click on this link and select the option Copy Link Address. This is your image source.

The HTML code for creating an image link is as follows:

<a href="Website Link" border="0"><img alt="" src="Image Source" title="Title to Appear when Mouse Hovers over image" width="width pixels" height="height pixels" /></a>

Once again, you will only be manipulating the following segments of code Website Link, Image Source, Title to Appear when Mouse Hovers over Image, and width/height pixels. The Website Link will be the URL of the website that you are linking to. Your final code should look similar to this:

<a href="http://blogs.trincoll.edu/sta/" border="0">

<img alt="" src="http://b27.cc.trincoll.edu/weblogs/sta/Image Links/Picture%202.png" width="400" height="87" />

</a>

Notice how the italicized portion of the text is simply your image's image source.

Now all you need to do is copy and paste this code wherever you want your image link to appear.

The second method, using an image already online, is very simple. First you locate your image, then you right click it, select Copy Link Address and then paste the link address (your image source) into the corresponding location of the HTML code for image links.

If you have any questions or concerns regarding this, or any, STA Blog Post, please feel free to call the STA Office at extension x2589 or come and speak with one of our Student Technology Assistants during our normal business hours. Thank you.

Extended Body Entries

| No TrackBacks
The extended body function on movable type is a great way to organize your main page. It allows for the viewer to easily scroll down your main page and view any number of posts, without having to actually read through all of your blog entries.

This blog post will quickly go over the steps necessary to extend your entry.

When you are writing your blog entry you will notice that there are two tabs located underneath the title for your entry. Normally you will type into the Body tab. However, to create the extended blog post, will be typing in the Extended tab. Below is an image of the tabs.


Extended Pic Border.gif


Type your introductory phrases into the Body tab. You can now go on to type the bulk of your blog entry into the Extended tab. Do this by clicking on the tab and typing in the text field.

When you preview your entry you will see the entirety of your post. Do not be alarmed, this is simply so that you can review your entry. When you finally save and publish your post, your blog entry will look like this:


Extended pic 3 border.gif


If you have any questions about this, or any blog post please feel free to contact the STA office. This is the text that will be visible on the main page of your blog. By adding a short introduction to your blog post, and keeping the rest visible only when you click to extend it, you are in fact shortening your main page. This allows multiple entries to be seen at once.

In-Page Links: Html Anchor

| No TrackBacks
In-page links are links that direct you to almost any resource on the web. These links are created by the use of html anchors. These anchors are html code that tell you where and how to get to a specified target. That being said, there are two types of links that this blog entry will focus on: external and internal links.

External Links

External links can be situated anywhere on your website and will take you to any specified domain. For example you could be on your website or blog such as this, and click here, to be taken to an external website (in this case, the About STA section of the Blog).

There are various ways to manipulate this html code. However, you must first ensure that you are editing your website or blog in html mode. In the case of Movable Type, the html mode button looks like this: html mode button.png

Once you are in html mode, you can create an external link by following the format of this html code:

<a href="Website Link" target="_blank">Text that will Appear</a>


You will only be manipulating the parts that are italicized.

The website link is simply the url address of the website that you are providing a link for. To obtain this you can simply copy and paste the website's url from the url box in your browser.

The part that says "text that will Appear" is simply the name that will appear for the link. As you can see from the first link provided above, the text can simply read "here" or it can also be the name of the website that you are providing the link for.

It is important to note that this html code will open the link in a new window. If you would like the link to open in the same window simply take out the segment of code that reads: target="_blank"

Internal Links

Internal links are an easy way to organize your website. Unlike external links, they direct you to parts of the same page that you are viewing. This is a great tool to create a table of contents or a makeshift web menu for your website. Creating an internal link is a two-step process.

1. You must first establish the html anchor. In other words, you must designate the location that you want to be accesed by clicking a link (the establishment of this link will be discussed following this section). The template for this html code is as follows:

<a name="Name of Anchor">Text that will appear</a>

Once again, you will only be manipulating the italicized portions of the code.

The name of the anchor is only visible to you. Therefore, you can assign a letter (a, b, c,...) to the anchor to simplify the code if you will be creating multiple internal links.

The text that will appear will be shown. You can be as creative as you would like, however, you may want to have this text correlate to the text being shown in the original link for the anchor.

2. The creation of the original link is a simple process. The general template for the html code is shown below:

<a href="#Name of Anchor">Text that will appear</a>

Again, the only parts that will be manipulated are the italicized portions of the code. The name of the anchor must correlate to the name (or letter) you provided in the anchor. Otherwise, the links will not work. You can decide what text will appear.

Place this code where you want the link to be found. Normally, this is found at the top of the webpage.

_______________________________________


If you have any questions or concerns regarding this, or any, STA Blog Post, please feel free to call the STA Office at extension x2589 or come and speak with one of our Student Technology Assistants during our normal business hours. Thank you.

Movable Type: Adding a Banner to Movable Type

| No TrackBacks
If you have considered adding a horizontal navigation bar upon reading Nick's Entry, you might also consider adding a personalized banner.

In this entry, the banner we will add will be an image that links back to the home page. We will be experimenting on the STA Sandbox blog.

Here is what the blog should looks like before editing:

Picture 2-2.png

The first thing you would need to do is have your banner ready and hosted, here is the one we will be using.

Now in Movable Type's Dashboard, go to Design > Templates, and then choose Main Index.

Scroll down until you find the following line of code:

Picture 1.pngThis code is responsible for adding the default Movable Type banner of your chosen theme.
If you later change your theme, you will retain the same banner that you will be using in this entry.

Now replace it with the following code:


<div id="banner">
    <div id="banner-inner" class="pkg">
<h1 style="display: none;"><$MTBlogName encode_html="1"$></h1>
<h2 style="display: none;"><$MTBlogDescription$></h2>
<a href="<$MTBlogURL$>" accesskey="1"><img src="http://b27.cc.trincoll.edu/weblog/sta/sta_blog_banner.png"></a>
    </div>
 </div>

but replace the bolded line (the image's URL) with that of your own banner.

Hit "Save and Publish", and here is what your blog should now look like:

Picture 3.png

You will also have to repeat this process not only to the Main Index template, but also to Archive Index, Category Entry Listing,  Entry, Monthly Entry Listing, and Page. so that the changes appear on every page and not only on the home page.

An alternative way to by pass this issue would editing the CSS stylesheet, which we will discuss in a future post.

For the time being, and for more information, please refer to the Learning Movable Type website, from which the code used in this post was copied.

This blog entry will explain how you could go about creating a simple horizontal navigation menu using Movable Type, some HTML and CSS code. In order to create such a menu the user doesn't really need to have any knowledge of HTML and CSS, but some knowledge is required if, for example, the user wants to change the color scheme of the menu.

Here is how the final menu should look like:
02.jpgHere is a simple outline of all the things that we are going to do in order to add a horizontal menu bar:

1.    Copy some HTML code into the Main Index, Archive Index, Category Entry Listing, Entry, Monthly Entry Listing and Page. All these pages refer to all the different parts of the blog that are going to be affected by the HTML; therefore, inserting the HTML code for the menu in all pages except the Monthly Entry Listing will make all pages have a menu except Monthly Entry Listing
2.    Copy some CSS code in the Stylesheet
3.    Preview the blog


Follow these steps to add the menu:

1. Log in into Movable Type
2. Go to the Design drop-down menu and select Templates. This is where you can make any design changes to the blog by accessing specific regions of the blog, e.g. the blog footer, the header, the main index page and so on.
3. Copy this HTML code:

<div id="nav">
<span class="navright"><a href="http://b27.cc.trincoll.edu/weblogs/sta/about.html">About STA</a></span>

<a href="http://blogs.trincoll.edu/sta/">Home</a> |
<a href="http://b27.cc.trincoll.edu/weblogs/sta/documentation.html">Documentation</a> |
<a href="http://b27.cc.trincoll.edu/weblogs/sta/categories.html">Categories</a> |
</div>

Note: This HTML code creates a menu with 4 links: About STA, Home, Documentation and Categories. Modify the names to the ones you need. Furthermore, for each link you have to provide the correct url link to the page it is linking to. For example, About STA is linked to the url http://b27.cc.trincoll.edu/weblogs/sta/about.html, therefore you might want to change that link to the one corresponding to the name of your page.

4. Paste the code from step 3 after the <div id="alpha-inner"> tag in each of the following pages: Main Index, Archive Index, Category Entry Listing, Entry, Monthly Entry Listing and Page, and after pasting the code click the Save button. The example bellow illustrates how you would edit Main Index, but the process is similar with all the other pages:

02.jpg
5. Copy the following CSS code:

#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px;
margin:0px;
background-color:#6699CC;
color:#fff;
border-bottom: 3px solid #AEC9E4;
margin-top: 5px;
margin-bottom: 30px;
}

#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}

.navright {
float: right;
padding-right:10px;
}

6. Go to the Design drop-down menu and click on Templates
7. Select Stylesheet from the Index Templates group
8. Paste the CSS code from step 5 after all the existing code. Follow this picture for an example:

03.jpg9. Click Save & Publish.
10. That's it! Preview your page and see the result. Your page should have a horizontal navigation menu right under the header image of the blog.

If you have any questions or you encounter any problems while working through the example, call the STA office for support at extension 2589 or e-mail us at sta-help@trincoll.edu.



Archives

Map LITC Level 1.jpg

Locations of visitors to this page

Twitter_Final_Button.jpg