Adobe Dreamweaver CS4

Transcription

1 Adobe Dreamweaver CS4 About Dreamweaver Whether creating simple blog pages complex web sites, Dreamweaver provides users with a powerful set of web-design tools necessary f the task. Its userfriendly interface and functionality make it fast and easy f the amateur web designer, while its extensive coding view provides detail and flexibility to its professional users. Views Dreamweaver provides a number of various window views. Depending on the document view, you can modify design, edit code, even preview your current webpages. These options are located in the document toolbar. Design View The Design view displays a fully editable, visual representation of the document, similar to what you would see when viewing the page in a browser. Code View The Code view is a hand-coding environment f writing and editing HTML, JavaScript, and other codes. Live View Similar to Design view, Live view provides a me realistic representation of what documents will look like in a browser, and allows users to preview pages in an interactive browser environment. Documents cannot be edited in Live view. Task-based Wkspaces The Wkspace Switcher is located at the top right of the program window. Click this menu to customize your wkspace layout to match your specific project. Panels and toolbars may also be moved resized to suit you needs. Set Up Your Site Create a New Web Site 1. Select Site, then New Site. 2. Follow the Dreamweaver web site wizard to begin setting up your web site. Click the Advanced tab in the Site Definition window to manually set up web site properties. Create a New Page 1. Open Dreamweaver. Under Create New, select HTML. If Dreamweaver is already open, select File, then New. 2. In the New Document window, choose new page options. 3. Click Create. Create New Pages From Template 1. Select File, then New. 2. In the left column, select Page From Template. 3. Choose the template in the Site and Template prompts and click Create. 4. After creating the page, name the page in the Title prompt located in the document toolbar. This is the title that will appear at the top of the web browser window. 5. Repeat steps 1 3 to create me pages. 6. After the page creation process is complete, choose File, then Save All. 7. Enter the name index f the home page file name (the home page must be named index). Click Save. 8. Name the remaining pages accding to the page s navigation buttons. 9. Enter content in the editable regions. Quick Reference Create the Structure Select Types Selects are names f CSS styles that are applied to all containers with cresponding values. (See bottom of page 2.) Insert Panel The Insert panel allows users to easily insert page elements without having to manually enter code. Dreamweaver automatically generates the HTML. Page 1

