Posts Tagged ‘CSS’

A Brief History of Cascading Style Sheets

Monday, August 1st, 2011

CSS, or Cascading Style Sheets, were originally created to solve a problem with html 4.0. Because HTML was never intended to contain tags for formatting a document tags like font had to be used to format the look of text which created unnecessarily bulky code.

To solve this problem, the World Wide Web Consortium (W3C) created CSS which allowed all formatting to be removed from the HTML document and be stored as a separate file which was added to the document though a Link tag.

CSS files have universal browser support and are typically stored in external files. As well as defining how the file looked, CSS enables you to allocate styles to numerous elements via direct, class, id and pseudo selectors, so with just one line you could tell all paragraph tags to be blue, rather than having to add the font tag with a colour of blue to every paragraph element, which can be very time consuming in long docs, specifically if you then decide you want them to be red!

With CSS came Pseudo selectors, these allow you to control the styling even deeper, for example, to set a specific style on only the first row of a table (:first-child) and define how a link behaves when a mouse hovers over it (a:hover) or when it is clicked (a:active), further extending the ability to customise pages.

CSS first appeared in 1996, and since then it has evolved significantly, now at level 3 (CSS3) you can define far more than ever before, even replacing the need for images in some instances. The box-shadow property is slowly becoming a standard for browsers, and allows designers to instruct the browser to render a shadow for a box, rather than having to create the image from scratch, so reducing design time, as well as the overall file size of a page.

Although CSS3 is not supported for all browsers right now, notably IE8, it is evident we can anticipate a lot of exciting things as it is further developed.

Do you implement CSS3 on your websites already?

Chris Gilchrist owns and runs Hit Reach, a Web Design Business in Dundee who specialise in WordPress Web Site Design & Development and SEO.

Tags: , , , , , , ,
Posted in web design | No Comments »

Is Converting PSD To CSS Important?

Sunday, March 13th, 2011

With time new technologies are introduced. To be successful online, it is imperative to incorporate the latest technology to make the most of it. An obsolete technology does not help in fetching anything. A website needs to be highly attractive and user friendly to generate more traffic. With the help of PSD to CSS conversion this is very much possible. Basically PSD is a Photoshop based design file created using adobe. This PSD file is required to be converted into HTML/CSS etc. to enable it to be launched in a browser. PSD to CSS conversion is not only convenient but also very beneficial for your website.

When it comes to PSD to HTML/CSS conversion, everything is done in the same traditional manner. PSD designs are created and are made into HTML pages. But the most important and the biggest difference is that CSS helps a web page to load fast on any type of browser. It also makes sure that the loading time of the web page will be under its ideal time limit.

Because of this feature PSD to CSS conversion is very much in demand. So, how does CSS helps in quick loading of the pages? Well, CSS makes the web pages lighter which consequently helps in loading the text and other vital content much faster than an ordinary web page. Thus visitors can easily access the particular web page a lot quicker, cutting their waiting time.

This can have an effect on your business very badly. An internet site without visitors is a garden without flowers. Hence if you don’t wish to lose future customers, make your business website design better by reinforcing you’re WebPages ‘ loading time by employing CSS. You’ll be stunned to discover how it improves the loading time. There isn’t any question that PSD to XHTML / CSS conversion is highly favorable for a domain. It can enfranchise your internet site and help your business generate a lot of revenue. Nevertheless it is of supreme seriousness that you hire a reputed and experienced service supplier with a good previous record. This can ensure your internet site is designed thoroughly enhancing every feature of CSS.

There is no doubt that PSD to XHTML/CSS conversion is highly beneficial for a website. It can empower your website and help your business generate a lot of revenue. However, it is of paramount importance that you hire a reputed and experienced service provider with a good track record. This will ensure that your website is designed carefully optimizing every feature of CSS. Check the details and portfolio of a company thoroughly before you decide to hire it for your web development project.

Eric C. Herndon is a blogger and part time cartoonist who enjoys playing online killing games.

Tags: , ,
Posted in web design | No Comments »

The Steps To Learning Web Design

Friday, October 22nd, 2010

Web design is in high demand along with the rise of internet. Becoming a web designer can be a lucrative profession if you are a creative person who enjoys graphic design. This short article will guide you in the basic steps of learning web design. This article is also useful for people who want to build their websites from scratch.

Professional web designers usually use software such as Macromedia Dreamweave and Adobe Photoshop. As beginners the cost of purchasing such professional grade software might be too high for you. Actually, you do not need expensive software to do a web design. You can start with open source software such as GIMP, which is software to manipulate images. For the web pages coding, you can simply use Notepad or similar text editor software and several major browsers to test the result.

Learning about HTML, or HyperText Markup Language, is a must for any web master and web designer. It is the foundation of building a website. With this knowledge, you can build a basic website. To do this, you must be familiar with how to create a web page, insert text, links, headers, images, objects, and everything else. Free online tutorials are available across the web where you can learn about HTML.

