Creating Your Own Simple But Effective Site To be resumed soon

[.:Brian:. 0]

Wow this is a great tutorial so far....The one thing though...is the title you have says that you are creating a simple but effective site....and to me that would imply a very simple site, not something using flash, and all that kind of stuff....And I can't use it because I don't have the software to, but anyhow, it is very well written.One thing is that the images aren't showing up?Keep at the tutorial, as it looks like you have a long way to go....actually by the amount of stuff you have there, it looks like you could practically write a book! Good job, as I am sure it'll be used by tons of people.

[Downlinker 0]

How long hawe you been writing this tutorials? Annyway, it's a great tutorial, but the images doesen't show!

[Ronel 0]

Woh! I may even think its more of a story than tutorial!But still, good tutorial, for me whose starting on improving this site of mine and a future site in this server!umm, say does anyone know where to get "Fireworks" at least demo, or some kind of alternative for that?

[Ronel 0]

How long hawe you been writing this tutorials? Annyway, it's a great tutorial, but the images doesen't show!

also...

Yeah I can't seem to get the images to load up either ( FireFox 2.0.0.1 ).
It seems to just say IPB Image in text, is this a problem with the post or is this happening across the board? ( Have been a bit inactive for awhile so I'm not necessarily up to speed ).

I only flicked through to get a look at the images to see what kind of results were yielded so I can't comment on the materila yet.

Hey me too

i don't think that's really funny though...
Edited August 13, 2007 by Ronel (see edit history)

[LOL1405241550 0]

WOOOOW.. MAN THANKS I WILL TRY TO FOLLOW THIS TUTORIAL IN THE CREATION TO MY WEB....IT'S LONG.. BUT.... EFFECTIVETKSBYE ;)

[jth 0]

This is a flash tutorial you can add to improve the way a website looks.

 

Unit 1: Interface

Lesson 1: Toolbar - Part 1

Lesson 2: Toolbar - Part 2

Lesson 3: Menu bar

Lesson 4: Timeline

Lesson 5: Properties bar

Lesson 6: Side bar

 

Introduction: The first step is to download Macromedia Flash from the adobe website or another. This tutorial is based on Macromedia Flash MX 2004 Professional.

 

Lesson 1: Toolbar - Part 1

 

 

Number 1 is the toolbar. Flash contains 19 tools. They are as follows. (From left to right on toolbar).

 

Arrow: Purpose is selection. How to use: Click on arrow or press the key "v" and then select object. (There maybe some exceptions which will be discussed later.)

Subarrow: Purpose is to edit specific points of a shape. How to use: Click on icon (I can't remember the shortcut key and do not have flash on this computer but when you hover the mouse over the icon it will show you.) Then click on shape and and green points will appear for manual transformation.

Line: Purpose is to draw lines. How to use: Click on icon. Click in workspace (#8) and then drag mouse for size. Lasso: Purpose is for manual selection. How to use: Rather than selecting a whole object the rope selection can be used to select what ever part of an object or multiple objects you wish. Click on icon. Drag mouse over part of object(s) you would like to select.

Ink Bottle: Purpose is to modify ink strokes. How to use: Click on icon. Select object and drag mouse.

Text tool: Purpose is to write text (it will be discussed in more more detail later). How to use: Click on icon or press key "T". Drag

cursor in workspace and begin typing.

Circle tool: Purpose is to draw a circular shape. How to use: Click on icon. Drag cursor in workspace to desired size.

Rectangle tool: Purpose is to draw a rectangular shape. How to use: Click on icon (I believe the shortcut key is "R" but I may be

wrong.) Drag cursor in workspace to desired size.

Pencil tool: Purpose is to draw freely like a pencil. How to use: Click on icon. Draw with cursor in workspace for desired image.

Pen tool: I don't really know a lot about the pen tool but I would assume it is similar to the pencil. P.S. Flash is not a image

developing software but animation for the web. It creates images with vectors which do not show much detail but can

be blown up without looking pixelated.

 

End of Part 1. The rest of the tutorial will be continued later.

[Feelay 0]

Very Good Tutorial ^_^Very Easy to understand. But I only have one question.. How long time did it take to wirte this ;)I am sure, it took atleast 24 Hours Am I right =? And I think you are going to make more steps, or =?But as I said, very good tutorial.There is only one "leech".. You have 2 "Design part one".

Edited January 23, 2008 by Feelay (see edit history)

[iGuest 3]

Nice but i can not see the images all it says is "IPB Post" please fix the images i would love to see them -Joshua

[Miles 0]

As said by halo3fanboy, all the images are broken, not surprising considering this tutorial ahs been here for a while. If possible, can you reupload them? I looked through the text and it seems a very good tutorial.

[iGuest 3]

IntroductionIn recent times, the push for simple but effective web sites has increased. You don’t necessarily need to know how to create a stunning Flash-full site to get the visitors, and many would prefer you not to anyway. There are many ways to creating that simple site, from delving into hardcore CSS to using tables and invalid HTML. And of course, it is entirely up to you, but just remember one thing - browsers are being redeveloped all of the time to keep up with cross-platform compatibility and out-do each other. The display of tables may be more accurate cross-browsers now, but wait until that faithful day when tables are longer supported and half of your visitors will be looking at a shabby mess of boxes splattered with dollops of colour. Is that what you really want? No. I didn’t think so. To combat the problem of design versus compatibility, you need to make sure that you think on two levels when creating you plans.The first level is to think about the catchy aspect of design. You need to think will this design catch my visitor’s eye, and not blind them? Don’t just make one or two plans, make many of them, then take the best parts of each and adapt them to fit in with each other. The colour scheme then follows.Then there is the second thing to think of. How will you make sure that it works? Are you going to use invalid tables and rely hopelessly that all your visitors use Internet Explorer? Or will you use Mozilla compatible CSS only and have it shown as a mess in IE? It is very annoying, but like most things, until companies design their software around the industry specifics, then problems will always arise for the end users. So that is where cross-compatibility comes in.To overcome the problems laid down to us, we need to design and develop sites that are eye-catchy and functional. So, what does this have to do with KISS/UKISS (Keep It Simple Stupid/Ultra Keep It Simple Stupid)? Well, from personal experience, over-complicating matters always leads to invalid table use. Using a div-conscience approach to design allows the process of developing your work a heck of a lot easier. The transition from clutter to organised space is hard, but with constant attempts, you will be able to come up with your own valid UKISS site.DesignDo not fear I am here to help you through both design and development. I wouldn’t just throw in the information and not help you get through the deep end. In this following section, I will be taking you through the basics.Macromedia Fireworks (MX 2004 or above recommended)Plenty of fluid and fruitPatienceBrainFurther resources will be provided throughoutPlease be aware, that you do not need a very good computer to run Fireworks. Before I upgraded my computer for the third time, it was running on 128MB RAM, 333MHz Processor. With RAM DEF XT (Google term search it), it kept my RAM at a healthy level to work with. I suggest you get it. Now my computer is at 256MB RAM, it can handle a bit more.From here on, it is going to be very image heavy, so don’t say I didn’t warn you. Please note if the images do not show, then it is not my problem – literally. The servers that my images are at may go down or do anything strange thing.Step 1 – Starting Fireworks and creating your canvasFirst of all, if you do not have Macromedia Fireworks, then I suggest you download it from the Macromedia home page. You can also buy it from all good software stores. If you are going to be using software other than Fireworks, then I am afraid I can not support you. I have generally no experience in any other graphics program.Once you have downloaded and installed Fireworks, then we are ready to move onto opening and setting up your work space. The work space is where all of the panels are (the Tools, Layers, etc). When you fire up Fireworks it should look something like the below.Now, along the Open a Recent Item column, there is a list of file names. This only appears when you have opened or created and saved a file in Fireworks. At the moment, if you have not used Fireworks before, it should be blank.Click on the Create New > Fireworks File to start a new project. Once you do that, a new box will appear.As you can see, there is a few options for you to control when setting up your new document. Firstly, note the Width and Height. They are displayed as pixels (in the drop down boxes). You can change these to cm, but it is much more accurate and easier to use pixels (px) when designing web pages or any other related graphics.The mock design we will be doing is a personal page. This means relatively nothing, but as you think more in depth about it, you start to wonder one thing that is in relation to this part. What size of canvas should I make? Well, a rule I like to keep is that you design everything on a canvas size of 750px wide and 800px high. Once we get to laying it out, then you will understand why this is.So, for those who haven’t quite grasped it, put 750 into the Width box and 800 into the Height box. Resolution for web graphics is best at 72px/inch. Inches are an old unit, but if you wanted to use centimetres, then it would be 28.35px/cm. If you are creating images specifically for high-resolution gaming and model work, then your resolution needs to be at least 200px/inch, for the detail.Canvas colour is something that is entirely up to you. I personally prefer the default setting of White, but you may have it as transparent or any other colour. I use white as it helps me design on an easy surface. Dark text on a Light background is always easier to read, and also helps to prevent me from having headaches or migraines.When you have done with this, select Ok.Hopefully, your new document should look similar the one above. If you have a different panel layout or canvas colour, then don’t worry, it’s just my personal profile settings. If it looks completely different, then retrace the above.Throughout this extensive tutorial, I suggest you save at every step, that way you’re not going to loose anything major if your computer crashes or you have a power-cut. I also suggest that you take a five minute break after every two steps, that way your eyes and muscles get a break from the strenuous reading and keyboard/mouse work.Now that we have the fundamental basics up, let’s get started with the design.DesignDo not fear I am here to help you through both design and development. I wouldn’t just throw in the information and not help you get through the deep end. In this following section, I will be taking you through the basics.Macromedia Fireworks (MX 2004 or above recommended)Plenty of fluid and fruitPatienceBrainFurther resources will be provided throughoutPlease be aware, that you do not need a very good computer to run Fireworks. Before I upgraded my computer for the third time, it was running on 128MB RAM, 333MHz Processor. With RAM DEF XT (Google term search it), it kept my RAM at a healthy level to work with. I suggest you get it. Now my computer is at 256MB RAM, it can handle a bit more.From here on, it is going to be very image heavy, so don’t say I didn’t warn you. Please note if the images do not show, then it is not my problem – literally. The servers that my images are at may go down or do anything strange thing.Step 1 – Starting Fireworks and creating your canvasFirst of all, if you do not have Macromedia Fireworks, then I suggest you download it from the Macromedia home page. You can also buy it from all good software stores. If you are going to be using software other than Fireworks, then I am afraid I can not support you. I have generally no experience in any other graphics program.Once you have downloaded and installed Fireworks, then we are ready to move onto opening and setting up your work space. The work space is where all of the panels are (the Tools, Layers, etc). When you fire up Fireworks it should look something like the below.Now, along the Open a Recent Item column, there is a list of file names. This only appears when you have opened or created and saved a file in Fireworks. At the moment, if you have not used Fireworks before, it should be blank.Click on the Create New > Fireworks File to start a new project. Once you do that, a new box will appear.As you can see, there is a few options for you to control when setting up your new document. Firstly, note the Width and Height. They are displayed as pixels (in the drop down boxes). You can change these to cm, but it is much more accurate and easier to use pixels (px) when designing web pages or any other related graphics.The mock design we will be doing is a personal page. This means relatively nothing, but as you think more in depth about it, you start to wonder one thing that is in relation to this part. What size of canvas should I make? Well, a rule I like to keep is that you design everything on a canvas size of 750px wide and 800px high. Once we get to laying it out, then you will understand why this is.So, for those who haven’t quite grasped it, put 750 into the Width box and 800 into the Height box. Resolution for web graphics is best at 72px/inch. Inches are an old unit, but if you wanted to use centimetres, then it would be 28.35px/cm. If you are creating images specifically for high-resolution gaming and model work, then your resolution needs to be at least 200px/inch, for the detail.Canvas colour is something that is entirely up to you. I personally prefer the default setting of White, but you may have it as transparent or any other colour. I use white as it helps me design on an easy surface. Dark text on a Light background is always easier to read, and also helps to prevent me from having headaches or migraines.When you have done with this, select Ok.Hopefully, your new document should look similar the one above. If you have a different panel layout or canvas colour, then don’t worry, it’s just my personal profile settings. If it looks completely different, then retrace the above.Throughout this extensive tutorial, I suggest you save at every step, that way you’re not going to loose anything major if your computer crashes or you have a power-cut. I also suggest that you take a five minute break after every two steps, that way your eyes and muscles get a break from the strenuous reading and keyboard/mouse work.Now that we have the fundamental basics up, let’s get started with the design.Step 2 – Making a base on which to work onI have said this many times before on several forums. A background is the fundamental foundations of a working site. If you do not choose your background carefully, then it will come back to haunt you. In order to create the best background for the effect you are trying to reach, you need to make several attempts. I warn you now, if you think you have made a decent background in one shot, then do it again, because not even the best of the professionals out there can do it. Creating a background that is 99% perfect for your site is a long and hard process, and many prefer to leave it to the end. Those that do not really care about their visitors thoughts often shove down any old psychedelic or plain coloured background as a time saver. One thing you need to get clear with design. It can take MONTHS for the 99% perfect design to be reached. It can also take just a few hours, depending on the thought power.Since I have had a few days at working at this, we can get the best results in only a minute or less. So that we know what we are doing and can design more accurately, zoom into 100%. This can be achieved in so many ways that it is quite amazing.Keyboard shortcut CTRL+1Use the Magnifier ToolZoom Level select 100% from drop-down arrowView > Zoom InView > Magnification > 100%Well, five ways to zoom into 100% isn’t bad. Now that you’ve zoomed in so that you can design it properly, we’ll start with the background.Before you can start leaping into making the background, you need to know the colour scheme you will be using. In this tutorial, I will be using the following colours for the background:#97B9D5This is a soft blue. You may be wonder, why only use one colour? This is the base colour, and seeing as though the magic of Fireworks can calculate the rest of the colours, this and #FFFFFF is all that we need. So, to create our stepping block, you must firstly select the Rectangle Tool found in the Tools panel. Then, draw a rectangle of any size onto the main area of the document. After you have your square, don’t bother formatting it just yet. We need to sort out the size and position of the graphic first. Firstly, in the X Co-ordinate change it to 0 (from here on shown as (x (px)) e.g. if x co-ordinate equals 5, then I will show it as (x5)) and the Y Co-ordinate to 0 (from here on shown as (x (px),y(px)) e.g. if x co-ordinate equals 5 and y equals 12, then I will show it as (x5,y12)). By having the rectangle at (x0,y0), it will be in the top left corner, 0 pixels from the left and 0 pixels from the top. If you do not know your co-ordinates in maths, then you will struggle slightly to understand this and CSS background image properties. But I will do my best to explain.Then in the Width box, change the value to 750 and in the Height box, change the value to 800. These two combined will make the rectangle stretch the full length of the canvas, and will look just like the background of a site. If you have no idea where these are found, relate to the screenshot below.Now to make it look like a background. From the screenshot above, you can see where it says Solid in the drop down box. This controls the type of colour formatting that is about to take place. Click in that box, the go to Gradient > Linear. When you have done that, the linear gradient will be horizontal facing. Never design a site with a horizontal background – they are pigs to get right and it often takes quite a lot of time working out how to make them work, as well as the often very large file size.So, to beat this, when designing KISS/UKISS sites, you are best off making a vertical design that goes from the primary colour into white, or a colour that can be completed by CSS later on. This helps reduce file size, loose stress and generally makes everyone’s life easier.To achieve the vertical gradient, hold left click on the DIAMOND selector on the gradient, and then drag it to the top of the Rectangle. Once you have done that, it is more than likely that the gradient has shifted, but it should still be horizontal. In order to change the direction of the gradient, Hold left click on the SQUARE selector on the control line (if you can’t see it, then zoom out until you can) and move it so that it is exactly straight down your document. Once you have done this, you should end up with something that looks like the below.It may take several attempts before you get it bang on straight; it still takes me a couple of times before it finally gets into the appropriate position.The good thing is that we have the gradient and the main part of the background. Now all you need to do is replace the white with #97B9D5 and the black with #FFFFFF. To do this, make sure that your rectangle is selected, then where you changed it to a gradient, there is a box of gradient colour that matches the gradient on your canvas. Click on the box, then on the white little colour selector (see screenshot below). Once you click that, a colour palette appears. Where it displays the HEX code (seen as #FFFFFF), change it to #97B9D5. Then, on the second colour selector, change the HEX (seen as #000000) to #FFFFFF.You should then end up with a happy little background, that will suite us for now. I’m not saying that it is 100% efficient, but it is as good as it is going to get at this stage. All that is to much to follow lol

[iGuest 3]

Step 3 – Head’s up; start with the logo The first two steps have been covered (and I hope you have been saving it), so now it is time to have a quick review of what you should have. Your screen should look similar to the below.Hopefully it does, because if there is anything completely different, then I suggest you back through the previous two steps to figure it out. In design, there is no room for idol mess. If you genuinely forgot to do something, then you’re not a bad person really. Anyway, moving things on you need to get your logo made. To keep in line with the UKISS theme we are adopting, we need a logo that is modular in design, with hard edges but subtly blends in with the rest of the theme. This is a great disappointment to those that like having psychedelic colours splashed across the screen, but tough. To be a true designer, you must get past personal comforts and put yourself in other people’s places. Would you like to spend half of your time waiting for a page to load because it is filled with meaningless coloured junk?Producing a logo can often be hard and strenuous on your creative ability. Therefore, you’re going to struggle in the future, as I and all of the designers out there do. But, as we are only making a temporary logo, we don’t need to concentrate to heavily on the style of it. So, to start your logo, select the rectangle tool, and draw a rectangle that is (x25,y25) and (w40,h40). This should produce a box that is 40x40 pixels, 25 pixels from the top and left sides. If it doesn’t, then you have simply done something wrong. It is more than likely that if you are continuing from the last step without closing down Fireworks or working on another project, that the box will have a linear vertical gradient, but this doesn’t matter as we can easily change this. To give you an idea of what we will be making, here is a completed version.Select your rectangle, and remove the solid colour. To do this, click on the colour type select and click on none.Now your box should become invisible. This is because there is no stroke, which is the line surrounding an object, nor is there a colour fill. We are going to apply a stroke, in order to get the border appearance shown on the preview. Firstly, click on the colour filler box on the right hand side of the pencil within the properties panel. This will bring up the colour palette. Into the HEX selector, put in the following code:#729DC0This will produce the desired colour. It should also make it a 1-Pixel Hard (or Soft) stroke.If you have keen eyes, you would have noticed that I have changed Rectangle to Bg in the Layers panel. Every time you make a new object, it’s always best to change the name of it in this panel, that way it is easier to find and edit at a later point. You do not have to do this, but it certainly helps me. To change the name of something in the Layers panel, double click it and then type in your custom name.We’re now going to make the main box of the logo icon. To achieve the same effect, you will need to know the following things:How to make vertical linear gradientsHow to apply first and second colourIf you don’t know any part of these two parts, I suggest you go back to Step 2 and re-read it. Hint: it is the same way we made the background.Create a rectangle, that is (x27,y27) and (w36,h36). This will more than likely create a similar object to the border. Take off the stroke (the same way as you take off the colour fill), and apply a vertical linear gradient with the first colour as #78A1C1 and the second colour as #355773. It should create a gradient square that looks like the below.To get the dynamic, switch-like graphic as well, it requires a bit more skill. Make another rectangle within the box, that is (x30,y30) and (w30,h30). When you are creating your linear gradients, you’ll notice two more colour selectors on the top of the coloured bar (see image below if you have no idea what I am talking about). Well, the first one controls the starting transparency level and the second one obviously controls the ending transparency. Knowing that, we can apply a 30% transparency to the first one and 0% transparency on the second. Make sure that the two colour pots on the bottom are filled with #FFFFFF (white). If you didn’t quite understand that, below is a GIF animation which throws together the steps.After this, I grouped the three new objects (excluding Bg). You can do this by hold SHIFT and selecting the objects, followed by going to Edit > Group or CTRL+G.If you think you have done making the logo icon, then you are unfortunately wrong. Sorry. This part requires that you have a specific font, named baby blocks. I do not have permission to redistribute this font, so you will have to download it from the place I did. But to save you time, I will put the direct download link for you.Click here to obtain the Baby Blocks font.If you haven’t installed a downloaded font before, then here is some instructions (for PC users only).Download the file.You will now need a ZIP file extractor. If you are using Windows ME or XP, then they come with built in self-extractors. IF you aren’t, then you can use either WinZip which is a good all round ZIP file extractor or WinRAR is another favourite. Once you have downloaded these and installed them, double click on the font file you downloaded in 1, and extract the font file (TTF) into C:\Windows\Fonts (or whatever you have for C:\ ). If you have a partition, then your Windows folder may be named something else. Just make sure that the path you are extracting into is correct.If you don’t know how to extract, then I suggest you look at the Help Files that come with the software.The font will be ready for you to use in Fireworks. Using the Text Tool (the capital A found on the Tools Panel), creat a small field which you can enter your text. Once you have marked it out, type in a letter, I have used P which stands for Personal Page. You can have whatever you like. After you have done that, you’ll need to move it so that it doesn’t look out of place. In order to do this, use the Pointer Tool (keyboard shortcut 0 or V). Then, select your text field and move it so that it is at (x30,y24). To resize it, DO NOT change where it says (w,h). If you do, it will screw up. Simple as. You need to manually change the size using the pointer select tool, and click on the square dots around the field, to change the size. Make sure that it is (w30,h35) this way it will be in the middle (sort of). To put the text in the middle, you should see a centre align on the properties panel, click it and your letter should be in the center. Remember, when handling Baby Blocks, capital letters are put into blocks, so use lower case whenever I mention using Baby Blocks font. Also remember to change the colour of the font to #D2E1ED and the text size to 27. If you can’t figure it out, then look closely at the screenshot below.Now that you are able to create a text object, make the following, using font colour #3A5D79, size 25 and left aligned.Once you have done that, create another one below it, with a slogan or tag line.I used Tahoma 11 to get that effect, and took my time on getting it aligned with the text above it. When it comes to web design, your visitors need to be caught up in the moment of seeing your website. The first thing their eyes will be directed towards I your header, and that is where you should put in the effort. It is often hard to try and create a decent and hook-line tag or slogan, but just thinking philisophically can help. When it comes to personal pages, if you think of Life and what it means to you, it’s much easier to think of your own mini-proverb. If you create a good one, then more people are going to notice it and recognise it with themselves, which opens the connection of being personal with your visitors. So, make it quite but loud.Guess what. You’ve actually finished the header. Because we are going for a UKISS design, there is only often a logo icon and proceeding text. Everything else is classed as pollyfiller.Then we get this Lol its to much

[Cain1405241557 0]

Thank you for this tutorial mate, it worked out fabulous

[Chosen1405241676 0]

thanks for the tut but can you please reupload the pictures?

[iGuest 3]

I usually dont like to read walls of text, but this was really worth it

[Ahsaniqbalkmc 0]

My opninion is that tutorial and help articles help only as far as guiding you about where to start and a general idea about what to do.. But if you are not willing to spend your time doing the actual thing, you are never going to get good at this. So in addition to reading valueable resources like this, a newbie should spend most of his time practicing the actual thing.The minor details and arrangements, which are extremely essential for a website, cannot be learned by reading other people's resources. Unless you get your hands dirty with the actual work, you might never learn those tricks that decide how good you are at the respective field.