Google

Tuesday, July 24, 2007

Video Tutorial: CSS Design, Part Two

Applying graphics with CSS

By: Brian Getting
From: http://www.practicalecommerce.com

In the conclusion of our two-part video tutorial on CSS layout and design, we will take the layout we created in the beginning of this tutorial and begin to apply graphics and other visual stylings to it, in order to achieve the look we are going for.

In Part Two, we will be looking at how to identify the basic graphic elements we need. From slicing the images out of our original Photoshop document to optimizing the images in Photoshop to applying the images correctly to our page, we do it all in this tutorial.

We start by breaking our Photoshop document down into the basic graphic elements we need to achieve our design goals, and then proceed to optimize each graphic element. Once created, we apply graphics to our page using a variety of CSS techniques that can be intimidating to designers. By the end of this tutorial, we will have quickly made a basic web page using HTML and CSS that almost exactly matches our original Photoshop document.

Please feel free to download and review the additional files provided below.

Software Used: Adobe Photoshop CS2, TextMate
Additional Files: CSS_layout.zip

Click the image below to launch the tutorial.

CSS Design Part 2

This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

Read More...

Boosting Your Programming Skills

Online resources can provide basic and advanced tutorials

By: Mitch Bettis
From: http://www.practicalecommerce.com


If you're tired of calling your web design firm every time you want to make a minor tweak to your site, there are online courses you can take to boost your knowledge in HTML, JavaScript, cascading style sheets and more.

In fact, there are so many online options to improve programming skills — for beginners and skilled pros — that it may be difficult to wade through the options and choose just one resource. There are courses that provide an instructor-led environment, while others feature a do-it-on-your-own-schedule, self-paced structure.

eClasses.org offers more than 50 online instructor-led courses in web design, web programming and ecommerce. Richard Brinegar, executive director at eClasses.org, says the site has around 10,000 students each year. Instructors for each class, at a minimum, are required to have a bachelor's degree in information technology or a related field and a minimum of three years recent work experience in IT or a related field.

Brinegar says the fact that the average student at eClasses.org takes 2.5 classes is an indication professionals find the classes worthwhile.

“We have expanded our web business classes to target beginning online entrepreneurs or small business owners who want to take it upon themselves to understand more about the web, gain some more technical skills or learn about what their webmaster is doing,” Brinegar said.

The fee for courses at eClasses.org generally ranges from $180 to $250 each, but Brinegar said students get a $60-$100 discount on each course if the student is a member of organizations such as the International Webmasters Assoc., Women in Technology International or the HTML Writers Guild.

All courses are completed online, and students can attend classes at anytime and from anywhere. Generally speaking, the “classroom” is a web forum where the instructor posts the weekly assignments and, during that week, students can ask the instructor questions about the assignments. The course is instructor-led, but students can work on the material at any time of the day.

eClasses.org also provides certificates of completion for each course based on a pass/fail grading system — there is no conventional A, B, C, D or F grades. In addition, eClasses.org offers a more comprehensive “web study certificate.” Individuals participating in that program must complete a series of required and elective courses in a web development topic through the eClasses curriculum.

For those interested in a self-paced environment without an instructor, one option is available at Teachmeit.com, which offers more than 280 courses in a variety of topics like “Fundamentals of Active Server Pages 3.0,” “Dynamic HTML,” “Programming in PERL 5,” “Advanced Features Of Microsoft Excel 2007” and “Preventive Maintenance of a PC.”

“We have categorized our courses into basic, intermediate and advanced levels,” Rinkesh Sharm, owner and general manager of TeachMeIT, said. “We have designed the courses in such a way that we have a rich pool of subject matter explored in an environment that is not only content-rich, but it is also instructionally sound. When learners go through any of these titles, they actually go through the education starting right from the very basic level to each incremental step towards intermediate and advanced levels.”

Sharm says more than 25,000 people have taken courses at Teachmeit.com. For those who don't want to work in the web-based environment, TeachMeIT sells a CD version of each course. Web-based courses range from $19-$149 each and require about one to five hours to complete.

Even with the self-paced environment, there are tests along the way to ensure the student is understanding the material. At the successful completion of each course, students are able to claim a instructionally course-completion certificate.

Free HTML Tutorials

If you don't want to pay a fee for a course to boost your technical skills, there are various online resources available. If you're looking for free tutorials on HTML, cascading style sheets, JavaScript, PHP, XML and more, some options to consider include:

• W3schools.com/html
• Htmlgoodies.com
• Pageresource.com/html
• Htmlcodetutorial.com

—PeC Staff

Read More...

Monday, July 23, 2007

Video Tutorial: CSS Design, Part One

Coding your design.
By: Brian Getting
From: http://www.practicalecommerce.com

Designing search engine friendly websites can be intimidating, particularly for designers who are just learning how to use CSS formatting. One of the most intimidating aspects to learning CSS design is creating page layouts that do not rely on tables. In the first of a two-part video tutorial by Practical eCommerce's online director Brian Getting, we will look at some of tricks and techniques used to create flawless CSS page layouts.

In Part One, starting with a Photoshop layout, we will look at how to markup an HTML document based on our design needs, and create the proper code we will need to get the results we are looking for. Once we have our markup in place, we finish Part One by using CSS to create a formatted two-column page layout that does not rely on tables or other non-compliant code.

Once we achieve a lean, efficient layout, we will find ourselves ready for Part Two, where we will learn how to apply graphics and visual styling to our layout in order to match it up to our Photoshop document.

Please feel free to download and review the additional files provided below.

Software Used: Adobe Photoshop CS2, TextMate
Additional Files: CSS_layout.zip

Click the image below to launch the tutorial.

CSS Design Part 1

This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

Read More...