The problem with the above site is that is has no option for sites that use alot of grey. So I used a different site for mine. Again this came from looking at Holly’s blog. This site is called Kuler and can be found at: http://kuler.adobe.com/#themes/mostpopular?time=30  On this site various people post examples of colour schemes that they like, or have used. Of course it is important to be aware that some of these people may have no idea what they are doing. The schemes are fully available for people to rate and comment on and its well worth having a look around to find anything you are interested in. Once you have found what you are looking for it is simple to get the hex codes for the numbers to use in dreamweaver to add the colours to your site. Unfortunately it doesn’t have the example website that you can view to see the possible finished result, so you’ll just have to use your imagination and hope for the best. This is the colour scheme that I decided to go with. It has the greys that I was after, with a bit of bright spot colour to really bring it out.

Then interestingly as I was browsing around on the internet one day I just happened to come across another website which immediately made me think of mine. As you can see they have used a very similar style of font for the main title. I just thought it was kind of cool to find that someone else is doing the same kind of thing (although this online newspaper is not about design) as I am doing with my one. Although the two sites do look very different. I do like how the ‘New York Syndicate’ site has used that red for a bit of spot colour to help it stand out a bit. I think that my site is a bit grey and needs a bit of extra colour.

While a lot of footers are just a bunch of text and links at the bottom of the page, designed to be functional, but not to draw your attention away from everything else, I like this one because it is exactly the opposite. Its just as big and bold as most Headers, its got a great eye catching graphic and all the essential links and information is contained around it. It is interesting to note with this one that they have a contact form you can fill in, this is the first time I’ve seen that in a Footer before.

If you read my previous post about headers then you should be able to work out why I like this next footer so much. It has that same ripped cardboard/paper feel that I loved so much. I just love the texture that they’ve captured with this image. In fact I like the look of it so much that I really don’t notice that there really is none of the information that you would usually expect from a footer. So in terms of design its fantastic, but I’m not so sure it does its job properly. The designer may have wanted to do things different and have all those additional links elsewhere, but they still need to consider the expectations of the viewer and where they expect to find things. Also its a shame they couldn’t also bring in some of that lovely blue the the Header in the previous post used. Just a splash of extra colour would have brightened up those earthy browns beautifully.

Since I’ve been looking at some of the best I decided to look at a very basic one. Funnily enough this one came from a blog that was talking about web design disasters. While I wouldn’t exactly call this a disaster, its not inspiring in the least. It does however have all of the relevant/expected links and information in the one place in a clear, easy to see manner. So it does the job and whilst it doesn’t stand out in a fantastic display of design, it also doesn’t stand out as terrible either.

This one uses a large image to dominate the page. The theme is obvious, the designer works at their workstation which is depicted in a top down view, complete with coffee cup. Clicking on various items will load different pages. I had a look at these and found them to be very limited. For the amount of clutter on the desk I was expecting alot more things to be able to select. Apparently this style was quite popular for awhile, but has now become outdated and cliche. Still I think its a lovely image and quite nicely done. As well as having the graphical navigation of clicking on various objects also included is a text based menu system. This is very important as many people will not bother, or be interesting in ‘playing’ with the navigation system and prefer direct, easy to understand words. Interesting to note there is no search bar in the navigation menu. Although, being a design firm there possibly isn’t a lot of content to need a search bar.

Now this one I absolutely love, this is my favourite by far. The ripped cardboard look is very nice, they even have a small cardboard square to serve as a backdrop for the facebook icon. This icon of course being an important part of a website, being able to link it to other popular sites raises its profile considerably. But its the menu buttons that I really like in this. They are coming out from under the bottom of the cardboard strip, and instead of just in a straight line like most site would do they are in a curve shape which I think is just brilliant. The textured blue against the textured cardboard provides a nice contrast. The cardboard strip is big enough to have it stand out, but the blue of the menus contrasting against it help them to be instantly visible as well. As you can also see from this image, hovering over the menu tabs will provide a drop down menu with more options to choose from. Since this is in a different language I can’t really comment on the content too much, but again I notice there is no search bar. I should note at this point the the general practice is to have the search bar positioned at the top right of the web page.

