Objectives. Designing a Web Site with Frames. Introducing Frames. Advantages to Using Frames. CIS 141 Professor Rasley
|
|
|
- Ezra Powers
- 7 years ago
- Views:
Transcription
1 Objectives Designing a Web Site with Frames Tutorial 5 CIS 141 Professor Rasley Describe uses of frames in a Web site Layout frames within a browser window Display a document within a frame Format the appearance of frames with margin widths, removing scrollbars, and specifying resize frames Direct a link target to a specific frame Direct a link target outside of a frame layout Add page content for browsers that do not support frames Incorporate an inline frame in a page New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 2 Introducing Frames A frame is a section of the browser window capable of displaying the contents of an entire Web page. For example: the frame on the left may display the contents of a Web page containing a list of hyperlinks the frame on the right may display a Web page with product information Advantages to Using Frames Frames can give more flexibility in designing your Web presentation You can place information in different Web pages, removing redundancy Frames can make your site easier to manage Frames allows you to update only a few files rather than the whole Web designers advocate creating both framed and non-framed versions for a Web site and giving users the option of which one to use New Perspectives on HTML, XHTML, and DHTML, Comprehensive 3 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 4 1
2 Disadvantages to Using Frames The browser has to load multiple HTML files before a user can view the contents of the site increasing the waiting time for potential customers Some older browsers cannot display frames Some users simply do not like using frames Some web authors feel that frames are too constricting, limiting flexibility in designing the layout of a Web page There is concern that frames can use up valuable screen space The source code is removed from the user A common use of frames: displaying a table of contents in one frame, while showing individual pages from the site on the another. An Example of Frames New Perspectives on HTML, XHTML, and DHTML, Comprehensive 5 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 6 Planning Your Frames An Example of a Frame Layout Sketch Before you start creating your frames, it is a good idea to plan their appearance and how they are to be used. There are several issues to consider: What information will be displayed in each frame? How do you want the frames placed on the Web page? What is the size of each frame? Which frames will be static (always showing the same content)? What Web pages will users first see when they access the site? Should users be permitted to resize the frame to suit their needs? New Perspectives on HTML, XHTML, and DHTML, Comprehensive 7 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 8 2
3 Creating a frameset A frameset describes how the frames are organized; they are defined by rows or columns, but not both. You must choose to layout your frames in either rows or columns To create a frame layout, you will use the rows and cols attributes of the <frameset> the rows attribute creates a row of frames the cols attribute creates a column of frames Frames laid out in columns Frames laid out in rows Frames Defined in either Rows or Columns New Perspectives on HTML, XHTML, and DHTML, Comprehensive 9 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 10 Creating a Frameset The Frame Syntax The <frameset> tag is used to store the definitions of the various frames in the file. These definitions will typically: include the size and location of the frame include the Web pages the frames display The <frameset> code does not include an opening and closing <body> tag the reason for this is that this HTML file displays the contents of other Web pages; technically, it is not a Web page The syntax for creating a row or column frame layout is: <frameset rows= row1,row2,row3,... > </frameset> or <frameset cols= column1,column2,column3,... > </frameset> New Perspectives on HTML, XHTML, and DHTML, Comprehensive 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 12 3
4 Specifying a Frame Source To specify a source for a frame, use the <frame> tag with the syntax: <frame src= url /> The URL is the filename and location of the page that you want to load. You must insert the <frame> tag between the opening and closing <frameset> tags Because this is the first <frame> tag, the browser displays head.htm in the first frame row. Note that using the comment tag and indenting the <frame> tag a few spaces helps make your HTML code easier to follow and interpret. Inserting a Frame for the Head.htm File Frame source New Perspectives on HTML, XHTML, and DHTML, Comprehensive 13 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 14 Nesting Framesets Remember that a frameset is defined by rows or columns, but not both To create frames using both rows and columns, one frameset must be nested inside another The interpretation of the rows and cols attributes changes slightly for example, a row height of 25% does not mean 25% of the display area, but rather 25% of the height of the frame into which that row has been inserted (or nested) Creating a Nested Set of Frames in the Second Frame Row two columns of frames nested in the second frame row New Perspectives on HTML, XHTML, and DHTML, Comprehensive 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 16 4
5 Nested Frames Inserting frame columns New Perspectives on HTML, XHTML, and DHTML, Comprehensive 17 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 18 Result of Web Site with Nested Frames Formatting a Frames You can control three attributes of a frame: scroll bars the size of the margin between the source document and the frame border whether or not the user is allowed to change the size of the frame New Perspectives on HTML, XHTML, and DHTML, Comprehensive 19 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 20 5
6 Hiding and Displaying Scroll Bars By default, scroll bars are displayed when the content of the source page cannot fit within the frame You can override the default setting using the scrolling attribute The scrolling syntax is: scrolling= type scrolling can either be yes (to always display scroll bars) or no (to never display scroll bars) If you don t specify a setting for the scrolling attribute, the browser displays scroll bars when necessary Setting Frame Margins The following should be consider for frame margins: the browser determines the amount of space between the content of the page and the frame border occasionally, the browser sets the margin between the border and the content too large the margin should be big enough to keep the source s text or images from running into the frame s borders the margin should not take up too much space, because you typically want to display as much of the source as possible New Perspectives on HTML, XHTML, and DHTML, Comprehensive 21 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 22 Specifying Margins Syntax The syntax for specifying margins for a frame is: marginheight= value marginwidth= value > marginheight is the amount of space, in pixels, above and below the content of the page in the frame marginwidth is the amount of space to the left and right of the page If you specify only one, the browser assumes that you want to use the same value for both Setting margin values is a process of trial and error as you determine what combination of margin sizes looks best Specifying the Margin Sizes for the Frames height of the margin text for the logo frame will be 0 pixels height of the margin for the home page will be 0 pixels and the width of the margin will be 10 pixels New Perspectives on HTML, XHTML, and DHTML, Comprehensive 23 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 24 6
7 Controlling Frame Resizing By default, users can resize frame borders in the browser by simply dragging a frame border Some Web designers prefer to freeze, or lock, frames, so that users cannot resize them this ensures that the Web site displays as the designer intended The syntax for controlling frame resizing is: noresize= noresize The noresize attribute is included within the <frame> tag to prevent users from modifying the size of the frame Working with Frames and Links By default, clicking a link within a frame opens the linked file inside the same frame You can display hyperlinks in many ways: in a different frame in a new window in the entire window When you want to control the behavior of links in a framed page, there are two required steps: give each frame on the page a name point each hyperlink to one of the named frames New Perspectives on HTML, XHTML, and DHTML, Comprehensive 25 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 26 Files and links in a Web Site Assigning a Name to a Frame To assign a name to a frame, add the name attribute to the frame tag The syntax for this attribute is: <frame src= url name= name /> case is important in assigning names: information is considered a different name than INFORMATION the frame name New Perspectives on HTML, XHTML, and DHTML, Comprehensive 27 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 28 7
8 Specifying a Link Target You can use the target attribute to open a page in a specific frame The syntax for this is: target= name When a page contains dozens of links that should all open in the same frame, HTML provides a way to specify a target frame for all the hyperlinks within a single page Using Reserved Target Names Reserved target names are special names that can be used in place of a frame name as the target They are useful in situations: where the name of the frame is unavailable when you want the page to appear in a new window when you want the page to replace the current browser window All reserved target names begin with the underscore character ( _ ) to distinguish them from other target names Reserved target names are case-sensitive, they must be entered in lowercase the Web page will appear in the pages frame New Perspectives on HTML, XHTML, and DHTML, Comprehensive 29 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 30 Using Reserved Target Names Using the <noframes> Tag Use the <noframes> tag to allow your Web site to be viewable using browsers that do or do not support frames When a browser that supports frames processes this code, it ignores everything within the <noframes> tags and concentrates solely on the code within the <frameset> tags. When a browser that doesn t support frames processes this code, it doesn t know what to do with the <frameset> and <noframes> tags, so it ignores them When you use the <noframes> tag, you must include <body> tags, this way, both types of browsers are supported within a single HTML file New Perspectives on HTML, XHTML, and DHTML, Comprehensive 31 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 32 8
9 The <noframes> Syntax Frameless Version of a Web Site The syntax for the <noframes> tag is: <html> <head> <title>title</title> </head> <frameset> frames <noframes> <body> page content </body> </noframes> </frameset> </html> New Perspectives on HTML, XHTML, and DHTML, Comprehensive 33 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 34 Working with Frame Borders There are additional attributes you can apply to the <frame> tag that allow you to change border size and appearance. For example: you can remove borders from your frames to free up more space for text and images you can change the color of the frame border so that it matches or complements the color scheme for your Web site Setting the Border Color To change the color of a frame s border, use the bordercolor attribute The attribute can be applied either to an entire set of frames, using the <frameset> tag, or to individual frames, using the <frame> tag The syntax for this attribute is: bordercolor= color > Applying the bordercolor attribute to the <frameset> tag affects all of the frames and nested frames within the set If you apply the bordercolor attribute to a single <frame> tag, that particular color of the border changes in Internet Explorer, but in Netscape Navigator, all of the frame borders change View the page using different browsers and browser versions New Perspectives on HTML, XHTML, and DHTML, Comprehensive 35 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 36 9
10 Setting the Border Width Another way of modifying frame borders is to change their widths using the border attribute The border attribute can be used only in the <frameset> tag, and not in individual <frame> tags The syntax for the border attribute is: <frame frameborder= value > value is the width of the frame borders in pixels Removing the Frame Borders Some Web designers prefer not to show frame borders in order to give the illusion of having a single Web page rather than three separate ones, while other Web designers believe that hiding frame borders can confuse users as they navigate the Web site. setting the width of the frame border to zero has the effect of removing the border New Perspectives on HTML, XHTML, and DHTML, Comprehensive 37 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 38 Creating Inline Frames Another way of using frames is to create a floating frame An inline frame, or floating frame, is displayed as a separate box or window within a Web page The frame can be placed within a Web page in much the same way as an inline image The Floating Frames Syntax The syntax for a floating frame is: <iframe src= url > alternate content </iframe> URL is the name and location of the file you want to display in the floating frame the alternate content is the content you want displayed in the browser that don t support inline frames in addition to these attributes, you can use some of the other attributes you used with fixed frames, such as the marginwidth, marginheight, and name attributes New Perspectives on HTML, XHTML, and DHTML, Comprehensive 39 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 40 10
11 Attributes of inline frames Creating an inline frame HTML code to create an inline frame New Perspectives on HTML, XHTML, and DHTML, Comprehensive 41 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 42 Viewing a Floating Frame New Perspectives on HTML, XHTML, and DHTML, Comprehensive 43 11
Frames. In this chapter
Frames 2007 NOTES This article was originally published in 2003 as Chapter 12 of Learning Web Design, 2nd edition. Since the time of its publication, frames have become all but extinct, particularly for
Web. 2 HTML Frames. core. programming. Agenda
core Web programming HTML Frames 1 2001-2003 Marty Hall, Larry Brown http:// Agenda Advantages and disadvantages of frames FRAME template Defining rows and cols in a FRAMESET Common FRAME and FRAMESET
HTML FRAMES. There are few drawbacks with using frames, so it's never recommended to use frames in your webpages:
http://www.tutorialspoint.com/html/html_frames.htm HTML FRAMES Copyright tutorialspoint.com HTML frames are used to divide your browser window into multiple sections where each section can load a separate
New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
Lesson Review Answers
Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.
Joomla Article Advanced Topics: Table Layouts
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
Microsoft FrontPage 2003
Information Technology Services Kennesaw State University Microsoft FrontPage 2003 Information Technology Services Microsoft FrontPage Table of Contents Information Technology Services...1 Kennesaw State
PE Content and Methods Create a Website Portfolio using MS Word
PE Content and Methods Create a Website Portfolio using MS Word Contents Here s what you will be creating:... 2 Before you start, do this first:... 2 Creating a Home Page... 3 Adding a Background Color
Create a GAME PERFORMANCE Portfolio with Microsoft Word
Create a GAME PERFORMANCE Portfolio with Microsoft Word Planning A good place to start is on paper. Get a sheet of blank paper and just use a pencil to indicate where the content is going to be positioned
ADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
Creating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
Dreamweaver and Fireworks MX Integration Brian Hogan
Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The
WEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
Integrating Luceo with your Website Using iframes. Version 4.1 Jan 15, 2013
Integrating Luceo with your Website Using iframes Version 4.1 Jan 15, 2013 Table of Contents Table of Contents... 2 Preface... 3 Confidential Information... 3 Intellectual Property... 3 Quick Start Guide...
Create a Web Page with Dreamweaver
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.
Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Creating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2
HTML, XHTML & CSS: Introduction, 1-2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
Coding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
Please select one of the topics below.
Thanks for choosing WYSIWYG Web Builder! In this section we will give a short introduction to Web Builder so you can start building your web site in (almost) no time. Please select one of the topics below.
Web Authoring. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
WebFOCUS BI Portal: S.I.M.P.L.E. as can be
WebFOCUS BI Portal: S.I.M.P.L.E. as can be Author: Matthew Lerner Company: Information Builders Presentation Abstract: This hands-on session will introduce attendees to the new WebFOCUS BI Portal. We will
QUESTION BANK COMPUTER SCIENCE. Class VIII LESSON-1 INTRODUCTION TO MS ACCESS
QUESTION BANK COMPUTER SCIENCE Class VIII LESSON-1 INTRODUCTION TO MS ACCESS 1. What is a database? 2. Explain various types of database? 3. What is Normalization? Why is it required? 4. Database 5. Table
Cut-to-the-Chase Series Web Foundations. HTML 101 - Assignment. By Eric Matthews 2001. Visit us at: www.anglesanddangles.com
Cut-to-the-Chase Series Web Foundations HTML 101 - Assignment By Eric Matthews 2001 Visit us at: www.anglesanddangles.com General Requirements All of your work should conform to the general requirements.
How To Use Mugeda Content
Using Mugeda Content The Mugeda Team www.mugeda.com May 19, 2013 How to Use Created Content Three basic methods Direct export Publish to Mugeda CDN Upload to your own or 3 rd party server Direct Export
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
WebCT 4.x: HTML Editor
Competencies After reading this document, you will be able to: Employ the HTML Editor capabilities to create and publish content. About HTML Editor The HTML editor provides word-processor-like features
Q&As: Microsoft Excel 2013: Chapter 2
Q&As: Microsoft Excel 2013: Chapter 2 In Step 5, why did the date that was entered change from 4/5/10 to 4/5/2010? When Excel recognizes that you entered a date in mm/dd/yy format, it automatically formats
Creating a Web Site with Publisher 2010
Creating a Web Site with Publisher 2010 Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This document may be
IAS Web Development using Dreamweaver CS4
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute
GUIDELINES FOR SCHOOL WEB PAGES
GUIDELINES FOR SCHOOL WEB PAGES Introduction Mountain Home Public School District School web pages are public documents welcoming the outside world to our school and linking our students and staff to outside
Joomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
Table of Contents. What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps.
The Beginners Guide Table of Contents 03 04 05 06 34 35 What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps See Live Examples Need More Help? What is ProSite?
TUTORIAL 4 Building a Navigation Bar with Fireworks
TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar
Adobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 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
Hypercosm. Studio. www.hypercosm.com
Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks
Contents. Microsoft Office 2010 Tutorial... 1
Microsoft Office 2010 Tutorial Contents Microsoft Office 2010 Tutorial... 1 Find your way through long documents with the new Document Navigation pane and Search... 4 Adjust the spaces between lines or
3. Add and delete a cover page...7 Add a cover page... 7 Delete a cover page... 7
Microsoft Word: Advanced Features for Publication, Collaboration, and Instruction For your MAC (Word 2011) Presented by: Karen Gray (kagray@vt.edu) Word Help: http://mac2.microsoft.com/help/office/14/en-
Create a Google Site in DonsApp
Create a Google Site in DonsApp 1 Google Web Site Interactive. Constructivist. Collaborative. Communities. WHAT IS GOOGLE SITE? With one single click, you can create a website without any knowledge of
Microsoft Office PowerPoint 2003. Creating a new presentation from a design template. Creating a new presentation from a design template
Microsoft Office PowerPoint 2003 Tutorial 2 Applying and Modifying Text and Graphic Objects 1 Creating a new presentation from a design template Click File on the menu bar, and then click New Click the
Quick Start Guide To: Using the Sage E-marketing Online Editor
Quick Start Guide To: Using the Sage E-marketing Online Editor When you first enter the Sage E-marketing online editor, you will see two tabs on the left-hand side of the screen: Content Editor and Customize
Google Sites: Site Creation and Home Page Design
Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and
Principles of Web Design 6 th Edition. Chapter 12 Responsive Web Design
Principles of Web Design 6 th Edition Chapter 12 Responsive Web Design Objectives Recognize the need for responsive web design Use media queries to apply conditional styles Build a basic media query Create
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
Creating Accessible Word Forms. Contents. Introduction
Word 2010: Contents Word 2010:... 1 Introduction... 1 Form Specifications... 2 File Type... 2 Zoom Level... 2 Form Margins... 2 Table Layout... 2 Borders... 4 Row Height... 5 Headers... 5 Top Row... 5
Drupal Training Guide
Drupal Training Guide Getting Started Drupal Information page on the IT site: http://it.santarosa.edu/drupal On this page is information about Drupal sign up, what Drupal is, which is a content management
By Glenn Fleishman. WebSpy. Form and function
Form and function The simplest and really the only method to get information from a visitor to a Web site is via an HTML form. Form tags appeared early in the HTML spec, and closely mirror or exactly duplicate
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
Understanding the Basic Template Editor
Understanding the Basic Template Editor The basic template editor in Sage E-marketing for Sage CRM is designed for customers that have limited HTML design experience, but would like to customize their
How to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
General Electric Foundation Computer Center. FrontPage 2003: The Basics
General Electric Foundation Computer Center FrontPage 2003: The Basics September 30, 2004 Alternative Format Statement This publication is available in alternative media upon request. Statement of Non-discrimination
Introduction to dobe Acrobat XI Pro
Introduction to dobe Acrobat XI Pro Introduction to Adobe Acrobat XI Pro is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License. To view a copy of this
Getting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
CREATE A WEB PAGE WITH LINKS TO DOCUMENTS USING MICROSOFT WORD 2007
CREATE A WEB PAGE WITH LINKS TO DOCUMENTS USING MICROSOFT WORD 2007 For Denise Harrison s College Writing Course students Table of Contents Before you Start: Create documents, Create a Folder, Save documents
Developing Website Using Tools
7 Developing Website Using Tools 7.1 INTRODUCTION A number of Software Packages are available in market for creating a website. Among popular softwares are Dreamweaver, Microsoft FrontPage and Flash. These
DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site
Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit
Web Developer Jr - Newbie Course
Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance
Insert/Edit Link: Popup Tab
Overview Note: The information on this page pertains to the old WYSIWYG Editor. For information about the new JustEdit Editor and the JustEdit toolbar, visit the JustEdit page. The Popup tab of the Insert/Edit
How to Build a SharePoint Website
How to Build a SharePoint Website Beginners Guide to SharePoint Overview: 1. Introduction 2. Access your SharePoint Site 3. Edit Your Home Page 4. Working With Text 5. Inserting Pictures 6. Making Tables
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
To change title of module, click on settings
HTML Module: The most widely used module on the websites. This module is very flexible and is used for inserting text, images, tables, hyperlinks, document downloads, and HTML code. Hover the cursor over
Voluntary Product Accessibility Template Blackboard Learn Release 9.1 April 2014 (Published April 30, 2014)
Voluntary Product Accessibility Template Blackboard Learn Release 9.1 April 2014 (Published April 30, 2014) Contents: Introduction Key Improvements VPAT Section 1194.21: Software Applications and Operating
Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)
Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
The Home link will bring you back to the Dashboard after. Workflows alert you to outstanding assets waiting for approval or review.
Gonzaga University s content management system (CMS) is a software program that allows individuals to create and edit departmental websites. This tutorial demonstrates commonly used CMS functions. For
NUI Galway Web Training Presentation
NUI Galway Web Training Presentation Welcome Objective To provide training on how best to maintain and update University Web pages while also providing an introduction to systems & services provided by
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
Taleo Enterprise. Career Section Branding Definition. Version 7.5
Taleo Enterprise Career Section Branding Definition Version 7.5 March 2010 Confidential Information It shall be agreed by the recipient of the document (hereafter referred to as the other party ) that
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
WHAT S NEW IN OBIEE 11.1.1.7
Enterprise Data Management OBI Author Training, March 2015 WHAT S NEW IN OBIEE 11.1.1.7 NEW PRESENTATION FEATURES VIEWS 1) Recommended Visualizations Feature When you create a new view, OBIEE looks at
Chapter 20 Enhancing your Biology course and lab WWW pages with the latest in HTML, CGI, and Java script features
Chapter 20 Enhancing your Biology course and lab WWW pages with the latest in HTML, CGI, and Java script features Glenn MacDougall Academic Development Centre Acadia University Wolfville, Nova Scotia,
Training Schedule: Third Wednesday of every month from 1:30 PM to 3:00 PM in the ARKU Team Meeting Room ARKU A354
OU Campus 101 Training Schedule: Third Wednesday of every month from 1:30 PM to 3:00 PM in the ARKU Team Meeting Room ARKU A354 Class Description: This introductory course is designed specifically to train
Content Author's Reference and Cookbook
Sitecore CMS 6.5 Content Author's Reference and Cookbook Rev. 110621 Sitecore CMS 6.5 Content Author's Reference and Cookbook A Conceptual Overview and Practical Guide to Using Sitecore Table of Contents
ebooks: Exporting EPUB files from Adobe InDesign
White Paper ebooks: Exporting EPUB files from Adobe InDesign Table of contents 1 Preparing a publication for export 4 Exporting an EPUB file The electronic publication (EPUB) format is an ebook file format
Editing the Web Template Files
Editing the Web Template Files This tutorial describes the process of editing the PHP files to make global changes to the layout, color, font, and text within the CONTENTdm Web templates. This documentation
PASTPERFECT-ONLINE DESIGN GUIDE
PASTPERFECT-ONLINE DESIGN GUIDE INTRODUCTION Making your collections available and searchable online to Internet visitors is an exciting venture, now made easier with PastPerfect-Online. Once you have
Creating a Newsletter
Creating a Newsletter Publisher Templates Toolbars and Guides Color Schemes Font Schemes Graphics Text Boxes Text overflow Import document Master Pages Design Gallery Publication Designs Microsoft Publisher
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE
USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE 1 TABLE OF CONTENTS Introduction 3 Parts of the Government Web Template (GWT) 4 Logging In and Getting Started 5 GWT Joomla! Module Map 8 Editing the Top Bar
Introduction 3. Getting Familiar With Presence Builder... 4. Creating and Editing Websites 6
Contents Introduction 3 Getting Familiar With Presence Builder... 4 Creating and Editing Websites 6 Importing Sites from SiteBuilder 4.5... 7 Editing Websites... 9 Structure: Pages and Navigation... 9
Madison Area Technical College. MATC Web Style Guide
Madison Area Technical College MATC Web Style Guide July 27, 2005 Table of Contents Topic Page Introduction/Purpose 3 Overview 4 Requests for Adding Content to the Web Server 3 The MATC Public Web Template
Handout: Word 2010 Tips and Shortcuts
Word 2010: Tips and Shortcuts Table of Contents EXPORT A CUSTOMIZED QUICK ACCESS TOOLBAR... 2 IMPORT A CUSTOMIZED QUICK ACCESS TOOLBAR... 2 USE THE FORMAT PAINTER... 3 REPEAT THE LAST ACTION... 3 SHOW
Cascade Server. End User Training Guide. OIT Training and Documentation Services OIT TRAINING AND DOCUMENTATION. oittraining@uta.
OIT Training and Documentation Services Cascade Server End User Training Guide OIT TRAINING AND DOCUMENTATION oittraining@uta.edu http://www.uta.edu/oit/cs/training/index.php 2013 CONTENTS 1. Introduction
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
1. Open the Practice web site. 2. Open the favorite.htm file. 3. Select the text to be used as the hyperlink for the first favorite web site.
FrontPage 2003 Lesson 13 - Hyperlinks Types of Hyperlinks Hyperlinks are the primary method used to navigate between pages and Web sites. Links can point to other web pages, web sites, graphics, files,
Using FrontPage 2000 to Create Forms
Using FrontPage 2000 to Create Forms Academic Computing Support Information Technology Services Tennessee Technological University October 2002 1. Introduction Using FrontPage 2000 you can create simple
Schoolwires Staff Website Reference Guide
CONTENTS Signing In... 2 Changing Your Web Account Password... 3 Adding a New Page... 7 Updating A Web Page... 10 Schoolwires Staff Website Reference Guide Inserting an Email Link... 12 Inserting a Web
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008 To do this tutorial you will need Flash 8 or higher, Dreamweaver 8 or higher. You will also need some movie clips
WYSIWYG Editor in Detail
WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages