Leviathan - January 2013 Template Demo

Features

image
Gantry 4 Framework
image
HTML5 and CSS3

Top FeatureTop Features

image

Responsive Layout

Multiple device support, for mobile, tablet or desktop displays, that are automatically adjusted to.
image

Integrated Extensions

Template specific styling for several extensions such as RokSprocket and K2.
image

Responsive

Multiple device support, for mobile, tablet or desktop displays.
  • Gantry 4 Framework

    Gantry 4 Framework

    The main feature of Gantry 4 is its responsive layout, allowing any template built with it to automatically adjust to the viewing device.
    An assortment of other features are included such as an intuitive and comprehensive administrative template interface, allowing you to configure Gantry with ease.
    Gantry 4 offers a responsive layout for adapting to different viewing devices. Read More
  • Powerful RokSprocket

    Powerful RokSprocket

    A multi-faceted content display module, that has support for several layout modes: Tabs, Headlines, Mosaic, Lists and Features.
    RokSprocket has a custom administrative interface that provides you with extensive controls, allowing you to configure your ultimate content layout swiftly and easily.
    A content display module, that supports several layout modes, such as Tabs. Read More
  • Multiple Variations

    Multiple Variations

    Leviathan comes with an assortment of eight stunning preset style variations to choose and configure to your own personal tastes.
    A selection of module variations are also available, both structural and stylistic, that allow you to individually style and construct your modular content.
    Leviathan comes with an assortment of eight stunning preset style variations. Read More
  • DropDown Menu System

    DropDown Menu System

    A CSS driven dropdown menu with advanced features such as inline modules, subtext, icons, multiple columns and much more.
    Configure all options on a per menu item basis in the Menu Manager for full control. There are options for both the dropdown menu and SplitMenu.
    A CSS dropdown menu with advanced features, such as inline modules. Read More
  • 1
  • 2
  • 3
  • 4
  • All
  • Photos
  • Sports
  • Travel
  • Default
  • Title
  • Date
  • Random
  • Leviathan has a responsive layout, it adapts to the widths of the viewing device, as powered
    Read More
    • Photos
    • Sports
  • Increase the speed of your site by enabling the RokBooster plug-in which will compress and combine
    Read More
    • Sports
    • Travel
  • The Gantry Framework sits at the core of the template, providing the base for the major
    Read More
    • Photos
    • Travel
load more hold SHIFT key to load all load all

Top Template of the Year

css dersleri

CSS’e başlamak

Cascading Style Sheets (CSS) HTML ‘deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır.

CSS 1996′da W3C tarafından duyuruldu. Son olarak CSS2.1 versiyonu işler durumdadır. CSS3.0′da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz.

CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:

Görünüm Avantajları

CSS HTML’e göre bir çok stil özelliğine sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.

  1.   
  2. <h1>CSS'e Giriş</h1>  

HTML’de bu elementi(h1) kalın,altı çizili, ardalanı kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız (örn:strong, gibi), ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

  1.   
  2. h1 {   
  3. colorwhite;   
  4. fontitalic 11px Arial, serif;   
  5. text-decorationunderline;   
  6. background: yellow url(titlebg.gif) repeat-x;   
  7. border1px solid red;   
  8. margin-bottom0;   
  9. padding5px;   
  10. }  
Kullanım Kolaylığı

HTML’de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptımızı düşünütseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.

  1.   
  2. <h1><font color="blue">Başlık</font></h1>  

Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS’de aynı işlem için

  1.   
  2. h1 {colorblue;}  

hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.

  1.   
  2. h1, h2 {colorblue;}  

Ayrıca tek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.

Tasarım Tutarlılığı

Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. CSS+XHTML ile HTML göre %50′ye varan performans ve hız artışları olacaktır.

Gelecek Vaadediyor

HTML giderek işlevselliğini kaybedeceği ve XML ve dolayısı ile XHTML’in işlevselliğini artıracağı düşünülürse, CSS gibi tümleşik bir stadardın önemi daha çok anlaşılıyor.

XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda,cep telefonu vs.) uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları tarafından daha anlaşılır olacaktır. CSS, XHTML teknolojisi ile tümleşik olarak çalışarak bizlere gelecek vaadediyor.

Bugün 7 ziyaretçi (14 klik) kişi burdaydı!

Popular Features

  • RokSprocket Module
  • Menu System
  • Integrated Extensions
  • Styling

RokSprocket is a powerful and multi-faceted content display extension, that combines many different layout modes; with a custom built user interface. The UI has AJAX support, for easy and efficient control, such as dynamic filters.

image

Tabbed ContentTabs

Tabs mode displays your content within dynamically adjusting tabs.

image

Mosaic Mode

Mosaic is a dynamic ajax content display mode, perfect for content sites.

A dynamic ajax content display layout mode.

image

More Layout TypesLayouts

Also included are the headlines, lists, and features modes.

Headlines, lists, and features modes.

image

SplitMenu

Displays parents in the header and children in the sidebar.

image

Dropdown Menu

A CSS dropdown menu system, enhanced with Mootools.

image

Mobile Devices

A panel or selectbox menu is loaded when a small screen is detected.

Features include multiple columns with individual distribution settings, inline modules / module positions as well as inline subtext and icon support.

Features include multiple columns with individual distribution settings, inline subtext support and others.

image

RokGallery

A versatile gallery addon based on a custom-tagging architecture.

image

RokBooster

A powerful performance plugin that collates CSS / JS files.

image

RokAjaxSearch

Powerful module that brings fantastic search functionality.

Offers AJAX powered real time search results.

image

RokSprocket

A content switchblade extension that has multiple layout modes.

image

Preset Styles

8 style variations are available, each are individually configurable.

image

Typography

Individualize your content with typography such as custom list.

image

Module VariationsSuffixes

There are 8 stylistic module variations, with 25 structural suffixes.

There are 8 stylistic module variations.

image

Image Source FilesSources

Adobe® Fireworks PNG Sources are provided for easy customization.

Adobe® Fireworks PNG Sources.

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol