Web Designs

Top 10 tips of web designing that you should follow

noreply@blogger.com (Ranji) — Fri, 17 Jun 2011 04:44:00 +0000

1. Write down your web design ideas on paper. Decide how many pages will be the part of your web site.

2. Check out other websites for references and web design ideas.

3. Decide the languages to be included (Java, CGI etc).

4. Make a good logo and place it on the top of your website. It will help your visitors to recognize you easily.

5. Create an attention-getting Tagline that would catch the interest of people.

6. Include a search box, because without a search box visitors won’t be able to find what they are looking for.

7. Draw the ideal web design layout on a paper that you have in your mind so you can easily alter the elements before going for the real designing.

8. Always remember, don’t put too many images or scripts, as the more things you put in your web design, the more time the web pages will take in loading.

9. Make sure your web design is SEO friendly in order to achieve maximum benefits.

10. Publish your web site and wait for the comments.

Top 10 tips to make your design projects more successful.

noreply@blogger.com (Ranji) — Wed, 15 Jun 2011 04:40:00 +0000

1. Truly Get to Know the Client and Their Customers/Visitors

In order to create a website that maximizes its potential for your client, you’ll first have to get a clear understanding of the client, how they do business, how they brand themselves, and you’ll also need to become familiar with their target market. Depending on your familiarity with the client and their industry, this may require a considerable amount of time and effort. The better understanding you have, the more likely you will be to create a site that meets the needs of the client and their users.

A common mistake, especially for new designers, is to jump right into the design process without dedicating time to getting familiar with the client. This often leads to a site that may look good on the surface, but doesn’t effectively fit the needs and personality of the client.

Different designers have their own methods for getting to know their clients, so do whatever works best for you. Some designers have a standard intake questionare or form that they have clients fill out to get information about their business and their customers. Others meet with clients, discuss and observe. Whatever your process, be sure that you prioritize the need to get to know your clients, and account for this in your estimates and scheduling of projects.

2. Have a Clear Set of Goals for the Project

Some clients will want a website just because it is the thing to do, but they don’t really know what they specifically hope to get out of having a website. Others will want to re-design their existing site because it is outdated or because they don’t like the look anymore, but they may not know exactly what they want to improve about the website. Having goals for the project will help to get a clear determination of what will make the project a success, and it will help to keep the project focused on what is most important.

Take the time to talk to clients about what is most important to them, and together you can establish a few specific goals for the project. It’s best to focus on a small number of things rather than having too many goals and getting distracted by things that are not as important. This process will assist you by getting your clients to think and communicate with you about the most important reasons for going through with the project, and it will give you some methods for measuring the project to gauge its success.

3. Clearly Define the Scope of the Project

A problem that every designer runs into at some point is failing to set boundaries on the scope of a project. Your idea of what is involved in a website design or re-design may not match up with your client’s idea of what should be involved. Disagreements over the scope of the project can lead to clients feeling like they are not getting what they paid for, or you doing more work than you expected when you quoted the project.

The solution to this problem is to have a clearly defined scope from the start, in writing. Be sure that you and the client are in agreement on the scope before starting the project, and get it incorporated into the contract. The details of scope can always be negotiated along with the fees, so there are opportunities to work out differing opinions when trying to secure the work.

If you’re looking for a contract that will help you to have a written record of a project’s scope, we have a web design contract template available at Vandelay Premier.

4. Allow Plenty of Time

Creating an attractive, functional, and effective website takes time. One of the biggest hindrances to the success of a project can be a lack of time. When scheduling your projects be sure that you are allowing enough time to give each project enough attention. Plan some extra time for unexpected challenges or situations that arrive, because things tend to come up.

The amount of time that you’ll need to schedule will vary from one project to the next depending on what is involved, so it will take some practice to get it down, but learn from your mistakes and avoid unrealistic expectations.

One challenge that often arises is being held up on a project because you are waiting on information or decisions from the client. When preparing a timeline and setting deadlines for the project, the deadlines should not only apply to you as the designer. Setting deadlines for clients to get you certain information or to do their part is reasonable and will help to keep things moving forward. If the client doesn’t live up to their end and meet their deadlines, you’ll have a clear example of why the project slowed down if you have trouble meeting a deadline.

5. Focus on the User

It is the users who will ultimately determine the success of a design or re-design project. While we as designers like to create something that meets our own expectations or fits into what we think is a good website, the site is not for us, it’s for the users. If you can keep your focus on the user and work to create the best site possible for them, the project will be successful.

User focus starts with the first point of this article, getting to know and understand them. If you don’t take the time up front to get familiar with your client and their users, it’s difficult or impossible to create a site that focuses on the users’ needs.

6. Know What Actions You Want Visitors to Take

A successful design project will result in visitors taking some kind of action on the site. Depending on the client and the type of website, that action could be purchasing a product, filling out a contact form, opting in to a newsletter, downloading an informational product, or any number of things.

It’s important that you and the client have a clear understanding of what actions from visitors are critical to the success of the website. After you have established which specific actions you want visitors to take, leading visitors to those actions should be a priority throughout the design process. In the end, leading visitors to take the desired action is much more important than having a site that looks great or has a lot of bells and whistles.

7. Communicate with the Client Throughout the Process

Communication between designer and client is a critical aspect of the project for several different reasons. First, in order for the project to be successful the client must be happy with it, and that is very difficult to accomplish if you’re not doing a good job of communicating with the client from the start.

Second, consistent two-way communication helps to improve efficiency and eliminate time for unnecessary revisions and changes.

Third, good communication will keep the client in the loop with what is being done on the project and they’ll feel more comfortable knowing that the project is moving forward. Even when work is being done, if the client isn’t hearing anything they will often assume that nothing is being done. Simple communication can avoid this.

The web design process can be rather overwhelming and intimidating for many clients, and good communication helps to put them at ease. Communication is a skill that most designers continually work on throughout their careers. Learn from your experience and always work on ways to improve how you can communicate with your clients.

8. Incorporate Feedback Throughout the Process

We’ve already talked about the need for communication and to keep clients happy, and a big part of that is incorporating their feedback into the design. Even though you will have made a strong effort to get to know the client and their customers/visitors, the client will still know their target market better than you will, so their feedback can be extremely valuable. Also, their feedback is critical to wind up with an end product that is an accurate representation of their business.

Web apps like Proof HQ and ConceptShare are great resources for helping to organize the feedback the your design projects. Regardless of your methods for gathering feedback, in order to make the project a success you will need to take that feedback and use your professional judgment and design abilities to incorporate what you are hearing from the client. You’ll need to be able to create something that the client is pleased with and that works for the users.

9. Consider the Future

Many websites are continually growing and evolving. When designing the site take the future into consideration and try to get a feel for where the client may like to go with the site in the future. The most successful projects will be well structured so that growth and additions don’t require a re-design too quickly. As new content or products are added to the site, navigational issues sometimes arise, so try to anticipate the challenges that may occur in the future and structure the site in a way that will allow for this growth.

Considering the future is also important in terms of the design style. Avoid trends that are likely to phase out in the near future that will leave the site looking dated and out of touch. A timeless style of design is more valuable to the client in the long run than a trendy design that must be changed a year later.

10. Test

Successful projects must be well tested. Don’t rush the testing stage in order to get the site launched quickly, or the visitors are likely to experience unnecessary issues with the site. An effective testing phase can help to ensure smoother launches and a more positive experience for users.

Tips for designing an SEO friendly website

noreply@blogger.com (Ranji) — Thu, 19 May 2011 06:09:00 +0000

Top Tips for Designing an SEO Friendly Website

Keyword Research

Before I even start a website design/build, I establish what the business objectives are. Many businesses will have a clear plan of what they want to achieve in terms of targeting. This may range from targeting the local area, national area or even global.

With this in mind, when designing wire frames, deciding on customer journeys and sitemaps, you can start to build, in addition, pages for content that target these specific keywords based on your findings, or at least have a plan of where these pages may go down the line once the site has launched.

From a design perspective, there is nothing worse than going back to a website six months later and having to change the structure and internal elements for additional content that may be used for SEO purposes. So my advice would be to plan early.

Search Engine Friendly Navigation

Now when I say search engine friendly, I mean a navigational system that the search engines can read and follow. One of the many factors of on-page SEO is the internal linking structure and the navigational system is the backbone for this. Having buttons and links which are text-based is a major plus and great for accessibility.

In my opinion, I would always avoid flash based navigational systems for one simple reason; Google along with the other search engines can’t read text on images. The other thing to consider with this is, as the web moves more and more to mobile devices how many of these will support flash? Apple has already said they won’t support flash elements and even my Blackberry doesn’t do a great job of flash websites. Please don’t think I’m not a lover of flash, because I do like the concept, but from an SEO point-of-view it can be a big barrier, especially with navigations.

Instead of flash, why not use CSS methods or jQuery? These can be just as good if not better, but make sure the load times for these elements are fast.

Also with navigational systems, it’s important to clearly label the links. If a link says "about", it should take the user (and the search engines) to the “about” page. As mentioned above, your internal link structure needs to be good, if not bullet-proof! Another example would be, if you have a page about "restaurants in London", label any links that go to this page from the navigation or other internal links with the anchor text "restaurants in London". Make it clear and descriptive for the search engines, thus adding that little extra internal link juice from a SEO perspective.

Website Load Times

