Making Websites

This course is in two parts, the examined element is to create a website for a specific purpose in no more than 2 hours 30 minutes under examination conditions. You will be given all of the assets that you may need, all you have to do is design, make, test and evaluate a good site. Therefore you need to practice making websites so that you can make one quickly and efficiently.

Making a simple 4 page website in Dreamweaver

Make a folder in your user area and call it "CiDA_Website_1". Make another folder inside that called "_images".

It is always best to make sure that each distinct website that you make is in its own folder. Later, when you are adding images they will all be saved into the "_images" folder.

The next stage is to make a site in Dreamweaver and connect it to the folder that you have just made. To do this, open Dreamweaver, you will find Dreamweaver here:

Start - All programs - Adobe web Standard CS4

When Dreamweaver opens, click on "Site" in the menu bar.

From the drop down select "New site".

This is the "New site definition" for the site that you are going to make. If your dialogue looks different, then select "Advanced" and it will look like this.

Note that the site name is currently "Unnamed Site 1" and Dreamweaver is about to make a folder also called "Unnamed Site 1". These values need to be changed.

Click on the folder icon next to the "Local root folder" and browse for the folder that you made. You will note that the button says "Open"...

... keeping opening folders until the button changes to say "Select" and you will have opened the _images folder. When it does change, then press the "Select" button.

The "local root folder" will show the path to the folder that you have made. All of the pages that you make and all of the other assets that you use will be saved or stored in this folder.

Change the "Site name" to be "App Spotlight" and then press "OK".

You will probably get a blank space for the start up page as you have not yet made any files. When you do then your start up page will be populated. (If you look carefully you can see the link to this page that is in the start up for my PC.) The ones you see here are the ones that I have made previously (including this page). Click on the "More..." option at the bottom of "Create New" ...

... and you will see the different sorts of pages that you can make. In effect you can pick any page layout that you like but don't click on anything just yet.

I prefer the "3 column liquid, header and footer" layout as this gives me an option of having menus on the left or right of the page or in the header. So, to follow this guide you will pick this style as well. It is right at the bottom of the list.

Choose the style that you want to use (or in this case that I have suggested!) by clicking on it once so that the background goes blue.

This next step is the most important and can easily be missed out - a big mistake as you would have to delete the folder (and the site) and start again from scratch as this is the only way to correct the error. You must remember this stage when creating the site on your own.

Look for the "Layout CSS" near the bottom left of the dialogue. This probably says "Add to head" which is wrong. You need to change it to be "Create new file". When you have done that click on "Create". This will create the CSS file - a file of information about all the colours and layout of the pages that you will make; it's full name is Cascading Style Sheet. It is applied to all of the pages equally so that if you make a change in one of them than all of the others will change to match.

Give the CSS file a filename; you can accept the choice that Dreamweaver offers but I usually name the file the same as the website, "app_spotlight". Note that I have used the underscore to join the two words together as the Internet is not really keen on spaces in filenames.

Now your page is made and you can see it. All of the writing is in the right place but you can change the words that Dreamweaver has used to indicate where stuff goes. (Its in latin if you are interested.) On the right hand side of the page you can see the files and folders that you have made.

Now save the web page by clicking on "File" and then "Save as...".

The name for this page is "index.html".

Save the page three more times with different names; "news.html", "reviews.html and "hints_and_tips.html" so that you now have 4 pages and the CSS file. You should be able to see the 5 files listed in the files list on the right hand side of the page, although it usually takes a few seconds to refresh itself.

It would be good to change the "Main Content" heading on each page so that you can se which page is which. Do not change the "Header" as this will be the space for the banner when it is made and the name of the website. I have also changed the sidebar1 title to be menu.

The next step is to add the buttons that form the menu on each page.

Click at the start of the first sentence in the sidebar (to the left of "The"). This is where the menu will be placed.

Click on "Insert" in the menu bar and then "Spry" and then finally "Spry Menu Bar".

You now have the choice of a vertical or horizontal menu bar; as we are going to put it in the sidebar then vertical is the choice to make here. If later you are adding a menu in the header then you would select horizontal.

You will now see the layout of the menu bar. Four buttons (just the right amount!), however there is no code to make the buttons do anything. All of this is done at the bottom of the screen.

This is complicated but not difficult. If you work carefully through this you will be fine.

At the bottom of the screen there are three open boxes that have things such as "Item 1" in them. At the moment "Item 1" is highlighted (blue background). In the box marked "Text" change the "Item 1" to be "Home" (which is actually better than index that I chose in the example. You will notice that the "item 1" in the box changes to match.

Finally click on the folder icon next to the "link" section and browse for the "index.html" file that you saved earlier.

This code for the first button complete.

All you have to do is repeat this process for all of the other three pages.

Select the menu bar (click on the blue bit) and copy the menu bar. Paste it into each of the other pages in the same place.

Finally save all of your pages by clicking on "File" and then "Save All". Dreamweaver will ask you to save all of the spry information as a separate folder, say yes to this. Press the "F12" button and you can see your website in the browser. Check that the buttons work as they should by using them to change page.

The final stage is to add the colour to all of the pages using CSS.

On the right hand side double click on "CSS styles" and then "All" and you will see the CSS. It may be in three pieces, the first folder being the CSS you created when you made the site and the other two folders being the CSS associated with the spry objects you have made.

Click on the plus next to your CSS file to open it.

Now double click on a rule to open it. I have chosen "Sidebar 1".

Click on the "Background" category and you can see that you can change the background colour. At this stage choose a pale colour as the text is black. Select a colour and press "OK" ...

... and this is what happens, the background colour of the section "Sidebar 1" has changed. If you look at any page, they are all the same. This is the benefit of CSS, make one change and it is applied to all pages.

You can now change all of the sections if you wish. Don't forget "Save All" to save the pages and the CSS.

Press "F12" and you can see the site that you have made, all you have to do now is add the content, but that is for another page.

If you have tested the structure and colour scheme of your site you are now ready to add the content.

 

Adding content

This is where you add the content that is appropriate to the scenario. You need to look carefully at the scenario and try to get as much information as you can.

Adding content to a simple 4 page website in Dreamweaver

It is best to select the text that is there and change it than it is to delete it and try to write something. There are various pre-set styles that the website uses and then you delete the text you might also delete the text formatting with it.

As you can see here I have selected the text in the header ...

... and replaced it with the name of the site. This can be done on every page.

Next I have replaced all the text on the home page with suitable text. You will not have access to the Internet during the examination so you must be prepared to write at least something on every page.

in this instance you will be able to use the Internet to browse for suitable images; in the examination you will be given a set of assets that you will have to make the best of at the time.

Make sure that you open the image before you save it so that you get the largest and best quality image possible.

Right click on the image and select the "Save image as..." option

Save the image to the "_images" folder. If necessary give it a sensible descriptive filename if the web provides some apparently random sequence of letters as a filename.

Here you can see the image saved in the _images folder; being organised in this way is essential as it is worth marks in the examination.

All of your images must be saved into this folder. If your site definition is poorly made then it is possible that your image is not in the right folder; another good reason to get the site definition correct.

To add the image, simple drag it from the "local files" to the place on your web page that you want the image to be.

When you let go you will be asked to give the "<ALT> tag attributes" for the image. In a few words describe the image. Press "OK".

You will now see the image in place and it is probably huge.

Don't panic or try to resize the image. Look at the bottom of the page, on the left hand side there are two boxes labelled "W" and "H" for width and height of the image. Simple change the width to be "100%" and delete the value in the height and the image will fit exactly into your page. So, if you change the size of the browser window the image will change size by itself so it still fits.

I have added another image, this time it is a background image (some wood showing the grain - very skuomorphic!) I am going to use this image as the background for sidebar 2 but you can use the idea wherever you like.

Open the CSS styles as before and double click on the rule that you want to change, in my case sidebar 2.

Go to the background category and use the browse button to search for the background image that you want to use. One other thing, if the image is not very tall then you want to add the "repeat-y" option so that the image is repeated down the page as necessary.

Now, as the background is quite dark I have selected the "Type" category and picked a pale colour for the text, pale yellow in this case. Press "OK".

Here is the page with the image and the background.

Here I have added a background image to the header and this is the review page. On this page it may be the case that you want to have an image next to the text. You cannot move images on a page the same way that you can in Word for example. The best way is to use a table and place the image on one side and the text on the other. (Ok, the best way is to use divs but that is for later if there is time and if anyone is interested!) The image shows how to make a table (it does but you have to read the text in the image!)

If you want to merge two cells than click on "Table" then "Merge cells".

Here you can see that I have added another row and merged the cells to add information for parents.

This is the page on the web...

... and it is starting to look a little like a website. (OK, its only a little bit but its not too bad, really it isn't.)

PS, if you want to know how to change the colours of the menu bar, here is a hint.

What sort of content can you add to your page?

Most business websites include some or all of the following types of content that helps to tell their story and provide information on the services & products they offer:

About Us/Who We Are
 
Articles/Forms/Docs
Product Information
Affiliates / Partners
Service Information
Privacy Policy
Photo Gallery
Customer Service
Portfolio of Work/Projects
Upcoming Events
Case Studies
Links/Resources
Awards & Recognition
Customer Testimonials
Employment Information
Contact Us Info
Employee Directory
Request Info/Service/Quote Form
Features & Benefits
E-newsletter Info & Sign-up
Warranty & Return Policy Info
Order Form
Informational Pages
Membership Application
Video Files (Demos, Info, etc.)
Buy Now Buttons (Simple E-commerce)
Database
Shopping Cart (Advanced E-commerce)
FAQs
Members Only/Password Protected Area
News

Having seen the sort of content that you could add what are you going to add to your pages?

 

Colour scheme

Picking colours at random is not a good idea; and as you have seen from my example its a bit tacky. You will not have access to the Internet on the day of the examination so you will have create a colour scheme that you like and be able to repeat it under examination conditions later. Your ideas will change over time and you can always change your mind but being able to explain why you have done something such as choose a scheme is important in the examination.

Adding colour to a simple 4 page website in Dreamweaver

For the purposes of this part of the task make an additional page called "Colour" and add all of the information that you can about the colour scheme, how you chose it and how you implemented it to your site.

The first thing is to choose a colour scheme. There is a website that you can use that used to be called "Kuler" but is now part of Adobe. This is what the website shows you; a way of picking sets of colours that you can use for your site. This website is fully responsive and there is scope to experiment for a short while. The purpose is to find a colour scheme that is most appropriate for the needs of the client, whatever they may be.

The image below shows an "analogous" scheme. Analogous colour schemes use colours that are next to each other on the colour wheel. They usually match well and create serene and comfortable designs. Analogous colour schemes are often found in nature and are harmonious and pleasing to the eye. Make sure you have enough contrast when choosing an analogous colour scheme. Choose one colour to dominate, a second to support. The third colour is used (along with black, white or gray) as an accent.

The image below shows a "monochromatic" scheme. Monochromatic (or mono) is a colour scheme based on only one, single colour tint. It uses only variations (shades) of a single hue, made by altering the saturation and brightness of the base colour. Black and white colours are always added, as they in fact are the brightest, and the darkest shade of the colour. The result is smooth, elegant, comfortable for eyes, even for very aggressive base colour. As there is only a single hue used, the is no clash of colours at all. However, it may be harder to find accents and highlights.

The image below shows a "triadic" scheme. A triadic colour. scheme uses colours that are evenly spaced around the colour. wheel. Triadic colour. harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues. To use a triadic harmony successfully, the colours should be carefully balanced - let one colour. dominate and use the two others for accent.

The image below shows a "complementary" scheme. Colours that are opposite each other on the colour. wheel are considered to be complementary colours (example: red and green). The high contrast of complementary colours creates a vibrant look especially when used at full saturation. This colour. scheme must be managed well so it is not jarring. Complementary colours are tricky to use in large doses, but work well when you want something to stand out. Complementary colours are really bad for text. 

The image below shows a "compound" scheme. The Compound colour. scheme is based on providing a range of Complementary Colours: two colours are chosen from opposite ends of the colour. spectrum. By doing so, the designer is allowed more freedom in their design while also benefiting from the visual appeal of complementary colours

The image below shows a "shaded" scheme. Similar to monochromatic only the shades are closer on the colour wheel.

The image below shows a "custom" scheme. Again this is similar to monochromatic in that the colours are very close on the colour wheel. There is an issue of finding a suitable accent colour other than black for a pale palette or white for a dark palette.

 

 

Designing Websites

Designing your website is very important, you will gain more marks if you make the site you designed rather than design the site you made and even more marks if you take the time to design a site that you think the client will want.

Website Design Checklist

Here is (in their words) an "awesome checklist" for designing a website. I have taken out the items that are unnecessary or impossible in an examination (such as negotiate the price with the client!)

Stage 0 – Project Start – Preparation

  • Stage 1 – Project Kick off

  • Stage 2 – Development
    • Stage 2.1 – Set up Hosting Account
    • Stage 2.2 – Set Up Website Content
  • Stage 3 – Quality Assurance

    • Stage 3.1 – Code Quality
    • Stage 3.2 – Page Content
    • Stage 3.3 – Optimised User Experience
    • Stage 3.4 – Responsive and Mobile Friendly
  • Stage 4 – Launch

    • Stage 4.1 – Analytics
    • Stage 4.2 – Search Engine Optimizations
    • Stage 4.3 – Speed and Performance
    • Stage 4.4 – Usability
    • Stage 4.5 – Social Media

Stage 0 – Project Start – Preparation

Is web design only about design? Not really! Although most of us love the creative part of designing and developing a website, there are quite a few things we need to do before we actually get to that. Before we get down to the nitty-gritty – we’ll need to lay the groundwork and set a few rules.

  1. Define and collect briefing document from client - this will be provided in the scenario by the examiner, it may not be all that informative. If this is the case that you should make good use of your imagination and previous experience and consider what the client might want. You should make a note of all of your assumptions.
  2. Research the client’s company to understand their brand, the way they communicate, their demographics, target audience - again use the scenario.
  3. Research client’s industry to find ways of communicating specifically to the industry, strengths and weaknesses, trends and other industry specifics. What might you know or think about that may provide information about the client's industry or sphere of operation?
  4. Prepare and send a great web design proposal to client – this will be a document that is sent as part of your submission to the examiner so it had better be good.

Once you’ve agreed with the client on the definition of the new website project, you can start doing the dirty work. Developers, designers, copywriters, beautiful photography or stock imagery, privacy policies and legal texts, you’ve got lots of stuff to set in motion when you kick off the project. If you’re still not sure which developers you’re going to work with, bear in mind that you are the whole team.

Stage 1 – Project Kick off

  1. Kick-off email to developers, designers, and other stakeholders - you may want to fake an email to the stakeholders - you certainly wont be able to send a real one.
  2. Create site map of website with proposed sections, pages - this is a vital part of your submission.
  3. Research a template to be used as a basis for design - mention which templates you have considered and which you have discarded - relate this to the view that you have of the client's needs.
  4. Create wire frame of specific pages which require custom designs - this is another vital part of your submission.
  5. Allow time and effort for content creation/copy - "copy" is the website term for the words that are written on the site - make sure that none of the "lorem ipsum" latin is left in your finished site.
  6. Research and tweak (edit) stock images - provided by the examiner.
  7. Allow time and effort for video production - there will be a video that is included in the assets provided by the examiner (I am told) that you need to include - more on this in a later lesson.
  8. Define privacy policy and other legal text required for website - Look at some websites and find out what they have in the footer.

Once the designs have been completed and you’ve set the stage for what you want the final result to be like, it’s time to start developing.

Stage 2 – Development

  1. Check your finalized designs against the client need.

Stage 2.1 – Set up Hosting Account

  1. Your site will not (as yet) be seen on the web so there is no need to create a hosting space for your website

Stage 2.2 – Set Up Website Content

  1. Create the website site map and structure you had defined with the client via your favourite CMS or the framework / technology you have chosen to develop your website - Dreamweaver!
  2. Collect all content from the various sources you have used and make sure that they are part of your folder structure for your site.
  3. Quality assure each piece of content you have used – and make changes where necessary - if the asset does not meet the client need for example.
  4. Populate the website content with the various content items you have agreed with the client need.
  5. Populate links / iconography with links to relevant social media details if this is possible.
  6. Create a link to your own website in the footer (if agreed with client to do this)

There is nothing more important than ensuring the developed product is fit for purpose through several types of quality assurance. After all this is what will keep your clients coming back for more. An eye for detail here will ensure you will keep getting recommendations and repeat business. Most of all, the things which might not be immediately apparent, but make a significant difference, need to be given due importance.

Besides providing the required functionality, ensure the website you are designing is fast, maintainable, provides an optimal User Experience free from errors and glitches, and make sure it is fully responsive on various types of devices.

Stage 3 – Quality Assurance

Stage 3.1 – Code Quality

  1. If possible, validate HTML using W3C HTML Validate, or your preferred Browser extension such as Validity Chrome Extension, or Html Validate plug in for FireFox. As you have no connection to the Internet this would not be possible but you would mention that you are checking the code quality as it is written.
  2. Validate CSS using this CSS Validate, Validity for Chrome, or Html Validate - as above.

Stage 3.2 – Page Content

  1. Make sure web copy writing has been proofread and ran through a spelling and grammar checker to check for correctness. Use the "Commands" menu and the "Check spelling" option.
  2. Check that generic content, such as lorem ipsum, has been properly removed and replaced.
  3. See that all images are in the correct places, formatted, width and height specified and working on all devices.
  4. Confirm that videos and audio files are in the correct places, formatted and working on all devices.
  5. Test to see that all internal links across web pages are working properly. Testing is another vital aspect of the web creation process.

Stage 3.3 – Optimized User Experience

  1. You should check that external links across web pages are working properly, and open in a new tab (Fix any broken links) but your website will not have external links that are effective as the Internet is not enabled in the examination.
  2. Ensure that Social media share icons are working properly – that there is a good image for sharing and that the description for sharing is appropriate. (See above).
  3. Correct your metadata as necessary to ensure social media sharing is working ok. We might have a go at this if there is time...
  4. Ensure that a company logo is linked to the homepage.
  5. Check that load time for site pages is optimized (Dreamweaver gives you a hint on the page).
  6. Try a non-existing address on your page to check the 404 page and 404 redirect pages are in place - this is a site setting.
  7. Check on multiple browsers that your website is consistent and effective in all available browsers - we mightg ask for a few more just to check.

Stage 3.4 – Responsive and Mobile Friendly

  1. Make sure you are using the viewport meta tag: <meta name=”viewport” content=”initial-scale=1″>
  2. Check how the site looks on tablets and phones, in portrait or landscape mode.

responsive web design

  1. Test the site using real devices you have accessible to you
  2. Send the finished site to your client and get feedback

Once you’re happy with the site you have developed you can start thinking about the Launch process and of course how to get the maximum value out of the launched site. There are many tools out there to help you reap maximum benefit for yourself and for your clients.

Stage 4 – Launch

Stage 4.1 – Analytics

This is all done on the web ...

Stage 4.2 – Search Engine Optimization

As is this

Stage 4.3 – Speed and Performance

  1. Optimize the size of images using Fireworks and replace the existing images with the optimized images
  2. Specify image dimensions for each image
  3. Ensure there are no bad requests, such as missing images or files

Stage 4.4 – Usability

  1. Check for HTML5 compatibility
  2. Enable user and search engine friendly URLs

Stage 4.5 – Social Media

  1. Create new cover images for other Social Media you use such as Facebook, Twitter, LinkedIn company page, Pinterest, Instagram or others as necessary
  2. Send the finished site to your client and get feedback
  3. Fix and change any requests by client
  4. Close project

Creating a website can be daunting. Same goes for updating or improving your existing website. It feels like a huge project. You may feel like you don’t know where to start. The good news is, with the right help and the right tools, creating a website is a very manageable process today.

And it all starts with a good plan. To get started, think through what you need to do. Start making notes to keep track.

The following website checklist, provided courtesy of Verisign, will guide you as you consider key issues and what is involved.

1. Purpose and Goals

Determine the purpose of your website. Is it an ecommerce site designed to sell items online? Is it mainly an informational brochure for your business? Is it a blog that you intend to update regularly with posts? This will be your starting point.

2. Domain Name

Choose and register a domain name for your Web address. In our case this will be the folder name for your site. It is important and should not be ignored.

3. Priorities

Determine what is critical for your website today. Can you start with a simple site and add more bells and whistles later? Write down what you need now, versus later.

4. Site Pages and Features

Develop a list of your website requirements. For example:

  • Number of website pages
  • Amount of website storage (images and videos mean more storage space)
  • Tools such as online forms, blogs, customer reviews, maps, slideshows
  • Links to or integration with social media
  • Video and/or audio players
  • Shopping cart
  • Tech support
  • Mobile device optimization (so your website looks good on mobile devices)
  • Easy way to make content updates

5. DIY vs. Professional Service?

Decide if you want to create a website yourself or if you want to outsource the development and design to an expert. Most DIY website building tools are now made with small business owners in mind, and do not require coding or design skills. Non-technical people can achieve a professional-looking result just by following the online instructions included with a good DIY tool.

6. Website Builder

Choose a website builder. This can be either a do-it-yourself tool, or a professional service that sets up your website for you according to your specifications. Do an Internet search or ask colleagues for recommendations.

7. Hosting

Your site will need to be stored on a computer accessible over the Internet in order for visitors to reach it online. For that you’ll need a Web hosting company. Some website builder tools include hosting — just use the tool, follow the instructions, and it will automatically get the site online for you. Or another approach is to choose a hosting company first (such as the one where you bought your domain name), choosing one that offers a website building tool or service.

8. Connect Your Domain Name to Your Website

If you choose to use a website builder tool that places your website online on the builder’s domain name instead of yours, redirect (also known as web forwarding) your domain name to where your website is located. That way you will have a Web address that’s easy for customers and the public to remember, so you can build up your brand with and to make marketing easier and more effective.

9. Plan and Develop Content

Determine what website content is essential and create it. What information will your visitors find valuable? At a minimum, make sure your website shows your business’ contact information such as your company branded email and phone number, as well as any required information your line of business may require such as a state license number. Note: Your domain name can be used to create a company branded email. Check with your hosting company or the company you bought your domain name from.

10. Promote Your Website!

Think about how your visitors will find your website. Put your Web address everywhere possible including business cards, social media, advertising, and online business directories. Experiment with paid search advertisements to attract pay-per-click traffic to your website.

11. Track Performance

Understand how your website is performing and who is coming to your site. Website analytics can yield great insights into what you need to do more of, or what you need to change. You can install an external analytics program, or use one provided by your website builder tool or hosting company.

12. Keep Up a Cycle of Continual Improvement

Continually optimize your site and develop useful content to your visitors based on what’s working.

 

Activity

Research what companies have in the footer of their websites; make a list and add at least three of these things to the footers of all of your web pages.

snb contact details

If leaving a message is important ...

Phone

(+44) 1733-0000

Address

1234 Clive Sullivan Way,
Millward
Yorkshire
Great Britain