Page Layout Using Tables

Size: px
Start display at page:

Download "Page Layout Using Tables"

Transcription

1 This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports, and included elements to identify items such as headings, body text, and lists. It was never intended to produce the sophisticated layouts and formatting that are common on the Web today. As new browsers were developed, elements such as <font> and various table elements were introduced to help designers bypass the formatting limitations of HTML. Tables allowed designers to organize content in columns and rows, and to create more sophisticated designs that more closely emulate the print medium. More recently, the World Wide Web Consortium (W3C) recommended completely separating structure from formatting through the introduction of a style language known as Cascading Style Sheets (CSS). CSS allows designers to create style rules for various elements and store these rules in an external style sheet thus allowing the same content to be reformatted for a variety of different devices simply by attaching the appropriate style sheet to the HTML file. CSS also allows designers to create positioned layouts, providing a method of precisely positioning page elements without the need to use tables or frames. While the intent is to eventually restore tables to their originally intended use, tables are still used as one of the primary design tools on the Web. HTML Table Basics Tables allow you to create grid-based layouts and therefore provide one of the most powerful design tools for Web designers. Tables allow you to use either a fixed resolution design or a flexible resolution design. You can create columns and gutters, vary text alignment, and create an underlying structure for your pages using tables. You can also nest (embed) one table inside another, or stack tables in a sequence providing for a wide variety of layout options. A nested table can be placed inside the editable region of a template to give you control over the content layout within the region. In HTML, table information is controlled at the table level, row level, and at the cell level. Table Level Attributes Tables can be aligned to the left, center, or right of the page. You can set the height and width of a table (either as a percentage of the screen or as a number of pixels), and you can add cell padding and cell spacing values, a background image or colour, and borders. These settings are global level attributes which affect the entire table Camosun School of Business Page 1 ABT 294 Course Pack

2 The diagram below illustrates the difference between Cell Spacing and Cell Padding. The cell spacing separates the cells physically from each other (indicated by the solid borders). The cell padding is the margin (white space) inside the cell separating the cell content from the cell wall (indicated by the dotted borders). Row Level Attributes Row level attributes allow you to set horizontal and vertical alignment for row content, and specify a background colour for a row. Cell Level Attributes Table cells can be merged or split both horizontally and vertically to provide a wide range of design variations, and you can also control horizontal and vertical text alignment, cell background colour, and cell height and width (either as a percentage of the table or as a number of pixels) Camosun School of Business Page 2 ABT 294 Course Pack

3 Inserting a table Page Layout Using Tables 1) Open your web page in the Page Editor, switch to Design view and position the insertion point where you want the table to appear. 1) To insert a table, do one of the following: choose Insert Table, click the Insert Table button in the Insert panel (located in the Common category), or drag the Insert Table button from the Insert panel to the page. 2) The Insert Table dialog box will appear. Specify the required options for your table. These include the number of rows and columns, the width of the table (either as a fixed number of pixels or as a percentage of the viewers browser window), the border thickness, the cell padding and spacing, and the table header position. The Insert Table dialog box below shows settings for a 2 row by 2 column table for an 800 x 600 fixed resolution design. Note that the width is set to 750 pixels this allows 50 pixels for browser window elements such as the vertical scroll bars. Cell padding and spacing are used to separate the cells and to ensure that the content of each cell does not touch the cell walls Camosun School of Business Page 3 ABT 294 Course Pack

4 3) Click OK to create your table. Page Layout Using Tables 4) To centre the table so that when it is viewed on a higher resolution screen the extra space will be equally distributed to the left and the right of the table, select the table and choose Format Align / Center. 5) The resulting structure is shown below. Note the HTML tags that have been inserted into the document they are <div>, <table>, <tr> and <td> Modifying Table Properties You can easily change the overall properties of an existing table by selecting the table, and specifying your options in the Property Inspector. Properties you can modify include the number of rows and columns, the table width, the cell padding and spacing values, the alignment of the table, and the size of the table border. You can hide the table structure from the viewer by setting the border size to 0, and you can also clear the column widths and row heights (if present) and convert the table from pixels to percentage and vice-versa. 1) Select the table. 2) Use the Window menu to open the Property Inspector if necessary. 3) Select the required options from the Property Inspector Camosun School of Business Page 4 ABT 294 Course Pack

