Web Design - Css Layout (Page 1)

Size: px
Start display at page:

Download "Web Design - Css Layout (Page 1)"

Transcription

1 Web Design - Css Layout (Page 1) A CSS layout is made up of a set of nested div tags (rectangular containers), as seen below. We will give each div tag an ID so that we can target it with a CSS style of the same name and control how the div tag looks on screen. For example, the HTML code for the global div tag will look like this: <div id="global"></div> We will then make a corresponding CSS style ( #global ) that will control the look of that div tag. title bar body global banner menu content leftcolumn rightcolumn hr footer The colour of this area is controlled by the Background property of the Body tag. The global div tag is the overall container for the site. It defines the width and height of each page. global banner menu content leftcolumn footer rightcolumn

2 Web Design - Css Layout (Page 2) To get started, first create a New Site called Cafe Townsend. Choose Site > New Site. In the Site Set-up dialogue box type in a name for your Site. This is one of the few places in web design where you can use spaces and capitals. Name it Cafe Townsend for this exercise. Before we start putting any content on the page we will create a CSS Style Sheet that will control all the formatting for our website. Right-click on the site folder and choose New Folder from the menu. Click on the Local Site Folder button and navigate to the folder that contains your websites. Create a new folder and name it cafetownsend. Now select Advanced Settings and click on the folder icon and create a new folder in your site folder and name it images (Note: all lower case). Any images you import from outside your site will be automatically placed into this folder for you. Name the folder css (lower-case). Now we will create our first css file. Right-click on the css folder and choose New File from the menu. Click the box next to case-sensitive links checking. Name the file screen.css (lower-case). All of the CSS Style Rules we create for the site will be stored in this page. (see 04_Css Basics.pdf for more info on CSS Styles) Now double-click on the screen.css file to open it. We will now create our first style rule. On line 3 type (or copy and paste) the following code: Click Save and your files will now show in the Files Window. Now we will create a folder to store our development files. Right-click on the site folder and choose New Folder from the menu. * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; } } Use the Tab key to move these 5 lines one tab to the right. Make sure you don t miss out the closing curly bracket. Name the folder dev (lower-case). Now we will create our first HTML file. Right-click on the site folder again and choose New File from the menu. All browsers have built-in values for many items and unfortunately many of those values are different in each browser. This, more than anything else causes most of the problems we experience when trying to get our HTML pages to display consistantly on all browsers. The code above resets all the default values back to zero for all items on the page. The asterisk * is a wild card character used in many programming languages to include all items. Save the page and click on the index.html tab to select the index page. Name the file index.html (lower-case). Now double-click on the index file to open it. Select Modify > Page Properties. Now we need to link the CSS page to our HTML page. At the bottom of the CSS Styles Panel click on the Attach Style Sheet button. Click on the Title/Encoding and give the page an appropriate Title and change the Document Type (DTD) to HTML 5. Use the Browse button to navigate to the screen.css page we just made and select it. Choose Screen as the Media from the dropdown list.

3 Web Design - Css Layout (Page 3) Now we will set up some styles for browser window. At the bottom of the CSS Styles Panel click on the New Style Rule button. Choose Tag as the Selector Type, and If Dreamweaver hasn t already done it for you, enter body in the Selector Name field. Make sure the Rule Definition field says screen.css, and click OK. A new dialogue box will open where you can now specify the characteristics of the body Tag. (i.e. everything in the browser window) In the Type Category specify the styles for text on the page. These values will apply automatically to all text unless overridden by another style closer to the item being styled. Select Arial, Helvetica, sans-serif for the Font-family from the dropdown list, 12px for the Font-size and type #4C0A02 for the font colour. In the Background Category choose the background colour for the body/browser window. (i.e. #720000) In the Block Category set the Text align to center. This will automatically centre your page in the browser widow for older browsers, like Internet Explorer 7 and 8, that don t comply with standard CSS rules. In the Background Category enter the background colour you want for your page. For this exercise we ll choose #FFF (white). To counteract the center align we had to put on the body for older browsers, we will now have to set the Text Align to left in the Block Category. Global Div Now we are going to create the global div (see page 1). This container will hold all our other div Tags on our page. In the Box Category enter the width and height as shown below. Uncheck the Same for all under Margin and enter the values as below. At the top of the screen, in the Insert Panel on the Common Tab click on the Insert Div Tag button. In the dialogue box that opens enter global into the ID field and click the New CSS Style button. This sets the width of the site to 980px and the height to 720px. The auto setting for Left and Right Margin allows the page to stay centred in the browser window for modern standards compliant browsers.