Every so often a big update is done to the search engine algorithms. Normally the news is about Google and a SEO factor that was introduced early 2010 was website load times/speed. I experimented with this and found by speeding up a site in terms of various elements, did have an affect, so much so that a website I experimented on moved up 3 places in Google.

Now when I say various elements, I mean things like:

CSS files – remove unwanted/unused code or place all the code on one line per div/class.
The amount of JavaScript in the code – this can be really slow depending on what you are using it for so I’d advise using it sparsely.
Website image size – see point 4.
File size – remove white spaces and any unessential line breaks in code, keep it streamlined.
Making improvements on the above, will increase speed and generally help with the SEO (not forgetting the user experience).

Website Images

As a golden rule, a website has eight seconds to sell the company and/or products and there is nothing worse than waiting for a website to load, especially large images and backgrounds. As mentioned above, website load time is a factor and the two best tools I have used to reduce image file sizes are Adobe Photoshop and Adobe Fireworks – admittedly Fireworks did the slightly better job, even though it was only a few kilobytes.

Also if the website is an e-commerce site, create smaller images for the galleries. There is nothing worse than waiting for an image to load that is only 200px x 200px on screen that has been re-sized using HTML code – remember speed is now a key factor with SEO and can’t be avoided.

Keyword Placement

So, one of the major factors of SEO is telling Google what the page is about. This is done by writing great “user-focused” content. Within this content it’s important to get the keywords in the right position on the page. Here are the best places:

Title tag
Meta description and keywords
Website slogans
Navigation
Breadcrumb trails
H1, H2 and H3 tags
Bullet points
Alt text
Title attribute on links
The main website copy
Internal links
Footer links
URL’s
File / folder names
One thing to remember with the above is, don’t over-do it. Google has become heavily focused on the user so make sure the content is focused at the user; it will also become link-worthy content.

Add Social Elements

2011 has had a shift in terms of SEO; social is now a contributing factor. Not only is social a good way to demonstrate to potential customers that the company has a voice but social networks like Twitter helps towards good rankings.

It’s crucial with the design of the website that social elements are added in on 2 different levels.

Make it clear that the company is available and contactable on social networks with prominent buttons and icons
Adding the Twitter feed on site can also help with keyword placement, regular updates (you must be a daily user of Twitter) and can also speed up the Google cache rate (i.e. the amount of times Google visits the website and checks for updates).
Friendly URL’s and image filenames

One major thing I have noticed over the past few years is the number of websites that don’t contain friendly URL’s, so an example may be:

http://www.websiteshop.com/products/item1?=20193

A better example for a friendly URL would be:

http://www.websiteshop.com/formula-one/clothing/ferrari-tshirts

As you can see from the two examples, the second option has a good selection of keywords, this will help Google and the other search engines identify what the page is about and having keywords in the URLs is a good SEO method for keyword placement, as mentioned above.

In terms of images, also having an appropriate file name is vital. An example would be women that are looking for a wedding dress – they will more than likely go to Google images to find design ideas. Having an image named "img310.jpg" isn’t going to help with the Google image algorithm. So a better idea would be to have a file name "wedding-dress.jpg" for example.

Sitemaps

Sitemaps are purely designed to tell the search engines about all of the content on the website. This will ensure that the search engine bots find all of the content that may be 2 or 3 folders deep within the website so this content has a good shot at ranking for specific keywords and phrases.

One thing I have noticed with large e-commerce websites without sitemaps is the lack of pages that are indexed in Google. A great example would be an e-commerce site I worked on recently that had a catalogue of over 2,000 products. After conducting research on this, I found that only 500 pages had been indexed in Google. With the introduction of sitemaps, their indexed pages had gone up to 1,500 in 3 weeks – this also increased their exposure in Google. They then started to gain more long tail keyword searches and overall conversions increased off the back of this.

In terms of sitemaps I always recommend to use 4 different sitemaps:

XML
ROR (aka RSS Feed)
URL List
HTML
This give the search engines a variety of choice when it comes to locating all of the pages on site. Another thing to mention would be to include links to all 4 sitemaps on every page of the website (usually in the footer) to help the search engines further, especially with buried content which could be 2 or 3 levels (folders) deep.

Google Web Fonts

Creating visually interesting designs usually consists of using unfriendly web fonts. Creating text elements with an attractive font normally consists of using images as a work around. As mentioned in this post, Google and the other search engines can’t read text which is an image, which in turn could cost you really good real-estate with keyword placement on-page.

