Lesson 1 What you’ll learn in this lesson: • Exploring Dreamweaver’s primary features • Introducing new features in CS4 AL • Understanding how web sites and web pages work • Coding HTML/XHTML: MA TE D Dreamweaver CS4 Jumpstart TE RI the basics CO Starting up PY RI GH Whether you are a novice web designer or an experienced developer, Dreamweaver is a comprehensive tool you can use for site design, layout, and management.
1 What is Dreamweaver? 1 See Lesson 1 in action! Use the accompanying video to gain a better understanding of how to use some of the features shown in this lesson.The video tutorial for this lesson can be found on the included DVD. What is Dreamweaver? Dreamweaver is an excellent coding and development tool for new and experienced users alike, and it has quickly become the preferred web site creation and management program, providing a creative environment for designers.
1 What is Dreamweaver? Coding environment and text editor Dreamweaver lets you work in a code-only view of your document that acts as a powerful text editor. Edit HTML code directly and switch views to see the results of your code as you work. Features such as color-coding, indentation, and visual aids make Dreamweaver a perfect text editing or coding environment for web designers of any level.
1 New user interface What’s new in Dreamweaver CS4? In this lesson, you’ll look at some of the newest features in Dreamweaver CS4, if you are using Dreamweaver for the first time or new to web design, keep in mind that some of these features are geared to intermediate or advanced users.You may choose to skip this section and go directly ”An overview of the features” later in this lesson. CS4 introduces many innovative design and coding features as well as improvements to Dreamweaver’s flagship features.
Live View 1 Live View Experience tells you that visual web editors often display differently from the browsers they’re emulating. As script-driven interactivity gains popularity, the need to accurately design the different states of your page (including menus, panels, and interface elements) has become increasingly important. The static nature of Design view in Dreamweaver might no longer meet users’ advanced needs.
1 Related files Related files Web-based projects are becoming more complex than ever before, and you often find that even a single page is composed of a variety of assets. These assets can include Cascading Style Sheets (CSS), external JavaScript files, or even server-side includes. Dreamweaver CS4 has a new feature that will help you be much more effective at designing and managing sites and applications with multiple assets.
CSS improvements 1 CSS improvements The rebuilt Property Inspector reduces the risk of making mistakes when adding HTML and CSS for text. In earlier versions, Dreamweaver would sometimes add HTML to the page, and sometimes create CSS styles, depending on which buttons you clicked in the Property Inspector. This often led to a long, undesired list of styles with ambiguous names, such as Style1, Style2, and so on.
1 Photoshop smart objects Photoshop smart objects For this version, Dreamweaver supports a key, long-standing feature of the other Creative Suite programs—smart objects. Dreamweaver CS4 offers support for Photoshop smart objects, meaning you can drag a PSD file into a web page within Dreamweaver, optimize the image for the web, and even resize it. If you later update the original PSD file, a red arrow appears on the image in Dreamweaver, indicating that the source file has changed.
An overview of features 1 Subversion Dreamweaver now includes Subversion, a version control system similar to CVS and Visual Sourcesafe (VSS). Subversion is typically used by companies to maintain a team environment on larger projects that require changes to be logged, and versions to be controlled. Previously in Dreamweaver, if you wanted to maintain versions, you would have to do the work yourself— maintaining folders and copies of previous versions.
1 An overview of features Page and code object Insert panels: You can find intuitive icons for most common web page elements in a categorized Insert panel, from which you can add elements to your page with a single click.You can use additional panels to fine-tune any page element to ensure that you see exactly what you want. Included in the default Insert panel are tools for formatting text, building forms, and creating layouts. Customize a Favorites tab with your most-used icons.
How web sites work 1 Powerful visual aids: Take advantage of the precision you’re accustomed to in other design programs through Dreamweaver’s guides, rulers, measuring tools, and customizable positioning grid. Dreamweaver’s Design-Time style sheets let you customize the look of your page exclusively for the editing process, making layout quicker and easier without permanently altering the page’s appearance. Rulers, a document grid, and guides help you to size and position page items with precision.
1 How web sites work A simple flow chart What happens when you type in a web site address? Most people don’t even think about it; they just type in a URL, and a web site appears in a flash. They likely don’t realize how many things are going on behind the scenes to make sure that pages gets delivered to their computers so that they can do their shopping, check their e-mail, or research a project. User Machine (client) http://www.yoursite.
An introduction to HTML 1 Servers and web hosts A DNS server is responsible for matching a domain name with its companion IP address. Think of the DNS server as the operator at the phone company who connects calls through a massive switchboard. DNS servers are typically maintained by either the web host or the registrar from which the domain was purchased. Once the match is made, the request from your user is routed to the appropriate server and folder where your web site resides.
1 An introduction to HTML Tag structure and attributes HTML uses tags, or bracketed keywords, that you can use to place or format content. Many tags require a closing tag, which is the keyword preceded by a forward slash (/). 1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select BasicHTML.html and press Open. 2 Select the Split button ( ) in the Document toolbar to see the layout as well as the code that makes up the page.
An introduction to HTML 5 1 In the New CSS Rule dialog box, type .center into the Selector Name field, and press OK. Name a newly created style in the New CSS Rule dialog box. 6 The text is now centered. Take a look at the Code view, and notice that the .center rule has been added to the opening
tag. Align or format text in the Property Inspector, and then see the appropriate rules and attributes created in your code.
1 An introduction to HTML For more information on formatting text with CSS rules, please see Lesson 3, “Adding Text and Images.” 7 Choose File > Save to save your work, then choose File > Close. The structure of an HTML document Although you use many HTML tags to format text, certain tags are devoted to establishing structures, such as lists, tables, or, most importantly, the HTML documents themselves. The HTML tag is the most fundamental tag.
An introduction to HTML 1 Placing images in HTML You use some tags in HTML to place items, such as pictures or media files, inside a web page. The ![]()
tag is the most common example; its job is to place and format an image on the page. To place an image and see the resulting code, follow these steps: 1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select the Images.html file and press Open to edit the file.
1 An introduction to HTML 3 From the Common category in the Insert panel on the right side of the screen, click on the Images element ( ) and choose Image. When the Select Image Source dialog box appears, select the file named gears.jpg, located in the images folder within the dw01lessons folder. Choose Image from the Common tab on the Insert bar.
An introduction to HTML 5 The code shows that the HTML ![]()
tag has been used to place the image. Click once on the image in the document window to select it. The Property Inspector at the bottom of the page displays and sets the properties for the image. 6 In the Border box of the Property Inspector, type 3 to set a three-pixel border around the image, then press Enter (Windows) or Return (Mac OS). Click on the background of the page to deselect and note the appearance of the border.
1 An introduction to HTML The color pickers in Adobe Photoshop and Illustrator also display and accept hexadecimal codes, making it easy to copy and paste colors between these applications and Dreamweaver. Case sensitivity and whitespace rules HTML is a flexible language that has very few rules regarding its own appearance. Based on how strictly you want to write it, HTML can be either very specific about whether tags are written in upper- or lowercase (called case sensitivity), or not specific at all.
An introduction to HTML 1 All three tags use a completely different case structure, but all are valid and are treated in the same way. Take a look at the text that reads This is one sentence.This is another. The code shows a lot of space between the two lines, but the Design view shows no space at all. This is because both whitespace and line returns between two pieces of text or tags are not recognized.
1 An introduction to HTML 4 To create a new paragraph, position your cursor before the phrase, This is another, and press Enter (Windows) or Return (Mac OS). The text is separated by a line above and below, and is wrapped inside a set of
(paragraph) tags. Dreamweaver creates a new paragraph each time you press the Enter or Return key.
A look at the Welcome Screen 1 Dreamweaver generally does a great job of keeping tags properly nested, or contained within each other. When you choose to manipulate the code by hand, you should always keep good coding techniques in mind. XHTML 1.0 Transitional The latest recommended version of HTML is XHTML 1.0, a stricter version of HTML that makes the language more compatible with newer platforms, such as mobile phones and handheld devices, which require code to be perfectly formed.
1 A look at the Welcome Screen A look at the Welcome Screen A common fixture in most CS4 applications is the Welcome Screen, which is a launching pad for new and recent documents. In Dreamweaver, the Welcome Screen appears when the application launches or when no documents are open. From the Welcome Screen, you can create new pages, create a new site definition, open a recent document, or use one of Dreamweaver’s many starter pages or layouts.
Creating, opening, and saving documents 1 Creating, opening, and saving documents The lessons throughout this book require that you create, save, and open existing files.You can accomplish most file-related tasks from the File menu at the top, or from the Start page that appears when you launch Dreamweaver. Creating new documents Dreamweaver creates text files, commonly in the form of HTML files (or web pages).
1 Self study Opening a recently opened document To open a document you’ve worked on recently, Choose File > Open Recent or, from the Welcome Screen, select a document under the Open a Recent Item column. Choose a file from the Welcome Screen or choose File > Open Recent to select a recently opened file. Now that you’ve seen what Dreamweaver can do, it’s time to put what you’ve learned into practice.
Self study 1 Self study Explore the ready-to-use CSS layouts available in Dreamweaver by choosing File > New, then selecting HTML from the Page Type column. Browse the options listed in the Layout column and open a few layouts. Identify some that you’d like to use as a starting point for any future project.
