CSS Layouts
CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements. When you create a CSS layout, you place div tags on the page, add content to them, and position them in various places. Unlike table cells, which are restricted to existing somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. You can position div tags absolutely (by specifying x and y coordinates), or relatively (by specifying their distance from other page elements).
Creating CSS layouts from scratch can be difficult because there are so many ways to do it. You can create a simple two-column CSS layout by setting floats, margins, paddings, and other CSS properties in a nearly infinite number of combinations. Additionally, the problem of cross-browser rendering causes certain CSS layouts to display properly in some browsers, and display improperly in others. Dreamweaver makes it easy for you to build pages with CSS layouts by providing over 30 pre-designed layouts that work across different browsers.
Using the pre-designed CSS layouts that come with Dreamweaver is the easiest way to create a page with a CSS layout, but you can also create CSS layouts using Dreamweaver absolutely-positioned elements (AP elements). An AP element in Dreamweaver is an HTML page element—specifically, a div tag, or any other tag—that has an absolute position assigned to it. The limitation of Dreamweaver AP elements, however, is that since they are absolutely positioned, their positions never adjust on the page according to the size of the browser window.
If you are an advanced user, you can also insert div tags manually and apply CSS positioning styles to them to create page layouts.
CSS page Layout Tutorial Video
Requirements
To complete this tutorial you will need to download the following software and files:
Dreamweaver CS3 - 30 days trial download
About CSS page layout structure :
Before proceeding with this section, you should be familiar with basic CSS concepts.
Figure 1. A. Container div B. Sidebar div C. Main Content
Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis
luctus rutrum.
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede,
rhoncus venenatis, tristique in, vulputate at, odio.
H2 level heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,
justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.
In the above example, there is no “styling” attached to any of the div tags. Without CSS rules defined, each div tag and its contents fall into a default location on the page. However, if each div tag has a unique id (as in the above example), you can use the ids to create CSS rules that, when applied, change the style and positioning of the div tags. The following CSS rule, which can reside in the head of the document or in an external CSS file, creates styling rules for the first, or “container” div tag on the page:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
The #container rule styles the container div tag to have a width of 780 pixels, a white background, no margin (from the left side of the page), a solid, black, 1 pixel border, and text that is aligned left. The results of applying the rule to the container div tag are as follows:
Figure 2. Container div tag, 780 pixels, no margin A. Text aligned left B. White background C. 1-pixel solid black border
Figure 2. Container div tag, 780 pixels, no margin
A. Text aligned left B. White background C. 1-pixel solid black border
The next CSS rule creates styling rules for the sidebar div tag:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
The #sidebar rule styles the sidebar div tag to have a width of 200 pixels, a gray background, a top and bottom padding of 15 pixels, a right padding of 10 pixels, and a left padding of 20 pixels. Additionally, the rule positions the sidebar div tag with float: left—a property that pushes the sidebar div tag to the left side of the container div tag. The results of applying the rule to the sidebar div tag are as follows:
Figure 3. Sidebar div, float left A. Width 200 pixels B. Top and bottom padding, 15 pixels
Figure 3. Sidebar div, float left
A. Width 200 pixels B. Top and bottom padding, 15 pixels
Last, the CSS rule for the main container div tag finishes the layout:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250 pixels of space between the left side of the container div, and the left side of the main content div. Additionally, the rule provides for 20 pixels of spacing on the right, bottom, and left sides of the main content div. The results of applying the rule to the mainContent div are as follows:
Figure 4. Main Content div, left margin of 250 pixels A. 20 pixels left padding B. 20 pixels right padding C. 20 pixels bottom padding
Figure 4. Main Content div, left margin of 250 pixels
A. 20 pixels left padding B. 20 pixels right padding C. 20 pixels bottom padding
The complete code looks as follows
Note: The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout when you create a new document using the predesigned layouts that come with Dreamweaver.
Create a page with a CSS layout using DREAMWEAVER
When creating a new page in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver comes with over 30 different CSS layouts that you can choose from. Additionally, you can create your own CSS layouts and add them to the configuration folder so that they appear as layout choices in the New Document dialog box.
Dreamweaver CSS layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, and 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and Macintosh) 8.0, 9.0; and Safari 2.0.
1. Select File > New.
2. In the New Document dialog box, select the Blank Page category. (It’s the default selection.)
3. For Page Type, select the kind of page you want to create. Note: You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, JSP, and so on. You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page with a CSS layout. Page types in the Other category of the New Document dialog box are also restricted from including CSS page layouts.
4. For Layout, select the CSS layout you want to use. You can choose from over 30 different layouts. The Preview window shows the layout and gives a brief description of the selected layout.
The pre-designed Dreamweaver CSS layouts provide the following types of columns:
* Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings. (Non recommended)
* Elastic Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts if the site visitor changes the text settings, but does not change based on the size of the browser window. (Yahoo.com Layout)
* Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings. (Accessible layouts)
* Hybrid Columns are a combination of any of the previous three options. For example, the two-column hybrid, right sidebar layout has a main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.
5. Select a document type from the DocType pop-up menu.
6. Select a location for the layout’s CSS from the Layout CSS in pop-up menu.
* Add To Head Adds CSS for the layout to the head of the page you’re creating.
* Create New File Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page you’re creating.
* Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) across multiple documents.
7. Do one of the following:
* If you selected Add to Head from the Layout CSS in pop-up menu (the default option), click Create.
* If you selected Create New File from the Layout CSS pop-up menu, click Create, and then specify a name for the new external file in the Save Style Sheet File As dialog box.
* If you selected Link to Existing File from the Layout CSS in pop-up menu, add the external file to the Attach CSS file text box by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking OK. When you’re finished, click Create in the New Document dialog box.Note: When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file contained within it.
Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS.(Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.
Add custom CSS layouts to the list of choices
1. Create an HTML page that contains the CSS layout you’d like to add to the list of choices in the New Document dialog box. The CSS for the layout must reside in the head of the HTML page.
TIP: To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save your HTML file with the .htm extension.
2. Add the HTML page to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder.
3. (Optional) Add a preview image of your layout (for example a .gif or .png file) to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x 193 pixels high PNG files. TIP: Give your preview image the same file name as your HTML file so that you can easily keep track of it. For example, if your HTML file is called myCustomLayout.htm, call your preview image myCustomLayout.png.
4. (Optional) Create a notes file for your custom layout by opening the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same folder, and renaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno file, and rename it myCustomLayout.htm.mno.
* (Optional) After you’ve created a notes file for your custom layout, you can open the file and specify the layout name, description, and preview image.
Labels: CSS2
Powered By Web Design Company India | Permalink
Sunday, May 13, 2007
Flash Video can be Progressive or Streamed
Social Network Video Publishing
What Is Flash Video ?
Flash Video (FLV) is a proprietary file format used to deliver Videos over the world wide web using Adobe Flash Player (Macromedia Flash Player). Prominent users of the Flash Video format are the social networks like YouTube, Myspace, Google Video, Yahoo! Video and a few more.
Technology behind Flash Video Files
Commonly Flash Video files contain video bit streams which are a variant of the H.263 video standard, under the name of Sorenson Spark. Flash Player 8.0 and 9.0 support the playback of On2 TrueMotion VP6 video bit streams. On2 VP6 Video Compression codec can provide a higher visual quality than Sorenson Spark, especially when using lower bit rates. On the other hand it is computationally more complex and therefore will not run as well on certain older server systems. on2 Flix Engine (compression technology) requires Redhat Linux Enterprise Version 4.0 to be upgraded to PHP Developer version.
Flash Video files can be published in two ways :
* PROGRESSIVE DOWNLOAD via HTTP (supported by Flash Player 7 and later versions). This method uses Action Script to include an externally hosted Flash Video file client-side for playback. Progressive download has several Advantages, including buffering, use of generic HTTP servers, and the ability to reuse a single SWF player for multiple Flash Video sources.
Flash Player 8 includes support for random access within video files using the partial download functionality of HTTP, sometimes referred to as streaming.
Disadvantage : However, unlike streaming using RTMP, HTTP "streaming" does not support real-time broadcasting.
Streaming via HTTP requires a custom player and the injection of specific Flash Video metadata containing the exact starting position in bytes and timecode of each keyframe. Using this specific information, a custom Flash Video player can request any part of the Flash Video file starting at a specified keyframe. For example, Google Video supports progressive download and can seek to any part of the video before buffering is complete, whereas YouTube cannot. The server-side part of this "HTTP pseudo-streaming" method can be implemented, for example in PHP or as an Apache HTTPD module.
* Streamingvia RTMP to the Flash Player using the Adobe Flash Media Server 2.0 is the most recognized and implemented by sites like Youtube. An alternative which promises the same quality is the open source Red5 server. However its still not an established server and we are not sure about its performance as none of the recognized social networks have used them.
Conclusion : Social Network Video Publishing requires three components :
* Compression Video Codec that generates FLV file format : on2 Flix Engine is generally the unanimous choice. Single client license costs 3,800 US$. Demo version is also available.
* Custom Flash Video player (you can embed your logo and brand it). Your developer can make this for you or you can order here.
* Streaming Videos require Flash Media Server 2.0. Singe client license costs 4,500 US$.
If you are looking to have Progressive Downloads then Flash Media Server (iii) is not necessary. The server-side part "HTTP pseudo-streaming" method can be implemented, in PHP or as an Apache HTTPD module.
If you are looking to build a social network with video streaming and convinced to go forward immediately, then you can contact us.
Labels: Video Broadcasting
Powered By Web Design Company India | Permalink | Comments (0)
Tuesday, May 01, 2007
Search engine friendly URL and navigation
A search engine friendly URL doesn't contain a question mark followed by a list of variables and their values. A search engine friendly URL is short and contains the keywords describing the page's content best, separated by hyphens. This does not only help with rankings, it helps visitors and especially bookmarkers too.
However, it's not always possible to avoid query strings. All the major search engines have learned to crawl dynamic pages, but there are limits:
· Search engine spiders dislike long and ugly URLs. They get indexed from very popular sites, but dealing with small web sites spiders usually don't bother fetching the page.
· Links from dynamic pages seem to count less than links from static pages when it comes to ranking based on link popularity. Also, some crawlers don't follow links from dynamic pages more than one level deep.
· To reduce server loads, search engine spiders crawl dynamic content slower than static pages. On large sites, it's pretty common that a huge amount of dynamic pages buried in the 3rd linking level and below never get indexed.
· Most search engine crawlers ignore URLs with session IDs and similar stuff in the query string, to prevent the spiders from fetching the same content over and over in infinite loops. Search engine robots do not provide referrers and they do not accept cookies, thus every request gets a new session ID assigned. Each variant of a query string creates a new unique URL.
· Keywords in variables and their values are pretty useless for ranking purposes, if they count at all. If you find a page identified by the search term in its query string on the SERPs, in most cases the search term is present as visible or even invisible text too, or it was used as anchor text of inbound links.
· There are still search engine crawlers out there which refuses dynamic links.
Thumb Rules On search engine friendly URL's:
· Keep them short. Less variables gain more visibility.
· Keep your variable names short, but do not use 'ID' or composites of entities and 'ID'.
· Hide user tracking from search engine crawlers in all URLs appearing in (internal) links. That's tolerated cloaking, because it helps search engines. Ensure to output useful default values when a page gets requested without a session ID and the client does not accept cookies.
· Keep the values short. If you can, go for integers. Don't use UUIDs/GUIDs and similar randomly generated stuff in query strings if you want the page indexed by search engines. Exception: in forms enabling users to update your database use GUIDs/UUIDs only, because integers encourage users to play with them in the address bar, which leads to unwanted updates and other nasty effects.
Consider providing static looking URLs, for example on Apache use mod_rewrite to translate static URLs to script URLs + query string. Ensure your server does not send a redirect response (302/301) then. Or, on insert of tuples in a 'pages' database table, you can store persistent files for each dynamic URL, calling a script on request.
For example a static URL like http://www.yourDomain.com/nutrition/vitamins-minerals-milk-4711.htm can include a script parsing the file name to extract the parameter(s) necessary to call the output script. In this example the keywords were extracted from the page's title and the pageID '4711' makes the URL unique within the domain's namespace.
The ideal internal link looks like
keyword-phrase
Powered By Web Design Company India | Permalink | Comments (0)
Search Engines Inside Stories
Recap:
Let's recap the basic methods of steering and supporting search engine crawling and ranking:
# Provide unique content. A lot of unique content. Add fresh content frequently.
# Acquire valuable inbound links from related pages on foreign servers, regardless of their search engine ranking. Actively acquire deep inbound links to content pages, but accept home page links. Do not run massive link campaigns if your site is rather new. Let the amount of relevant inbound links grow smoothly and steadily to avoid red-flagging.
# Put in carefully selected outbound links to on-topic authority pages on each content page. Ask for reciprocal links, but do not dump your links if the other site does not link back.
# Implement a surfer friendly, themed navigation. Go for text links to support deep crawling. Provide each page at least one internal link from a static page, for example from a site map page.
# Encourage other sites to make use of your RSS feeds and alike. To protect the uniqueness of your site's content, do not put text snippets from your site into feeds or submitted articles. Write short summaries instead and use a different wording.
# Use search engine friendly, short but keyword rich URLs. Hide user tracking from search engine crawlers.
# Log each crawler visit and keep these data forever. Develop smart reports querying your logs and study them frequently. Use these logs to improve your internal linking.
# Make use of the robots exclusion protocol to keep spiders away from internal areas. Do not try to hide your CSS files from robots.
# Make use of the robots META tag to ensure that only one version of each page on your server gets indexed. When it comes to pages carrying partial content of other pages, make your decision based on common sense, not on any SEO bible.
# Use rel="nofollow" in your links, when you cannot vote for the linked page (user submitted content in guestbooks, blogs ...).
# Make use of Google SiteMaps as a 'robots inclusion protocol'.
# Do not cheat the search engines.
Robots.txt
------------
http://www.yourdomain.com/robots.txt behaves like any other PHP script. Your file system's directory structure has nothing to do with your linking structure, that is your site's hierarchy. However, you can store scripts delivering content which is not subject of public access in directories protected by robots.txt. To prevent this content from all unwanted views, add user/password protection.
User-agent: Googlebot
Disallow: /*affid=
Disallow: /*sessionID=
Disallow: /*visitorID=
Disallow: /*.aspx$
User-agent: Googlebot-Image
Disallow: /*.gif$
"*" matches any sequence of characters, "$" indicates the end of a name.
The first example would disallow all dynamic URLs were the variable 'affid' (affiliate ID) is part of the query string. The second and third example disallow URLs containing a session ID or a visitor ID. The fourth example excludes .aspx page scripts without a query string from crawling. The fifth example tells Google's image crawler to fetch all image formats except .gif files. Because not all Web robots understand this syntax, it makes sound sense to put in a URL Specific Control: the Robots META Tag.
INDEX|NOINDEX - Tells the SE spider whether the page may be indexed or not
FOLLOW|NOFOLLOW - Tells the SE crawler whether it may follow links provided on the page or not
ALL|NONE - ALL = INDEX, FOLLOW (default), NONE = NOINDEX, NOFOLLOW
NOODP - tells search engines not to use page titles and descriptions from the ODP on their SERPs.
NOYDIR - tells Yahoo! search not to use page titles and descriptions from the Yahoo! directory on the SERPs.
NOARCHIVE - Google specific1, used to prevent archiving
NOSNIPPET - Google specific, prevents Google from displaying text snippets for your page on its SERPs
Powered By Web Design Company India | Permalink | Comments (0)
Monday, April 30, 2007
Difference between Organic SEO and PPC
It doesn’t matter how great your website is if you don’t get visitors. This is where Organic (Natural) Search Engine Optimisation (SEO) and Pay per Click (PPC) becomes so important, as they drive traffic to your website. What are SEO and PPC and how exactly do they help your business?
Search Engine Optimisation and PPC: Conceptual Differences
The most important thing to remember is that Search Engine Optimisation (SEO) and PPC are complementary strategies. There is no conflict between using the two techniques, and both will be more successful if used together as opposed to using just one or the other in isolation.
The most obvious difference is the price tag that comes with these two techniques. You are paying for the clicks that PPC sends your way, whereas the clicks from Search Engine Optimisation are free. Getting to the top of the Search Engine Optimisation tree for your most lucrative search keywords requires extreme hard work. Getting to the top of the PPC for identical search terms requires financial potential (just how much is dependent on the competition for that particular search term) and work. Both PPC and Organic Search Engine Optimisation require hard work researching keywords so that you know which search terms to buy (for PPC) and which terms to optimise for (SEO). Different creatives per search term or group (PPC) and different tags for each page of your site (SEO) both need to be written to entice customers. Natural Search Engine Optimisation has the added complication that the title tags need to be written with the search engines in mind as well.
PPC can be characterised as INSTANT traffic to a site. If you’re willing to pay the price of the clicks, and your bid is on the higher side you can choose search terms in the major Pay per Click engines. Providing your search term has enough traffic, and your creative is tight and enticing, you should notice a bump in traffic.
Search Engine Optimisation is a slower process. You are unlikely to see major changes to your traffic in the early stages, as so much of Search Engine Optimisation is to do with the structure and environment of your site.
However, the effects of Search Engine Optimisation are long term thus making it far cheaper than PPC. With PPC, the moment you stop your payments the traffic dries up entirely. Search Engine Optimisation on the other hand will continue to bring in traffic even if you stop SEO work on the site, although you will need to ensure that your SEO campaign keeps abreast of changes in the search engine algorithms.
Search Engine Optimisation and Pay per Click go hand in hand and you have to implement a combined strategy to achieve best results. That is why you should hire a search engine optimisation company who has done successful campaigns. SEO India is our recommended SEO company who brings results. Try them.
Powered By Web Design Company India | Permalink | Comments (0)
Friday, April 27, 2007
Build the Web Site Yourself or Hire a Web Designer and Developer?
Should you design your site or engage a Web designer and developer?
The decision boils down to a few factors:
Does your Web hosting service offer any tools and templates to help you? If so, you may be able to quickly create a Web site with little or no technical knowledge, and at no additional cost. Also, there are many free scripts available that enable you to add features to your Web site, such as a traffic counter or a customer feedback form, with very little technical knowledge.
If no templates are available, the next best do-it-yourself option is using WYSIWYG HTML/Web site software like FrontPage. These tools enable you to design a Web site with very little technical knowledge, and many include templates.
If you do not have templates or WYSIWIG software available, do you have the necessary skills in-house to design your Web site? To do the job yourself, you will need graphic design skills, the ability to create graphics, HTML and JavaScript programming skills, some knowledge of information organization, and a general familiarity with Internet technology and software. If you don't have these skills, are you willing to take the time to obtain them?
What is your Web site budget? Hiring a designer and programming company will probably cost more than doing it yourself. Indian Web designers typically charge from $10-$15 per hour. Before you hire a designer, make sure you have a clear idea of what you want your site to look like and how you want customers to navigate it.
Do you have some skills but lack others? If so, control your costs by hiring a designer or developer to do only the work that you cannot.
Labels: Steps to Build a Website
Powered By Web Design Company India | Permalink | Comments (0)
Step 3: Host Your Own Web Site or Work with a Web Hosting Service?
The Web site you build must be stored on a computer that has a reliable, secure connection to the Internet. Hosting a Web site means providing the technical resources (the computer hardware and operating system, the networking equipment, the Internet connection, etc.) needed to make your Web site available to your customers. You can either host your own Web site or hire a Web hosting company, such as thePlanet, Interland, Rackspace to host your site. There are advantages and disadvantages to both.
Hosting Your Own Site Advantages: You are in complete control. You have unlimited flexibility: you choose your own hardware, operating system, database, and other tools. You do not have to learn another company's Web hosting procedures. You will not pay additional charges for hard disc storage space or bandwidth usage.
Disadvantages: Purchasing and maintaining computer hardware and software can be expensive. Obtaining a reliable, fast connection to the Internet can be very expensive. You will need a high degree of technical knowledge, and if you have any problems, you're on your own.
Working with a Web Hosting Service
Advantages: Reliable and secure computer hardware with a fast connection to the Internet. Low start-up costs and relatively inexpensive monthly fees. You can get your Web site online much faster. Technical support is often free or available at a nominal charge. Purchase only the services you need and add more as your business grows.
Disadvantages: You are limited to the software and hardware options the hosting service offers. Monthly fees may vary depending on how many customers visit your Web site. Not all hosting services are created equal: it takes some research to find a reputable company that will be a trusted advisor and help you grow your business.
http://www.lifewithoutcolour.blogspot.com/
No comments:
Post a Comment