CSS stands for Cascading Style Sheets, and it is essentially the language used for styling the contents of an HTML page. I won’t go into the history, reasoning and technical aspects of why CSS is so important. But, instead I will briefly sum up in a list of three reasons what the real purpose behind designing with CSS styles is.
For simple to complicated websites, the content within the site can be completely separated from the design of the site. This is important for a couple obvious reasons: you can update content without changing the style, and you can change the style (colors, fonts, layouts) without having to make any changes to the content.
You can make one change to a style sheet, and it will simultaneously change every part of your content that takes its orders from that style sheet. Let’s put this into perspective-changing one piece of CSS code, can change the colors, layout, fonts, and more of many, many, many pages all at one time. For a great illustration of this quality taking effect, please visit and read the information on the home page of:
Cascading Style Sheets are composed of two main parts: Selector & Declaration.
This is an example of a simple style sheet:
H2 { Font-weight: bold;}
The Selector is “H2”
The Declaration is “Font-weight: bold”
If you attach this style sheet to any HTML document, all of the content held between the
tags will be bold. There are many different types of declarations and selectors, and you will probably not memorize all of them. Having some kind of online resource, or text reference will help you when you’re in the process of creating your site. Also, Dreamweaver will automatically list the selector or declaration items if you type in part of it, Dreamweaver also has some unique visual aids and guides when working with CSS.
Attaching CSS
When you write up all of the style sheets, using the particular selectors (H2, H1, P, etc.) and declarations (font-weight: bold, font-size: 12px, etc) you will then save this document as a CSS file. CSS files contain no head tags, no paragraph tags; basically they are not formatted the way that HTML pages are formatted. Just the styles, that’s it.
You save the file will a .css extension, and then proceed to attach it to the HTML documents you want to be affected by it.
You would attach a style sheet as show in red and within the head portion of the HTML:
The code shown in green is the way in which you would attach a style within the HTML document, and requires no linking whatsoever.
HREF="MainStyle.css" TITLE="Cool">
Headline is blue
While the paragraph is green.
Now, you can probably see why putting a style attribute (declaration on a selector)within the body of the text defeats the purpose and greatness of CSS.It only affects the one piece of text that the style in surrounding.
Selectors
If you are new to CSS, you are probably wondering…What I can use these style sheets on, so far I’ve only see P and H1… You can style almost any standard HTML selector, some examples include:
H1, H2, P, em
In addition to these selectors, you can actually create selectors yourself, and identify images or content as the selector! The two examples of this are:
ID Selectors have a unique value over all other selector elements. An example of what the CSS code would look like using an ID selector:
#Days { font-family: verdana; color: #ffffff }
There are two ways to specify the ID within the HTML code.
You can identify this ID with another element-
Monday, Tuesday, Wednesday
Or as its own DIV, which is also its own unique element-
Monday, Tuesday, Wednesday
Class Selectors similar to ID selectors, but their formatting is different, and they hold a slightly less importance than ID selectors when it comes time for the HTML to choose the order of the styles. An example of what the code would look like:
.days {font-family: verdana; color: #ffffff}
There are also two ways to specify the class within the HTML code.
You can identify the class with another element:
Monday, Tuesday, Wednesday
Or as its own DIV, which is a unique element being styled by the class selector
Monday, Tuesday, Wednesday
Here are some resources to help you better understand the many different class selectors and declarations. It is composed of many pages, but it is useful to get a general idea of some of the possibly attributes and selectors that can be made using CSS.
I will continue the CSS Tutorial for Beginners in a “Part 2.” Cascading Style Sheets can be very confusing and overwhelming if you are new to them. When I first attempted to teach myself CSS, I spent hours upon hours, days upon days, tryin to find resources online that provided me with in depth knowledge on the subject.
There is a big bunch of resources on optimizing your blog for search engines. I have tried to collect the best tips and plugins in this article.
These tips won’t flood your blog with visitors - no SEO tips will. Use these tips to improve your site, and fight for a lot of backlinks and visitors by writing quality content and putting a lot of work into it. It has never been easy to run a website, and it for sure isn’t getting easier.
Permalinks
Use a permalink structure and be sure that the post title is in it. In the WordPress administration go to Options>Permalinks and select a permalink structure, or make your own. I use /%year%/%monthnum%/%postname%/ on this site.
Page titles
The title tag should show the title of the current post or page you are currently visitng. Eg. this page will have the title »WordPress and SEO | The undersigned«. In your themes header.php file you can do this by making sure that the title tag looks like this:
Search engines weigh headers (h1, h2, h3 …) higher than other content (p, li …), so it is important that you write good titles that also contains keywords that matches the content. The best thing is to only have 1-2 h1 tags on each page, eg. the blog title and newest blog post.
Alt tags
Use alt tags for your images, and be sure that they match what the image shows - this helps google image search and other image search engines.
Tags
The internet is evolving, and in this process tags is the next »big thing« - using tags makes sure to keep a lot of cross-linking from posts to posts, which eventually will let search engines dig deeper into your site.
If you read an article on this site, you will notice the recent posts list in the end of each article. This also helps search engines digging deeper into your site.
When visitors is referred to your site from a search engine, they are definitely looking for something specific - often they just roughly check the page they land on and then closes the window if what they are looking for isn’t there. Why not help them by showing them related posts to their search on your blog.
Google has a feature for webmasters, called Sitemaps. This helps google index your site, and lets you weigh what content on your site, you find most important.
Use the feed feature! Set up your WordPress to ping a list of aggregators automatically in Options>Writing. A great list of ping services can be found here.
Valid markup
Be sure that your your site validates, this might not be the most critical point from a SEO point of view, but it might weigh some.
Don’t create pages that install viruses, trojans, or other badware.
Don’t create multiple pages, subdomains, or domains with substantially duplicate content.
Avoid “doorway” pages created just for search engines, or other “cookie cutter” approaches such as affiliate programs with little or no original content.
Tricks intended to improve search engine rankings.
Get backlinks
Write to your friends, to other bloggers, and trade links with them. Get a linking-network established, and make sure that some people link back to your site, using your blogs title or primary keywords as anchor-text. Amount of links and especially links from quality sites, helps you being placed better in search engines search results. When writing an article, be sure to link back to your sources (if these are blogs, in most cases, a trackback link to your blog will be shown on their site). Be sure to link to your blog in forum signatures, mail signatures etc. as well.
Update your blog
Be sure to keep your blog updated - no one visits a dead site. Eventually you can let del.icio.us post your daily bookmarked links to your blog - this helps making your site look active.
Stick with the same domain name, blog title, permalink structure etc.
Write quality content
Write quality content, it is the most important. Write quality content that people want to read. Stick to a few topics, and write mainly about those. Quality content might bring you to del.icio.us and digg.com as well.
Involve the reader
Encourage your visitors to comment on your posts and join the discussion. Involve the reader by writing to them. »You should«, »We could« and less using »I have«, »I did« etc.
Adobe Photoshop's Web Photo Gallery is a great and easy to use function, but the quality of your preset options have always seemed lacking. Using the Lightbox JS javascript library and the Web Photo Gallery we can easily create a very slick photo gallery for your website.
Double click the layer to open layer style window. Apply settings as shown.
Create a circle using elliptical shape tool. Enable "Intersect shape areas" at the top bar.
Create an ellipse using elliptical shape tool. Press Ctrl+T. Right Click and select Warp. Adjust the nodes to get the shape as shown.
Create a circle using elliptical shape tool. Ctrl+Click to get the selection. Contract the selection by 1pixels. Create a new layer. Apply Black to white gradient. Change layer mode to screen for this layer.
Create a smaller circle. Repeat above steps.
Duplicate all the eye layers. Press Ctrl+T. Right click and select Flip Horizontal and place on the other side.
Create an ellipse for the nose using elliptical shape tool. reapply same technique as used for the eyeballs. Create another ellipse for the mouth using elliptical shape tool. Apply same layer style we used for the main face circle.
Create two smaller circles using elliptical shape tool.
Select and merge both small circle layers. Using eraser tool with a soft brush settings erase the top edge.
Create a rounded rectangle using rounded rectangle shape tool. Enable add to shape area from the top bar. Create four circles using elliptical shape tool to create a bone in his mouth.
Using pen tool create ears and apply same layer style as for the face etc.
Create an elliptical selection using elliptical marquee tool. Press Alt and create two elliptical selections to subtract from the previous selection. Create a new layer and fill it with white color. Reduce the opacity.
Create a rounded rectangle using rounded rectangle shape tool. Using pen tool create a thin neck band.
Create a circle using elliptical shape tool. Enable "subtract from shape area" at the top bar. Create a rectangle using rectangular shape tool.
Duplicate the foot layer a couple of times and place as shown below.
Using pen tool create tail and apply same layer style.
Using line tool add details as shown below.
Select and merge all the layers. Duplicate the layer. Press Ctrl+T. Right Click and select distort. Adjust the nodes to get the shape of perspective shadow. Enable lock transparent pixels from layer palette. Fill it with gray color.
There are thousands of design resources on the web which can lead to an overwhelming experience when looking for inspiration or ideas, so I created a list of resources that I use on a regular basis. Here is a list of 50 design resources that can be helpful to any designer or marketer.
CSS Galleries
Sometimes it can be hard to come up with design inspiration. CSS galleries are a great place to get design inspiration and they can also be leveraged as a great source of traffic. If you can get your design on these galleries it can drive thousands of visitors to your website.
Designing with web standards is a great way to keep your code clean and search engine friendly. Why design a site with a 1000 lines of code when it can be done in 100 lines of code.
Developing With Web Standards - This document explains how and why using web standards will let you build websites in a way that saves time and money for the developer and provides a better experience for the visitor. Also discussed are other methods, guidelines and best practices that will help produce high-quality websites that are accessible to as many as possible. Roadmap to Standards Web Standards Project - The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all. Web Standards Checklist Importance of Web Standards
Validators
Now that you know all about web standards, here are some tools that can help check if your site is compliant. These tools will also help you find errors in your code.
Usability is probably the most important factor in a website design. Making your website usable can help improve the experience for your visitors as well as help improve your conversion rate.
Blogs are a great resource for up-to-date information on design and usability. Here is a list of blogs that you may want to subscribe to or read on a regular basis.
Stopdesign Signal vs. Noise Blog - A design and usability blog by 37signals. Digital Web Magazine - Digital Web Magazine is an online magazine intended for professional web designers, web developers and information architects. The magazine consists primarily of work contributed by web authors, as well as by others who occasionally delve into the web realm. We put emphasis on and provide recognition for contributed work. The Magazine is recognized by nearly all of the major web design agencies in the industry. A List Apart - A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. 456 Berea Street - This is a site by Roger Johansson who writes articles on web standards, accessibility, or usability in one way or another. mezzoblue - A semi-daily expository and exploratory on all things web, design, and typographic. It is also a personal portfolio site with works in any creative discipline the owner feels fit to publicize. Adaptive Path Jesse James Garrett - The blog of the founder of Adaptive Path. Jeffrey Veen Your Total Site - YourTotalSite touchs on a wide range of subjects that include usability, accessibility, visual design, online marketing, (X)HTML & CSS, JavaScript, Information Architecture, and more. IxDG Resource Library - A repository of information about interaction design. Apples to Oranges - A blog by Ryan Nichols. Demystifying Usability - A blog by Frank Spillers, a usability consultant.
Color Resources
Color is an important factor in design. Color can separate your site from your competition and it can also convey a specific message to your visitors. If you provide a personalized service you may want to choose colors that are soft and personal or if you want a corporate look and feel you may want to pick hard colors. Here are several resources that I use to help me make color decisions.
Color Schemer - Online color scheme generator. Color Meaning - An article that explains the symbolism and meaning of different color types. The Meaning of Color in Web Design - How colors influence audiences when marketing products through the Internet. Symbolism of Color Color Matters - Explore how color affects emotions, appetite, vision, sexuality, design, and art.
Typography
There are many different types of fonts and they can greatly affect how readable your site is, so choose wisely.
1001 Free Fonts - A large selection of true type fonts for Windows and Macintosh. The Anatomy of Web Fonts Typetester - Typetester is an online application for comparison of the fonts for the screen. Its' primary role is to make web designer's life easier.
Web site designers today have plenty of options in terms of tools and technologies they can use to build their web pages. Many questions come up: should we use Flash, do we need database driven web pages, do we need a shopping cart for our e-commerce web site etc ...
This article takes a step back and deals with some of the fundamental questions/issues in web site design.
1. Do not use framesets in your web sites: They are not required in most cases and framesets will kill you with search engines.
2. Do not use a 'heavy' background in your web pages that distracts the users from what you are trying to present to them and makes the text hard to read. Remember what you are trying to do with your website, and I think for most, it is not trying to impress people with some tacky background tile. Keep it easy to read; there is a reason why solid colored text on a solid colored backgrounds are used often on web pages and in print.
3. Use sharp clear pictures: This is really important, a good looking web page can be made with just one clear sharp image and at the same time, the best looking web page can be made to look bad with just one crappy image.
4. Get sharp clear copy of your logo: If you are a company, you want to look professional so that people have confidence in giving you their money, a crappy looking logo isn’t going to do it.
5. Avoid the IE page transitions: IE (Internet Explorer) can create many special effects, things like page transitions (page wipes, etc. …) are tempting and may be suitable sometimes, but for 99% of web sites they are not.
6. Avoid the flying text: Again, the decision whether or not to do this has much to do with the content of your web pages, but it should be clear that for most websites this would not be a good thing.
7. If you are trying to sell something, having live credit card processing will increase your sales substantially. Sometimes when people want to start selling online they avoid the perceived trouble of hooking up with a credit card processing service because of the programming required. This is a big mistake, studies have clearly shown that web pages that provide credit card processing in their e-commerce enabled web pages (web pages that sell stuff) have much greater conversions.
Above all, make the web site pages no more than 60-70k (I shoot for 50k) if you can, and keep things very simple so your clients have an easy time finding things. You can help this along by strategically making use of the browsers caching capabilities.
In a nutshell: your web-browser will reuse images that it has loaded. So (if for example) if you have an image on your 1st page that you also use on 2 other pages in your website, this image only gets downloaded once by the browser and subsequent times the browser will automatically load a copy of the image it has from its own cache. This can really speed up things from the surfer's point of view and also saves you bandwidth.
This first article is meant to provide some helpful tips for those just learning to build websites. I am not going to go into details explaining specific technology; rather I am going to point out a few things that many people just starting may find useful.
Learn (at least) some basic HTML.
Whenever I suggest this to beginners they always ask why they should learn to code HTML when we have programs like Dreamweaver and FrontPage that do it all for ua? The short answer is that they don’t, at least not all the time. While these programs are very useful (and I highly recommend that all web page designers learn to use one), they do have their limitations where it can be easier to hand code the HTML yourself. If you don’t know HTML, this can be a problem. You don’t have to learn everything there is about HTML, but you should learn the basics and some key tags that are used all the time:
: The link tag is the most important tag there is. HTML is all about linking documents (web pages) together and as such they form the basis of making the web work.
: The table tag is used to create tables. Originally it was invented to present data (like a stock report) in tabular form. Soon after, inventive HTML designers started to use them to format the entire web page by inserting not only text but also images into tables. Today 99% of web pages are formatted using tables.
: Div tags allow you to demark a portion of your page so that you can do things to it. Another way of saying ‘demark a portion’ can be ‘to put into a container’. Once a part of your web page is in this
container, you can do all kinds of stuff like style it, animate it, make it visible or invisible etc … Div’s represent the next generation of formatting HTML pages that is in many ways superior to tables.
Learn one *wysiwyg program like DreamWeaver or GoLive and learn it well.
Each of these programs has its advantages and you may be tempted to jump from one to another because of some neat thing that it does. Often you find when you are using the new program, that you miss features of the old one that you rely on. So you should stick to one and really learn it well. This will go a long way to making you a productive web designer.
Keep your web pages simple.
Once you start to understand how to make web pages, you will be tempted to go all out with animated gifs, rollover affects, and fancy designs. The problem with this is that it can easily lead to confusing pages for the viewer and hard to maintain sites for you. Web sites are always in need of changing and updating. You will be thankful when that inevitable day comes and you have an easy to update modular site to work with instead of an inflexible over-designed mess.
One common question I get, is how a website job should be planned and executed – what are the steps? The following is a quick outline of the process that I have been using for years with good success – at least most of the time.
THE 8 STEPS OF WEB DESIGN
The steps:
Figure out what the focus of the website will be.
What specific features do you want in the website.
Create a list of sections for your website and give them a hierarchy of importance.
Write out your content and finalize it.
Find a style / look that meets your website’s and your industry’s requirements.
Build the website.
Evaluate the website and make the required changes / updates.
Go live – register a domain, find a host, upload the website.
1. THE FOCUS OF THE WEBSITE
This is the first thing you want to define clearly before any other step is taken. You need to decide what the main purpose of the website is - what you want to focus on in terms of a subject.
It is important that you define this step as clearly as possible because a website’s focus has a major impact on the whole project; this is the ‘foundation’ of the site.
For example:
A web store.
Information hub for established clients.
Branding website.
2. SPECIFIC WEBSITE FEATURES
This builds off of the first step, where now you look at actual features that you need to implement. For example:
A shopping cart for an online store
A password protected section of the website
Again, the more detail the better.
3. MAP OUT THE MAJOR SECTIONS OF THE WEBSITE
With the first two steps completed, you’re ready to actually start mapping out the major sections of the website; drawing out quick diagrams of the website is a useful way of doing this.
A diagram can easily show the hierarchy of a website and how the various sections are related to each other.
4. WRITE OUT YOUR FINAL CONTENT
This part is usually left to the end … then people wonder why they have to go back and rethink the structure of the site.
All websites are driven by content; it’s the content that makes a site effective and successful. As such, this part of the process is arguably the most important, so you need to pay attention to it.
5. FIND A STYLE / LOOK FOR THE WEBSITE
At this stage of the process, you are ready to start looking at the visual aspect of the site – the design. You have a few options:
Hire a graphic designer / web designer
Come up with your own design – I’m assuming you have some artistic and design experience.
Buy yourself a website template and save time and money.
6. BUILD THE WEBSITE
Yes, I know it seems impossible but you can finally start building the actual site at this point!
With the above questions answered and steps completed, you’ll find the process of building the website (actually writing out the code,) is much easier and you will have reduced the chance of having to go back and redo things.
7. EVALUATE THE WEBSITE, MAKE THE REQUIRED CHANGES / UPDATES
Once you've built the website, you should walk away from it for a day or two. This will allow you to come back and evaluate it with fresh eyes. It might also be a good idea to get someone who has not worked on the site, to take a look as well.
Here are some of the things you should be looking for:
Clean easy to update design/structure.
Good usability in the design - and all that implies.
Fast loading 'light' pages.
Intelligent use of technology - using Flash when it makes sense not because you want a 'cool' intro!
The website’s ability to convey the meaning/message of the website quickly if not instantly.
8. GO LIVE – REGISTER A DOMAIN, FIND A HOST, UPLOAD THE WEBSITE.
If you’ve passed steps 1 to 7, you know you're ready to show the world the website. All that is left to do is go live:
Register a domain
Find a hosting company
Upload the website
NOTE: You could actually register the domain and find a hosting company after you’ve completed the first 4 steps. Sometimes it makes sense to register your domain name before you design the website; this is because you may want to integrate the domain name into the design.
CONCLUSION
If you follow these steps, and not let pressures from your clients (or anything else) sway you, you’ll find yourself working more quickly and under less stress, while delivering a better website for your client – everyone wins.
1. Get New File with 500x500 diemnsion. Use Guide Lines(View>New Guide) to get nice and smart proportion.Then use Tool>Ellipse and draw a black circle, press Alt+Shift and draw from centre point. Lets assume this layer as Base.
Go to Layer Properties and Choose Blending Option. Set this layer setting like that.
For Stroke Color, I used #919191
Here you will get like this aftre setting.
2. Here, we have to make 2 reflected layers for this circle. Choose 1st New Layer (Clt+Shift+N) Make selection by clicking Clt+click on Base Layer, in Layer Properties box.Then, Tool>Elliptical Marquee and change this to Intersect with Selection, Select half upper part of Circle, on 1st layer.
Choose Tool> Gradient Tool and draw from up to down
Here is the result
Create 2nd Layer for 2nd reflection. Clt+click on Base layer and draw with Gradient tool from bottom to up. Here we finished reflected layers.
3. Create New Layer again, for two Eyes. Draw two eyes and drop shadow abit in Blending Option.
4. Choose New Layer for Mouth. Tool> Pen and drawing something like that. Foreground color : #ec0000
Then set the Layer Style as following
Color #afafaf for Outer Grow
You will get something like this
5. Create New Layer again for Tooth. Draw with Pen tool and set Bevel and Emboss a bit.
6. Draw two eyebrows with pen tool on new layers, and set Bevel and Emboss a bit.
7. Draw ears on new Layers. Ear Layers must be under the all layers, except bg layer. Set the layer style as follow. ၿ
Here is the last cute monkey vampire!
8. If you wanna animate it, just export this .psd file to Image Ready Then, Set 1st frame delay time to 1.
Duplicate the first frame and move its eyebrows. Make sure Eyes Layers must be unckeck in layer Style.
Here we get the final animated Lovely monkey vampire.
