George Mason University Antonin Scalia Law School

Tag: html

Create Course Schedule HTML Table Using R

Referenced in steps below: Course Schedule Instructions.

  1. Save a copy of the original Excel file to come back to later for the Notes sections.
  2. Open up the original Excel file, merge multiple faculty into one row, then delete all the empty rows.
  3. Make sure columns are identical to the column names in script (do not include Room Number or First Name of Instructor). Delete hidden columns (Room Number, First Name of Instructor, etc.). Make sure column names match these: CRN#, CRS#, SEC, Course Title, Instructor, Cr Hr, Days, Time, Room, Exam Date, Exam Time
  4. Make sure footnotes are standardized, e.g., (E) and not (E ) with a space (Update: script has been updated to account for this)
  5. Remove all rows that are not the table header (first row) or the courses.
  6. Save DAY and EVE sheets each as two new csvs by highlighting all cells with data and copying/pasting them into a new file/save as csv (to avoid extra blank columns that may be present by saving entire sheet). Do not open them (especially in Excel) once they are saved, because this may change how the Section numbers are interpreted and may cause 001 to be 1, and so forth.
  7. The R code below covers Steps 2 – 6 in Course Schedule Instructions to create the HTML table.
  8. In R code, update the “dayNotes” variable to match the number of Day Notes. Update the file paths/names for input files and output file.
  9. Paste output into an HTML editor. Copy and paste notes from the copy of the original Excel file to the bottom of the HTML page.
  10. Once everything looks good, paste into MODX.

Layout Guides for the Law School Main Website

Here are some quick layout guides for the main law school website.

To create a simple button (see visit campus page), add the button class. 

<div class="button">
	<a href=""></a>
</div>

To create three buttons in three columns with three different colors (see homepage), add grid3 and color-buttons classes:

<div class="grid3 color-buttons">
	<a href=""></a>
	<a href=""></a>
	<a href=""></a>
</div>

To create four boxes in four columns with four different colors, (see homepage), add grid4, color-buttons, and boxes classes:

<div class="grid4 color-buttons boxes">	
	<a href=""></a>
	<a href=""></a>
	<a href=""></a>
	<a href=""></a>
</div>

For a two-column layout (see the top of the People Finder page), use the grid2 class:

<div class="grid2">
	<section></section>
	<section></section>
</div>

For a three-column layout (see contact information on the Records Office page), use the grid3 class:

<div class="grid3">
	<section></section>
	<section></section>
	<section></section>
</div>

For a four-column layout (see icons on the Career page), use the grid4 class:

<div class="grid4">
	<section></section>
	<section></section>
	<section></section>
	<section></section>
</div>

For a two-column layout with one column takes up two-third of the space (see JD Admissions page) , add span2 class on that column:

<div class="grid3">
        <section></section>
	<section class="span2"></section>
</div>

For a two-column layout with one column takes up three-forth of the space (see the footer link and social media link at the bottom of the footer) , add span3 class on that column:

<div class="grid4">
	<section class="span3"></section>
	<section></section>
</div>

To add icons for the second level pages (see Admissions landing page), use the icons24 (24 is the dimension in pixels that all the icons were downloaded) class: 

<div class="grid3 icons24">
	<a href=""><img src="" width="50" alt=""></a>
	<a href=""><img src="" width="50" alt=""></a>
	<a href=""><img src="" width="50" alt=""></a>
</div>