I finally found a way to be able to update my homepage in a blog-type manner, without having to create a new div tag, move the old one down, put the new one exactly where the old one was before and making sure all the posts were the same distance apart from each other blah blah blah..
I was surfing through my tumblr* account the other day and found something saying 'embed my blog', giving me a code to be able to embed it.
After finding this out I created a new tumblog (tumblr blog) for my website/artist name BeesonTheBeeson and embedded that blog onto my website in the 'main_image' div. This did not work, however and I quickly realised that the blog would need it's own div tag.
I quickly created one (I can do these pretty quickly now I've had a lot of practise!) and formatted the CSS for it to get it to sit where I wanted. I then embedded the blog into this div tag in the code editor and voila! A new blog on my homepage.
At last! My worries are over and I can now update my website quickly and easily.
The good thing about this is that I wanted to be able to update my website like a blog, so I have basically achieved what I wanted :]
Sunday, 27 November 2011
Meta Tags, Description Text and Other HTML Tags
In a recent lecture the words 'meta tags' and 'metadata' were mentioned. I wasn't entirely sure what this was, so I decided to research about it, and here is what I found out.
Meta tags, or meta elements, are used to give metadata for a specific web page.
They are written in the form <meta ... > and are always placed in the <head> tag
This metadata can be read by browsers, to determine how to display or reload a webpage, search engines to find keywords and by other services.
You will mainly use meta tags to make sure your website is search engine ready when it goes online.
In order to do this, you need to use the following tag:
<meta name="description" content="insert description here" />
Where I have written 'insert description here' is obviously where you write a description of the website. Meta tags generally go in between the head tags (Between <head> and </head>. This is done so that people who find a link to your website on google results they can instantly see whether they have found what they are looking for.
Another way to insert meta tags if you are unsure where meta tags go in the code is to, in the design view of Dreamweaver, go to insert > HTML > Head Tags > descriptionA little text box field pops up and here is where you write a description for your website. This creates a meta tag for you and places it where it needs to go in the code. To create a title meta tag you can just type it in the 'title' box at the top of the design view. In this description tag you can put a lot more detail, from a couple of sentences to a short paragraph, to describe your website better. Below are two pictures that show what the title and description do to a website.
The first bit in the blue writing is the pages title. Which is why this part should be short but descriptive.
Underneath in the black writing we have the meta tag description. This describes the website in more detail, but still without being too long.
Meta tags, or meta elements, are used to give metadata for a specific web page.
They are written in the form <meta ... > and are always placed in the <head> tag
This metadata can be read by browsers, to determine how to display or reload a webpage, search engines to find keywords and by other services.
You will mainly use meta tags to make sure your website is search engine ready when it goes online.
In order to do this, you need to use the following tag:
<meta name="description" content="insert description here" />
Where I have written 'insert description here' is obviously where you write a description of the website. Meta tags generally go in between the head tags (Between <head> and </head>. This is done so that people who find a link to your website on google results they can instantly see whether they have found what they are looking for.
Another way to insert meta tags if you are unsure where meta tags go in the code is to, in the design view of Dreamweaver, go to insert > HTML > Head Tags > descriptionA little text box field pops up and here is where you write a description for your website. This creates a meta tag for you and places it where it needs to go in the code. To create a title meta tag you can just type it in the 'title' box at the top of the design view. In this description tag you can put a lot more detail, from a couple of sentences to a short paragraph, to describe your website better. Below are two pictures that show what the title and description do to a website.
Underneath in the black writing we have the meta tag description. This describes the website in more detail, but still without being too long.
Friday, 25 November 2011
Gradient
I decided while in the last lecture that having a plain black background was a bit boring, so I decided on having a gradient, made in paint, to spice up the background very subtly.
I straight away decided to have a black fading into the blue that surrounds most aspects of my pages, and I designed this gradient in pain:
Normally you would draw a line in one of the colours from the top-left corner to the bottom-right corner. I did try this at first but the blue lasted a little bit too long for my liking, so I thought that by moving the line further to the top-right, it would decrease the amount of blue in the gradient. Much to my surprise, it worked! You can see the gradient in action by visiting my website. Unless I change it, of course, in which case I shall mention it in a later post.
I straight away decided to have a black fading into the blue that surrounds most aspects of my pages, and I designed this gradient in pain:
Normally you would draw a line in one of the colours from the top-left corner to the bottom-right corner. I did try this at first but the blue lasted a little bit too long for my liking, so I thought that by moving the line further to the top-right, it would decrease the amount of blue in the gradient. Much to my surprise, it worked! You can see the gradient in action by visiting my website. Unless I change it, of course, in which case I shall mention it in a later post.
Sunday, 20 November 2011
A big change!
I was thinking about my very first site map of my website, with the index page including the flashing 'click start' thing... After looking at this website here, which is a website for the band Enter Shikari, I noticed that their index page consists of the banner and links to pre-order their new album (as of 21st November 2011).
So by merging my idea and this idea together, I decided to make a main page to start with that will serve as a sort of portal page for the rest of my website. Since I don't have any albums to advertise (yet) I thought I should make a page with links to the normal home page, about me page and the rest.
Although it may seem pretty pointless, it will serve me better in the future when I have really important things to share with my audience. At the moment, it just links people to the rest of my website in an interesting way, however if I did have an album coming out or a gig coming up or something similar, I could change this page only to show this, keeping the rest of my website intact.
Below is the first idea that I had:
I quite liked this at first glance, and thought it worked well with the rest of my website. However, with the line in the middle, it looks like the page is separated out and because the links don't need to be separated I thought I should move it to the bottom so all the links can be together.
Below is the second version of this page:
I liked this one better everything was a lot more formally laid out. I also moved the 'contact' link to the bottom left of the page as a hyperlink instead of having it with the others. This is just to follow the conventions that other websites seem to follow.
So by merging my idea and this idea together, I decided to make a main page to start with that will serve as a sort of portal page for the rest of my website. Since I don't have any albums to advertise (yet) I thought I should make a page with links to the normal home page, about me page and the rest.
Although it may seem pretty pointless, it will serve me better in the future when I have really important things to share with my audience. At the moment, it just links people to the rest of my website in an interesting way, however if I did have an album coming out or a gig coming up or something similar, I could change this page only to show this, keeping the rest of my website intact.
Below is the first idea that I had:
I quite liked this at first glance, and thought it worked well with the rest of my website. However, with the line in the middle, it looks like the page is separated out and because the links don't need to be separated I thought I should move it to the bottom so all the links can be together.
Below is the second version of this page:
I liked this one better everything was a lot more formally laid out. I also moved the 'contact' link to the bottom left of the page as a hyperlink instead of having it with the others. This is just to follow the conventions that other websites seem to follow.
Tuesday, 15 November 2011
Colour Schemes
After a lecture about colour schemes, I thought I thought think about them for my website.
A good place to start would be with the specialised colour scheme website by Adobe, called Kuler.
http://kuler.adobe.com/
Kuler is good as it will allow you pick a colour scheme that other people have made, look at it and eventually let you copy the hex values (basically a colours' identity number).
The only problem with this, however, is that I had already made my banner by now, and I didn't want to go changing colours from something that I liked.
This brings me on nicely to another cool feature in Kuler, where you can upload a picture and it will work a colour scheme out for you. This then lets you change the shades of colours using some sort of mathematics to a brighter or darker feel, for example.
Clicking here should send you to the colour scheme that I created by uploading the PNG image of my banner.
Below is also a tutorial video on how to use Kuler and the steps I took to create my colour scheme:
A good place to start would be with the specialised colour scheme website by Adobe, called Kuler.
http://kuler.adobe.com/
Kuler is good as it will allow you pick a colour scheme that other people have made, look at it and eventually let you copy the hex values (basically a colours' identity number).
The only problem with this, however, is that I had already made my banner by now, and I didn't want to go changing colours from something that I liked.
This brings me on nicely to another cool feature in Kuler, where you can upload a picture and it will work a colour scheme out for you. This then lets you change the shades of colours using some sort of mathematics to a brighter or darker feel, for example.
Clicking here should send you to the colour scheme that I created by uploading the PNG image of my banner.
Below is also a tutorial video on how to use Kuler and the steps I took to create my colour scheme:
Monday, 14 November 2011
Facebook Like Box
After making a page for my artist name 'BeesonTheBeeson', I decided that as an innovative way to guide people to my facebook page from my website would be to add a 'like box' to my website.
From the facebook page of my group while logged in I had the option to choose the colour of the box, colour of the outline and other attributes. After choosing how I wanted the box to look, I got the code for it and added it to my code in Dreamweaver.
This like box will be present on every page of my website.
From the facebook page of my group while logged in I had the option to choose the colour of the box, colour of the outline and other attributes. After choosing how I wanted the box to look, I got the code for it and added it to my code in Dreamweaver.
This like box will be present on every page of my website.
Friday, 11 November 2011
Changes to the Banner and Image Mapping!
To link people to my other websites, such as YouTube or Soundcloud, I planned to have links to them in my contact, music and videos pages. However I thought that a more intuitive way of linking them, using the 'F' layout, would be to place buttons for these websites onto my banner.
To start with, I didn't know how to do this but after a bit of research using my favourite tool 'Google', I found something called an 'image map'.
This is a way of drawing a shape around a part of an image in Dreamweaver and linking that map of the image to a certain place. Below is an image of my new banner with a YouTube and Soundcloud image on them:
As you can see I now have a YouTube and Soundcloud logo at the bottom right of my banner. I also added a handwritten font saying 'Find me here!', pointing to these logos with a hand-drawn arrow shape. This is just to give my website a hand-made kind of feel for my viewers.
Image Maps!
Using image maps I dragged a square/rectangle box around my YouTube and Soundcloud logos to link to my pages on those websites. I also used the custom shape image map and drew around the words 'BeesonTheBeeson', as that is my logo, and linked it back to the homepage. This way, my logo will link back to the homepage from every other page.
To start with, I didn't know how to do this but after a bit of research using my favourite tool 'Google', I found something called an 'image map'.
This is a way of drawing a shape around a part of an image in Dreamweaver and linking that map of the image to a certain place. Below is an image of my new banner with a YouTube and Soundcloud image on them:
As you can see I now have a YouTube and Soundcloud logo at the bottom right of my banner. I also added a handwritten font saying 'Find me here!', pointing to these logos with a hand-drawn arrow shape. This is just to give my website a hand-made kind of feel for my viewers.
Image Maps!
Using image maps I dragged a square/rectangle box around my YouTube and Soundcloud logos to link to my pages on those websites. I also used the custom shape image map and drew around the words 'BeesonTheBeeson', as that is my logo, and linked it back to the homepage. This way, my logo will link back to the homepage from every other page.
Target Audience
Although it's a bit late I decided to make a post about target audiences for my website. I did have my target audience in my head, but never logged it on my blog.
Ideally I want fans of the music that I make to be my major target audience, between the ages of around 13-30. But obviously I'm not going to complain if I have fans outside of that range.
Similarly, other musicians will be my target audience, so if my music gets big one day I can do collaborations with bigger musicians to get my name out there. These two kinds of audiences are factors in the design of my website, and how I want my image to come across to other people.
In my eyes, I want my website to be more based on my music artists side of things, as opposed to the professional audio engineering. That way, if my music gets big I have a website to point my audience to, but it can also serve the purpose of showing a potential employer my work without it looking unprofessional.
Ideally I want fans of the music that I make to be my major target audience, between the ages of around 13-30. But obviously I'm not going to complain if I have fans outside of that range.
Similarly, other musicians will be my target audience, so if my music gets big one day I can do collaborations with bigger musicians to get my name out there. These two kinds of audiences are factors in the design of my website, and how I want my image to come across to other people.
In my eyes, I want my website to be more based on my music artists side of things, as opposed to the professional audio engineering. That way, if my music gets big I have a website to point my audience to, but it can also serve the purpose of showing a potential employer my work without it looking unprofessional.
Thursday, 10 November 2011
Problems with my page
After adding the buttons in by using div tags, the main image seemed to disappear when viewing on the internet. For help I went to my lecturer to find out how to fix this problem. First of all, we noticed that the div container for my banner was not closed. Anoher thing that was mentioned was the z-index of the image.
The z-index is how far forward or backward a picture or other element is on a web page. Similar to the arrangement tool in word.
When I got home I tried out these two methods. Closing the div tag didn't do anything, but the z-index did make the image reappear. Although this method worked, using the new navigational bar mentioned in an earlier post stopped the problem anyway, so I shall carry on working with that.
The reason for this post is to show that a couple of small things can make a big difference. The z-index value of an object can be very important on a web page, and although it didn't work it is always good practise to make sure you close every div tag.
The z-index is how far forward or backward a picture or other element is on a web page. Similar to the arrangement tool in word.
When I got home I tried out these two methods. Closing the div tag didn't do anything, but the z-index did make the image reappear. Although this method worked, using the new navigational bar mentioned in an earlier post stopped the problem anyway, so I shall carry on working with that.
The reason for this post is to show that a couple of small things can make a big difference. The z-index value of an object can be very important on a web page, and although it didn't work it is always good practise to make sure you close every div tag.
Navigation (cont.)
Inside Dreamweaver there is a navigational bar tool. I used this to insert my newly created buttons, seen below. The first image is the 'up image', the second is the 'over image' and the third is used as an 'over image' when the corresponding page is being viewed. For example, when the user is on the 'home' page, the home button will have a constant grey background. When the buttons are hovered over with the cursor, the background turns grey, however when on the homepage and the background is constantly grey, this third button is used as an over image. A screencast video is underneath these three images to audibly explain the button system:
 |
| Home Up |
 |
| Home Over |
 |
| Home 3 |
Navigation
I now needed to think about how the buttons would look.
To start off with I used Adobe Fireworks to create two GIF images to act as inserted rollover buttons in Dreamweaver. Below is the first design I had:
<-- To be used as an 'up image', when the button is in its normal state.
To insert these buttons I created separate 'div' tags for each button, and inserted them as rollover images in Dreamweaver.
The only problem I had with these buttons was the fact that the font inside them didn't really fit with the page. That and the fact that they seemed to ruin the layout of the page, making the main image disappear.
My next goal would be to make the buttons more interesting and find a new way of making them work.
To start off with I used Adobe Fireworks to create two GIF images to act as inserted rollover buttons in Dreamweaver. Below is the first design I had:
To be used when the cursor is over the button. -->
To insert these buttons I created separate 'div' tags for each button, and inserted them as rollover images in Dreamweaver.
The only problem I had with these buttons was the fact that the font inside them didn't really fit with the page. That and the fact that they seemed to ruin the layout of the page, making the main image disappear.
My next goal would be to make the buttons more interesting and find a new way of making them work.
Main Image
I needed to get a main image as the background for my website. I thought that with the way my banner looked, I should go with a ghostly kind of feel.
I found a royalty free image from the internet that had a smoky background and I edited the picture to make it seem more eerie:
This is the final image. I am quite happy with this: it's simple and doesn't distract the viewer from the actual content of the page.
Now for a navigation element!
I found a royalty free image from the internet that had a smoky background and I edited the picture to make it seem more eerie:
This is the final image. I am quite happy with this: it's simple and doesn't distract the viewer from the actual content of the page.
Now for a navigation element!
Getting Rid of Ideas
After thinking more about how I want the website to look, I decided to scrap the idea of the video game-style 'click start' idea. So from the earlier post with the spider diagram showing a site map, I can now disregard the first index page.
Friday, 4 November 2011
Website Banner
I finished a design for the banner of my website, which will be shown at the top of all my pages. Below is what I have:
This is something I created in Photoshop, using a variety of tools. The next post will be a screencasted video showing roughly how I made the banner.
I think this is good, and I like it. I don't think I will change the design of the banner dramatically anymore, although I may change smaller things when I need to change them.
This is something I created in Photoshop, using a variety of tools. The next post will be a screencasted video showing roughly how I made the banner.
I think this is good, and I like it. I don't think I will change the design of the banner dramatically anymore, although I may change smaller things when I need to change them.
Tuesday, 1 November 2011
Layout of a Website
Before I start thinking in more detail about layouts for my web page I need to think about a certain aspect of the viewers perspective: where do people look on a web page?
Jakob Nielsen of www.useit.com carried out a 232 person study, which can be found here, that tracked peoples' eye movements across a webpage by bouncing harmless lasers off of their eyes. A pattern occurred between all of these people that created a kind of 'F' shape on the page. There are pictures to illustrate this on the website.
Therefore, when designing my web pages I need to think of this 'F' model and put the most important things within this shape.
Jakob Nielsen of www.useit.com carried out a 232 person study, which can be found here, that tracked peoples' eye movements across a webpage by bouncing harmless lasers off of their eyes. A pattern occurred between all of these people that created a kind of 'F' shape on the page. There are pictures to illustrate this on the website.
Therefore, when designing my web pages I need to think of this 'F' model and put the most important things within this shape.
Subscribe to:
Posts (Atom)