Short Course Module: (Adobe Dreamweaver Cs4)

FAKULTI TEKNOLOGI MAKLUMAT DAN KOMUNIKASI UNIVERSITI TENIKAL MALAYSIA MELAKA
[UNIVERSITI TEKNIKAL MALAYSIA MELAKA]
SHORT COURSE MODULE

[ADOBE DREAMWEAVER CS4]
KURSUS AMALAN KEJURUTERAAN
[2011]
PREPARED BY, NORAZLIN MOHAMMED FARAH NADIA AZMAN
[UNIVERSITI TEKNIKAL MALAYSIA MELAKA]
Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver
ADOBE DREAMWEAVER CS4

May
2011
Dreamweaver CS4 is the industry-leading web development tool, enabling users to efficiently design, develop and maintain standards-based websites and applications. With Dreamweaver CS4, web developers go from start to finish, creating and maintaining basic websites to advanced applications that support best practices and the latest technologies. This course is for people new to web design and development and want to use Dreamweaver CS4 to build intuitive, attractive and accessible websites.
KURSUS AMALAN KEJURUTERAAN
ii
CONTENT
CHAPTER 1 INTRODUCTION
1
CHAPTER 2
DOCUMENT MANAGEMENT
CHAPTER 3
TEXT AND IMAGES
12
CHAPTER 4
ESTABLISHING WEB LINKS
14
CHAPTER 5
DESIGNING WITH DIVISIONS
21
CHAPTER 6
DESIGNING WITH TABLES
28
CHAPTER 7
CREATING FORMS
36
CHAPTER 8
BEHAVIORS
46
CHAPTER 9
CASCADING STYLE SHEET (CSS)
55
iii
INTRODUCTION TO WWW AND WEB The WWW is not the Internet. It is an application to share and access Web documents on top of the Internet. Other applications in www are email, FTP, newsgroups, instant messaging, etc. WWW uses Hyper Text Transfer Protocol (HTTP) to transmit data. Web documents (Web pages) are formatted in Hyper Text Markup Language (HTML).
HOW WEB SITES WORK When you type in a URL or IP address, you are connecting to a remote computer (referred to as a server) and downloading the documents, images, and resources necessary to reconstruct the pages you will view at that site. Web pages arent delivered as a finished product; your web browser (Internet Explorer, Firefox, Safari, and so on) is responsible for reconstructing and formatting the pages based on the HTML code included in the pages. HTML (Hypertext Markup Language) is a simple, tag-based language that instructs your browser how and where to insert and format pictures, text, and media files. Web pages are written in HTML, and Dreamweaver builds HTML for you behind the scenes as you construct your page in the Design view. An Internet Service Provider (ISP) enables you to connect to the Internet. You view web pages over an Internet connection using a browser, such as Internet Explorer, Firefox, or Safari. A browser can decipher and display web pages and their content, including images, text, and video.
DOMAIN NAMES AND IP ADRESSESS When you type in a web site address, you usually enter the web sites domain name (such as eBay.com). The web site owner purchased this domain name and uses it to mask an IP address, which is a numerical address used to locate and dial up the pages and files associated with a specific web site. So how does the web know what domains match what IP address (and in turn, which web sites)? It uses a Domain Name Service (DNS) server, which makes connections between domain names and IP addresses.
iv
THE ROLES OF WEB BROWSER A web browser is an application that downloads and displays HTML pages. Every time you request a page by clicking a link or typing in a web site address, you are requesting an HTML page and any fi les it includes. The browsers job is to reconstruct and display that page based on the instructions in the HTML code, which guides the layout and formatting of the text, images, and other assets used in the page. The HTML code works like a set of assembly instructions for the browser to use.
AN INTRODUCTION TO HTML HTML is what makes the Web work; web pages are built using HTML code, which in turn is read and used by your web browser to layout and format text, images, and video on your page. As you design and layout web pages in Design view, Dreamweaver writes the code behind the scenes that is necessary to display and format your page in a web browser. Contrary to what you may think, HTML is not a programming language, but rather a simple text-based markup language. HTML is not proprietary to Dreamweaver you can create and edit HTML in any text editor, even simple applications such as Windows Notepad and Mac OS Xs TextEdit. Dreamweavers job is to give you a visual way to create web pages without having to code by hand. If you like to work with code, however, Dreamweavers Code view, discussed earlier, is a fully featured text editor with color-coding and formatting tools that make it far easier to write and read HTML and other languages.
THE STRUCTURE OF AN HTML DOCUMENT The whole document must have <html> as its root. A document consists of a head and a body or frameset. The <title> tag is used to give the document a title, which is normally displayed in the browsers window title bar (at the top of the display).The <body> tag is used to display all the content in the document window.
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
After completing this chapter, you should be able to: Use the Dreamweaver CS4 workspace properly Identify the common commands in Dreamweaver CS4 Change the preferences for the interface
1.1 Introduction To Dreamweaver

