Tài liệu Front End Drupal From the Library of Athicom ppt

ptg From the Library of Athicom Parinayakosol ptg Front End Drupal From the Library of Athicom Parinayakosol ptg This page intentionally left blank From the Library of Athicom Parinayakosol ptg Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Capetown • Sydney • Tokyo • Singapore • Mexico City Front End Drupal Designing, Theming, Scripting Emma Jane Hogbin Konstantin Käfer From the Library of Athicom Parinayakosol ptg Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals. The authors and publisher have taken care in the preparation of this book, but make no ex- pressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein. The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests. For more information, please contact: U.S. Corporate and Government Sales (800) 382-3419 corpsales@pearsontechgroup.com For sales outside the United States please contact: International Sales international@pearsoned.com Visit us on the Web: informit.com/ph Library of Congress Cataloging-in-Publication Data Hogbin, Emma Jane. Front end Drupal : designing, theming, scripting / Emma Jane Hogbin and Konstantin Käfer. p. cm. Includes index. ISBN 978-0-13-713669-8 (pbk. : alk. paper) 1. Drupal (Computer file) 2. Web sites- Design-Computer programs. 3. Web site development. I. Käfer, Konstantin. II. Title. TK5105.8885.D78H65 2009 006.7’6—dc22 2009002636 Copyright © 2009 Pearson Education, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise. For information regarding per- missions, write to: Pearson Education, Inc Rights and Contracts Department 501 Boylston Street, Suite 900 Boston, MA 02116 Fax (617) 671-3447 ISBN-13: 978-0-13-713669-8 ISBN-10: 0-13-713669-2 Text printed in the United States on recycled paper at R.R. Donnelley in Crawfordsville, IN. First printing, April 2009 Editor-in-Chief Mark Taub Executive Editor Debra Williams Cauley Development Editor Songlin Qiu Managing Editor John Fuller Project Editor Anna Popick Copy Editor Jill Hobbs Indexer Michael Loo Proofreader Linda Begley Technical Reviewers Károly Négyesi Bernie Monette Lynda Chiotti Caroline Hill R.G. Daniel Cover Designer Chuti Prasertsith Composition Gloria Schurick Graphics Tammy Graham Laura Robbins From the Library of Athicom Parinayakosol ptg v Contents Foreword . xvii Preface . xix Acknowledgments xxiii About the Authors .xxv Chapter 1: Web Page Design 1 Describing Content 2 Displaying Content 3 Content Types and Content Fields . 5 Organizing Lists of Content . 8 Chronological Organization . 9 Linear Organization . 10 Topical Organization . 10 Popularity-Based Organization 12 Task-Based Organization . 13 Page Design and Layout . 14 Interface Components 14 Regions . 15 Design Resources 17 Interaction . 20 User Satisfaction 21 Guided Tasks . 22 From the Library of Athicom Parinayakosol ptg vi Contents Code 22 Separating Form, Function, and Behavior . 23 XHTML . 23 Cascading Style Sheets 24 Scripting Languages . 24 Interaction with JavaScript 24 Work Flow . 25 Working with Designers . 26 Working with Programmers 27 Working with Clients . 27 Working with Site Visitors 28 Summary 29 Chapter 2: The Themers’ Toolkit 31 A Gentle Introduction 32 Building a Page for Display 32 Directory Structure 33 Paths 33 Theming Strategies . 33 Best Practices . 34 Alternative Strategies . 34 Drupal Terminology . 36 Node 36 Users, Roles, and Permissions 36 Blocks and Regions 37 Categories, Taxonomy, Vocabularies, and Terms . 38 Parent Items and Weight 40 Menu . 40 From the Library of Athicom Parinayakosol ptg Contents vii Pagers .41 Hooks and Naming Conventions 41 Must-Have Modules . 42 Content Creation Kit (CCK) Module . 42 Views Module . 53 Devel Module 57 Browser Tools . 60 Firebug . 60 Web Developer’s Toolbar 62 Screen Shot and Testing Services . 62 Language References 65 XHTML . 66 CSS 66 PHP . 68 JavaScript . 69 Maintaining Your System . 69 Scheduling Tasks with Cron . 70 Revision Control 70 Summary 71 Chapter 3: Working with Drupal Themes 73 Finding Themes . 74 Interface Components 76 Develop a Library of Themes 77 Installing Drupal Themes . 78 Download and Unpack 78 Enable the New Theme 79 Personal Themes 81 From the Library of Athicom Parinayakosol ptg viii Contents Administering Themes . 82 Global Settings 83 Theme-Specific Settings 84 The Front Page 85 Anatomy of a Theme 88 Naming and Initializing the Theme . 88 Page Template . 89 Including External CSS and JavaScript Files . 91 Regions . 92 Screenshot . 93 Starter Themes . 94 Zen 95 Custom Theme Settings 97 Customizing Banner Images . 97 Migrating to Drupal 6 99 Converting a Drupal 5.x Theme to a Drupal 6.x Theme . 100 WordPress . 101 Joomla! . 103 Summary . 104 Chapter 4: The Drupal Page .107 Elements of a Page 107 Dissecting a Theme 108 Sitewide Page Variables . 109 General Utility Variables 111 Page Metadata 111 Site Identity 112 From the Library of Athicom Parinayakosol ptg Contents ix Page Content, Drupal Messages, and Help Text . 112 Creating New Page Variables 113 Modifying Page Variables . 115 Navigation and Menus . 115 Theming Menus 118 Grid Work 120 Regions . 121 Blocks . 124 Customizing the Markup of Blocks . 125 Search 126 Changing Templates . 128 Custom Front Page 129 Custom Offline Page 130 Alias: Page 133 New Templates from Aliased URLs . 134 Page Templates for Views . 136 Adding CSS Classes . 136 Page Templates for Content Types 137 Taxonomy Templates 138 Graphical Headers . 140 Delivering Plain Content . 141 Print-Friendly Pages 142 Mobile Devices 147 Summary . 149 Chapter 5: Drupal Content 151 Node Templates 151 The Template File node.tpl.php 154 From the Library of Athicom Parinayakosol [...]... fields From the Library of Athicom Parinayakosol Describing Content 7 FIGURE 1.4 The form used to create a new instance of the content type “Story.” In the form shown in Figure 1.5, the content fields include information about the toilet and about the human who took the photo of the toilet Having each of these fields remain separate from the others means the content can be sorted according to any of these... easy the code that controls how Drupal works is separated from the code that controls how Drupal looks The design part of Drupal is referred to as the theme layer—and that’s what this book is all about Individual designs are referred to as “themes” and the people who create and implement them are referred to as “themers.” By the time you reach the end of this book, you will have the tools to customize the. .. journalism Web site based on Drupal He can be found blogging on http://kkaefer.com about design, Web development, and Drupal xxv From the Library of Athicom Parinayakosol This page intentionally left blank From the Library of Athicom Parinayakosol 1 Web Page Design T o start your adventure of becoming a Drupal themer, you must first understand how all of the Drupal components fit together to become a whole... Appendix A Appendix B contains the code samples that are referenced in the JavaScript chapters These code samples can also be downloaded from the book’s Web site From the Library of Athicom Parinayakosol This page intentionally left blank From the Library of Athicom Parinayakosol Acknowledgments Emma wishes to thank her mum, Maryann Thomas, for making sure Emma didn’t die of scurvy while writing the book... requested, Drupal collects all relevant information from each of the database tables to produce a snapshot of the content for display When you are building themes, you may choose to display all, or only some, of the information Drupal has collected for you From the Library of Athicom Parinayakosol 6 Chapter 1 Web Page Design Before building your new Drupal Web site, you must carefully examine the content... Figure 1.1, but in terms of the hierarchy of each page component On the left side of the diagram are all of the elements that are displayed, but are not content On the right side of the diagram you see several stories, each of which has its own components In this part of the chapter, we focus on the structure of the content (the right side of the diagram) Displaying Content When designing your Web site’s... content (the inset image) FIGURE 1.1 Content in the Trillium Healing Arts Centre Web site From the Library of Athicom Parinayakosol Describing Content 3 On any given page, Drupal will combine several elements to create the page you see—one of which might be content The flow chart in Figure 1.2 shows the same information that is displayed in the Web site in Figure 1.1, but in terms of the hierarchy of each... the context of Drupal Doing a Drupal theme right can be challenging, but it is also exciting and incredibly rewarding A survey I conducted in 2008 listed “Finding skilled Drupal designers” as the number one entry on xvii From the Library of Athicom Parinayakosol xviii Foreword the list of the “Top five most difficult things,” as reported by both expert and novice users We need to do more to find new themers,... also to the following businesses who graciously allowed us to capture images from their Web sites: Trillium Healing Arts Centre, Toilet Birthdays, The Ginger Press, CrochetMe (Interweave), CSS Zen Garden, Ubuntu Screencasts, Memory Garden Retreats, and Hear the North xxiii From the Library of Athicom Parinayakosol This page intentionally left blank From the Library of Athicom Parinayakosol About the Authors... the basic anatomy of a Drupal theme In Chapter 3, you will learn how to find and install a premade Drupal theme You will also learn the anatomy of a Drupal theme and discover how to use Starter Themes to reduce your development time Tips are included on how to convert themes from WordPress, Joomla!, and Drupal 5.x Chapter 4 The overall structure of pages in Drupal is defined by the page template In this . ptg From the Library of Athicom Parinayakosol ptg Front End Drupal From the Library of Athicom Parinayakosol ptg This page intentionally left blank From. Mexico City Front End Drupal Designing, Theming, Scripting Emma Jane Hogbin Konstantin Käfer From the Library of Athicom Parinayakosol ptg Many of the designations