font typography info on the word glossary

Objectives
  • Advance your WordPress skills
  • Work with fonts in both the WordPress environment AND your own hand-coded website
  • Learn about Google Fonts
  • Determine how you might wish to use Google Fonts  — and if you can (where you wish to use them)
Reading, Watching, Testing

%

How far are we through the course?

%

390/500 points possible

Week 12: WordPress II & Fonts

Where are you on your Capstone Project? The assignments that make up this project count as 110 out of 500 total points.

LECTURE:  WordPress

If so many businesses and people are using WordPress as a content management system–IE they are using it to build their whole website–how is that possible?

So far you have created posts. Posts are part of blogging and keeping everyone up to date. Posts allow you to make a website fresh! You can add a new post daily, weekly, monthly… attached to just sale items, etc.

Pages are how you will build the static portion of the site. They are very important, but they look–and are designed to be as easy to make–as posts.

  1. Sign into your free WordPress account
  2. Once signed in you will see the navigation change across the top
  3. Choose + and make a new page
  4. Play around!
    1. More help? WordPress.tv, your fellow students, YouTube, class office hours…
    2. Send email with questions!

More about WordPress: Menus & Widgets

Not all WordPress installations are created the same.

Depending on where you have your WordPress site, you may notice some differences. For example, the free accounts at WordPress.com do not allow you to enter some specific html code. They also do not allow for plugins. Don’t worry, there are many different free themes with great widgets associated with them.

WordPress Menus

Navigation is key to any successful website. Your viewer needs to easily get where she would like to go. You can allow WordPress to put each of your pages into the top navigation, if the theme supports it; or you can create your own menu structure.

WordPress has a diverse series of menus depending upon whether or not you allow the theme to determine your menus or choose a theme that allows you to create and use your own menu. The WordPress.org codex has everything you need to know about creating your own menu in WordPress. You’ll be working in your dashboard under the appearance tab.

I recommend that you have two web browser windows open. One to do your work and editing in and the other to view the results.

Why should you make a menu?
To have the navigation exactly as you would like it.

How do categories help you?
You can use categories to organize your posts into select pages.

When you are ready to work with menus and widgets YOU WILL need to be able to work from within your dashboard. The dashboard is a much more in-depth interface than the top navigation that you might use to create a new post or a new page.

1. Log into WordPress

2. Navigate to your dashboard… sometimes this is hard. No, really… things change all the time. I found it most recently by typing wp-admin in at the end of the account I was logged into. Another recent route is by clicking on the WP icon in the top left. Also, you may see admin on the left side.

WordPress Tips

  1. Images: you can display images inside of WordPress rather easily. See adding images to posts and pages.
  2. Editing in the Text tab image shown below
  3. Using CSS inline (in the text tab) to see what WordPress will allow you to do…

Editing in the Text Tab - ss1

Editing in the Text Tab - ss2

LECTURE:  FONTS

Examine Google fonts (https://www.google.com/webfonts).

The steps shown are  1. choose,  2. review,  3. use.

On the ‘Choose’ page, find and select fonts that you like.Then on the ‘Review’ page, have a closer look at your Collection and finalize the font families that you want to use on your website.Finally, on the ‘Use’ page, get the code to use the fonts on your website.

When you are reviewing the fonts you have chosen on the ‘Use’ page look at the page load. Take notes; go back and make changes to your selections. Note the changes to the page load shown in step 3 (the ‘Use’ page).You should

  • Choose your fonts
  • Set up a collection
  • Add your collection TO YOUR HTML PAGE (via a link in your HTML to a CSS page)

Example:

   <link href='https://fonts.googleapis.com/css?family=Seaweed+Script|Cutive' 
    rel='stylesheet' type='text/css'>

You can also add your CSS inline (within the document html text, instead of in a separate document.)

   font-family: 'Seaweed Script', cursive;
   font-family: 'Cutive', serif;
   h1 { font-family: Metrophobic'š Arial, serif; font-weight: 400; }

Need more assistance? Click, “New to Google Fonts” on the google.com/webfonts page.    Even more? Try Googling it… or using YouTube. It is really quite easy. Plan on spending 9-12 hours this week on your WordPress and Font exploration, reading, testing items and assignments. GIVE YOURSELF enough time to submit your work so it is ON TIME.

ASSESSMENTS

WordPress Menus, Categories, and three posts

CREATE three posts (3-5 para each)  and assign  different categories.  Research how categories  are used.  You are learning about categories and menu structures based off of categories. (5 points per post)

Specifics: CREATE three posts (3-5  para each) and assign a category or different categories. (4 points for making a menu entry from a category item)

SUBMIT a working link here to  a page in your menu created from a category.  (1 point)

ACCESSIBILITY REMAKE CREATE HTML & CSS docs
Using your own site on  the CITS server remake the  page you chose to evaluate  from week 8 “Accessibility.’
Specify  the changes you made and  why.

Provide a link to your page.

Regarding how you rework the page you chose to evaluate earlier. You should be able to capture a large quantity of an existing page, including the CSS. If you cannot, go back and review using either Firebug or the Web Developer tools. Implement one or more of your recommendations from your earlier write-up (Week 8 inside of Blackboard). Upload both your HTML and CSS to your space on the CITS server.