2 Create/Insert a Div Container Div tags are used to group and ganize blocks of content. Using CSS, they can be styled to customize the layout of your site without having to change the content. Div tags are usually the very first thing added to a new web page. 1. To insert a div tag from design view, click Insert Div Tag located in the Insert panel. 2. Choose insertion point. Choosing the insertion point determines where the div tag will be placed in the HTML and what content it will modify. Choose Wrap Around Selection to place the div tags around selected content. 3. To give the tag a unique identification, enter a container name in the ID bar (see CSS Selects at bottom of page). 4. To give the tag a general classification, enter a container name in the Class bar (see CSS Selects at bottom of page). 5. Click OK. Paragraph and Header Tags Paragraph and header tags are the standard HTML style tags f fmatting text. 1. Place curs in the container select the content to style. 2. In the Properties inspect, under Fmat, select Paragraph to give the text standard paragraph fm. Select one of the head tags to style headers. The header hierarchy decreases with increasing number (i.e. Header 1 is the highest der). Add Hyperlink 1. Select the text to convert to a hyperlink. 2. Click Hyperlink in the Insert panel. 3. In the Hyperlink window, enter the URL. (See Add Anch in next column.) Add Link links create clickable addresses. 1. Select the text to convert to a hyperlink. 2. Click Link in the in the Insert panel. 3. In the Link window, enter the address. Add Anchs Anchs are hyperlinks that jump to a different spot on the same web page. 1. Place curs and click in the editable content region to select a destination. 2. Click Anch located in the Insert panel. 3. Name the anch and 4. Highlight the object text to link to the anch. 5. In the Properties Inspect, under Link, click and drag crosshair to the anch icon and release. Add a Table Tables may also be inserted to ganize icons, pictures, page navigational buttons. 1. Click in the Code Design window to choose insertion point. 2. Click Table in the Insert Bar s Common Tab. 3. Using the entry bars, choose table properties (size, rows, etc.) and Create the Banner 1. Navigate to the banner image in the Files panel. 2. Select the banner image and drag it to the banner container. 3. In the Image Tag Accessibility Attributes window, under Alternate Text, enter the image file name and 4. Place curs inside the banner container and 5. Edit the HTML CSS attributes in the Property inspect. Create Hizontal Navigation (Using undered lists.) 1. In the Properties Inspect, click Undered List. 2. Insert navigation text and press Enter. 3. Repeat step 2 as needed to finish adding banner navigation buttons. 4. Click New CSS Rule in the CSS panel. 5. Choose the <li> tag as the select. Click OK. 6. In the CSS Rule Definition window, set Display to Inline. 7. Specify padding and margin values to space list items. 8. Click OK. Create Page Columns Panel. Change the select type to ID. 2. Name the ID tag (e.g. rightcol) and 3. In the CSS Rule Definition window, under the Box categy, choose a column position under Float (right left). It is impossible to center-float an image. 4. Specify spacing values in the Margin and Padding boxes. 5. Specify column dimensions in the Width and Height boxes. 6. Click Insert Div Tag located in the Insert Bar s Common Tab. 7. In the Insert Div Tag window, select an insertion point option under the Insert bar. 8. Under ID, assign the newly created column ID (e.g. rightcol). Click OK. Style the Page CSS Styles CSS styles determine the fmatting of the HTML content of the web page. Font size, font col, background image, and alignment infmation, etc. can all defined by CSS rules. CSS infmation is either sted at the beginning of the document on a separate style sheet. Examples of a CSS class, ID, and tag rule: What is padding and margin? Padding and margin are defined spacing mechanisms in web publishing. Set padding, margin, and bder to properly space objects (text, graphics, etc.) on a web page. In addition, note that bder is set at a default of zero in Dreamweaver, but it may be adjusted to a larger size. Box Margin Bder Padding Text here Width Page 2

