NZ Web Designers • Websites • Online Shops • Mobile-Friendly Technology

Creating and Editing Content

To create a new page on your site, make sure you are logged in and then go Create Content > Page. A form that looks like the one illustrated here will become available. Everything you need to create a new page complete with menu links, pictures and keywords for the search engines is right here. Just follow the steps outlined below and you will quickly find just how easy and intuitive the whole process of creating new content on your site is.

Click for an enlarged view1. Fill in the Title field with a name for your page (e.g. About Us, Company Background, Our Products etc.).

2. Body - this is the 'get down to business' section. Most of the adding of content happens in this rich text editing window. It looks a bit like the toolbars on a word processor like Microsoft Word. That is essentially what it is - a set of tools that enables you to format your text and add other enhancements like images, animations, tables (to lock content into tabular rows and columns), and the addition of other media like embedded YouTube videos and sound clips. Roll your mouse slowly over the tool bar icons to get an idea of thei function. We think you will find most of them to be quite intuitive. Once you have a measure of text in place it will be a good idea to Save your work. Scroll to the bottom of the screen and click the Save button. Give the web server a few moments to respond. Once your work is saved a confirmation message will appear towards the top of the screen.

3. Inserting an inline image is about the most difficult task you will encounter using the Drupal content management system together with the rich text editor. What we are going to do now is upload a picture from your hard drive, automatically generate a thumbnail version of it, insert the thumbnail into the text on your page and then create a link to the full-sized version so that visitors can click on the thumbnail and view the full-sized version. Sound difficult? It is a bit tricky but once you have done it once or twice you'll find it easy.

First, place the edit screen cursor at the insertion point and then click on the little Image icon found towards the end of the top row. This pulls up the Image Properties dialogue pictured below left which allows you to upload a picture from your hard disc.

Clicking Browse Server opens a file dialogue which shows files already on the web server where your site is. The image you want may already be on the server but, more likely, you will want to upload a picture from your hard drive. Notice in the top left corner is an Upload link. Follow the dialogues to navigate to the image on your system, select it and upload. Notice that there is the option to generate a thumbnail of your image in one of three different sizes. For now select the largest of these by clicking the checkbox. Now click the Upload button. Two new files will appear in the file listing to the right of your screen.

Firstly, we are going to work with the thumbnail image. You will be able to identify it by the file size and a filename similar to your uploaded image but with a slight change which may include the word 'thumb' or similar. It will be a lot smaller than the full-sized image. Select it from the file list and a preview will appear. Clicking the preview will load it into the Image Properties dialogue ready for insertion onto your page. Before OK'ing the dialogue click the second of three available tabs, the one labeled Link. You again will find a Browse Server button. Click that and find the full-sized image. Again, click the preview then click the Advanced tab. In the form field named Stylesheet Classes, simply type sitepic. You may now finish the process by clicking OK.

If you have done everything right you will have the thumbnail of your image inserted into your text which when clicked will open the full-sized version of the picture into a semi-transparent lightbox overlay window. Clicking outside the overlay will close it and return you to the main page.

Using tables for layout - the best way to keep columns and rows of tabular data tidy on the page is to use a table. You insert a table by clicking on an insertion point and then the little table icon four from the right hand side in the top row. Fill in the form to specify the number of rows and columns and other considerations like whether or not to have a border and the overall width, either in pixels or as a percentage of the content area width. The usual left, right and centre tools are available to position both the table and the data within each cell. Although the use of tables for other layout purposes is generally considered to be not best practice they, nevertheless, can be very helpful in displaying an array of images, for example.