- Shopping Bag ( 0 items )
Essential Skills for First-Time Designers Prepare yourself for unlimited growth in the world of Web design by building a rock-solid foundation in two of the most significant applications in the industry—Dreamweaver and Fireworks. Learn Internet fundamentals,get a primer on HTML,and plan your first Web site,then use the powerful tools in this studio to design and build more robustly functioning,professional-looking Web sites. Written by a Macromedia expert with vast experience as a trainer and curriculum developer,this complete learning guide will help everyone—from beginners to the most experienced Web authors—combine Dreamweaver and Fireworks to produce beautiful results.
This Beginner's Guide Is Designed for Easy Learning:
3. From the Exercises folder for this module, locate the simple text file called sponsors text.txt. Open this file using a simple text editor on your computer (such as WordPad or SimpleText) and copy and paste the text into the sponsor links editable area for this first page. As noted back in Module S, copying text removes all formatting that was previously applied. To get this area into shape, you could format the fonts based on your site design with HTML or CSS formatting, and create links to the fictional businesses that are listed here. Since this area is editable, you have complete control over the appearance of the content.
4. You may have noticed as you moved your cursor around the Document window that the small universal "no" symbol (&) appears in certain areas. Dreamweaver uses this symbol as a reminder that the area is not available for editing.
5. You now have all the tools you need to finish an important task-completing the index pages for the subfolders you created throughout the site. To do this, create new pages from the basic template, and then add content as you see fit. If you wish to add text, you can type it in the body section of the template yourself, or you can choose the generic text.txt file from the Exercises folder for this module and use the copy and paste function to put the exciting prose that you'll find there into your documents.
6. When you are done with each document, choose File I Save As, navigate to the subfolder for each document, and save the file there. When Dreamweaver asks if you want to replace the existing documents, choose Yes.
Updating pages that are created from a template couldn't be an easier task. Suppose that, due to growth on your site, you need to add additional links to the navigation bar on all of your pages. Without templates, you would have to open and modify each individual page. However, since the core of the pages is built with a template, you could simply open the template from the Templates folder on your site, make your changes, and then choose Modify I Templates I Update Pages, and all the pages that are linked to the template would be modified automatically.
Templates are important tools for any site designer to be familiar with because of the consistency they lend to the overall site design, and because of their ease of use and their inherent ability to make automatic modifications site-wide.
Behaviors are an extremely powerful set of tools that can dramatically change a web page from a simple document into an interactive powerhouse that interacts with viewers in ways that no other medium of communication can. Consider, for instance, that behaviors can change the appearance of an image as the user passes their mouse over it (as you saw when you worked with rollover buttons), but can also be set to load a predetermined series of images and run an interactive slide show instead. In addition to affecting images, Dreamweaver comes with built-in behaviors to play sounds, change to a new URL, open a new browser window, display a pop-up message, and even have different portions of the page load at different times, among many others. Behaviors are one of the most complicated design elements available, and fully understanding the different ways that they can be utilized in the creation of dynamic web pages goes far beyond the scope of this book.
The main focus of this module has been on creating a consistent experience for your viewers, and thus you will concentrate on the behaviors that support that goalautomatically checking the viewer's browser version for the presence or absence of a plug-in. In the process, you will gain a basic understanding of behaviors and the way that Dreamweaver allows you to define them. Project 9-5: Using Behaviors to Check Browser Versions Throughout the course of this book, many instances have been noted in which certain elements of web design are restricted by the browser type and version that a viewer might have installed on their computer. Cascading style sheets, in particular, are problematic because while they present fantastic opportunities for controlling the appearance of a web page, their lack of support in older browsers means that viewers who have not upgraded may have an entirely different experience than what you intended. To alleviate this problem, you will use a Dreamweaver behavior to automatically detect the viewer's browser version, and, if they are using an older browser, redirect them to special pages built without CSS. While this sounds complicated, by combining the easy way that Dreamweaver allows you to define behaviors with a template created for the purpose of building these alternative pages, the process moves along more quickly than you might think.
2. Create a new document from the basic with css template by choosing File I New From Template and then clicking it in the Select Template dialog box.
3. Save this new document as css test.htm and place it in the root folder of your site.
4. Follow the same steps to create a new document using the basic no css template. Save this file as no css test.htm in the root folder as well.
5. The document css test.htm appears with the text in the navigation bar at the top formatted with a CSS style that removes the underline, bolds the text, and changes the rollover colors to ones that match the color scheme of the site. If possible, preview this page in both Internet Explorer and Netscape Navigator. While they look great in Microsoft's browser, Netscape does not support this CSS feature. Viewers who use the Netscape browser will probably deduce that the text at the top of the page contains links, but by using a behavior, you can direct them to another page where these links will be more evident....
This book fills that need for a web design reference that begins with the basics, then leads you through a series of step-by-step tutorials to build your skills and comfort level to the point that you can confidently use the software to create unique and dynamic web sites of your own. In addition, because this book is written by a teacher, as opposed to someone who is an expert on the software but who knows nothing about the way people really learn, you can be sure that the lessons and tutorials make sense and anticipate your questions every step of the way.
This book is designed for the person who wants to use what is considered to be the best "What You See Is What You Get" visual web-authoring tool available today-Dreamweaver 4, and its companion graphics creation and optimization program Fireworks 4-without giving any credence to the myth that the software is too hard to understand. Anyone who has basic experience in using computers can easily follow the exercises in this book and in a surprisingly short time can be designing and posting their own creations to the World Wide Web.
Part 1, "Dreamweaver 4 and the World Wide Web," contains ten modules that lead you through a series of projects covering not only how the program is used, but also covering many of the fundamental principles required for a full understanding of how the Web works, including both technical and practical considerations in web design.
In Module 1, "Fundamentals of the World Wide Web," you will learn how the Internet and the World Wide Web are organized, how the coding structure that makes web pages possible actually works, and how the Internet browsers function to read the code that you will create with Dreamweaver. You might consider this module as "Internet 101," as it explains the basic underlying structure of the computer coding language, HTML, which makes it possible for web pages stored on a computer halfway around the world to display on your computer at home.
Module 2, "Planning and Organizing Your Web Site," explains why the planning process for creating web sites is actually more important than the design of the pages themselves. At the conclusion of Module 2, you will understand why the simple question, "What is the goal of my web site?" drives almost every design, layout, and site management decision you will make in defining your web site, and how Dreamweaver is used to help you focus on both the practical and technical aspects of site design.
In Module 3, "Understanding the Dreamweaver Interface," you will be introduced to the Dreamweaver authoring environment and the primary tools that are used for designing your web pages. The Properties Inspector and the Objects panel are the two primary tools for inserting and modifying content, and in this module you will come to appreciate how efficient this interface is and how quickly you can use it to lay out your pages.
Module 4, "Layout and Alignments: Building Your First Web Page," delves into the actual creation of your first web pages, and provides you with an understanding of how files are named and titled and how the properties of the page are defined in Dreamweaver, including text and page colors. Included in this module is a guide to the use of colors in web design, with some practical tips for creating pages that are easy to read and that make the maximum possible impact.
"The Printed Word: Working With Text" is the topic of Module 5, and in this section you will begin adding text to your pages and gain an understanding of the capabilities and limitations of text for the Web. This module will teach you not only how text is entered on a page, but will also show you how formatting can affect the viewer's experience, and present some of the issues involved with text alignment and how it displays in different browsers.
In Module 6, "Adding Visual Interest: Working with Images," you will learn how the use of graphics and images can lead to a more dynamic experience for your intended Internet audience. You'll learn in this module not only how to insert basic images, but also how to create sophisticated rollovers that respond to a viewer's mouse pointer, and be introduced to one of the newest features of Dreamweaver-Flash text and buttons-that continues the tight integration between the Macromedia family of products.
Module 7, "Controlling Page Layout," covers the use of the new layout tools in Dreamweaver 4, and introduces you to the concepts that are fundamental to creating pages that look great on any computer. By understanding the way that tables are used for page layout and alignment, and the advanced features available with objects such as tracing images, you will be able to produce web pages that have an interface that is easy for your viewers to navigate.
In "Advanced Page Design: Frames and Cascading Style Sheets," which is Module 8, you will learn how web page design can be taken to the next level through the use of the more advanced techniques afforded by frames, and get a peek into the future of the Web by working with cascading style sheets.
Module 9, "Automating Your Work: Tools for Consistent Content," covers another new feature of Dreamweaver 4, the Assets panel, and how it is used to keep track of all of the items that you have employed in your site-from links, to colors, to library items and templates that can be used over and over not only to make your work easier, but also to assist in branding your site so your viewers find a consistent experience when they visit.
Module 10, "Forms and Functions: Interactivity in Web Design," explores the use of programming techniques and the requirements for creating interactive elements in your site design. At the end of this final Dreamweaver-only module, you will understand how forms are created, the programming required to make your forms function properly, and be introduced to some of the capabilities of the Extension Manager-Dreamweaver's tool for extending the capabilities of the program by offering free extensions at the Macromedia web site.
In Part 2, "Graphics Creation and Optimization with Fireworks 4," you will find seven modules that introduce you to all of the capabilities of the fabulously easy-to-use graphics program, Fireworks 4.
Module 11, "An Introduction to Fireworks 4," explores the Fireworks interface and explains in detail how the program works and how to access the features of the software through the panels that organize tasks based on their function.
In Module 12, "Working with Bitmap Images," you will learn how GIF and JPEG files, the two most common formats in use on the Web, are created and how you can modify existing photographs and graphics in new and exciting ways.
Module 13, "Creating and Modifying Objects with Fireworks Panels," takes you further into the many uses of the software by exploring vector-based drawing tools, how objects are arranged and combined, and how special effects such as drop shadows, glows, and bevels are applied.
Module 14, "Working with Text and Text Effects," details the different ways that text can be created and converted to graphical images with the Fireworks Text Editor, and how advanced techniques such as attaching text to different shaped objects is possible.
"Creating and Organizing Complex Objects," which is Module 15, explores more advanced techniques available through the use of masks, and Fireworks' Styles, Symbols, and Layers. By using these tools you will be able to compose highly sophisticated graphics in a short period of time.
In Module 16, "Optimizing and Exporting Fireworks Files," you will learn essential skills required for preparing your images for the Web by discovering how Fireworks allows you to fine-tune your images to achieve the fastest download times possible while maintaining image quality.
Module 17, "Creating Animated Files with Fireworks," covers in-depth both the practical and technical aspects of the creation of animated images. You will learn not only how animations are created, but also be introduced to the new animated symbols features of Fireworks 4.
In Part 3, "Bringing It All Together," the exceptionally well-integrated features of Fireworks and Dreamweaver are explored as one, with an emphasis on how the two programs work together to create dynamic content for the Web.
Module 19, "Integrating Fireworks and Dreamweaver," continues to explore some of the ways that the two programs can be used together, including how you can optimize and edit an image created in Fireworks directly from within Dreamweaver.
Finally, in Module 20, "Getting It Out There," the Dreamweaver interface for transferring files from your own computer to the server where they will be accessible on the World Wide Web is the focus. In this module you will learn how Dreamweaver is set up for file transfers, and information important for you to know when it comes time to choose a web-hosting service.
Almost all of the modules in this book are supported by free files that you can download from www.osborne.com. These files include not only basic HTML files for use with Dreamweaver, but also templates, graphics, and photographs that support your learning as you move through the book. To access those files simply navigate to the link for this book and download the free files that you will find there. Because the files are in the ZIP format, you will need an unzipping utility such as WinZip for Windows or Stuffit for the Mac. Clear instructions for how files are downloaded and uncompressed are included along with the files themselves.
You can also find these project files, plus on-line resources, frequently asked questions, and a forum for making suggestions on how to improve this book at my own web site-www.dw-fw-beginners.com. If you are a teacher or instructor using this book as a resource, you will also find at this site lesson plans and ideas for using the book in your courses.
Significant differences (and there are very few) that were found between the two operating systems are noted in the text. However, so as not to clutter the book unnecessarily with hundreds of "right-click-command-click" notations, it is assumed that Macintosh users know that their computer thinks differently and will be able to make the necessary adjustments as they work through the projects.
Posted October 9, 2001
As a school library media specialist, I found the structure of this book to be really helpful for developing lessons based on the content. With this book, the author has broken down the hefty job of building a web site into manageable tasks, projects and modules, which is particularly helpful to the educator. There are even worksheets available online that correspond with specific projects. This book is a must have for any web site developer or instructor who has been given the task of creating a web site or teaching a web design class!Was this review helpful? Yes NoThank you for your feedback. Report this reviewThank you, this review has been flagged.
Posted October 3, 2001
This book is written to make learning Dreamweaver and Fireworks easy. The book is huge, but it's because it takes the time to explain steps and make each process easily understood. Obviously written by someone that not only knows the Macromedia products, but also how to teach them. I'd recommend this book for beginners and for those that are looking for some great tricks to use in both Dreamweaver and Fireworks. GREAT JOB!Was this review helpful? Yes NoThank you for your feedback. Report this reviewThank you, this review has been flagged.
Posted March 19, 2010
No text was provided for this review.