3 Create Style Sheet Complete only once per document. 1. In the Rule Definition bar at the bottom of the window, choose New Style Sheet File. Click OK. 2. In the Save Style Sheet File As window, choose a location to save the style sheet (*.css). Click Save. 3. The CSS Rule Definition window will appear f you to define the style/rule. Note: Creating a style sheet will hide CSS style infmation on the web page. Create a CSS Style/Rule Panel. 2. In the New CSS Rule window, under Select Type, choose Class to apply a CSS rule/style to all tags with that class. To apply a CSS rule/style to a single tag with an ID, choose ID. To apply a CSS rule/style to a specific tag (e.g. <body>), select Tag. Fmat Text Fmatting text depends largely on where the text lies on the web page. Create either a new CSS style double click the CSS style that applies to the text to fmat. 1. Select text to fmat. 2. In the Properties Inspect, click CSS and then click Edit Rule. 3. In the New CSS Rule window, choose Compound under Select Type. CSS Selects 4. Click OK. 5. In the CSS Rule Definition window, in the Type categy, choose text fmatting options (font, col, size, etc.) and Note: Hypertext link col fmat is addressed under Modify Unvisited/Visited Link Styles. Wrap/Float Text Panel. Change the select type to Class. 2. Delete the text in the Name prompt and replace it with a different name (such as floatl floatr). It is impossible to center-float an image. 3. In the CSS Rule Definition window, in the Box categy, under Float, choose Left Right. Click OK. 4. Select page element to apply style. 5. In the Properties Inspect, in the Class drop-down menu, choose the class (e.g. floatl floatr). Add Headings Headings increase the probability of your web pages appearing as search results in web search engines. They also aid page ganization as a viable replacement f bold text. Befe beginning, make sure the text to be changed to a heading is contained within its own paragraph <p> tags. (Click Code in the document toolbar to check f <p> tags in the HTML viewer.) 1. Highlight selected text. 2. Choose heading type in the Properties Inspect under the Fmat drop menu. Modify Unvisited/Visited Link Styles By default, unvisited links appear blue and underlined. Visited links are purple. To change this option, follow these steps: Panel. 2. In the Select Type drop down menu, select Compound. 3. In the Select Name bar, type a:link and 4. In the CSS Rule Definition window, in the Type categy, under Decation, check None. 5. Under Col, choose a col. 6. Choose any additional options (font, size, etc). Click OK. To modify visited link styles, repeat steps, replacing :link in step 3 with :visited. Templates and Content Create an Editable Region Ctr-Alt-V Creating editable regions will preserve the layout and styling while allowing you to change the container content. 1. Select the region to convert. 2. Select Insert, then Template Objects, then Editable Region. Select Template Arrow and select Editable Region located in the Insert Bar s Common Tab. 3. A Dreamweaver window will appear, alerting the conversion of the document to a template. Click OK. 4. Name the region and 5. Insert web page content into the tealcoled box. Save as Template With an established template f a web site you can create new pages from the same template to maintain a consistent layout. 1. Select File Save as Template. 2. Specify a name in the Save As prompt and click Save. If prompted, click Yes to update links. Link Pages In the Same Site (Relative) 1. Select the template file name tab (the.dwt file located in the document toolbar.) 2. Click on a navigation image. 3. In the Properties Inspect, under Link, click and drag the crosshair over the file name to link (located in the Local Files list in the Files Panel). Repeat as necessary. 4. To create a hypertext link (clickable text Container tagname #identifier.classname tagname.classname Purpose Styles all tags that are named tagname Styles all tags with ID of identifier Styles all tags that have class attribute with the value of classname Styles only tags named tagname with the class attribute classname Page 3

4 with a link), highlight text and repeat step 3. Link to a Different Site When linking to a web site outside your own, include the prefix in the address. 1. Select the text image from which to create the link. 2. In the Link bar in the Properties Inspect, enter the web address of the link. Link a Downloadable File Files can be linked from the web site s root folder so users can quickly access and download files from the web site. Be aware that image files, PDFs, and other web files (like html, xhtml, and xml) will not download but rather open in a new browser window tab. 1. Select a file name tab, located in the document toolbar (usually a file ending in.html). 2. In the page s editable region, type in the name of the downloadable file. 3. Highlight the text that will link to the downloadable file when clicked. 4. Click the file icon located next to the Link drop-down menu in the Properties Inspect. 5. Navigate to the file to link and 6. A Dreamweaver window will open and prompt you to copy the file to the root folder. 7. Click Yes, then click Save. Add an Image 1. After preparing image files f the web, place them in the root folder. 2. Click Image in the Common categy of the Insert panel. 3. Browse and select image in the Select Image Source window. Click OK. 4. A Dreamweaver window will appear prompting you to enter accessibility attributes. Click OK to continue. F consistency, place tags around images befe after inserting them. 5. Select the image. 6. Click Insert Div Tag located in the Insert Bar s Common Tab. 7. In the Insert Div Tag window, select Wrap Around Selection under the Insert bar. 8. Specify Class ID names and Center Image Place separate tags around image befe fmatting. 1. Click inside the container. 2. In the Properties Inspect, click the CSS button. 3. Click the Center icon. Common CSS Styles CSS Styles Purpose Example background Define background col image display Inline: The element will not break the flow. (No line break befe after the element). Block: A block-display element will span the full width of the space available to it. The flow will continue on a new line after the block-display element. None: The element will be completely hidden; no box will be generated. width Sets the width of an element float Floats an element in a direction (left, right, none, inherit) padding/ margin Defines padding/margin values to properly space text, graphics, containers, other objects. Page 4