4 Web Design - Css Layout (Page 4) Banner Div Menu Div Now we will create the container (div) for the banner (see page 1). Now we will create the container (div) for the menu (see page 1). Before we do this, copy all the files from the _assets folder in the Dreamwevaer Tutorials folder into the images folder of your site. Then move the two txt files that you just copied over into the dev folder of your site. In Code View, delete the holding text Content for id banner Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel the Common Tab click on the Insert Div Tag button. In Code View, delete the holding text Content for id global Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel on the Common Tab click the Insert Div Tag button. Change Insert to After tag and change <div id= global > to <div id= banner > in the next dropdown menu on the right. Change Insert to After Start of tag and change <body> to <div id= global >. Enter menu into the ID field and click the New CSS Style button. Enter banner in the ID field and click the New CSS Style button. Confirm that the dialogue box looks the same as the one above. In the Background catergory choose #000 (black ) for the Background Color. Confirm that the dialogue box looks the same as the one above. In the Background catergory choose black for the Background Color. Then click the Browse button next to the Background image field and select the banner_graphic.jpg that is now in the images folder. In the Box catergory enter the width as 940px and height as 30px. Uncheck the Same for all box and set the Top padding to 15px and the Left padding to 40px. Set the Repeat field to no-repeat. In the Box catergory enter the width as 980px and height as 115px. Click OK, and then OK again in the Insert Div Tag box. Click OK, and then OK again in the Insert Div Tag box.

5 Web Design - Css Layout (Page 5) Content Div Left Column Div Now we will create the container (div) for the content (see page 1). Now we will create the container (div) for the leftcolumn (see page 1). This container will hold two other Div Tags, the leftcolumn and the rightcolumn. In Code View, delete the holding text Content for id content Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel on the Common Tab click the Insert Div Tag button. In the dialogue box change Insert to After tag and change <div id= global > to <div id= menu >. In the Insert Panel on the Common Tab click the Insert Div Tag button. In the dialogue box change Insert to After start of tag and change <div id= global > to <div id= content >. Enter leftcolumn in the ID field and click the New CSS Style button. Enter content in the ID field and click the New CSS Style button. In the Background category choose #CC9 for the Background Color. We will remove this color later, but for now it will help us to see where the columns sit so we can check that the layout is working correctly. In the Box category enter the width as 940px and height as 440px. In the Box category enter the width as 420px and height as 410px. and set the Float to left. In the Padding section uncheck the Same for all box and set the Top padding to 40px and the Left padding to 40px. Also in the Box Category, set the Right Margin to 30px. Click OK and then OK again in the Insert Div Tag dialogue box. Then click OK, and then OK again in the Insert Div Tag box.

6 Web Design - Css Layout (Page 6) Right Column Div Clear Both <hr> Tag Now we will create the container (div) for the rightcolumn (see page 1). Because we have floated our columns to get them to sit beside each other, this can cause problems in some browsers for any content that sits below the columns. In the Insert Panel on the Common Tab click on the Insert Div Tag button. In the dialogue box change Insert to After tag and change <div id= global > to <div id= leftcolumn >. We will put in an hr (horizontal rule) tag that sits below both columns with clear both applied to it to help negate those problems. This clears the line of HTML from the effects of any floats above it. While it is possible to use Dreamweaver tools to put in an hr tag, it is faster to code it by hand. In the Code View panel put your cursor after the closing tag for the rightcolumn and press enter to create a new line. Then put in the hr tag by typing <hr>. Your code should now look like this: Enter content in the ID field and click the New CSS Style button. Dreamweaver will enter the correct info into the fields of the New CSS Rule dialogue box that next opens. Highlight the hr tag in the code and in the CSS Styles Panel, click on the New CSS Rule button. In the Background Category choose #CC3 for the Background-color. We will remove this colour later. When the New CSS Rule dialogue box that opens, change the Selector Type to Tag. Dreamweaver should automatically enter hr in the name field. If it doesn t, just type it in yourself. In the Box category enter the width as 420px and height as 410px. Set the Float to left and uncheck the same for all box for Padding and enter 30px for the Left padding. In the Box Category enter 100% for the width and choose both from the dropdown beside the Clear field. In the Border category uncheck the same for all boxes and set the Left Style to solid, the Left Width to 1px and the Left Color to #4C0A02. In the Positioning Category set the Visibility to hidden. Then click OK, and then OK again in the Insert Div Tag box.

