From table-based to tableless web design with CSS – Part 1: CSS Basics
Everyone is urging you to make the switch from table-based layouts to tableless, CSS-positioned layouts. You've certainly been thinking about it, but CSS layouts seem so unintuitive. You've established a workflow with tables that, well, works. Why should you change? Part 1 of this tutorial gently guides you through the transition from tables to CSS, and demonstrates how in many ways CSS layouts are easier. In Part 2 you'll learn to work with CSS starter pages as you convert a table-based design to a pure CSS design. Figure 1. Before you build the Yacht Club design shown in Figure 1, however, you'll learn about the advantages of the CSS approach. Tables seem so easy because we're familiar with the concept quite apart from web page design. I remember a few years ago when I was called in to advise a company that purchased a Dreamweaver template that had been designed with tables. The same and different Figure 2. Figure 3. Figure 4. Figure 5. Figure 6. Click OK. Figure 7. Figure 8.
jquery - How to customize fisheye menu !
Spry Demo Gallery
When Adobe first introduced Spry, our goal was to bring Ajax capabilities to the web design community, allowing designers to create web pages that provided a richer experience for the end user. As we know, however, the web evolves at a blistering pace. Over the last couple of years, frameworks such as JQuery have evolved to encompass many of the capabilities originally envisaged for Spry, making Spry as a standalone offering less relevant. As we can continue to focus our efforts in furthering the web, we have decided to no longer invest in the development of Spry. Going forward, Adobe will continue to make contributions to JQuery UI, JQuery Mobile and other frameworks so as to help web designers create rich web and mobile experiences. Download Spry from Adobe GitHub account
Styling and inserting a Spry Menu Bar 2.0 widget
The finished page is in the completed folder of the sample files for this tutorial. Most of the menu items are dummy links, but the Home and Café Citrus menu items link to index.html and citrus.html, respectively. Note: To select the colors for the menu, I visited selected the option to create a theme from an image, and uploaded the bannerimage, bayside_pulse.jpg. Installing the Adobe Widget Browser The Adobe Widget Browser isn't installed by default, but it's closely integrated with Dreamweaver CS5. Note: The Widget Browser uses a specification created bythe OpenAjax Alliance. Although the Widget Browser is a separate application, the easiest way to access it is through Dreamweaver CS5. Make sure you're connected to the Internet, click the Extend Dreamweaver icon in the Application Bar, and choose Widget Browser (see Figure 4).
Designing Effective Web Navigation
If people cannot navigate through your site, they will quickly leave. Thus, designing effective navigation on your Web site is crucial. But there are some basic things you need to do before you can start worrying about rollovers or links, images or flash. Information Architecture Before you can even start to plan your navigation, you need to define your site's information architecture. Some common taxonomy elements on a corporate or business Web page are: Products - the products or services the company sellsAbout - information about the companyInvestor Relations - information specific to investorsSupport - help for customers Some common taxonomy elements on a personal Web page are: About Me - information about the page authorFavorite Links - links that the author likesFriends and Family - information about the author's friends and family Organization Once you've determined your site architecture, you need to decide how to organize it. Navigation Design
Navigating Web Pages
According to Jennifer Flemming, author of a book on Web navigation, if people can't navigate your site, they will leave it. At the Web 98 convention, I attended a seminar by Jennifer on how to design Web navigation. According to the GVU's WWW User Survey, the most important issues facing the Internet are: Privacy (30.49%) Censorship (24.18%) Navigation (16.65%) For privacy, you can post your privacy policy on your Web site (as TrustE recommends), but it's up to your readers to believe you. Censorship is also something your readers must perceive is or is not happening, but navigation is primarily you, and how you design your pages. So, as the most important aspect of the World Wide Web that you, as a Web Developer can affect, how do you know what works and what doesn't? Get someone else to look at it. Remember, most people who find a Web site hard to use won't spend the time to tell you about it. Navigation is for user goals. According to Jennifer, you use navigation that "works".
Similar to Paper Layouts - Web Layouts Should be Simple and Clear
When you create a Web design, one of the more overlooked aspects of the design is the layout. Now, many people think about how to do a layout (CSS, tables, frames, etc.), but the basics of Web layout are often completely ignored. Space and Whitespace Use the whole space, but don't be specific in your use. In other words, use relatively sized layout sections on your Web pages, so that they expand and contract to fit the browser window. Keep screen resolution in mind. Use color to define spaces. Images and Graphics Align your images. Balance the graphics and text on a page. Text Width Think about text width. Centering text is inadvisable.
Edge: October 2009 - Create your first CSS-based website with Adobe Dreamweaver
by Ruth Stryker Cascading style sheets (CSS) is the modern, standard way to format not only the text in your website but also the layout of content throughout your site. Perhaps the most significant benefit of using CSS for layout, as opposed to using a table-based layout, is that CSS allows you to separate presentation (style, formatting) from content (information). By separating content from presentation, you can control and make site-wide changes to your website more easily. Your visitors will benefit as well, because CSS results in simpler and cleaner HTML code, which improves browser load times and simplifies navigation for people with disabilities. You can use Adobe Dreamweaver to create CSS-based layouts a couple of different ways. Planning the page layout Crush Creek Winery (a fictitious business) has hired us to create a simple CSS-based site. Figure 1. The client provided us with a photo as well as the text for each page. Figure 2. Creating the home page and the .css file ‹ Back