Back at the beginning of last year Google opened up a new Font Directory (http://www.google.com/webfonts). So instead of using images for text, you now have a large collection of open source fonts to use on the web completely free!

So in a nutshell, you can keep those super attractive designs with a readable web font, which in turn results in the search engines being able to read the text and use this as a ranking factor.

301 Redirects

Now I’m sure as a designer you have come across the re-design scenario. So, you have finished the design and launched the new website and then all of a sudden, rankings drop!

A great way to combat this, especially if you have restructured the website with new file names or moved content is to use 301 redirects in the .htaccess file.

This does 3 things:

Tells the search engines that the page has moved to a new location and needs re-indexing
Tells the search engines the page has been renamed and needs re-indexing
Any links that were pointing to the old page will now flow through to the new page via the redirect. As links are an imperative part of SEO, you can’t afford to loose these valuable links, thus retaining good rankings.

Prediction: W3C Validation

Over the past 18 months I have blogged about validated websites don’t have an impact on search results. With Google updates such as "caffeine" and "panda" which focus on search quality and user experience, I believe this may become a factor in the future – so I believe its important to look at this area sooner rather than later.

Top Three Fixes to Land That Next Web Development Project

noreply@blogger.com (Ranji) — Thu, 28 Apr 2011 04:18:00 +0000

Fix Your Site
Although there’s an old riddle about the barber with the messy hair, it certainly does not apply to web development. Your web presence is often one of the first, if not the first, opportunity you have to showcase your body of work. Thus, you can lose potential clients before ever having the communicate with them directly.

Fix Your Portfolio
You need to include a wide array of sites on your portfolio. Sites for internal departments in companies, sites for small businesses, sites for big businesses, sites for a variety of industries, and sites that even showcase a variety of design concepts you have (artsy, fun, professional, simple, complex, etc.). The wider range you can cover, the better. A client will feel much better when they find a site that matches closely to what they are hoping to have themselves.

Fix Your Sales Pitch
You don’t need a fancy sales team to get the job done. In fact, you’re probably better off without a sales team. A majority of web development projects will have some unique element. These unique elements make it difficult, if not impossible, for a sales person to accurately quote the services that will be needed. Developers should either be your sales people, or always accompany your sales people. Developers can take in a potential clients requirements and ask the right questions to assist both making an accurate quote and the client’s understanding exactly what they want. This becomes a win-win scenario, and improves overall satisfaction of the future transaction of the parties.

Start with these three simple tips, deliver on your promises, and we should have that whole web developer image sorted out in no time.

7 Tips for Prioritizing Tasks Effectively

noreply@blogger.com (Ranji) — Fri, 22 Apr 2011 10:29:00 +0000

Most designers, regardless of whether you are self employed or an employee, have a to-do list full of all kinds of different tasks that are fighting for attention. It may include finalizing a project for one client, working on an estimate for another client, responding to emails, recording payments and working on financials, etc. With so many different things going on and a to-do list that likely includes tasks related to several different projects, knowing how to effectively prioritize can be a real challenge.

Having productivity in your work day is important, but having productivity on the right tasks is what will really lead to a successful use of your time. In this article we’ll look at 7 tips that may be of help to you when struggling with knowing what to work on next.

1. Respect Deadlines

When working for clients the most obvious factor that determines priority and urgency is the deadline. If your project has a deadline approaching or if you are behind the pace to meet a deadline in the future, the work should have some added urgency. Meeting deadlines is an important part of giving your clients a positive experience working with you, and most designers understand the need to use deadlines in prioritizing work.

2. Set Milestone Deadlines

If a client project only has a deadline for completion of the project, make an effort to break down the work that is needed to complete the project and put it into a few different steps or parts. Assign each part with a deadline to hit a certain milestone that will allow you to move on to the next step, and use these self-imposed deadlines to help with prioritizing. This way rather than just seeing the final deadline, which may seem like it is far off into the future, you’ll have a clear understanding of the smaller steps involved in the project and what you need to do now in order to stay on pace.
These milestone deadlines that you set for yourself may not even need to be shared with the client, they can be used just to help you stay on track and to view the big picture of the project. Staying on pace with a project can also have an impact on everything else that you are working on. If one project gets off track you may need to dedicate extra time to getting caught up, which of course takes time away from your other projects. So staying on course will allow you to prioritize effectively, rather than being forced to dedicate your time to certain things because you’re behind.

3. Consider the Consequences

Most likely there will be times where you’re not sure how you’re going to be able to get everything done. If you have several different things that are pressing for your attention and you’re not sure how to prioritize, consider the consequences of not getting the work done or not meeting the deadline. Chances are, there will be much different consequences from one task to the next.
For example, you may have a client project that would be disastrous if you can’t meet the deadline. Maybe the client has other things, such as a marketing campaign, that are dependant upon you getting your work done by a specific date. On the other hand, you may have a client project that has an upcoming deadline, but there really are no significant consequences if it falls a little behind schedule.
Another factor to consider is your relationship with the client. If it’s a client that you have worked with for a while and have always met deadlines, they may be more understanding if you’re struggling to meet a deadline (depending on the situation). Or you may have a situation where you’re working with a new client and hoping to get more work or referrals in the future from this client. In this case, your relationship with the client may be important enough to shuffle things around to get the work done.

4. Consider Payment Terms

You’ll also want to take into consideration the impact that a task will have on getting paid. You may have a project where you will be paid at various milestones throughout the project. If you are just a small step away from reaching one of those milestones you may want to give added priority to getting it done and getting paid.
Likewise, there may be a situation where a client has already paid for your services and you just need to complete the work. Completing this client’s work may take priority since they have already paid for your time.
If you’re a freelancer you’ll always need to be considering your cash flow situation. So taking into consideration the situation with money and how/when payment will be made will help you to know what you need to be working on to keep your business functioning smoothly.

5. Consider Time Required

There may be times when you have two or more equally urgent tasks that are competing for your attention. However, although they are equally urgent they may not require the same amount of time to complete. My preference is to prioritize the tasks that will take less time to complete so that I can get it crossed off my list and be able to focus more effectively on the remaining tasks.

6. Set Monthly Goals and Work Backwards

Setting goals can be very helpful for determining what needs to go on your to-do list. This process is made a little bit easier if you take a look at the big picture before setting your to-do list for a particular day. Try starting with monthly goals of what needs to be done. Then look at the specific actions or tasks that need to be done in order to reach this goal. For the first week of the month take the most urgent actions, those with deadlines and those that are foundational for other tasks, and put them onto a to-do list for the week. Then you can plan your week more effectively by splitting them up and setting certain things that need to get done each day.
This can be a much more effective way of prioritizing tasks than simply trying to decide what to work on for a particular day without really giving much though to the big picture. With weekly and monthly to-do lists in addition to a daily list you’ll be able to see how each task impacts the other things on your list, and priorities tend to clearly emerge.

7. Schedule a Percentage of Your Time for Personal Projects

There are other tasks that are important aside from just working on client projects. Things like working through tutorials, reading a book on a topic that you’d like to learn more about, re-designing your portfolio site, maintaining a blog, etc. often get pushed to the back burner because they don’t seem to have the same urgency as other things on your to-do list. In the long run though, these types of personal projects and opportunities for development or improvement are very important.
The best way to make sure that you get time to work on these things is to prioritize them by setting aside time in your schedule. You can decide that you’ll dedicate 10% of your time (or some other amount) to working on projects like this, and set aside time each week to do something for your own improvement. If you don’t set aside the time, most likely you won’t get around to it since other things will always come up.

How to make your site mobile friendly?

noreply@blogger.com (Ranji) — Sat, 16 Apr 2011 10:52:00 +0000

Start with the basics

If you begin with standards-based HTML that is formatted with logical, semantic markup, you’re ahead of the game already. A well structured document with clear organization and semantic markup will display cleanly, be usable, and be accessible on any device – mobiles included. Using CSS to separate content from presentation means your content will be accessible, even on the least capable mobile device. Pay attention to other basics as well. For example, good alternative text is an essential for any non-text element in your pages. Make sure that form fields are properly labeled.

Clean, semantic markup is crucial when you consider the variety found in mobile devices. Some phones may only understand WAP. More capable phones may understand WAP2, which opens them up to rendering websites with XHTML and CSS. Some devices may display only monochromatic screen colors, while others may have full color. Some devices support CSS, some do not. Some only understand HTML 3.2, while others understand XHTML. Some devices undertand tables, floats, frames, JavaScript, and dynamic menus, but many do not. Most devices don’t support cookies. Devices at the high end of the mobile market such as BlackBerry, Palm, or the upcoming iPhone are highly capable and support nearly as much as a standard computer.

All those possibilities are enough to make you long for the days when the browser wars meant coding for Internet Explorer 4 or Netscape Navigator 4! But we have two things now that we didn’t have in the bad old days: a large body of knowledge about how to write standards-based HTML and XHTML using semantic markup and about how to separate content from presentation with CSS. If you stick to best practices in those two areas, the need to worry about every single rendering possibility from mobile devices diminishes and you can develop with confidence.

Testing your site

None of the free or fee-based testing options can equal the testing results you get with an actual device. I recommend testing with real mobile devices much as possible, but I know it isn’t feasible to run out and buy every single mobile device. There are some fairly reliable ways to test your site without going to that extreme. Some of the testing techniques are free, some are not. First, let’s look at the free options.

Opera provides two good testing tools. Using the standard Opera browser, select View > Small Screen to see your page rendered in an approximation of what a mobile screen might display. The Opera web developer bar has a button called Display that allows you to toggle CSS on or off when viewing a page using small screen view. Here you see two Opera small screen views of my blog, Web Teacher, first with CSS, then without.

As you can see, Opera renders the images in small screen view. (We’ll talk more about images later.) Note that the small screen view renders the content in source order, that is, the order in which the elements appear in the HTML. Elements are clearly distinguishable from a semantic viewpoint: headings, links, paragraphs, blockquotes. The organizational and semantic underpinnings hold up so that the content is readable and useable. This is especially easy to see in the second screen shot, with the CSS toggled off. Keep in mind that neither of the displays in the previous two screen captures are influenced by a handheld CSS media type stylesheet. When a heldheld CSS stylesheet is present, Opera’s small screen view will take it into account. More about this in a bit.

Opera provides a free browser that can be downloaded and installed on handheld devices. It’s called Opera Mini. (You can purchase Opera Mobile for even more capability.) Both are available at opera.com. Since Opera is in the business of providing browsers for mobiles, the company made a helpful online mobile simulator at operamini.com/demo. Here, you can load a page into the Mini Demo and operate it with mouse or keyboard as if it were a real mobile phone. The screen capture shows that the Mini Demo renders images and CSS. Again, there is no handheld CSS media type stylesheet affecting this rendering.

Another free way to test your site for clear structure, organization, and proper semantics is with Firefox’s Web Developer extension. Use this tool to disable images, JavaScript, and CSS and you’ll have a good idea about whether your content is going to make sense and be navigable in one of older and less capable mobile phones.

Here’s a Firefox screen capture. For this, the Web Developer Toolbar was used to disable all CSS, all JavaScript, and all images.

Viewing the page without images and with no functioning JavaScipt is very useful in terms of testing for older mobile devices. Keep in mind that some of the less capable mobile devices don’t render tables. None of them understand frames. Seeing your site this way really drives home the importance of standards-driven, semantic markup.

Using specific emulators

Some of the phone and PDA manufacturers have emulators on their sites that you can download and use for testing. Depending on your target audience, testing on a specific emulator might be helpful. If you are interested in specific device or manufacturer, check their site for developer resources.

Testing CSS Handheld media stylesheets

An important tool in the Firefox Web Developer Toolbar is CSS > View CSS by Media Type > Handheld. If you look at Web Teacher in a standard monitor, you see that it is a simple two column layout using a left float for the content div and a large margin-left to create the sidebar as a second column. I’ll add a stylesheet for handheld media to the testing mix. It contains only two rules â€” to reset the sizes of the content div and sidebar div and to remove the float. Here’s the entire stylesheet:

#content {
float: none;
width: 95%;
}
#sidebar {
width: 90%;
margin-left: 5%;
}

The link to this stylesheet was added to the document head after the all media stylesheet, so as to be last in the cascade. I’ll use a link element for this. For those mobiles that do understand CSS, using link is more reliable than using @import for bringing in styles, although some of the more capable devices understand @import.Here’s the link element:

Media types are mutually exclusive. A user agent can only support one media type when rendering a document. If I want to retain any of my existing styles in a handheld display, I need to take one more step, and that is to list all the media types I want my existing styles to apply to in a comma separated list. I change the link element for my existing stylesheet, which is called 2col.css to include this media attribute:media="handheld,all". The two link elements are now:

The styles and the color scheme I have in 2col.css should also apply to handheld renderings, but the two column layout will be removed by the mobile.css rules.

Testing with the Firefox Web Developer Toolbar menu CSS > View CSS by Media Type > Handheld should now show handheld media results, and it does.

The first screen capture shows the two column layout, as it normally displays with the all media stylesheet. The second shows Firefox using the handheld media view.

From the second screen capture, you can see that Firefox has expanded the content div to 95%, according to the mobile.css rules. If you scrolled down the page past the content div, you would find the sidebar div now displays at 90% width after the content div. Note in the second screen capture, that styles from 2col.css such as the presentation of the list under the title image and the background gradient behind the headings are retained because of the handheld media designation in that stylesheet.

You may not want to retain any of your all media styles in the handheld CSS rules, as in this example. Keeping the background images, for example, results in longer page load times. Since many wireless mobile devices load very slowly, you want to really simplify things for handhelds. In that case, simply leave the handheld media attribute out of your main stylesheet. I’ll give you more tips for simplifying things for handheld media shortly.

Testing with subscription services or with software

The testing tools I just mentioned are all free. There are other options that are not free, but you might find them helpful and worth the expense. Browser Cam, where you can test your sites in all sorts of browsers, has added a testing area called Device Cam. Here you can test a page in a smattering of Windows Mobile-based PDAs and several BlackBerry versions. Here’s a screen capture of the test page in a Device Cam rendering of a BlackBerry. Note the strong resemblance to what you saw previously in Opera’s small screen view when the CSS was toggled off.

