I have busy designing a new site lately. While doing this I thought it would be interesting to document my work flow. As always this is in note form giving you a general overview of what to do. If you require more detail on any stage then please comment and I will answer.
Part 1 – Preparation
(1) Discuss the requirement with client
(2) Submit a design document to the client for them to fill out.
(3) On your PC create the file structure for the new site. (see Photo)
(3) Based on discussions and the returned Web design document, create the fluid “Site Design Document”. This is a design document detailing all information concerning the site. It acts as the top document and is issues and updated as required through out the development of the site.
This tutorial assumes you have already created a web page with navigation.
- Open the Page Panel and right click on your page. Then select “Set as Master Page”.
- Click on each nav button in turn and set the link in the Properties pane (index.html)
- Right click on the Master Page in the pages panel and select Duplicat. Then name it.
- Repeat for all pages.
- Export as “HTML and Images” set the following properties. Unselect : “current page only”, Select : “images in subfolder”, “include areas without slices”
- You now have a working site with working navigation.
- Go back into Fireworks and edit each page to your likeing
The Firefox web browser can be a superb tool for web designers. A number of add ons are available to allow sites to be analaysed and coding techniques tested. No good web designer should be without it. Here is a list of must have add ons :
A step by step tutorial, to install and configure a Post Nuke content management system website (CMS). This article includes installing postnuke customisations.
1. Create the domain on your host server with php support. Preferably in the root directory.
2. Create the mysql database on your host and note the name, user and password.
3. Using an FTP program connect to the site and up load all the postnuke files to the domains root directory
1. Navigate to your domain (install.php)
2. Follow the on screen installation notes. Do not tick the box “create database”
3. At the login screen edit the information for your required login details
4. Remember to delete the install directories and files as instructed.
1. Upload the PNPHPBB2 files to the /modules/ directory
2. In postnuke go to admin/modules/ Hit “regenerate” and then find the pnphpbb2 entry and Initiate it
3. To add “forums” to the postnuke menu, go to admin/blocks/main menu. Add the forums entry to the menu configuration. The link entry will be http://faction.cellxgaming.com/index.php?name=PNPHPBB2
Adding a theme
1. Download the runtime client for AT-Lite (postnuke) from www.spidean.com. Upload it to the postnuke directory as its install notes.
2. Initiate it in the admin/modules section. Regenerate if you cant see it in the list
3. Upload your new theme into the /theme/ directory and set its permissions as instructed.
4. In the postnuke setup menu select the theme.
5. If the theme includes install files to theme the forums as well, then install them.
1. Create a new block in the postnuke admin area core/html
2. Name it as “shout box”
3. Add to its contents the html shout box code as supplied by the shoutbox hosting site.
1. Goto postnuke admin/blocks/new block and select core/html
2. Paste your picture html code into it
1. Goto admin/blocks/newblock
2. Select core/search box
1. download the post calendar files
2. Upload post calendar to the /modules/ directory
2. Install as its instructions
3. Go to blocks/main menu and add an entry in the menu configuration form for postcalendar. Entry will be [postcalendar]
1. Activate the members _list module
2. Go to blocks/main menu and add an entry in the menu configuration form for the members list. Entry will be [Members_List]
• Deactivate search box
• Remove from the navigation menu [downloads] and [reviews]
• Position “incoming” block to the top left
• Rename “Sections” nav to “information”
• Set up email notification on news articles
• Add information
• Do tags
• Categories and topics
This article attempts to describe the workings of Postnuke so that admins and users can go about organising and using postnuke.
This allows members to post questions, and for admins to give answers. The results show up under the FAQ section. Each question can be assigned a category and sub category to allow categorisation of FAQ’s. Admin can design the Faq layout and categories, under administration/content/faq.
The FAQ Nav button must be setup in the administration/system/blocks/main menu area [FAQ].
Topics are used to sectionalise “News Articles” and “Stories”. A Nav menu button allows access to sectionalised news articles. Topics are set up in administration/content/topic. Icons can also be setup for each topic category. The Topic category is assigned to “Submit_News” and “Add Story”
Users are able to submit news stories to admin for approval and publishing. “Topic” and “Category” can be assigned to them for sorting and displaying via “Topic” and “Category” Nav buttons. Once published they appear on the home page as a new article. They can also be accessed via the “News”, “Category” and “Topic” nav buttons. Options for setting up email notifications are in administration/content/submit_news.
META Tags can be used for excluding content from search engine crawlers. It is also used when you cannot upload a robots.txt file. Its purpose is to keep content out of search engine indexes. They should be added between the HEAD section of your page(s) in question:
(no)index determines whether the crawler should index this page.
Possible values: “noindex” or “index”
(no)follow determines whether the crawler should follow links on this page and crawl them. Possible values: “nofollow” and “follow.”
Here are a few examples:
1) This disallows both indexing and following of links by a crawler on that specific page:
<meta name=”robots” content=”noindex,nofollow” />
2) This disallows indexing of the page, but lets the crawler go on and follow/crawl links contained within it:
<meta name=”robots” content=”noindex,follow” />
3) This allows indexing of the page, but instructs the crawler to not crawl links contained within it:
<meta name=”robots” content=”index,nofollow” />
4) Finally, there is a shorthand way of declaring 1) above (don’t index nor follow links on page):
<meta name=”robots” content=”none”>
If this meta tag is missing, or if there is no content, or the robot terms are not specified, then the robot terms will be assumed to be “index, follow” (e.g. “all”). If the keyword all is found in the robots terms list it overrides all other values. That is, a robots terms that is “nofollow, all, noindex, nofollow”, would effectively be “all”.
This articel tells you how to Redirect a website or webpage to another domain location or page :
Purpose for use :
• You are using optimising the index.html page for search engines
• A web page no longer exists so you are redirecting it to a new page.
• Directing a .co.uk domain to a .com (multiple domains to one)
• Passing search engine rankings from old site to new one
You just created a new web site but want to pass on the search engine rankings of the old one to the new one. What is the most effective and spider/visitor friendly method? You should use a 301 redirect.
301 redirect ?
It is used when you want to redirect your web site or web pages. The code “301″ is interpreted as “moved permanently”. After the code, the URL of the missing or renamed page is noted, followed by a space, and then followed by the new location or file name.
When a search engine spider requests a web page, your web server will check for an .htaccess file. The .htaccess file contains specific directions that are processed then sent
back to the browser. In the .htaccess file create a line of code that reads like this:
Redirect /index.php http://blog.saltalamacchia.co.uk/index.php
The first “/” indicates that everything from the top level of the site down should be redirected. All current links within the search engine results from the old site will redirect to the top level of your new site. Save the .htaccess file to your root directory on your server.
A useful site is :
http://www.htaccesseditor.com/en.shtml for creating .htaccess files
Redirecting a Web Page
The above example shows how to redirect a whole web site. What if you want to just redirect a web page that you have changed but want to keep the rankings of the old page? Follow the same steps as above but write the code like this:
redirect 301 /old/old.htm http://www.you.com/new.htm
It may take several weeks or months for the old rankings to be passed on to the new site. Therefore don’t remove your old domain name, web site or web pages just yet.
The “Meta Refresh Tag” method
This method search engines can detect. It is also the one method that the engines are perfectly happy with as long as there is a reasonable delay between landing on a page and being redirected from it. At least 5 seconds is recommended. The code for it must be in the section of the page, and looks like this:-
META http-equiv = “refresh” content = “0; URL = anydomain.com/destination.html”
Don’t forget to include the “http” protocol which has been omitted.
The “content” parameter contains two parts, separated by a semi-colon. The first part is the delay, in seconds, before the redirection occurs. The second part is the URL to redirect to which, like any hyperlink, can be a relative URL (as above) or an absolute URL.
For search engine optimization purposes, a delay in the auto-redirection is not usually desirable. Using the Meta Refresh Tag with a delay of 0 (zero) seconds is not recommended, because search engines can read HTML, Meta tags are HTML, and people have had penalties from redirecting that way. For an immeditate redirect, one of the other auto-redirecting methods is much better.
…other head section stuff (Title, Description,etc.)…
“pagename.html” can be any relative or absolute URL, just like a hyperlink URL.
Using a Index.html page to redirect
Use the following code in your index.html to forward to another page or site. Locate this file in your domain root.
<meta http-equiv=”refresh” content=”5;url=http://blog.saltalamacchia.co.uk/index.php”>
Hiding a redirect to a sub domain
If you put your side within a sub directory of your domain, you can hide the sud directory displaying in google. To do this :-
- Create site in www.mydomain.com/subdirect
- Create an index.html file in the domain root
- Within the index file add only
<?php include(”subdirect/index.html”); ?>
or in the htaccess file add :
RewriteRule ^index\.html$ subdirect/index.html
When using wordpress in a sub domain the wordpress .htaccess file is in the subdomain root and the redirect is in the from page root