Macromedia Dreamweaver CS4 is the leading Web production tool for both Windows and Macintosh. It is the best WYSIWYG editor on the market for professional Web Developers. Dreamweaver CS4 is considered the standard hypertext markup language (html) editor among web professionals because it can produce highly functional web documents in a short time. Learn all you need to know to use this powerful software to create Web pages and make some of the more cumbersome aspects of HTML easy. Other web hypertext and software, such as JavaScripts, ActiveX components, Java Applets, and Flash movies, are easily incorporated into web pages with a few clicks. With Dreamweaver CS4, the user can work either directly with html code or in a graphic editing environment that functions like a word processing program (e.g., MS-Word). Although Dreamweaver CS4can accomplish many difficult tasks, such as writing Cascading Style Sheets (CSS), it is relatively easy to use. Dreamweaver CS4 offers all the tools and features a Web application producer needs to create dynamic and useful Web pages.
1.2 Dreamweaver Workspace

This section will show you a brief overview of the Dreamweaver CS4 workspace including the locations of all the common elements in the program. Dreamweaver allows you to rearrange all the elements by dragging and dropping the panels within the workspace. The Dreamweaver workspace has five main sections.
Document Window (main area) Menu Bars Insert Panel (across top) Property Inspector (on bottom) Panel Groups (on right)
1. Document Window is the design surface of your document; it is where all the elements that make up your document are inserted. The document window can display the content of your document in three possible views. Design view: The document window displays your document as it will look when displayed in a web browser. The Design view allows you to work with the visual editor. It's the predetermined view of Dreamweaver and the one that is used most of the time.
Code view: The document window displays the HTML markup and any serverside code that makes up your document.
Split view: The document window displays Design view and Code view as two panes with a horizontal resize handle to adjust the size of each panel.
The document toolbar contains icons to execute in an immediate form some other habitual operations that the standard toolbar doesn't include. These operations are for example changing the view of the document, preview, etc.
2. Menu Bars allows you to create and access numerous global functions, tools and commands that make the application user-friendly.
Below are lists the function and uses of the tools on the Main Menu Bar. Menus Functions File File menu is a global menu through which you can create, open, save and preview your web page or website. Edit The selection and searching can be done using the Edit menu. View You can view different views of your document, various page elements and tools that are used by Dreamweaver MX. Insert The Insert menu provides methods to insert objects in your document. Modify You can change the settings of the page using the Modify menu.
Format Commands
Site Window Help
To manipulate text attributes and alignment, Format menu is used. The Commend menu provides various commands such as: you can create web photo album, Clean Up HTML, Drop Down Menu Builder for IE and so on. The websites can be created, opened, and edited using the Site menu option. You can also manage the current site. You can access all the panels, inspectors, styles and so on using the Window menu. The Help menu provides the various help topics such as help on Whats New, Dreamweaver, Extension, Support Centre, Registration and so on.
3. Insert Panel is used to insert elements into your document. It contains categorized tabs, each containing a collection of icons relevant to the tabs category. By positioning the mouse pointer at a specific location on the documents design surface and clicking an icon in the Insert bar, the associated element can be easily inserted into the document at that location. The Common tab of the Insert contains icons that can be used to insert many commonly used elements.
Icons from left to right are:

Hyperlink: Inserts a link to another page. Email Link: Inserts a mailto: link. Named Anchor: Inserts an anchor link. Insert Table: Inserts an HTML table <table> tag. Draw Layer: Allows you to draw a layer on the document surface. The end result is an absolutely positioned <div> tag with the width and height corresponding to what you drew. Image: Inserts an image <img> tag. Image Placeholder: Inserts a blank image. Fireworks HTML: Inserts HTML from a page created with Macromedia Fireworks. Flash: Allows you to insert Flash elements into a web page. Rollover Image: Inserts the code to create an image that changes when the mouse pointer moves over it. Navigation Bar: Inserts a navigation menu. Horizontal Rule: Inserts an <hr> tag. Date: Inserts the current date. Tabular Data: Inserts tabular data from external files. Comments: Inserts an HTML comment.
Tag Chooser: Opens the Tag Chooser to allow selection of tags not present in the Insert bar.
4. Property Inspector is a very handy tool that allows you to change attributes on most HTML tags in a very efficient manner. It constantly changes its contents to suit the currently selected element in your document. If you select a block of text, the Property inspector will display fields and buttons that allow you to change the attributes of the selected element such as color, font, and other attributes.. If you select a table, the Property inspector will display fields that directly relate to the <table> tag such as cell spacing and cell padding. You will quickly discover that the Property inspector is probably the most useful element of the Dreamweaver interface.
5. Panel Groups includes a number of roll-up panels, each performing a very specific function:
The "CSS Styles" panel allows the developer to add, edit and delete CSS and HTML styles, and add "behaviors" (ready-to-use JavaScript code snippets) to an HTML document. The "Tag Inspector" panel provides a handy HTML code inspector that allows you quick access to any section of your HTML document, and also provides you with reference material in case you forget the difference between a <tr> and a <td>. The "Snippets" panel provides you with reusable objects that can be bound to your application, and used to reduce the time you spend on code development. The "Files" panel provides you with a convenient file manager to view, edit and manipulate files, on both a local or remote server.
After completing this chapter, you should be able to: Set up a Dreamweaver project file Open an existing HTML document Create and save blank page from scratch
2.1 Setting Up Your Project Files