The next step in the process is to learn about CSS. CSS or Cascading Style Sheet is widely used to create the formatting and display aspect of the website. This language is used so that web masters can separate the content aspect of the page with the display and manipulate them separately.

CSS is quite straightforward and it makes it easy to learn. Similar to HTML, there are numerous sites where a beginner can learn about CSS more closely. Nowadays, CSS is supported by almost all major browsers. However, some browsers still interpret the coding somewhat differently than other browsers so you might need to incorporate a few hack codes to make sure they interpret the code correctly.

Websites that do not have images will look quite boring and dull. GIMP is free software that allows you to create an image or to edit photos. If you think using GIMP is too complicated for you, you may also try other software such as Picasa or online software such as Picnic.

As you can see, learning web design is very simple and you can even use free software to create your own website. You only need to know about CSS, basic image editing, and HTML. Then as you progress, you need to be familiar with AJAX, PHP, Javascript, and various other things in this field. You never stop learning when you become a web designer because the internet is continuously evolving.

Want to Learn Web Design? Vandelay Design has put together a collection of tutorials that will teach you all of the basics. See Learn Web Design: Educational Resources for Beginners.

Tags: , , , , , , , , , ,
Posted in graphic design | No Comments »

Improve Your Blog Design – Graphic Design Leeds

Sunday, August 29th, 2010

Graphic design Leeds can revamp your website design to look attractive. A good site with professional graphic design is becoming increasingly more essential for all sorts of enterprise.As a result more money and time is being spent on website design.

Nevertheless, choosing a site design is not usually that easy, because almost anything is currently possible and the choices are endless. Consequently, most companies employ a site design organization to design and make a site for them that is targeted to their company.

To achieve this, a web-site design firm will have to integrate numerous factors into the web-site design. The primary thing to look at is what the web-site needs to do. You will get a huge and ever increasing special range of web-sites, each built to provide and perform the functions expected by that business.

Almost all web-sites need to provide details about the business and what it gives, and this needs to be displayed in a definitive and short way to make it simple for the visitor to learn and keep them coming to the web-site.

Still, while some blogs are only essential to provide ideas, others will be far more complex. A blog design may be needed to add purchasing transaction facilities, member account creation options, download applications, visitor interaction software, discussion forums, social networking, smart systems and many complicated functions. A good blog design will effectively combine all the vital functions into a blog in a manner that is convenient to use and readily accessible by the members.

Together with the vital functions of a blog, in creating a blog design the category of enterprise and the niche they are in would be vital to the creation of the blog which is why you need Graphic design Leeds. The blog design must perfectly reflect the culture of the corporation and can even be applied to accentuate or adapt a corporation’s image for a specified target market.

If you need seo leeds talk to Mark Hall , who will get you seen in the rankings and have your website working for you in no time with great seo leeds there is no reason not to call

Tags: , , , , , , , , , ,
Posted in graphic design | No Comments »

Manipulating Absolute Positioning Layers in Adobe Dreamweaver CS4

Friday, April 16th, 2010

Whenever you see the term “AP Layers” in Dreamweaver, it refers to DIV elements which has been given the “Position:Absolute” setting. From a page layout point of view, the DIV element is essentially a box, an arbitrary container for other HTML elements. Adding the “Position:Absolute” setting allows you to position the DIV precisely in the browser window, using the settings Left, Top, Width and Height. Although you can create all of this manually in code, Dreamweaver treats it as a special item and allows you to manipulate it visually.

To create an AP layer in Dreamweaver, choose Insert – Layout Objects – AP layer. Dreamweaver also has a special tool which allows you to draw a layer located in the Layout category of the Insert panel. Having clicked on the tool, simply draw a rectangle anywhere on the page.

As a page gets busy, AP layers can be difficult to get hold of; so Dreamweaver provides the AP Elements panel. First of all, the AP Elements panel allows you to quickly select a layer by clicking on its name. Secondly, you can change the name of layer by simply double-clicking on the existing name, entering a new name then pressing Enter. You can also set the initial visibility of the layer by clicking on the visibility icon (an eye): a closed eye means hidden and an open eye visible. As well as this, you can specify the stacking order of layers by dragging the name of layer up or down in the AP Elements panel.

Once you have selected a layer using the AP Elements panel, you can of course manipulate it directly on the HTML page. You can pick up the layer and move it any location. You can also resize a layer by dragging one of the corner handles.

For a bit more precision, you can use the Properties panel to change the attributes of the layer. The Layer ID setting corresponds to the name displayed in the AP Elements panel and is used to uniquely identify the layer. It is also used to create the CSS rule which controls the layer behind the scenes. The L and T settings represent the absolute position of the layer from the left and top of the browser window, respectively. Similarly, W and H are used to set the precise width and height of the layer.