5 4. In the New CSS Rule window, choose ID ( Class) under Select Type and name the select. 5. Click OK. Modify Page Background 1. Click the <body> tag in the Status Bar. 2. Select the CSS icon from the Properties Inspect. 3. Click Edit Rule. 4. Under Select Type choose Tag and 5. Select the Background from the categy list. 6. Use the entry bars to select a background col image and Create Rollover Images 1. Select a container to insert images. 2. Select Insert Image Objects, then Rollover Images. 3. In the Insert Rollover Image window, name the image in the Image Name bar. 4. In the Original Image and Rollover Image bars, browse and select your images. 5. To create a link to another web site, enter a web address in the Go to URL bar. 6. Click OK. Impt Wd Files 1. Click in an editable content region. 2. Select File, then Impt, then Wd Document. Navigate to the file. 3. In the Insert Document window, select Text with Structure. 4. Make sure the Clean Wd Paragraph Spacing box is checked. 5. Click Open. Drag the file from the Files Panel to the editing window. Add Accessibility Alt Tags Accessibility tags appear when a curs hovers over a hyperlink. 1. Place curs over the hyperlink and click. 2. In the Properties Inspect, click the HTML button. 3. In the Title bar, enter in the name of the hyperlink. Keyboard Shtcuts Documents & Panels Next Document Previous Document Behavis Bindings Components CSS Styles Databases Frames Histy Properties Reference Server Behavis Snippets Server Behavis Snippets Show/Hide Panels Tag Inspect Assets Code Inspect AP Elements (Layers) Results Tag Inspect Shift+C Ctrl-Shift-Tab Shift-F4 Ctrl-F10 Ctrl-F7 Shift-F11 Ctrl-Shift-F10 Shift-F2 Shift-F10 Ctrl-F3 Shift-F1 Ctrl-F9 Shift-F9 Ctrl-F9 Shift-F9 F4 F9 F11 F10 Files, F8 F2 F7 F9 View Toggle Views Refresh Design View Live View Insert Non-Breaking Space Line Break Image Table Modify Quick Tag Edit Show Code Navigat Ctrl-` F5 Alt-F11 Ctrl-Shift-Space Shift-Return Ctrl-Alt-I Ctrl-Atl-T Ctrl-T Ctrl-Alt-Click Tables Insert Row Ctrl-M Insert Column Ctrl-Shift-A Delete Row Ctrl-Shift-M Delete Column Ctrl-Shift-hyphen (-) Merge Selected Cells Ctrl-Alt-M Links Make Link Remove Link Ctrl-L Ctrl-Shift-L Text Fmatting None Ctrl-0 Heading 1 Ctrl-1 Heading 2 Ctrl-2 Heading 3 Ctrl-3 Heading 4 Ctrl-4 Heading 5 Ctrl-5 Heading 6 Ctrl-6 Paragraph Ctrl-Shift-P 4. Left Ctrl-Alt-Shift-L Center Ctrl-Alt-Shift-C Right Ctrl-Alt-Shift-R Justify Ctrl-Alt-Shift-J Text Indent Ctrl-Alt+] Text Outdent Ctrl-Alt+[ Questions? Go to to find me resources f Adobe Dreamweaver to schedule your next Dreamweaver class. Page 5

6 Common HTML Tags HTML Tag Name Purpose EXAMPLE <div> Div Organize content and web page elements <h1> Header Styles heading text hierarchically <ul> Undered list Defines an undered list (bullets) of list items <li> <ol> Ordered list Defines an dered list (numerals) of list items <li> <p> Paragraph Styles text in paragraph fmat <a> Hyperlink Add a clickable hyperlink text anch. <img /> Image Embeds (links) an image in an HTML page <span> Span A me versitle select f applying CSS styles to parts of a document text. Page 6