Another header dominated by a large image. Although you can’t see the rest of the site the colour palette follows closely that of this image. The interesting thing about this header is that there is virtually no navigation whatsoever in it. There is however a search bar, this time on the top left of the header. All the navigation for this site is included down the left hand side. While not ground breaking in terms of design using a large image such as this is still a valid and effective way of presenting your website.

So first up was the website for Amcal pharmacies. I chose this one to look at first because it is perhaps the most basic of the sites that we looked at and as such is easy to break down to sections. Not much to it really, you have a large Header image, menus, body text, links, a disclaimer and the footer. A nice addition to this one that doesn’t always show up is the print page button. Often sites have graphics and ads that you really don’t care about printing, but using this button it will give you a printed page with just the body text information saving you ink, paper and time. But unfortunately thats about the best thing about this website. The design looks old, its just one square in the middle of the screen so was probably designed awhile ago to accommodate people with smaller monitors with lower resolutions. Also the square shape reminds me of websites created solely in Flash but in this case without all the fancy bells and whistles. However the information you need is there, there is a handy site map to help you find pages if you are lost, one thing missing though is a search bar, these are a very handy tool and most websites should seriously consider including one.

Ok now things get a bit more complicated. Instead of going for a large Header image like Amcal, Methven have used a basic Header with the company name and some menu options. Then they decided to go large with a feature image, this really dominates the page and draws the eye. They then have a few thumbnails which give you some options to go directly to the current items which they think customers would be interested in. Then at the bottom they have a fairly basic footer. They have an ‘About us’ menu in the Header and Footer which may contain contact information, or perhaps the contact information comes under ‘Support’? This is really the only criticism I have for this site as its a bit unclear where to go to find their contact info, also there is no site map, but thats only an issue for those people who prefer to navigate by looking at a large list of text. Unlike the Amcal site Methven have included a search option. Also this site is in a widescreen format which will look better on most, if not all modern computer monitors.

Ok now this one is a bit busy, so I’m not going to go over the things covered in the previous site. One thing to consider however is that there doesn’t seem to be any ‘About Us’ or ‘Contact’ menu options. They have store finder, which may count, but again this is unclear. I’ll give them the benefit of the doubt however and assume that those options are in the footer which we can’t see in this picture. The main thing of note in this is that it has the menu bar running across the screen just below the Header, then it has another menu bar running down the left hand side of the screen. This is quite common, but the difference here is just how much is in each menu. Both menus are bursting with options. In the case of the menu bar they’ve had to include a ‘See All’ option because they just couldn’t fit it all in. And to make matters worse the options in the menu bar are the same options include in the side menu. Why have they duplicated their menu? Perhaps they like to make things look cluttered and confusing. I think they would have been better without the side menu. Then they could have broken the menu bar into a very few general areas, and provide drop down menus under those with the specifics. This would clean things up nicely. And leave more room for them to cram in more thumbnails of their specials.

You may have noticed that I have drawn boxes around each of the page items. This is because we were also looking at how everything fits together on the page. Basically every component of the page is contained in a box and these are all fitted together to make up the website. As you can see each box lines up with the other surrounding box either in a column or a row. This helps to give the website a more structured and organized look to it. It also helps to make things much easier for the user to follow and understand. I’ll look more into this at a later date however, so keep checking in to find out more.

First step is to set up your filing system. Create folders to store all your working files, images, videos etc that will be used for reference, but not included as such in the actual site itself. Then below that set up the remaining folders inside a single folder typically named something like, website. These folders will contain the files that are required to load the website itself.

Now onto Dreamweaver. Select a new file and check to make sure you are in the HTML file code view. The parts of the code are as follows:

<head> this is the code to signify the  beginning of the head tag.  </head> signifies the end of the code. Everything in between these 2 brackets are considered to be a part of the head portion of the website. From now on when explaining code the </> closing part of the code will be implied…… Never Forget It Though!!