Another useful setting is Overflow which determines what happens when there is more content in a layer than its size permits it to display. If the Overflow is set to Visible, the layer grows to display all of the contents. Perhaps the most useful setting is Auto which leaves the layer at the size specified by the W and H settings but creates scrollbars for the user to display any hidden content.

You can find out more about Dreamweaver training courses, visit Macresource Computer Training, a UK IT training company offering Dreamweaver Classes at their central London training centre.

Tags: , , , , ,
Posted in web design | No Comments »

Adobe Dreamweaver And Client-side Content

Saturday, January 2nd, 2010

Adobe Dreamweaver is a widely-used web development tool aimed at inexperienced and experienced users alike. It allows developers to work visually and behind the scenes, it uses standard web technologies such as HTML CSS and JavaScript. Web pages can be introduced into a Dreamweaver site at any time without the danger of the program modifying your code. In the same way, pages that you create in Dreamweaver can be taken out of the Dreamweaver environment and used elsewhere.

Dreamweaver Training For Web Developers

The program does not rely on its own custom solutions which will only work in the Dreamweaver environment. Although Dreamweaver is not necessarily the best software tool for creating all types of website, it is not an environment which one easily outgrows. It is suitable for creating both static content consisting of client-side pages as well as more sophisticated dynamic content including server side pages. In other words, it is suitable for developing the type of content found on the majority of websites. So, let us examine this content in more detail.

Most of our web sites are hosted on web servers run by specialist hosting companies. A large website will need to be hosted on a dedicated server or even servers, whereas most typical websites will be sharing space on a server with other sites. People visiting a website are sometimes called clients.

Clients gain access to the content on web servers using a variety of different operating systems and different browsers. They normally find this content either by clicking on links from search engines and other locations or by simply typing a URL into the address bar of their browser.

The content that clients access on people’s sites can be divided into two main categories: client-side and server-side. The term client-side refers to content which is compatible with the user’s browser, stuff which the browser software can actually open, display or execute (in the case of scripts).

The main component of client-side content is HTML, or as it’s known in its current incarnation, XHTML; a stricter and more consistent version of the original HTML specification. HTML is a simple markup language which is used to describe the content of web pages for the benefit of the client’s browser. Then we also have CSS and JavaScript.

CSS pages contain information describing the layout and presentation of web content. JavaScript is a simple scripting language which can be used to add interactivity to web pages. For example, when you are filling out a form on a website and information entered into a field is inappropriate, JavaScript can be used to notify you that the content must be changed.

All modern web browsers are fully capable of understanding HTML, CSS and JavaScript. With the addition of extra software utilities known as plug-ins, other technologies can be added to web pages. Two of the most popular plug-in technologies are Flash and Adobe Acrobat PDF files. All of this content then is totally compatible with the client’s browser; hence the term client-side content.

The The writer of this article is a training consultant with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver Classes in London and throughout the UK.

Tags: , , , , , , ,
Posted in web design | No Comments »

Editing Head Elements With Dreamweaver CS4

Thursday, December 31st, 2009

A web page has two main areas: the head element and the body element. The body element contains all of the visible content which will be displayed in the browser window. The head element, by contrast, is designed to contain information about the web page; meta information as it is sometimes called. In this article, we will look at the different ways in which Dreamweaver allows users to modify elements within the head of a web page. Let’s start with the title.

The title element is meant to contain a broad description of the content of the page. It is extremely important that each page should have a title element and that the title be pertinent to that page. Dreamweaver automatically adds a title element to every new page with the default text “Untitled Document”. Perhaps the easiest way of modifying this default title is simply to enter a new title in the Document Title box of the Document toolbar which is normally displayed at the top of the page. An alternative method is the choose Modify – Page Properties and then click on the Title/Encoding category on the left of the screen.

The title element is the only element which is syntactically required to be placed within the head element. In addition a number of optional meta elements may be placed in the head element to provide further information about the current page. One such meta element is created automatically by Dreamweaver along with the title: the content-type. This declares the character encoding to the browser and is particularly important if you have a site with an international audience. To specify the character encoding, choose Modify – Page Properties, click on the Title/Encoding category on the left of the screen and then choose an option from the Encoding drop-down menu.

The meta description element is also very important since, along with the page title, it is often displayed when your page shows up in the search engine results. The description should consist of one or two sentences summarising the content of the page. To set the description in Dreamweaver, choose Insert – HTML – Head Tags – Description then enter a brief description in the dialogue box which appears.

Let’s just mention one final meta element: keywords. The keywords meta element should contain a list of the important words and phrases to be found on the current page. Only text that actually appears on the page should be listed. To create the meta keywords element in Dreamweaver, choose Insert – HTML – Head Tags – Keywords.

The The writer of this article is a training consultant with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver training courses in London and throughout the UK.

Tags: , , , , , , , ,
Posted in web design | No Comments »