A brand new option for owners of Adobe’s latest CS3 software is Adobe’s Device Central. Device Central uses skins for dozens of mobile devices to display your content in various ways. Here’s a rendering of the test page in a Nokia 7390 skin.

Device Central can load a live URL or a file from many of the Adobe CS3 applications. It responds to the presence of a stylesheet of the handheld media type when the page is rendered using Opera’s small screen view. Using the Opera small screen view is an option with each of the skins in Device Central. Deselecting the option to view the rendering with Opera’s small screen view in Device Central rendered this page as two columns, in spite of the presence of the handheld stylesheet rules meant to eliminate that.

Tips for handheld CSS

Handheld media stylesheets can be more extensive than the two rule example I showed you previously. A few more rules would certainly benefit Web Teacher, but keep in mind that handheld stylesheets should be as small and compact as possible because of download time.

What can you do to simplify your site and make it more usable in mobiles? First, eliminate some of these problematic items from mobile display.ups or pop out menus in favor of plain old HTML and simple text menus

Eliminate decorative images that slow down the loading process. Use display:noneto remove anything that isn’t absolutely necessary, such as links to external resources. Remember, however, that devices that don’t understand CSS won’t do anything with display: none. Any essential images need to be reworked for the small screen and the width and height attributes need to be included in the HTML.

Eliminate nested tables and layout tables. If you have tabular data, consider finding a way to present it in a linearized alternate display.

Once you’ve simplified through elimination, start building the rules you need to add. Consider these ideas.

If you’re not already using relative measures, switch to ems or percentages rather than pixels
Reduce margins, paddings and borders to suit the small screen
Use smaller font sizes for headings and paragraph text
If you have a long navigation list at the start of the page, add a skip to main content link, or move the links to the end of document flow. Keep the number of clicks required to get to content as minimal as humanly possible. Without a mouse or keyboard, most mobile users have to click laboriously through any top navigation.
Make sure your color combinations provide good contrast between foreground and background colors, particularly for devices with fewer color options.

The Process of Planning a Perfect Website

noreply@blogger.com (Ranji) — Thu, 24 Mar 2011 11:56:00 +0000

Starting the Project

This is possibly the most anxious and driving time during project work. When you’ve got an entirely blank slate to work with, thoughts and ideas seem to pile on faster than you can grasp them. It’s important here to breathe and reflect on the project’s ideals. Perhaps take a step back to question a few simple aspects of the project.

What are you or your client looking for in a completed object? Are there any specific items you want to include no questions asked? These may be heading banners, differing navigation menus, a powerful color scheme, or even a simple page logo. Try sketching out a few prototypes before taking to the digital process.

For those amongst us who are less artistically gifted even a crude sketch can provide more inspiration than nothing at all. A prototype offers not only a guideline but a wireframe for which to base all your future pages off. This wireframe may change between differing page styles (ex. home, about us, blog posts) but will ultimately contain the same template.

Scrutinize Design Galleries

I have run into many designers who argue design galleries offer no value into the web. They are seemingly cheap ways to copy designers and rip on their ideas. And while I can respect this viewpoint, I simply cannot agree and actually think quite the opposite. Designers choose to submit their designs into these places and should feel honored that others may draw inspiration from their works.

Further there is nothing wrong with borrowing ideas! This is the beauty of creation as you take a mix of many differing artistic styles and blend them together in your own way. True web designers are able to master this skill and even begin to create their own interfaces simply from memory and inspiration!

CSS galleries and many of the showcases online today are perfect for the beginning designer. As you train the creative portions of your brain you begin to think outside comfort zones you’ve set up for yourself. This is one of the most difficult aspects in the career of web design, and more specifically during the creation process. But similar to many other things in life, this is one skill which becomes more developed with practice.

Give Your Interface a Test-Run

Before even coding your sketch or mockup design spend some time visualizing the browsing process. If possible (and this comes with practice) place yourself in the shoes of another user entering your website. Consider where they’d click and what they would find most interesting.

Once you get into this zone you may notice an accompanying change in mindset. This technique will help remove yourself from the position of “the designer” and see things from a larger perspective. I often recommend this step before coding to save yourself time in the long run.

In personal experience I frequently find myself updating page areas or colors mid-design. With enough time it’s simple to step out and envision how a user might interact with your page’s menu or links. This process can be difficult if you’ve been staring at the same design for 3 hours straight. Try taking a break to stretch and walk around – even 15 minutes can play a huge role in opening your perceptions.

Design Numerous Builds for Comparison

This step will take much more time but if you have the luxury I highly recommend pacing yourself. Once you’ve got a strong sketch going you may consider creating a few alternate designs to choose from. This can be done in Photoshop just as easily if you are not artistically gifted with paper and pencil, or simply feel more comfortable in software.

Some people find this step to be annoying and actually slow down the creative process. If you often second-guess yourself this method will save you loads of time during the final stages of production. I find 2-4 strong templates laid out in comparison can help push your indecisive nature towards picking a final stage product.

Keep the Space!

White space is crucial with any great design. This comes as an almost no-brainer and you may consider a few obvious reasons. When page elements are laid out properly you’ll find a natural symmetry in design. Web pages coded with grids and accessibility in mind tend to appear cleaner and much more user friendly.

Walking the same line as white space it’s key to remove any elements which may be taking up un-needed space. This will obviously hold true as a belief during any stage of design – but catching your dislikes or mistakes early on will save hours on project work. Ensure your page’s content – paragraphs, headings, images, and videos – have enough room to breathe and interact with your website’s visitors.

I find writing a small list of mandatory page elements is a great way of getting started. This will change based on what type of website you’re designing, which demonstrates just how fluid this system can become. Typical instances include search boxes, social media sharing buttons, shopping cart icons or links, featured blog posts, or even a small contact form!

Whenever entering the design process feel comfortable letting your mind roam free. It is within this void of space where ideas are born and genius inspiration may be ignited. Stay true to your heart when designing. Creating websites has never been an easy task, however quite fun and often very rewarding when you set aside time for building and learning.

5 Tips for your content down that fine line between SEO and usability

noreply@blogger.com (Ranji) — Thu, 17 Mar 2011 09:51:00 +0000

1. Length of On-Page Content

The ideal minimum length of page copy for SEO purposes is 250 words. So where your user experience permits, you should have 250 words (or more) of actual inline content – i.e. not headers, not sidebar content.

That being said, 250 words is just a minimum. As a general rule, the more content the better. In fact, I’ve personally noticed that when a page has 1,000+ plus, it has a much better chance of ranking for the keywords that it’s optimized for.

Of course, there are pages where it doesn’t really make sense to have so much content. In such cases, 250 words of content would disrupt the user-experience and push interactive features below the fold.

Some examples of this are a category pages on blogs or ecommerce sites. In these cases, you might want to optimize the categories for a certain niche/vertical of keywords, and added 250 words of text at the top of the page would help.

But from a usability standpoint, categories exist so that users can navigate/browse products or content within a category. So adding 250 word of text would disrupt the user-experience by pushing those product/article links below the fold.

A decent compromise in such cases is to insert a bit of static content at the top of main-content area of your category pages. Generally, 300 characters (about twice the length of your page’s meta-description) is enough to (1) get some descriptive keywords on the page, but (2) keep the category links/listings well above the fold.

2. Scanable Line Paragraphs

Knowing that you want at least 250 words on each page, how do you make that content as usable as possible? That is, how can you make it scanable so that users are not deterred from actually reading it?

As a rule, you should aim for 3-4 line paragraphs (2 sentences). Of course, in some circumstances, a paragraph warrants more than 2 sentences. But by keeping paragraphs within 3-4 lines (5 lines max), you can create a text-experience that users can easily scan, making them more likely to actually consume the content.

3. Headers

Now, what do you do if you have more than 250 words on a page? If you’re talking about more than one product or service? How do you keep the user engaged?

Well, you do that by structuring your content. Basically, you should section off your content using header tags. This will create a break in the content that (1) makes it seem easier (i.e. ‘not as long’) to read, and (2) provides visual cues to pull the user’s eye through the content.

From an SEO perspective, moreover, the keywords in headers help you clue search engines into what your content is about. For example, three headers might tell search engines that three different (but related) topics are being discussed on the page.

4. Keyword Density

Keyword density is how often a keyword appears on a page. Depending on who you ask, the ideal keyword density is anywhere from 2%-5%.

The only problem with this is that even at the low-end, this can make for unnatural prose. For instance, if a keyword makes up 3% of all words on a page, the user will probably notice that that keyword appears quite often. In fact, it will make your copy seem robotic, non-compelling, and generally spammy.

Where you can fit in these extra keywords, however, is in your header tags. Indeed, by using keyword variation to draw up optimized header tags, you can gain an extra 1% of keyword density without making the actual copy seem contrived and unnatural.

5. Bullet Lists

One of the biggest copy tradeoffs between usability and search is bullet lists. While bullet lists help make content more scanable, search engine regard them as “broken content” – meaning that they don’t quite count as much as other page copy when it comes to their keyword density. There are two ways to get around this.

First, you can use a bullet list at the top of the page to outline the page’s content. This will help cue the user into what they can expect as they read through the page, which will help them better navigate the content.

If you do go this route, however, make sure that (1) you have 2 sentences/3 lines preceding the bullet list, (2) you have another 2 sentences/3 lines following it, and (3) there is a minimum of 250 words of “unbroken” content on the page. This will not only put the bullet list in context for user, but it will help ensure that search engines properly index the page.

