A brief introduction

PERSONAL ACADEMIC WEBSITES

Why make one?

Introduce yourself to prospective colleagues and employers

Update people on your projects and publications

What to include?

Curriculum VitaePublicationsResearch and

teaching interestsPersonal information

PERSONAL ACADEMIC WEBSITES

Where to keep your site Hosting

What to call your site Domain names

How to build your site HTML and CSS; Content

Management Systems (CMS); online site builders

Visit sarahsaur.us for resources mentioned in this presentation

WEBSITE BASICS

Free hosting available on department servers (talk to Hugh Chou to get yours set up)

Free third-party hosting Usually supported by advertising on your page

Paid hosting Can cost as little as a few dollars a month

Online site builders will host you site on their servers

HOSTING

Free service URLs

Pros: Free!Cons: Long, hard to

remember, and will change if you change hosts

Examples yoursite.weebly.com epsc.wustl.edu/

~yourname sites.google.com/site/

yoursite/

Buying your own

Pros: personal, easy to remember, and won’t change

Cons: not free, take a little work to set up

Examples yourname.com yourname.me randomword.pw

DOMAIN NAMES

HTML

HTML describes the structure of Web pages

It defines what a certain part of the site is, e.g., a paragraph, a list, a link, or a header

CSS

CSS describes the presentation of Web pages, including colors, layout, and fonts.

It defines how a certain part of the site displays

BASICS OF HTML AND CSS

Code <h1>Heading</h1>

<p>This is a paragraph. Text text text, here is some text.</p>

<p>Here is another paragraph. Text text text, here is some more text</p>

<h2>An Unordered List:</h2>

<ul> <l i>Stars</l i> <l i>Planets</l i> <l i>Moons</l i> </ul>

Display

HTML EXAMPLE

Code

body {color:black; font-family:"Trebuchet

MS", Helvetica, sans-serif;

background-color:#b0c4de;

}h1 {color:#101C6B;}h2 {color:#2038D6;}

Display

CSS EXAMPLE

Hand-coded in Notepad++

View here

SAMPLE SITE

A software tool that allows even those with little to no knowledge of HTML to build and manage a website

Some can be downloaded and installed on your own web space

Some are provided as a web-based service

CONTENT MANAGEMENT SYSTEMS (CMS)

Primarily for blogging, but flexible enough to create non-blog websites

Two different versions of WordPress WordPress.org – self-

hosted, open-source software

WordPress.com – a web-based blogging service

WORDPRESS

Simple “5-minute install” Download WordPress Create a database on your web space Upload WordPress files Run the installation script Done!

Many web hosting services off er automatic WordPress installation

INSTALLING WORDPRESS

Static Pages vs Posts Pages To blog or not to blog Changing the front page of your site to a static page

Themes Thousands of free and premium designs to choose from, or

make your ownPlugins and Widgets

Add additional functionality to your site

BUILDING A SITE IN WORDPRESS

Add New Page Edit Page

CREATING AND EDITING PAGES

WORDPRESS THEMES

WORDPRESS THEMES

WORDPRESS THEMES

Sites that offer free website building tools plus hostingGoogle SitesWeeblyWixWordpress.com

Many offer extra features for paying accounts

ONLINE SITE BUILDERS

Simple and easy to use WYSIWYG (What You See Is What You Get) page creator

Drag and drop page elements like columns, paragraphs and photos right where you want them

Free service has small, unobtrusive advertisement at bottom of page

Premium service ($4-7/month) removes ad, and has a few more features like more space, connecting to your own domain, statistics, etc.

FREE SITE BUILDER EXAMPLE: WEEBLY

Weebly.com

WEEBLY DEMO

Visit Here

WEEBLY SITE EXAMPLE

EPSc People

Martin Pratt - http://epsc.wustl.edu/~martinpratt/website/About.html

Stephen Seddio - http://epsc.wustl.edu/~sseddio

Kelsi Singer - https://sites.google.com/site/kelsisinger/

Other People

Wendy Cage - http://www.wendycadge.com/

David Gauntlett - http://davidgauntlett.com/

Jim Wild - http://www.jwild.co.uk/

EXAMPLE SITES