Web Page Production with xHTML and CSS (ebook)
This new 61-page ebook provides a worked example of web production, taking you through the entire process from a Photoshop page design, to a working HTML page template.
You'll experience the thought process of a professional web producer as he plans and implements the production of the page.
The ebook also includes a download link for the original PSD file, so you can follow along and build the page yourself if you wish.
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.
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:
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
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
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.
3 Comments Leave a comment
Leave a comment
Web Design Articles
and Free Tutorials
-
Get Your Websites to The Top of Google
For the first time, Ben Hunt reveals the complete SEO process he uses to top the search rankings.
“SEO from Scratch” gives you a complete 3-hour video training program, plus Ben's own unique “SEO Master” tool.
-
The ESSENTIAL Web Design Handbook
“Save the Pixel” makes all the essentials of visual design for the web simple!
Discover how to use layout, copywriting, color, graphics, navigation, space to make your websites work better!
Pingback: CSS Block & Inline CSS Display Elements
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.
Hi Michael. Sorry about that glitch. Now fixed. Thanks for letting me know.