Tutorial site 3: Style sheets and Javascript

Cyteis Help

In this tutorial, we will be adding scripting and style sheets components to a webpage. Once again, you are recommended to review Tutorial 1 and Tutorial 2 to ensure that you are aware of the following:

  • Creating a website or a page
  • Creating, importing and editing sections
  • Changing the Layout of the page
  • Adding CSS styling and layout to a section
Contents
  1. Style sheets
  2. Javascript
  3. End Result

Style sheets

We intend to create a style sheet (CSS) file that will provide the styling that we want across the website. This is to save us from specifying the same styling on every page. We will also be writing some JavaScript code. For the CSS file, please launch Notepad or your favorite text-editor and enter the following code:

#menu { color: red }
h2 { color: orange; 
    text-align: center; 
}
p {
    font-family: "Times New Roman";
    font-size: 20px;
}


Of course, you can add any CSS styling that you like here. Once complete, save the file, such as with the name "sample3.css". Go to Manage site, then to Site File Manager and Upload the file that we just created using the File Manager (please see the 'File Manager' tutorial if you are unsure how to do this). Next, we will want to link the file to our page. Please go to Manage Site and then to Edit Page Design of your page and in the Header textarea, add the following code:

<link href="/files/{sitename}/sample3.css" rel="stylesheet" />

{sitename} refers to the name of the site and sample3.css is the name of the file. Alternatively, you can enter:

<link href="/useruploads/{sitename}/sample3.css" rel="stylesheet" />



If you are unsure about the path, you can right click on the File in the File Manager and then click on Get Info and the relative path will be listed under the Path row:


Generally, you will want to add path similar to 
"/files/yoursite/somefile.xyz" or "/files/yoursite/folder/subfolder/somefile.xyz"

You can enter some text in the menu section and use a H2 and a paragraph tag to test our CSS changes. Please also 
Add a New Section and enter the Section name as "menu". Any text in the menu will be displayed in color red because of the line #menu { color: red } in our CSS file:

Javascript

You can also provide a link to the .js file in the Header, similarly, if you have one (for this tutorial, we don't):

<script src="/files/{sitename}/{filename}.js" />


Next, we want to design a simple form and link it to a JavaScript code snippet. Edit the main section and click on the Form button in the toolbar. Enter the form action as javascript:personform() and give the form a name and an Id:


Also, add a textbox and give it a name "firstname" and add another textbox with the name "secondname". Next, enter a dropdown with the name "workplace" and add several options such as Office, Nuclear Plant, etc.


Finally, add a button with the Type as Submit (and not Button or Reset). Under the Header area in the Edit Page Design page, add the following code:

<script>
function personform() {
    var fname = document.getElementsByName("firstname")[0].value;
    var sname = document.getElementsByName("secondname")[0].value;
    var workplaceSel = document.getElementsByName("workplace")[0];
    var workplace = workplaceSel.options[workplaceSel.selectedIndex].text;
    alert('Your name is ' + fname + ' ' + sname + ' and you work at ' + workplace);
}
</script>

 

End Result

The demo of this site is available here. The end result should look like this:


Of course, you can use jQuery or another library to enhance your JavaScript processing by simply adding a reference in the Header. Cyteis gives you full control to use scripting and styling to the best effect.

 

Comments