Using Templates for Faculty Web Sites


This Workshop Guide is created for faculty who wish to create a Web Site that is one or two pages in size.  One of the easiest method to create a single Web Page is by using Tables to create a layout.  A typical Web Site layout is as shown below.

Using basic tables, merging cells, removing borders and etc an author can create a basic web page layout.  This works beautifully if the author has one or two pages.  IF the author has more pages it starts to become complicated.  It becomes almost impossible to keep each page perfectly aligned.  As users click from page to page they will see columns have increased or decreased in size.  Even when table cells are set fixed width, when published to the web, they may move.

A answer to that may be the addition of CSS.  CSS stands for Cascading Style Sheets. Style Sheets are linked to the pages in the Web Site.  Style Sheets control the font, position and color of the web site pages.  A change in Font Style on the CSS will change the Font on every Web Page.  Changing the background color in one place will change it everywhere.  Also, using a CSS that stabilizes the positioning saves a lot of work.  Each template has its own pros and cons.  We are going to use a simple basic template for our workshop.  

Go to http://faculty.etsu.edu/knightb/Temp_1/index.htm

The template looks something like this:

The CSS style sheet looks like this:

div#topnav {padding: 2%;

text-align: center;

background-color: #f0ebd9;ETSU

color: #0a0a0a;

width: 1000px;}

body {

    margin: 0;

    padding: 0;

    line-height: 1.4em;

    color: #05103b;

    background-color: #3685C7;

    margin: 10px;

    padding: 5px;

    font-family: Verdana, Helvetica, Arial, sans-serif;

    font-size: 0.9em;

    text-align: left;

    width: 1000px

}

a:link {color: #031f4f;

text-decoration: underline;}

a:hover {

    color: #031f4f;

    text-decoration: underline;

}

a.white:link {

    color: #FFFFFF;

    text-decoration: none;

    font-weight: bold;

}    

a.brown:link {

    color: #8D6E52;

    text-decoration: none;

    font-weight: bold;            

}

a.white:visited {

    text-decoration: none;

    color: #FFFFFF;

    font-weight: bold;

}

a.brown:visited {

    text-decoration: none;

    color: #8D6E52;    

}

a.white:hover {

    text-decoration: none;

    color: #FFFFFF;

    font-weight: bold;

}    

a.brown:hover {

    text-decoration: none;

    color: #8D6E52;    

}

a.white:active {

    text-decoration: none;

    color: #FFFFFF;

    font-weight: bold;

}

a.brown:active {

    text-decoration: none;

    color: #8D6E52;

}

h1 {font-size: 1.4em;

font-family: Verdana, Helvetica, Arial, sans-serif;

font-weight: bold;

text-align: left;

color: #020030;}

h2 {font-size: 1.3em;

font-family: Verdana, Helvetica, Arial, sans-serif;

font-weight: bold;

text-align: left;

color: #020030;}

h3 {font-size: 1.2em;

font-family: Times, "Times New Roman", serif;

font-weight: bold;

text-align: left;

color: #020030;}

h4 {font-size: 1.1em;

font-family: Times, "Times New Roman", serif;

font-weight: bold;

text-align: left;

color: #020030;}

h5 {font-size: 1em;

font-family: Times, "Times New Roman", serif;

font-weight: bold;

text-align: left;

color: #020030;}

div#header {

    padding: 0;

    text-align: justify;

    background-color: #255E93;

    color: #0a0a0a;

    width: 1000px;

    height: 100px;

}

div#topnav {

    padding: 2%;

    text-align: left;

    background-color: #8E6F53;

    color: #000000;

    height: 20px;

    font-size: x-large;

    font-weight: bold;

    width: auto;

}

div#footer {

    padding: 10px;

    text-align: center;

    clear: both;

    width:  auto;

    background-color: #8E6F53;

}

div#maincontent {

    padding: 2%;

    text-align: justify;

    margin-left:  280px;

    width: auto;

    background-color: #DEF1FF;

    color: #05103b;

    background-color: #E6F2FF;

}

div#leftcolumn {

    padding: 2%;

    float: left;

    text-align: left;

    background-color: #162343;

    width: 240px;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-style: normal;

    color: #FFFFFF;

    font-size: medium;

}

Open your favorite HTML editor.  For this class we are going to use Dreamweaver. Adobe Dreamweaver can be found in the program group on your computer.  Open Dreamweaver and select Open.  Locate the CSS (style sheet) provided and the index page.  In this session we are using Temp_1 index page and the BasicStyle.css.

Take a look at the sheet called BasicStyle.  Each section between the squiggly brackets define how something on the web page will look. The defining information also states where the word and images will sit on the page.  For example, the ‘Body’ section above defines the margin, padding, line height, background color etc.  Then to use the defining ‘object’ we can make changes on the style sheet and it will automatically affect the associated web pages.  This happens because a link has been place in the top of the pages that are created for the audience to view.  The image below shows how the link is placed in the page code.

Each time you want to make a change, save a copy of the CSS (style sheet).  Make changes and watch to see what happens on the web page.  Learning the basis of styles can be a trial and error process.  If you make mistakes, you will always have the copy to use and start over.  

Now that you have created and modified a page or pages in your web site, it is time to publish it.  

Security is a big factor when using FTP to send and receive items over a network connection. Connecting to, editing and publishing a web site to the faculty server has changed to protect us from those who could 'hack' into our network.  The security protocol for FTP is now FTPES.  Therefore to send files to the faculty server requires software that includes that setting.  This Guide will take you through the process using "Filezilla" or another FTPES enabled program. This will FTPES for you IF you are on the ETSU Network. 

 

FTP INSTRUCTIONS FOR CONNECTING TO FACULTY.ETSU.EDU

If you use Expression Web, Dreamweaver, iWeb or another Web Authoring Tool to create web pages you will need a secure FTP software to connect to your faculty website. The Protocol type must be changed to Encryption: Require explicit FTP over TLS.  If your ftp client does not support this, you may download the free FTP client called "Filezilla" from this link  http://filezilla-project.org/download.php?type=client

When you open Filezilla you will probably see a screen that looks similar to this one.

 

Click File -> Site Manager and click the "NEW SITE" button. You can NOT use the Quick Connect option.   Set the fields exactly as shown here, replacing "ats" with your user name in the ats field and entering your ETSU Network/Email password.  Be sure the port number is blank.

This is the screen that appears as the Default.  There is not an option for Encryption Protocol.  Change the Protocol to FTP-File Transfer Protocol.  Now a new field appears.  Select Encryption:  Require explicit FTP over TLS.

Screen with Changes:

Once it has connected, you will see a certificate verification message:

 

 

 

Click the “always trust certificate in future sessions” box if you don’t want to see this message on every connection, and then click OK.

 

You should see your folder(s) on the left side and folders and files on the right side. 

It is a drag and drop process to move files from your computer to the server.  Using this method, you must edit and prepare the document/files on your computer using something like Expression Web, Dreamweaver, iWeb or another web editor and then move them to the web. 

You must move quickly as the server will time out.  I would suggest that you have the edits made and saved or you will continually have to Connect over and over.  

You will use this process each time you update your faculty web pages. Refresh the web and the changes will appear immediately.  Keep a local copy as a back up for those unexpected mishaps.  When you have questions or need assistance ATS is always willing and able to assist.

Additional Resources: