Tài liệu Speaking in styles- P2 doc

28 A WEB PRIMER WEB DESIGNER’S TOOLBOX Code Editors Just as you have a word processor for writing or an illustration program for drawing, you need a Web development program for coding. A good code editor will: » Organize and edit documents, providing suggestions where needed. » Preview documents without having to jump between mul- tiple browsers. » Download and upload documents as you work on them. » Analyze and optimize your code. Coda Mac panic.com/coda/ Coda is my program of choice whenever I edit code. Coda (Panic So ware) includes integrated FTP, making uploading and downloading  les a breeze. Its CSS editing tools allow you to get straight at the code or to use a more designer-friendly visual interface. TopStyle Windows newsgator.com/individuals/topstyle Although I generally recommend designing on a Mac, if you are using a PC running Windows, TopStyle is similar to Coda. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 29 CSSEdit Mac macrabbit.com/cssedit/ If you are a designer who is only interested in working with CSS code (and not HTML or JavaScript), CSSEdit has everything you need. It includes some impressive tools for analyzing the CSS of an existing Web site. Dreamweaver Windows and Mac adobe.com/dreamweaver Dreamweaver, which comes with many Adobe so ware packages, is o en the default choice for designers. Of all of the code edi- tors, Dreamweaver is possibly the most feature rich, but it is also the most expensive, and more features also means it’s harder to learn to use. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 30 A WEB PRIMER WEB DESIGNER’S TOOLBOX Online Tools We typically think of an application as something that you get on a disk or download and then install onto your computer. Increasingly, applications are being delivered through the Web, without requiring you to install or download the speci c applica- tion. Some of the best tools in my arsenal aren’t on my desktop; they’re online.  e line between Web site and Web application (or just Web app) is gradually being blurred. Like you do with a Web site, you get to a Web app by using a Web browser and URL, but Web apps provide functionality like you would expect from a traditional application. ColorJack Adobe Kuler colorjack.com kuler.adobe.com Every designer has to deal with color. It can be di cult to de ne a palette of colors that work well together but provide the spec- trum needed. ColorJack and Adobe Kuler are Web apps that allow you to put together a color palette, helping you choose the best combinations based on color theory. You can then save the results for use in common image editing so ware such as Photoshop and Illustrator. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 31 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 32 A WEB PRIMER WEB DESIGNER’S TOOLBOX Typetester typetester.org Good typography on the Web seems like an oxymoron, but it’s getting better. Typetester allows you to preview how di erent font families will look at various sizes, weights, and styles. Just choose from an extensive list of Web-safe fonts or from a list of fonts installed on your computer, and the results are instantly displayed underneath. SUMO Paint sumopaint.com If you are a designer, you likely already have an image editor of choice like Photoshop, Fireworks, or Illustrator.  ese applica- tions can be costly, but free alternatives are available on the Web. SUMO Paint allows you to create and edit layered bitmap images in a familiar Photoshop-like interface. If you are strapped for cash, it may just be what youare looking for. Although limited in its feature set, it has all of the basic tools you would need to put together simple Web graphics. Online Tools continued Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 33 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C HAPTER 3 The Myths of CSS Over the years, many di erent myths and misconceptions have grown up around Cascading Style Sheets—some good and some bad. You may have heard some of these myths and may still believe them: CSS is com- puter code; CSS is buggy; CSS is only for styling type and color. Some of these myths were never true, others are no longer true, and some have a grain of truth. Before we go any further into learning how to speak in styles, let’s clear the air about three of the most persistent CSS myths. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 36 A WEB PRIMER THE MYTHS OF CSS False: Many designers coming to CSS for the  rst time think that it’s just for the “coders” and not for “real” designers. I hear this a lot from designers: “I don’t want to learn to program a computer.” Designers who buy this line of reasoning have three basic arguments: Argument 1: If the developers understand it, then I don’t need to. I started my design life as a print designer, and I had to under- stand the print process from beginning to end. I had to know about CMYK, paper weights, register marks, and how to create  les for output. I had to understand these things, not because I was going to run one of those massive Koenig & Bauer print- ing presses, but because I wanted to get the best results from my designs in my selected medium. At the very least, even if you never plan to touch the code yourself, understanding how CSS works will make you a better Web designer. Argument 2: CSS is too hard to learn. CSS was actually devel- oped with designers in mind. Natural language terms are used wherever possible to make it easy to understand and remember. Argument 3: I’m a designer, damn it, not a programmer. CSS is a style sheet language, not a programming language. What’s the di erence? Style sheet languages are used to simply tell the computer how the di erent objects in a document should be pre- sented, using simple style rules that humans can easily understand rather than logic-based functions. CSS is used to describe how the content should appear, not how it should work. Myth 1: CSS Is for Developers, Not Designers WebDesignerWall webdesignerwall.com If you are looking for innovative Web design ideas from designers, using CSS, take a look at the Web Designer Wall. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 37 CSS is for Web Developers, Not Web Designers CSS is a style language anyone can learn to read and write. TRUTH Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... turn your styles into incomprehensible gibberish, at least to the browser But once you get the hang of it, you’ll be speaking in CSS in no time CHAPTER 4 Syntax Creating Meaning Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark CSS G RAM MA R SYN TAX The Rules of Style Web pages are created using HTML tags to add structure to the page Most of these tags have inherent styles—that... semicolon to the previous line, and your style will simply stop working You will spend hours trying to figure out why your styles are not working only to discover it was because you forgot to add one stupid semicolon How do I know this? I have spent far too many hours of my life banging my head against my keyboard trying to figure out why my styles aren’t working, all because of a missing semicolon Learn... header’s text color is red Instead, you would combine these into a single sentence using commas: The level 1, level 2, and level 3 header’s text color is red Similarly, you can apply the same style declarations to multiple selectors in the same rule by putting them into a comma separated list: h1, h2, h3 { color: red; } Now the first three header levels will be red Besides saving a lot of space, which... saving a lot of space, which is important once your CSS files start getting large, this also has the advantage of putting all of the selectors that use this value into a single place, making it easier to change later For example, if your boss or client decides they want green headers instead of red, rather than changing the value in three places, you only have to change it once: h1, h2, h3 { color: green;... SYN TAX The Rules of Style continued A Basic Style Rule To tell another person that you want a level 1 header to be red, you might say something like: The level 1 header’s text color is red In CSS, to communicate the exact same thing, you could say: h1 { color: red } In this case, color refers to the text color and red is a predefined keyword that the browser translates into an actual color value We... create meaning: Punctuation and parts of speech are placed in a specific order to describe something How you combine these elements has a direct effect on the meaning of what you are trying to communicate To describe your Web designs, you need to understand the syntax of CSS Although CSS syntax is relatively simple compared to the syntax of a language such as English, it is also less forgiving of mistakes... CSS G RAM MA R SYN TAX The Rules of Style continued Parts of a Style Rule A CSS rule has the equivalents of the subject, object, verb, and adjective that you would find in any English sentence: The subject (what we are describing) is the selector The object (what is being described about the subject) is the property The verb (always the verb “to be” in CSS) is represented by a colon The adjective... variety of layouts are usually from the old school of Web design, when the only option for creating a grid-based layout was by using HTML tables Yes, tables can do some things that CSS still cannot do—like creating balanced column heights, although that will be possible in the future— but the advantages of designing with CSS far outweigh the advantages of table-based layout The techniques that designers... scale: h1 { color: #ff0000 } These all say the same thing: The first-level header’s text color is red In English this is called a declarative sentence In CSS this is called a CSS rule or selector declaration You are declaring style properties for the selector, in this case the h1 selector, which effects the tag There are three types of selectors in CSS The one shown here is an HTML selector because... communication, instructions are open to interpretation (or can just be ignored) by the browser makers Mozilla, Opera, Apple, and Microsoft are the main players in the field Every browser has its own quirks when it comes to CSS, but it’s Microsoft’s Internet Explorer that deviates the most from the straight and narrow path of Web standards For many years, most of the problems were with Internet Explorer—specifically . visual interface. TopStyle Windows newsgator.com/individuals/topstyle Although I generally recommend designing on a Mac, if you are using a PC running Windows,. edit code. Coda (Panic So ware) includes integrated FTP, making uploading and downloading  les a breeze. Its CSS editing tools allow you to get straight