7 Web Design - Css Layout (Page 7) Footer Div Left Column Content Now we will create the container (div) for the footer (see page 1). Now we will put some content in the left column. In the Insert Panel on the Common Tab click the Insert Div Tag button. Delete the holding text Content for id "leftcolumn" Goes Here that Dreamweaver put in the leftcolumn Div we made earlier and type About Our Restaurant. Highlight that text and in the Properties Panel (at the bottom of the screen) change the Format from None to Heading 1. In the dialogue box that opens change Insert to After tag and change <div id= global > to <div id= content >. In the CSS Styles Panel click on the New Style Rule button. Enter footer in the ID field and click the New CSS Style button. In the New CSS Rule dialogue box that opens, delete all the text from the Selector Name field except h1, and change the Selector Type to Tag. Make sure the Rule Definition field says screen.css, and click OK. In the Type catergory enter 16px for the Font-size and #000 for Color. In the Type catergory enter 11px for the Font-size and #FFF for Color. In the Background catergory choose #000 for the Background Color. Though it doesn t show here the Font-weight is already Bold. (a preset value built into all Heading Tags (h1-h6) ). In the Box catergory enter the Margin as shown here and click OK. In the Box catergory enter the Width, Height and Padding as shown below. In Design view put your cursor is at the end of the text we just formatted and press Enter on the Keyboard. Copy the text from the text_leftcolumn.txt file that is in the dev folder and paste it into the page. At the bottom of the CSS Styles Panel click on the New Style Rule button. Then click OK, and then OK again in the Insert Div Tag box. In the New CSS Rule dialogue box that opens, change the Selector Type to Class, and type.boldred in the Selector Name field. In Code View, delete the holding text Content for id footer Goes Here. In the Insert Panel on the Text Tab click on the dropdown menu button at the very end and select Copyright from the list. Back on the page, put a space after the Copyright symbol and type Copyright 2012, Cafe Townsend. Make sure the style is being defined in screen.css

8 Web Design - Css Layout (Page 8) In the Type Category enter bold for the Font-weight, #900 for the Color and click OK. On the page highlight the words The name Cafe Townsend, then in the Properties Panel click on the Class dropdown menu and change the Class from None to boldred. Insert an Image In Design View make sure your cursor is at the end of the paragraph and press Enter on the Keyboard. In the Insert Panel on the Common Tab click on the Insert Image button. Naviagte to the images folder and choose the cafe_townsend_tables.jpg. Enter Cafe Townsend inside view into the Alterante Text field. Repeat the above process for the rightcolumn using the words World Famous Chef as the h1 heading, text_rightcolumn.txt for the paragraph text, and pan_seared_sesame_crusted_tuna.jpg for the image. Highlight the words Café Townsend s visionary chef and apply the boldred style to them. At this point we can see that our layout of the columns is working OK so we can get rid of the background colour we applied to the leftcolumn and rightcolumn earlier. In the CSS Styles Panel click on the #leftcolumn style, then click the background-color and click on the trash can at the bottom of the Panel. Now do the same for the #rightcolumn background-color style. You do not need to make new h1 and.boldred styles, just apply the existing ones. (see Page 1 above for an idea of how the page should be looking ) Create the Main Menu With your cursor in Design View NOT the Code View delete the holding text Content for id "menu" Goes Here that Dreamweaver put in the menu Div we made earlier and type the words below. Press Enter after each word (except Contact Us): Make sure you have the background-color style selected NOT just the column style or you will delete the entire column. If you didn t follow the instructions above correctly and have deleted your leftcolumn or right column style you will need to select the screen.css tab before you press Cmd+Z (undo) to restore it. Create a p (paragraph) style Because we set everything on the page back to zero with the first style we made (*), it means that there is no spacing between our paragraphs, so we need to create a style to give all p tags top and bottom padding. Home Cuisine Location Reservations Contact Us If you have done the above correctly your code will now look like this: At the bottom of the CSS Styles Panel click the New Style Rule button. In the New CSS Rule dialogue box that opens, change the Selector Type to Tag and type p in the Selector Name field. Make sure the style is being defined in screen.css Things will look a little strange in Design View, but don t worry we will fix that soon. The enter we put after each item will make it easier to turn this into an unordered list later. In Design View Highlight all of the links, by clicking at the end of Contact Us and dragging up to the start of Home, and in the Propeties panel click on the Unordered List button. Your code should now look like this: In the Box catergory uncheck the Same for all box and enter 5px for the Top and Bottom padding. On the page your paragraphs will now have proper spacing between them. And, yes, the menu will still be looking strange on the page. We will fix that next.