Alternatively, you can simply place a bullet list further down in the content, as part of the one of the subsections. If sufficient content precedes a bullet list, that bullet list is less likely to factor large into how that page is indexed.

Features of Web 3.0

noreply@blogger.com (Ranji) — Wed, 16 Mar 2011 11:55:00 +0000

There will be remarkable differences between Web 2.0 and Web 3.0 tools or applications. Web 3.0 searches are all about personalization. Natural language processing, machine based learning and reasoning, and intelligent applications will make your search results more appropriate for your personal needs. The semantic web would be a major part of searching which is already on the development. There will be more "open" applications in Web 3.0. Open source software platforms, open data, etc. will enhance more possibilities to create new tools and applications. Despite openness your identify theft will be protected through remedial such as open identity, open reputation, etc.

With the development of technology Web 3.0 applications would be able to run on any device, mobile phone, or computer by making it faster to access. Another marked improvement of Web 3.0 applications will be 3D web. If you have experienced the SecondLife website, then such 3D spaces will be a common feature of the 3D web in the future.

HTML5 Web Storage

noreply@blogger.com (Ranji) — Thu, 03 Mar 2011 09:46:00 +0000

HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side and to overcome following drawbacks.

Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
Cookies are limited to about 4 KB of data . Not enough to store required data.

The two storages are session storage and local storage and they would be used to handle different situations.
The latest versions of pretty much every browser supports HTML5 Storage including Internet Explorer.

Session Storage:
The Session Storage is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.

Example:
For example, if a user buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.

HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage, and it will be accessible to any page from the same site opened in that window ie session and as soon as you close the window, session would be lost.

Local Storage:
The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.
Again, cookies do not handle this case well, because they are transmitted with every request.

Example:
HTML5 introduces the localStorage attribute which would be used to access a page's local storage area without no time limit and this local storage will be available whenever you would use that page.
Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time when you open the window:

Delete Web Storage:
Storing sensitive data on local machine could be dangerous and could leave a security hole.
The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.
To clear a local storage setting you would need to call localStorage.remove('key'); where 'key' is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.

HTML5 Web Forms 2.0 - The input element in HTML5

noreply@blogger.com (Ranji) — Thu, 03 Mar 2011 09:38:00 +0000

HTML5 input elements introduced sevral new values for the type attribute. These are listed below.

Type	Description
datetime	A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
datetime-local	A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.
date	A date (year, month, day) encoded according to ISO 8601.
month	A date consisting of a year and a month encoded according to ISO 8601.
week	A date consisting of a year and a week number encoded according to ISO 8601.
time	A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
number	This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
range	The range type is used for input fields that should contain a value from a range of numbers.
email	This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
url	This accepts only email value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

HTML5 Events

noreply@blogger.com (Ranji) — Thu, 03 Mar 2011 09:31:00 +0000

Attribute	Value	Description
offline	script	Triggers when the document goes offline
onabort	script	Triggers on an abort event
onafterprint	script	Triggers after the document is printed
onbeforeonload	script	Triggers before the document loads
onbeforeprint	script	Triggers before the document is printed
onblur	script	Triggers when the window loses focus
oncanplay	script	Triggers when media can start play, but might has to stop for buffering
oncanplaythrough	script	Triggers when media can be played to the end, without stopping for buffering
onchange	script	Triggers when an element changes
onclick	script	Triggers on a mouse click
oncontextmenu	script	Triggers when a context menu is triggered
ondblclick	script	Triggers on a mouse double-click
ondrag	script	Triggers when an element is dragged
ondragend	script	Triggers at the end of a drag operation
ondragenter	script	Triggers when an element has been dragged to a valid drop target
ondragleave	script	Triggers when an element leaves a valid drop target
ondragover	script	Triggers when an element is being dragged over a valid drop target
ondragstart	script	Triggers at the start of a drag operation
ondrop	script	Triggers when dragged element is being dropped
ondurationchange	script	Triggers when the length of the media is changed
onemptied	script	Triggers when a media resource element suddenly becomes empty.
onended	script	Triggers when media has reach the end
onerror	script	Triggers when an error occur
onfocus	script	Triggers when the window gets focus
onformchange	script	Triggers when a form changes
onforminput	script	Triggers when a form gets user input
onhaschange	script	Triggers when the document has change
oninput	script	Triggers when an element gets user input
oninvalid	script	Triggers when an element is invalid
onkeydown	script	Triggers when a key is pressed
onkeypress	script	Triggers when a key is pressed and released
onkeyup	script	Triggers when a key is released
onload	script	Triggers when the document loads
onloadeddata	script	Triggers when media data is loaded
onloadedmetadata	script	Triggers when the duration and other media data of a media element is loaded
onloadstart	script	Triggers when the browser starts to load the media data
onmessage	script	Triggers when the message is triggered
onmousedown	script	Triggers when a mouse button is pressed
onmousemove	script	Triggers when the mouse pointer moves
onmouseout	script	Triggers when the mouse pointer moves out of an element
onmouseover	script	Triggers when the mouse pointer moves over an element
onmouseup	script	Triggers when a mouse button is released
onmousewheel	script	Triggers when the mouse wheel is being rotated
onoffline	script	Triggers when the document goes offline
onoine	script	Triggers when the document comes online
ononline	script	Triggers when the document comes online
onpagehide	script	Triggers when the window is hidden
onpageshow	script	Triggers when the window becomes visible
onpause	script	Triggers when media data is paused
onplay	script	Triggers when media data is going to start playing
onplaying	script	Triggers when media data has start playing
onpopstate	script	Triggers when the window's history changes
onprogress	script	Triggers when the browser is fetching the media data
onratechange	script	Triggers when the media data's playing rate has changed
onreadystatechange	script	Triggers when the ready-state changes
onredo	script	Triggers when the document performs a redo
onresize	script	Triggers when the window is resized
onscroll	script	Triggers when an element's scrollbar is being scrolled
onseeked	script	Triggers when a media element's seeking attribute is no longer true, and the seeking has ended
onseeking	script	Triggers when a media element's seeking attribute is true, and the seeking has begun
onselect	script	Triggers when an element is selected
onstalled	script	Triggers when there is an error in fetching media data
onstorage	script	Triggers when a document loads
onsubmit	script	Triggers when a form is submitted
onsuspend	script	Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdate	script	Triggers when media changes its playing position
onundo	script	Triggers when a document performs an undo
onunload	script	Triggers when the user leaves the document
onvolumechange	script	Triggers when media changes the volume, also when volume is set to "mute"
onwaiting	script	Triggers when media has stopped playing, but is expected to resume

HTML5 Attributes

noreply@blogger.com (Ranji) — Tue, 01 Mar 2011 11:58:00 +0000

Standard Attributes:

The attributes listed below are supported by almost all the HTML 5 tags.

Attribute	Options	Function
accesskey	User Defined	Specifies a keyboard shortcut to access an element.
align	right, left, center	Horizontally aligns tags
background	URL	Places an background image behind an element
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
class	User Defined	Classifies an element for use with Cascading Style Sheets.
contenteditable	true, false	Specifies if the user can edit the element's content or not.
contextmenu	Menu id	Specifies the context menu for an element.
data-XXXX	User Defined	Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".
draggable	true,false, auto	Specifies whether or not a user is allowed to drag an element.
height	Numeric Value	Specifies the height of tables, images, or table cells.
hidden	hidden	Specifies whether element should be visible or not.
id	User Defined	Names an element for use with Cascading Style Sheets.
item	List of elements	Used to group elements.
itemprop	List of items	Used to group items.
spellcheck	true, false	Specifies if the element must have it's spelling or grammar checked.
style	CSS Style sheet	Specifies an inline style for an element.
subject	User define id	Specifies the element's corresponding item.
tabindex	Tab number	Specifies the tab order of an element.
title	User Defined	"Pop-up" title for your elements.
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
width	Numeric Value	Specifies the width of tables, images, or table cells.

HTML5 Document

noreply@blogger.com (Ranji) — Tue, 01 Mar 2011 11:55:00 +0000

The following tags have been introduced for better structure:

section: This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside: This tag represents a piece of content that is only slightly related to the rest of the page.
header: This tag represents the header of a section.
footer: This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.
nav: This tag represents a section of the document intended for navigation.
dialog: This tag can be used to mark up a conversation.
figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

HTML5 Syntax

noreply@blogger.com (Ranji) — Tue, 01 Mar 2011 11:53:00 +0000

The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4.
HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes,an attribute had to have a value and to close all empty elements.

But HTML5 is coming with lots of flexibility and would support the followings:

Uppercase tag names.
Quotes are optional for attributes.
Attribute values are optional.
Closing empty elements are optional.

HTML5 Features

noreply@blogger.com (Ranji) — Tue, 01 Mar 2011 11:41:00 +0000

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML

HTML5 is a standard for structuring and presenting content on the World Wide Web. The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

New Features:
HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great features introduced in HTML5.

New Semantic Elements: These are like

,
, and
.
Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for input tag.
Persistent Local Storage: To achieve without resorting to third-party plugins.
WebSocket : A a next-generation bidirectional communication technology for web applications.
Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.
Audio & Video: You can embed audio or video on your web pages without resorting to third-party plugins.
Geolocation: Now visitors can choose to share their physical location with your web application.
Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
Drag and drop: Drag and drop the items from one location to another location on a the same webpage.

