http___www.kroativ.net_izdvojeno_kako-napraviti-moderni-web-20-dizajn__1.xml
1.1 2.1 2.2 3.1 3.2 3.3 4.1 4.2 7.1 8.1 9.1 10.1 15.1 17.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 35.1 36.1 37.1 38.1 39.1 40.1 40.2 41.1 42.1 42.2 43.1 43.2 44.1 45.1 45.2 46.1 47.1 48.1 48.2 49.1 51.1 52.1 52.2 53.1 55.1 55.2 55.3 56.1 57.1 58.1 58.2 59.1 60.1 61.1 62.1 64.1 65.1 66.1 67.1 68.1 69.1 71.1 72.1 73.1 74.1 75.1 76.1 77.1 77.2 79.1 80.1 80.2 80.3 81.1 81.2 81.3 82.1 83.1 84.1 85.1 87.1 88.1 89.1 90.1 91.1 93.1 94.1 94.2 95.1 96.1 97.1 98.1 98.2 99.1 99.2 100.1 102.1 103.1 103.2 104.1 105.1 105.2 106.1 106.2 107.1 109.1 109.2 109.3 110.1 112.1 112.2 112.3 113.1 113.2 114.1 114.2 114.3 114.4 114.5 115.1 116.1 117.1 118.1 119.1 120.1 120.2 120.3 121.1 121.2 122.1 122.2 122.3 124.1 125.1 127.1 129.1 129.2 130.1 131.1 131.2 131.3 135.1 136.1 137.1 137.2 139.1 140.1 144.1 144.2 144.3 145.1 145.2 145.3 145.4 146.1 146.2 147.1 147.2 147.3 148.1 152.1 152.2 152.3 152.4 153.1 165.1 165.2 165.3 166.1 166.2 166.3 167.1 167.2 168.1 168.2 168.3 169.1 170.1 171.1 172.1 173.1 174.1 175.1 176.1 177.1 178.1 179.1 181.1 181.2 181.3 182.1 183.1 184.1 184.2 185.1 185.2 185.3 186.1 186.2 187.1 187.2 187.3 187.4 188.1 189.1 190.1 191.1 192.1 193.1 194.1 195.1 195.2 196.1 196.2 196.3 196.4 196.5 196.6 196.7 196.8 197.1 197.2 198.1 198.2 199.1 199.2 200.1 201.1 201.2 201.3 202.1 202.2 202.3 203.1 203.2 204.1 205.1 206.1 207.1 208.1 208.2 209.1 209.2 209.3 209.4 209.5 210.1 210.2 210.3 211.1 212.1 212.2 212.3 212.4 213.1 213.2 214.1 214.2 214.3 214.4 214.5 215.1 215.2 215.3 215.4 215.5 216.1 216.2 216.3 216.4 217.1 217.2 217.3 217.4 218.1 219.1 219.2 220.1 220.2 220.3 220.4 220.5 220.6 222.1 223.1 224.1 224.2 224.3 225.1 226.1 226.2 226.3 227.1 233.1 241.1 242.1 242.2 243.1 249.1 250.1 251.1 252.1 253.1 254.1 256.1 257.1 257.2 259.1 274.1 274.2 275.1 275.2 275.3 276.1 277.1 278.1 279.1 281.1 282.1 282.2 282.3 283.1 283.2 284.1 284.2 284.3 288.1 289.1 290.1 296.1 297.1 298.1 299.1 300.1 301.1 302.1 303.1 304.1 305.1 305.2 306.1 307.1 307.2 308.1 309.1 310.1 310.2 311.1 311.2 311.3 312.1 312.2
If you prefer to display all your content in a long one-page layout, KC Documenter provides just that with a scroll spy for easy navigation and dynamic search for filtering titles. You can choose the articles you'd like to create a document from using the edit screen in the admin area. The order of the articles to be included is based on the drag and drop article list order. Each document includes optional header and footer areas. The text for header and footer areas is entered in the document edit screen. We are using document header area for this instructional text. If you used setup assistance during plugin activation, a page including the shortcode for Article Wall is created. If you did not, deactivate and reactivate the plugin to see setup assistance again or just include the following shortcode in a page: ">HOME RECIPES TRAVEL WORDPRESS ">HOME WORDPRESS #navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; } #navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; } #navmenu li {display: inline; } #navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; } #navmenu li {display: inline; padding: 5px 20px 5px 20px} #navmenu a {text-decoration:none; color: blue; } #navmenu a:hover {color: purple; } #navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; } #navmenu li {display: inline; } #navmenu ul li a {text-decoration:none; margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink;} #navmenu ul li a:hover {color: purple; background: yellow; } Archives: Categories: ',';', wp_list_categories('style=&show_count=1&echo=0'));?> If you have set your WordPress site to display post excerpts on the front or home page, you will want visitors to click on the title or a link to encourage them to continue reading your post or article, right? WordPress makes this technique easy, and customizable. Excerpts (teasers) can be shown on WordPress through two methods: In both cases, if you have set anything in the Excerpt meta box on the post editor screen, that text will be used. Otherwise, the excerpt will be automatically trimmed. The most commonly used method is the first one, because the user editing the post can choose between showing the whole content or just the excerpt, individually for each post. However, using the_excerpt() in your template file can also get a teaser from the first 55 words of the post content, without the need to place a more quicktag in the post. To add a more quicktag in your post, put your cursor where you want to end the excerpted content of your post and click the more quicktag button. quicktags are the little buttons found above the editing window in your Administration > Write > Post SubPanel. They include bold, italic, links, and others, and the famous more. It will insert a code at that point that looks like this: and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said The rest of the post continues, but when viewed on the non-single/non-permalink web page such as archives, categories, front page, and searches, the post is shown as an excerpt to the more point. Users can then continue reading more as you have enticed them with your summary introduction, by clicking on a link to the full article. Themes usually include this link in the title and the above methods will generate it by default trailing your teaser, as the example below. The parameters within the template tag the_content() are as follows: The $more_link_text sets the link text like "Read More". The second one, $strip_teaser, sets whether or not the "more" link should be hidden (TRUE) or displayed (FALSE). The default is FALSE, which shows the link text. To remove the teaser: the_content('',FALSE,''); By default, clicking the .more-link anchor opens the web document and scrolls the page to section of the document containing the named anchor (#more-000). This section is where writers choose to place the   tag within a post type. Users can prevent the scroll by filtering the content more link with a simple regular expression. function remove_more_link_scroll( $link ) { $link = preg_replace( '|#more-[0-9]+|', '', $link ); return $link; add_filter( 'the_content_more_link', 'remove_more_link_scroll' ); Simply add the above code to the theme's functions.php file and the named anchors are no more. Adding this code to your functions file enables you to customize the read more link text. add_filter( 'the_content_more_link', 'modify_read_more_link' ); function modify_read_more_link() { return ' Your Read More Link Text '; Code reference: https://developer.wordpress.org/reference/hooks/the_content_more_link/ Sometimes you can't afford adding a more quicktag to all your posts, so the only way to show an excerpt is modifying the template, changing the_content() to the_excerpt() but that will just show "[...]" at the end, not a "more…" link to the full post. To show a "more" link, add the following code to your functions.php file. // Replaces the excerpt "more" text by a link function new_excerpt_more($more) { global $post; return ' ID) . '"> Read the full article... '; add_filter('excerpt_more', 'new_excerpt_more'); If you are using a Child Theme , the above code will not work without modification if the parent theme has its own filters setting its own "more" link. You will need to use the remove_filter() function to remove the parent's filters for yours to work. The problem is your functions.php file is loaded before the parent's functions.php, so at the time of your file's execution, there is no filter to remove yet, and your remove_filter() code will fail without warning. The key is to put your remove_filter() code in a function that executes from an action hook that triggers after the parent theme is loaded. The following code is an example of the additional code needed to get the above code to work from a child theme of the parent theme twentyeleven. You will need to examine your actual parent theme's code for the correct parameters in the remove_filter() code, they must exactly match the add_filter() parameters used by the parent. function child_theme_setup() { // override parent theme's 'more' text for excerpts remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' ); remove_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' ); add_action( 'after_setup_theme', 'child_theme_setup' ); Seeing that you know how it works, now look at how we can make this little invitation to continue reading your post be more inviting. By design, the the_content() template tag includes a parameter for setting the text to be displayed in the the "more…" link which allows you to continue reading. By default, it looks like this: If you want to change the words from more.... to something else, just type in the new words into the tag: Or get more sophisticated and make it fun: <?php the_content('...on the edge of your seat? Click here to solve the mystery.'); ?> You can style the text in the tag, too. ...on the edge of your seat? Click here to solve the mystery. Then set the moretext class in your style.css style sheet to whatever you want. Here is an example of the style which features bold, italic text that is slightly smaller than the default text: Some people do not want the text and prefer to use an extended character or HTML character entity to move the reader on to the full post. Would look like this: There is another parameter in the_content() template tag which will include the title of the post in the more text. Through the use of the_title() tag, the title of the article is included: <?php the_content("...continue reading the story called " . the_title('', '', false)); ?> Although the_content() is usually called from the template with a standard text as described above, it is possible to have an individual text for certain posts. In the visual editor, simply write  . So, you may have something like this: The design possibilities with CSS are practically unlimited, and WordPress allows you to use images in many of their Template Tags , including the more tag. To add an image, there are two ways to do it. Begin with the most simple -- listing it in the_content() template tag. This examples features the image of a leaf after the "Read More" text and assumes that the image file is within your theme's images folder. Notice that the code uses an ALT and TITLE in the image tag. This is in compliance with accessibility and web standards, since the image is both an image and a link. Here is what it might look like. You could even add a style to the image and more tag, as mentioned above, to style it even more. To use the image without the "Read More" text, just delete the text. The second example uses the CSS background image. We have described how to use style classes in the above examples. This is a little tricker. The container's style must be set to allow the background image to show out from behind the text. If you were to use the above example as a background image, the style.css style sheet for this might look like this: .moretext { width: 100px; height: 45px; background:url(/images/leaf.gif) no-repeat right middle; padding: 10px 50px 15px 5px} The 50px padding against the right margin should make sure the text is pushed over away from the image as to not overlap it. The height ensures that the container will expand wide enough so the image is visible within the container, since a background image isn't "really there" and can not push against the container's borders. You may have to experiment with this to fit the size and shape of your own image. You have gotten the basics. From here, it is up to your imagination. Please remember that the "Read More" tag is used only on the Home page which shows the latest posts. It does not work in " Pages ". If you want to turn it on in Pages too for showing a set of partial posts, use the following code inside the loop for the dynamic content: global $more; $more = 0; //The code must be inserted ahead of the call the_content, but AFTER the_post() It's important that if you're going to over-ride the default $more global variable you do it inside The Loop, but after your setup the post. If you're working with the standard Loop and using the_post(), make sure you set $more after the_post (but before the_content(). See More tag ignored on static front page forum topic. If you set the $more variable to -1, the More tag will not be displayed. This can be useful in a "mullet loop". Like this: if ($more == -1) { //do not use the more tag on the first one. the_content(); $more = 0; //prevent this from happening again. use the more tag from now on. else { //use the more tag the_content(__('Read more...')); They say you can not judge a book by its cover, and yet every day people do. They pick up a book, look at the cover, and then are moved to either put it down, turn it over, or open it up just because of how the cover looks. Websites are also judged by their covers and the first impression often comes from the header. The header of your site is typically the first thing people see. From this masthead or header art across the top of your page, people make sweeping judgements about what they are about to see and read. The same people who say you can not judge a book by its cover, also say that you only have 30 seconds to make a good impression. In the world of the Internet where the next web page is a click away, you have much less than that. We are going to take you inside the architecture of a WordPress header and offer tips on how to customize it to become your own book cover, enticing people into your site with a good first impression. Then we will offer some tips from some experts on what makes a good website header. By default, the WordPress header is a simple piece of code. You do not have to get into the code to change the header that comes with whatever WordPress Theme you choose. You set the blog or website title and description in the Administration > Settings > General panel, and WordPress does the rest. In its simplest form, the WordPress Classic Theme features the header code like this in the wp-content/themes/classic/header.php template file: The header is set in an h1 HTML tag and features one template tag used with two different options or parameters. You can learn more about these parameters in the documentation for bloginfo() . Basically, the first one displays the URL of the website in a link, and the second one displays the name of the blog or website as set in the Administration > Settings > General panel. When the user moves the mouse over the header title, the header can be clicked to return back to the main or front page of the site as set in the Administration > Settings > General panel. The WordPress Default Theme features an image in the background and presents the header like this in wp-content/themes/default/header.php: Again, the template tag featuring the name of the blog or website is in a link, but this shows another usage similar to the URL request above. It gets the same information, just in a different way. It also adds the description of the site from the Administration > Settings > General panel. Basically, these two header examples do the same thing in different ways. They provide information in the header, with the potential for an image, and make the header title clickable to help navigation on the site. It is just a matter of how much information you want in your header, and how that information is displayed. Using the first example from the Classic Theme, an image can still be used in the background, set within the style sheet in the h1 selector, but the second one gives more control to the use of an image in the header by giving it its own division. How these look are totally controlled by the style sheet. As listed in the two above examples, the styles for the header are contained within the h1, header, headerimg, and description CSS selectors. These are all found within the style.css, though may be found in the styles in the header.php of the Theme you are using. You will have to check both places. In the Classic Theme, the CSS for the header are found in one selector, the #header. #header { background: #90a090; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% 'Times New Roman', Times, serif; letter-spacing: 0.2em; margin: 0; padding: 15px 10px 15px 60px; The background color is set to a green shade and there is a border all the way around the header which changes colors creating a recessed, shadow effect. The Times font is set with a size of 230% with a wider than normal letter spacing. The padding on the left side indents the text in from the left. All of these can be easily changed, giving the border a thicker width and making it all the same color, changing the background color, the font size and style, the letter spacing, and more by modifying the information in each style attribute. The same is true of the Default WordPress Theme header, except there are more styles to think about and they are found within the header.php's "head" tag and the style.css, though once you have your styles set, you can move the information into your style sheet. The styles that control the header's look are found within the h1, header, headerimg, and description CSS selectors. Just like the Classic Theme, find these references and make your modifications there to change the look. Changing the header image of the Default WordPress Theme has been simplified with the introduction of a utility called Kubrickr . It simply asks you to supply a new image file name for the header and then switches it for you, so you do not have to dig into the code. If all you want to change is the header image, this is an extremely useful and easy tool. If you do want to get your hands into the code, dig into your header styles and make the changes. Below is a simple tutorial on changing just the header image manually. There are many different header images and header art available for you to use to change the image in the header. The styles for the header image for the Default or Kubrick WordPress Theme, and any Theme based upon that Theme, are more complicated to change than those for the Classic Theme. The styles are found within the styles in the header.php "head" section, as well as in the styles.css. To change only the header image reference, open the header.php template file and look for the styles like this: #header { background: url(" /images/wc_header.jpg") no-repeat bottom center; } #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; } To change the image file, replace the "kubrickheader.jpg" with the name of the new graphic image you have uploaded to your site to replace it. If it is in a different directory, change that by replacing the bloginfo() tag with the specific address of the graphic's location. If you are using an image that is the same size, then simply replace the image. If it is a different size, fill in the height and width of the image in the next section called #headerimg. If you do not know, and are using Windows, view the folder in which the image resides on your computer in Thumbnail view mode. Click View > Thumbnail from the Windows Explorer menu. In Thumbnail view mode, find your image and hold the mouse over it. A small balloon tip will pop up listing the dimensions. Use that information in the styles. Otherwise, just right click on the image file and choose Properties and it should give you the file size and dimensions. Save the template file and upload it and the image to your website and take a look . Some changes may need to be made to fine-tune the placement and look. With the header image in place, it is time to tackle the rest of the header. Open your style.css style sheet file and look for the following: Your Theme may or may not have all of these, but the Default Theme has all of them in different places within the style sheet. All or some of these may need to have the attributes changed to change the look of your header. If you change the size of the header image or header art, be sure and change the other structural CSS selectors like content and sidebar to accommodate the change in the header size. A header image that fits within the Default WordPress Theme is about 192 x 740 pixels. If you are replacing the header within any WordPress Theme, check the size of the header image and then find a replacement that matches that size. If you choose a header image that is smaller or wider or taller than the replacement, you may have to modify the other structural elements of the web page to allow for the change in size of the header. If you are modifying the entire site's Theme, the width of the overall page or content area needs to be taken into consideration for the header image's size. The two most common screen sizes are 1024x768 and 800x600 pixels. Yet, wide screen monitors are gaining ground and web designers now need to prepare for screen widths of 1280x1024 and 1600x1200. If you set your website to "float," positioned in the middle of the browser window with space on either side, then you can set your header width to whatever you want. If you are designing a Theme with a flexible or "elastic" screen width, then the width of your header becomes important. If you are using a header image that can be repeated, and you are using elastic widths, you can set the styles within the header to repeat to fill the space: #header { background: url("/images/kubrickheader.jpg") repeat-x top left; } This sets the header image to repeat horizontally beginning from the top left corner and going across. You can adjust these to whatever background position your header design and layout needs. A new term growing in the web design field is header art. These are header images that are usually handmade using combinations of color, shapes, symbols, images, and text. They can take some time and labor to create. While there are some free header art sites , some sites sell their handmade header art. Although a photograph may be unique in its own way and convey the needed visual style, handmade header artwork is easier to match to other web page colors and is usually more aesthetically pleasing because of its distinctive nature. Choosing pre-made header art has some benefits. The artists have already done the work and all you have to do is choose the design that best matches your website. And the graphic is ready to use, already sized and saved as a small file size. Digital Westex's WordPress Header Art features a wide range of header art sized and ready for free download specifically for WordPress. The best header art to use, if you do not want to generate your own, is any that bear the Creative Commons License that specifically allows its public use. Read the individual license for the image's use to make sure that you have permission to use the header art on your site. Usually you must attribute the author, share alike and not use it for commercial purposes. If in doubt, always ask permission from the author before use. As header art is made and licensed "as is" by the designer/artist, some header art cannot be modified without the artist's permission. Check the website copyrights and licenses and ask if you are in doubt and wish to modify the artwork. You can also design your own header art. Any graphic design software program will work. Popular ones include Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp and Macromedia Fireworks. The graphic design software should have the ability to resize and control the resolution and type of the image when saved. The size of your header art should be the size of the header container you're going to put it in. You can use your own photographs, artwork, fonts, and any combination of images to create your header art. When done, save it "for the web" as a jpg, gif, or .png file. For an explanation on which to use read Sitepoint's GIF-JPG-PNG What's the Difference article. These file types will compress the image's resolution, reducing the file's size. In general, avoid file sizes larger than 50K as larger sizes tend to slow a site access times. Many Themes and Theme designers want to feature their header with a picture only, no text. Some will put the text in the graphic image, therefore not requiring the actual use of the text. One option is to remove the template tags that generate the title and description. The other option is to leave it in, but hide it. To hide the header text while leaving it in the code, do not change anything in your template files. Only change the CSS. Add display:none to the CSS selectors you do not want to appear. For example, to hide the text within the h1 selector: h1 {display:none; font-size: 230%; color: blue;....... It is still there, but the browser has been commanded to not show it in any way. The container literally is "not there." It might be hidden, but some web page screen readers and search engines will still find the information. If you are serious about making your site be accessible, some newer text readers access the style sheet and do not read the elements marked display:none. There are two popular methods for working around this. One is to use the display:none as outlined above, but also include an aural style sheet that changes that selector to display:block, "turning the visibility" back on. The other method is to position the content literally "off the page" by a negative indent. Here is an example: font-size: 0; text-indent: -1000px; } This technique moves the entire h1 tag and its contents physically off the web page. The screen reader will still "read" the text because it is there, but it will not display on the page. Extensive testing has proven so far that this technique works across most browsers and with all screen readers. For more information on either technique and aural style sheets: To make the entire header, graphic and all, clickable, you must put the header graphic inside of a link. There are two ways to do this. You can put the graphic directly into the WordPress Theme manually, or you can use the stylesheet to define the link size area to encompass the header art area. To make the header art clickable by embedding it into the header, in the wp-content/themes/classic/header.php template file of your WordPress Theme, change the following: to this code snippet: You can style the h1 heading to overlap or sit below, or not even be visible in the header. To make the overall area of the header clickable, the header must have a width area set for the h1 anchor HTML tag to make the clickable area cover the header image in the background. The styles are set in the stylesheet. The HTML and WordPress Template Tags look like this, the same as above: The CSS would then be styled something like this to enlarge the clickable link area and hide the header text (optional), customized to your own design needs. #header h1 a { width: 400px; height: 100px; display: block; background: url(images/headerimage.gif) no-repeat top left; #header h1 a span { display: none; } Another option is to add a script to make the header section clickable, which may not work for all browsers. This is showcased in the Default WordPress Theme (Kubrick) with its clickable header: If you want both text areas of the header to be clickable and not the entire header image, use the following to make the header art and the blog title and description clickable. There are several scripts available that will allow you to rotate images within the header, sidebar, or on any template file. We will examine the use of one of these, the Random Image Rotator . Save the script to a separate folder in which you have the header images you wish to rotate in your header. For this example, call it rotate.php. To use this as a background image that changes or rotates with every load of the web page: #header { background: url("/images/headerimgs/rotate.php") no-repeat bottom center; } To actually put this in your header, or elsewhere on your site, add an image link like this within the header division: Image rotating scripts include: Headers are another area where you can add navigation elements to your website. Typically these are horizontal menus at the top or bottom of your header. To add these, create a new division within the header to style your header navigation elements. This can be as simple as displaying your categories across the top of the header using one of the List Categories template tags . Let us look at one example using the list_cats() tag. In this example, the list_cats() template tag is set to sort the list of categories by ID in an unordered list (  ) without dates or post counts, does not hide empty categories, uses category "description" for the title in the links, does not show the children of the parent categories, and excludes categories 1 and 33. It sits in its own "category" division. Notice that a link to the "home" page or front page has been included manually at the start of the list. HOME <?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE, FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE, To style this list, the #categorylist in the style.css might be: #categorylist {font-size:12px; font-style:normal; text-transform:uppercase; } #categorylist ul {list-style-type: none; list-style-image:none; margin:0; padding-bottom: 20px; } #categorylist li { display: inline; padding: 0px 5px;} #categorylist a:link, #category a:visited {color:blue} #categorylist a:hover {color:red} It might look like this: You can also add your Pages , archives, and other links within your header navigation. For more information on navigation menus: Here are some tips and information to help you choose and customize your WordPress site's header. Many WordPress Themes come with header image graphics you can use because they are released for free use under the GPL - General Public License . Or you can use one of the many resources available for free on the Internet, or design your own. Here are a few resources for header images: If you prefer to display all your content in a long one-page layout, KC Documenter provides just that with a scroll spy for easy navigation and dynamic search for filtering titles. You can choose the articles you'd like to create a document from using the edit screen in the admin area. The order of the articles to be included is based on the drag and drop article list order. Each document includes optional header and footer areas. The text for header and footer areas is entered in the document edit screen. We are using document header area for this instructional text. If you used setup assistance during plugin activation, a page including the shortcode for Article Wall is created. If you did not, deactivate and reactivate the plugin to see setup assistance again or just include the following shortcode in a page:
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…