9 Web Design - Css Layout (Page 9) Create Links Highlight each Menu item and in the Properties panel at the bottom of the screen type the file name of the page you want it to link to in to the Link field. For example the word Home we will link to this page (index.html). Give each link an appropriate name and remember to keep them lowercase (i.e. the link to the Cuisine page will be cuisine.html ). When you have done that your code should look like this:. Things should be looking better on the page now. The Float we applied to the list allows the menu items to sit up beside each other and the 110px margin spaces the menu items out. Highlight one of the links again and in the CSS Styles panel click on the New Style Rule button. In the New CSS Rule dialogue box that opens, change the Selector Type to Compound and delete all the text from the Selector Name field except #menu a. Make sure the style is being defined in screen.css Styling the Menu Highlight one of the links and at the bottom of the CSS Styles panel click on the New Style Rule button. In the New CSS Rule dialogue box that opens, if Dreamweaver hasn t already done it for you, change the Selector Type to Compound and delete all the text from the Selector Name field except #menu li. In the Type catergory enter 16px for the Font-size, choose bold for the Font-weight, #FFF for the Color, and none for the Text-decoration. I T Make sure the style is being defined in screen.css On the page the menu items should now be styled correctly and look like the image below: In the Box catergory enter Left for the Float and for the Margin uncheck Same for all and enter 110px for the Right Margin. Create the Menu Hover effect To give the user better feedback we will now make the menu items change colour when the mouse hovers over them. In the CSS Styles panel click on the New Style Rule button. In the List catergory enter none for the List-stye-type. This will get rid of the bullet point on the left of the menu items. In the New CSS Rule dialogue box that opens, if Dreamweaver hasn t already done it for you, change the Selector Type to Compound and type #menu a:hover in the Selector Name field.

10 Web Design - Css Layout (Page 10) In the Type catergory enter #C30 for the Color and click OK. Use Lorem Ipsum (holding text) for the content on the other pages. You will need to install the Lorem Ipsum generator from the Dreamweaver Extensions folder in the Resources on the server, or use the generator at Change each image by double-clicking on it and choosing a new one from the images folder. Preview the page in the browser (F12 PC or opt F12 Mac) to see the rollover working. Creating the Other Pages Now that we have created the layout for the index page making the other pages is simply a matter of duplicating the index page and changing the text and images in the content are of the new pages. To do this make sure the index page is saved then choose File > Save As to create your other pages and name the new files the same as the links you created in the menu earlier. Remember that the file names need to be exactly the same as the links (NO Capitals and NO Spaces ). For example, the second link in the menu is to cuisine.html, so that is what we would name the new file. Choose File > Save As and name the next page location.html and so on for the other pages. When you are done you will now have five pages showing in the tabs area at the top of the screen. After you change each image make sure you change the ALT text for the image. ALT text needs to be more than one or two words and must be descriptive of the image without using the words image or picture. ALT text is just like text on the page so it can have spaces and capitals. For this exercise we will use the image file names for the ALT text. When you put the new text and images in make sure they don t go outside the bounds of the column div tags. If images or text extend beyond the div tags it can break your layout in some browsers. Now it is just a matter of changing the content on each page. Before changing the content on each page make sure you change the title on each page to make it appropriate for that page. If any of your pages look like the one above you will need to either delete some of the Lorem Ipsum text or choose a smaller image so that all the content fits within the column. Then change the text and images in each page to make content relevant for the page. First change the headings on each page to make them relevant for the page. For example, on the Cuisine page the heading in the left column would be changed to Our Cuisine and so on for the other pages. Don t worry about making any changes to the right column of the location page, we will insert a Google Map in there next.