Photoshop - Selection Tools(Marquee,Lasso,Magic Wand)

noreply@blogger.com (Ranji) — Mon, 14 Jul 2008 12:58:00 +0000

Let us see how to use the selection tools in Photoshop.....

What are Selection Tools?

The selection tools allow you to select a portion or a subset of an image to work on. Most of Photoshop’s other tools and filters can then be applied to this selected area, altering its color, shape, texture, position and/or other attributes, while leaving the rest of the image untouched.

Photoshop contains three types of selection tools: the Marquee Tools, the Lasso Tools, and the Magic Wand.

The marquee tools are used to select a specific regularly shaped area. The marquee tools include the Rectangular, Elliptical, Single Row and Single Column Marquees

The lasso tools are used to select an irregular area. These tools include the Lasso Tool, the Polygonal Lasso Tool and the Magnetic Lasso Tool.

The Magic Wand tool is used to select areas of an image based upon color; the Magic Wand does not have additional tools.

How do I use the Marquee Tools?

The marquee tools let you select rectangles, ellipses, and 1-pixel-wide rows and columns.

To use the marquee tools:

1) Select a marquee tool: Rectangular (for a rectangular selection), Elliptical (for an elliptically shaped selection), Single Row (for a one-pixel wide row) or Single Column (for a one-pixel wide column).

2) Set the options you want in the Options Bar.

3) Drag over the area you want to select. Hold down the Shift key if you want to constrain the selection to a square or a circle.

How do I use the Lasso Tools?

The Lasso Tool and Polygonal Lasso Tool let you draw irregular selection borders (both straight-edged and freehand):

* If you want the selection to be completely or primarily freehand (with a minimum of straight edges) then use the Lasso Tool.

* If you want the selection to be completely or primarily straight edges (with a miminum of freehand edges) then use the Polygonal Lasso Tool.

With the Magnetic Lasso Tool, you can draw the selection border, and it will automatically snap to a high-contrast edge in the graphic.

To use the Lasso Tool:

1) Select the Lasso Tool from the Toolbox.

2) Set any desired options in the Options Bar.

3) To draw a freehand segment of the selection, simply drag the mouse.

4) To draw a straight-edged segment of the selection, hold down the Alt key and click at the desired beginning and end points of the segment.

5) To close the selection border, let go of the mouse button (without holding down the Alt key).

To use the Polygonal Lasso Tool:

1) Select the Polygonal Lasso Tool from the Toolbox.

2) Set any desired options in the Options Bar.

3) To draw a straight-edged segment of the selection, click at the desired beginning and end points of the segment.

4) To draw a freehand segment of the selection, hold down the Alt key and drag the mouse.

5) To close the selection border, double-click the mouse button.

Tips: Think of the Lasso Tool and the Polygonal Lasso Tool as opposites of each other. One (the Lasso Tool) usually does freehand selections, but can be forced to make straight lines by holding down the Alt key, while the other (the Polygonal Lasso Tool) does straight line selections, but can be forced to do freehand by holding down the Alt key.

To use the Magnetic Lasso Tool:

1) Select the Magnetic Lasso Tool from the Toolbox.

2) Set any desired options in the Options Bar.

3) Click to set the first endpoint of the selection.

4) To draw a freehand segment, move the mouse pointer along the edge you want to trace. (You don’t have to hold down the mouse button, although you can if you like.)

5) As you move the pointer, the selection will automatically snap to the strongest edge in the area around the pointer, based on the Width set in the Options Bar. Periodically, intermediate points are added to the selection border. While tracing the edge, click to add a point if needed.

6) If you want to switch to either the regular Lasso Tool or the Polygonal Lasso Tool, hold down the Alt key. At that point, dragging the mouse will let you draw freehand borders; clicking will let you draw straight line segments.

7) Close the selection border by double-clicking the mouse.

How do I use the Magic Wand?

The Magic Wand Tool lets you select areas of an image based on similar shades of color simply by clicking on the desired color.

To use the Magic Wand Tool:

1) Select the Magic Wand Tool from the Toolbox.

2) Set the desired options in the Options Bar:

* Choose whether to
- create a new selection,
- add to an existing selection,
- subtract from an existing selection, or
- intersect with the existing selection.

* Enter a value from 0 to 255 in the Tolerance box. A low number will let you select colors very similar to the pixel you click; a high number will let you select a broader range of colors.

* To select only adjacent areas using the same colors, select Contiguous. Otherwise, all pixels using the same colors will be selected.

* Check or un-check the Contiguous option. If Contiguous is not selected, all pixels that are the same color as the selected pixel will be selected, wherever they occur in the image. Otherwise, only adjacent pixels of the same color will be selected.

3) Click the color you want to select.

css benefits and uses

noreply@blogger.com (Ranji) — Wed, 09 Jul 2008 12:48:00 +0000

Before coming to the point, let us know what is css,why to use it and what are the benefits........?
Now visit one by one.....

What is CSS?

CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable and the page size will be reduced.

Why to use it and how to use it properly?

If you don't use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be quite large. The fact is that we live in a busy world, and people are not willing to wait more than 5 seconds web page to load.

Well, imagine that you have site with more than 50 pages. One day, you decide that you want to change font color and colors of the links on your site. You will have to edit all the pages on your site, and do to that you will need time, because you place your CSS in your web page.

What are the benefits of using CSS?

The list is quite long and I will list here only the most important.

• Your pages will load faster
• Web pages will become more search engine friendly
• You can change you site appearance in minutes
• You can write separate CSS file for handheld devices which will be called up instead of the regular CSS file
• You can forget about creating printer friendly version of your site using separate CSS file when a user chooses to print the page.

Avoiding standard HTML commands like Product will help us to reduce file size, but that is not the only benefit. Using CSS word product in this example will be moved closer to the top of the dOCument. Search engines will pick up more content and less code.

Imagine that you have a 3 column table on your page. When you see the code, you will notice that first comes code for your table, and after that comes your content.

Again your code is much more clear, and your content is moved toward the top of your document, making your HTML page search engine friendly, and reducing your file size.
Content is one of the most important factors in Search Engine Optimization, and you will benefit by removing any unnecessary code in your HTML and creating search engine friendly web pages.

Validate the CSS:

The browser wars are far behind us. The reality is that most people today use Internet Explorer, but you should try to be on safe side and ensure that your CSS code is valid. Not all browsers interpret CSS the same way.
You can validate your CSS here: HTTP://jigsaw.w3.org/css-validator/

A easy way to change hair color in Photoshop!

noreply@blogger.com (Ranji) — Fri, 04 Jul 2008 10:44:00 +0000

From this video, you can easily learn how to use the quick mask and magic wand tool in photoshop.

CSS Features

noreply@blogger.com (Ranji) — Wed, 02 Jul 2008 04:04:00 +0000

CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc.

CSS allows precise control over spacing, alignment and positioning.

CSS provides precise control over font size, color, and style. Some authors have used images to represent text in a particular font when they are uncertain of the availability of the font on the client's machine. Text in images is not accessible to specialized software such as screen readers, nor can it be cataloged by search robots. To remedy this situation, the powerful WebFonts of CSS allows users much greater control of client-side font information. With WebFonts, authors can rely on fallback mechanisms on the client when the author's preferred fonts are not available. Fonts can be substituted with more accuracy, synthesized by client software, and even downloaded from the Web, all according to author specification.

CSS allows users to override author styles. This is very important to users who cannot perceive a page with the author's chosen fonts and color. CSS allows users to view documents with their own preferred fonts, colors, etc. by specifying them in a user style sheet.

CSS provides support for automatically generated numbers, markers, and other content that can help users stay oriented within a document. Long lists, tables, or documents are easier to navigate when numbers or other contextual clues are provided in an accessible manner.

CSS supports aural style sheets, which specify how a document will sound when rendered as speech. Aural style sheets (or "ACSS" for short) allow authors and users to specify the volume of spoken content, background sounds, spatial properties for sound, and a host of other properties that can add effects to synthesized speech analogous to those achieved with styled fonts for visual output.

CSS provides more precise control over the display of alternative content than HTML alone. CSS selectors give access to attribute values, often used to provide alternative content. In CSS, attribute values may be rendered in a document along with an element's primary content.

Spacing, alignment, and positioning:

CSS allows authors to control the visual placement of content on the page through text indentation, margins, floats, and absolute and relative positioning. By using CSS properties to achieve visual effects, authors can write simpler HTML and eliminate images and non-breaking spaces ( ) used for positioning.

The following properties give control over spacing, alignment, and positioning:

* 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these properties allows users to control spacing without adding additional spaces. For example instead of writing "H E L L O" (which users generally recognize as the word "hello" but users of speech recognition tools would hear as individual letters), authors may create the same visual effect with the 'word-spacing' property applied to "HELLO".
* 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. With these properties, authors can create space on four sides of an element's content instead of adding non-breaking spaces ( ), which are non-standard mark-up, to create space around an element.
* 'float', 'position', 'top', 'right', 'bottom', 'left'. With these properties, the user can control the visual position of almost any element in a manner independent of where the element appears in the document. Authors should always design documents that make sense without style sheets (i.e., the document should be written in a "logical" order) and then apply style sheets to achieve visual effects. The positioning properties may be used to create margin notes (which may be automatically numbered), side bars, frame-like effects, simple headers and footers, and more.
* The 'empty-cells' property allows users to leave table cells empty and still give them proper borders on the screen or on paper. A data cell that is meant to be empty should not be filled with white space or a non-breaking space just to achieve a visual effect.

