Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! ยป

Web Page Production with xHTML and CSS (ebook)

Overview

The ebook will take you step by step through the production process, starting with the design image, and ending up with a working HTML template.

Design image

What’s in the book?

Web page structure

First we take a look at the page design, concentrating on one area at a time, and thinking about the structural decisions that need to be made:

  • Will the page be fixed-with or fluid layout?
  • How will the navigation menus be structured?
  • Which images need to be on the page, and which are background images?

Good forward planning will save you valuable time later.

Writing Semantic HTML markup

Semantic HTML is HTML where the tags used to structure content are selected based on the meaning of the content, not for presentation.

It’s important to write semantic HTML before styling your web page. This ebook shows you the right way to do it, with the entire markup presented in clear sections:

HTML code snippet

You’ll learn about:

  • When to use id names and class names
  • The ‘alt’ attribute for images
  • Using nested lists for navigation submenus

For a more in-depth look at Semantic HTML, see our other ebook – Semantic HTML

Slicing a Photoshop document

How do you change your single design image into multiple images that can be used on the web? Photoshop provides a quick and easy solution.

You’ll learn:

  • How to use the slice tool to divide your design up into individual images
  • How to use the Save for Web command to optimise and export your images in one go
  • How to create a GIF image with a transparent background
Slicing screenshot

Using CSS for layout and presentation

Once you’ve written your semantic HTML, you need to style it so that it looks like your original design.

This chapter guides you in detail through the entire CSS stylesheet, explaining each step and solving any problems encountered along the way

You’ll learn:

  • How to style a nested list navigation menu
  • How to solve cross-browser compatability issues
  • How to make the footer stick to the bottom of the page
CSS screenshot
Web Page Production ebook

Buy Now!

Experience the thought process of a professional web producer as he guides you through the web page production process, from photoshop design to working HTML template.

The book tells you how to approach web production, beginning with semantic HTML, guiding you through how to slice up a photoshop document, and finally how to use CSS for presentation.

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

Michael Gross - a couple of years ago

How about showing me the price of your e-book? I clicked the [Buy Now!] button and you have a formatting error that precludes the display of the page.

    Ben Hunt - a couple of years ago

    Hi Michael. Sorry about that glitch. Now fixed. Thanks for letting me know.

Linda Mah - last year

Hello Ben,
I am a student doing a Master’s program in Malaysia that includes web publishing as one of the papers I must take. Currently, I am required to design web pages using html. We need to use CSS to design our pages and to make it interactive. We also need to use javascript to make our pages interactive such as creating an online order forms with calculation functions etc. inside.
I happen to come across your website in search of info.
Can you recommend me which e-book is most suitable for my requirements.
Also, do you have online tutorials where I can send my work when I have problems making it work?
Thank you and best regards,
Linda

    Ben Hunt - last year

    Hi. This ebook would be a great place to start.

    Or take my full Pro Web Design Course, which includes everything, all my books and courses and over 90 hours of great video training.

    http://www.prowebdesigncourse.com

Linda Mah - last year

PS- It is a masters of science education with ICT program and I am currently drowning in this course. Appreciate a reply soonest.
Thanks again and best regards,
Linda

Comments are closed