{"id":1550,"date":"2019-02-21T22:21:59","date_gmt":"2019-02-21T22:21:59","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=1550"},"modified":"2020-08-17T18:19:07","modified_gmt":"2020-08-17T18:19:07","slug":"advanced-cascade-site-tutorial-for-sta-web","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2019\/02\/21\/advanced-cascade-site-tutorial-for-sta-web\/","title":{"rendered":"Basic Training: How to Build a Test Site in Cascade – Part Two"},"content":{"rendered":"

\"\"\u00a0\u00a0\"\"<\/p>\n

\"\"<\/p>\n

STAs, use the HTML editor in the body of your Cascade site editing page to create\u00a0advanced\u00a0<\/strong>features, such as displaying information within a table.<\/p>\n

This exercise is designed to prepare you teach a client how to make 3 different kinds of tables or grids, for specific information to display on a Cascade page. Make a table displaying information or content, relative to the theme of your own site.<\/p>\n

Have fun with the table you design for your Cascade test site! Please create a new page where you will insert your practice tables. Do not place it on your homepage!<\/strong><\/em><\/p>\n

All tables must have at least 3 columns and 2 rows minimum! Make sure to give each table a title as well.<\/strong><\/em><\/span><\/p>\n

Accessing the HTML Editor:<\/strong><\/h1>\n

To create a table in Cascade you have to use the HTML Editor rather than the wysiwyg editor. To access this, click on the <> in the content editor.<\/p>\n

\"\"<\/a><\/p>\n

Once you click on this, the source code editor will pop up. This is where you will enter in all of your code.<\/p>\n

\"\"<\/a><\/p>\n

Creating a Table:<\/strong><\/h1>\n

Below is an image explaining what each of the elements of the code does to create the table and an example of the basic structure of a table:<\/p>\n

\"\"<\/a> \"\"<\/a><\/p>\n

If you need more details, refer to the following page:\u00a0https:\/\/liberalarts.utexas.edu\/web-admin-help\/how-to-use-cascade\/advanced-topics\/addedit-a-table.php<\/a><\/p>\n

 <\/p>\n

Style I:<\/strong> Displaying content through cells in a table. These cells contain external links.<\/h2>\n

Example:\u00a0<\/strong><\/h3>\n

\"\"<\/a><\/p>\n

Code:\u00a0<\/strong>Begin your html code with:<\/h3>\n
<style type=\"text\/css\"><!--\r\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica}\r\nspan.s1 {font-kerning: none}\r\n--><\/style><\/pre>\n
To create a table, begin by declaring:<\/p>\n
<table border=\"0\">\r\n<tbody>\r\n<tr>\r\n<td><\/pre>\n
To have a table with a word\/sentence with an external link, copy the following code:<\/p>\n
<tr>\r\n<td>\r\n<div><span><a href=\"https:\/\/www.youtube.com\/watch?v=C3af0cEMfXY\">In \r\nthis episode, second year Acting Major Miles Agee describes being a \r\nperson of color in Hollywood.<\/a><\/span><\/div>\r\n<div><span><\/span><\/div>\r\n<\/td>\r\n<td>\r\n<div><span><a href=\"https:\/\/www.youtube.com\/watch?v=IiIv0ytINxc\">In \r\nthis episode second, year AADS Major Octavian Moten talks about his \r\nfocus on Community Programs, Public Policy and the School to Prison \r\nPipeline.<\/a><\/span><\/div>\r\n<div><span><\/span><\/div>\r\n<\/td>\r\n<\/tr><\/pre>\n
To make this output look closer to the example, you may shorten the length of the text to just a single world. Additionally, to change the hyperlink, just change the link in the href attribute!<\/p>\n
Style II:<\/strong> Displaying content through cells in a table. These cells either contain embedded images\/video.<\/h2>\n
Example:\u00a0<\/strong><\/h3>\n
\"\"<\/a><\/p>\n
Code:\u00a0<\/strong>Begin your html code with:<\/h3>\n
<style type=\"text\/css\"><!--\r\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica}\r\nspan.s1 {font-kerning: none}\r\n--><\/style><\/pre>\n
To create a table, begin by declaring:<\/p>\n
<table border=\"0\">\r\n<tbody>\r\n<tr>\r\n<td><\/pre>\n
This will allow you to begin to fill in content for two side by side cells in one row. As an example, copy the previous & following content to code two side by side cells with embedded video, as after the model of the AADS website.<\/p>\n
The code below creates two divs in the table row. To adapt the following code to your own content, change the src code to your own link. Within the <div><span>, change the text to your caption for the media.<\/p>\n
<div><iframe width=\"360\" height=\"198\" allowfullscreen=\"allowfullscre\r\nen\"src=\"\/\/www.youtube.com\/embed\/C3af0cEMfXY\"><\/iframe><\/div>\r\n<div><span>In this episode, second year Acting Major Miles Agee \r\ndescribes being a person of color in Hollywood.<\/span><\/div>\r\n<div><span><\/span><\/div>\r\n<\/td>\r\n<td>\r\n<div><iframe width=\"360\" height=\"198\" allowfullscreen=\"allowfullscre\r\nen\" src=\"\/\/www.youtube.com\/embed\/IiIv0ytINxc\"><\/iframe><\/div>\r\n<div><span>In this episode second, year AADS Major Octavian Moten \r\ntalks about his focus on Community Programs, Public Policy and the \r\nSchool to Prison Pipeline.<\/span><\/div>\r\n<div><span><\/span><\/div>\r\n<\/td>\r\n<\/tr><\/pre>\n
To create another row with content, simply create another <tr><\/tr> with the same code as before.<\/p>\n
Style III:<\/strong> Displaying content through cells in a table. This table acts as a menu that links you to pages not included in Cascade.<\/h2>\n
Example:\u00a0<\/strong><\/h3>\n
\"\"<\/a><\/h3>\n
Code:\u00a0<\/strong>Begin your html code with:<\/p>\n
<p>\u00a0<\/p>\r\n<table align=\"center\" cellpadding=\"5\" cellspacing=\"5\" height=\"325\" \r\nvalign=\"top\" width=\"100%\">\r\n<tbody><\/pre>\n
The example features four books per row, so the following code features four <td> cell tags. Feel free to modify this depending on your need for cells.<\/p>\n
<tr>\r\n<td width=\"25%\"><a href=\"http:\/\/tupress.temple.edu\/book\/1311\" \r\nrel=\"noopener\" target=\"_blank\"><img alt=\"Ortiz\" caption=\"false\" \r\nheight=\"714\" src=\"\/render\/file.act?path=\/caaas\/_files\/images\/\r\ncollageimages\/ortizonmusic.jpg\" \/><\/a><\/td>\r\n<td width=\"25%\"><a href=\"https:\/\/utpress.utexas.edu\/books\/\r\ntinsley-beyonce-in-formation\" rel=\"noopener\" target=\"_blank\">\r\n<img alt=\"Beyonce In Formation\" caption=\"false\" height=\"356\" \r\nsrc=\"\/render\/file.act?path=\/caaas\/_files\/images\/collageimages\/beyonce\r\ninformation.jpg\" \/><\/a><\/td>\r\n<td width=\"25%\"><a href=\"https:\/\/cap-press.com\/books\/isbn\/97816116359\r\n11\/The-Yoruba-in-Brazil-Brazilians-in-Yorubaland\"><img alt=\"Yoruba\" \r\nsrc=\"\/render\/file.act?path=\/caaas\/_files\/images\/collageimages\/\r\nyoruba.jpg\" \/><\/a><\/td>\r\n<td width=\"25%\"><a href=\"https:\/\/www.dukeupress.edu\/erotic-islands\" \r\nrel=\"noopener\" target=\"_blank\"><img alt=\"Erotic Islands\" \r\ncaption=\"false\" height=\"356\" src=\"\/render\/file.act?path=\/caaas\/_files\r\n\/images\/collageimages\/eroticislands.jpg\" \/><\/a><\/td>\r\n<\/tr><\/pre>\n
Here, the <td width> tag specifies the standard amount for each cell. The <a href> (used before to include a link) performs the same function. This time, when you click anywhere<\/em>\u00a0on the cell, you’re transported to the external link. Substitute in references to your image sources and websites and you’re good to go!<\/p>\n
<\/a>Creating an Accordion<\/h1>\n
Sometimes, when the text content is too long, you might want to organize them into an accordion format. With these set of instructions you will be creating an interactive accordion that the user can interact with in Cascade.<\/p>\n
\"\"<\/a> \"\"<\/a><\/p>\n
The example you will be creating can be accessed\u00a0here<\/a>.<\/p>\n
    \n
  1. Create a new page within your Cascade folder. Give it Navigation Title and a Page Headline.\"\"<\/a><\/li>\n
  2. \u00a0In the main content, type in your text content. You will follow this format:<\/li>\n
  3. \n
    Some clickable text.\r\nSome hidden text. When clicked on the clickable text above, \r\nthis text will appear.\r\n\r\nSome more clickable text.\r\nSome more hidden text. When clicked on the clickable text \r\nabove, this text will appear.\r\n\r\n. . .<\/pre>\n<\/li>\n
  4. Your text should look something like this.\"\"<\/a><\/li>\n
  5. Navigate to the page’s Source Code view.<\/li>\n
  6. Next, paste this CSS code below at<\/strong>\u00a0the top<\/strong> of the HTML.<\/li>\n
  7. \n
    <style>\r\n.question {\r\n\u00a0 \u00a0 color: #bf5700; \/* burnt orange *\/\r\n\u00a0 \u00a0 transition: 0.4s;\r\n\u00a0 \u00a0 margin-bottom: 0px;\r\n}\r\n.question:before {\r\n\u00a0 \u00a0 content: '\\02795';\r\n\u00a0 \u00a0 font-size: 10px;\r\n\u00a0 \u00a0 float: left;\r\n\u00a0 \u00a0 margin-right: 5px;\r\n\u00a0 \u00a0 margin-top: 5px;\r\n}\r\n.question:hover {\r\n\u00a0 \u00a0 opacity: 0.7;\r\n}\r\n.active-accordion:before {\r\n\u00a0 \u00a0 content: \"\\2796\";\r\n}\r\n.answer {\r\n\u00a0 \u00a0 margin-top: 5px;\r\n\u00a0 \u00a0 margin-bottom: 5px;\r\n\u00a0 \u00a0 max-height: 0;\r\n\u00a0 \u00a0 overflow: hidden;\r\n\u00a0 \u00a0 transition: max-height 0.2s ease-out;\r\n}\r\n<\/style><\/pre>\n<\/li>\n
  8. Here are some explanations on the code above:\n