Page Layout Using Tables
|
|
- Sarah Davidson
- 5 years ago
- Views:
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 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 informationICT 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 informationHow 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 Length : 2 Days Audience(s) : New or existing users Level : 3 Technology : Adobe Dreamweaver CS6 program Delivery Method : Instructor-Led (Classroom) Course
More informationHow 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 informationChapter 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 informationChapter 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 informationCreating 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 informationEDITOR 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 informationDreamweaver 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 informationORB 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 informationCreating 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 informationPage 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 informationTable 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 informationICT 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 informationDreamweaver 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 informationHow 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 informationDreamweaver 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 informationUsing 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 informationStyles, 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 informationLayout 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 informationOverview 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 informationTutorial 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 informationDiscuss 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 informationKillTest *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 informationCOMSC-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 informationLearning 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 informationCreating 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 informationA 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 informationADOBE 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 informationHtml 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 informationINFS 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 informationINFS 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 informationNauticom 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 informationProject 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 informationWeb 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 informationADOBE 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 informationADOBE 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 informationUsing 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 informationMS 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 informationCS 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 informationBlock & 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 informationDreamweaver 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 informationWhat 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 informationLab 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 informationUSER 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 informationTable 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 informationCOMSC-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 informationTaking 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 informationIntroducing 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 informationCSC 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 informationHTML 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 informationRich 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 informationCreate 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 informationDeccansoft 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 > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
More informationUsing 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 informationDynamic 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 informationCreating 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 informationHow 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 informationBlackboard 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 informationAdobe 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 informationrecall: 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 informationUnit 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 informationAPPENDIX 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 informationCreate 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 informationPRESENCE. 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 informationRequirements 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 informationChapter 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 informationUSING 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 informationBest 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 informationVCE / 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 informationText 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 informationFormatting 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 informationBest 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 informationIMY 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 informationTo 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 informationUsing 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 informationSession 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 informationDreamweaver 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 informationIntroduction 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 informationThe 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 informationWelcome 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 informationHow 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 informationCreating 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 informationBasic 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 informationGIMP 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 informationA 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 informationDreamweaver 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 informationCSS 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 informationThe 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 informationWanted! 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 informationCOMP519 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 information8/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 informationIntermediate 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 informationLearning 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 informationUsing 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 informationCSS 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 informationDreamweaver 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