The local "root" folder of your Dreamweaver site is often the main or top-level folder for your website. You must define a Dreamweaver local folder for each new website you create. This folder stores and organizes the files used in your website. If you don't define a local folder, certain features in Dreamweaver cannot work properly. 1. Open Adobe Dreamweaver CS4. If you have not previously opened Dreamweaver CS4, you'll want to fi ll in the registration screen. Copy the KursusDW folder from into your hard drive. 2. From the menu, go to Site>New Site and click on the Advance tab in the upper-left corner. 3. Make sure the Local Info is selected and then type in your website name in the Site Name textfield. 4. For Local Root Folder field, click the folder icon and browse for the KursusDW folder.Click Open>Select.
5. Click OK. Now, the Site tab allows you to easily access a visual representation of your files.
2.2 Creating and Saving a New Document

When you start Dreamweaver, a new blank page is already opened automatically in the Document window. To start developing new web pages, you may create your own document from scratch. 1. From the menu, choose. Choose File > New. In the New Document dialog box, from the first column, choose Blank Page. In the Page Type column, select HTML. Dreamweaver allows you to create a wide range of page types. HTML is the page type commonly used for building basic web pages.
2. Click Create. A new, blank document will appear. 3. In the Document panels Title text field, type Yourname Site. Press Enter.
4. To save this document, click Go to File>Save. Save it as yourname.html. Try opening this document in a browser outside Dreamweaver. You will notice the title appears in the browser title bar and the file name appears in the address bar.
10
5. Save your file.
11
After completing this chapter, you should be able to: Add texts and images into a document Modify the HTML page property Format texts using the Property Inspector.
3.1
Inserting Text and Images
You are going to create a simple basic HTML page with text and images. 1. Reopen the previous webpage you saved. Click in the page where you want to add text. Type the text you want. 2. Click in the line you want to change. Choose Format > Paragraph Format >Heading x, where x is the heading size you want.The text changes to the heading you selected.
3. Click to place the insertion point in the document where you want the image to appear. In the Common category of the Insert panel, click the Images button.The
12
Images button is actually a pop-up menu that allows you to add a variety of image types. 4. Or Choose Insert > Image, or Drag the icon of an image file from the Windows desktop into your document. The Select Image Source dialog appears.By default, the dialog will be set to the images folder of your local site folder. In the dialog, navigate to and select the file that you want to insert. 5. A preview of the image appears in the Select Image Source dialog, with information below the image including the images size in pixels, its graphic format, its file size, and the estimated time for the file to download. 6. Click OK. The Image Tag Accessibility Attributes dialog appears D. This is the dialog you use to add alternate text. In the Alternate text text box, type the alternate text you want to use for the image. 7. Click OK.The image appears on your page.
13
After completing this chapter, you should be able to: Linking to external and internal web pages. Create names anchors. Insert image maps.
HYPERLINK A hyperlink or link, is an object or text that, when clicked, takes the users to another webpage or opens a file. The various types of hyperlinks are explained below. INTERNAL LINKS Internal links are used to connect users to other pages within the same website. Before linking to other pages, you must make sure that the other pages. EXTERNAL LINKS External links are used to connect the users to pages from other websites. LINKS TO FILES Sometimes you may need to link a file such as a PDF, a Word document, or a PowerPoint presentation. When the user clicks the hyperlink, the files will either automatically open up in its original program, or the browser will prompt the user to save the file on their hard drive. BASIC EMAIL LINK E-mail links are links that will automatically open the user's default email program with a blank e-mail addressed to the specified e-mail link.
4.1
Inserting Hyperlinks
For this exercise you will learn the basic and alternate ways to create links in your HTML page. You will create links with texts and images.. 1. Reopen your previous webpage. Type down these texts a shown below. Select the text on the page to be the link. In the Link text field for the Property Inspector, type in http://www.utem.edu.my/. Press Enter. You have just created a hyperlink to an external site.
14
2. Select another text on the page to be the link. In the HTML tab of the Property Inspector, click the Point to File icon immediately to the right of the Link field. An arrow appears and that arrow can bedragged into the Files panel. Drag it to the file you want, and release the mouse. 3. Or in the Property Inspector, click the Browse for File icon, which looks like a folder, to the right of the Link field. The Select File dialog appears. Choose the file you want and click OK.
15
4. A relative link is a linked document within the same site. Try creating an image link using the same method.
4.2 Inserting Named Anchor

Normally, when a new Web page is displayed, it does so showing the very top of a page. Adding an anchor to a link allows you to display the page starting at a given point on a page. To use an anchor, youll need to create at least two things: the anchor itself and then the link to that anchor. 1. Insert a large amount of text into the same HTML document. Click in the spot in the file where you want the named anchor to be. For this lesson, place the cursor under the banner or heading. 2. In the Common category of the Insert panel, click the Named Anchor button, and the Named Anchor dialog appears.Choose a name for the anchor that willbe unique for this page. Remember that this anchor is going to be part of a URL,so it can only contain characters that are valid: no spaces, ampersands, question marks, etc. Click OK.
16
3. In the spot where you created the new anchor, an anchor icon appears. If you click that anchor, the tag selector will show the anchor with its name, and the Property Inspector will allow you to modify the name 4. Select the bottom text on the page to be the link. Drag the Point to File icon to the Named Anchor icon on the page. The selected text is now linked to the new anchor.
17
4.3 Creating Image Maps

