VIA:http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/
在任何良好的设计中,组织内容可能是最重要和最有影响力的一个方面。将信息组织到内置布局中是网站的基础,是网站塑型前应该关切的事情。网站假如离开了良好的布局,将丧失正确的引导和内容的关联性。
在这篇文章中,我们将讨论8种非常有用的布局解决方案和技术,希望读者能在其中获得帮助并创造出简洁经过组织的内容布局。这8种技术包含sliders, tabs, progressive layouts, structured grids, modal windows, rollover elements, accordions and mega drop-down-menus.
你也许会对下面的近期文章感兴趣:
- 5 Useful Coding Solutions For Designers and Developers
- 40 Creative Design Layouts: Getting Out Of The Box
- Web Design Trends For 2009
1. Sliders and Carousels
Slider Scripts
您可以移植这些技术使用以下免费提供的脚本,技术和教程:
- Slick Accessible Slideshow using jQuery
- Coda-Slider 1.1.1
- jquery.scrollable 1.0.2
- Create an Amazon Books Widget with jQuery and XML
- Agile Carousel
- Easy Image or Content Slider
- Slider Gallery
- Coda Slider Effect
- iCarousel
2. Tabbed Navigation Elements
Tab Scripts
您可以移植这些技术使用以下免费提供的脚本,技术和教程:
- Create a Slick Tabbed Content Area using CSS & jQuery
- JavaScript tabifier
- Yetii – A JavaScript Tab Interface
- Tabbed Page Interface
- Updated JQuery Nested Tab Set
- Scriptaculous Tabs
- Accordian Tabs
3. Modal Windows
Modal Scripts
您可以移植这些技术使用以下免费提供的脚本,技术和教程:
- Fancy Lightbox
- Lightbx 2
- Facebook Image/Content Viewer
- Woork Mootools Lightbox
- nyroModal JQuery Plugin
- JQuery Alert Dialog
- LightWindow
- ThickBox 3.1
4. Rollover Elements
Tooltip/Hover Element Scripts
您可以移植这些技术使用以下免费提供的脚本,技术和教程:
- Prototip 2
- Coda Popup Bubbles
- Build a Better Tooltip with jQuery Awesomeness
- jQuery plugin: Tooltip
- Create a Simple, Powerful Product Highlighter with MooTools
- Easiest Tooltip and Image Preview Using jQuery
5. Progressive Layouts
ScrollTo Script
- ScrollTo – This is a JQuery plugin that can be used for vertical progressive layouts, like the one shown above.
6. Grids
Grid Generators, Templates, and Tools
- Grid System Generator
- Variable Grid Systems Generator
- 960 Grid System
- Grid Designer
- Grid Calculator
- 50 Useful Design Tools For Beautiful Web Typography (including grid-resources)
7. Accordions
Accordion Scripts
您可以移植这些技术使用以下免费提供的脚本,技术和教程:
- Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
- Apple.com Downoads Page Slide out and drawer effect
- UI/API/1.7.1/Accordion JQuery Plugin
- JQuery UI Accordion
- Simple JQuery Accordion menu
- JQuery Accordion Madness
- jQuery Examples – Horizontal Accordion
























Thank you! I would now go on this blog every day!