Complete Guide To Coxhoe History Website
In order to update the Coxhoe History website, you will need to know some basics of HTML code. There is no other away around it. However, this guide should give you enough knowledge and guidance as to how to use these basics so that the website continues to look and behave like you need it to do while keeping the same style that has been set out from the start and throughout the site.
The site has been designed so that when updating, it requires minimal changes to the web pages itself.
This guide will show you how to update the following:
- Home Page – Updating news bulletins, events and inserting new pictures for information requests.
- Category Pages – Category pages are Industrial, Commercial etc. These will be called category pages for the duration of this guide. It will show how to add new pieces of work to these pages and how to link these to open up pieces of work.
- Subject Pages – These are the pages in which you will insert your work into. The majority of this guide will be based around these pages as they will need to be created from scratch and made to look like the existing ones.
Let’s Get Started
To make life easier for yourself, there are a couple of things in which you need to know about websites and how they work, created and how they end up looking.
Dreamweaver is the name of the design software that you will be using in order to edit and create pages. It is highly recommended that this is the only web design software used so that it avoids complications. Dreamweaver allows yourself to both view and edit the site in a design view so that you can see what you are changing as you can change it. As you do this, it changes the code behind the view automatically. This code can be viewed at anytime by using the code selector button. When making changes to code or the design in design view, these buttons should be used to select between the two.
Templates
In order to create a design for a website, designers create a template. This template is the design of the site. The Coxhoe site was created using a template and consists of the background colour, the top title banner, the navigation bars (both top and bottom) and the lower designer mark. As they have been made in a template, these areas have been designed so that they do not need to be edited at anytime in the site’s life. The only section which is designed to be edited is the main content area right in the middle of the pages where you view the page information. This will be the only area for design safety reasons which you will be able to edit.
StyleSheets (CSS)
A style sheet has been used in the design of the Coxhoe History website. The style sheet consists of CSS code which is slightly different to that of HTML coding. The style sheets defines how the website is set out in terms of sizes of various sections such as the overall width of the site, height of the navigation bars and more importantly, the different types of text.
For every different size of text, different weight and whether it is underlined is defined within the stylesheet. What happens is that I set options for text which will be used as the Page Title. This is normally larger than normal text and is bold and underlined. Therefore in the stylesheet, I set that all page titles be large font, bold and underlined. However, this does not simply make all page titles like this. This would be simply to easy. You then have to label the text within the webpage as that text type as set in the stylesheet so that it then takes the same properties set under that text type. The same even goes for the normal text widely used in the web pages.
No changes should need to be made to the stylesheet and it is not recommended any changes be made as this could have an adverse effect on other parts of the website.
Managing Site
To make things easier to set up and use the templates and stylesheets for new pages, it is best to set up a new site in Dreamweaver. This will allow Dreamweaver to find files easily and place them where they need to go.
To start, go to Site located at the top of the page. Click this and go to Manage sites. Click this and this should open a new window inside Dreamweaver. As I have saved a site definition file already, you do not have to go through complicated procedure of declaring new site. All you have to click on is the Import button in this new window. Locate the file within the Coxhoe Local History Group files supplied to you, called Coxhoe Local History Group.ste
Double click this file and this should then place Coxhoe Local History Group in the in the white box. This should be then all you have to do. Please click done and your site has been defined.
This may then open a side window in Dreamweaver showing all the files in the Coxhoe History directory. This can be closed by clicking the small arrow pointing right in the tab on the left hand side of this window.
Updating Home Page
With the home page already being designed and set up the changes which are needed to be made to this page are minimal. Of course the changes which are needed to be made are the Whats New and Whats On sections, and any images which you would like to include.
Below, the image shows the text which you will be editing and also the image along with its own text.
The boxes highlighted in red show the areas in which you will be editing. These areas are what I will show you how to edit. When either writing text within Dreamweaver or copying and pasting it, the text will not be given a style. It will be a default style as it will not have been set with properties determined in the stylesheet. The style of some text can be found in the box in the image above where it is written Normal Text. In this case Normal Text is the smallest of the text and is the most commonly used. This is the style for the text in the Whats New section.
It is always best to always give all text some form of style. Therefore throughout the site there should be no text with a default style.
To set some text with a style, highlight the text in which you would like to edit and select the style from the box named in this case Normal Text as that what style had been previously set. Other styles include, Page Title, SubHeader, Normal Text Bold etc. Selecting one of these styles will change that text to that style.
As you can see in the Whats On section highlighted. There are various styles in use to separate important types of text. The types used in this section are Sub Header for the bolder and slightly larger parts and Normal Text for the normal, smaller text.
Editing this text is exactly as it is done in a word processor. When hitting return however, to take you to the next line, Dreamweaver takes you two lines down. This can easily be remedied by using CTRL + RETURN.
If you are wishing to link some text to another area of the website or an external website or image this is easily done. Select the section of text you wish to be the link. When this is done it will bring up the options on the bottom properties bar as shown at the bottom of the image above. There will be a long white bar as shown in the image above labelled “link”. You can either type in your link into this white box and when clicking that section of text, the website will direct you to that link. If you are wishing to link to an area of the site which already exists it is best to click on the folder icon to the right of the white link box. This will open the folder containing all the websites pages. Double click the page which you wish the text to link to.
Inserting an image can be much more tricky than that of a word processor. The image unless tied down and told what to do will do what it wants, it will appear wherever it wants on a page and this makes it much more complicated when text is involved within the same page which is most likely the case.
To prepare an image for the website you should use Fireworks. This program allows you to copy and paste into a custom sized document and then allows you to change the size, cut and paste areas of the image and then once you have the image the way you wish you can then save the image as a different file type such as .png .jpeg. gif. All of these can be selected from the save box as they normally can be when saving a document. I have used .png files however, .jpegs are also highly recommended as you may be more familiar with this file type and are just as small. I used .png as they can still be edited once they have been saved just in case any changes needed to be made to them. When saving an image do not use spaces or any other grammar. When updating these images with any spaces in the server will simply reject them and they will not work.
The image shown above has been told where to be and where to stay. Like text, in that it is told how to look within the stylesheet. An image is shown where to display itself. This is the case within this website however, an image cannot be given a style as easily as text when selecting one from the box. You have to go into the code view and put the image into what designers call “div tags”. They look like this:
<div id=”PictureAlignRight”>***IMAGE GOES HERE***</div>
The line of code above is what is known as HTML code. A div tag calls for a property to be used from a stylesheet. In order to create a div tag around an image, you have to open the div tag...place the image into it...and then close it. As the image is enclosed within the tag it then has to abide by its rules which are set out in the stylesheet under the heading set in the opening tag. In this case “PictureAlignRight”.
The first bit of the tag opens the tag (<div id). It then tells the website to look into the stylesheet for the heading “PictureAlignRight”. This is all the opening tag has to do. You then insert the image inside the div tag. This then tells the website that this image should abide by all the rules set within this heading within the stylesheet. In this case, the PictureAlignRight setting aligns the picture to the right of the page. Therefore the image will stay to the right of the page. In order to end this div tag and keep the image inside it, we need to, what designers call “closing the door”. We have to end the div tag so that nothing gets in and nothing gets out and this image will be the only thing in which we give these properties to. Therefore we close the div tag with this piece of code </div>.
When writing a div tag in code view, Dreamweaver will help you. When you start to create a div tag like this <div id... it will give you options in a small box so that it can help you finish the line of code quicker with least amount of mistakes. It also displays the different styles available within the stylesheet so that you can select the one you want such as if you wish the image to be centred or aligned to the left.
Once the div tag has been opened and you have some code similar to this <div id=”PictureAlignRight”> you then have to insert the image. This can be done by going to the toolbar at the top of the screen, selecting Insert and then clicking on Image. This will then open a window. This window will insert an image and allow you to add some alternate text. It is recommended that some alternate text is added into this box so that the website can be used by people that may be deaf. The text should describe what is in the image. Nothing needs to be added into the long description box. This should then insert the code for the image. If switching to the design view to see the results of the changes you have made the image will now be shown within the site. Of course you are then needed to size the image. This can be done as it is in a word processor using the squares at the side of the image or within the code that has just been added. This is easy to see within the code as it is labelled width and height.
The
In the image above, something which should be done when you can...I have added a caption underneath the image, usually describing the image or what you want to say through the image. In this case a request for information. This can be done by clicking on the image once you have placed it in a div tag a pressing the right cursor key. This will show a cursor just after the image, then click CTRL + RETURN to add a line underneath the image. This will create a line under the image but will keep this line with the image as it will make the line within the images div tag. You can then type what you wish to display. Most image captions, I have set as normal text however underlined. In this case, in the image, the text is normal but in bold. This is done exactly how it is done for the normal text in the page. Select the caption under the image and select the style you wish to give it from the style box at the bottom properties bar.
Once inserting an image, the code simply plucks the image from the file you specified when you inserted it and places it into the page. Should you change where the image is located, the name of the image or the any of the file names associated with it the image will cease to work. Therefore it is recommended that the file and image names are how you want them before the image is made and hosted.
When inserting images into a page, don’t make them too small, however, you may not be able to have them at their original size as they may have been too big so once you have altered their size so that they fit the page you can get the image once clicked to open in its own internet explorer window at its original size. This is easy to do. When the image has been inserted and changed, click on the folder icon next to the link text box. Locate the same image, and double click on the image. This will seem strange as you are simply linking an image to the same image but what it does is open to original sized image in its own window. Should you wish an image to take you to a different website or a different page within the Coxhoe site, the same is done as for some text. The link for the desired website or page should be entered into the white box on the bottom properties bar.
Creating A New Page For New Subject
Using what has been stated in this document should now make you completely able to update the home page. The same techniques can be used with some slight changes added with some new techniques will allow you to create a new subject page from scratch.
To create a new page from scratch, the first thing you need to do is to open a new empty HTML document. This can be easily done by going to file>new>html page as it is done in a word document.
Once the new document has been opened you can then apply the template that has been pre-made to the page. This will give the page its navigation buttons and title image. If you go to the top of the Dreamweaver window and click on Modify>Templates>Apply Template To Page. You can then select the Coxhoe History template from the window. This should then bring you to an empty Coxhoe History web page.
This is honestly the only thing which is new to what I have already explained in this document. Using the other techniques previously explained you can now make a subject page.
When wishing to highlight some text in bold, all the possible font types are shown in the font style selection box on the properties bar as it was when selecting normal text when editing the home page. The same techniques are recommended when making a subject page. All text should be given some sort of style so that in the future if any of these styles need to be changed, no text won’t go unchanged. Images are also inserted in the same way as they as described in the home page section.