11 Web Design - Css Layout (Page 11) Inserting a Google Map Now we will insert a Google Map into the Location page. In the Location page delete all the text and images from the right column. In the code view it should look like this. When you delete the content while in Design View you need to hit delete a couple of times on the keyboard after it appears that everything is gone. Look in the Code View to make sure that you have deleted all of the content. Highlight any code between the rightcolumn opening and closing tags and delete it. Delete any code between the rightcolumn opening and closing tags. Open FireFox and go to Google Maps (maps.google.com.au). Cafe Towsend doesn t actually exist so we will use the map reference for another restaurant. Type customs house restaurant, queen street, brisbane into the search field and press the search button. Once the page has loaded, click on the link button at the top left of the screen. Then Click inside the Paste HTML to embed in website field at the bottom of the dialogue box. Copy the code and return to Dreamweaver. In Code View and that your cursor is between the opening and closing tags of the right column. Then paste the code you copied from Google. Preview the page to make sure it is rendering OK and you are finished.

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

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 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,

More information

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be

More information

Microsoft Expression Web Quickstart Guide

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,

More information

Basic tutorial for Dreamweaver CS5

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

More information

Using an external style sheet with Dreamweaver (CS6)

Using an external style sheet with Dreamweaver (CS6) Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not

More information

Creating Web Pages with Dreamweaver CS 6 and CSS

Creating Web Pages with Dreamweaver CS 6 and CSS Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding

More information

Adobe Dreamweaver CC 14 Tutorial

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

More information

Using Style Sheets for Consistency

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

More information

ITP 101 Project 3 - Dreamweaver

ITP 101 Project 3 - Dreamweaver ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with

More information

Introduction to Adobe Dreamweaver CC

Introduction to Adobe Dreamweaver CC Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

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

More information

Using Adobe Dreamweaver CS4 (10.0)

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

More information

Dreamweaver. Introduction to Editing Web Pages

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

More information

Create a Web Page with Dreamweaver

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

More information

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you

More information

Adobe Dreamweaver - Basic Web Page Tutorial

Adobe Dreamweaver - Basic Web Page Tutorial Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

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

More information

CSS for Page Layout. Key Concepts

CSS for Page Layout. Key Concepts CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control

More information

CST 150 Web Design I CSS Review - In-Class Lab

CST 150 Web Design I CSS Review - In-Class Lab CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and

More information

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.

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

More information

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver

More information

How to Edit Your Website

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

More information

MS Word 2007 practical notes

MS Word 2007 practical notes MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

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

More information

Web layout guidelines for daughter sites of Scotland s Environment

Web layout guidelines for daughter sites of Scotland s Environment Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment

More information

WEB 140 WEB DEVELOPMENT TOOLS

WEB 140 WEB DEVELOPMENT TOOLS WEEK 2 Objectives: Website basics Planning a Website Setting up a site in KompoZer Resources: WEBSITE BASICS Websites and pages can have many forms but there are some basics that are generally on all sites

More information

Creating Accessible Documents in Word 2011 for Mac

Creating Accessible Documents in Word 2011 for Mac Creating Accessible Documents in Word 2011 for Mac NOTE: Word 2011 for Mac does not offer an Accessibility Checker. After creating your document, you can double-check your work on a PC, to make sure your

More information

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)

More information

Introduction to Macromedia Dreamweaver MX

Introduction to Macromedia Dreamweaver MX Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver

More information

Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05

Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think

More information

DOING MORE WITH WORD: MICROSOFT OFFICE 2010

DOING MORE WITH WORD: MICROSOFT OFFICE 2010 University of North Carolina at Chapel Hill Libraries Carrboro Cybrary Chapel Hill Public Library Durham County Public Library DOING MORE WITH WORD: MICROSOFT OFFICE 2010 GETTING STARTED PAGE 02 Prerequisites

More information

Introduction to Word 2007

Introduction to Word 2007 Introduction to Word 2007 You will notice some obvious changes immediately after starting Word 2007. For starters, the top bar has a completely new look, consisting of new features, buttons and naming

More information

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 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

More information

Working with the Ektron Content Management System

Working with the Ektron Content Management System Working with the Ektron Content Management System Table of Contents Creating Folders Creating Content 3 Entering Text 3 Adding Headings 4 Creating Bullets and numbered lists 4 External Hyperlinks and e

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide State of Nevada Ektron Content Management System (CMS) Basic Training Guide December 8, 2015 Table of Contents Logging In and Navigating to Your Website Folders... 1 Metadata What it is, How it Works...

More information

Designing HTML Emails for Use in the Advanced Editor

Designing HTML Emails for Use in the Advanced Editor Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into

More information

Microsoft Word 2013 Tutorial

Microsoft Word 2013 Tutorial Microsoft Word 2013 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,

More information

Microsoft Word 2010. Quick Reference Guide. Union Institute & University

Microsoft Word 2010. Quick Reference Guide. Union Institute & University Microsoft Word 2010 Quick Reference Guide Union Institute & University Contents Using Word Help (F1)... 4 Window Contents:... 4 File tab... 4 Quick Access Toolbar... 5 Backstage View... 5 The Ribbon...

More information

Microsoft Word 2010 Tutorial

Microsoft Word 2010 Tutorial Microsoft Word 2010 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,

More information

Working with the new enudge responsive email styles

Working with the new enudge responsive email styles Working with the new enudge responsive email styles This tutorial assumes that you have added one of the mobile responsive colour styles to your email campaign contents. To add an enudge email style to

More information

Getting Started with KompoZer

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

More information

Mura CMS. (Content Management System) Content Manager Guide

Mura CMS. (Content Management System) Content Manager Guide Mura CMS (Content Management System) Content Manager Guide Table of Contents Table of Contents 1. LOGGING IN...1 2. SITE MANAGER...2 3. ADDING CONTENT (Pages, Folders, etc.)...6 4. WORKING WITH IMAGES...15

More information

Joomla! 2.5.x Training Manual

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

More information

Outline of CSS: Cascading Style Sheets

Outline of CSS: Cascading Style Sheets Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles

More information

HIT THE GROUND RUNNING MS WORD INTRODUCTION

HIT THE GROUND RUNNING MS WORD INTRODUCTION HIT THE GROUND RUNNING MS WORD INTRODUCTION MS Word is a word processing program. MS Word has many features and with it, a person can create reports, letters, faxes, memos, web pages, newsletters, and

More information

MICROSOFT WORD TUTORIAL

MICROSOFT WORD TUTORIAL MICROSOFT WORD TUTORIAL G E T T I N G S T A R T E D Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents,

More information

Creating Web Pages With Dreamweaver MX 2004

Creating Web Pages With Dreamweaver MX 2004 Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic

More information

Creating Personal Web Sites Using SharePoint Designer 2007

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

More information

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move WORD PROCESSING In this session, we will explain some of the basics of word processing. The following are the outlines: 1. Start Microsoft Word 11. Edit the Document cut & move 2. Describe the Word Screen

More information

Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development

Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development By Kenji Uchida Software Engineer IBM Corporation Level: Intermediate

More information

Google Docs Basics Website: http://etc.usf.edu/te/

Google Docs Basics Website: http://etc.usf.edu/te/ Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google

More information

Dreamweaver CS5. Module 2: Website Modification

Dreamweaver CS5. Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,

More information

Sage Accountants Business Cloud EasyEditor Quick Start Guide

