Search:  

 

 

 

Search:  

Previous pageH: Appendices Next page
Building a site 

In this document

This document describes the process of creating a site using nc. This could be a brand new site, or a conversion exercise where a site is being taken over from another provider, and needs to be brought into the nc way of doing things.

Either way, it's important to start with a clear idea of what you are aiming at. Certainly nc is flexible, and it won't mind if you move sections around and change things dramatically throughout the process, but you'll find the job much easier if you don't need to change direction half-way through.

Creating the site

The first thing to do is to create a blank site. Usually you'll want to create the new site on a preview address before setting it 'live' on the intended domain name. So set up the DNS for a subdomain (eg www.sitename.developer.com) and point the A Record at your nc server. Make the blank site listen on that domain name. Browse to the site, and login.

The initial site will just have the 'fundamental' components for logging in and managing users and user groups, in an Admin section.

In the Layout Manager, we now need to define the structure of the site. It's worth creating a top-level section called 'Website', into which the sections which make up the public site will go. Later on you can then create other top level sections as hidden test areas or for use by behind-the-scenes data management components.

You now need to flesh out the structure of the site by adding a 'tree' of sections and subsections (in the 'Website' section we just created). At this stage we're not worrying about putting any content on the pages themselves.

We can now set the default page for the site, in the Layout Manager, right-click on the page that visitors to the domain name will arrive at, and select 'Site Default Page'

Building the navigation

With the structure defined, now is a good time to make it visible. We do this in the Layout Manager by defining Layout Elements that surround the page body, and in the Layout Elements, creating one or more Navigation Zones. Generally, you want to have one 'primary navigation' which shows all the main sections of the site, (which may also have flyouts/ dropdowns to show subsections), and you might also want to define a secondary navigation which will show subsections for the section the visitor is in (ie without them having to mouse over to display a flyout in the primary navigation)

Initial styling

It's worth spending some time styling up the navigation look 'right', and adding in any other static layout zones – header graphics, copyright notices etc, that will appear on all the pages. By doing the styling this early in the process you get two benefits: it makes working with the site as you do the rest of the construction a more enjoyable experience, and it also allows you to spend time experiencing the look and feel, so you have more opportunity to tweak and perfect it before delivery to the client.

Section titles

In a typical two-level site tree – with sections and pages within them, you may want to display the name of the section that the visitor is in (in addition to the name of the page). For example, if there is a section called 'Contact us' with pages of 'Contact details' and 'Directions', when the visitor is on the 'Directions' page it would be nice to have the 'Contact Us' heading visible too.

Of course you could simply type the section heading in to the body of each page, but that is (a) tedious and (b) goes against the flexibility ethos of the system: if we subsequently move 'Directions' into the 'Welcome' section, or rename 'Contact us' to 'About us', we'd want the section heading to update in all the affected pages without us having to individually update them.

To solve this we need to create a Layout Element, and in that a Text Zone. In this we embed a Title object, and define an offset. Offsets are numbers which tell the system which Title to display. If you use an Offset of 0, it will display the Title of the current page the user is in. If you use an Offset of 1, it will use the Title of the parent section (think '1' as being one level up the tree). If you use an offset of -1 it will use the Title of the section one level down from the top of the site in your part of the tree. (You probably want to use -2 or -3 if you've got some sections like 'Website' sitting up at the top of the tree.). Incidentally, it's usually best to use a minus-something offset counting down, rather than looking up one level, as that way it doesn't matter if your section has subsections with their own child pages – however deep the tree, the page will still show the main section heading, rather than its immediate parent.

Placing the section heading, as described, with a secondary navigation immediately below it, both in the same layout element, provides a clean look, which is easily switched off for any pages which don't require it.

Hidden pages

Sites often need to include legal disclaimer pages, which are linked from within some small text at the foot of each page, but don't otherwise show in the site navigation. In nc all pages need to be in the site tree somewhere, but they don't have to be displayed. It's usual to place such pages as children of the 'Welcome' or 'Contact us' sections. Don't lose them in the 'off-site' sections with your Forms and Queries, or you may inadvertently change permissions such that visitors won't be able to see the pages.

In fact it's worth keeping an eye on what visitors (ie people who are not logged into the site) can see. You can either do this by using multiple machines, and being logged in one one, and out on the other, or you can assign two different temporary domains to the site, and then you can browse to both domains, logging in on just one of them.

Back with our hidden disclaimer pages, to prevent them showing up in the site navigation, go to the Layout Manager, and set them to be Hidden. Note that if you have styled up your navigation to show the selected section differently from unselected sections, then visitors will see the section highlighted in that way even though the child page itself is not shown lower down in the navigation.

Adding the links to the disclaimer pages is simply a matter of adding a Layout Element to go along the bottom with a Text Zone in it, containing the text and a link to the page.

More with the navigation – sections

Nc allows the section to have their own content – they aren't just containers for child pages. In other words if you have a 'Welcome' section with children of 'About us' and "Our History', you have total of three pages to fill with content – not just two.

However there are cases when you don't want to let the visitor stay on the section itself, but you'd rather they get taken to one of the children instead. This may be because you don't actually have anything to say on the section page, and a blank page would look silly, or it may be that you'd prefer to put that content on an extra child page, In order for the second level navigation to be able to show the other children. That way, we could have a section heading of 'Welcome', with children listed in the second level navigation of  'Introduction | About us | Our history'.

To achieve this, in the Layout Manager, go to the section, and set a redirect on it to the child that should appear instead. That way, using the example, the visitor will be able to click on 'Welcome' or 'Introduction' and in both cases will be shown the 'Introduction' child page.

Page headings

The page headings defining the sections and pages in the Layout Manager's site tree are what are shown in the navigation links. Limitations on space and rules of visual clarity dictate that these should be relatively short – two or three words at most. The same headings are used on the pages as the heading shown at the top of the page body. Generally, this is exactly what you want, providing consistency, and keeping subsequent changes synchronised. However sometimes you'll want to have a different (often longer) heading on the page body. To do this you need to do two things: you need to suppress the automatic display of the page title, and you need to enter the new one instead.

To suppress the automatic display, go to the Behavior Editor of the page, and in Settings / General Options, set 'Show Heading' to No.
To add your own heading, edit the page, and at the top enter the wording you want. Flip to the HTML view using the <> icon, and change the <p> tag on that line to <p class=heading>

Structured pages

When creating a site it's important to keep an eye out for places where you find you are going to be repeating yourself. For example, if you have set of pages with product information, or a set of pages with people's career profiles, each page is likely to follow the same pattern, just with different details.

In such places, you should think about using the database facilities within nc to store the information, and create the pages from that data rather than hand-crafting each one. This has lots of self-evident benefits, not least enabling you to update all the pages with a new format by making the change in one place – not on each individual page. It also allows you to take advantage of automatic linking between sections, cross-referencing the various pages, without the tedious job of having to tie everything up manually.

Having identified a set of these repeating pages, we need to mentally tear them apart to find out what bits of information are being displayed. These will end up as the field definitions in our Form. Then when we come to create the pages, we'll create a View which contains the standing text that appears the same on each page – for example the prompts – and also contains placeholders for the data from the fields. The site can then display a separate page for each record in the database.

Organising the data components

In a moment we'll start adding components to store and manipulate our data. But before we do we'll create some sections to help us be tidy and be able to find them again. It's easy to miss out this step, and regret it later, when the site is growing, and you can't recall where you put everything. Naturally everyone has their own favorite filing systems, and what you choose will be dictated in part by the complexity and structure of the site. Two possible schemes are 'organising by component type' and 'organising by site section'.

Organising by component type

This is often the preferred method. You start by creating a top-level section in the Layout Manager, called 'Hidden', and within that, sections called 'Forms', 'Queries', 'Views', and 'Misc'. Then we'll place the data components in their respective sections.

Organising by site section

For this method we again have the top-level 'Hidden' section, but within it we have sections mirroring the sections of the website. Within them, the components are placed. This structure breaks down when you have components that are used in more than one section – which happens quite a lot, so isn't recommended for most scenarios. Organise by component type wherever possible.

 

H: Appendix: Tutorials