5 Modifying Cell Properties You can change the overall properties of a cell, a group of cells, a column, a row, or a group of columns or rows by selecting the area of the table to be modified then specifying your options in the Property Inspector. One of the most important settings to consider is the vertical alignment of cell content by default, cell content is centred vertically. If you are using the table for layout purposes (particularly in a multi-column layout) the vertical alignment should be set to Top. Cell properties you can modify include the horizontal and vertical alignment of cell contents, the width and height of the cells, and the background colour of the cells. Selected cells can be merged or split. You can also select cell text content and specify the Format (i.e. a tag such as <h1>), Class or ID if available, font attributes such as bold and italic, paragraph attributes such unordered and ordered lists, indents and out-dents, a hyperlink, and the hyperlink target. If you are using CSS formatting rules, click the CSS button to show the available CSS options. 1) Select the cells to be modified. 2) Use the Window menu to open the Property Inspector if necessary, and click the HTML button to specify HTML formatting or the CSS button to specify CSS formatting. 3) Select the required options from the Property Inspector Camosun School of Business Page 5 ABT 294 Course Pack

6 Adding/Deleting Columns and Rows You can modify the existing structure of a table by inserting or deleting rows and columns. 1) Click inside the cell where you want the new row or column to appear. 2) To add or delete a row or column, choose Modify Table and select the appropriate command from the submenu. 3) To add both rows and columns, choose Modify Table / Insert Rows or Columns to display the Insert Rows or Columns dialog box. Select your options and then click OK Camosun School of Business Page 6 ABT 294 Course Pack

7 Merging and Splitting Cells The structure of a table can be further modified by merging and/or splitting table cells. You can merge cells both vertically and horizontally and you can split a cell into multiple columns or rows. 1) To Merge cells, select a rectangular array of contiguous cells. Choose Modify Table / Merge Cells. 2) To Split cells, select a single cell or multiple cells. Choose Modify Table / Split Cell. In the Split Cell dialog box select either Split cell into rows or Split cell into columns, then select the number of columns or rows. The image below shows the two left hand cells of the table merged vertically and the bottom right cell split into two columns Camosun School of Business Page 7 ABT 294 Course Pack

8 Nested Tables Nesting a table refers to placing a new table inside an existing table cell which allows you to vary the layout in different areas of the page. If you have chosen a fixed resolution design for the original table, you can use a percentage width setting for the nested table since the host table s width has already been precisely defined in pixels. As a general rule, nested tables should be avoided if possible because they are not accessible to screen readers and other devices. 1) Position the insertion point in the cell in which the second table is to be inserted. 2) To insert the new table, do one of the following: choose Insert Table, click the Insert Table button in the Insert panel, or drag the Insert Table button from the Insert panel to the container cell. 3) The Insert Table dialog box will be displayed. The dialog box displays the settings used for the previous table since Dreamweaver automatically remembers the last settings used. The new settings shown below will insert a 2-row by 3 column table in the selected cell. Notice that the width of the table is set to 100% - because it is contained within another table with exact width settings, the width of the new table can be set to 100% of the window. The resulting structure is shown below: 2011 Camosun School of Business Page 8 ABT 294 Course Pack

Dreamweaver Basics Outline

Dreamweaver Basics Outline 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

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6

