"READ THIS FIRST - IT HELPS!"

This section contains information on the fundamentals of creating sites. As you can create all sorts of site with neatComponents, it is hard to provide detailed guidance that will be relevant to your particular needs, so the information here is designed to equip you with the skills to use the system; you can then use these skills to create the exact site you have in mind.

All development systems have their own mindset, so to help you quickly 'get' the system, the rest of this page takes you through the process of creating a site using neatComponents.

It's not a detailed how-to (they are in the column on the right -> ), it's more an insight into the issues and approaches...

How does it work?

This short video introduces you to the basics of site building and how 'applications' are created.

You will find detailed instructions in the right column of this page, and below there is a text discussion of how best to approach website and application construction.

Your site could be a brand new web site, a new data application or a conversion exercise where a site is being taken over from another provider, and needs to be brought into this way of doing things.

What you won't find here...

No templates
This is not a template based system. That gives you complete flexibility on how sites and applications look, but it also means there are no pre-canned graphics or layouts to drag into place.  

If you need need no-cost/low-cost photo imagery we suggest Stock.XCHNG as the source. There are many others available.

No graphics editor
We know that you will probably already have a favorite graphics editor, such as Photoshop, so there is no point in duplicating that functionality.

If you need no-cost/low-cost graphics editors we suggest IrfanView for image editing, and Xara for graphics generation.

No staging - No FTP 
You are always working online. You create pages online, you add components online, you manage styles and imagery and links all online. There is no separate 'uploading' or FTP process. Instead there is a live view of your site called the Layout Manager, accessible from any page or component which gives you control over site structure, visibility and every other aspect.

Creating the site

The first thing to do is to create a blank site. There is a detailed how-to step-by-step tutorial available at: A First Site  here ... and we provide a free blank site ready to go.

Working on your own
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 area.

In the Layout Manager, we now need to define the structure of the site. It's worth creating a top-level page called 'Website', into which the pages which make up the public site will go. Later on you can then create other top level pages 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 pages and sub-pages (in the 'Website' page 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 sub-pages for the page 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.

Advice on Structure and Method
 

Page titles

In a typical two-level site tree – with pages and sub-pages within them, you may want to display the name of the area that the visitor is in (in addition to the name of the page). For example, if there is a page 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 area 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' area, or rename 'Contact us' to 'About us', we'd want the area heading to update in all the affected pages without us having to individually update them.

Offsets
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 page(think '1' as being one level up the tree). If you use an offset of -1 it will use the Title of the page 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 pages 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 page has sub-pages with their own child pages – however deep the tree, the page will still show the main page heading, rather than its immediate parent.

Placing the page 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 page differently from unselected pages, then visitors will see the page 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 – pages

Nc allows the pages to have their own content – they aren't just containers for child pages. In other words if you have a 'Welcome' page 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 top-level page 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 top-level 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 top-level 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 top-level page, 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

Later 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 area'.

Organising by component type

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

Organising by site area

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