Since Internet is no longer the place for only programmers and hackers but the arena where one can do his business or just promote it, each more or less advanced person realizes the necessity of having such marketing tool as website. Roughly speaking, the whole crowd of websites can be divided into two main groups, static and dynamic. No one would deny that the better marketing tool for each business is dynamic website with all its features able to find out customers’ needs and habits.
Primarily there was one way of development of dynamic website. It was programming. Hence, both development and maintenance were prerogative of web team, quite long and expensive processes. Nowadays, content management systems (CMS) like Mambo, Vignette, Typo3, Documentum, Xitex WebContent M1 etc. can ease a maintenance process for a website of almost any complexity. However, part of them can even completely change the development process, get rid of programming needs, and allow almost each person experienced in Macromedia Dreamweaver, develop dynamic website on his own.
This article is aimed to show the common process of development of simple dynamic website with average content management system. It will be a kind of website of average company, and will consist of several sections, several dozens of pages, automated menu, contact form, automated newsline, breadcrumbs. Those are the features any website needs. As a sample development environment, we will use Xitex WebContent M1 CMS.
Here we go now. Further you will find seven main steps one should proceed to develop a dynamic website with a content management system.
Step 1. Define Site’s Structure
Before you start any activity, you should plan it. Website development isn’t exception too. You should define what exactly you are going to tell your visitors. That can show you the quantity and main point of pages you should create.
Due to themes of your content and its quantity, you can develop deep or flat structure, hence, navigation. Average company’s website of about 80 pages will be the best to develop with flat two-level structure with sections like Company, Products, Services, Partners, and Contacts etc.
After the site’s structure is clear, you can make the first step of your website development, you should create sections (folders, directories etc.) with your CMS interface where pages will be located. You should also create sections for all graphical and other resources (CSS files, documents etc.) other than pages (see screenshots).
Step 2. Prepare graphical resources
The next step is design development. The best way one would recommend is designing your site in Adobe Photoshop or in some substitute application. You should design at least two layouts, one for the main page and other for inner pages. When both designs are ready, just define resources you’ll use as images and ones you’ll program with HTML as styles. Just cut those images and save them in JPEG or GIF format with proper quality.
Preparation of Graphical Resources
Step 3. Design templates for the main page and inner pages
The next step for you is getting done with HTML what you have created in Adobe Photoshop. That means we are going to start templates development. Surely, you can code everything on your own. But I’d suggest you should use some good HTML editor. Macromedia Dreamweaver would be the best choice.
Duplicate sections for graphical resources you’ve recently created in your CMS and upload images there. Then you should develop the layout of each template. The only thing you should remember is that all dynamic elements such as menus, breadcrumbs etc. will be added later with modules. However you can define proper styles for them here in Macromedia Dreamweaver.
When each template looks like it has to, you should save it as well as CSS files into the proper resource folder. Now you have almost everything to start development of automated dynamic website.
Preparation of Templates in Macromedia Dreamweaver
Step 4. Upload templates and resources (images, CSS)
Now back to your site. You have already developed templates and have all images for their design. What you need now is getting them onto your server into the CMS. You should perform a simple algorithm in order to get this done.
- Make ZIP archives of the content of every folder.
- Go Site -> Templates in Xitex WebContent M1 backoffice
- With the upload tool in the bottom left corner upload each ZIP archive to the section with the name it belongs to.
Now your templates are almost ready. However, we develop dynamic website. That’s why we should create and add modules that will make our site automated.
Upload of Templates and Resources
Step 5. Create all modules
Dynamic website is called that way mainly because of its automation. With the usage of different rules and algorithms pages can be created on-the-fly. All that developers need is to put content in a proper place. All those rules and algorithms are, roughly speaking, programs written in different languages from Perl to PHP and Java. Almost each content management system includes such programs (traditionally called ‘modules’) supplied with simple wizards so that anyone familiar with PC can create, adjust and use those modules whenever and wherever he needs.
As was mentioned above, the article will explain how one can develop such main automated elements each site should have like Menu, Breadcrumbs, Newsline, and Contact Form with Xitex WebContent M1 CMS.
You can develop automated menus that will change themselves every time you change the site structure (create or remove pages, rename them, add sections etc.)
- Proceed Site -> Modules and create module M1.SmartMenu
- In the adjustment window of M1.SmartMenu define:
- Sections that will be handled by this module
- Quantity of levels (2 for this example)
- Styles for each menu item of level 2 (it’s HTML code you’ve got when developed templates in Macromedia Dreamweaver)
- You can choose whether the module should show the index page of each section or not.
Breadcrumbs show the path from the main page to the current page built of links to each intermediate page. You can use this module for placing such chains automatically. All you should do is:
- Proceed Site -> Modules and create module M1.Breadcrumbs
- Specify type for links
- Specify separator symbol
Corporative website can’t be successful without news. Hence, there is a need of tool which will automate the whole process of creation news pages, publishing their summaries, dates etc. in the proper places throughout the website, scheduling the publications etc. Each more or less reliable CMS has newsline module. Xitex WebContent M1 has its M1.SmartNewsLine.
- Proceed Site -> Modules and create module M1.SmartNewsLine
- Define the quantity of recent news it should show
- Define styles for each news summary (it’s HTML code you’ve got when developed templates in Macromedia Dreamweaver)
Having business and developed own website sooner or later you understand that there should be a tool that will make your potential customers contact you even if they haven’t email access at the moment. So you decide to place a contact form. It’s no difficulty to create the layout of the form with HTML. However, if you need the content of the form to be emailed to some address, you should program it. Each good CMS provides you with simple wizard in order to make you get rid of such programming need.
- Proceed Site -> Modules and create module M1.Feedback
- Define style for each element such as text, textfield, textarea, radiobutton, checkbox, message status notifications etc. (it’s HTML code you’ve got when developed templates in Macromedia Dreamweaver)
- Press button ‘Builder’ and build the form of elements with simple wizard
Defining of Syles
Contact Form Builder
Step 6. Add modules to template’s code
As soon as modules are created and adjusted, you should insert them into templates’ code. In Xitex WebContent M1 you should just:
- Go Site -> Templates and choose required template
- Open Editor by pressing “Edit”
- Find the proper place for each required module and go Insert -> Module
- Choose the module to be inserted
In addition, you should insert at least one editable region. It’s a place where your content will be inserted while creating pages. You should just find the proper place for it and press Cntrl-Alt-V. Now the templates are ready.
Insertion of Module into Template
Step 7. Create pages
Actually, templates with modules adjusted wisely are what make your website dynamic. They are those rules mentioned above. The only thing you should do now is fill your site with content. That means you should create pages.
There are different schemes and editors in different content management systems. However, all you should know is that each instance of content you create forms a new pages, which will be placed to the section you specified, with the name and all other parameters you specified. The most common way is when you:
- Define page’s properties
- Choose proper template
- Insert content into the editable region
- Publish this page on the website
Page's Properties Defining
Selection of Template
Dynamic website is ready
Website Is Ready
As you can see there is nothing impossible to anyone who knows at least HTML and understands the basics of Internet to develop his own dynamic website. Content management systems allow you to follow the same rules as if you’d develop simple static website about ten years ago. The difference is that now you can develop the automated dynamic website and spend about the same amount of time. Content management systems make you able to develop your website of ready bricks, programs that you can turn on whenever you need. And the most important, business becomes less dependent on programmers, hence, more oriented to its essential – targeting potential customers.
Alex Polonski is a Senior Sales Manager at XITEX Software Company, Ukraine. The company works in offshore software development market since 1999 and has a fair expertise in J2EE and .NET technologies. Among company's own-developed and marketed solutions, one can see a J2EE content management system, Xitex WebContent M1.