I Need a Website...

All graduate students are allocated webspace on the Weinberg WebServer. To upload files to the webserver you need a File Transfer client. There are several options available:

Download the transfer client of your choice, install and then launch the program. When prompted enter the following:
  • Hostname: gradstudents.wcas.northwestern.edu
  • Username: YOUR_NETID
  • Password: YOUR_NETID_PASSWORD
  • Make sure thay you select SFTP as the file transfer protocol

Using Fetch:

Once you are logged in, double click the "public_html" folder. You can now drag and drop your website files into this folder.

Using SSH:
Select the SSH File Transfer Client from the Windows Start menu. Note that the SSH installer installs two programs by default (Secure Shell Client and Secure File Transfer Client). You will want to select Secure File Transfer Client.

Click on the "Quick Connect" icon on the top left.

Enter the hostname and your netID as your username. Enter your university password when prompted.

Once you are logged in, double click the "public_html" folder. You can now drag and drop your website files into this folder.

If you are unable to login, please contact WCAS-IT and let them know that you are a graduate student and that you would like to have your website set up on the Weinberg webserver

Quick Start

Go to this starter page . From your browser menu, select "View->View Source". This should expose the underlying HTML. Copy and paste the source code into a plain text editor. Save the file on your computer as "index.html".

Open the "index.html" in your computer in a web browser. This will allow you to preview any changes that you make to the file.

Go back to your text editor and modify the following sections:

  • Line 5: Change the title of the webpage, e.g. John's Awesome Website.
  • Line 16,17: Enter your name and your title and department
  • Line 31-33: Replace the # character with proper links. For example, you may create a separate page called "research.html", which means you will want to replace the "Research" link to "./research.html"
  • Line 40-43: Add content here. For example, a short description about yourself and your research projects.

As you are modifying your index.html file, you can preview the result in your web browser by clicking the refresh button in your browser.

Obtain a picture of yourself. Make sure the picture is located in the same folder as index.html on your computer. Let's assume that your image is named "john.jpg".

Modify line 27. Replace "http://groups.linguistics.northwestern.edu/documentation/webdesign/shared/myPicture.jpg" with "./john.jpg".

Once you are satisfied with the modifications you have made. Upload "index.html" and "john.jpg" to the webserver. Simply drag and drop the appropriate files from your computer into the "public_html" folder using the SSH file transfer client.

Your website is now live. Your web address is http://gradstudents.wcas.northwestern.edu/~YOUR_NETID

You can continue to make modifications to your website by uploading new versions of index.html to the webserver.

For Advanced Users

Once you are more comfortable editing HTML, you may want to have more control over the design of your website. Here are a couple of suggestions of websites that you may find useful:

  • Balsamiq Mockups . For creating rough mockups of your website.
  • Better Text Editors. These provide some additional features on top of the default text editor that make it easier to code in HTML
  • Dynamic Drive . Lost of templates, tutorials and guides. Useful all around resource for creating webpages.
  • Yahoo Grid Builder. Quick way to design a layout for your website.
  • Adobe Kuler . Helps you pick out colors for your website.
  • Font Stacks. Guide to selecting fonts for your website.
  • Google Font Directory. Web based fonts. Provides you with more choices of fonts but may not be compatible with older browsers.
  • Adobe Browser Lab. Compare what your website looks like on different browsers.
  • Advanced starter page. Google fonts, CSS gradients, CSS effects.

Building Your Website: Noon Colloquium, 9 Oct 2013

  • Basic Template (Does not use Bootstrap).
  • Bootstrap Template
  • Bootstrap
    You don't need to download bootstrap since it's already included in the template files. You would use the Bootstrap website to look up code and copy/paste them into your html file.
  • Bootswatch
    Boothstrap themes. You do need to download these if you want a custom theme. A couple of themes are included in the template files.
  • Viewport resizer
    Adjusts screen size to emulate different devices (phones, tablets etc...)