DESIGNING YOUR OWN WEBSITE

1
DESIGNING YOUR OWN WEBSITE

• MOPS
• 2008.11.3

2
Why would you want a website?

• Teaching Resource
• Post syllabi class information
• Important dates/reminders
• Student discussion
• Networking
• Job Market
• CV
• Research interests
• Post publications
• Look Professional ?

3
Grad Student Examples

• http//polsci.colorado.edu/dept/graduate_graduate_
  students.shtml

4
So how do I get one?

• Step One Get Online!
• Step Two HTML (its not as hard as you think ?)
• Step Three Download a Template
• Step Four Customize
• Step Five Publish Your Page

5
Step 1 Get Online

• The university provides webspace for student
  webpages. To take advantage of this space, you'll
  need to do two things
• Get a sobek account. If you don't have a sobek
  account, contact your lab TA. It's free and it
  only takes a few minutes to set up.
• Download SSH Secure File Transfer for free from
  the university. Follow the SSH instructions to
  create a folder called public_html. Any files
  placed in this folder will be online!
• You are ready to start making files.

6
Step 2 HTML

• HTML is a basic programming language for setting
  up webpages. Luckily, it is easy to learn by
  trial and error.
• If you have no familiarity with html, check out
  this free tutorial http//www.virtualpublishing.n
  l/english/html/

7
You can see the html for pretty much any webpage
by right-clicking the page and selecting "View
Source.
8
Start playing with this code in Notepad,
save the file as an html, and open it up in your
web browser to see how you've done. You can learn
by trial and error by editing the code in
Notepad, saving, and refreshing your web browser.

Make sure to add .html at the end of your
document title, and save it as All Files.
9
Step 3 Find a Template

• Find a free template. There are plenty of
  websites with free templates to get you started.
  Google free templates.
• I use CSS http//www.freecsstemplates.org/.
• Once you find one you like, download it to your
  desktop, extract the zipped file, and take a look
  at the folders contents.

10
Step 4 Customize

• Start to customize! Click on the "home" or
  "index" html file to open it in your web browser.
  
• Also, right-click the file and open with Notepad.
  Now you can tweak the page in Notepad.

11

• Changing the Page Information In Notepad, you'll
  notice the top few lines are between the ltheadgt
  tags. Tweak this to change the title of your page
  that appears on the top of the browser and the
  keywords/ descriptions used to find your page if
  somebody searches for it. Whatever you type
  between the lttitlegt tags will appear on the top
  bar of your web browser.
• Edit this information, save, and click refresh on
  your web browser.

12

• Changing Images To change an image, identify the
  file name of the image you want to change and
  right- click it to obtain the height and width of
  the picture in pixels.
• Find a new image and open the image in Paint or
  some other editor that shows you the size of the
  picture in pixels.
• After you have resized the image, save the file
  in the "images" folder, and edit the Notepad file
  to open the new image instead of the old image.
  Change the image in the text of the default or
  style page.

13

• Edit Text Finally, change the text on your page
  with a few simple commands. The ltpgt tag starts a
  new paragraph while ltbrgt starts a new line
  without a space between. ltbgt bolds everything
  until a lt/bgt tag. ltigt italicizes. lta hrefgt
  inserts a link.
• This is easy to figure out with trial and error,
  and remember you can view the source of any
  webpage to see how other text effects are done.
• You can customize your page further by opening
  the default page and changing font type, size,
  page colors, etc.

14
Step 5 Publish Your Page

• After you have finished customizing your page,
  open SSH Secure Shell to put your page online.
• Rename the folder that contains all of your files
  "public_html" and drag it into the Secure Shell
  program.
• Now, http//sobek.colorado.edu/YOURNAME will
  automatically bring up the page you've named
  "home.html" or "index.html".