Tutorial site 1: Beginners

Cyteis Help

If you just want to edit the page's content, then it is easier to use the Visual Page Editor. However, if want to design or code it then Edit Page Design is better and this process is described below in this tutorial.

In this tutorial we will be creating two pages of a fictitious site. This tutorial is specifically for the new joiners and particularly those unfamiliar with traditional web development. First of all, you will need to create your website - the tutorial Create or Edit a site demonstrates how to do this. After you have created a site, you will be asked to Edit settings of your index page. Alternatively, you can click on Manage site in the Cyteis toolbar and from under the Pages section, you can either Add a page or Edit Settings or Edit Page Content or Edit Page Design.

Contents
  1. Templates
  2. Logo section
  3. Main section
  4. Layout
  5. About Us page
  6. End Result

Templates

A template is a pre-designed page with a certain layout, style and sections. For this tutorial, we will be continuing with the default None template - there is no action required therefore.

Logo section

As previously mentioned, Cyteis creates the "index" page automatically for you when you create a website - this is your site's default page. From the Manage site page, please click on Edit Page Design for the "index" page:

Manage site â‡’ Edit Content

We are going to create three sections in this page: Header (containing the logo and menu), Main (page's main content) and Footer (copyright or contact information at the bottom). Let's start off by creating a Header section. To do this, click on Add a New Section from under Page Menu:


In this page, we'll need to provide the Section Mapping, which is the unique identifier for that section (this identifier cannot be repeated twice in the same page), and optionally the Section content. You can either provide the Section content in this page or in the Edit Page Design page, let's choose the latter.

From the Edit Page Design page (accessible from Manage site page), click on Edit in Editor next to the "Header" label:

In this section, we will add the logo and the menu. We want to create something like this:

This was achieved by selecting the Special container style, which will add a grey rectangle - this was done twice for the two boxes:

The image can be inserted by clicking on the Image button in the toolbar and then providing the link to the image (https://cyteis.com/files/Help/samplesites/site1logo.png). Alternatively, you can upload the image and browse to it as described in the 'File Manager' tutorial. The menu here uses Font size 24 and both Special containers are Centre aligned  to ensure that the contents are in the centre of the page. However, we encourage you to experiement with your own designs for better understanding. Once complete, either you can Save and Publish (publish changes publicaly) or Save as Draft (keeps changes private). Please click on Save and Publish.

Please repeat the same steps for the Footer section by Adding a new Section that looks like this:


The horizontal line was inserted using the "Insert Horizontal Line" button .

Main section

You may have noticed that the main section was created by default at the time of the page creation. Either we can use this or create a new section using the previously described Adding a new Section method. In the main section, we want to have a Table containing sub-menus on the left, and details on the right. The table itself has 2-columns and 1-row. this can be created using the Table icon. The "Width" of the table is left empty or blank (and should not be 500px) and so is the "Border size" (instead of "1"):


Click on OK to create the table. The first cell of the table is populated using the italics, bold and different fonts:

If you were to view the page now, you would notice that the left-cell containing the Menu items is on centre-aligned and is word-wrapping. We want to change this, so please right-click on the cell and under Cells, click on Cell properties:

Please set the "Word Wrap" to "No" and "Vertical Alignment" to "Top". This is how it should look now:

Layout

We need to arrange the layout and ordering of our three sections: the Header section will be at the top, the Main section in the middle and the Footer section at the bottom of the page. Under the layout section, move (by dragging and dropping) the Header section to the first row, Main section to the second row and the Footer section to the third row.


Click on Save This Layout. Just above the Page Menu, click on View the Page (new window) to view the changes:

About Us Page

Of course, our website should have more than one page and we will like to reuse our Header section containing the menu and the Footer section containing the copyright information. To create a new page, click on Add a page either from the Manage Site page or under Page Menu if you are already editing the contents of a page. Enter the Page's name, title and tags (Cyteis uses this information for searching and recommendations), such as:


Once saved, click on Edit Content from the Manage site page for this page. We are going to import the previously created Header and Footers sections. To do this, click on Import and Link Section from under the Pages Menu, select the index page in the pages drop-down and, under Posts, select "Header" (or the name you gave to the section):



You can click on Load post below to verify the section and provide a CSS style (it can be left empty or unchanged) and the Section mapping name (E.g. "Header"). Please import the Footer section through this method too. The imported sections will have a red border around it (rather than the green border) to indicate that it's imported. Any changes made to the imported section are immediately visible on all of the pages that have this section - imported sections are shared and are designed to avoid the need to change the same content on multiple pages. The next step is to develop the main section for the second page, which we have left incomplete as an exercise. The layout is the same as for the first page.

We also want our Menu section to actually contain links to our two pages. So, click on Edit in Editor next to the Header section (from either of the two pages). Highlight the text "About us" and then click on the Hyperlink button , enter the link to the page, such as "/{site}/{pagename}". For the website Help, this is "/Help/demo-site-1-page-2". Similarly, highlight the text "Menu" and enter the hyperlink to the first page, such as, "/Help/demo-site-1-page-1":

End Result

Congratulations! You have successfully created a website from scratch without writing any code and, hopefully, as easily as editing a document. If all went well, our site should look like the image on the left.

In the next tutorial, we will be introducing div layouts and CSS styling.

 

Comments