2 Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the <td> A cell that holds a label of information in a row or column, is created with the <th>.
3 Table Basics The structure of an table
4 Inserting a Table Place the insertion point in the document window where you d like to insert a table. Choose Insert Table. Using the Rows and Columns fields, specify number of rows and columns. Type the amount of cell padding (in pixels). Type the amount of cell spacing (in pixels).
5 Inserting a Table
6 Inserting a Table Table width: specify how wide you want the table to be Border thickness: type a number (in pixels) for the border. Using the buttons in the middle of the dialog box, select a Header option. In the bottom section of the Table dialog box, add any Accessibility settings you wish to use
7 Selecting Parts of a Table Selecting a Table Selecting Rows or Columns Selecting Cells
8 Expanded Table Mode To remove all padding, cell spacing, and borders from a table Choosing View Table Mode Expanded Tables Expanded Table mode never changes the actual page code; it merely affects how the page is displayed in Design view. The guideline borders and extra spacing that appear in Design view don t appear in a Web browser
9 Formatting Tables When you select a table, the Property inspector changes to reflect that table s settings. You can adjust the table by entering different values for height, width, rows, columns, and so on in the appropriate fields.
10 Formatting Tables Aligning Tables: select the table, use one of the three alignment options in the popup menu at the right of the Property inspector: The Left and Right options align the table with the left or right page margins. The Center option makes the table sit in the center of the page
11 Formatting Tables Resizing a Table: select the table, and then take either of these steps: Type a value into the W (width) box on the Property inspector, and then choose a unit of measurement, either pixels or percentages, from the pop-up menu. Drag one of the resize handles on the right edge.
12 Modifying Cell and Row Setting Cell Dimensions: Specify the width or height of a particular cell. Select one or more cells, and then type a value in the Property inspector s W (width) or H (height)field. This value can be in either pixels or percentage. You can also resize a column or row of cells by dragging a cell border.
13 Adding and Removing Cells Adding One Row: Click inside a cell. On the Insert panel s Layout category Insert Row Above button to add a row above the current row. Row Below button to add a row below the current row.
14 Adding and Removing Cells Or Click inside a cell. Choose Modify Table Insert Row, Or press Ctrl+M to insert a new row of cells above the current row. Or right click a cell, and then, from the shortcut menu, choose Table Insert Row. To add a new row at the end of a table, click inside the last cell press Tab.
15 Adding and Removing Cells Add a single column of cells: Click inside a cell. On the Insert bar s Layout tab, click the Insert Column to the Left button to add a column to the left of the current column. Click the Insert Column to the Right button to add a column to theright of the current column. Or Click inside a cell, and then choose Modify Table Insert Column.
16 Merging and Splitting Cells Merge cells: Select the cells you wish to merge On the Property inspector, click the Merge Cells button, or choose Modify Table Merge Cells. Dreamweaver joins the selected cells, forming a single new super cell.
17 Merging and Splitting Cells Split cells: divide one cell into multiple cells Select one cell that you wish to split. In the Property inspector, click the Split Cells button. (Modify Table Split Cell) The Split Cell dialog box opens. Indicate to split the cell into rows or columns. Type the number of rows or columns you wish to split OK.
18 Tabular Data Importing Data into a Table: Choose File Import Tabular Data. The Import Tabular Data dialog box appears
19 Tabular Data Click Browse find and select the delimited text file you wish to import. Select a table width. Set Cell padding, Cell spacing, and Border, if you like. Select a formatting option for the top row of data OK
20 Tabular Data Sorting Data in a Table: Select the table you wish to sort. Choose Commands Sort Table. The Sort Table dialog box appears Using the Sort by pop-up menu, choose the column by which you wish to sort. Use the next two pop-up menus to specify how you want the data sorted.
21 Tabular Data Sorting Data in a Table: If you like, choose an additional column to sort by, using the Then by pop-up menu.
22 Tabular Data Sorting Data in a Table: If the first row of the table contains data to be sorted, turn on Sort includes the first row. Choose whether to sort header rows and footer rows as well. Choose whether to keep row colors with the sorted row. Click Apply to see the effect of the sort without closing the dialog box.
23 Frame and Frameset A frame is a region in a browser window that can display an HTML document independent. Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document. In the most common use of frames, One frame containing navigation controls, while another frame containing content
24 Frame and Frameset A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of the frames, and the URL of the page that initially appears in each frame. The frameset file itself doesn t contain HTML content that displays in a browser, except in the noframes section;
25 Frame and Frameset To view a set of frames in a browser, enter the URL of the frameset file; the browser then opens the relevant documents to display in the frames. The frameset file for a site is often named index.html, so that it displays by default if a visitor doesn t specify a filename.
26 Frame and Frameset
27 Create Frame and Frameset Create a predefined frameset and display an existing document in a frame: Place the insertion point in a document and do one of the following: Choose Insert > HTML > Frames and select a predefined frameset. In the Layout category of the Insert panel, click the drop-down arrow on the Frames button and select a predefined frameset.
28 Create Frame and Frameset If you have set up Dreamweaver to prompt you for frame accessibility attributes, select a frame from the pop-up menu, enter a name for the frame, and click OK. Select Window > Frames to view a diagram of the frames you are naming.
29 Create Frame and Frameset Create an empty predefined frameset Select File > New. In the New Document dialog box, select the Page from Sample category. Select the Frameset folder in the Sample Folder column. Select a frameset from the Sample Page column and click Create.
30 Create Frame and Frameset
31 Split a frame into smaller frames To split the frame where the insertion point is: Modify > Frameset Select a splitting item. To split a frame or set of frames vertically or horizontally, drag a frame border from the edge into the middle of the Design view.
32 Delete a frame Drag a frame border off the page or to a border of the parent frame. If there s unsaved content in a document in a frame that s being removed, Dreamweaver prompts you to save the document.
33 Frame properties Select a frame by click a frame in the Frames panel. In the Property inspector, click the expander arrow in the lower-right corner to see all of the frame properties. Set the frame Property inspector options.
34 Frame properties Frame Name: The name used by a link s target attribute Src: Specifies the source document to display in the frame. Click the folder icon to browse to and select a file. Scroll: Specifies whether scroll bars appear in the frame. Default: Auto. No Resize: Prevents visitors from dragging the frame borders to resize the frame in a browser.
35 Frame properties Borders: Shows or hides the borders of the current frame when it s viewed in a browser. Yes (show borders), No (hide borders), Or Default (show borders); A border is hidden only when all frames that share the border have Borders set to No.
36 Frame properties Border Color: Sets a border color for all of the frame s borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset. Margin Width: Sets the width in pixels of the left and right margins Margin Height: Sets the height in pixels of the top and bottom margins
37 Control frame content with links The target attribute of a link specifies the frame or window in which the linked content opens. In Design view, select text or an object. In the Link box in the Property inspector Click the folder icon or drag the Point to File icon to the Files panel and select the file to link to.
38 Control frame content with links In the Target menu, select the frame or window in which the linked document should appear: _blank opens the linked document in a new browser window. _parent opens the linked document in the parent frameset of the frame the link appears in, replacing the entire frameset.
39 Control frame content with links _self opens the link in the current frame, replacing the content in that frame. _top opens the linked document in the current browser window, replacing all frames.
40 NOFRAMES Dreamweaver lets you specify content to display in older graphical browsers that do not support frames. This content is stored in the frameset file, wrapped in a noframes tag. When a browser that doesn t support frames loads the frameset file, the browser displays only the content enclosed by the noframes tag.
41 NOFRAMES To insert NoFrames, In the Document window of Frameset page Select Modify Frameset Edit NoFrames Content. In the Document window, type or insert the content just as you would for an ordinary document.
42 NOFRAMES Or Select Window Code Inspector, place the insertion point between the body tags that appear inside the noframes tags, then type the HTML code for the content. Select Modify Frameset Edit NoFrames Content again to return to the normal view of the frameset document.
43 Advanced CSS - Page Layout
44 Advanced CSS Compound Selectors: Is a Dreamweaver term, not a CSS term. Describes more advanced types of selectors such as the pseudo-class styles or the descendent selectors. In the CSS there are a variety of these advanced selectors but in Dreamweaver, all of them are created in the same way Start by creating a CSS style.
45 Advanced CSS When you open New CSS Rule window, instead of selecting the Class, ID, or Tag selector type, choose the Compound option.
46 Advanced CSS Except the four link state options in the drop-down menu, you must type the selector name in the Selector Name box. You need to use a different syntax for each type of selector. Descendent Selectors: If a tag is inside another tag, it s a descendent of that tag.
47 Advanced CSS EX: On your web page have <h1>, you want to emphasize a word within <h1>: You select the word and press the B button, it applies the <strong> tag to that word. Most browsers display both tags, so you can t see any difference between the emphasized word and the other words in the headline.
48 Advanced CSS Creating a tag selector to change the <strong> tag s color and make it stand-out from the headline isn t much of a solution: You end up changing the color of every <strong> tag on the page, like it or not. A descendent selector lets you do what you really want: change the color of the <strong> tag only when it appears inside of an <h1> tag. The descendent selector is h1 strong
49 Advanced CSS
50 Advanced CSS A descendent selector can contain more than just two elements as well. The following are all valid selectors for the <a> tags inside the bulleted lists. ul li a body li a html li a html body ul li a
51 Advanced CSS Styling Groups of Tags: To create a style that applies to several different elements at once, In the Selector Name box, type a list of selectors separated by commas.
52 Advanced CSS Fast Style Editing With the Properties Pane: The Properties pane displays CSS properties in one of three different views: A set properties view: displays only the properties that have been define A Category view: groups the different CSS properties into the same seven categories used in the Rule Definition window A List view: provides an alphabetical listing of all CSS properties for the selected style
53 Advanced CSS
54 Advanced CSS Moving and Managing Styles: To move a style from one place to another in the same style sheet: Drag the style in the CSS Styles panel. The order the styles are listed in the CSS Styles panel represents their order in the actual CSS You can select and move more than one style at a time by Ctrl-clicking
55 Advanced CSS EX:
56 Advanced CSS To move one or more styles between two style sheets: Drag the style from one style sheet to another in the CSS Styles panel. This is applied both for moving a style from an internal style sheet to an external style sheet, and for moving a style from one external style sheet to another
57 Advanced CSS The Cascade: The page has two different styles, two sets of formatting rules for the same tag. The browser merges the three styles into a sort of hybrid, following these rules: Properties that don t conflict are applied as usual. Properties do conflict, the Web browser uses the property from the style with the greatest specificity.
58 Page Layout Types of Web Page Layouts: Floatbased layouts offer three basic approaches to this problem: Fixed width Liquid Elastic
59 Page Layout Float Layout Basics: Float-based layouts take advantage of the CSS float property to position elements side by side, and create columns on a Web page. In essence, the float property moves a page element to the left or the right. Any HTML that appears after the floated element moves up on the page, and hugs up against the side of the float.
60 Page Layout Float is a CSS property, available when you create a CSS style. It s listed in the CSS Rule Definition window s Box category Choose the left option, and the styled element floats to the left, Choose the right option and the element moves to the right.
61 Page Layout Fixed
62 Page Layout Liquid
63 Page Layout Elastic
64 Page Layout With the fixed-width approach, you don t have to worry about what happens to your design on a very wide (or small) monitor. Liquid: Your page gets wider or narrower as your visitor resizes the window. Elastic: With this kind of design, you define the page s width using em values. An em changes size when the browser s font size changes.
65 Page Layout The Mighty <div> Tag: With CSS, the most common element for organizing content is the <div> tag. The <div> tag is an HTML element that has no inherent formatting properties you use it to mark a logical grouping of elements, or a division, on the page.
66 Page Layout
67 Page Layout The Insert Div Tag Tool: lets you wrap a <div> tag around a selection of page content To use this tool, either select the content you wish to wrap with a div or click on the page where you wish to insert an empty <div> tag. Then click the Insert Div Tag button on the Layout category of the Insert panel
68 Page Layout You can also insert a div by choosing Insert Layout Objects Div Tag. In either case, the Insert Div Tag window appears
69 Page Layout Choose a class from the Class menu or choose an ID from the ID menu.
70 Page Layout Ex: To create a two-column design, you could follow these easy steps: Select the contents of the banner. Then, on the Layout category of the Insert panel, click the Insert Div Tag button. In the ID box, add an ID name. Click OK to close the Insert Div Tag window
73 Page Layout Select the contents of the sidebar, and then, in the Insert bar, click the Insert Div Tag button. Click the New CSS Style button, and create a new ID style named #storylinks In the CSS Rule Definition window, click the Box category, and then, from the float menu, select left
74 Page Layout Type a value in the Width box Complete the style, and then insert the div Follow the same steps for the main content div: Select the page elements that form that main content on the page, click the Insert Div Tag button, and then create a new ID style for the page s main content region.
75 Page Layout
76 Page Layout Understanding the Box Model: CSS properties located within this category: width, height, padding, margin, and clear. Width and height: specify the width and height for any styled object using these properties. Float: move an object to the left or right side of a page and have other content wrap around it.
77 Page Layout Clear: Clear prevents an element from wrapping around any object with a right or left Float property. Padding: Padding is the gap that separates the content of the styled tag. Margin. The margin is the outermost space surrounding an element.
78 Page Layout
79 Page Layout
80 Dreamweaver s CSS Layouts Dreamweaver s CSS Layouts are simply basic designs. Each layout is a simple HTML file and a style sheet. Creating a new CSS layout page takes just a few steps: Choose File New. Choose Blank Page from the left column, and the type of page you wish to create in the Page Type column.
81 Dreamweaver s CSS Layouts
82 Dreamweaver s CSS Layouts From the Layout column, select a page layout. Choose a DocType from the DocType menu. From the Layout CSS menu, select where to store the layout s CSS code. Click the Attach Style Sheet button to attach any external style sheets to the page Click the Create button to bring your new Web page to life
83 Dreamweaver s CSS Layouts The Structure of Dreamweaver s CSS Layouts
84 Absolute Positioning (AP) Beyond float-based layouts, CSS s other main technique for placing elements on a Page Absolute positioning lets you specify an exact position on a page for any element. Web is a environment that s difficult to control with pixel level precision. If increase the font size in the browser, the enlarged text may spill out of your carefully crafted layout.
85 The CSS Positioning Properties Positioning type: Absolute is the most common option. It lets you place a tag anywhere on a page. Relative: lets you position a tag relative to its position in the HTML. Static: is the normal behavior of HTML. Static simply means the content follows the normal top-down flow of HTML.
86 The CSS Positioning Properties Fixed is similar to the fixed value of the CSS attachment property used to lock a background image in place. Width and height: set the width and height of the element Visibility: Dreamweaver makes the contents of all tags visible on the page. Z-index: represented by a number in the Z index field, controls the stacking order of AP elements on a page.
87 The CSS Positioning Properties Placement: specify an absolutely positioned element s position which is, after all, the whole point of AP div. The four properties control where each of the four edges of the AP div begin.
88 Adding an AP Div to Your Page Drawing AP Divs: Click the AP div button, and then drag the + cursor diagonally in the document window to create a box. Use a menu command: at the insertion point, choose Insert Layout Objects AP Div.
89 The AP Elements Panel The AP Elements panel: manage absolutely positioned elements in a document.
90 The AP Elements Panel Visibility: To change an absolutely positioned element s visibility property AP element ID: If you use Draw AP div tool, Dreamweaver gives the AP div a generic ID name. Z-index: provides a third dimension to absolutely positioned elements.
92 Form basic A form is form-processing program running on the Web server. The operations of the form follow those steps: First, someone fills out a form on your Web page, and then clicks the Submit button. Next, the Web browser transmits the form data over the Internet to a program on your Web server. The program collects the data and does something with it, Finally, the Web server returns a page to the Web visitor.
93 Creating a Form In the document window, click where you d like to insert the form. On the Insert panel, select the Forms category. Click the Form icon. Click the dotted red line to select the form, type a name for your form into the Form ID field. Into the Action field, type a URL, or select a file by clicking the tiny folder icon Select method in the method pop-up menu.
94 Adding Form Elements In the document window, insert a form. Of the Insert panel s Forms category, click the appropriate button (form element). In the Input Tag Accessibility Attributes window, type an ID, Type a label, and then select label options. Type an Access key and a Tab Index number, and then press OK. In the Property inspector, set the form element s properties
95 Adding Form Elements Text Fields: Char Width: The width of a text field is measured in characters (default 20 Char). Type: have three different types of text fields A single-line text field. Multiline fields (Text area) Password.
96 Adding Form Elements Max Chars/Num Lines: Max Chars lets you limit the number of characters the field accepts. Init Val: specify the Initial Value of the field. Disabled and Read-only: prevents visitors from clicking into the field, or even selecting any text that s already there and any data in
97 Adding Form Elements Checkboxes and Checkbox Groups Checked value: specify the information that s submitted. Initial state: checkbox be filled when your Web page first appears.
98 Adding Form Elements Checkbox Groups: On the Insert panel, click the Checkbox Group button.
99 Adding Form Elements In the Name field, type a name. In the Label column, click the top Checkbox label. Hit the Tab key to jump to the Value column for that checkbox, and then type a value for the first checkbox. Repeat for the second checkbox in the group.
100 Adding Form Elements Radio Buttons: radio buttons restrict your visitor to making only one choice from a group. In the Property inspector, you can set up the following options for a radio button: Name Checked value. Initial state. Radio Group: provides a single dialog box for creating a group of radio buttons.
101 Adding Form Elements Pull-Down Menus and Lists: offer many choices without taking up a lot of screen space. Properties of the Menus and List: Type. Height. Allow multiple. List Values.
102 Adding Form Elements File Field: you easily add a field for uploading image files, text files, and other documents. When you click the File Field button on the Insert panel s Forms,Dreamweaver inserts a text field and a Browse button; together, they constitute a single File Field.
103 Adding Form Elements Buttons: Submit button for your Web visitors to click as a final step. Only then do their responses set out on their way to your form-processing application. The Reset button clears all the form entries, and resets all the form fields to their original values.
104 Adding Form Elements Button name: provides the first half of the name/value pair that s sent when the form is submitted. Value. is the label that appears on the button. Action: Submit form: transmits the form data over the Internet Reset form: sets all the fields back to their original values.
105 Adding Form Elements <label> Tag: lets you associate a label with a particular form element, like a checkbox or text field. <fieldset> Tag: is a form organization tool, intended to let you group related form fields.
106 Validating Forms Spry Validation Basics: The Spry validation widgets let you validate input received via a text field, a text area, a pulldown menu, a checkbox, or a group of radio buttons. The basic process for all form validation widgets is the same: Insert the Spry widget (seven types): select the form element on the page, On the Insert panel, clicking the appropriate Spry form button.
108 Validating Forms You dictate when a field is validated by turning on one or both of the Property inspector s Validate on checkboxes Dreamweaver lets you validate a form field when the field is blurred, changed, or both.
109 Validating Forms Modify the error messages: in Design view, select the text, and then type a new error message.
110 Validating Forms Formatting Spry Error Messages and Fields: Open the CSS Styles panel click the Current button. Make sure the Cascade button is pressed. Select the Spry validation widget. From Preview states menu, select the preview state you wish to format. In the document window, click inside
111 Validating Forms Spry Text Field includes Validation types: None. This option is the default setting: no validation Integer. Use this option to verify that a whole number was typed into the field. . This option looks for a validly formatted address. Date: To specify the format of the day. Time. This option validates a time in one of several different formats...
112 Validating Forms Custom validation: Select a Spry text field widget, From the Property inspector s Type menu, choose Custom, and then into the Pattern field, type the pattern.
113 Validating Forms Spry Text Area: Specify content is required; Dictate the minimum and maximum number of characters.
114 Validating Forms Spry Checkbox: The Spry validation checkbox lets you make sure a particular checkbox has been selected. To add a single Spry checkbox, choose Insert Form Spry Validation Checkbox, Or, on the Insert panel s Forms category, click the Spry Validation Checkbox button. The Spry checkbox that appears on the page already has the Required option
115 Validating Forms To create a group of related Spry checkboxes: Insert a Spry checkbox. Click the label text. Press the <label> tag disappears from the Tag selector. Insert a regular (non-spry) checkbox
116 Validating Forms Spry Select: validates the selection of pull-down menus, and has two options to determine whether or not a selection in the menu is valid. Do not allow: To prevent a visitor from submitting the form without selecting options.
117 Validating Forms Spry Password: This helpful tool lets you enforce a set of rules for naming passwords so that visitors don t create easily hacked credentials.
118 Validating Forms Spry Confirm: works only with text fields, and pops up an error message, if the value in the text field doesn t match the value in another text field on the page. To use this widget First, you add a text field. That field is the original Type your or Create a password box. Next, from the Insert Panel s Forms category, add the Spry Confirm widget, or choose Insert Form Spry
119 Validating Forms Spry Radio Group: To add a Spry Radio Group, use the Insert panel s Forms category or Insert Form Spry Validation Radio Group. Use the Property inspector to set up the validation options. The other two options Empty Value and Invalid Value produce error messages when a particular radio button is selected.
120 Validating Forms In either of these boxes, enter the value you assigned when you first created the radio button. Selecting the radio button with the specified value produces one of two errors when the form is submitted. For the Empty Value, the error informs the visitor that he hasn t made a selection. For the Invalid Value, the error announces that the choice he made was invalid.
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
Dreamweaver CS4 Introduction References : http://help.adobe.com 1 What s new in Dreamweaver CS4 Live view Dreamweaver CS4 lets you design your web pages under realworld browser conditions with new Live
Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What
B1 Adding Frames Normally, a Web page fills an entire browser window. However, a browser window can be split into two or more smaller individual panes called frames. Each frame contains an individual Web
Dreamweaver: Web Forms Introduction Web forms allow your users to type information into form fields on a web page and send it to you. Dreamweaver makes it easy to create them. This workshop is a follow-up
Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one
Creating a Website in Schoolwires Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Navigating to an assigned section... 2 Accessing Site Manager... 2 Section Workspace
Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and
Microsoft Word 2003 for Windows, Part 2 In this workshop, the following Word 2003 features will be covered: Creating and using Tables Formatting text using Styles Using MailMerge Arranging text in Columns
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface
Dreamweaver 8 Project 5 Templates and Style Sheets Starting Dreamweaver and Opening the Colorado Parks Web Site Click the Start button on the Windows taskbar Point to All Programs on the Start menu, point
Ministry of manpower Higher college of technology Department of Information Technology QA Umbrella Workshop 30 th August- 3 rd September 2008 IT Skills Microsoft FrontPage Practical Session Copyright of
Chapter 1 Dreamweaver MX 2004 - The Basics COPYRIGHTED MATERIAL Welcome to Dreamweaver MX 2004! Dreamweaver is a powerful Web page creation program created by Macromedia. It s included in the Macromedia
National Training and Education Resource Authoring Course Participant Guide Table of Contents: OBJECTIVES... 4 OVERVIEW OF NTER... 5 System Requirements... 5 NTER Capabilities... 6 What is the SCORM PlayerWhat
Dreamweaver CS5 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.
Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can
Microsoft Office Word 2016 for Mac Formatting Your Document University Information Technology Services Learning Technologies, Training & Audiovisual Outreach Copyright 2016 KSU Division of University Information
USER GUIDE MADCAP FLARE 2017 r3 QR Codes Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is
Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1
The Domino Designer QuickStart Tutorial 1. Welcome The Domino Designer QuickStart Tutorial You've installed Domino Designer, you've taken the Designer Guided Tour, and maybe you've even read some of the
User Guide Web Intelligence Rich Client Business Objects 4.1 2 P a g e Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence 4.1... 5 Log into EDDIE...
SPARK Forms Builder for Office 365 User Manual Ver. 220.127.116.11 0 ITLAQ Technologies www.itlaq.com Table of Contents 1 The Form Designer Workspace... 3 1.1 Form Toolbox... 3 1.1.1 Hiding/ Unhiding/ Minimizing
Rich Text Editor Quick Reference Introduction Using the rich text editor is similar to using a word processing application such as Microsoft Word. After data is typed into the editing area it can be formatted
What is a Spry Widget? Spry widgets provide access to dynamic and interactive elements you might like to have on your Web page. These Spry elements include: Menu Bars Tabbed Panels Accordion Effects Collapsible
HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe
Using Microsoft Office 2003 Intermediate Word Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.2 Summer 2010 Table of Contents Intermediate Microsoft Word 2003...
User s guide to using the ForeTees TinyMCE online editor TinyMCE is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing the announcement
CAL 9-2: Café Soylent Green Chapter 12 This version is for those students who are using Dreamweaver CC. You will be completing the Forms Tutorial from your textbook, Chapter 12 however, you will be skipping
Exploring Microsoft Office Word 2007 Chapter 3: Enhancing a Document Robert Grauer, Keith Mulbery, Michelle Hulett Objectives Insert a table Format a table Sort and apply formulas to table data Convert
The HOME Tab: Cut Copy Vertical Alignments Text Direction Wrap Text Paste Format Painter Borders Cell Color Text Color Horizontal Alignments Merge and Center Highlighting a cell, a column, a row, or the
Microsoft Excel 2010 Basic Introduction to MS Excel 2010 Microsoft Excel 2010 is a spreadsheet software in the new Microsoft 2010 Office Suite. Excel allows you to store, manipulate and analyze data in
Getting started with Excel 2007 you will notice that there are many similar features to previous versions. You will also notice that there are many new features that you ll be able to utilize. There are
Excel 2013 for Beginners Class Objective: This class will familiarize you with the basics of using Microsoft Excel. Class Outline: Introduction to Microsoft Excel 2013... 1 Microsoft Excel...2-3 Getting
1 Microsoft Excel 2010 Tutorial Excel is a spreadsheet program in the Microsoft Office system. You can use Excel to create and format workbooks (a collection of spreadsheets) in order to analyze data and
Many people know that you can use the Mail Merge feature in Microsoft Word 2007 to easily create mailing labels, but did you know you can use it to quickly create custom name badge inserts? Here, you will
Toolbar Tour AutoSum + more functions Chart Wizard Currency, Percent, Comma Style Increase-Decrease Decimal Name Box Chart Wizard QUICK TOUR Name Box AutoSum Numeric Style Chart Wizard Formula Bar Active
Welcome to Book Display Widgets Book Display Widgets allow you to create virtual book displays on your website, where covers link to that item s record in your catalog. Bring your own lists of books, or
Excel 2013 Next Steps ADULT SERVICES DEPARTMENT CRYSTAL LAKE PUBLIC LIBRARY 126 W. PADDOCK STREET CRYSTAL LAKE, IL 60014 815-459-1687, X7 WWW.CLPL.ORG Agenda 2 Home Toolbar Alignment Group Number Formats
InDesign Part II Library A library is a file and holds a collection of commonly used objects. A library is a file (extension.indl) and it is stored on disk. A library file can be open at any time while
JSN PageBuilder 3 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation of Joomla! PageBuilder with great improvements in the interface, features, and user
Excel 2016 Basics for Windows Excel 2016 Basics for Windows Training Objective To learn the tools and features to get started using Excel 2016 more efficiently and effectively. What you can expect to learn
Creating a Navigation Bar with a Rollover Effect These instructions will teach you how to create your own navigation bar with a roll over effect for your personal website using Adobe Dreamweaver CS4. Your
Creating Reports in Access 2007 Table of Contents GUIDE TO DESIGNING REPORTS... 3 DECIDE HOW TO LAY OUT YOUR REPORT... 3 MAKE A SKETCH OF YOUR REPORT... 3 DECIDE WHICH DATA TO PUT IN EACH REPORT SECTION...
CS 1033 Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 06: Introduction to KompoZer (Website Design - Part 3 of 3) Lab 6 Tutorial 1 In this lab we are going to learn
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
Creating Interactive PDF Forms Using Adobe Acrobat X Pro for the Mac University Information Technology Services Training, Outreach, Learning Technologies and Video Production Copyright 2012 KSU Department
CHAPTER 4: MICROSOFT OFFICE: EXCEL 2010 Quick Summary A workbook an Excel document that stores data contains one or more pages called a worksheet. A worksheet or spreadsheet is stored in a workbook, and
page 1 OU Campus User Guide Logging Into OU Campus page page 2 1. Navigate to a page on your site that you wish to edit. 2. Scroll down to the footer and click the symbol. 3. Enter your OU Campus username
Intermediate Web Publishing: Working with Styles Jeff Pankin Information Services & Technology Contents Introduction... 2 In this class you will:... 2 Set the Preferences... 2 General... 2 Invisible Elements...
Microsoft Word Part 2 Hanging Indent 1 The hanging indent feature indents each line except the first line by the amount specified in the By field in the Paragraph option under the format option, as shown
Creating & Using Tables in Microsoft Word 2000 Created by and for: Internet and Technology Training Services Office of Information Technology What is a Table? A table is a structure that is divided into
COMPONENTS FOR XCELSIUS Tree and Data Grid for Micro Charts User Guide Version 1.1 Inovista Copyright 2009 All Rights Reserved Page 1 TABLE OF CONTENTS Components for Xcelsius... 1 Introduction... 4 Data
THE BROWSE TOOL Us it to go through the stack and click on buttons THE BUTTON TOOL Use this tool to select buttons to edit.. RECTANGLE TOOL This tool lets you capture a rectangular area to copy, cut, move,
Name Date Chapter 1 True/False Instructions: Circle T if the statement is true or F if the statement is false. T F 1. WYSIWYG stands for What You See Is What You Get. T F 2. The menu bar shows the application
FORMS The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions Presented by: John Reamer Creating Forms Forms and Surveys: When and What to Use them For Both Allow you
Learn more about Pages, Keynote & Numbers HCPS Instructional Technology May 2012 Adapted from Apple Help Guides CHAPTER ONE: PAGES Part 1: Get to Know Pages Opening and Creating Documents Opening a Pages
Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From
Excel 2016 Basics for Mac Excel 2016 Basics for Mac Training Objective To learn the tools and features to get started using Excel 2016 more efficiently and effectively. What you can expect to learn from
Excel 2010 FDLRS Sunrise Within 2 weeks participants will submit a project: Create an Excel spreadsheet with a chart include the completed and signed ARROW form Send to: Lourdes Day FDLRS (Bartow Airport)
Page Editor ===> Page Editor How Can I Use the Page Editor? The Page Editor will be your primary way of editing your website. Page Editor Basics While editing a page, you will see that hovering your mouse
10 Classes 2 nd Exam Review Lesson - 15 Introduction Windows 7, previous version of the latest version (Windows 8.1) of Microsoft Windows, was produced for use on personal computers, including home and
IMY 110 Theme 11 HTML Frames 1. Frames in HTML 1.1. Introduction Frames divide up the web browser window in much the same way that a table divides up part of a page, but a different HTML document is loaded
Microsoft Word 2010 : Tables A table is a structure of vertical columns and horizontal rows. Each column and row will have a heading. Heading 1 Heading 2 At the intersection of each column and row is a
Compare and Merge Track Changes Course Description The document you have been working on for a couple of weeks is finally finished. Before sending the document to its final destination to be published,
Microsoft Word 2002 Part I Reference Manual Instructor: Angela Sanderson Computer Training Coordinator Updated by: Angela Sanderson January 11, 2003 Prepared by: Vi Johnson November 20, 2002 THE WORD SCREEN
All Creative Designs HTML Web Tutorial for PC Using KompoZer New version 2012 now available at: http://www.allcreativedesigns.com.au/pages/tutorials.html Step 1 Download and Install KompoZer Step by step
Spreadsheet Software Objectives: Working with Spreadsheets Enhancing Productivity Using the Application Open, close a spreadsheet application. Open, close documents. Create a new spreadsheet based on default
Table of Contents ABOUT THIS COURSE... 3 ABOUT THIS MANUAL... 4 LESSON 1: MANAGING LISTS... 5 TOPIC 1A: SORT A LIST... 6 Sort a list in A-Z or Z-A Order... 6 TOPIC 1B: RENUMBER A LIST... 7 Renumber a List
Center for Faculty Development and Support Making Documents Accessible in Word 2007 Tutorial CONTENTS Create a New Document and Set Up a Document Map... 3 Apply Styles... 4 Modify Styles... 5 Use Table
Information Systems Center FrontPage 2003 Reference Guide for COMM 321 & 421 September 2008 Table of Contents Portfolio Web Sites & Web Pages... 1 Open Your Portfolio Web Site in FrontPage for Editing...
1 MICROSOFT WORD Table of Contents LINC ONE Hiding Standard toolbar, Formatting toolbar, and Status bar: To hide the Standard toolbar, click View Toolbars on the Menu bar. Check off Standard. To hide the
Working with Tables in Word 2010 Table of Contents INSERT OR CREATE A TABLE... 2 USE TABLE TEMPLATES (QUICK TABLES)... 2 USE THE TABLE MENU... 2 USE THE INSERT TABLE COMMAND... 2 KNOW YOUR AUTOFIT OPTIONS...