More Related Content
Lesson 1 cs5
- 1. Learning Web Designwith Adobe CS5 Dreamweaver ® Fireworks ® Flash ®
- 2. Contents Lesson 1Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 ©2011 Prentice Hall
- 3. The Dreamweaver workspaceis the part of the window where you create, work with, and save Web pages. The largest area in the workspace is the Document window . You use the Document window to create page content. Get Started with Dreamweaver: Lesson 1, Exercise 1 Document Window Property Inspector Panel Groups Pane Expander Arrow
- 4. Application Bar TheApplication bar is a menu bar that provides selections for creating and working with Web sites, pages, and objects. Objects are elements you add to a Web page. The various menus—File, Edit, View, Insert, Modify, Format, Commands, Site, Window, and Help—are grouped by the task you want to perform. Get Started with Dreamweaver: Lesson 1, Exercise 1
- 5. The Document toolbarappears at the top of the Document window directly above the window’s contents. The toolbar displays Code, Split, Design, and Live View buttons that you can use to toggle among the various views. You will learn more about these and other view options later in the course. The Document toolbar also shows the title of the current page and gives you easy access to tools that enable you to check browser compatibility, preview the page, and modify the display of page content. Get Started with Dreamweaver: Lesson 1, Exercise 1 Document Toolbar
- 6. A panel groupcontains several related panels. The Files panel group contains the Files panel and the Assets panel. To switch from one panel to another in a group, simply click the panel’s tab. Panel groups can be opened and closed as you require. To open a panel group, double-click the panel’s tab. To close a panel group, double-click the panel tab again. You can drag a panel group away from its default location by clicking panel tab and dragging the panel group to a new location. If you leave the panel group undocked in the workspace, you have created a floating panel group. Get Started with Dreamweaver: Lesson 1, Exercise 1 Files Panel Group
- 7. When you setup a new Web site in Dreamweaver, you name the site and its folder. You can use the Site Setup dialog box at any time to add your remote server information. Before you begin, you will find it helpful to plan your Web site. Identify the number of pages you need and do a simple sketch to show how the pages are linked and what content they will provide. This sketch will serve as a map as you begin creating your site. Your new site—shown as a green folder—is listed in the Files panel in the panel group on the right side of the screen. The Files panel is where you work with all the files you need as you design your site. Get Started with Dreamweaver: Lesson 1, Exercise 2 Site Setup Dialog Box Manage Sites Dialog Box
- 8. You can createnew Web pages from the Start page if you have no other pages open in a site. The Start page also gives you the ability to open existing pages you’ve created in Dreamweaver. When you have a page open in a site, you can create a new page using the File > New command. Get Started with Dreamweaver: Lesson 1, Exercise 2
- 9. Get Started withDreamweaver: Lesson 1, Exercise 2
- 10. Get Started withDreamweaver: Lesson 1, Exercise 3 HTML (Hypertext Markup Language) is a scripting language—or code—you use to create pages that can be viewed with a Web browser. Nearly every item on a Web page—including text, formatting, pictures, and other page elements—is controlled by HTML coding. Dreamweaver CS5 supports XHTML (Extensible Hypertext Markup Language). XHTML is a reformulation of the most current version of HTML (HTML 4.0) that uses XML (Extensible Markup Language). XML is a language that uses tags to structure information, similar to HTML. Unlike HTML, however, XML allows you to create your own tags to fit your information more specifically. XHTML was developed to answer a need for a stricter version of HTML that could be used to deliver content across a wide variety of devices: not merely computer browsers, but also mobile phones, laptops, PDAs, and so on. XHTML combines the standard HTML structure with the power and flexibility of XML.
- 11. Get Started withDreamweaver: Lesson 1, Exercise 3 To make sure others can find and visit your site, you can supply keywords on your pages that search engines use to index a site in their databases. You add keywords to the Head section of a site using a <meta> tag. To add a <meta> tag containing keywords to your home page, use the Insert > HTML > Head Tags > Keywords menu command to open the Keywords dialog box. Here you can type the keywords that summarize your site’s subject.
- 12. Get Started withDreamweaver: Lesson 1, Exercise 3 You can display rulers on the pages so you can easily position content on the page. You add rulers to the work area by opening the View menu, clicking Rulers, and choosing Show. A newly opened Dreamweaver document displays a blinking insertion point at the top left of the Document window. To enter text on a page, simply begin typing at the location of the insertion point. HTML heading levels Apply text formats with the Property inspector Type text at the insertion point
Editor's Notes
- #8Â In the Manage Sites Dialog Box you can Export the site that you created. The file extension for sites is .ste . This is a time saving way for students to be able to manage their various sites and Import them or Remove them when they begin work or when they are ready to close their session on the computer.
- #9Â Many servers expect the home page of a Web site to be named index.htm or index.html. The Microsoft IIS server can use either default or index as the file name for the home page. To make sure your Web pages are published without error, use the appropriate name for your home pages. The home page is the first page that opens in a Web site. This page usually gives general information about the site and includes links to other pages in the site.
- #11Â By default, Dreamweaver saves new Web pages as XHTML Transitional documents and applies any code necessary to meet XHTML requirements.
- #13Â Today cascading style sheets (CSS) are considered the standard for formatting Web pages. Using CSS, a designer can format a page precisely using styles. Styles are saved instructions that tell the Web browser how to display the styled element. Styles can be used to format text and headings, tables, blocks of type on a page, and images, and even change the default formats of HTML tags.