<title> This is the title of your site which will show up on the tab, and title bar in your browser. Also it will be displayed as the name of your site when searched for in search engines such as Google. Just type what you want between the beginning and end codes and thats the name of your site.

<body> This section contains the actual content of your site.

<h1> h = heading, and 1 = importance of heading. Heading range from 1 being the biggest and boldest to about 6, giving you a good range of sizes for your headings.

<p> paragraph. Anything typed inside this code will be placed onto your site as a body of text.

<img src=”browse your computer for image location“/> This is used to insert an image

<a href=”browse for HTML page“>Link text</a> Ok, this one is a bit more complicated. Its used for placing a link into your site. The a = anchor, and href = hyperlink reference. So you select the webpage you want to link to, then in the link text section type what you want the link to actually say. If you want to use an image as a link then you can place the image command inside this one.

<link href=“browse for CSS location” rel=”stylesheet” type=”text/css”/>  This must be typed into the header part of your page and it links a CSS sheet to this page. Remember to use your code prompts as you type in code to make sure you are getting it correct.

The CSS that you link is used to design the look of the page. You use it to move your images, text, video, object etc around the page. You can also adjust fonts, colours, sizes etc. Without a CSS applied your content will just scroll straight down the screen with no formating, and in the default font. When you edit the page using the CSS, for example the paragraph then it will apply your changes to every paragraph. So if you want to customize things further you can give sections of your site names which can then be referenced from inside your CSS page to apply those changes only to that specific section.

<p id=”name of paragraph“> This is used at the opening of your paragraph tag to name this particular paragraph to be referenced from your CSS.

<h1 class=”name of style“> This is used to name multiple paragraphs/headings to be referenced as a group.

<div> </div> These tags are used to set up a section of your HTML to be referenced. The opening tag is placed at the beginning of the section you wish to set apart and the closing is placed at the end.

For more information on how to reference and adjust the styles within these tags through your CSS then please refer to Week 3: Part 2 CSS.

<!–> use this tag to write comments into you HTML code. These will only be visible in the code and will not show up on screen. They are useful to help you if you want to change things later to quickly find your way around the code to what you need to find. They also help others who may need to make changes to understand what you were doing at the time.

Oh and by the way on a side note, did you notice the link above to my CSS page? WordPress wouldn’t allow me to put a link into my Blog page, so I changed to the HTML view of this blog and entered the link to HTML page code detailed above, and there you have it.

REMEMBER: It will only work if you actually link it to your HTML page.

Ok, now the top of your page should say something like: charset “utf-8″;    Utf-8 is the english characterset, so basically it is just saying that you are using English characters. Yay!

To effect the way your paragraphs look you simply use the p{ opener and then } to close. All commands between the brackets will effect your paragraphs. eg.

p{

color:#F6C;

font-family:”comic sans MS”, cursive;

font-size:12px;

}

The first command sets the colour of the text, now don’t panic you don’t need to learn all the Hex codes for the colours, the program lets you pick from a colour wheel…. you do however have to spell colour wrong.

Next is where you pick the font-family. They call it a font family because the program allows you to select a group of fonts to use, remember that the fonts on your computer may not be on the viewers computer, so it goes to the first font on your list and searches their computer for it, if it doesn’t find it, then it moves on to the next font and so on. The ‘cursive’ at the end of the command tells the program that if the desired font is not available then it should choose a suitable cursive font. Common fonts include things like, Verdana, Courier, or Times New Roman. It is not recommended for design to use Comic Sans as I have in the above example.

The final command is quite self explanatory, this sets the size of the font on screen.

h1{} tells the computer that we are going to style the largest, boldest heading. This can of course be changed to h2, h3 and so on. These are called HTML selectors since they select codes that are already set up in basic HTML coding. You can however set up your own selectors.

ID selectors:  If in my HTML file I used the <p id=”"> command to name a paragraph then I can reference it in the CSS simply by typing: #name of paragraph. Eg. #my story. This will then apply my style selections only to that paragraph as opposed to all paragraphs as it usually would.

Div selectors: In your HTML file you can use the <div> </div> command to set up a section of you file to be referenced. To apply style changes to that section you simply tag it by using the code: div. Eg.