Its easy to add a link to an image; just select the image and use the Link text box in the Property Inspector to define the links destination. But what if you want different parts of an image to link to different pages? Youll need an image map. With an image map, you can define areas of the image as hotspots, and each hotspot has its own link. 1. Insert this image into your webpage. Select it to turn into an image map. In the Map text box of the Property Inspector, enter a name for the image map.The name cannot begin with a number and can only contain letters, numbers, and the underscore character.
18
2. Use the Rectangle, Circle, or Polygon tool to draw a hotspot over part of your image. The tool you use depends on the shape of the area that you want to make into a hotspot. 3. Dreamweaver shows the hotspot as a light blue area overlaid on your image. The blue highlighting wontshow up on your Web pages.When a hotspot is selected, the Property Inspector shows properties for the hotspot. Use the Link field to attach a link to the hotspot. Enter the alternate text for the hotspotin the Alt field.
19
4. Repeat the previous steps for each of the other areas on the image you want to turn into hotspots.
20
After completing this chapter, you should be able to: Draw basic AP Div in Dreamweaver Add content and change the division properties.
5.1 Site Layout with Divisions

Absolute Position Divisions (div) are squares that can be placed wherever you want in a HTML page, you can insert HTML content in them. Those divs can be hidden and overlapped between them. This gives you variety to design. Divs can be moved from their positions by just clicking on the white square, and whilst keeping the mouse depressed dragging it to the new position. They can also be resized by clicking on the black squares and dragging them until the size you want is reached.
Every site or blog contains similar HTML basic body structure. All sites roughly contain the following sections to their coding: Header, Navigation, Main Content, Sidebar, and Footer. If you break down any site to its core, you will begin to see the structure are almost the same. Its the graphics, styling, and implementation of that structure that makes the website/blog all unique. Some examples here: http://www.1malaysia.com.my http://www.headfirstlabs.com http://www.burairah.com http://www.ifarah.co.tv
21
Header Usually comprises of big pictures, graphics, or a logo of your site. This part is what most people like to exaggerate on as its usually very appealing. Navigation The navigation part of your site. Your main links that will help navigate your audience through your site. Main Content The content section is usually where your main area will be that holds your content, posts, galleries and such forth. Sidebar Although not really a necessity (its been a popular thing throughout many blogs), it contains additional information that may appeal to the user or even additional navigation items. (i.e Twitter Feed, Subscribe links, Search, Chatbox etc) Footer And finally, the footer is usually the place where the copyright is held although lately its been a trend where footers begin to hold extra information like recent posts, affiliates, short bios, footer links and the list goes on. The <div> tag defines a division or a section in an HTML document. It is often used to group block-elements to format them with styles. You can separate the sections of your website using the <div> tag. 1. To do this, create a new HTML document and save it as mylayout.html. file located in the KursusDW folder in Dreamweaver. You will get a blank page. In the Insert>Layout tab, click the Draw AP Div icon, draw a div as shown below. In the Property Inspector, rename it as header.
22
2. Using the same method, draw another four divs as shown below.
23
3. Open the AP Elements panel.You can adjust its stacking order and rename layers here.
4. Now, place a cursor in a div tag and insert your content. Repeat this step for the remaining divs.
24
5. To style a div, select a particular div and click Add Property in the CSS Styles panel.
6. Choose a property youd like to change. You can always use this panel to monitor the styles you applied to your HTML tags.
25
7. Or select a particular div, then right click and click New CSS Rule icon in the CSS Styles panel.
8. The New CSS Rule dialog appears and click OK.
26
9. The CSS Rule definition dialog appears. Set properties in the eight categories as desired. Which category contains which field is covered in Dreamweaver CSS Categories, next. If you want to see how something looks without dismissing the dialog, click Apply. Click OK, and the new rule takes effect.
10. Save your file.
27
After completing this chapter, you should be able to: Learn how to create tables and to control the layout of your pages. Modify the table properties, including border, background, spacing, color, alignment and size.
WHY USE TABLES? Tables help you divide the space on your page. They are similar to tables in Word or Excel but can be used in much more flexible ways. Tables give you the option of making your page a fixed size or making it fit to the user's window the best it can. Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.
6.1
HANDS-ON EXERCISES
6.1.1
Creating and Modifying Table
You can create a table from the ground up using Dreamweavers Insert Table command. 1. File > New > Blank Page > HTML > Create 2. To create table, go to your toolbar and click Insert > Table.
28
3. You will have a window open like this. Choose: Rows : 6 Column : 3 Table width : 100 percent Border: 0 Cell padding: 0 Cell spacing: 0
29
4. You should now have this:
5. Fill the table as below:
6.1.2
Resizing and Laying Out Tables
1. Click on your table and you will see your table width at the Properties panel at the bottom of the page.
2. Change the width to 50 percent. You can also change from percent to pixel.
3. When you create a table, by default it is aligned to the left, to center it go to your properties panel and choose Center.
30
4. Change the cell Horizontal and Vertical to center. To change these go to your properties panel and change the Horz: Center, Vert: Midle.
6.1.3
Colouring a table
1. Change the border thickness to 3 pixel and border color to dark blue: #330066
2. Change the table background color as below: Row 1 & 6 : color #000066 Row 2 5: color #00CCFF
31
3. Change the text color of the table heading to white.
6.1.4
Inserting New Rows and Column in a table
1. Insert new column at beginning of the table. Click on first column of the table and then right click mouse. Choose Table > Insert Column. 2. Merge the new column. Click on the new column and then right click mouse. Choose Table > Merge Cells.
6.1.5
Using Images in Tables
1. Click on the new column. 2. Click menu Insert > Image or click image icon as below.
32
3. Choose file equatorial.jpeg from folder PartB/ Lab1 / Sources and click OK.
4. Click YES to save the image file into your document folder. Name the file and click OK. 5. Type Equatorial Hotel for the alt text for the image. Click OK.
33
6. Save the file as table.html and preview in browser. Save > File > Preview in Browser. The output is as below:
34
6.2 EXERCISES
1. Use the sources from folder Part B/Lab1 / exercise to create the file. 2. By using table, create basic header navigation as shown below:
3. The width for the table is 80 percent. Save the file as header.html and preview in browser.
35
After completing this chapter, you should be able to: Create a form on a web page Divide form content into groups Create accessible forms Add widget into the form
WHY USE FORM? HTML forms are commonly used for questionnaires, hotel reservations, order forms, data entry, and a variety of other applications. Users provide information by entering text, selecting menu items, and so on, and then submit that information to you through a server. An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, and menus, for example), and labels on those controls. The form is completed when a user modifies its controls (by entering text and selecting menu items), and submits the form to an agent for processing. You can add these controls, commonly called fields, to a page in Dreamweaver, but when the users click the Submit button, their browser wont know what to do with the information theyve entered. To identify this information as part of a package, and to specify the route that information should take when submitted, you need to create a Dreamweaver form.
7.1
HANDS-ON EXERCISES
7.1.1
Creating Forms
1. File > New > Blank Page > HTML > Create 2. Go to Form panel by clicking Forms menu
36
3. This is form components.
4. Insert form by clicking
Red dotted lines indicate the area occupied by the form
5. Place the insertion point into the form and choose Insert > Table. Set the table to 3 rows and 1 column. The table width should be 90 percent. Set the border to 0, cellpadding to 0, and cell spacing to 10. 6. Select the table and choose Center from the Align menu on the property inspector. 7. Place the insertion point in the first row of the table you created. In the forms category of the Insert bar, click the Fieldset button. 8. The Fieldset dialog box opens. Type Contact Information in the Legend textfield. Click OK.
37
9. Repeat steps 7 8 for: Second row : Questionaire Third row : Send Your Answer
10. Save the file as form.html and preview in the browser. 11. Position your cursor inside Contact Information Fieldset and click on the Text Field object in the Form panel. This insert blank text field onto your page.
12. The input Tag Accessibility Attribute dialog box opens. Type name: in the ID text field. Type Name: in the Label text field. In the Style section, select Wrap with label tag. In the Position section, select Before form item. Leave the Access key and Tab index text fields blank.
13. In the TextField field in the Property Inspector, Enter Char Width: 35. 38
14. Place a new paragraph. Repeat steps 11-13 to insert TextField for Email. 15. Position your cursor inside Questionaire Fieldset and click on the Textarea object page. 16. The input Tag Accessibility Attribute dialog box opens. Type comment in the ID text field. Type Your Comment : in the Label text field. In the Style section, select Wrap with label tag. In the Position section, select Before form item. Leave the Access key and Tab index text fields blank. in the Form panel. This insert blank multi lines text fields onto your
17. Click on the Textarea object. In the Property Inspector, Choose Type: Multi line, set Num Lines: 4, and set Char Width: 40. 18. Place a new paragraph. Click on the List/ Menu object in the Form Panel of
the Insert bar. This insert create a scrolling list gives you the option to allow users to make multiple contiguous or noncontiguous selections. 19. The input Tag Accessibility Attribute dialog box opens. Type select in the ID text field. Type Your Comment Is About: in the Label text field. In the Style section, select Wrap with label tag. In the Position section, select Before form item. Leave the Access key and Tab index text fields blank.
20. Click on the List/Menu object. In the Property Inspector, enter the word select in the List/Menu field. Choose Type: Menu.
39
21. Click List Value in the Property Inspector. In the Item Label Field, type Site Content and then press Tab. In the value field type content. 22. Press Tab or click the plus sign (+) in the upper-left area of the dialog box to add another option to the menu. (Use the minus sign (-) to delete items from the List Values box). 23. Repeat steps 22 -23 to add: Item Label field Site Design Technical Problem Request For More Information None of Above Value field design technical information none
24. Click OK to close the dialog box. 25. Place a new paragraph. Type Preferred method of contact:. Add a line break after the text by pressing Shift + Enter. 26. Click on the Checkbox object in the Form Panel of the Insert bar.
Checkboxes allow users to choose one or more options in a group of related items 27. The input Tag Accessibility Attribute dialog box opens. Type contact in the ID text field. Type These comments do not require a reply in the Label text field. In the Style section, select Wrap with label tag. In the Position section, select After form item.
40
Leave the Access key and Tab index text fields blank.
28. Click on the checkbox object. In the Property Inspector, type noreply in the Checked Value textfield, 29. Add a line break. 30. Repeat steps 26 29 to add checkboxes for: Label Contact me by email Contact me by phone Checkbox ID contact contact Checked Value email phone
31. Place a new paragraph. Type Are You Member of NHL?. Add a line break after the text by pressing Shift + Enter. 32. Click on the Radio button object in the Form Panel of the Insert bar. Radio
buttons are a group of options. Selecting one option automatically deselects all other options. 33. The input Tag Accessibility Attribute dialog box opens. Type member in the ID text field. Type Yes in the Label text field. In the Style section, select Wrap with label tag. In the Position section, select After form item. Leave the Access key and Tab index text fields blank.
34. Click on the Radio Button object. In the Property Inspector, type yes in the Checked Value textfield, 35. Add a line break. 36. Repeat steps 32 34 to add Radio Button for: Label No Radio Button ID member Checked Value no
41
37. Position your cursor inside Send Your Feedback FieldSet. Click the Button object in the Insert bar. There are two types of button. One is to send the form
data (Submit) and one to clear the form (Reset). The Submit button tells the browser to send the data and the Reset button clears all the information from the fields on the page. 38. The input Tag Accessibility Attribute dialog box opens. Leave the Label text field blank Leave the Label text field blank Select No Label tag in the Style area. Leave the Position options as they are Leave the remaining fields blank. Click OK.
39. Click on first Button object. In the Property Inspector, enter the word Submit in the Button name text field. In the button Value text field type Submit Form and Choose Submit form from the Action options. 40. Position the insertion point to the right of the Submit button. Click the Button object in the Insert bar and repeat step 38 to set the accessibility attributes to the same value that was used for the Submit button. 41. Click on second Button object. In the Property Inspector, enter the word Reset in the Button name text field. In the button Value text field type Clear Form and Choose Reset form from the Action options. 42. Save as form.html and test it in the browser. 43. You should have this:
42
7.1.2
Building a Jump Menu
A jump menu is a menu that contains link to other pages in your site or to other Web sites. Similar to regular links, the jump menu can link to any type of file, including graphics of PDF files. The jump menu provides an easy-to-use interface for linking to pages in your site, if you dont make the list too long. A jump menu, which is embedded in a form, looks like a menu list in the browser. It does not need an action or method because the jump menu doesnt cause data to be sent, received, or processed. 1. File > New > Blank Page > HTML > Create 2. Go to Form panel by clicking Forms menu 3. Insert form by clicking
Red dotted lines indicate the area occupied by the form 43
4. Place the insertion point into the form and choose Jump Menu object 5. The Insert Jump Menu dialog box opens. Follow as below:
6. Click OK. 7. Save the file as jump_menu.html and preview in browser.
7.2
EXERCISES
1. Open header.html file. Add link to HOME text to jump_menu.html. 2. Add header into: (Use header.html as a header). Jump_menu.html file
44
form.html file
table.html file
45
After completing this chapter, you should be able to: Add user interactivity to your pages by using behaviors Create status bar message Open a new browser window Open a new pop-up menu Form validation
WHY USE BEHAVIORS? You can use the built-in behaviors to enhance the look, functionality, and appeal of your website. You can attach these behaviors to elements on your web pages without having to know JavaScript. Behaviors place JavaScript code in documents so that visitors can change a web page in various ways or initiate certain tasks. A behavior is a combination of an event and an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action. Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.You can write your own actions if you are proficient in JavaScript.
8.1
HANDS-ON EXERCISES
8.1.1
Creating Swap Image
1. File > New > Blank Page > HTML > Create 2. Create table with: Rows : 2 Column : 1 Table width : 700 pixel Border: 0
46
3. Insert banner.jpg from folder Part B/Lab3/button into the first row of the table. 4. Split the second row into 5 column. Change the table background color to #FFD409. 5. Insert images form folder Part B/Lab3/button into the second row of the table as below: COLUMN 1 2 3 4 6. You Should now have this: IMAGES home.jpg general.jpg registration.jpg contact.jpg
7. Click on HOME image and go to Behaviors panel. Click the plus sign (+) button and go down and click Swap Image.
47
8. Now Click Browse and choose the image you want to swap it with which is HOME1.jpg from folder PartB/Lab3/button. Now Click Ok.
9. Repeat steps 7-8 for CONTACT image. Choose contact1.jpg to swap with this image. 10. Save the file as header.html and preview in browser.
48
8.1.2
Creating a Set Text of Status Bar
The status bar is located at the bottom of a browser window that can display text in addition to what is on the web page. Using the Set Text of Status Bar behavior, you can display any text that you want in the status bar of the browser window. 1. Continue from the previous exercise. 2. Click on HOME image and go to Behaviors panel. Click the plus sign (+) button and go down and click Set Text > Set Text Of Status Bar. 3. Type Go To Main Page in Message text field. Click OK.
4. Repeat steps 2 3 for: IMAGE GENERAL MESSAGE Go To General Information About The Conference REGISTRATION CONTACT 5. Save the file and preview in browser. 6. You should now have this: Go To Registration Page Go to Contact Page
49
When mouse rollover to home button, the status bar will appear text Go To Main Page.
8.1.3
Validating Forms with Behaviors
1. Continue from previous exercise. Save as the file as registration.html. 2. Use your own creativity to create registration form as below.
50
3. Click on submit button and go to Behaviors panel. Click the plus sign (+) button and go down and click Validate Form. 4. Select what field you don't want to be blank then tick "Required" and choose what you accept as below: TEXT FIELD name email phone VALUE Required Required Required ACCEPT Anything Email Address Number
51
5. Click OK. Save the file and preview in browser.
8.1.4
Opening a New Browser Window
1. Continue from previous exercise. 2. Highlight the text Please review our FAQ. 3. In the Property Inspector, enter a # in the Link field and press enter. 4. Go to Behaviors panel. Click the plus sign (+) button and go down and click Open Browser Window. 5. Click Browse and browse to faq.html. Click OK. This is the HTML file that will be displayed in the new window. Next, specify the size of new browser window which is 500 x 400. Leave the attributes and type FAQ in Window name text field. Click OK.
6. Save the file and preview in browser. 7. You should now have this:
52
By clicking the hypertext will open new browser window
8.1.5
Opening a Popup Message
1. Continue from previous exercise. 2. Click on reset button and go to Behaviors panel. Click the plus sign (+) button and go down and click Popup Message. 3. Type Are You Sure To Reset The Form in the message text field in the dialog box. Click OK.
53
4. Save the file and preview in browser. 5. You should now have this:
By clicking the reset button will open a popup message
54
After completing this chapter, you should be able to: Introduce and familiarize with some of the basics of CSS Understand about the different type of styles and when would use each Learn how to create embedded and external style sheet
WHY USE CSS? Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content in a web page. They are very useful for maintaining a web site since its appearance (controlled by properties of HTML tags) can be managed from just one file. CSS Styles also enhance your site's look, accessibility and reduces file size. Another main advantage is reusability - instead of defining the properties of fonts, backgrounds, borders, bullets, uniform tags, etc. each time you use them you can just assign the corresponding css style in the class property. You can store CSS styles directly in each document or, for more control and flexibility, in an external style sheet.
There are 3 types of CSS Styles:
Custom CSS (Class) styles: create a customized style with the set attributes. These class styles can be applied to any tag.
HTML Tag styles: redefine the formatting for a particular tag, such as <h1>. All text formatted with the h1 tag is immediately updated.
Advanced CSS Selector styles: redefine the formatting for: 1. A particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) and pseudo-class styles (for example, a:link, a:hover, a:visited)
55
2. A specific ID attribute (for example, #myStyle applies to all tags that contain the attribute-value pair id="myStyle") "
9.1
HANDS-ON EXERCISES
9.1.1
Redefining HTML With Style Sheets
1. File > Open > sources >Part B > Lab5 > 5.1 > index.html 2. Open CSS Styles panel. Choose Window > CSS Styles. 3. Click the New CSS Style button at the bottom of the panel. The New CSS Style dialog box opens. 4. Choose Tag (Redefine an HTML Tag element). Click the arrow next to the Selector Name option and select h2. Make sure This Document Only is selected for the Define In option. (This means we use Embedded Style Sheet). Click OK.
56
5. Select Font: Verdana, Arial, Helvetica, San Serif and Size: 16 pixels. Choose Style: italic. Change Color to green by clicking on the Color Well (shown above) and selecting your own color or by typing in the value #003300. Click OK.
6. Repeat step 3 to 5 for: Selector: <h1> Select Font: Georgia, "Times New Roman", Times, serif and Size: 24 pixels. Choose Style: Italic, Decoration: Underline. Change Color to green by clicking on the Color Well and selecting your own color or by typing in the value #003300. Click OK.
57
Selector: <p> Select Font: Verdana, Arial, Helvetica, San Serif and Size: 12 pixels. Choose Style: Normal. Change Color to blue by clicking on the Color Well and selecting your own color or by typing in the value #000099. Click OK. Selector: <body> Change Background color to olive by clicking on the Color Well and selecting your own color or by typing in the value #999966. Click OK. 7. Below is the result.
8. Click the Show Code View button to checkout the code.
58
9. Save and Preview this document in browser.
9.1.2
Linking To A Style Sheet
1. File > Open > sources > Part B > Lab5 > 5.2 > lilac.html 2. Open CSS Styles panel. Choose Window > CSS Styles. 3. Click Make Custom Style (class) and enter .title in the Selector Name. Make sure that the Rule Definition option is set to (New Style Sheet File) (This means we use External Style Sheet). Click OK. A Save Style Sheet File As dialog box opens.
59
4. Save the file as flower.css inside the same folder with the file. This will be the external style sheet file to which you will link the other pages later in this exercise.
5. Set the formatting options as shown above. This will be used to define the flower name. Click OK.
60
6. Click and drag to the word Lilacs, and click the .title style in the CSS Styles panel. This formats the word with the .title style. 7. At the bottom of your CSS Style panel, click the New CSS Style icon. The New CSS Style dialog box open. 8. Click Make Custom Style (class) and enter Name:.body. Make sure that the Define In option is set to flower.css. Click OK. This style is used to format the description of the flower. 9. Click Make Custom Style (class) and enter .body in the Selector Name. Make sure that the Rule Definition option is set to set to flower.css. Click OK. This style is used to format the description of the flower.
61
10. Set the formatting options as shown below. This style will be used to define the flower description. Click OK.
62
11. Select the entire description of the lilacs. Click the .body style in the CSS Styles panel. This formats all the text in that paragraph. 12. Open the orchids.html file. 13. In the CSS Styles panel, click the Attach Style Sheet button 14. This will open the Link External Style Sheet dialog box, which lets you attach an external style sheet to the html file. Click browse.
15. Select the flower.css file. Click OK. This attaches the flower.css file to the orchid.html file. Click OK.
63
16. Click and drag to the word Orchid, and click the .title style in the CSS Styles panel. This formats the word with the .title style. 17. Select the entire description of the orchid. Click the .body style in the CSS Styles panel. This formats all the text in that paragraph. 18. Repeat step 11 to 16 for aster.html file. 19. From the CSS Style panel, you can see the two styles you created earlier in this exercise.
20. To edit .body style, double click on the .body style. This opens the CSS Style Definition dialog box so you can make changes to the style. Change the .body style as below:
64
21. Click OK and save the changes you just made to the class. Preview the HTML files in browser. With a single click, all of the pages that linked to flower.css external style sheet were updated.
9.1.3
Affecting Links With Selectors
1. File > Open > sources > Part B > Lab5 > 5.3 > index.html 2. Open CSS Styles panel. Choose Window > CSS Styles. 3. Click the New CSS Style button at the bottom of the panel. The New CSS Style dialog box opens. 4. Choose Compound based on your selection and select a:link. This allows you to define the <a> (anchor) tags link properties. Make sure (New Style Sheet File) is selected and click OK.
65
5. Save the file as link.css inside the same folder with the HTML file. 6. Set the formatting options as shown below. This style will be used to define the a:link. Click OK.
66
7. Click the New CSS Style button at the bottom of the panel. The New CSS Style dialog box opens. 8. Choose Compound based on your selection and select a:visited. This allows you to define the <a> (anchor) tags link properties. Define In option is set to link.css. Click OK. 9. Set the formatting options as shown below. Click OK.
10. Click the New CSS Style button at the bottom of the panel. The New CSS Style dialog box opens. 11. Choose Compound based on your selection and select a:hover. This allows you to define the <a> (anchor) tags link properties. Define In option is set to link.css. Click OK. 12. Set the formatting options as shown below. Click OK.
67
13. Click the New CSS Style button at the bottom of the panel. The New CSS Style dialog box opens. 14. Choose Compound based on your selection and select a:active. This allows you to define the <a> (anchor) tags link properties. Define In option is set to link.css. Click OK. 15. Set the formatting options as shown below. Click OK.
68
16. Save and preview in browser.
69

Short Course Module: (Adobe Dreamweaver Cs4)

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Short Course Module: (Adobe Dreamweaver Cs4)

Загружено:

Авторское право:

Доступные форматы

FAKULTI TEKNOLOGI MAKLUMAT DAN KOMUNIKASI UNIVERSITI TENIKAL MALAYSIA MELAKA

[UNIVERSITI TEKNIKAL MALAYSIA MELAKA]

SHORT COURSE MODULE

PREPARED BY, NORAZLIN MOHAMMED FARAH NADIA AZMAN

[UNIVERSITI TEKNIKAL MALAYSIA MELAKA]

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

ADOBE DREAMWEAVER CS4

KURSUS AMALAN KEJURUTERAAN

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

TEXT AND IMAGES

ESTABLISHING WEB LINKS

DESIGNING WITH DIVISIONS

DESIGNING WITH TABLES

CASCADING STYLE SHEET (CSS)

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

1.1 Introduction To Dreamweaver

1.2 Dreamweaver Workspace

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Site Window Help

Icons from left to right are:

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

2.1 Setting Up Your Project Files

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

2.2 Creating and Saving a New Document

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

5. Save your file.

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Inserting Text and Images

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

4.2 Inserting Named Anchor

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

4.3 Creating Image Maps

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

5.1 Site Layout with Divisions

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

8. The New CSS Rule dialog appears and click OK.

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

10. Save your file.

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Creating and Modifying Table

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

Kursus Amalan Kejuruteraan 2011 Modul Dreamweaver

4. You should now have this:

5. Fill the table as below: