HTML Tutorials — Layouts

This is the second part of WaterColored Web Portfolio tutorial. In case you missed the first part of this tutorial, read Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop to learn how to make a web layout in PhotoShop. With this post we’ll learn how to realize a valid, standards compliant XHTML and CSS home-page from PSD template. So, now it’s time to write code! You’re reading the second PSD-to-HTML tutorial of PV.M Garage and for this …

In this article, we cover the concepts of why you lay out your site in a particular way, as well as beginning to help you understand all the pieces involved in this process. All of these pieces - Master Pages, Themes, CSS, Skins, Sitemaps, and Menus-combine together to make your site work. A solid understanding of these pieces will help you as you put together all the individual components. However, more importantly, it will aid you as you continue to expand your site, giving you the ability to

In this web development tutorial, you will learn, step-by-step, how to create a beautiful dark and sleek web layout using standards-based HTML and CSS. Along the way, you will witness how to use CSS Sprites and CSS Text Image Replacement.

In a previous post I have shared a Free PSD Template with a blog layout, DesignSchool. This post describing how to convert a PSD layout in a real (X)HTML/CSS web-page. This is only a basic demonstration so I explain the basic issues to realize our home-page. You can follow today’s post completely using the PSD Source file. In the below image is showed a template’s preview. Draft, Sketch and Preliminary Operations

Hello welcome to part 3 of the your PROject template. Today we’ll be creating 4 extra pages to go with our template.

Hello welcome to part 2 of the 5 page template series. Today we’ll be converting our PSD into a one page working CSS template. In part 3 we’ll begin to add our additional pages.

An easy to understand break down of the components of a widgetized sidebar in Wordpress, and instructions on how to make your own using XHTML and CSS.

NAPP Instructor RC Concepcion reviews how to add background elements and import Photoshop Smart Objects in Dreamweaver CS4.

NAPP Instructor RC Concepcion examines the pre-installed layouts of Dreamweaver CS4. He also discusses how CSS helps users build a Web site.

A great looking portfolio site is crucial for any designer to instantly present their work to potential clients or employers. A simple, single page site can do this effectively by displaying three key features of large header with short introduction, examples of your work and methods of contact all in one, extremely browsable page. Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.