Making Your Own Web Page

E5 2011

This document describes how to create a simple web page of your own.  It is organized as follows:

Create Your Web Page

Going further


Create Your Web Site

In a new initiative, Swarthmore's Information Technology staff has begun supporting the website construction tool known as WordPress. Originally a program for bloggers, WordPress has evolved into a general-purpose "content management system," allowing easy creation and updating of websites. The website you create using WordPress will live on the Swarthmore College servers, but at any time you may wish to transfer it to the "cloud" WordPress site, where it will live on even after you graduate.

Some E5 students will already know WordPress and perhaps have sites already up and running. If so, you do not have to complete this tutorial, but you do have to create a page on your current site that will host your work in E5. For those without previous WordPress experience, there are twoWordPress concepts that need some explanation: Posts and Pages. Posts are website items that are timestamped and arranged chronologically, with newer posts pushing older ones down the screen and eventually off to another link (you can specify how many posts your website shows at once). These are good for rapid and time-sensitive items, like where your robot group is going to meet on Tuesday afternoon. It is possible to have posts generate an RSS feed, like a text message, that goes out to anyone who subscribes to that feed (like a tweet). Pages, on the other hand, are static and do not change automatically. They have the advantage, however, of being arranged heirarchically, that is, nested like file folders. Thus you may wish to use pages for tasks such as responses to readings or photos related to your groups' brainstorming task. It is up to you to decide whether to add a post or page to your website, and how to categorize each new entry. In the meantime, however, this tutorial will get you started. For more information visit the WordPress for Beginners site.

Start a web site. 

Open a second web browser window to http://blogs.swarthmore.edu/E5/wp-login.php?localauth=1 and click on the bottom line that says "Log in using Swarthmore ID" (note figure above). You will see the traditional Swarthmore login windows and you can proceed using your Swarthmore username and email password. This will take you to the WordPress "dashboard" or top level directory (yours will have your username in the upper left and a few differences from mine).

At the lower left of the Dashboard, you'll see a dropdown menu for your profile. It would be a good idea for you to click this and fill out the information now.

Now let's create a Post. On the left hand side of the Dashboard is a dropdown menu for Posts.

Select "Add New" and you will be presented with an Add New Post edit screen. On this page you will find field to write your post's Title and Content. For now, you can call it "My first Post" and type some text in the Content box. You can get access to additional formatting tools by clicking on the righmost icon, called the "kitchen sink":

The full formatting toolbar then looks like this:

Now make some of the text you wrote in the content area "hot" (i.e., would take a user to another website if clicked) by dragging across that text, highlighting it as shown below.

Click on the "Add/Edit Link" icon, which looks like this:

You will be presented with a Link dialog box, and you can decide whether the visitor should see a new window or clobber the current one when the link is clicked.

If, instead of creating a hot link to a website that is not part of yours, you wish to link to one of your own Posts or Pages, you can choose the "Or link to existing content" arrow and specify the destination. You can save this Post as a Draft, and even look at it in Preview mode to see how it looks (or wait until after item 5 below). For now, however, we'll proceed to add a file to this post.

Place files in your Post. 