Sage Accountants Business Cloud EasyEditor Quick Start Guide Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing

More information

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0 University of Sheffield PART 1 1.1 Getting Started 1. Log on to the computer with your usual username

More information

TUTORIAL 4 Building a Navigation Bar with Fireworks

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

More information

Slicing and Coding the Navigation Background in CSS

Slicing and Coding the Navigation Background in CSS CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step

More information

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a

More information

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web

More information

Digital Marketing EasyEditor Guide Dynamic

Digital Marketing EasyEditor Guide Dynamic Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury

More information

Website Builder Documentation

Website Builder Documentation Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects

More information

SiteBuilder 2.1 Manual

SiteBuilder 2.1 Manual SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved. Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can

More information

Microsoft Access 2010 handout

Microsoft Access 2010 handout Microsoft Access 2010 handout Access 2010 is a relational database program you can use to create and manage large quantities of data. You can use Access to manage anything from a home inventory to a giant

More information

6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field.

6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field. Adobe Acrobat Professional X Part 3 - Creating Fillable Forms Preparing the Form Create the form in Word, including underlines, images and any other text you would like showing on the form. Convert the

More information

JJY s Joomla 1.5 Template Design Tutorial:

JJY s Joomla 1.5 Template Design Tutorial: JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding

More information

-SoftChalk LessonBuilder-

-SoftChalk LessonBuilder- -SoftChalk LessonBuilder- SoftChalk is a powerful web lesson editor that lets you easily create engaging, interactive web lessons for your e-learning classroom. It allows you to create and edit content

More information

HOW TO: INSERT A JPEG IN AN EMAIL.

HOW TO: INSERT A JPEG IN AN EMAIL. HOW TO: INSERT A JPEG IN AN EMAIL. Have you been wanting to use marketing materials from Legal & General America but don t know how? Here s the answer. WHAT? Email is one of the fastest ways to send promotional

More information

Creating a Newsletter with Microsoft Word

Creating a Newsletter with Microsoft Word Creating a Newsletter with Microsoft Word Frank Schneemann In this assignment we are going to use Microsoft Word to create a newsletter that can be used in your classroom instruction. If you already know

More information

NDSU Technology Learning & Media Center. Introduction to Google Sites

NDSU Technology Learning & Media Center. Introduction to Google Sites NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants

More information

Using Microsoft Word. Working With Objects

Using Microsoft Word. Working With Objects Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects

More information

Web Editing Basics 1 TOPICS

Web Editing Basics 1 TOPICS Web Editing Basics 1 TOPICS 1. Opening your site.1 2. What you see.1 3. Navigate to your Web page 2 4. Make text edits...2 5. Prepare documents and images for the Web 3 6. Move documents and images from

More information

WHAT S NEW IN WORD 2010 & HOW TO CUSTOMIZE IT

WHAT S NEW IN WORD 2010 & HOW TO CUSTOMIZE IT WHAT S NEW IN WORD 2010 & HOW TO CUSTOMIZE IT The Ribbon... 2 Default Tabs... 2 Contextual Tabs... 2 Minimizing and Restoring the Ribbon... 3 Customizing the Ribbon... 3 A New Graphic Interface... 5 Live

More information

Dreamweaver CS5. Module 1: Website Development

Dreamweaver CS5. Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA

More information

Dreamweaver CS6 Basics

Dreamweaver CS6 Basics Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a

More information

Microsoft Word 2010 Training

Microsoft Word 2010 Training Microsoft Word 2010 Training Microsoft Word 102 Instructor: Debbie Minnerly Course goals Learn how to work with paragraphs. Set tabs and work with tables. Learn about styles Use the spelling and grammar

More information

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits

More information

Website Development Komodo Editor and HTML Intro

Website Development Komodo Editor and HTML Intro Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of

More information

Create a Poster Using Publisher

Create a Poster Using Publisher Contents 1. Introduction 1. Starting Publisher 2. Create a Poster Template 5. Aligning your images and text 7. Apply a background 12. Add text to your poster 14. Add pictures to your poster 17. Add graphs

More information

Creating trouble-free numbering in Microsoft Word

