Creating and Editing Pages
Creating and Editing Pages

Creating and Editing Pages

In this tutorial you will:
  • Give your home page a title
  • Add text to your home page
  • Create a workspace for pictures
  • Upload a picture
  • Add a picture to your home page
  • Learn how to create, edit and delete other pages
  • Learn how to create, edit, delete and move blocks
  • Learn how to create and edit text and graphics.
When you have completed the tutorial, you will have the essential skills to create and edit web pages that don't include data views. To learn about views, follow the tutorials Working With Data Part 1 and Working With Data Part 2.

Give Your Home Page a Title

1. When you are logged in with role home:admin, your main home page will have an edit button next to the user button. Click the edit button.


2. You will now see buttons that enable you to edit the page elements. Click the add button for the title.


3. Enter your title and click the proceed button.


4. The title will now show in your browser's tabs bar. (You may need to change your browser's view settings to display it.)


Add Text to Your Home Page

1. When editing your home page, click the New Block add button.


2. A content editor window will appear. Enter the text for the page. (The text shown here anticipates the Working With Data tutorial.) Below the content editor window is a selector for the block size. Change this from FULL to HALF so that the image that will be added later can go side by side with the text, if the display screen is large enough. Then click the proceed button.


3. When you are editing a page, a view page button replaces the edit button next to the user button. Click the view page button to display the page with its text.


Create a Workspace for Pictures

1. Click the navigation button. From your home page, this will take you to your sources page.


2. In the Context block, click The home source.

3. On the home source page, click the add button in the Workspaces section.


4. Enter the name pictures for the new workspace and click the proceed button.


5. Your new workspace has been created.


Upload a Picture

1. Click the name of the pictures workspace on your home source page.

2. Click the edit button at the top of the page.

3. Click the add button in the Members section.

4. Enter the name that you want your picture to have and select the FILE type. Click the Choose File button and select a file on your local system. Then click the proceed button.


Add a Picture to Your Home Page

1. Click the Site main page link in the Context section to return to your main home page.

2. Click the edit button on your home page to edit it.

3. Click the New Block add button to add a new block.

4. Click the Insert image icon.


5. Select the home/pictures workspace then click the thumbnail of the file that you uploaded to that workspace.


6. Click on the picture. A pop-up menu will appear to enable you to set the picture's size and justification. Click 100% so that it will fill the width of the block.


7. Change the block size selector from FULL to HALF so that the image will go side by side with the text, if the display is large enough. Then click the proceed button. The image will appear after the text. Click the view page button to see the page without editor icons.


Create, Edit and Delete Other Pages

1. You create pages in workspaces. Create a pages workspace in your home source, in the same way that you created the pictures workspace.

2. In your pages workspace, Click the edit button at the top of the page, then click the add button in the Members section, just as you did when uploading a picture.

3. Enter the name categories (we will use this in the Working with Data tutorial) and leave the type as Page. Click the proceed button.


4. Click on the name of the page in the workspace to go to the page. You can then put text and pictures on it, just as you did for your home page.

5. Click the navigation button at the top of the page to return to the workspace.

6. You can change the page's name and access levels by clicking its edit button in the workspace.


7. You can delete the page by clicking its delete button in the workspace. (Don't do this; we will use the page later.)


Create, Edit, Delete and Move Blocks

1. You create blocks on pages by clicking the New Block add button, as you did to put text and a picture on your home page.

2. A block can be full size or half size. A full size block fills the width of the page. On a large display screen, a half size block fills half the width, so that two blocks can fit side-by-side. If the display is small, a half size block will fill its whole width. Try narrowing and widening your browser window. The half-size blocks on this page will appear side-by-side when the display is wide, and one beneath the other when it is narrow. You set the block size using the block size selector, as you did for the text and picture blocks on your home page.

3. You can edit a block that you have created by clicking its edit button.


4. You can delete a block that you have created by clicking its delete button.


5. You can change the order of blocks on a page. Each block except the first has a move up button. Click it to move the block to before the previous block. If you click the move up button for the picture on your home page, it will change places with the text.


Create and Edit Text and Graphics

1. When you create or edit a block, a content editor appears. You can type text into it. You can also insert images (as you did with the picture in this tutorial) and views (as you will do in the Working with Data tutorial).

2. Beware of entering less-than and greater-than characters: these can be interpreted by the content editor as HTML constructs.

3. The content editor has buttons to set text style, create unordered (button) lists, create ordered (numbered) lists, insert horizontal rules, and insert hyperlinks. It has a button to insert images, and a button to insert views. It has undo and redo buttons. It has a button to enable you to edit the raw HTML, and it has a button for full-screen editing. Hover over the buttons to see what they do.