Now lets add a file to your web site, and see it in action.
  1. Place your cursor in the Post (or Page) where you wish to insert the link to a document (IMPORTANT: It is good web authoring practice to place PDFs and not DOC or DOCX files on websites, unless you are sure you want your website's visitors to be able to edit the document text). Note that the document title you choose will be the words that are placed into your text.
  2. Click on the little "sun" icon next to the words Upload/Insert:
  3. Click on "Select Files" under the "From Computer" tab:
  4. The dialog box that pops up will insert the text in the title into your Post, connecting it to the document that you upload. Please add information in the Description box, so that visually impaired visitors will know what the link connects to (true for images as well). Click on the "Insert into Post" button at bottom.
  5. You will return to your Post with the link now hot:

    This would be a good time to save your page as a Draft, which means it is not visible to other people (see button under "Publish" to the right above). There is an autosave function that you may see activating from time to time, but it pays to save explicitly once in a while.
  6. In the Publish area is the "Preview" button, which shows you what your page will look like when it is published.

    If it looks good to you and the links work, then continue; if not, review the directions and try to fix your Post.  If you have trouble, please see me or one of the student helpers.

Create a Page

Pages are like Posts, except that they are not automatically pushed down chronologically and they exist in a structured heirarchy. In your Dashboard, on the left, you will find the Page dropdown menu:

Click on "Add New" and you will be presented with an "Add New Page: edit screen.

As with Posts, you can expand the "kitchen sink" icon at the rightmost top of the formatting toolbar to show additional formatting tools, including "paste text only" (which removes formatting from text copied from websites or MSWord) and "paste formatted text from Word" (which retains, as best WordPress can manage, the MSWord formatting). As with Posts, the Upload/Insert iconcan be used to insert both images (jpegs or PDFs, please) and documents (PDFs, not Word docs please) into your Page.

Once you have saved your Page as a Draft, or even Published it, you can specify where it falls in a heirarchy. To do this, locate the Page Attributes menu at the lower right of the Edit Page screen.

If "no parent" is chosen, the Page will be shown at the top level. If another Page is chosen as a Parent, then this Page will be just below it in the heirarchy. How will the Page look? You can click the "Preview" button under the Publish section of the Edit Page screen. Under the Page Attributes, you can adjust the format by choosing different Templates. You can create your own Templates or import them. Likewise, on the bottom left of the Dashboard, you will find the Appearance Menu.

You can experiment with these, if you want, but for now, let's add some links to your Page.

Add a link to the department website. 

  1. Click on the "Add/Edit Link" icon, which looks like this:

  2. When presented with a Link dialog box, type in the Department's website url: http://engin.swarthmore.edu

Add a link for email

  1. Now add an email link so people can email you.  Add text that says something like "Send me email."  Highlight the part of the text that you want to use as a hyperlink and then click to the "Add/Edit Link" icon.
  2. Insert the following HTML code: mailto:e5student@swarthmore.edu where e5student is your username.

Add an image

  1. Now add an image.  You can use the one below if you right-click on the image and select "Save Image As" and save it to your Desktop.

  1. At the desired location in your website, click on the sun and upload the image from your Desktop.

Add another Page to your website.

  1. Adding additional Pages is as easy as selecting "Add Page" from the left of the Dashboard.
  2. Go ahead and create a second Page that contains a link back to the top level Page. You'll do this by highlighting some text in the second page, clicking the link icon and then pulling down "Or link to existing content" and selecting the Page you want the link to access. Note: To find the Page in the list, it must first be Published.
  3. Once you've got this working, you can test it in Preview mode.

It is very important that the access to your website is what you intend. Go to the Settings menu on the Dashboard:

Choose "Privacy" and inspect the options for Privacy Settings.

It is up to you to specify which option you wish to choose. For now, you may wish to block searches. You should also explore the other menu items in the Settings menu.

This completes the first lab.  When you are sure everything on your webpage is working, click on your username in the upper left hand side of the Dashboard. This will take you to your page as seen by outisde users. Please drag across the url and send me this in a email. I'll link your page to the E5 website.

Going further

Customizing Menu Items

  1. Open the Link on the left-hand side of the Dashboard labeled Appearance. This will reveal the Menus link. Click on this link.
  2. To create your custom menu, first you will have to give it a name and select the Create Menu button.
  3. Next, add the pages you want to the menu. Click View All to see the pages you have created, then select the pages you would like to add to the menu and click Add to Menu button.
  4. The same process can be done with categories.
  5. Add your new post category to the menu.
  6. Organize the pages and categories as needed.
  7. To create a drop-down menu, drag a menu item below the "parent". If it is indented it is now a nested menu item.

Categorizing Posts

Categorizing your posts allows you and your visitors quickly access related content on your site.

  1. From your Edit Post screen, locate the box labeled Categories.
  2. Choose from existing Categories by checking the boxes.
  3. If you don't see your desired category, click the +Add New Category link in this section.
  4. Alternatively, you can manage your categories by going to Posts > Categories from the left hand navigation.

Basic Theme Appearance Options

Adjusting the Background and Header for the WordPress "Twenty Ten" theme.

  1. Log into your Dashboard area.
  2. On the left-hand side, click the Appearance link.
  3. Choose Background.
  4. You can either choose a background image or background color. If you choose a background image simply upload an image from your Desktop by clicking Choose File. Otherwise, click the Select a Color link and choose a color that you find appealing.
  5. Click Save Changes.
  6. To change the header image click Header from the Appearance menu.
  7. The default theme for WordPress allows you to upload your own header image (940px x 198px) or choose from their default images. You can upload an image from your desktop by clicking the Choose File button. Otherwise select the image you like best from the default images.
  8. When you are done click the Save button.

If you want to use a digital camera, one is available.


Comments or Questions?
 Send me email         

Carr Everbach
Engineering Department
Swarthmore College