Speaking in styles- P2

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
57
lượt xem
11
download

Speaking in styles- P2

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Speaking in styles- P2: I want you to think of a shape. It can be any shape you want a circle, a square, a triangle, an eight-pointed star, or an ameboid glob-but keep it to a single continuous shape. I want you to hold that shape in your mind, or, if you need to, scratch it out on a piece of paper (or, if you are really far gone) on a computer.

Chủ đề:
Lưu

Nội dung Text: Speaking in styles- P2

  1. A WE B PRI MER WE B DE SI GNER’S T O O LB OX 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 pani c. co m/ co da / Coda is my program of choice whenever I edit code. Coda (Panic Software) includes integrated FTP, making uploading and downloading files 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 new sga to r. co m/ indiv idu a ls/ top st y l e 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 waterm 28
  2. CSSEdit Mac macrabbit . co m/ 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 ado be. co m/ drea mweaver Dreamweaver, which comes with many Adobe software packages, is often 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. se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 29
  3. A WE B PRI MER WE B DE SI GNER’S T O O LB OX 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 specific applica- tion. Some of the best tools in my arsenal aren’t on my desktop; they’re online. The 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 ku l e r. a d o b e . c o m Every designer has to deal with color. It can be difficult to define 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 software such as Photoshop and Illustrator. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 30
  4. se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 31
  5. A WE B PRI MER WE B DE SI GNER’S T O O LB OX Online Tools continued Typetester t ypetester. o rg Good typography on the Web seems like an oxymoron, but it’s getting better. Typetester allows you to preview how different 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 su m o paint . co m If you are a designer, you likely already have an image editor of choice like Photoshop, Fireworks, or Illustrator. These 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 32
  6. se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 33
  7. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark
  8. Over the years, many different 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. CHAPTER 3 The Myths of CSS se purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  9. A WEB PRIMER TH E MY T HS OF CSS Myth 1: CSS Is for Developers, Not Designers False: Many designers coming to CSS for the first 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 files 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 difference? Style sheet languages are used to simply tell the computer how the different objects in a document should be pre- sented, using simple style rules that humans can easily understand rather than logic-based functions. CSS is WebDesignerWall used to describe how the content should we bd esi gne r wal l .c o m appear, not how it should work. 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 waterm 36
  10. CSS is for Web Developers, Not Web Designers CSS is a style language anyone can learn to read and write. TRUTH se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 37
  11. A WEB PRIMER TH E MY T HS OF CSS Design Shack’s CSS Gallery designshack.co.uk/gallery/ Numerous Web sites highlight great designer portfolios created using CSS. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 38
  12. Web Designer Michela Chiucini c o l a z i o n e d a m i c hy. i t Designer Michela Chiucini uses CSS with WordPress to create her own portfolio and gives away a few templates for you to start using. se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 39
  13. A WEB PRIMER TH E MY T HS OF CSS Myth 2: CSS Can’t Handle the Designs I Need False: Design is about overcoming the limits of your medium. All media have different strengths and weaknesses, and Web design with CSS is no different. CSS can handle a wide variety of dif- ferent designs, and the more you know about its limitations, the better you can design to its strengths. Most designers who believe the myth that CSS can’t handle a 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 use today are vastly different from those we used just a few years ago. As we’ve had a chance to explore the capabilities of CSS, new ideas and new methods are constantly being explored. There is no better example of the versatility of CSS than the CSS Zen Garden. This simple site is a single Web page, which you can download the HTML code for and create your own CSS design solution. Over 200 designers have taken the challenge, with more coming all the time. Each design is completely different from the others, but all use the exact same HTML code as their basis. With tables, which lock the structure directly into the HTML, this versatility is lost. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 40
  14. CS an’t andl CSS Can’t Handle the De igns Need CSS Can’t Handle the Designs I Nee nd De Designs ee TRUTH se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 41
  15. A WEB PRIMER TH E MY T HS OF CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 42
  16. CSS Zen Garden css z e n g a r d e n . c om CSS Zen Garden has a simple mission: Prove that CSS can handle any layout. Each of these designs was created from the same HTML code but with different CSS styling it. se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 43
  17. A WEB PRIMER TH E MY T HS OF CSS Myth 3: CSS Has Too Many Browser Inconsistencies Mostly False: OK, so there’s some truth to this particular myth, but it’s not as bad as you might think. CSS is a standard, which means that an organization—the World Wide Web Consortium (W3C)—has set up some very specific instructions on how it should work. The problem is, like all human 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 IE6. The issues with IE6 are legendary, and I will highlight them throughout this book with tips on overcoming them. While it used to be that a good quarter of your development time would be spent just trying to get your Web pages to look roughly the same in IE6 as in other browsers, most of the inconsistencies are now gone or easily circumvented. IE7, while far from perfect, is much closer to standards compliance than previous versions, and on the horizon is IE8, which prom- ises even closer CSS adoption. IE 7 is now the most popular Web browser in use, while IE6 quickly evaporates in popularity. That doesn’t mean you can ignore the older versions, but you do not always have to provide the same experience. Instead, designers will create a usable but stripped-down design for IE6. The design still works just fine; it just may not have all of the design bells and whistles. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 44
  18. CSS Still Has Too Many Browser Inconsistancies till till Has Too Many Browser Inconsistan To an r wse In onsista e ni 7 6 TRUTH se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 45
  19. PART 2 In which the reader learns the syntax (how the language is put together), semantics (how the language is understood), and vocabulary (the words used in the language) that make up the grammar of CSS. 49 S yntax 89 S em anti c s 123 Voc abul ar y Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm
  20. CSS Grammar se purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Đồng bộ tài khoản