div{

width:650px’

}

The width command tells the program to end the lines of the paragraph at 650 pixels.

To type comments in CSS simply open and close with /*      and      */  everything between comes up as a comment and has no effect on the website whatsoever. It does however provide valuable aides for anyone browsing through your code.

You can also use the CSS to move your images around the screen. You can set the start alignment by using the following code:

img{

float:right;

}

This means that all images in your HTML file will be moved to the right side of the screen. Then of course you can fine tune their exact placement by adding the following between the brackets:

position:relative;

top:-100px;

The relative position means it takes its bearings from the top left corner of the images current position. You could use the term absolute which would adjust its position in relation to the top left corner of the page.

The next line tells the program that you want to move the image from the top -100 pixels. Basically opposite rules here, to move it up you can either type: top:-100px; or bottom:100px. Either way this will move the image 100 pixels upwards. Of course the left and right commands work as well.

Facebook

Twitter

Steam (Online gaming community)

Linkedin

Youtube

In total I know have 6 links connected to my blog (I also added a link in my wife’s Facebook account). This should help somewhat to increasing my web presence.

I mentioned in my last post difficulties I’ve been having with the style of my Blog page. I’ve had to have another look at the theme I have been using as I didn’t have enough flexibility with the last theme to achieve the desired result. So I searched for a theme that was already a bit closer to what I wanted. This time I already had my colours and background/banner image loaded in so when I previewed themes it showed them with those colours and background included. This helped me tremendously as previously I would be distracted by the nice looking banners and how it fit together and was having trouble picturing what it would look like after I styled it. This time I was quickly able to come up with a number of possibilities that included the themes: Elegant Grunge, Andreas09, Emire, and Motion.

I believe this works for me alot better then the ‘Spectrum’ theme, I think I was distracted by the lovely banner image which I wasn’t going to be using anyway. So the problem with the title is now gone this shows up much better with the colours I have chosen which suits my style and personality much better. The Blog title has a little icon/logo next to it which would be perfect for me to include my logo. I’ve since found out that I can edit the CSS to change this for free, but any changes made will only be visible by me when i’m logged in. If I want others to be able to see it then I need to pay for it. If I were to do this I would also look at changing the font and size of the title text. Although it works ok here it still has to compete with all the colour going on behind it, so a stronger font would help it stand out a bit more.

This theme is titled Spectrum

This theme is titled Greyzed

Greyzed I really liked the look of, but it is very stylized and i’m not so sure that i could make that style work for me, or even if I really would want to. Spectrum really stood out to me so I decided to give it a go. I’m not so sure if its the fact that its so colourful or not, but I instantly liked it so decided to give it a go. I particularly like the background image how it fades behind the main screen. I like the idea of a banner image, but I think this works as a banner image much better. So I decided to pick an image that really stands out and also shows off some of what I do. I instantly knew just the image. It is a photo that I (or my wife if you believe her stories) took at night time at Pukekura park while on a boat in the middle of the lake.

So I put the picture into the background and had it fading out at the edges. An example of this picture applied to the Spectrum theme is at the bottom of this page. The only problem was the title text. You cannot see it on such a dark background. The obvious solution would be to change the colour of the text, but try as I might I could not find out how to do so. (later I found that in order to do so you need to purchase the full version) So I created this highlight box type thing which lightens the background significantly so the text can be read. As you can see in this picture I hadn’t gotten it lined up correctly at this stage. Another problem I noticed was that if you resized the window the background image would move and the box would also move with it, so the text was no longer ‘highlighted’. Not sure what to do about it at this stage I decided to ‘shelve’ this problem and move on.

The next problem I came across was a problem with the theme itself, whilst I do like the style of the titles, for me its just to big and bright and overwhelming. The green, coupled with the sheer size of the title were just too much. So once again I delved into the theme options to see if i could reduce the size and change the colour. On the same note I also found the size of the tabs along the side distracting as well. More and more I was started to get frustrated with this theme as I soon discovered that again I had no control over these details.