CSS also includes these user control features:

* System colors (for 'color', 'background-color', 'border-color', and 'outline-color') and system fonts (for 'font') mean that users may apply their system color and font preferences to Web documents.
* Dynamic outlines (the 'outline' property) allow users (e.g., with low vision) to create outlines around content that don't affect layout but do provide highlight information.

CSS styles and Div layers

noreply@blogger.com (Ranji) — Thu, 26 Jun 2008 09:03:00 +0000

From this video, you can easily learn how to apply CSS styles and layers in Div code.

Dreamweaver Forms

noreply@blogger.com (Ranji) — Thu, 26 Jun 2008 08:54:00 +0000

What is a form?

Forms allow you to collect information from users via the web. Forms can be used for surveys, information gathering, online quizzes, applications, etc. Results from forms at Wellesley can easily be sent to an email address or to a FirstClass conference that is set up to receive internet mail. Results can also be stored in a CSV file on the server, then downloaded and opened in a spreadsheet application. CSV files should be stored in a separate, local-only folder to prevent from appearing in search results.

Forms can include objects such as text fields, buttons, checkboxes, radio buttons, and list/menus as well as text, tables, and images.

Creating a new form

Forms allow users to interact with a Web page. They can be used to create surveys, collect information from users, or for many other purposes. Macromedia Dreamweaver makes it easy to add forms and form objects to your pages.

1. From the Insert menu choose Form. A red border will appear.

This red border marks the boundaries of your form. All of your form objects MUST appear inside this border. You should have only ONE of these red borders on each webpage. As you add objects to your form, be sure that you are inserting them within the red border.

2. Next, set the properties for the form so it knows how to process the data it receives.

* In the Action Field enter your website URL.
* Verify that the Method is set to POST.

Adding an object to a form

Form objects include things like check boxes, buttons, and text fields that users can type into. For each object you add to a form you must complete two steps: you must first insert the object and then you must set the properties for that object in the Property Inspector. You must do BOTH steps for every object you insert.

There are two ways to insert form objects into your Dreamweaver document.

1. From the Insert menu choose Form Object and then select an object from the menu

or

2. Click on the object you would like to insert on the Forms panel of the Insert window.

To see the Forms panel of the Insert window, click on the small black arrow next to the panel title (this probably says Common). In the menu that appears, select Forms.

You can continue reading through this document, or you can click on a form object to jump to instructions on how to insert it.

* Text Fields
* Buttons
* Checkboxes
* Radio Buttons
* Lists and Menus
* Jump Menus

Text Fields

Text fields allow users to type text into the form. The entered text can be displayed as a single line or as multiple lines. You can type text in this text field to try it out.

To insert a Text Field:

* From the Insert menu choose Form Object and then Text Field (or click the button on the Forms panel of the Insert window)

# Click on the text field in your Dreamweaver document
# In the Property Inspector find the TextField box and type a descriptive name for your text field. (By default this may already be called textfield, or textfield1, etc. but it is important that you give it a better name. In the above image, the text field has been named Comments.) If this is a required field, the name must begin with an underscore. For example, to make the above required, the name would be _Comments.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

# In the Char Width box, specify a width (number of characters) for your text field
# Choose whether you would like your text field to be a Single line or a Multi line box.
# If you choose to have a Single line box:

* In the Max Chars box, enter the maximum number or characters you would like users to be able to enter. If you leave this box empty, users will be able to enter an unlimited number of characters.

# If you choose to have a Multi line box:

* In the Num Lines box, specify a height (number of lines) for your text field
* From the Wrap menu, select a wrap setting (Choosing Virtual will allow the text to wrap in the text box and also to wrap properly in an email or conference posting.)

Buttons

A button performs a task when clicked, such as submitting or resetting the form. You can label a button with any title.

To insert a button:

* From the Insert menu choose Form Object and then Button (or click the button on the Forms panel of the Insert window)

To set the button properties:

1. Click on the button in your Dreamweaver document
2. In the Property Inspector find the ButtonName box and type a descriptive name for your button. If this is a required field, the name must begin with an underscore.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

3. In the Label box, specify a button label (the text that appears on the button) . The Label does not have to be the same as the ButtonName and can include spaces and punctuation if necessary.
4. Choose an action for your button. Usually you will choose either Submit form or Reset form.

Checkboxes

Checkboxes allow users to select multiple items from a single group of options.

To insert a checkbox:

* From the Insert menu choose Form Object and then Checkbox (or click the button on the Forms panel of the Insert window)

To set the checkbox properties:

1. Click on the checkbox in your Dreamweaver document.
2. In the Property Inspector find the CheckBox box and type a descriptive name for your checkbox.

Note: If you are inserting a group of checkboxes (like the example group above) all of the checkboxes in the group must have a DIFFERENT CheckBox name. For example, in the group of checkboxes above I could choose to name them Color, Color1, etc. Sometimes it makes sense for the name and the value of each checkbox to be the same.

Note: If this is required, the name must begin with an underscore. For example, to make the above required, the name would be _Color.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

3. In the Checked Value box, type in the value of the checkbox. This is the value that is set (and sent in the email/conference posting) when the checkbox is selected (checked).
4. Choose whether you would like the checkbox to be Checked or Unchecked by default.

Radio Buttons

Radio Buttons allow users to select only ONE item from a group of options

To insert a radio button:

* From the Insert menu choose Form Object and then Radio Button (or click the button on the Forms panel of the Insert window)

To set the radio button properties:

1. Click on the radio button in your Dreamweaver document.
2. In the Property Inspector find the RadioButton box and type a descriptive name for your radio button.

Note: If you are inserting a group of radio buttons (like the example group above) ALL of the radio buttons in the group must have the same RadioButton name. Each group of radio buttons will need to have a distinct name.

Note: If this is required, the name must begin with an underscore. For example, to make the above required, the name would be _Number.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

3. In the Checked Value box, type in the value of the radio button. This is the value that is set (and sent in the email/conference posting) when the radio button is selected.
4. Choose whether you would like the radio button to be Checked or Unchecked by default.

Lists or Menus

Using the shift or control (apple) keys select multiple towns from this list:

Select one state from the menu:

Lists and Menus present a set of values from which users can choose. A List will display a number of values in a scrolling list and will allow the user to select multiple items at once. A Menu displays all of the options when it is clicked on and will allow the user to select only one item.

To insert a list or menu:

* From the Insert menu choose Form Object and then List/Menu (or click the button on the Forms panel of the Insert window)

To set the radio button properties:

1. Click on the list or menu in your Dreamweaver document.
2. In the Property Inspector find the List/Menu box and type a descriptive name for your list or menu. If this is a required field, the name must begin with an underscore. For example, to make the above required, the name would be _States.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

3. In the Type box, choose whether you would like to have a Menu or a List
4. If you choose List:
* In the Height box, specify a height (number of items) for your list . This does not limit the number of items in the list. It only limits the number of items that are visible before the user begins to scroll.
* Choose to allow multiple selections by checking the Selections - Allow Multiple box
5. Click the List Values... button. A List Values window will open.
6. To add an item to the list, click on the + button.
7. Click under Item Label and type the label that you would like to appear in the list.
8. Click under Value and type the value. Although they do in this example, the Label and the Value do not need to match.
9. To change the order of the items, select an item and use the arrow buttons to move the item up or down in the list.
10. To remove an item from the list, click on the – button.
11. When your list is complete, click OK.
12. In the Property Inspector, choose the item you would like to display by default in the Initially Selected box.

CSS in Dreamweaver

noreply@blogger.com (Ranji) — Thu, 26 Jun 2008 08:49:00 +0000

Photoshop - Image Slicing

noreply@blogger.com (Ranji) — Thu, 26 Jun 2008 06:46:00 +0000

Hey! Anyone interest to learn about Image Slicing means its very useful to you yaar...

Image slicing is a technique for creating a web page (or a component of a web page, like a header or navigation menu) visually in Photoshop (Fireworks and Illustrator also allow you to slice images, too). But how does it work?

Well, you’d first design a page in Photohsop exactly as you want it to look when it goes live on the web. Then you cut out all the page components—title bars, buttons, navigation menus, and so on—using Photoshop’s Slice tool. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and (and this is the icing on the cake for the code-leary) all the necessary code will automatically be written as well.

Finally, once everything’s saved out, you can pull everything into Dreamweaver and finish off your layouts with any necessary tweaks. It’s a very cool process, and one of the most popular methods for building web pages.

The following sections describe how to take a created layout, slice it up in Photoshop, save it out, and then pull the whole thing into Dreamweaver to finish it off. Ready? Lets get started!

Part 1: Designing Your Page to get started to slice

So obviously, the first thing you’ll need to do is create a layout in Photoshop. In my example, I’m building an entire page, and because I don’t want any horizontal scrolling in my layout, I build for the most common monitor resolution, 1024x768. There’s quite a bit of debate as to how wide one can design inside a width of 1024 pixels, but I personally go with 990 pixels as my maximum width. This means that starting off in Photoshop, I create a new file with a canvas size of 990 pixels wide. As for the height, that’s usually determined by content, so you might want to give yourself lots of space to work inside.

