http___www.kroativ.net_izdvojeno_kako-napraviti-moderni-web-20-dizajn__1.xml
1.1 2.1 2.2 2.3 3.1 4.1 4.2 4.3 4.4 5.1 6.1 6.2 6.3 7.1 7.2 8.1 9.1 10.1 10.2 11.1 12.1 12.2 13.1 14.1 14.2 15.1 16.1 17.1 18.1 19.1 20.1 21.1 21.2 21.3 22.1 22.2 23.1 24.1 25.1 25.2 26.1 26.2 26.3 27.1 28.1 28.2 28.3 28.4 29.1 30.1 31.1 31.2 32.1 33.1 34.1 35.1 36.1 36.2 37.1 37.2 37.3 38.1 39.1 40.1 41.1 41.2 41.3 42.1 42.2 43.1 44.1 44.2 44.3 44.4 44.5 45.1 46.1 47.1 47.2 48.1 49.1 49.2 50.1 51.1 52.1 52.2 53.1 54.1 55.1 55.2 56.1 57.1 58.1 58.2 58.3 59.1 59.2 59.3 59.4 59.5 59.6 60.1 60.2 61.1 62.1 62.2 62.3 62.4 62.5 63.1 64.1 65.1 66.1 66.2 67.1 67.2 67.3 67.4 68.1 69.1 69.2 70.1 71.1 72.1 72.2 73.1 73.2 73.3 74.1 74.2 75.1 75.2 76.1 76.2 77.1 78.1 79.1 80.1 81.1 82.1 82.2 83.1 84.1 85.1 86.1 87.1 87.2 87.3 88.1 88.2 88.3 88.4 88.5 89.1 90.1 90.2 91.1 92.1 92.2 93.1 94.1 94.2 95.1 96.1 97.1 98.1 99.1 99.2 99.3 99.4 99.5 100.1 101.1 101.2 101.3 102.1 103.1 103.2 103.3 103.4 104.1 105.1 106.1 106.2 107.1 108.1 109.1 110.1 110.2 111.1 111.2 112.1 112.2 113.1 114.1 115.1 116.1 116.2 117.1 118.1 119.1 119.2 119.3 119.4 120.1 121.1 121.2 121.3 121.4 121.5 122.1 122.2 122.3 122.4 123.1 124.1 125.1 125.2 125.3 126.1 127.1 127.2 128.1 129.1 129.2 129.3 130.1 130.2 131.1 131.2 131.3 132.1 133.1 134.1 134.2 134.3 135.1 136.1 137.1 138.1 139.1 140.1 140.2 141.1 141.2 142.1 143.1 143.2 143.3 143.4 144.1 145.1 145.2 145.3 146.1 146.2 146.3 147.1 147.2 148.1 149.1 150.1 151.1 152.1 152.2 153.1 153.2 154.1 155.1 156.1 156.2 157.1 157.2 158.1 158.2 160.1 160.2 160.3 160.4 161.1 161.2 161.3 162.1 163.1 163.2 163.3 164.1 164.2 165.1 165.2 166.1 167.1 168.1 168.2 169.1 170.1 171.1
GFX9.COM share Create a slick tabbed content area using css & jquery, you can download now. One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we're going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we'll achieve the same thing using the jQuery library. Step 1 First things first, we need something that looks awesome. So a quick trip to Photoshop and voila we have a nice mockup of what our tabbed component should look like. It's pretty straight forward with a few extra gradients to make it nettuts awesome. You can grab the Photoshop PSD file for this image if you want to take a closer look, but it's pretty simple and we can build it off the flat JPG really. Step 2 The first thing to do when building of course is to get a rough idea how you are going to do it. This gets easier the more things you've developed. Looking at this image I would say the best thing to do is: - Have a container which we'll place everything inside of. That way if we needed to position our box or drop it into a sidebar, we can just grab everything wrapped in theand copy+paste it somewhere. - Then we'll have the heading area, probably with a tag - Then below that we'll have a secondtag which will hold the tabs and content. This is the dark grey box in the image. - Then inside there we'll use an unordered list - where each element is a link for the tabs. This will let us use the - bits of the list to position the tabs and the bits to style them and give them rollovers and on/off states. - Then below that we'll create a final area which has the content for each tab. We'll need one of these for each tab, and we'll show or hide them depending on which tab has been clicked. SO to summarize, it'll be something like this: Heading Content for Tab 1Content for Tab 2Content for Tab 3 - Tab - Tab - Tab Don't worry if looking at that image doesn't immediately make you think of that structure. Sometimes you just need to do things by trial and error. In my case I've made these little tabbed things a few times and I know that this is a nice simple way of making them. Also it's nice to think about the structure like this before you have lots of class names and ids and content because it can get hard to see the forest from the trees later on. Especially when you add the content for all the different tabs. So now that we have a picture in mind of how to build our structure, let's get to it! Step 3 Now if you've followed my tutorials on PSDTUTS you'll know that I love a good gradient background. So before we even start with the tabbed structure, let's get ourselves a nice background! Open up Photoshop, create a 1000px x 1000px document and draw a nice (subtle) radial gradient like the one shown below. Note that I've drawn out from the centre/top and made sure that the gradient is finished by the time I get to the edge of the document. That means I can set the background color in HTML to be the darker colour and if someone stretches their browser window it'll be seamless. Step 4 So create a new directory for the project, then create a second directory inside there called images and save that image inside as background.jpg. When saving use File > Save for Web and Devices and select JPG with a quality setting of about 70. That comes out to a file size of 16kb which is not too bad. There used to be a time where you really had to scrimp and save, but now you just want to make sure you're not being stupidly wasteful with your file sizes. Now we create a HTML document and write in some code: Tabbed Structure - Regular So that will be the base of our HTML. Now we'll create the style.css document and write in the following: body { background-image:url(images/background.jpg); background-repeat:no-repeat; background-position:top center; background-color:#657077; margin:40px; } A couple of things to note here: - It's possible to write this same CSS using shorthand and reduce the number of lines used, but it's much clearer this way and better for tutorial writing! - We have a background image (the gradient) and we've set it to no-repeat, because we only want it to appear once, it's centered and finally the background color (#657077) is the darker colour. - I've added a margin of 40px. This is just for positioning my stuff later on so that it looks nice. You can see the resulting HTML document here. Note that if you resize your window it's a nice seamless graduated background. Wunderbar! Step 5 Next we add our structure to the page so that we can begin styling it. Tabbed Structure - Regular So as you can see I've basically used the same structure I mentioned in Step 2. I've added some ids and classes and some actual content. Here's the reasoning behind what I've done: - For the heading, I've placed the subtext "Select a Tab" in a element. This lets me use the element for overall positioning and the element to restyle and position the subtext. - The container has an id="tabbed_box_1" and a class="tabbed_box". I've done this because we might reuse this code multiple times on the same page. If we did that we could use the id's to position each one in different places. But we'd still have the class to do the styling. Whereas if we'd use the id for styling, we'd end up having to define the same styles again and again for different id's. - I've given the links and content areas id's because we need to use Javascript to manipulate them later. - Finally I've given the - element a class name. Actually we could style it without a class just by styling .tabbed_area ul { }but this could get confused with future - 's we put inside the content area. So it's better for it to have a class name for us to refer to. OK so without styles it doesn't really look like much.... yet! Step 6 Now with styling up elements, I think it's best to work from the outside element in. So we'll start with this element -- which we'll use to position the box nicely in the center of our document using this code: #tabbed_box { margin: 0px auto 0px auto; width:300px; } Step 7 Now we'll do the heading area. We can style the heading like this: .tabbed_box h4 { font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#ffffff; letter-spacing:-1px; margin-bottom:10px; } .tabbed_box h4 small { color:#e3e9ec; font-weight:normal; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; position:relative; top:-4px; left:6px; letter-spacing:0px; } A few things to note here: - Instead of just defining styles for h4, I've defined for .tabbed_box h4. This is important in a larger HTML document because you might have another h4 style somewhere else. So you want to make sure you don't overlap or cause future overlap problems. - You'll notice I've also adjusted the bottom margin on the h4 to 10px. This is so that the spacing looks right. It's important to know that many elements have default values. For example a h4 already has a bottom margin, and it's larger than we'd want. So if we didn't set this ourselves it would appear with a larger margin. Some people use special stylesheets that reset all these default values, but I've gotten used to resetting them individually when I need to. - You'll see that I've also used the text-transform attribute to make the small text all capitals. We could of course have just written it in caps, but I just like doing it this way! - Also you'll notice in the small definition, I've given it a position:relative definition, this is so that I can adjust where it appears, moving it up 4px to the top and 6px to the right. - Finally when styling the h4 element I gave it a negative letter spacing, but that means the small element gets the same negative letter spacing too which we don't want. So I have to define it again as 0px there. This is thanks to the fact that styles cascade down - hence the name Cascading Style Sheets. Often times you'll notice something looks weird on your page and it will be because the element has inherited some style you totally forgot about. When I first did this bit of styling I stared at the small bit for ages trying to figure out why it looked so bunched up, until I remembered! Step 8 Next we'll give our innera bit of styling with this code: .tabbed_area { border:1px solid #494e52; background-color:#636d76; padding:8px; } This just gives it a bit of definition and spaces the interior elements away from the sides. You can see where we're up to in the image below. By working from the outside in, we've given our element a bit of shape and it's a lot easier to see how it's going to wind up looking. Also often you will have constraints coming from the outside in, for example the box might need to fit into a column of certain width. Finally it's also a good idea to go outside in, because then any style inheritance is clear. For example if you went the other way and did the interior elements first, later styles might affect those interior elements and you'd need to go back and readjust anyway. Step 9 Now we get to the good stuff - the tabs! If we add this little piece of CSS we'll go a long way to making the tabs look more like tabs: ul.tabs { margin:0px; padding:0px; } ul.tabs li { list-style:none; display:inline; } This code says that the - element with class 'tabs' should have no margins and no padding. It also says that all the - elements within should have no bullet points attached to them. Finally we change the display from the default 'block' to 'inline'. Let me explain that last bit in a bit more detail. - Elements on a page generally have three common values for 'display'. They are block, inline, or none. - Setting an element to none makes it invisible. We'll use that fact later on. - Setting an element to inline make it flow along with other elements the way text does. So here instead of appearing below each other, the - elements flow along horizontally. - Setting an element to block makes it a rectangular area that appears generally below the last element. - That's a really simplified explanation, you can get a longer one over at Web Design From Scratch There are actually other display values which you can read about at Quirksmode. Step 10 Of course our 'tabs' still look pretty crappy, so let's give them some style. We've used the - element to position them, but we'll use the element to style them, like this: ul.tabs li a { background-color:#464c54; color:#ffebb5; padding:8px 14px 8px 14px; text-decoration:none; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:1px solid #464c54; } ul.tabs li a:hover { background-color:#2f343a; border-color:#2f343a; } ul.tabs li a.active { background-color:#ffffff; color:#282e32; border:1px solid #464c54; border-bottom: 1px solid #ffffff; } So what we've done here is: - Style up the tag so that it's padded out and has the right background and text colours, and has the right font settings. - Created a second style for a:hover and darkened the background color and border. Note that we don't need to set all the other settings because they are inherited. We just need to change the ones that we want changed when the user rolls their mouse over the tab. - Finally we have a third style for when the has a class="active". In other words for the tab that is selected. Here again we set the background colour to white and change the text colour. One thing to note is that we also change the bottom border to white. This is so that the tab will look like it is attached to the content area (when we add it in later!) Step 11 There are two things we need to do to make the content areas work. The first is we should make the second two areas vanish and the second is to make them look appropriately styled. .content { background-color:#ffffff; padding:10px; border:1px solid #464c54; } #content_2, #content_3 { display:none; } You'll see that the first part of the CSS tells the browser that all elements with class="content" should be white with padding and a border (the same colour as the tabs). The second part says that the elements with id="content_2" and id="content_3" should have a display:none, or in otherwords should be invisible. Later on when we add some Javascript we can use the script to alternate between display:none and display:block to make them show and hide. So here's how our tabs are looking, you can also see a HTML version of where we are at. As you can see it's looking pretty close now, but we need to fix the spacing and add some actual content in. Step 12 Fixing the spacing issue is actually simply a matter of adding margins back to the - element like this: ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } To be perfectly honest I'm not sure why that spacing issue occurred. Sometimes HTML mystifies me, but I just adjust settings until things right themselves. Sometimes in the process I figure out what was the cause, sometimes I don't. I guess what I'm saying is, unless you're going to really get into the nitty gritty details of w3 specs, sooner or later you're going to run into some issues that you can't explain. Don't let it get you down, just adjust until you find a fix or a solution. Step 13 Now we'll add some content into the content area. I avoided this earlier as I wanted to keep the HTML looking simple. Here's some: Browse Site Select a Tab So here I've just added a bunch of unordered lists in to the three content areas. Incidentally I'm mocking this up as if it was to be used on a WordPress blog. But really you could be using this for all sorts of things. The new FlashDen homepage that I worked on a few days ago uses tabbed areas to show different types of recent files. Now we'll add some styling to make those look a bit nicer: .content ul { margin:0px; padding:0px 20px 0px 20px; } .content ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px; } .content ul li a { text-decoration:none; color:#3e4346; } .content ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } Once again we're styling our lists up. This time rather than giving the - element a classname, I've simply added styles to all - Once again we've removed the bullet points off the - elements with list-style:none. - This time we're styling the list elements as opposed to the 's. This is important because if we might have a menu item which isn't a link, and this way it'll still fit neatly in. - Once again I've used a wrapped inside the to make the post count. I've used a text-transform to make it all caps and some relative positioning to nudge it over to the right a bit. - elements inside elements with the class="content". This just means I don't need to write as many class names into my HTML which makes it neater and cleaner. Other things to note: Step 14 So this is what our page looks like: Overall it's pretty good except we have one too many borders. But that's OK, we can fix it with a magic pseudo-selector called 'last-child' like this: .content ul li:last-child { border-bottom:none; } This style just applies to the last element of its own kind - i.e. that last - element. Now I should point out that last-child doesn't work in all browsers. In particular IE6 doesn't like it. But that's OK because it's not the end of the world if the border is there, and it's my subtle way of punishing anyone who hasn't got an at least vaguely up to date browser :-) Step 15 Now there's just one more step to finish our HTML, and that is to some nice background images to our elements. As you will recall some of the elements in my original PSD file had subtle gradients. So now it's time to add those in. There are three graduated bits: (a) on the active tab (b) on the inactive tabs and (c) at the bottom of the content area. Here are the three images we'll be needing: They're a bit hard to see, but basically they are each small slices of gradient that we'll set as repeating background images. Here is a close up of the one for the tab (note I've added a thin border around it so it's a bit clearer. Notice that there is a 1px white line at the top. That will make the tab look really sharp. So we need to make a few adjustments to the CSS code to add in background images, like this: ul.tabs li a { background-image:url(images/tab_off.jpg); background-repeat:repeat-x; background-position:bottom; } ul.tabs li a.active { background-image:url(images/tab_on.jpg); background-repeat:repeat-x; background-position:top; } .content { background-image:url(images/content_bottom.jpg); background-repeat:repeat-x; background-position:bottom; } Note that I actually inserted these extra bits in with the rest of their class definitions, but for the sake of brevity have just copied in extracts. As you can see in all three cases we're repeating a background image along the x axis only. In the case of two (the off tab and the content area) we're doing it along the bottom, and in the other it's along the top. Styled! And with that we've officially finished the HTML/CSS part of this tutorial. You can see the finished styled page here. Adding a Simple Script The next thing we need to do is add some Javascript to make our tabs actually do something. First we're going to do this by hand and then I'll show you how to use a Javascript library to accomplish the same thing. Now I should point out that I'm no JS expert, and I'm hoping to bring in some real programatic masters to write tutorials here, so if you notice me doing anything which is a bit dubious, feel free to leave a comment and I'll touch up the tutorial and make it a little more best practices! So first let's outline what we want to do when someone clicks on a tab. We want to switch off our current tab, switch on the new one, hide the current content area and show the new one. Now we could have something clever that works out which tab is currently on and switches it off, but it's easier just to go through and switch them all off, and then switch on the one we want. Similarly for the content areas, we can hide all three of them and then show the one we want. This saves us having to work out the current state of affairs. Finding Elements using the DOM The elements we are working with look like this: Now in Javascript we can find an element simply by using it's id and the document.getElementById() method. So document.getElementById('content_1') would give us the first content area. We can then set it's display style to none using this line: document.getElementById('content_1').style.display = 'none'; Similarly to see a class we use: document.getElementById('tab_1').className = 'active'; So then a really simple approach would be to write: function tabSwitch(new_tab, new_content) { document.getElementById('content_1').style.display = 'none'; document.getElementById('content_2').style.display = 'none'; document.getElementById('content_3').style.display = 'none'; document.getElementById(new_content).style.display = 'block'; document.getElementById('tab_1').className = ''; document.getElementById('tab_2').className = ''; document.getElementById('tab_3').className = ''; document.getElementById(new_tab).className = 'active'; } This would be placed inside a file, let's call it functions.js. We'd then call this script by changing our tab links to: And sure enough, here's an example of our super simple javascript example. It works! A More Complex Script Now there are some very obvious problems with this script. Not least of which is that if you add another tab you're going to have to change your function. And if you had more than one set of tabs on a page you'll need two functions! So let's beef it up a little: function tabSwitch_2(active, number, tab_prefix, content_prefix) { for (var i=1; i < number+1; i++) { document.getElementById(content_prefix+i).style.display = 'none'; document.getElementById(tab_prefix+i).className = ''; } document.getElementById(content_prefix+active).style.display = 'block'; document.getElementById(tab_prefix+active).className = 'active'; } Our second version of the tab switching function takes a couple more arguments but is a bit cleverer. It assumes that we have a set of tabs and a set of content areas and they have id's that have a prefix and a set of incrementing numbers. I.e. tab_1, tab_2 ... and content_1, content_2 ... The first argument our function takes, 'active', is the number tab/content we want on. The second argument, 'number', is the number of tabs being used. The third and fourth arguments are the prefixes used in the ids of our elements. The function then has a for loop that cycles through from 1 to the number of tabs and switches them all off, then switches the two we want back on at the end. In other words it's the same script as before, but we've just made it a tiny bit smarter. So in our example to call the function we would have this code: This means that later on if we had a second set of tabs, we could give them different id prefixes and use the same function again and again. View the second javascript example. Using jQuery Lately there have been a lot of Javascript libraries appearing, and in fact there are (at least) two that are specifically made for achieving this tab effect: MooTabs and DomTab. I haven't used either, but from a brief glance they looked quite usable. However as I've heard a lot about the jQuery library, I decided to attempt the same tab switching using jQuery. I have a feeling my solution could use some work, but it's still interesting to look through. So first, go to the jQuery site and download the latest version of their script library. Getting the Hang of jQuery jQuery provides a bunch of functions that allow you to select groups of things. For example if you wanted to select every element on the page that is a link (i.e. elements) and then make them vanish, you would place this in your area: The first line adds the jQuery script library. The main script area is inside a piece of code that looks like this: $(document).ready(function(){});This basically tells your browser to execute everything inside when it hits the page. So in our case we're giving it the command: This says find everything that is an and execute slideUp() on it. Or in other words: find all the links and make them vanish with a sliding up effect. Try adding that script to a page and load it and you'll see all your links vanish. Pretty neat huh? Anyhow there are loads of ways to select things, and you can read about them in the API and documentation. You can do things like find every element with a certain class, a certain id and so on. At some point I'll write a proper introduction to jQuery tutorial here, but for the moment, that tiny intro will do - besides having just an hour of experience with jQuery I suspect it'd be something of a travesty for me to write an intro to it! Sliding Away with Selectors So after a little experimentation I came up with a way to use jQuery to make my tabs slide in and out. To do this first I modified my links to not have any javascript, but rather to have a title attribute and an extra class="tab". Notice that you can give an element two classes by doing this: class="tab active". Now using these two elements, basically I can get all the links with the class 'tab' and I can also find any element whose id equals the title attribute of the link that was just clicked. Here's the script (placed in the) which explains this a bit better: So I've added comments in to help explain. Basically when any link with the class 'tab' is clicked, we do everything inside that function. And to see the final working example with jQuery, click here! Final Words OK so a few minutes after making my jQuery example, I discovered that there is in fact a special 'tabs' visual control in jQuery. I'll have to have a play with that tomorrow as no doubt it will make life a lot simpler! In the meantime I hope you enjoyed the tutorial and got something out of it. Similar content - Then we'll have the heading area, probably with a
1.1 1.2 1.3 1.4 1.5 1.6 2.1 2.2 2.3 2.4 2.5 2.6 2.7 3.1 4.1 5.1 7.1 9.1 11.1 14.1 15.1 19.1 20.1 21.1 24.1 27.1 27.2 28.1 29.1 51.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 60.1 61.1 62.1 67.1 68.1 68.2 68.3 68.4 68.5 69.1 70.1 70.2 70.3 70.4 70.5 70.6 71.1 72.1 72.2 72.3 72.4 72.5 73.1 73.2 73.3 73.4 73.5 73.6 73.7 74.1 74.2 74.3 74.4 74.5 74.6 75.1 76.1 79.1 80.1 81.1 82.1 83.1 84.1 86.1 87.1 88.1 89.1 91.1 92.1 93.1 94.1 96.1 97.1 98.1 99.1 101.1 101.2 101.3 101.4 101.5 101.6 102.1 102.2 102.3 102.4 102.5 102.6 103.1 104.1 105.1 106.1 106.2 117.1 117.2 117.3 117.4 117.5 117.6 117.7 117.8 117.9 117.10 118.1 119.1 121.1 122.1 124.1 125.1 126.1 127.1 128.1 129.1 131.1 132.1 133.1 134.1 135.1 136.1 137.1 138.1 140.1 141.1 142.1 143.1 144.1 145.1 146.1 147.1 148.1 149.1 150.1 152.1 153.1 154.1 155.1 156.1 157.1 160.1 160.2 160.3 160.4 160.5 160.6 161.1 163.1 166.1 166.2 166.3 167.1 168.1 169.1 170.1 171.1 173.1 174.1 175.1 176.1 177.1 178.1 180.1 181.1 182.1 182.2 186.1 187.1 188.1 189.1 190.1 195.1 195.2 195.3 196.1 197.1 198.1 199.1 201.1 202.1 203.1 204.1 206.1 207.1 208.1 209.1 211.1 212.1 213.1 215.1 216.1 217.1 218.1 219.1 220.1 222.1 224.1 226.1 228.1 230.1 231.1 232.1 233.1 233.2 233.3 233.4 234.1 237.1 242.1 243.1 248.1 249.1 249.2 249.3 249.4 250.1 250.2 250.3 251.1 252.1 253.1 254.1 255.1 256.1 257.1 258.1 259.1 260.1 261.1 263.1 264.1 265.1 266.1 267.1 269.1 270.1 271.1 272.1 273.1 275.1 276.1 277.1 278.1 279.1 281.1 282.1 283.1 285.1 285.2 285.3 286.1 287.1 288.1 292.1 295.1 301.1 305.1 306.1 307.1 314.1 317.1 323.1 323.2 323.3 323.4 323.5 324.1 324.2 324.3 324.4 325.1 326.1 327.1 328.1 329.1 331.1 332.1 333.1 334.1 336.1 337.1 338.1 340.1 341.1 341.2 341.3 341.4 342.1 343.1 343.2 345.1 348.1 348.2 349.1 350.1 351.1 352.1 353.1 354.1 355.1 357.1 357.2 358.1 359.1 359.2 359.3 359.4 359.5 359.6 359.7 360.1 361.1 361.2 361.3
Evo nas opet na istom mjestu sa drugim web dizajn stilom. U ovom tutorialu naučit ćete izraditi moderan Web 2.0 dizajn minimalističkog izgleda. Ovakav dizajn savršen je za stranice poslovne tematike. Kao što i sami možete vidjeti, poslovno ne mora uvijek značiti dosadno. Uz malo boje i par kreativnih elemenata uštogljenost poslovnog svijeta pretvaramo u veselo predstavljanje tvrtke. Izabrali samo Web 2.0 stil iz jednostavnog razloga što on znači moderno, ultra-hip, a to je upravo ono kakvim želimo predstaviti našeg klijenta. Koristili smo Twitter kao izvor informacija za naše imaginarne klijente u vezi poslovanja tvrtke. Twitter je inače servis za dijeljenje informacija sa rodbinom, prijateljima ili čitavim svijetom. Na njemu možete objavljivati što god želite (npr. što trenutno radite) te svi koji znaju vaš Twitter nadimak mogu to i vidjeti. Mi smo na naše stranice uz pomoć jQuery JavaScript library-a uključili Twitter stream. Umjesto dosadnih fontova na koje smo inače ograničeni upotrijebili smo sIFR tehnologiju i uključili moderan Gill Sans font. Naravno za kostur stranica koristili smo 960gs CSS Framework. Ako još niste, svakako pročitajte naš prošli tutorial te se pobliže upoznajte sa tim CSS alatom. Znači naučit ćete kako napraviti Web 2.0 dizajn, naučit ćete uključiti Twitter stream u vaše web stranice i upoznat ćete se sa sIFR (Scalable Inman Flash Replacement) tehnologijom. Krenimo redom, prvo ćemo kao i obično sastaviti kostur naših stranica (nemojte zaboraviti uključiti 960.css, text.css i reset.css iz 960gs CSS Framework-a) Struktura našeg Web 2.0 dizajna 940px - logo i search forma 940px - moto tvrtke i Slika 940px - meni 380px - Twitter stream 540px - vijesti 300px - o tvrtci 300px - linkovi 300px planovi 940px - footer Znači standardni 960gs grid kostur. Iza svakog reda dodajemo klasu clear, napominjemo još jednom da za detaljniji opis upotrebe 960gs CSS frameworka pogledate naš prošli tutorial. Ok, kostur imamo, a sada pogledajmo HEAD našeg dokumenta jer je nešto drugačiji od prošlog tutoriala. HEAD našeg Web 2.0 dizajna $(document).ready(function(){ join_text: "auto", username: "kroativ", // vaš Twitter username avatar_size: 32, // veličina slike vašeg Twitter avatar count: 5, // koliko unosa želimo prikazati auto_join_text_default: "rekli smo,", auto_join_text_ed: "mi", auto_join_text_ing: "mi smo", auto_join_text_reply: "odgovorili smo", auto_join_text_url: "pregledavali smo", loading_text: "učitavam twitter..." jQuery JavaScript library Između linija 2-9 imamo kao i u prošlom tutorialu 960gs stilove te na kraju naš stil (moj_style.css) za definiciju naših elemenata. Između linija 12-14 uključili smo jQuery JavaScript library. Što je to jQuery JavaScript library? Ukratko, jQuery je zbirka JavaScript funkcija i klasa za olakšanu interakciju između JavaScript-a i HTML-a. Umjesto da pišete tone JavaScript koda, uz pomoć JavaScript library-a kroz jednostavnu sintaksu zadatke obavljate brže i efikasnije. Twitter stream Za našu stranicu koristili smo jQuery Twitter plug-in, linije 23-39. Prvo smo uključili plug-in na liniji 14, te potom definirali njegove parametre na linijama 26-27. Osnovna jQuery sintaksa je $(document).ready(function(){ nakon koje dolaze ostale funkcije. Opise Twitter plug-in parametra možete vidjeti u samom kodu. Znači potrebno je definirati vaš username, a ostalo je sve po želji te vašim potrebama. Nakon što smo definirali sve parametre Twitter stream uključujemo u naš dokument tako da na željenom mjestu jednostavno dodamo   . Upotreba sIFR-a Između linija 16-21 nalazi se naša sIFR aplikacija. sIFR nam omogućava da u naše stranice uključimo bilo koji font. Mi ćemo ovdje pokriti osnove i naučit ćete kako ga koristii, a za pobliže informacije pogledajte službene stranice, primjere ili službeni demo. Za početak skinite sIFR i skinite naš source. Kada otvorite sIFR arhivu vidjet ćete foldere CSS, DEMO, FLASH i JS. Nama će biti potrebni css/sifr.css (za opće sifr stilove), flash/sifr.fla (za definiranje našeg fonta) i js/sifr.js (njega ne dirajte) te js/sifr-config.js (konfiguracija vašeg fonta). Otvorimo prvo sifr.fla u vašem Flash-u, vidjet ćete veliki MovieClip na glavnoj sceni, otvorite ga kako bi vidjeli njegovu scenu. Na njoj se nalazi Text Field, njega ne dirajte već nas samo zanima Font Family, po defaultu je odabrana Verdana, a mi odaberemo naš font. Mi smo koristili Gill Sans MT Pro – Light, vi možete koji god želite. Ostale postavke nemojte dirati osim opcije Character Embedding… Kliknite na tu opciju te samo dodajte u polje Include these characters ćčžšđŽĆČĐŠ za pravilan prikaz hrvatskih palatala u našim stranicama. Znači ništa nismo promijenili već samo dodali. Kada ste sve napravili idete na File/Export/Export Movie… te spremite vaš flash u direktorij script. Pazite da vam je Publish Settings ostao nepromijenjen po otvaranju sifr.fla, znači postavke za Flash 8 settings. Napravili smo naš ime_fonta.swf, spremili ga u direktorij script naših stranica i krećemo dalje. Zašto direktorij script? Dobra je praksa uvijek imati organizirani direktorij naših stranica, npr. [folder images za slike] – [folder style za css] – [folder script za skripte] itd… Kopirajte sifr.js i sifr-config.js u taj isti folder script, a sifr.css kopirajte u folder css. Ovo sve već imate ako ste otvorili naš source. Pogledajmo kako izgleda sifr-config.js: var gillsans = { src: 'script/gillsans.swf' sIFR.activate(gillsans); sIFR.replace(gillsans, { selector: 'h1#naslov', css: '.sIFR-root { background-color: transparent; color: #ffffff; letter-spacing: -1; font-size:48px }', offsetLeft:-1, wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h2', css: '.sIFR-root { letter-spacing: 1; color: #8db423; }', wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h3', css: '.sIFR-root { letter-spacing: 1; }', wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h4', css: '.sIFR-root { letter-spacing: 1; color: #068eca; }', wmode: 'transparent' Na liniji 2 trebamo navesti putanju do našeg swf datoteke sa fontovim, sjetite se da smo ju stavili u script direktorij, na liniji 3 naveli smo postavke fonta kako bi točno definirali prikaz fonta u flashu. Kako to učiniti saznajte na ovim stranicama. Na liniji 6 aktiviramo naš novi font i u ostatku skripte definiramo koje da elemente sIFR zamijeni te njihove postavke. Saznajte više o svim mogućnostima na službenim stranicama. Ukratko, zamijenili smo H1 tag sa ID-em naslov (naš slogan tvrtke) i zamijenili smo H2, H3 te H4 elemente. Svi će biti automatski zamijenjeni našim fontom. Napomena: Ovo je najnovija verzija sIFR-a i iz nekog čudnog razloga developeri su stavili minimalnu podržanu verziju Opera browsera na 9.61. Otvorite originalni sifr.js iz sifr3-r436.zip folder js/source. Pronađite “9.61” oko linije 451 i promijenite u “9.0“. Sada će vam raditi i u Operi. Naravno, morat ćete zamijeniti i sifr.js u vašem script direktoriju. Naš source sadrži već izmijenjenu verziju Sada kad smo pokrili Twitter stream i sIFR uključivanje možemo krenuti na naš dizajn. Header Sva tri dijela našeg headera Započinjemo sa headerom koji sadrži logo tvrtke i formu za pretraživanje. Pogledajmo kako on izgleda: Header smo podijelili na 3 dijela. Prvi za logo i pretraživanje, drugi za slogan tvrtke i neku slike te treći za navigaciju. Prvom header box-u grid_12 dodali smo klasu top_header kojom smo samo definirali širinu box-a na 113px koliko nam je širina pozadinske slike tog dijela. Cijela pozadina nam je jedna slika sa nijansama sive i zelene koju smo ponavljali po X-u cijele stranice. Napravili smo dvije klase, logo i searchf. Klasi logo smo dodali float:left, a klasi searchf smo dodali float:right. Unutar forme, u naše tekstualno polje dodali smo funkciju onblur=”if(this.value==”) this.value=’upišite ključnu riječ’;” onfocus=”if(this.value==’upišite ključnu riječ’) this.value=”;”. Zgodna stvarčica koja kada korisnik dođe u fokus našeg polja briše defaultnu vrijednost i ako se sadržaj polja nije promijenio istu vrijednost vraća. Umjesto standardnog gumba za submit dodali smo   kako bi uključili sliku povečala. Pozicionirali smo element s klasom .search_button. Polgedajmo css za prvi dio headera: body { font: 14px/22px "Trebuchet MS", Arial, Helvetica, sans-serif; background:#fff url(../images/main_bg.gif) repeat-x top left; .top_header { height:113px; } .logo { float:left; width:310px; height:79px; margin-top:15px; .searchf { float:right; width:310px; height:50px; margin-top:40px; text-align:right; position:relative; z-index:1; .moj_search { width:206px; height:22px; border:1px solid #4f4f4f; background:#383838 url(../images/searchf_bg.gif) repeat-x top left; margin:0; padding:0; padding-top:4px; padding-right:24px; padding-left:2px; color:#FFF; .search_button { width:21px; height:21px; position:absolute; top:4px; right:4px; Znači body elementu smo stavili bijelu pozadinsku boju i ponavljanje pozadinske slike samo po širini. Klasi logo smo definirali visinu i širinu te float:left. Klasi searchf smo definirali float:right, visinu i širinu te position:relative i z-index:1. Position i z-index morali smo definirati kako bi mogli postaviti search_button na željenu poziciju odnosno na kraj text fielda. Klasa moj_search sadrži stilove za tekstualno polje, definirali smo border, pozadinsku sliku (lagani gradient) i padding-right kako nam tekst ne bi prelazio ispod gumba. Definicija stila za naš submit gumb nalazi se u klasi search_button, naveli smo veliki z-index:10 da element bude ispred svih i absolute poziciju sa definiranim mjerama gornje i desne pozicije. Krenimo na moto tvrtke i glavnu sliku. Lorem ipsum dolor sit amet, dul consectetur adipisicing elit, sed do eiusmod tempor. Kao što i sami vidite ovaj dio je stvarno jednostavan. Opet smo grid_12 klasi pridodali klasu za definiciju širine odnosno .center_header (258px). Klasi center_header također smo dodali pozadinsku sliku, a H1 s ID-em naslov smo već definirali u sifr-config.js Pogledajmo CSS za slogan tvrtke i sliku: .center_header { height:258px; text-align:left; background:url(../images/header_slika.jpg) no-repeat 430px 50px; #naslov { width: 700px; height: 170px; margin: 30px 0 0 0; padding: 0px; text-align: left; Klasa center_header sadrži pozadinsku sliku koju smo pozicionirali 430px u desino i 50px od vrha, a ID naslov služi samo za pozicioniranje slogana tvrtke. Navigacija ili meni Navigacija je slična kao i u prošlom tutorialu sa jedinom razlikom što sada imam tabove. Vidjet ćete kako ih kreirati na vrlo jednostavan način. Tko? Što? Gdje? Kako? Zašto? Opet smo klasi grid_12 pridodali smo klasu .main_menu kojim smo definirali širinu (62px). Napravili smo ID navigacija u koji smo smjestili UL (unordered list) za naše kategorije. Znači isti postupak kao i u prošlom tutorialu. Pogledajmo CSS za meni: .main_menu { height:62px; text-align:right; #navigacija { padding: 5px 0; float:right; margin-top:32px; #navigacija ul { list-style: none; display: block; margin: 0 auto; #navigacija ul li { float: left; margin: 0; padding-top:5px; text-transform:uppercase; width:88px; height:30px; text-align:center; background:url(../images/tab.png) no-repeat top left; #navigacija ul li a:link, #navigacija ul li a:visited { text-decoration:none; #navigacija ul li a:hover, #navigacija ul li a:active { text-decoration:none; Znači opet klasični CSS list meni kojem smo dodali pozadinsku sliku našeg tab-a na svaki LI element unutar ID-a navigacija. Sadržaj Prvi dio sadržaja Centralni dio odnosno sadržaj podijelili smo na dva dijela. Prvi dio sadrži Twitter stream sa lijeve strane i male članke naše firme sa desne strane. U drugio dio smo stavili 3 box-a odnosno dijelove Tko smo mi? (malo informacija o tvrtci), Mi volimo (neki linkovi vezani uz tvrtku) i Planovi za budućnost. Pogledajmo konstrukciju prvog dijela (skraćena verzija, a cijelu možete pogledati u demu ili sourcu): Što se događa na Twitteru? Naslov Sadržaj Prisjetimo se, kada imamo više layera u nizu, prvo dodajemo klasu alpha, a drugom omega. Layeru grid_12 dodali smo inline css za gornju marginu od 15px, naravno da smo to mogli napraviti i kroz css klasu ali ovako je preglednije. Twitter stream stavili smo u grid_5 i dodali mu klasu alpha. Već smo prije napomenuli da je dovoljno umetnuti    na mjesto gdje želimo prikazati Twitter i jQuery plug-in će automatski ispuniti ostalo. Dodali smo stilizirani H4 tag sa naslovom i pozadinskom slikom autentične Twitter ptice. Layeru grid_7 dodali smo klasu omega i u njega ćemo staviti vijesti. Možemo dodavati koliko god vijesti želimo i sve ih stavljamo u layer klase vijesti. Stilizirani naslov postižemo sa H2 tagom kojeg smo definirali u sifr-config.js Pogledajmo CSS za prvi dio sadržaja: .vijesti { margin-top:10px; } h4.twitter { height:40px; padding-left:50px; padding-top:4px; background:url(../images/twitter.png) no-repeat top left; margin-top:10px; color:#068eca; font-size: 24px; line-height: 34px; .tweet { color: #000; } .tweet .tweet_list { list-style-type: none; margin: 0; padding: 0; .tweet .tweet_list li { overflow: auto; padding: 10px 5px; margin:0; border-bottom:1px dotted #ccc; .tweet .tweet_list li a { color: #068eca; } .tweet .tweet_list .tweet_even { background-color: #f8f4e8; } .tweet .tweet_list .tweet_avatar { padding-right: .5em; float: left; .tweet .tweet_list .tweet_avatar img { vertical-align: middle; border:1px solid #ccc; Vidite i sami, ništa spektakularno. Klasa vijesti samo ima gornju marginu od 10px da vijesti nisu stisnute, a Twitter smo ukrasili sa donjim iscrtkanim borderom te nam svaki drugi unos ima drugačiju pozadinsku boju (.tweet_even). H4 tag klase twitter sadrži nam pozadinsku sliku Twitter ptičice. Priča o 3 box-a Donji sadržaj i footer Prelazimo na drugi dio sadržaja koji smo namijenili za 3 box-a sa informacijama koje bi možda trebalo istaknuti na glavnoj stranici naše imaginarne tvrtke. Naslov Sadržaj Naslov Link Link Link Naslov Sadržaj Grid_12 klasi dodali smo inline css stil za gornju marginu od 20px kako bi malo razdvojili taj donji dio od ostatka. Napravili smo 3 layera klase grid_4 (znači 300px širine), prvom smo dodali klasu alpha, a zadnjem omega. Cijeli sadržaj box-a stavljali smo u klasu .small_box kojoj smo definirali pozadinsku boju i border. Unutar njega stavili smo tag H3 za naslove. H3 tag-u također smo dodali pozadinsku sliku oblih rubova, jednu od odlika Web 2.0 stila (layer nam je statične širine pa smo mogli koristiti statičnu pozadinsku sliku). Nakon toga dodajemo klasu .small_box_pic koja nam služi samo za umetanje slika ili ikona. Koristili smo besplatne ikone koje je napravila ekipa sa Deziner Folia. Pogledajte cijeli set i možete ih koristiti u sve svrhe. Cijeli tekstualni dio opet stavljamo u klasu .pade_ten za 10px padding-a oko teksta. Pogledajmo CSS korišten za donji dio sadržaja: h3.sub_naslov { background:url(../images/small_bg.png) no-repeat top left; padding:8px 0 8px 10px; margin:2px; .small_box { background-color: #eee; border:1px solid #e9e9e9; min-height:400px; .small_box_pic { text-align:center; margin-bottom:10px; .pade_ten { padding:10px; } Znači klasika, H3 tag klase .sub_naslov ima tu našu sliku pozadinskih rubova. Klasi .small-box dodali smo min-height:400px kako bi nam sva tri box-a uvijek bila iste veličine. Ravnajte se po box-u koji ima najveći height kako bi vam i ostali bili iste veličine. Tag min-height govori browseru koja je minimalna veličina layera. Footer Polako smo došli i do footera. Pošto smo sve važne informacije već prezentirali u footer stavljamo samo copyright informacije. © 2008 Naša Tvrtka U layer grid_12 dodali smo naš layer s ID-om footer koji sadrži copyright informacije. Definirali smo mu veličinu fonta, gornji border te smjer teksta. Pogledajmo CSS za ID footer: #footer { font-size:12px; margin:10px 0; padding:10px; text-align:center; border-top:1px dashed #89ab1d; Ovo nije potrebno objašnjavati, par standardnih css definicija. Pogledajmo kako nam izgledaju gotove stranice. Zaključak U ovom tutorialu naučili ste kako napraviti moderan Web 2.0 dizajn. Vidjeli ste i kako jednostavne stranice mogu biti lijepe te ste naučili prezentirati glavne stavke neke tvrtke bez upotrebe gomile slika. Znači jednostavnost + pravilna prezentacija informacije = dobar dizajn . Naučili ste kako iskoristiti popularne Web 2.0 servise za informiranje vaših posjetitelja te kako začiniti vaše stranice sIFR tehnologijom. Ovu šablonu možete upotrijebiti i za vaše osobne stranice. Njihova vesela priroda prigodna je praktički za sve vrste stranica, to nam je i bio cilj. Razbiti korporativnu monotoniju kreativnim dizajnom. PS: ovaj dizajn se neće dobro vidjeti u Internet Exploreru 6 no ovdje govorimo o Web 2.0 stilu, upravo izlazi verzija 8 tog browsera… Kako doskočiti ovom problemu pogledajte u našem članku o borbi protiv IE6 browsera… Ako ste skinuli naš source u njemu ćete pronaći i PSD file za ovaj dizajn, slobodno ga koristite kako god želite. Napravili ste nešto super? Pokažite nam, ostavite komentar…