Resources » .NET programming » .NET Framework

Step by Steps explaination for Develop Dynamic Website


Posted Date: 15-Jun-2005  Last Updated:   Category: .NET Framework    
Author: Member Level: Bronze    Points: 10


In this article I will explain the further detail of dynamic web development . You will find seven main steps one should proceed to develop a dynamic website with a content management system.



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).

Section Creation
Section Creation
Site Tree
Site Tree

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
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
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.

  1. Make ZIP archives of the content of every folder.
  2. Go Site -> Templates in Xitex WebContent M1 backoffice
  3. 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
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.

Menu

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.)

  1. Proceed Site -> Modules and create module M1.SmartMenu
  2. In the adjustment window of M1.SmartMenu define:
    1. Sections that will be handled by this module
    2. Quantity of levels (2 for this example)
    3. Styles for each menu item of level 2 (it’s HTML code you’ve got when developed templates in Macromedia Dreamweaver)
    4. You can choose whether the module should show the index page of each section or not.
Menu Creation
Menu Creation

Breadcrumbs

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:

  1. Proceed Site -> Modules and create module M1.Breadcrumbs
  2. Specify type for links
  3. Specify separator symbol
Breadcrumbs Creation
Breadcrumbs Creation

Newsline

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.

  1. Proceed Site -> Modules and create module M1.SmartNewsLine
  2. Define the quantity of recent news it should show
  3. Define styles for each news summary (it’s HTML code you’ve got when developed templates in Macromedia Dreamweaver)
Newsline Creation
Newsline Creation

Contact Form

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.

  1. Proceed Site -> Modules and create module M1.Feedback
  2. 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)
  3. Press button ‘Builder’ and build the form of elements with simple wizard
Defining of Styles
Defining of Syles
Contact Form Builder
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:

  1. Go Site -> Templates and choose required template
  2. Open Editor by pressing “Edit”
  3. Find the proper place for each required module and go Insert -> Module
  4. 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
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:

  1. Define page’s properties
  2. Choose proper template
  3. Insert content into the editable region
  4. Publish this page on the website
Page's Properties Defining
Page's Properties Defining
Selection of Template
Selection of Template
Content Creation
Content Creation

Dynamic website is ready

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.


About author

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.



Did you like this resource? Share it with your friends and show your love!

Responses to "Step by Steps explaination for Develop Dynamic Website"
Author: Chatanya Agrawal    16 Jun 2005Member Level: Silver   Points : 0
Hi,
Its really good article on CMS.
But can you tell me how can we use services(Third party) in our dynamic sites.
Like I want to show weather forecast or share market information.
How can I schedule this information in dynamic sites.
I have to create a news bulletin using CMS only..
Can you tell me this in details.



Author: Alex Polonski    16 Jun 2005Member Level: Bronze   Points : 0
Hi,

It would be nice if you can clarify it. So maybe I would be able to elaborate such article for dotnetspider's readers.



Author: Chatanya Agrawal    16 Jun 2005Member Level: Silver   Points : 0
Hi,
What you want to make clarify.
I am not getting you.
Please tell me again.
One more thing I have give you one more suggestion regarding your article previously posted here.Have you read that?
mail me cagrawalin at the rate indiatimes.com
Regards,
ChatanyA



Author: sreejith    21 Feb 2008Member Level: Silver   Points : 0
its really nice to read the article.simple presentation. really good.

cheers
sreejith
MCAD
sreejithsql@gmail.com



Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    Kamal Sharma
    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India