http___www.kroativ.net_izdvojeno_kako-napraviti-moderni-web-20-dizajn__1.xml
1.1 2.1 2.2 3.1 4.1 5.1 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 15.1 16.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 30.2 31.1 33.1 35.1 36.1 37.1 38.1 39.1 40.1 40.2 41.1 42.1 43.1 44.1 45.1 46.1 47.1 48.1 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 61.1 62.1 63.1 64.1 65.1 66.1 67.1 68.1 69.1 69.2 70.1 71.1 72.1 73.1 74.1 75.1 75.2 76.1 77.1 78.1 79.1 80.1 80.2 82.1 83.1 84.1 85.1 86.1 86.2 87.1 87.2 88.1 88.2 90.1 91.1 92.1 93.1 94.1 94.2 95.1 96.1 97.1 98.1 99.1 99.2 99.3 100.1 101.1 102.1 103.1 104.1 104.2 104.3 105.1 106.1 107.1 108.1 109.1 110.1 110.2 110.3 112.1 113.1 114.1 114.2 115.1 116.1 117.1 118.1 118.2 119.1 120.1 120.2 121.1 122.1 123.1 124.1 124.2 125.1 126.1 127.1 128.1 128.2 129.1 130.1 131.1 132.1 133.1 134.1 135.1 136.1 137.1 138.1 139.1 140.1 141.1 141.2 142.1 143.1 144.1 145.1 146.1 147.1 147.2 148.1 149.1 149.2 150.1 150.2 151.1 152.1 152.2 153.1 154.1 154.2 155.1 156.1 157.1 157.2 158.1 159.1 160.1 160.2 161.1 162.1 163.1 164.1 165.1 166.1 167.1 168.1 170.1 171.1 171.2 172.1 173.1 173.2 174.1 176.1 178.1 179.1 180.1 180.2 180.3 181.1 182.1 183.1 184.1 185.1 185.2 186.1 187.1 188.1 189.1 189.2 191.1 192.1 193.1 194.1 195.1 196.1 197.1 197.2 198.1 199.1 200.1 200.2 201.1 202.1 203.1 204.1 205.1 205.2 206.1 207.1 208.1 209.1 209.2 210.1 211.1 212.1 213.1 213.2 214.1 215.1 216.1 217.1 218.1 219.1 220.1 221.1 221.2 222.1 223.1 224.1 225.1 225.2 226.1 227.1 228.1 228.2 229.1 230.1 231.1 232.1 235.1 236.1 236.2 237.1 238.1 239.1 240.1 241.1 242.1 243.1 244.1 244.2 245.1 246.1 247.1 249.1 251.1 252.1 253.1 254.1 255.1 256.1 256.2 257.1 258.1 259.1 260.1 261.1 262.1 263.1 264.1 264.2 264.3 264.4 265.1 265.2 265.3 266.1 267.1 268.1 269.1 270.1 271.1 272.1 273.1 273.2 274.1
GFX9.COM share WordPress: beginner to master, part 2, you can download now. Throughout this six-part beginner-to-master series, we’ll be using the advanced features of WordPress to create our own portfolio & blog, complete with an options page, multiple styles and support for the new WordPress 2.7 features. Today, we’re creating our homepage layout. Also available in this series: - WordPress: Beginner to Master, Part 1 - WordPress: Beginner to Master, Part 2 - WordPress: Beginner to Master, Part 3 - WordPress: Beginner to Master, Part 4 - WordPress: Beginner to Master, Part 5 - WordPress: Beginner to Master, Part 6 Jump to a Section - Getting Started - — Outline - Header.php - — Colour Schemes & Stylesheets - — div#head - — div#nav - Styling the Header - — General Styles - — Header Styling - — Navigation Styling - — Some Colour - Portfolio Posts - The Homepage - — Beauty Therapy - Widgetised Area - Footer - Summary Getting Started In this part, we will be creating the front-page for our portfolio, making use of our options page and handling custom-fields in posts. Before getting started, create the following files & folders inside the /wp-content/themes/innovation/ folder you created previously: /cache/ header.php footer.php sidebar.php Also save this TimThumb PHP Image Resizer script as thumb.php inside the /inc/ folder. TimThumb is a ‘smart’ PHP image resizer script by Darren Hoyt. Outline Below is an overview of what our frontpage will look like: Our header.php file will contain the #head and #nav sections – including the opening tags for #wrap, #content and .contentwrap. footer.php will then contain the #footer section, and the closing tags for #content and the last section above it (this could either be .contentwrap, .extraswrap or #sidebar depending on the page). The .contentwrap area will hold the two latest posts from our Portfolio category, and .extraswrap will be a widget-ready area where we can place widgets from the Dashboard. Header.php At the top of the header.php file, include the following code. >    ; charset= " /> As you can see, this is mainly the code you would include at the top of any xHTML Strict document, only we have replaced some sections with a WordPress function which will output the appropriate code depending on the language WordPress is running At the end of the code is our title tag which, again, is using WordPress functions to get the name of the current page, and the name of the site. Colour Schemes & Stylesheets Next, we include our style.css file using the WordPress bloginfo(); function. It is important to use this function to include the main stylesheet, as opposed to directly entering the file path. " type="text/css" media="screen" /> Then is the code for grabbing the correct colour-scheme stylesheet selected from the Options we created in the previous part: /styles/deepblue.css" />   /styles/ " />   /styles/deepblue.css" /> The chart below explains what the above code does: We check whether our colour scheme option ( $ts_colourscheme) exists from the options page, and that it was set correctly (ie. not left as “Choose a colour scheme:”). If the option isn’t set correctly or doesn’t exist, it will default to using the deepblue.css colour scheme; otherwise we use the stylesheet that the was selected from the options page. Continuing on, we include our RSS & Atom feeds, and open the body tag: RSS Feed" href=" " />   Atom Feed" href=" " />  " /> #head The next code is a lot more straight-foward than the previous section. As shown in the image above, we will be using more WordPress functions to retrieve information from the WordPress database: The bloginfo('name'); and bloginfo('description'); functions retrieve the relevant settings from the ‘General Settings’ page in the WordPress dashboard: #nav Retrieving a list of pages from the database is also very easy. We use the wp_list_pages(); function. Note that we also include a title_li= arguement. This is to stop the function from creating an extra list item called ‘Navigation:’ before listing the pages. We’ve also opened the relevant div’s and wrappers for the next section. Styling the Header If you goto your WordPress install now, it will look something like this: Remember we will include any colour styles inside deepblue.css so that we can easily create different colour schemes later. Everything else will go in style.css. General Styles The first thing I always include in my stylesheet is a browser reset, followed by some basic styling for paragraphs, lists, headers and links. *{padding:0;margin:0;} body { font-family: Arial, Helvetica, sans-serif; } p { font-size: 0.9em; line-height: 1.5em; margin-bottom: 10px; } ul, ol { margin: 0 0 10px 10px; } li { font-size: 0.9em; line-height: 1.5em; list-style-position: inside; margin-bottom: 3px; } img { border: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h3, h4 { margin: 15px 0 2px 0; } h4, h5, h6 { font-weight: bold; } a:link, a:visited { text-decoration: none; } a:hover, a:active, a:focus { text-decoration: underline; outline: none; } This should look very straight forward for anyone with basic understanding of HTML and CSS. We have set the margins and padding for all (*) elements to 0 to over-ride the default styles each browser applies to a page. We then include new margins, font-sizes and line-heights for the main elements to increase readability amongst them. Header Styling Next, we create a bit of a layout: #wrap { margin: 0 auto; width: 980px; } #head { margin: 25px 0; overflow: hidden; } #head h1 { float: left; margin-left: 20px; } #head h3 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 0.8em; font-style: italic; float: right; line-height: 1.7em; text-align: right; margin: 0 20px 0 0; width: 500px; } The #wrap element is the container which holds everything. We are using a width of 980px (this is about as high as we can go while still accomodating for 1024×768 resolutions). And we have used margin: 0 auto; to center it in the browser. The title and taglines ( h1 and h3 respectively) are then floated to either side of the container. #head has a property of overflow: hidden; so that it will hold the floated elements correctly. Typically, a div will not wrap around any floated children (as we have here). See the image below as an example (the yellow represents the margin assigned to Navigation Styling #nav { border-top-left-radius: 15px; border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; border-bottom: none; clear: both; padding: 0 20px; width: 939px; } Take a look at the preview images at the top of the tutorial, and you’ll notice we are using rounded corners at the top of the navigation section. Instead of achieving this effect through a bunch of images and extra HTML tags, we’re going to use the new CSS3 border-radius property to give a 15px radius to both the top corners. However, current browsers do not yet support this property, but Mozilla and Webkit-based browsers have their own -moz-border-radius and -webkit-border-radius properties which we can also use to get the rounded corners to work in Firefox 3, Safari and Chrome. Internet Explorer and Opera will simply use a squared border until a they support border-radius. Note: Using these vendor-specific properties in your CSS will stop your stylesheet from validating. But since it will only be these which are stopping the validation – who cares? Continuing on, we style the list items in the navigation to display inline (horizontally): #nav ul { margin: 0; } #nav ul li { display: inline; font-size: 1em; line-height: 1.3em; margin-right: 25px; } #nav ul li a:link, #nav ul li a:visited { display: -moz-inline-stack; display: inline-block; font-weight: bold; text-decoration: none; padding: 20px 10px; } #nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { outline: none; } Note that we are using display: -moz-inline-stack; on the links. This is purely for Firefox 2 and below, which (for some reason) do not support display: inline-block; – even IE6 supports it! We are giving a lot of padding to the links to increase the clickable area (as opposed to padding the li instead). Now have a look at the page in your browser and it should look like this. Better, but now needs some colour! Some Colour Firstly, save the following image into the /styles/deepblue/ folder as bg.jpg. And this image into the same folder as trans.png (it’s actually a dark 1px semi-transparent image). Now, open /styles/deepblue.css, and type: /* Innovation default style - deepblue.css */ body { background: url("deepblue/bg.jpg") no-repeat #101010 top center fixed; color: #333; } a:link, a:visited { color: #5c6e80; } #head h1 { color: #eee; } #head h3 { color: #ddd; } #nav { background: url("deepblue/trans.png") repeat; border: 1px solid #111; } #nav ul li a:link, #nav ul li a:visited { color: #ddd; } #nav ul li.current_page_item a:link, #nav ul li.current_page_item a:visited { background: url("deepblue/trans.png") repeat; color: #eee; } #nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { color: #eee; } We have set the large background image to the body (and fixed it so that it doesn’t move when you scroll), the transparent image is used as a background for the navigation, and we also set some font colours. Preview it, and you’ll now have something like: Portfolio Posts Before creating the top of our homepage where our two latest Portfolio items go, we’ll need a few posts to test with. The theme will be using a few ‘Custom Fields’ to display extra information for the portfolio items: date(the date the work was completed) client(who the work was for) link(to a live version of your work) preview(URL of a 930px width image of your work) preview-full(larger version of the work, will display in a lightbox) Create a new blog post, with the Title being the name of the project (as in the image above), and enter some content about the work. Put the post in your ‘Portfolio’ category. Before saving the post, scroll down to the ‘Custom Fields’ section: Here, enter each of the Custom Fields provided above. Only the preview field is required. You can use the following images for your preview field if you do not yet have one of your own (right-click and save): Once you have filled in the fields, you may Publish the post. Repeat this process until you have at least two posts (preferably more). The Homepage Now we have all the prerequisites done, we can finally code the main part of the homepage. In page-home.php, type the following: Latest Projects  <?php query_posts("cat=$ts_portfolio_cat&showposts=2"); $counter = 0; while (have_posts()) : the_post(); query_posts(); is a WordPress function for getting specific posts from the database. As you can see in the arguements for the function (the parts in the brackets), we are telling WordPress to only get 2 posts from the Portfolio category ( $ts_portfolio_cat is getting the information from the options page we created). With while();, we have started the ‘WordPress Loop’. In here we can get tell WordPress which part from each post we need. $counter++; $preview = get_post_meta($post->ID, 'preview',true); $date = get_post_meta($post->ID, 'date',true); ?> On the first line, we have added one to the counter (we will be using this shortly). $counter++; is short-hand for writing $counter = $counter + 1; We then use the get_post_meta(); functions to get our ‘preview’ and ‘date’ custom fields from the post – which are placed into the $preview and $date variables respectively. Above we have created a div with a work class for the portfolio item to be held in. But notice that we are also checking that if our $counter equals 2 (meaning this is the second portfolio item), we add another class to the div named last. This class will come in handy when we style this section. Next, we output the preview image: If a preview image exists, then we… The the_permalink(); function is used to output the link to the current post. Then, we output the preview image. But we are also running it through the TimThumb resizer in order to resize the image to 450px in width and 210px in height (from the 930px image it actually is). Note how we use bloginfo('template_directory'); to ensure WordPress is checking in our theme folder (it’s an equivilant of the TEMPLATEPATH we used in the previous part in the series). We now just need to output the line of text which goes below the image (the title, and the date): ">      ($date) "; } ?> This is relatively straight-forward. We use the_permalink(); again to get the link for the current post. the_title(); is used to get the current post’s title. We then check whether a ‘date’ custom-field was entered (in the $date variable) for this post. If so, we output it. Finally, we close the current work div, close the WordPress Loop with endwhile; and close the contentwrap div which was created in the header. Beauty Therapy Take a look at the homepage in your browser, to see this wonderful masterpiece: Ok, maybe not; but nothing a little CSS can’t fix up. Add the following into style.css: #content { -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; float: left; padding: 19px 19px 30px 0; margin-bottom: 5px; overflow: hidden; width: 960px; } .contentwrap { padding-left: 19px; overflow: hidden; } #content h2 { font-weight: bold; letter-spacing: -1px; margin-bottom: 10px; } #content is the wrapper to hold all the main content. We’ve added rounded borders to the bottom of it, using the same method we used on the navigation. Inside deepblue.css add the following to add a light background colour to #content, as well as define the border colour: #content { background-color: #f9f9f3; border: 1px solid #111; border-top: none; } Obviously the items need to be displayed inline (side-by-side). We’ll do this by simply setting float: left; to both along with some margins inside style.css: .work { float: left; margin: 0 20px 40px 0; width: 460px; } .work a { outline: none; } .work p { font-size: 0.9em; font-weight: bold; margin: 8px 0 10px 0; } .worksingle p { font-weight: normal; } .work span { font-size: 0.8em; font-weight: normal; } Preview it, and you’ll notice that the items are still display below each other. A quick check with Firebug reveals it’s down to the second item not having enough room for the right margin. This is where that counter adding class="last" to the second item comes in: .last { margin-right:0 !important; } We’re not quite yet finished. Take a closer look at our final-product image, and you’ll notice we also need to set a border around the portfolio image, which changes colour on hover. Add the following colour styles to deepblue.css: .work a:link img, .work a:visited img { border: 5px solid #e3e8ed; } .work a:hover img, .work a:active img, .work a:focus img { border: 5px solid #5c6e80; } .work a:link, .work a:visited { color: #333; } Widgetised Area The .extraswrap area of the homepage is widget-ready (3 widgets max) – meaning we can add and manage them directly from the WordPress Dashboard – just as you would for a widet-ready sidebar: Firstly, we need to tell WordPress to create a new widget area using the register_sidebar() function. The following code goes at the end of your functions.php file: if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'Homepage Bottom', 'before_widget' => ' ', 'after_widget' => ' ', 'before_title' => ' ', 'after_title' => ' ', )); } Inside register_sidebar() we pass an array containing some information for our widget-area. The name is used to identify it when we have multiple widget-areas (or sidebars). before_widget and after_widget is the code used to wrap each individual widget. By default, this would be a list item; we’re using a div instead. before_title and after_title is what’s used to wrap the individual widget’s title. Now, to include this widget onto our homepage, add the following on to the end of page-home.php: We first open our wrapping div, and then use the dynamic_sidebar(); function – through which we pass the name of the widget-area we used previously, when registering the area. Finally, we include our footer.php file using the get_footer() function (in the same way we included the header). Go ahead and add three test widgets to the area via Appearance -> Widgets -> ‘Homepage Bottom’. And preview it: To display them all inline, use the following code in style.css: .extraswrap { margin-top: 10px; overflow: hidden; } .extras { float: left; margin: 0 0 0 20px; width: 300px; } We’re also going to style a Flickr & Twitter plugin. Firstly, install the FlickrRSS and Twitter for WordPress plugins. From Settings -> FlickrRSS, enter your Flickr ID number using the instructions provided (or use mine: 31912870@N03), set it to use 9 square images; and for the HTML Wrapper section, use: Before Image: After Image: This will allow us to style & position the images easily. Go ahead and swap two widgets on the homepage area to the Flickr and Twitter ones (remember to enter your Twitter details under the ‘Edit’ section on the widget). Enter the following styling into style.css: /* style FlickrRSS widget */ .flickr { display: inline; } .flickr a:link img, .flickr a:visited img { margin: 0 10px 10px 9px; } /* style Twitter widget */ ul.twitter { margin: 0; } ul.twitter li.twitter-item { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; list-style: none; margin-bottom: 20px; padding: 8px 10px; } ul.twitter li.twitter-item span abbr { border-bottom: none; display: block; font-size: 0.8em; font-style: italic; margin-top: 3px; } The Flickr styling displays each image inline, and sets appropriate margins to fit three images per row. In the Twitter styles, we’ve added some margin & padding to seperate each tweet, and we’ve also used border-radius again. Also add the following to deepblue.css: .flickr a:link img, .flickr a:visited img { border: 3px solid #e3e8ed; } .flickr a:hover img, .flickr a:active img, .flick a:focus img { border: 3px solid #5c6e80; } ul.twitter li.twitter-item { background-color: #f6f5ed; border: 1px solid #eae9de; } Each Flickr image now has a border we can hover over, similar to what we used for the portfolio images. Footer Inside footer.php insert the following code. We close the appropriate tags and include a copyright notice. Feel free to remove the mention of myself & NETTUTS from it, although it’d be appreciated if you gave a link back to us somehow. We also include the Google Analytics code from the options page. Copyright ©  . Design by  Dan Harper  for  NETTUTS . Powered by  WordPress . Add the following to style.css: p.footer { clear: both; font-size: 0.7em; font-style: italic; padding: 5px 20px; } And to deepblue.css: p.footer { color: #ccc; } p.footer a:link, p.footer a:visited { color: #ccc; border-bottom: 1px dashed; } p.footer a:hover { border-bottom: 1px solid; text-decoration: none; } Summary That concludes Day 2 of WordPress Week, and we got quite a lot done! Tomorrow, we’re moving to the ‘Blog’ page layout and learning how to style ‘single posts’ differently dependent on what category they are in. Part 3 – Styling The Blog
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…