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 5.1 5.2 5.3 6.1 7.1 7.2 7.3 8.1 9.1 10.1 10.2 11.1 12.1 12.2 14.1 15.1 16.1 17.1 17.2 17.3 17.4 18.1 19.1 20.1 20.2 20.3 20.4 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 29.1 29.2 29.3 30.1 30.2 31.1 32.1 33.1 34.1 34.2 35.1 36.1 36.2 36.3 36.4 37.1 37.2 37.3 38.1 38.2 39.1 39.2 39.3 39.4 40.1 41.1 42.1 43.1 44.1 44.2 44.3 44.4 44.5 45.1 45.2 45.3 45.4 46.1 46.2 46.3 46.4 46.5 47.1 47.2 48.1 48.2 48.3 49.1 50.1 51.1 52.1 53.1 54.1 54.2 55.1 55.2 55.3 55.4 56.1 56.2 56.3 56.4 56.5 56.6 57.1 57.2 57.3 58.1 58.2 59.1 60.1 61.1 62.1 62.2 63.1 63.2 63.3 63.4 64.1 65.1 66.1 67.1 68.1 69.1 70.1 70.2 71.1 72.1 72.2 73.1 74.1 75.1 76.1 77.1 77.2 77.3 77.4 77.5 77.6 78.1 79.1 79.2 79.3 79.4 80.1 81.1 81.2 81.3 82.1 82.2 82.3 82.4 83.1 84.1 85.1 85.2 85.3 85.4 86.1 86.2 87.1 87.2 88.1 89.1 89.2 89.3 90.1 91.1 92.1 93.1 94.1 95.1 96.1 97.1 98.1 99.1 99.2 100.1 101.1 102.1 103.1 104.1 105.1 105.2 105.3 106.1 107.1 107.2 108.1 109.1 109.2 110.1 111.1 112.1 112.2 113.1 114.1 114.2 115.1 116.1 117.1 117.2 118.1 119.1 119.2 120.1 121.1 121.2 122.1 122.2 122.3 123.1 124.1 125.1 125.2 125.3 125.4 125.5 126.1 126.2 127.1 127.2 127.3 128.1 128.2 128.3 129.1 129.2 129.3 129.4 130.1 130.2 131.1 132.1 133.1 133.2 134.1 135.1 136.1 137.1 137.2 138.1 139.1 139.2 140.1 141.1 142.1 142.2 143.1 144.1 144.2 145.1 146.1 147.1 147.2 148.1 149.1 149.2 150.1 151.1 151.2 151.3 152.1 153.1 154.1
GFX9.COM share Build a sleek portfolio site from scratch, you can download now. There's nothing like building an entire site to show you a good overview of how a CSS layout should work. Over at PSDTUTS we've got a tutorial where you design up a sleek, high end web design. In this tutorial we're going to take that PSD file and build it with some nice clean HTML and CSS. Demo and Source Code Step 1 So here's the design we're going to be building. As mentioned you can follow the tutorial over at PSDTUTS to build this design from scratch. In this tutorial we're only going to build this homepage, however using that as a base you would be able to build interior pages following the same layout. Step 2 The first thing to do is decide how we are going to structure our build. This process gets easier over time as you learn how CSS layouts can work. For this design I think we can get away with a very simple build which uses quite a bit of absolute positioning and a large background image. What is Absolute Positioning? When you place an HTML element on a page (e.g. a and so on) it has a natural position which is determined by what came before it. So for example if you put adown with some text in it, and then you place another it will naturally appear just below the first It will just flow on relative to the last element. Absolute positioning is different in that you are specifying an exact placement for an object and taking it out of the regular flow of elements. So if you had your firstjust as before, but for your next you gave it an absolute position of left:500px; top:500px; Then it would appear precisely in that location regardless of the previous You set the absolute position of something like this: .className { position:absolute; top:0px; left:0px; } Drawbacks to Absolute Positioning The main problem with using absolute positioning is that your elements don't really relate to one another. So for example if you have one block of text near the top of your page, and another block of text a bit further down, it might look great when each block of text is short. But if the top block were to have a big essay in it, then instead of pushing the next block of text down, it will just go over the top. This is because you are taking the elements out of the natural flow of the page. So Absolute Positioning is only really useful for objects that you know will always be a certain size, and which don't really need to interact with other elements. Why it's useful to us today The good thing about Absolute Positioning, is that it's really, really easy! You tell the browser where to put something and that's where it appears! To top it off, there are far fewer browser compatibility issues when you position things absolutely. After all 100px is 100px whether you're in Firefox, Internet Explorer, or Safari. SOOO our layout So the way we are going to make our website is: - Have a large background image - Absolutely position the logo, menus, and heading panel precisely where they are meant to appear - Have all our content appear in a regular tag, but give it so much padding-top that the content is pushed all the way down to where it's meant to be - Have our footer sitting underneath If that doesn't make a whole lot of sense yet, don't worry it will as you see the site take shape! Step 3 Now in terms of background images, we need two. One is going to be gigantic, and in fact after I saved it as a JPG it is about 56kb in size. There used to be a time where that would have been a bit too big, but these days it's not a big deal. So that's the main area, then we need a second background image which will be a thin slice. This slice will repeat over and over off to the right so that when the browser window is dragged open it tiles out. (Note the logo shouldn't be showing below in the background image, that was just some bad screenshotting, sorry!) You can see the two images I've created here and here. Step 4 OK so now let's start our HTML. First we lay out some basics: PSD vs NET As always it's best to work from the outside in with our layout. So what I've done here is place three major's. The first two are the outside_container / container and the other is the footer. This requires a little explaining: - I've created the outside_container and container because I need a double background image. That is I need a tiling background image, and then on top of that I need that large background image. So in the outside_container I'll place the tiling background, then on the container which will appear on top of the outside container, I'll have that big main background. - The footer needs to be outside the containers because if the browser window were stretched lengthwise, the footer should go on and on. Since it has its own background, it can't be in the containers - if it were and you stretched at some point you'd see the container background and not the footer! Also you'll see I've added some content inside the footer, that's just the mini logo, and the text. I've wrapped the text in a tag so that I can manipulate it. There's no reason to give the tag an id or a class, because we can just say #footer img and since it's the only image in there, we can call it that way. This keeps our HTML a little simpler. Step 5 Now the CSS for our code so far: body { margin:0px; padding:0px; background-color:#11090a; font-family:Arial, Helvetica, sans-serif; } #outside_container { background:url(images/background_slice.jpg) repeat-x #000000; } #container { background:url(images/background_main.jpg) no-repeat; min-height:800px; } #footer { border-top:1px solid #3f2324; padding:30px 50px 80px 50px; } So going through one at a time: - First we are redefining the body tag. This is almost always the first thing I do. We get rid of any default margin and padding, set a background color and a font-family for the page. Notice that the background colour is in fact the footer background colour. As I mentioned previously this is so that if you stretch the browser window vertically you'll keep seeing footer. - Next we have the outside_container tag. I've given it that slice background, it's going to repeat only along the x axis (i.e. from left to right) and wherever there's no background image we'll see straight black (#000000). So basically as the page gets longer the tiles won't keep going because we said to only repeat left-right, instead we'll get the black background. This is perfect because our tiling image fades to black! - Next we have the container. Here we have the gigantic background image set to not repeat - so it only appears once. Notice we didn't specify a background colour, if we had it would have covered our outside_container over. That's because this tag is inside the previous one, and will automatically be stretching out to fill it up completely. So our background image appears on top and then outside that area you can see the outside_container background showing through. - I've also given the container a minimum height, this is just so that when we look at the HTML page at this point you can see roughly how it's going to look when there is content. Later on our content will produce the minimum height anyway. - The footer is basically just a single line border and some padding. There's no need to give it a background colour, because we set that in the earlier. Remember with the padding definitions it goes like this: padding: top right bottom left (clockwise!) Here's where we are up to now... View The Site So Far Step 6 Next we'll finish off that footer by adding a few extra styles like this: /* Footer */ #footer { border-top:1px solid #3f2324; padding:30px 50px 80px 50px; color:#674f5d; font-size:9px; line-height:14px; } #footer img { float:left; margin-right:10px; } #footer span { display:block; float:left; width:250px; } #footer a { color:#9e8292; text-decoration:none; } #footer a:hover { color:#ffffff; } So here I've added a few bits to our #footer class and created a few more classes. Let's go through it one piece at a time: - First of all the bits between /* and */ are CSS comments. It's nice to have comments in your CSS file as it really breaks it up and helps keep things intelligible. Actually on larger projects I find CSS files can get pretty out of control if you're not careful. So it's really good to try to get into good habits early: name your selectors well, add comments, keep like things together, break into multiple CSS files for larger projects and so on. - In #footer I've added a font color, font size and line-height to our previous definition. Line-height is a really useful text attribute as it helps you space out your text. Without good line-height text can look bunched up and harder to read. Too much line-height and the text will be so spaced out it looks weird. So you might want to experiment to find the right heights for different fonts and sizes. Here 14px seemed like a good fit. - Next I've set the #footer img and #footer span to both float:left. Because they are both set to float left, they end up in columns next to each other. I'll talk more about floating and columns later in this tutorial. - Finally we tell the browser what to do with tags (i.e. links) that appear in the footer. Namely that they shouldn't be underlined, and should change color when you hover over with a mouse. So with the addition of the footer here's where up to: View The Site So Far Step 7 Now with the footer out of the way, let's add some more content to the page inside the main container areas. First we need two new images that we make out of our PSD file: Notice that I've used an image for the big text block. In general it's best to use text for these things as it makes the page much more searchable and is good practice. But it would have been much harder to do as we'd need to use a bit of Flash and SIFr to achieve that effect. So since this is a fairly straightforward tutorial I've opted to just use a big image :-) Here's a snippet of our HTML code - just the containers bit: So inside the container area we've added five things: - Our logo: It's linked, so clicking it should take you to the homepage, and has id="logo" - Main menu: This is simply an unordered list with id="menu" - The right hand side menu: This is the same as the other menu, just different id="right_menu" - Big text panel image: This is our main heading text saved as an image, id="panel" - Content Div: And this is where we are going to place all our page content later on. I've left it empty right now except for an HTML comment. So before we start styling it up, it's worth having a look to see how the page looks with just everything dumped on like this: As you can see we're going to have to do some serious shifting around to get everything into place. As you'll recall we're going to use Absolute Positioning to do this quickly and easily. Step 8 Here's the CSS we add to make our elements start to fit into place: #container { background:url(images/background_main.jpg) no-repeat; min-height:800px; width:1000px; position:relative; } /* Logo / Menu / Panel Positioning */ #logo { position:absolute; top:58px; left:51px; } #panel { position:absolute; top:165px; left:51px; } ul#menu { margin:0px; padding:0px; position:absolute; top:145px; left:75px; } ul#right_menu { margin:0px; padding:0px; position:absolute; top:145px; right:75px; } So again let's go through each bit piece by piece: - First of all, you'll see an old bit of our code - the container. I've shown this as I've added two more lines to it now. It now has a width:1000px and position:relative. This is important because when you set position to be relative, anything absolutely positioned inside, is done so relative to that container tag. So this means I can position things inside this box, using the fact that I know it's 1000px wide. Namely I'll be using that for the right_menu. - Next because this is a new set of CSS, I've sectioned it off with a comment - With the logo and panel I've given both an absolute position on the page. How do I know what numbers to use? Simple go back to the original Photoshop document and measure out where they are meant to be! You can see it's a really simple class definition, which is why absolute positioning is so easy. - Next with the two menus, these are also absolutely positioned, but here I've also given them margin:0px; padding:0px; definitions to make sure we clear away any default margins and padding which unordered lists have. - Next notice that on the right_menu when I have specified the absolute position to be right:75px. This means that it will appear 75px away from the right hand side of its container. Ordinarily that would be the browser window, but because remember earlier I set the container to have position:relative that means it will be 75px away form the right hand side of . Now you might be thinking, well what's the point, can't I just position things using left only? Well you can, but with our menu, if you were to add extra menu items you would need to reposition it again and again so that it was still 75px away from the right hand side. Whereas by using right the extra menu items flow left when you add them. Try it and see! So here's where we are at: Step 9 As you can see in the previous image, the logo and heading element are now looking like they are in the right position. But the menus are looking kinda weird. Before we style those, a quick word on the logo / image panel. You might be wondering, if they are both images, why not make them part of the background image? The answer is that the logo we want to make linkable, so that clicking it will take you back to the homepage (makes the site more usable), and the main text panel, well that would probably change from page to page. So by having it a single image, we can have lots of HTML pages using the same CSS stylesheet but simply positioning a different image there with different text. Now let's style the two menus and make our page really start to take shape. To do that we need the following CSS: ul#menu { margin:0px; padding:0px; position:absolute; top:138px; left:75px; } ul#right_menu { margin:0px; padding:0px; position:absolute; top:138px; right:110px; } ul#menu li, ul#right_menu li { margin:0px; padding:0px; list-style:none; margin-right:10px; font-size:9px; text-transform:uppercase; display:inline; } ul#menu li a, ul#right_menu li a { text-decoration:none; color:#bd92b2; } ul#menu li a:hover, ul#right_menu li a:hover { text-decoration:none; color:#ffffff; } The first two bits of this code are the same as before (although I adjusted the positions a little to make them look right after styling). Notice that these two definitions are separate as they have different positions, but after that we've combined the two into the same class definitions as the menu items themselves should look the same. The format for defining two classes together is: .myClass, .myClass2 { ... } This is very different from this definition: .myClass .myClass2 { ... } Because the second definition says, all elements with class="myClass2" inside an element with class="myClass". Anyhow so back to our styles, let's go through some important points: - We've set the - elements themselves to 0 margin and padding, and absolute positioning, as we discussed previously - Then we've said for all - elements inside those - 's we want them to have no list-style (i.e. no bullet points), we want them to 9px, all upper case, and importantly they should display:inline. Inline display means instead of being blocks that appear one below the next, these will appear next to each other! - The next definition says that for link tags that appear inside an - tag that are inside And with that, our page is now looking pretty good! View The Site So Far Step 10 Next it's time to add some content! First let's add some dummy text, set up so that we can make columns. Here's the HTML: a sleek design Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. tutorials Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. recent work Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. OK so in this snippet, you can see I've added 3 new's inside the content area. Each one has a title element and them some text. They have class names column1, column2 and column3. The reason I've added all the extra text is to show you something about making columns. First let's add some CSS to make them appear like columns: /* Content */ #content { padding-top:435px; padding-left:85px; width:815px; color:#674f5d; font-size:13px; line-height:20px; } .column1 { float:left; width:230px; margin-right:30px; } .column2 { float:left; width:230px; margin-right:30px; } .column3 { float:left; width:270px; } As usual I've sectioned off our new bit of CSS with a comment. Then I've set some styles for #content. Notice how much padding-top there is ... 435px! This is to make space for all those absolutely positioned elements earlier. Unlike those elements this content area is in the normal flow of the page. It needs to be in the regular flow because as you add more content to it, it should push the footer down. If this was absolutely positioned it would just go over the top of the footer. Now the three column classes, notice they are each set with a width and with float:left. This tells them that they should drift to the left of the page aligned next to any other left floating elements. I've given the first two a right margin so they aren't stuck to each other. Floating an element makes it drift to the left or right, and tells everything else to wrap around it. When the other elements are also floated, they form into columns. Generally any time you see a column layout, it's using floats. Unfortunately there is one weird problem with floats. Namely that they have a problem with their containers. Instead of pushing the next elements down, they just drift over the top. The way to solve this problem is to have an element that comes after them which has the property clear:both. The Clear property says to stop wrapping stuff around the floating's. It's a bit hard to explain, so let's look at what happens with and without the clearing. Without Clearing Here is how the layout looks as is: See how the columns have drifted over the top of the footer, and the footer itself has started wrapping around them. That's not right!! With Clearing The solution is reasonably simple, we need to add aafter the three columns like this: a sleek design This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. tutorials This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. recent work This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type. The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site. See thedown the bottom? It's just an emptythat says to clear out the three columns. And it fixes our problem, View the Site Here. A Few Last Words on Floats & Clearing Them You might be wondering why I didn't place the "clear:both" into the
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…