Introduction
This tutorial focuses on a layout style that has been primarily used for faculty listings on select Digital Bell websites. It does not apply to all Digital Bell sites, but the layout and process can be used in other applications.
Adding / Editing a Faculty Member
- Step 1 - Edit the Faculty Page
- Step 2 - Edit the Text Block
- Step 3 - Create a New Row
- Step 4 - Edit the HTML Source
- Step 1 - Edit the Faculty Page
-
Begin by editing the page with the faculty list. To edit the page, click the "Pages" link, located in the menu at the top of your Digital Bell Dashboard. Clicking this link will bring you to a list of the existing pages on your site.
Locate the appropriate page (usually titled "Faculty," or "Staff"), then click the Edit button (pencil icon) to the left of the page title.
Return to Top - Step 2 - Edit the Text Block
-
Clicking the Edit button will take you to the page's content editor. First, locate the Text Block that contains the appropriate faculty table, and click on it to open the Text Block editor.
The list of faculty members will be contained in a table, with rows and columns denoted by dashed lines. Each space inside the table where information has been entered is known as a "cell."
Return to Top - Step 3 - Create a New Row
-
Note: If you are editing an existing faculty member, skip this step.
Determine where the row for your new faculty member should be placed in the table, then right-click inside one of the cells in the row above to create a contextual pop-up menu. On the menu, mouse over the "Row >" option, then click "Insert Row After" to create your new row. Alternatively, you can use the toolbar to add new rows, above or below the row your cursor is in.
Once you have created a new, blank row, enter the faculty member's name and title in the appropriate cells.
Next we will begin editing the source HTML for the table to create the links for their email and Web page.
Return to Top - Step 4 - Edit the HTML Source
-
A)Click the "Edit HTML Source" button, located on the far right of the third row of the WYSIWYG toolbar. This will bring up the HTML Editor window. Here you will see the source HTML that is used to create the table.
When viewing the HTML code, each row of the table will begin with a line similar to:
<td style="width: 40%;">Daniel Richards</td>This HTML denotes the cell that contains the faculty member's name. Next, locate the line containing the name of the faculty member you wish to edit. Beneath the line that contains their name, you should see another line that denotes their title. For example:
<td style="width: 40%;">Teacher</td>B)
Below the line for their title you should find a line which corresponds to the "Email" column. Copy the HTML below and paste it into the Editor, directly after the "<td style="width: 10%; text-align: center;> tag, and before the closing "</td>" tag.
After you have pasted the line, edit the highlighted portion, below, with the correct e-mail address.
<a href="mailto:Teacher@School.Net" target="_blank" class="btn btn-primary">Email</a>If a line for the e-mail address already exists, you may notice that the e-mail address is incorrect, and belongs to the faculty member on the row above. If the email address needs to be changed, the section you will need to edit is highlighted, ablove, in yellow. Replace this email address with the correct address for the new faculty member.
The HTML for the new faculty member should now resemble the example, below.
C)
Below the email address line, you will find a line that corresponds to the "Website" column. Copy the following line of HTML, below, and paste it into the Editor windowdirectly after the "<td style="width: 10%; text-align: center;> tag, and before the closing "</td>" tag. After pasting the HTML, edit the highlighted portion, and replace it with the correct website URL.
<a href="http://www.website.com/newteacher" target="_blank" class="btn btn-primary">Web</a>If a line for the website link already exists, like the line for the the email address, it may also contain an incorrect URL. Replace the highlighed section, ablove, with the correct URL for the faculty member's page or Web site.
The HTML for the new faculty member should now resemble the example, below. If you are editing an existing member, the example below should serve as a guide, as to where the email and/or website address should be added.
D)
Once you have finished adding the email address and URL, click the "Update" button. Repeat steps 1-3 for each new faculty member, then click the "Submit" button to finalize your changes.
Once you have updated the Text Block, click the "View on Website" button, located in the right margin. This will open the page in a new browser tab and allow you to ensure your changes have been made correctly.
Return to Top