Overview
In this exercise you create your public web page. This page will be your opportunity to share something about yourself, your interests and your creative work with others in the Towson University community and throughout the web. This exercise requires a TU user account.
This exercise uses WordPress as a web page creation tool. WordPress is a content management system (CMS). It provides us with ready-made themes, and we can then fill those themes with our own content. Every TU student has a free WordPress account. In this class, you will use WordPress to create your own website comprised of at least two web pages.
WordPress originally started out as tool to create websites used predominantly for blogs (blog is short for web log). A blog is a web page with the purpose of hosting discussion style, informational text entries often in a diary-style. Today, WordPress is used for websites with many different purposes.
In this assignment you will use WordPress to create the home (main) page of your website. Later you will add additional web page(s) to your website.
For this and all subsequent web assignments, the public web page you submit is required to be created using Towson WordPress. Web Pages residing on other web servers will not be accepted.
TU WordPress for students is available at https://wpstudents.towson.edu/
Required Materials
In preparation for this assignment, please read the "WordPress Reference Guide for Students" at
https://techhelp.towson.edu/TDClient/1879/Portal/KB/ArticleDet?ID=141094
Procedure
1. Login to your TU WordPress account at: https://wpstudents.towson.edu/
2. Dashboard. After logging in, we see the WordPress dashboard, our main control panel. To the left is a navigation pane with various functions, at the top we see a toolbar. Let's see what our current wordpress site looks like. Hover over your name at top tool bar and select Visit Site. We now see our site how it would like to a visitor looking at our web site. We also notice that we still have the toolbar at the top. Hovering over your name again will bring up several options, and clicking on Dashboard will take us back to our WordPress dashboard.
3. How do other people get to our site? We remember that we arrived at our site through our WordPress dashboard panel. Only we can see the dashboard panel of our account because we are logged in. Then how can someone else on the web see our site? Let's Visit Site again, and notice the link shown in the address bar of the browser, which shows the URL https://wpstudents.towson.edu/jstude1/ (jstude1 stands for your TU username). This is our web address for anyone wanting to see our page on the web. Let's go back to the dashboard (hover over your name and select Dashboard).4. Make the site available to the general public. On the Dashboard to the left, select Settings / Reading. Scroll to the bottom of the settings. In the section Site Visibility, select the option Allow search engines to index this site. Click the Save Changes button.
5. Start developing your site. A web site usually consists of several web pages. In WordPress, our site already has a pre-set organization, which is called a theme. The default theme for all student accounts is Author and it already comes with several pages. We can change the theme and the content of the pages at any time.
6. Themes. Themes are like templates and provide a basic framework for your web site. There are many themes available From the left navigation panel, select Appearance / Themes, it shows over 300 themes available to us. At the top are categories to help us filter the various themes. Categories represent, for example, Accessibility Ready (ready for visually impaired clients using screen reading assistive technology), Class themes, Magazine themes, Mobile friendly (work well on mobile devices and often have a responsive design which adjusts to the width of the screen by extending or collapsing certain elements such as navigation or images), and many more. However, for our web work we need to select one of the following themes, they will work best with the activities and requirements we plan to complete for our WordPress site because they make them a bit easier to implement.
Please select one of the following themes:
Author,
Blogghiamo,
Ignite,
Poet,
Tracks,
Vito,
Unlimited
Experiment with one of themes listed above and select one you like. Once you click on it, you can select Live Preview (how your site would look like with this theme) or Activate (make this the theme of your site). Don't worry about content, our content will always stay the same regardless of the theme we chose. The theme will just arrange how our content is displayed, but it will not change the content itself.
7. Add content to our main page. There are several ways how we can add or change content on our site. Select Pages / All Pages from the left navigation pane. We can now see and edit all our already created pages for our theme. Select Home (our main front page) and type a short paragraph introducing yourself. When finished editing, notice that there is a Publish tile to the right of our text editor. In this tile, click on the Update button (this will committ our changes to the page). Check the edited page by hovering over your name in the top tool bar and selecting Visit Site. Go back to the dashboard (hover over your name and select Dashboard).
8. Let's add an image to our page. Select Pages / All Pages, then select Home. We see our paragraph introducing ourselves. Pick a location in the paragraph (either at the top or bottom, or somewhere in the text where you would like the image to appear. Click in that location. Select the button Add Media right above our text editing box. There are two tabs at the top, the tab Upload Files lets us drag and drop files into the box or select files by navigating your file system The tab The Media Library lets us select an image from the library. Since we most likely don't have any images in the library yet, click on the tab Upload Files. Select an image (drag and drop into the box or select an image by navigating your file system). Select Insert Into Page at the bottom right. The image has now been inserted into the paragraph. We notice that we can still edit the image by clicking on the image. Click on the image and an image editing tool bar appears above the image. When all edits are completed and we are happy with our image and alignment, click Update in the Publish tile (right of screen) to commit the changes.
9. The Media Library. We notice that we can add an image directly to a page. However, sometimes, depending on the site and the content, it may be more convenient to upload many files all at the same time (for example, if we want to create a library of many images, but are not yet sure how exactly we want to use them on our pages. We can use the media library to do exactly that. To do so, select Media/Library from the left navigation pane. This will show any images already in our media library. If you would like to add any images, select Add New at the top of the Media screen. We now can either drag and drop images or select images (or other media files) from our file system. We also see additional details that can be added to any image. These are very important in web development, because they add information to anyone who won't be able to see the image. Add a descripton in Alternative Text, Caption, and Image Title. If you like to edit your image, select the Edit Image button right below the image and you will be able to rotate or scale the image.
10. Add a Social Media Connection. It is easy with WordPress to integrate a connection to social media sites. Select Appearance / Customize from the Dashboard, then select Social Media Icons. Pick any social media site and enter the url (link) to a social media account (any account is fine, this does need to be your personal social media account). For example, you could select Facebook and enter the Towson University Facebook site https://www.facebook.com/TowsonCIS/ . Click on the Publish button at the top. Exit Social Media Icons by clicking on the X in the upper left corner.
Some templates may offer additional options, such as where on the page the icons should be located, or ask if we want the icons active (to offer an easy way to turn them on or off).
Check the edited page by hovering over your site name in the top tool bar and selecting Visit Site. Click on the Facebook Icon, it should take you directly to the social media site you have entered.
11. Set a featured image. Featured images (also called "post thumbnails") can be used by themes in a variety of functions on your website (often on homepages, blog posts and/or across social networks. Select Pages / All Pages / Home Page and scroll down. To the right is the tile Featured Image. Use Set featured image to select and set an image of your choice. Your featured image should now show on the page.
12. General configuration settings. From the dashboard, select Settings / General. If you like, you can change your site title, tagline, change the date and time format, and modify other general settings here (no changes here are required for this assignment).
13. Widgets. You can also use widgets (small functions often used
around the main content) to create links to social media sites (or other
content). If
you are interested in learning about widgets, check out the following
how
to use the navigation menu widget or
how to
use the link widget with categories
14. Check your page on the World Wide Web. You are now published on the World Wide Web. You can look at your page using any computer with a browser and Internet connection. To look at your web page, open a browser and type: https://wpstudents.towson.edu/jstude1/ (replace jstude1 with your TU user name) in the address bar of the browser. Check your page.
It is a good idea to check your page on a computer other than the one you used to create your site. This ensures that all links and elements display and work correctly for all visitors.
15. Log out of your TU WordPress account. Click on your name in the top right corner and select Log Out.
Grading Criteria
Home Page must contain
Submitting your home page