1 / 31

Dreamweaver MX

Dreamweaver MX. Getting Started. Objectives. To understand the Dreamweaver interface To manage panels, inspectors, & windows To create a basic web page with text To preview the page in different browsers To define a web site To use relative and absolute paths

morley
Télécharger la présentation

Dreamweaver MX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dreamweaver MX Getting Started

  2. Objectives • To understand the Dreamweaver interface • To manage panels, inspectors, & windows • To create a basic web page with text • To preview the page in different browsers • To define a web site • To use relative and absolute paths • To create hyperlinks and mailtos • To view and edit HTML

  3. Objectives • Understand how to position layout with tables and layers • Understand DHTML • Understand formatting web pages with Cascading Style Sheets • Understand how to create forms and form elements

  4. The Dreamweaver Interface • Dreamweaver is an HTML editor, an authoring tool, a dynamic web page development tool, and a web site management tool

  5. The Workspace • The menu bar • The insert bar • The document window • The document toolbar • The panel group • The status bar • The property inspector • The panel group • Dreamweaver supplies multiple ways to accomplish the same task

  6. Creating a New Web Page • File, New, Basic, HTML • Type in text or copy longer text from a text editor • Paragraphs are created with the enter key (two blank lines after it) • Line break (shift+enter) puts in one blank line

  7. Text • Fonts • Size • Alignment • Color • CSS • Lists

  8. Page Properties • Page Title • Default font, size, and color • Background color & image • Page margins • Heading Properties • Save and preview (up to 20 browsers!)

  9. Defining a Web Site • Root directory • A different web site for each project • If you want to save/use the same site in multiple locations (home & A), you MUST define the site the same way in both places!!

  10. Defining a Site • Give your site a unique, meaningful name • No, you do not want to use a server technology • Edit locally, then upload • Browse to the location to save (the folder name should be the same as the site name)

  11. Defining a Site - continued • FTP for connecting • Hostname is – 168.16.210.222 • Folder for storing on the server – leave blank • Login – userid • Password – your ftp password • Test the connection • The URL - http://168.16.210.222/fpstudents/userid • Test the connection • No for check-in/check-out • Done

  12. Relative and Absolute Paths Hyperlinks are used to jump from one web page to another. An absolute path is the complete URL. A relative path points to a new location relative to the current page. Use relative paths within your web site & absolute paths to external sites. Your server folders inside your root directory must match your folders inside your Dreamweaver web site!!

  13. Creating Hyperlinks & Mailtos • Highlight the test you want as a hyperlink • Use the properties box to enter the path to link to • Set link colors in the page properties • Named anchors may be used for links within longer pages • Add an email link with mailto:emailaddress as the URL of the link

  14. Tables • HTML doesn’t allow you to skip spaces. • Tables &/or layers must be used to position information on a page. • Ideally, tables should only be used to display tabular data. • Insert, table, and specify the number of rows and columns you need

  15. Tables - continued • Select the table width & border thickness (0 for no border) • Cell padding – amount of space between the contents of a cell and the cell border • Cell spacing – the amount of space between two cells • Include space for the header when you specify the number of rows & columns you need

  16. Tables & Accessibility • Add a caption – shows on the browser and should describe the purpose of the table • Add a summary – the summary is only read by text-to-speech software. It is not visible in the browser. The summary should contain a detailed description of what the table is used for.

  17. Modifying Tables • The table property inspector – allows you to adjust the table structure or • Table, insert or delete allows you to change the rows & columns as well • You can highlight multiple cells & merge them together to create a larger cell. • You can sort the rows of a table

  18. More Table Options • Table, commands, format table gives you preformatted tables • You can export data from an HTML table • You can import data from a spreadsheet or database into Dreamweaver

  19. DHTML • Dynamic HTML is a combination of HTML, CSS, and JavaScript to make web pages interactive • Examples are pop-up menus, images that appear when a user clicks a hot spot, and changing text color when a mouse rolls over the text

  20. Layers – aka the div tag • Layers are strictly a Dreamweaver term. Layers use the <div> tag to position information on a page. • Layers can be set to be visible (default) or hidden. • The z-index of a layer determines the stacking order so you can position layers on top of each other.

  21. Layers - continued • Insert, layout objects, layer – then drag it & expand it to the size and location desired. • It’s a good idea to name your layers (no spaces or punctuation in the layer name) . • You can set the background color & image to give your pages a different look (transparent means the page background shows through – this is the default). • If you wish to stack your layers, then the z-index sets the order. The highest z-index is on the top. You can align layers, change layer visibility, and/ or nest layers

  22. Creating a Web Page in Dreamweaver MX • Add layers to your Dreamweaver page where you want the sections of your page to be (i.e., one for logo, one for navigation, one for the body, one for the footer). • Put pictures, information, more layers, or tables inside your layers to accurately position information on the page exactly where you want it.

  23. And … • Find or create all logos, navigation buttons, and pictures before creating your page. • Save your home page as default.htm or .html • You can use file, save as to copy your home page to use to create other pages or for use as a template.

  24. Cascading Style Sheets • Enables you to apply a property or group of properties to an object by applying a style to that object. • Browsers 4.0 or later support most CSS • You can redefine the tag or define a class that may be applied to any tag.

  25. CSS • Redefining a tag means that you are changing the look of a tag. For example, you can set <p> to be 14 point blue text everywhere it is used. • Creating a class means that you are setting attributes (for example, 12 point green text) that may be applied to any tag that has font attributes (<p>, <h3>, etc.) • Classes are more useful

  26. CSS Class • Create a class – New CSS Style from the CSS Styles Panel • Pick Class and Give a meaningful name (no spaces, punctuation, and can’t start with a digit) • Either this document only or new style sheet (external – more later) • Select all the style definitions for that class and click OK to save • To apply the class – select the object & then pick the class from the Style drop-down menu in the Property Inspector

  27. Style Settings • Type – font and other text attributes • Background – color, image, etc. • Block – paragraph attributes • Box – for layers, tables, and other box objects • Border – for layers, tables, and other objects with borders • List – list attributes • Positioning – visibility and z-index

  28. Types of CSS • In-line – defined within the tag itself – applies only to that one tag <p style=“color: #660033;”>Here is my line.</p> • Internal – defined with in the head of the web page between <style> tags applies to selected tags, but only for that one page <style> <!– p {color: #660033; p.ingred {font: 12 pt Trebuchet MS;} </style>

  29. More • External – a linked style sheet (saved as .css) that may be attached to multiple web pages. In the head of the web page put: <link rel=“stylesheet” href=“mystyles.css” type=“text/css” />

  30. Positioning Layers with CSS • Create & name a new class • Select positioning & absolute • Set the left, top, width, & height • Click OK • Create a layer • Select the layer & right-click on <div#events> in the tag selector • Select the Set Class & pick your new class • Delete the left, top, width, and height layer properties (these come from the style)

  31. Forms • A form is a container for other objects (it shows up in Dreamweaver as a red-dashed line) • Insert a layer then insert a form within the layer (you may need to insert a table within the form to position the elements on the form the way you want). • Insert text for field labels and form elements to make the form look the way you want.

More Related