Creating trouble-free numbering in Microsoft Word Creating trouble-free numbering in Microsoft Word This note shows you how to create trouble-free chapter, section and paragraph numbering, as well as bulleted and numbered lists that look the way you want

More information

Mastering the JangoMail EditLive HTML Editor

Mastering the JangoMail EditLive HTML Editor JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop

More information

Handout: Word 2010 Tips and Shortcuts

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

More information

paragraph(s). The bottom mark is for all following lines in that paragraph. The rectangle below the marks moves both marks at the same time.

paragraph(s). The bottom mark is for all following lines in that paragraph. The rectangle below the marks moves both marks at the same time. MS Word, Part 3 & 4 Office 2007 Line Numbering Sometimes it can be helpful to have every line numbered. That way, if someone else is reviewing your document they can tell you exactly which lines they have

More information

Website Editor User Guide

Website Editor User Guide CONTENTS Minimum System Requirements... 3 Design Your Website... 3 Choosing your Theme... 4 Choosing your Header Style... 4-5 Website Content Editor... 6 Text Editor Toolbar features... 6 Main Menu Items...

More information

Making a Web Page with Microsoft Publisher 2003

Making a Web Page with Microsoft Publisher 2003 Making a Web Page with Microsoft Publisher 2003 The first thing to consider when making a Web page or a Web site is the architecture of the site. How many pages will you have and how will they link to

More information

ADOBE MUSE. Building your first website

ADOBE MUSE. Building your first website ADOBE MUSE Building your first website Contents Chapter 1... 1 Chapter 2... 11 Chapter 3... 20 Chapter 4... 30 Chapter 5... 38 Chapter 6... 48 Chapter 1 Installing the software and setting up the sample

More information

Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College *

Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Some Student Organizations are on our web server called

More information

Microsoft Migrating to Word 2010 from Word 2003

Microsoft Migrating to Word 2010 from Word 2003 In This Guide Microsoft Word 2010 looks very different, so we created this guide to help you minimize the learning curve. Read on to learn key parts of the new interface, discover free Word 2010 training,

More information

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux

More information

Structuring your essays, theses and reports using Word 2011 for Mac

Structuring your essays, theses and reports using Word 2011 for Mac Structuring your essays, theses and reports using Word 2011 for Mac A guide to tools in Word that will assist in the structuring of an essay, thesis or report This workbook is aimed at those who use Word

More information

Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4

Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4 CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...

More information

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...

More information

EMAIL QUICK START GUIDE

EMAIL QUICK START GUIDE IT Services Microsoft Outlook 2010 EMAIL QUICK START GUIDE Contents What is Outlook?...2 Quick Guide to Email...2 Create a new e-mail message...2 Forward or reply to an e-mail message...2 Creating new

More information

Computer Training Centre University College Cork. Excel 2013 Level 1

Computer Training Centre University College Cork. Excel 2013 Level 1 Computer Training Centre University College Cork Excel 2013 Level 1 Table of Contents Introduction... 1 Opening Excel... 1 Using Windows 7... 1 Using Windows 8... 1 Getting Started with Excel 2013... 2

More information

Excel 2007: Basics Learning Guide

Excel 2007: Basics Learning Guide Excel 2007: Basics Learning Guide Exploring Excel At first glance, the new Excel 2007 interface may seem a bit unsettling, with fat bands called Ribbons replacing cascading text menus and task bars. This

More information

Decision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide

Decision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide Decision Support AITS University Administration Web Intelligence Rich Client 4.1 User Guide 2 P age Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence

More information

Mobile Web Site Style Guide

Mobile Web Site Style Guide YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University

More information

Creating Your Personal Website

Creating Your Personal Website Creating Your Personal Website These instructions will show you how to create a personal webpage for CSULB students using Dreamweaver MX 2004. The page will consist of a title, background image, text,

More information

KOMPOZER Web Design Software

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

More information

Microsoft PowerPoint 2010 Handout

Microsoft PowerPoint 2010 Handout Microsoft PowerPoint 2010 Handout PowerPoint is a presentation software program that is part of the Microsoft Office package. This program helps you to enhance your oral presentation and keep the audience

More information