Now in the case of creating a page object like a menu or header, you’d have to know the dimensions of the object before creating it in Photoshop.

Once your dimensions are set, it’s simply a matter of building your design. Design and lay out all your buttons, background graphics, logos, and so on, building up your page’s design. Use whatever tools, commands, and options you’d like. Often times, I’ll even cook things up in Illustrator, then drop them into my layered Photoshop layout as Smart Objects, just to make the process go faster.

If you’re building a page as I am here, don’t worry about actual page content—the text and other objects that would appear on the individual pages of your site. Imagine instead that you’re building a template. What you’re after is the overall look of all the pages in your site. Later on in Dreamweaver, you can drop in the content. Once your page design is complete, you’re ready to begin slicing it apart.

Slicing up your design is the fun part. What you’re doing is taking your overall layout and cutting it into smaller pieces. This means you’ll be isolating buttons, logos, and background areas on your page by slicing them away from the rest of the layout. There are a few different ways to slice apart layouts and page components, but I’ll show you my technique.

Here’s how to get started:
1. From Photoshop’s Toolbox, select the Slice tool.
2. With the Slice tool, click and drag a box all the way around your entire design.

This creates a single, large slice that encompasses your entire layout. I think you’ll find this to be the easiest and most accurate way to slice images.

3. Right-click (or Ctrl+click on the Mac) anywhere inside your design, and choose Divide Slice.
4. In the Divide Slice dialog that appears, decide how you’d like to break that single slice that you just drew. Turn on either Divide Horizontally Into or Divide Vertically Into (or both); then enter in the number of slices you’d like to create. Click OK when you’re ready.

This is where the craft of image slicing comes in. Look for natural breaks in your image. Remember, each slice will wind up being saved out as an individual graphic, so you may want to create slices for each button in a menu, for example. In my layout, I’ve divided the image into three slices horizontally: one for the header area, one for the main area, and a third for the lower, footer area.

If Preview is turned on in the Divide Slice dialog, you’ll be able to see where your slice lines will appear in the image. Don’t worry if they’re not exact, we’ll adjust them in the next step.

5. Next, if needed, adjust the slice lines that appear on your image simply by dragging on them. You may want to zoom in for a little more precision.

You’re now ready to continue slicing apart your layout. I find it easiest to work from the general to the specific—in other words, look for main areas to slice away; then start getting more refined as you go. Once you have the general areas of your layout sliced, you’re ready for the more detailed areas.

6. To continue slicing apart your image, single-click inside a “general area” slice; then right-click (or Ctrl+click on the Mac), and choose Divide Slice once again.

Notice that when you single-clicked inside the slice, all the other slices in the image deselected? Now this time, you’ll only be dividing up the currently selected slice.

7. In the Divide Slice dialog, set the number of slices you’d like to create horizontally and vertically, just you did earlier.

As before, look for natural breaks in your layout. Remember, each slice is saved as a separate graphic, so you might want to isolate buttons, logos, and so on. Don’t get frustrated if you have to start over a few times. Image slicing does takes a bit of patience. Knowing where and what to slice is just a matter of practice.

8. Continue slicing apart your layout using the techniques described until you’re happy with how things are looking.

Things lookin’ good? Great, now you’re ready for the fun part!

Part 2: Saving the layout

Once you’ve sliced up your layout, you’re ready to save everything out of Photoshop. And remember, not only will Photoshop save all your sliced images in one shot (meaning that you don’t have to save each of them individually), but it’s also going to build your page’s underlying code structure for you. So when you save your slices, Photoshop will also save an additional HTML file. That’s the file that you’ll want to open in Dreamweaver. Awesome is an understatement here, folks—it doesn’t get much sweeter than this!

Here’s how to save it all out:
1. Choose File > Save For Web & Devices.
2. In the Save For Web & Devices dialog, set optimization settings for your slices.

If you’ve never used this dialog before, I’ll give you a quick run-through on how it works. Holding down Shift, you can select the slices that you’d like to set certain optimization settings for—that is, compression options when you’re saving an image (or in this case, a group of images) for use on the web. Next, on the right side of the panel, you can set your optimization settings.

Depending on the file format that you choose, different options will appear. For example, in the case of JPG, you’ll see options for compression, quality, blur, matte, and a few others. Unfortunately, we don’t have the space to go through all the options, so you may want to read up on a few of these.

3. Once you’ve optimized your slices, click Save.
4. In the Save Optimized As dialog, name your file in the Save As field; then navigate to the folder where you’d like to save your slices. Don’t click Save just yet.

The location where you save your work will most likely be your site’s local root folder, as you’ve defined it in Dreamweaver (You may need to read up on defining a site in Dreamweaver if you’re not sure what I’m referring to).

5. From the Format menu at the bottom of the dialog, choose HTML And Images.

This ensures that Photoshop will not only save out your slices, but also all the background code needed to render your layout.
If you’d like to explore some of the other options available, choose Other from the Settings menu. You may want to experiment with a few of the commands found here.

6. When you’re ready, click OK.

Photoshop saves out all your slices, and the HTML needed for your layout. Pretty easy stuff. Now lets go take a look at what happened.

7. Minimize Photoshop; then navigate to the folder where you saved your work.

Notice that Photoshop created an HTML file, as well as an images subfolder. Inside the subfolder, you’ll find all the individual slices from your layout.

8. To see your completed layout, open the HTML file in your web browser.

Your layout looks exactly as it did back in Photoshop. Cool!

Part 3: Throwing In Some Dreamweaver

Now that everything is saved out of Photoshop, Dreamweaver takes over the formatting duties. In Dreamweaver, try opening the HTML file that Photoshop created, and you’ll see right away that everything’s been created with tables. In Photoshop’s Save Settings (Step 5 in the previous section), you can set whether to use tables or div tags.

Notice too that all the slices sit within the table’s cells. You can drop additional page content on top of your images using a clever technique: Remove the slice from the table cell; then set the cell to the slice’s original dimensions; drop the slice into the cell’s background; and finally insert new text or image content into the cell.

Now you can begin making any adjustments you’d like. For example, you could center the layout, add in a background color, create any necessary CSS rules, begin dropping in your content, and set your hyperlinks.

From here, it’s all tweaking—adjusting CSS styles, text, and other page elements within your design. If you want a graphic to appear behind the text in a table cell (which you can see was done in the sample page design, which uses a crater background behind the text), remove a graphic from its table cell and set it as the cell’s background image, just as you did earlier in this chapter. Then insert your text in the cell as you normally would.

As you work, don’t forget to preview your page to see how your design is looking. And here’s one more trick: With your page working well in Dreamweaver and previewing nicely in those target browsers, use it as the basis for the other pages in your site by resaving it under a different file name for each page. Even better, you can use your page as a Dreamweaver template.

So there it is, a quick guide to getting started with image slicing in Photoshop.

Now, things are get ready to start the image slicing in Photoshop.

Dreamweaver sites handling

noreply@blogger.com (Ranji) — Thu, 26 Jun 2008 05:29:00 +0000

Why to define a page in Dreamweaver?

You should always define a page so that dream weaver knows where all files should be and what file types are you working on. This prevent problems with paths to your hard drive files later on when the site is online. While defining a page you will have a lot of options you can chose from.

Let us see the options.....,

You will have a two ways how to define a web page. One is a wizard and other is an advanced mode.

1. Click the Define site from the main menu.

2. On the first screen Dreamweaver will ask you the name of the web site. Name your site something related to the site so you can remember what this web is. For example I will cal this page “Sample Page”. After renaming a page click next.

3. On the next page Dreamweaver will ask you would you like to use any server technology as ASP Net PHP or any other, if you don’t wish to use any of these technologies just click next (no should be on by default), but if you do wish to use them click yes and you will be presented with choice of available technologies. The available technologies screen is shown on the right where you would chose the one you are planning to use if you do and click next. Here we will not use advanced technologies.

4. Dreamweaver now wants to know how are you planning to work with your files. First option will allow you to create a page on your computer and after that upload it to your web server, but the second one will place files directly on your local web server. In this example chose the option to edit files on this computer and upload them to internet after.

5. Next, Select where on your computer would you like to store files while you are working on them. I recommend that you create a folder on your computer in any location where you will have a fast access to it, I will do that under my documents and call folder “mdfp” and that stands for my first defined page. I recommend you to not use any spaces and case sensitive letters or any symbols in the title or folder names as it my cause you some problems later on. We will centralize our website work area on the computer. Click an folder icon and browse to the folder just created. Click next button.

6. Dreamweaver will ask for the way you are uploading your files to the web server. My preferred is none as I usually use some other software to upload and manage all the files on the server.

Before that you have to know how to upload a page in FTP.Now let us see about FTP.

FTP (Fife Transfer Protocol) is one of the most popular ways to upload a page to the internet. If you do this option you will be presented with the following options.

* The hostname is the name of your FTP server, you will get this address from the company witch is handling your server.
* The same thing is about the option 2.
* FTP login is a name by witch server knows you (the same as email name)
* Password well I think you know what is that.
* Save option will memorize the login name and a password, do you need to use a SFPT is depending on the hosting company you use.

Local/Network you don’t get so many options. Chose of path where your local server located.

Please choose none and click next.

7. You will get a confirmation box that your web is now set up! You are done! You are now ready to add pages, create library items and templates.

I think now you are very clear about that definition.

Experiment and try out some of the different options, and most importantly, have lots of fun!