網頁製作之從構思到實現

——FromJoomlaTemplateDesign（Page23）

Here is the overview; we'll go over each step in detail afterwards:
1. Sketch it : Napkins are great! I usually use the other side of a recycled
piece of photocopied paper—the more basic the better. No fine artistic
skill required!
Perk: Using this sketch, you can not only get your graphic interface ideas down, but also already start to think about how the user will interact with your template design and re-sketch any new ideas or changes accordingly.
2. Start with the structure: I create an ideal, un-styled semantic XHTML document structure and attach a bare bones CSS sheet to it.
3. Add the text: Lots of text, the more the better! A sample of actual content is best, but Lorem Ipsum is fine too.
4. CSS typography: Think of your typography (what font families you'd like to use and where you'd want text to be bolded, italicized, or otherwise decorated and varied) and assign your decisions to the stylesheet. Review! Don't like how the formatted text looks in-line? Being separated into columns with fancy background graphics won't make it any better. Get your text to look nice and read well now before moving on to layout.
5. CSS layout: Set up the layout—this is where you'll see upfront if your
layout idea from your sketch will even work. Any problems here and you can re-think the design's layout into something more realistic (and usually more clean and elegant).
Perk: Your client will never see, much less become attached to, a layout that would cause you problems down the road in CSS.
6. CSS color scheme: Assign your color scheme basics to the CSS. We're close to needing Photoshop anyway, so you might as well open it up. I sometimes find it useful to use Photoshop to help me come up with a color scheme and get the hex numbers for the stylesheet.
7. Take a screenshot: Time for your favorite image editor! Paste the screenshot of your basic layout into a Gimp or Photoshop file.
8. Image editing: Relax and have fun in Gimp, Inkscape, Photoshop, or Illustrator (I often use a combination of a vector editor and bitmap image editor) to create the graphical interface elements that will be applied to this layout over your screenshot.
9. Send for approval: Export a .jpg or .png of the layout and send to the client.
Perk: If a client has text changes, just make them in your CSS (which will update your text globally—no layer hunting for all your headers or links and so on) and re-snap a screenshot to place back in the Photoshop file with the graphic elements. If they have a graphical interface change, that's what
Photoshop does best! Make the changes and resend for approval.
10. Production: Here's the best part: you're more than halfway there! Slice and export the interface elements you created over (or under) your screenshot and apply them with the background image rules in your CSS.
Because you worked directly over a screenshot of the layout, slicing the images to the correct size is easier, and you won't discover as much need to tweak the layout of the CSS to accommodate the graphic elements.