Starting Up
About Web Design with HTML and CSS Digital Classroom
Creating effective websites requires an understanding of design principles, as well as the underlying technology that is used to deliver and display content to your audience. The Web Design with HTML and CSS Digital Classroom provides the information you need to design, develop, publish, and maintain websites. Whether you are just starting out in the field of web design, or are experienced with design tools like Dreamweaver or Expression Web, you’ll find this book helpful at explaining the underlying concepts for organizing, creating, and delivering web content effectively using best practices.
The Web Design with HTML and CSS Digital Classroom helps you to get up-and-running quickly. Although you can work through the lessons in this book in any sequence, we recommend that you start in at the first lesson and progress through the book in the sequence in which they are presented. Each lesson includes detailed, step-by-step instructions, background information, companion video tutorials, and lesson files.
The Web Design with HTML and CSS Digital Classroom is like having your own expert instructor guiding you through each lesson while you work at your own pace. This book includes 12 self-paced lessons that let you discover essential skills, explore web design, and learn HTML, CSS and image editing techniques that will save you time and allow you to more easily create effective websites. You’ll become productive right away with real-world exercises and simple explanations. Each lesson includes step-by-step instructions and lesson files available on the Digital Classroom website at www.digitalclassroombooks.com/webdesign. The Web Design with HTML and CSS Digital Classroom lessons are developed by the same team of instructors and experts who have created many of the official training titles for companies such as Adobe Systems and Microsoft. Now you can benefit from the expert instructors and clear, detailed instructions provided by the American Graphics Institute team.
Prerequisites
Before you start the Web Design with HTML and CSS Digital Classroom lessons, you should have a working knowledge of your computer and its operating system. You should know how to use the directory system of your computer so that you can navigate through folders. You also need to understand how to locate, save, and open files, and you should also know how to use your mouse to access menus and commands. If you are just starting out with using a computer, you should become familiar with its operation first, using resources such as the Windows 7 Digital Classroom or Mac OS X Digital Classroom.
We recommend that you install a text editor to use when working with the HTML and CSS code. The specific editor is not important, but you should choose and install a text editor so that you can easily open and work with the lesson files presented in this book. If you aren’t sure which to use, you can wait until you get to Lesson Three where we discuss working with code and using text editors. However, if you’re comfortable installing a text editor, we’ve listed some options below.
Some Mac OS text editors include BBedit and TextWrangler, both of which are available at http://www.barebones.com. Or you can use TextMate which is available for download at http://macromates.com. Another Mac OS text editor is Coda which can be found at http://www.panic.com/coda/.
If you work on a Windows computer you may wish to use E Text Editor which is available at http://www.e-texteditor.com or Microsoft Visual Web Developer Express which can be found at http://www.microsoft.com/express/Web/.
If you already have a visual web design tool like Adobe Dreamweaver or Microsoft Expression Web installed on your computer, you can use the coding tools integrated with these software packages instead of installing a dedicated text editor. Although both Adobe and Microsoft offer free trial versions of these software tools, if you don’t have either one installed, we recommend skipping them for now and instead using any one of the text editors listed above while working with this book. By using a text editor, you can focus on the design and underlying code rather than learning the user interface and functions of a specific software package.
System requirements
Before starting the lessons in the Web Design with HTML and CSS Digital Classroom, make sure that your computer is equipped for creating and managing websites. Because you will be using a variety of software tools, there is no formal minimum requirement for your computer, however we suggest that your computer meet or exceed the following guidelines:
Windows OS
Intel® Pentium® 4, AMD Athlon® 64, or Multicore Intel® processor; Microsoft® Windows® XP with Service Pack 2; Windows Vista® Home Premium, Business, Ultimate, or Enterprise with Service Pack 1; or Windows 7
1GB recommended RAM 1GB of available hard-disk space for working with files
1280 × 800 display with 16-bit video card
Broadband Internet connection
Macintosh OS
Multicore Intel® processor
Mac OS X v10.4 or greater
1 GB of RAM 1 GB of available hard-disk space for working with lesson files.
1280 × 800 display with 16-bit video card
Broadband Internet connection
Understanding menus and commands
Menus and commands within the software tools discussed in this book are identified by using the greater-than symbol (>). For example, the command to print a document might appear as File > Print, representing that you click the File menu, then choose the Print command.
Understanding how to read HTML and CSS code changes
Many of the step-by-step instructions in the book involve typing one line (or more) of HTML or CSS code to a previously existing block of code. In these cases, the new code for you to add is highlighted in red to help you quickly identify the text to be added to your lesson file.
For example, this code represents a line already present in your lesson file:
<h1> News </h1>
The code highlighted here in red is what you would need to add:
<h1 class="frontpage"> News </h1>
Loading lesson files
The Web Design with HTML and CSS Digital Classroom uses files for the exercises with each of the lessons. These files are available for download at www.DigitalClassroomBooks.com/webdesign. You may download all the lessons at one time or you may choose to download and work with specific lessons.
For each lesson in the book, the files are referenced by the file name of each file. The exact location of each file on your computer is not used, as you may have placed the files in a unique location on your hard drive. We suggest placing the lesson files in the My Documents folder or on the Desktop so you can easily access them.
Downloading and copying the lesson files to your hard drive:
1 Using your web browser, navigate to www.DigitalClassroomBooks.com/webdesign. Follow the instructions on the web page to download the lesson files to your computer.
2 On your computer, navigate to the location where you downloaded the files and right-click (Windows) the .zip file you downloaded, then choose Extract All or double click on the .zip file (Mac OS).
3 If using a Windows computer, the Extract Compressed (Zipped) Folders window appears. In this window, specify the location where you want to save the files, and click Show Extracted Files When Complete. Mac OS users will find the files extracted to the same location as the original .zip file.
Video tutorials
The www.DigitalClassroomBooks.com/webdesign site provides Web Design with HTML and CSS Digital Classroom book readers with video tutorials that enhance the content of this book. The videos use the popular Silverlight player for viewing on your desktop or notebook computer, or use iPad-compatible video if you are using an iPad to read an electronic version of this book. Most other ePub devices are not optimized for playing video, and you should use a notebook, desktop, or tablet computer for viewing the video tutorials if you are using a dedicated e-reader such as a nook, Kindle, kobo, or Sony e-reader. An Internet connection is necessary for viewing the supplemental video files.
The videos enhance your learning as key concepts and instructions are discussed by the book’s authors. The video tutorials supplement the book’s contents, and do not replace the book. They are not intended to cover every item discussed in the book, but will help you gain a better or more clear understanding of topics discussed in many lessons of the book.
Hosting your websites
The websites you will create using this book require only your computer, but eventually you will want to create websites to share with the world. To do this, you will need to put your website on a computer connected to the Internet that is always accessible. This is known as a web server. If you don’t want to get involved in creating computers that host a website, you can pay a company to provide space on their web servers for you. A good place to look for a hosting provider is here: http://www.microsoft.com/web/jumpstart/hosting.aspx. If you want to set up your own computer for hosting a web server and you are using any Windows computer, you can turn it into a web server at no cost by using the Web Platform Installer available at: http://www.microsoft.com/web. If you are a Mac OS user, you can get Mac OS X server from Apple to use a Mac OS computer as a web server.
If you are just getting started, you don’t need to worry about web hosting just yet. But you’ll find this information useful once you start creating sites.
Additional resources
The Digital Classroom series of books can be read in print or using an e-reader. You can also continue your learning online with the training videos, or at seminars, conferences, and in-person training events led by the authors.
DigitalClassroomBooks.com
You can contact the authors, discover any errors, omissions, or clarifications that have been identified since the time of printing, and read excerpts from the other Digital Classroom books in the Digital Classroom series at digitalclassroombooks.com.
Seminars, conferences, and training
The authors of the Digital Classroom seminar series frequently conduct in-person seminars and speak at conferences, including the annual CRE8 Conference. Learn more about their upcoming speaking engagements and training classes at agitraining.com.
Resources for educators
If you are an educator, contact your Wiley education representative to access resources for this book designed just for you, including instructors’ guides for incorporating Digital Classroom books into your curriculum. If you don’t know who your educational representative is, you can contact the Digital Classroom books team using the form at DigitalClassroomBooks.com.