[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 [AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 Length : 2 Days Audience(s) : New or existing users Level : 3 Technology : Adobe Dreamweaver CS6 program Delivery Method : Instructor-Led (Classroom) Course

More information

How to set up a local root folder and site structure

How to set up a local root folder and site structure 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

More information

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21 Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

More information

Creating Forms. Starting the Page. another way of applying a template to a page.

Creating Forms. Starting the Page. another way of applying a template to a page. Creating Forms Chapter 9 Forms allow information to be obtained from users of a web site. The ability for someone to purchase items over the internet or receive information from internet users has become

More information

EDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9

EDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 EDITOR GUIDE Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 1 Button Functions: Button Function Display the page content as HTML. Save Preview

More information

Dreamweaver CS3 Concepts and Techniques

Dreamweaver CS3 Concepts and Techniques Dreamweaver CS3 Concepts and Techniques Chapter 3 Tables and Page Layout Part 1 Other pages will be inserted in the website Hierarchical structure shown in page DW206 Chapter 3: Tables and Page Layout

More information

ORB Education Quality Teaching Resources

ORB Education Quality Teaching Resources These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best

More information

Creating Web Pages with SeaMonkey Composer

Creating Web Pages with SeaMonkey Composer 1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it

More information

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special. This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET 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 A cell that

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

Dreamweaver Tutorials Working with Tables

Dreamweaver Tutorials Working with Tables Dreamweaver Tutorials This tutorial will explain how to use tables to organize your Web page content. By default, text and other content in a Web page flow continuously from top to bottom in one large

More information

How to lay out a web page with CSS

How to lay out a web page with CSS 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

More information

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets 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

More information

Using Adobe Contribute 4 A guide for new website authors

Using Adobe Contribute 4 A guide for new website authors Using Adobe Contribute 4 A guide for new website authors Adobe Contribute allows you to easily update websites without any knowledge of HTML. This handout will provide an introduction to Adobe Contribute

More information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of

More information

Layout Manager - Toolbar Reference Guide

Layout Manager - Toolbar Reference Guide Layout Manager - Toolbar Reference Guide Working with a Document Toolbar Button Description View or edit the source code of the document (for advanced users). Save the contents and submit its data to the

More information

Overview of the Adobe Dreamweaver CS5 workspace

Overview of the Adobe Dreamweaver CS5 workspace 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

More information

Tutorial 5 Working with Tables and Columns. HTML and CSS 6 TH EDITION

Tutorial 5 Working with Tables and Columns. HTML and CSS 6 TH EDITION Tutorial 5 Working with Tables and Columns HTML and CSS 6 TH EDITION Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple rows and columns

More information

Discuss web browsers. Define HTML terms

Discuss web browsers. Define HTML terms Week 1 & 2 *discuss safety of the internet and classroom Describe the internet and it s associated key terms Describe the world wide web and key terms associated Discuss web browsers Define HTML terms

More information

KillTest *KIJGT 3WCNKV[ $GVVGT 5GTXKEG Q&A NZZV ]]] QORRZKYZ IUS =K ULLKX LXKK [VJGZK YKX\OIK LUX UTK _KGX

KillTest *KIJGT 3WCNKV[ $GVVGT 5GTXKEG Q&A NZZV ]]] QORRZKYZ IUS =K ULLKX LXKK [VJGZK YKX\OIK LUX UTK _KGX KillTest Q&A Exam : 9A0-803 Title : Certified Dreamweaver 8 Developer Exam Version : DEMO 1 / 7 1. What area, in the Insert bar, is intended for customizing and organizing frequently used objects? A. Layout

More information

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal COMSC-030 Web Site Development- Part 1 Part-Time Instructor: Joenil Mistal Chapter 9 9 Working with Tables Are you looking for a method to organize data on a page? Need a way to control our page layout?

More information

Learning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC

Learning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC Module 1 Contents Chapter 1: Introduction to DreamWeaver CC Design Considerations...1-1 Types of Graphics...1-2 Backgrounds and Text...1-2 Planning the Navigation...1-2 The DreamWeaver Screen...1-3 Workspaces...

More information

Creating Accessible Web Sites with EPiServer

Creating Accessible Web Sites with EPiServer Creating Accessible Web Sites with EPiServer Abstract This white paper describes how EPiServer promotes the creation of accessible Web sites. Product version: 4.50 Document version: 1.0 2 Creating Accessible

More information

A Dreamweaver Tutorial. Contents Page

A Dreamweaver Tutorial. Contents Page A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating

More information

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab OBJECTIVES- 1.0 Setting Project Requirement 1.1 Identify the purpose, audience, and audience needs for

More information

Html basics Course Outline

Html basics Course Outline Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout

More information

Nauticom NetEditor: A How-to Guide

Nauticom NetEditor: A How-to Guide Nauticom NetEditor: A How-to Guide Table of Contents 1. Getting Started 2. The Editor Full Screen Preview Search Check Spelling Clipboard: Cut, Copy, and Paste Undo / Redo Foreground Color Background Color

More information

Project 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site

Project 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your

More information

Web Design and Development ACS Chapter 12. Using Tables 11/23/2017 1

Web Design and Development ACS Chapter 12. Using Tables 11/23/2017 1 Web Design and Development ACS-1809 Chapter 12 Using Tables 11/23/2017 1 Using Tables Understand the concept and uses of tables in web pages Create a basic table structure Format tables within web pages

More information

ADOBE DREAMWEAVER CS4 BASICS

ADOBE DREAMWEAVER CS4 BASICS ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 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,

More information

ADOBE 9A Adobe Dreamweaver CS4 ACE.

ADOBE 9A Adobe Dreamweaver CS4 ACE. ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

MS Word Professional Document Alignment

MS Word Professional Document Alignment MS Word Professional Document Alignment Table of Contents CHARACTER VS. PARAGRAPH FORMATTING...5 Character formatting...5 Paragraph Formatting...5 USING SHOW/HIDE TO REVEAL NON-PRINTING CHARACTERS...5

More information

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property

More information

Block & Inline Elements

Block & Inline Elements Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not

More information

Dreamweaver MX Overview. Maintaining a Web Site

Dreamweaver MX Overview. Maintaining a Web Site Dreamweaver MX Overview Maintaining a Web Site... 1 The Process... 1 Filenames... 1 Starting Dreamweaver... 2 Uploading and Downloading Files... 6 Check In and Check Out Files... 6 Editing Pages in Dreamweaver...

More information

What is the Box Model?

What is the Box Model? CSS Box Model What is the Box Model? The box model is a tool we use to understand how our content will be displayed on a web page. Each HTML element appearing on our page takes up a "box" or "container"

More information

Lab Introduction to Cascading Style Sheets

Lab Introduction to Cascading Style Sheets Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,

More information

USER GUIDE MADCAP FLARE Tables

USER GUIDE MADCAP FLARE Tables USER GUIDE MADCAP FLARE 2018 Tables Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished

More information

Table of Contents. MySource Matrix Content Types Manual

Table of Contents. MySource Matrix Content Types Manual Table of Contents Chapter 1 Introduction... 5 Chapter 2 WYSIWYG Editor... 6 Replace Text... 6 Select Snippet Keyword... 7 Insert Table and Table Properties... 8 Editing the Table...10 Editing a Cell...12

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create

More information

Taking Fireworks Template and Applying it to Dreamweaver

Taking Fireworks Template and Applying it to Dreamweaver Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate

More information

Introducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS

Introducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS 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

More information

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language

More information

HTML and CSS COURSE SYLLABUS

HTML and CSS COURSE SYLLABUS HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page

More information

Rich Text Editor Quick Reference

Rich Text Editor Quick Reference 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

More information

Create a new document based on default template, other available template like: memo, fax, agenda.

Create a new document based on default template, other available template like: memo, fax, agenda. Word Processing 3 Objectives: Working with Documents Enhancing Productivity Using the Application Open, close a word processing application. Open, close documents. Create a new document based on default

More information

Deccansoft Software Services

Deccansoft Software Services Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module

More information

< building websites with dreamweaver mx >

< building websites with dreamweaver mx > < building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.

More information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

Dynamic Web Templates

Dynamic Web Templates Dynamic Web Templates This section describes how to create and implement a Dynamic Web Template to ensure consistent design throughout your site and to simplify the creation, updating, and management of

More information

Creating a Website in Schoolwires Technology Integration Center

Creating a Website in Schoolwires Technology Integration Center Creating a Website in Schoolwires Technology Integration Center Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Accessing Site Manager... 2 Section Workspace Overview...

More information

How to lay out a web page with CSS

How to lay out a web page with CSS 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

More information

Blackboard staff how to guide Accessible Course Design

Blackboard staff how to guide Accessible Course Design The purpose of this guide is to help online course authors in creating accessible content using the Blackboard page editor. The advice is based primarily on W3C s Web Content Accessibility Guidelines 1.0

More information

Adobe Dreamweaver CS6 Digital Classroom

Adobe Dreamweaver CS6 Digital Classroom Adobe Dreamweaver CS6 Digital Classroom Osborn, J ISBN-13: 9781118124093 Table of Contents Starting Up About Dreamweaver Digital Classroom 1 Prerequisites 1 System requirements 1 Starting Adobe Dreamweaver

More information

HTMLnotesS15.notebook. January 25, 2015

HTMLnotesS15.notebook. January 25, 2015 The link to another page is done with the

More information

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its

More information

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage Microsoft FrontPage Unit 8 Microsoft FrontPage Introduction Lesson 8.1 Microsoft FrontPage-1 A number of Software Packages are available in market for creating a website. Among popular software s are Dreamweaver,

More information

APPENDIX THE TOOLBAR. File Functions

APPENDIX THE TOOLBAR. File Functions APPENDIX THE TOOLBAR Within the WYSIWYG editor, there are a variety of functions available to the user to properly update the page. Below is a list of all the functions available. Keep in mind that the

More information

Create a Web Page with Spry Navigation Bar. March 30, 2010

Create a Web Page with Spry Navigation Bar. March 30, 2010 Create a Web Page with Spry Navigation Bar March 30, 2010 Open a new web page by selecting File on the Menu bar, and pick Open. Select HTML as the page type and none from the layout list. Finally, we press

More information

PRESENCE. RadEditor Guide. SchoolMessenger 100 Enterprise Way, Suite A-300 Scotts Valley, CA

PRESENCE. RadEditor Guide. SchoolMessenger 100 Enterprise Way, Suite A-300 Scotts Valley, CA PRESENCE RadEditor Guide SchoolMessenger 100 Enterprise Way, Suite A-300 Scotts Valley, CA 95066 800-920-3897 www.schoolmessenger.com Contents Contents... 2 Introduction... 3 What is RadEditor?... 3 RadEditor

More information

Requirements Document

Requirements Document GROUP 9 Requirements Document Create-A-Page Matthew Currier, John Campbell, and Dan Martin 5/1/2009 This document is an outline of what was originally desired in the application in the Project Abstract,

More information

Chapter 11: Going All Out with FrontPage

Chapter 11: Going All Out with FrontPage Chapter 11: Going All Out with FrontPage Creating a Product Page Easy Web Design project, Chapter 11 Most store sites need at least one product page. On the Notebooks Web site, the Products page is divided

More information

USING STYLESHEETS TO DESIGN A WEB SITE IN DREAMWEAVER MX 2004

USING STYLESHEETS TO DESIGN A WEB SITE IN DREAMWEAVER MX 2004 USING STYLESHEETS TO DESIGN A WEB SITE IN DREAMWEAVER MX 2004 Introduction This document assumes that you are familiar with the use of a computer keyboard and mouse, have a working knowledge of Microsoft

More information

Best Practices for Using the Rich Text Editor

Best Practices for Using the Rich Text Editor Best Practices for Using the Rich Text Editor Overview Many pages in ilearn contain large text entry boxes along with many icons and pull down lists (located above the actual text entry area). These icons

More information

VCE / VET INFORMATION AND COMMUNICATION TECHNOLOGY

VCE / VET INFORMATION AND COMMUNICATION TECHNOLOGY Innovative Vocational Education and Training VCE / VET INFORMATION AND COMMUNICATION TECHNOLOGY YEAR 2 (UNITS 3 & 4) TEACHER RESOURCE CERTIFICATE III (ICT30115) CORE COMPETENCIES and SELECTED ELECTIVES

More information

Text and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions

Text and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions Text and Layout Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11 This presentation 344 345 Text in Graphics Maximum flexibility obtained by treating text as graphics and manipulating

More information

Formatting Spreadsheets in Microsoft Excel

Formatting Spreadsheets in Microsoft Excel Formatting Spreadsheets in Microsoft Excel This document provides information regarding the formatting options available in Microsoft Excel 2010. Overview of Excel Microsoft Excel 2010 is a powerful tool

More information

Best Practices for Using the Rich Text Editor

Best Practices for Using the Rich Text Editor Best Practices for Using the Rich Text Editor Overview Many pages in Sakai contain large text-entry boxes along with many icons and pull-down lists (located above the actual text entry area). These icons

More information

IMY 110 Theme 7 HTML Tables

IMY 110 Theme 7 HTML Tables IMY 110 Theme 7 HTML Tables 1. HTML Tables 1.1. Tables The HTML table model allows authors to arrange data into rows and columns of cells, just as in word processing software such as Microsoft Word. It

More information

To illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted.

To illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted. Chapter The formatting of CSS pages is carried out by setting the required styles. There are four different types of styles: Class which are custom styles that you create. You did this in Chapter 12. Tag

More information

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant

More information

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use

More information

Dreamweaver Tutorial #2

Dreamweaver Tutorial #2 Dreamweaver Tutorial #2 My web page II In this tutorial you will learn: how to use more advanced features for your web pages in Dreamweaver what Cascading Style Sheets (CSS) are and how to use these in

More information

Introduction to CSS. 2 Sep 13. Derek Peacock. An introduction to defining CSS style rules using tags, classes and ids.

Introduction to CSS. 2 Sep 13. Derek Peacock. An introduction to defining CSS style rules using tags, classes and ids. An introduction to defining CSS style rules using tags, classes and ids. 1 The HTML file contains the raw content of a web page, and the css style sheet should control all the design and look of a web

More information

The Dreamweaver Interface

The Dreamweaver Interface The Dreamweaver Interface Let s take a moment to discuss the different areas of the Dreamweaver screen. The Document Window The Document Window shows you the current document. This is where you are going

More information

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS

More information

How to deploy for multiple screens

How to deploy for multiple screens How to deploy for multiple screens Ethan Marcotte, a developer in Boston, coined the phrase responsive design to describe a website that adapts to the size of the viewer s screen. A demonstration site

More information

Creating a Website in Schoolwires

Creating a Website in Schoolwires 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

More information

Basic CSS Lecture 17

Basic CSS Lecture 17 Basic CSS Lecture 17 Robb T. Koether Hampden-Sydney College Wed, Feb 21, 2018 Robb T. Koether (Hampden-Sydney College) Basic CSSLecture 17 Wed, Feb 21, 2018 1 / 22 1 CSS 2 Background Styles 3 Text Styles

More information

GIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST

GIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple

More information

A Balanced Introduction to Computer Science, 3/E

A Balanced Introduction to Computer Science, 3/E A Balanced Introduction to Computer Science, 3/E David Reed, Creighton University 2011 Pearson Prentice Hall ISBN 978-0-13-216675-1 Chapter 2 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is

More information

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Set and modify document

More information

CSS Box Model. Cascading Style Sheets

CSS Box Model. Cascading Style Sheets CSS Box Model Cascading Style Sheets CSS box model Background Width & height Margins & padding Borders Centering content Changing display type (block vs. inline) The Box Model Background Properties Property

More information

The figure below shows the Dreamweaver Interface.

The figure below shows the Dreamweaver Interface. Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts

COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2) Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links

More information

Intermediate HTML Using Dreamweaver

Intermediate HTML Using Dreamweaver Intermediate HTML Using Dreamweaver Technical Support Services Office of Information Technology, West Virginia University OIT Help Desk: (304) 293-4444, oithelp@mail.wvu.edu http://oit.wvu.edu/training/classmat/

More information

Learning DreamWeaver MX 2004

Learning DreamWeaver MX 2004 Contents Users Notes Software Requirements...xi The DW Support Files...xi Copying the DW Support Files...xi Windows Systems...xi Macintosh Systems...xi Using the Activities in Schools... xii The Chapter

More information

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan that is shown below. Logo Page Heading

More information

CSS THE M\SS1NG MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo

CSS THE M\SS1NG MANUAL. David Sawyer McFarland. POGUE PRESS O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo CSS THE M\SS1NG MANUAL David Sawyer McFarland POGUE PRESS" O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo Table of Contents The Missing Credits Introduction xiii I Part One: CSS

More information

Dreamweaver 8. Project 5. Templates and Style Sheets

Dreamweaver 8. Project 5. Templates and Style Sheets 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

More information