Lesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder.

Size: px
Start display at page:

Download "Lesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder."

Transcription

1 Lesson 1 using Dreamweaver CS3 To get started on your web page select the link below and copy (Save Picture As) the images to your image folder. Click here to get images for your web page project. (Note: if you have your own images you can use them) Click here for information doc for basic programing needed to create a web page using CSS, JavaScript and HTML. We're going to assume in these lesson that we're creating web pages for a screen resolution of 1024 x 768 (average screen resolution) and centering the web page. So when we start adding CSS to the div tags the left setting for the title and sidebar images will be 12px. This will allow our web page that's 1000 pixels to be centered with 12 pixels on both sides for padding and different monitors on how it fits a 1024 setting on the screen. Let's get started, first make sure your in Design View. Then select the Common tab if you don't have it selected already. Starting from the left and moving to the right count five in and you'll find the Insert Div Tag icon. This div will be for the header of the page which will be an image that you should have downloaded already from above. The image is 1000px x 200px. We're going to insert a div tag into the web page. Once the icon is selected a Insert Div Tag dialog box will open, choose or type in the following information that's below. Or you can go to Insert > Layout Objects > Div Tag

2 The Insert Div Tag dialog add the word " title" to the class. Then add "div1" to the ID text box. That creates the actual div tag in the body of the page. Now to give the div tag it's positioning we need CSS information to make that happen. To add a New Rule you can either select the "New CSS Rule" button or if you close the Insert Div Tag dialog you can access it in the CSS panel located at the bottom of the panel it looks like a piece of paper with a plus sign in it.(new CSS Rule icon) Using the dropdown in the contextual selector type choose " Class." For Selector name add ".title" ( You can use a period (.)or the pound (#) sign.) In class we're using the period and it's only used in the CSS. There's NO period or pound sign in the div tag it self in the body. Then at the bottom of the dialog make sure you have selected the "This document only" because we're adding the CSS to the html page.

3 When the CSS Rule definition dialog opens under Category choose the Positioning this will give you the dialog to tell the div tag where it's going to be located on the web page. Follow the information below to fill in your dialog box, then select "OK." In code view this is what it should look like. Dreamweaver added the open and close tags of the CSS, also you can see inside the the CSS is what you just added in the dialog box. Now the div tag will show up with these dimensions.

4 Dreamweaver add text into you div tag so it's easy to recognize it. Select the text and delete it. You should only have a blinking cursor inside the div tag. Now it's time to add the Title image from your image folder to the div tag. To do this go to Insert > Image. In the Image source dialog choose > divtitle.jpg file from your image folder.

5 This is optional: Next the Image Tag Accessibility Attributes dialog will open, add in the Alternate text area " Title image " Welcome to Canada", then select the OK button. So what is this Accessibility Attributes? Let's say someone that can't see well is using software to assist them in reading web pages to give them information, also when you drag your cursor over the image you'll get a popup of the text that you added. If the text on the web page isn't in a table then the software can read the information to them. If you don't add the Accessibility Attributes to an image then the software can only tell the user the name of the image name and nothing else. So the Alternate text will give the user this "Title image " Welcome to Canada." By law everyone is suppose to create web pages that are accessible to all. But as we all know that isn't the case and this is why CSS is so important for all of us to learn. If your text is still there in the div tag just select it and delete it.

6 Take a look at the Code view to see what Dreamweaver created for us. Notice in the body tag you'll see the div tag with a class name that we added " titlebar", the div id is "div1", and the inserted image. The image is located in the div1 tag but we haven't created any code yet to tell the div tag where we would like to place it. To do this left click your cursor at the end of the Title tag in the header and then select the "Enter key" to create a return. Add the text in the red highlighted area below to your code, it has to be exact to work. Next we need to create a background color to do this go to Modify > Page Properties or Properties Inspector > Page Properties button. In the Page Properties dialog choose the Background color text box and type # which is a dark green color. Also look in the code after closing the page properties dialog and notice that the background tag was added to the Style tag.

7 Notice that the image has a curved corners and the color matches the background color. Now lets create another div tag to add an image to the left side of the web page. Select the Insert Div Tag add the following information or go to Insert > Layout Objects > Div Tag. icon and

8 Add "sideimage" to the Class text box and "div2" to the ID text box. Then select the "New CSS Rule" button to add your CSS information. Use the dialog below to fill in your information, then select the "OK" button. Select "Positioning" under Category. Use the settings below to add to your dialog. Notice that I've added a couple of pixels to the top setting. This may very with your artistic needs.

9 Next delete the text that Dreamweaver added. Now go to Insert > Image to add the leftsideimage.jpg from your image folder.

10 This is what it should look like so far. Next add a new div tag for the body of the page that normally holds the information of the page. Call it "body1" for Class and "div3" for the ID. Then follow the information below.

11 Use the information below to fill in this information. Before you select the "OK" button we need to change the background color of the div tag to white. To do this select "Background" from the Category. Then the very first choice is background-color, click on the color and select white (#FFFFFF) from the palette. Now you can Select the "OK" button.

12 This is what the page should look like so far. F12 is the short cut key to view the page in a browser. In lesson 2 will work on the buttons for navigation of our pages. Click here to see code needed for Show and Hide Div tags. Yes it's really the end. :)

Layout with Layers and CSS

Layout with Layers and CSS Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and

More information

COMSC-031 Web Site Development- Part 2

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

More information

Let's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles are within the html code and not separate.

Let's take a look at what CSS looks like in Dreamweaver using the Embedded coding which is the styles are within the html code and not separate. Creating web pages using CSS and Dreamweaver CS3 Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language. Its most common application

More information

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

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

More information

ORB Education Quality Teaching Resources

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

More information

Dreamweaver CS4: Layout Guide. Převzato z

Dreamweaver CS4: Layout Guide. Převzato z Dreamweaver CS4: Layout Guide Převzato z www.bewebmaster.com Intro This tutorial will help you: 1. Define a new Dreamweaver web site 2. Create a new HTML file 3. Create a new CSS file and attach it to

More information

Creating a Navigation Bar with a Rollover Effect

Creating a Navigation Bar with a Rollover Effect Creating a Navigation Bar with a Rollover Effect These instructions will teach you how to create your own navigation bar with a roll over effect for your personal website using Adobe Dreamweaver CS4. Your

More information

Creating your first website Part 4: Formatting your page with CSS

Creating your first website Part 4: Formatting your page with CSS Adobe - Developer Center : Creating your first website Part 4: Formatting your page... Page 1 of 23 Dreamweaver Article Creating your first website Part 4: Formatting your page with CSS Jon Varese Adobe

More information

TUTORIAL MADCAP FLARE Tripane and PDF

TUTORIAL MADCAP FLARE Tripane and PDF TUTORIAL MADCAP FLARE 2018 Tripane and PDF Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document

More information

Dreamweaver Basics Outline

Dreamweaver Basics Outline Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working

More information

Editing your SiteAssist Professional Template

Editing your SiteAssist Professional Template Editing your SiteAssist Professional Template This Solution Recipe shows you how you can edit your SiteAssist Professional created templates to suit your needs. SiteAssist Professional creates your entire

More information

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

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

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that

More information

Working with Rounded Corner Layouts in CSS Sculptor 2.0

Working with Rounded Corner Layouts in CSS Sculptor 2.0 Working with Rounded Corner Layouts in CSS Sculptor 2.0 Eric Meyer s CSS Sculptor 2.0 includes three layouts that feature rounded corners. These rounded corners use images to create the rounded effect,

More information

Alfresco Content Services 5.2. Getting Started Guide

Alfresco Content Services 5.2. Getting Started Guide Alfresco Content Services 5.2 Getting Started Guide Contents Contents Getting started with Alfresco Share... 3 Signing in...3 Personalizing Alfresco Share... 4 Setting up your dashboard... 4 Updating your

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,

More information

1. Move your mouse to the location you wish text to appear in the document. 2. Click the mouse. The insertion point appears.

1. Move your mouse to the location you wish text to appear in the document. 2. Click the mouse. The insertion point appears. Word 2010 Text Basics Introduction Page 1 It is important to know how to perform basic tasks with text when working in a word processing application. In this lesson you will learn the basics of working

More information

Introduction. Using Styles. Word 2010 Styles and Themes. To Select a Style: Page 1

Introduction. Using Styles. Word 2010 Styles and Themes. To Select a Style: Page 1 Word 2010 Styles and Themes Introduction Page 1 Styles and themes are powerful tools in Word that can help you easily create professional looking documents. A style is a predefined combination of font

More information

Dreamweaver CS4. Introduction. References :

Dreamweaver CS4. Introduction. References : Dreamweaver CS4 Introduction References : http://help.adobe.com 1 What s new in Dreamweaver CS4 Live view Dreamweaver CS4 lets you design your web pages under realworld browser conditions with new Live

More information

How to deploy for multiple screens

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

More information

How to create and edit a CSS rule

How to create and edit a CSS rule Adobe Dreamweaver CS6 Project 3 guide How to create and edit a CSS rule You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to

More information

Taking Fireworks Template and Applying it to Dreamweaver

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

More information

Figure 1 Properties panel, HTML mode

Figure 1 Properties panel, HTML mode How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties

More information

How to set up a local root folder and site structure

How to set up a local root folder and site structure Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where

More information

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

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

More information

Dreamweaver Template Tutorial - How to create a website from a template

Dreamweaver Template Tutorial - How to create a website from a template Dreamweaver Template Tutorial - How to create a website from a template In this tutorial you will create a website using Dreamweaver s premade templates. You are going to learn how to style them using

More information

The Domino Designer QuickStart Tutorial

The Domino Designer QuickStart Tutorial The Domino Designer QuickStart Tutorial 1. Welcome The Domino Designer QuickStart Tutorial You've installed Domino Designer, you've taken the Designer Guided Tour, and maybe you've even read some of the

More information

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

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

More information

Overview of the Adobe Dreamweaver CS5 workspace

Overview of the Adobe Dreamweaver CS5 workspace Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one

More information

Dreamweaver CS3 Lab 2

Dreamweaver CS3 Lab 2 Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

MICROSOFT WORD 2010 BASICS

MICROSOFT WORD 2010 BASICS MICROSOFT WORD 2010 BASICS Word 2010 is a word processing program that allows you to create various types of documents such as letters, papers, flyers, and faxes. The Ribbon contains all of the commands

More information

Dreamweaver Basics Workshop

Dreamweaver Basics Workshop Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What

More information

Sign in and join ADC Newsletters Feedback. Creating your first website Part 3: Adding content to pages

Sign in and join ADC Newsletters Feedback. Creating your first website Part 3: Adding content to pages 1 of 18 2/14/2008 2:34 PM Adobe Dreamweaver Article Adobe Developer Connection Sign in and join ADC Newsletters Feedback RSS Creating your first website Part 3: Adding content to pages Jon Varese Adobe

More information

Dreamweaver MX The Basics

Dreamweaver MX The Basics Chapter 1 Dreamweaver MX 2004 - The Basics COPYRIGHTED MATERIAL Welcome to Dreamweaver MX 2004! Dreamweaver is a powerful Web page creation program created by Macromedia. It s included in the Macromedia

More information

The Newsletter will contain a Title for the newsletter, a regular border, columns, Page numbers, Header and Footer and two images.

The Newsletter will contain a Title for the newsletter, a regular border, columns, Page numbers, Header and Footer and two images. Creating the Newsletter Overview: You will be creating a cover page and a newsletter. The Cover page will include Your Name, Your Teacher's Name, the Title of the Newsletter, the Date, Period Number, an

More information

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5

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

More information

How to lay out a web page with CSS

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

More information

Introduction to Dreamweaver CS3

Introduction to Dreamweaver CS3 TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout

More information

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

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

More information

Introduction. Table Basics. Access 2010 Working with Tables. Video: Working with Tables in Access To Open an Existing Table: Page 1

Introduction. Table Basics. Access 2010 Working with Tables. Video: Working with Tables in Access To Open an Existing Table: Page 1 Access 2010 Working with Tables Introduction Page 1 While there are four types of database objects in Access 2010, tables are arguably the most important. Even when you're using forms, queries, and reports,

More information

Creating and Publishing Faculty Webpages

Creating and Publishing Faculty Webpages Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can

More information

Page Layout Using Tables

Page Layout Using Tables This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,

More information

Dreamweaver CS5 Lab 4: Sprys

Dreamweaver CS5 Lab 4: Sprys Dreamweaver CS5 Lab 4: Sprys 1. Create a new html web page. a. Select file->new, and then Blank Page: HTML: 2 column liquid, left sidebar, header and footer b. DocType: XHTML 1.0 Strict c. Layout CSS:

More information

Using Dreamweaver CS6

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

More information

ADOBE DREAMWEAVER CS4 BASICS

ADOBE DREAMWEAVER CS4 BASICS ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,

More information

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

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

More information

Microsoft Office Word 2010

Microsoft Office Word 2010 Microsoft Office Word 2010 Content Microsoft Office... 0 A. Word Basics... 4 1.Getting Started with Word... 4 Introduction... 4 Getting to know Word 2010... 4 The Ribbon... 4 Backstage view... 7 The Quick

More information

Virto SharePoint Forms Designer for Office 365. Installation and User Guide

Virto SharePoint Forms Designer for Office 365. Installation and User Guide Virto SharePoint Forms Designer for Office 365 Installation and User Guide 2 Table of Contents KEY FEATURES... 3 SYSTEM REQUIREMENTS... 3 INSTALLING VIRTO SHAREPOINT FORMS FOR OFFICE 365...3 LICENSE ACTIVATION...4

More information

TUTORIAL MADCAP FLARE Top Navigation

TUTORIAL MADCAP FLARE Top Navigation TUTORIAL MADCAP FLARE 2018 Top Navigation Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document

More information

Web Publishing Basics II

Web Publishing Basics II Web Publishing Basics II Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 Create a Site Definition... 3 The Dreamweaver CS4 Interface... 4 Panels are groups of icons

More information

Sign in and join ADC Newsletters Feedback. Creating your first website Part 2: Creating the page layout

Sign in and join ADC Newsletters Feedback. Creating your first website Part 2: Creating the page layout 1 of 14 2/14/2008 2:31 PM Adobe Dreamweaver Article Adobe Developer Connection Sign in and join ADC Newsletters Feedback RSS Creating your first website Part 2: Creating the page layout Jon Varese Adobe

More information

Objective % Select and utilize tools to design and develop websites.

Objective % Select and utilize tools to design and develop websites. Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret

More information

CROSSFADE ANIMATION with AFTEREFFECTS

CROSSFADE ANIMATION with AFTEREFFECTS CROSSFADE ANIMATION with AFTEREFFECTS Consider using the Internet as a new presentation medium for photographs. The fluid nature of the medium allows the removal of photography from its present static

More information

Advanced Dreamweaver CS6

Advanced Dreamweaver CS6 Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this

More information

Dreamweaver Website 1: Managing a Website with Dreamweaver

Dreamweaver Website 1: Managing a Website with Dreamweaver Page 1 of 20 Web Design: Dreamweaver Websites Managing Websites with Dreamweaver Course Description: In this course, you will learn how to create and manage a website using Dreamweaver Templates and Library

More information

Using the Seven Horizons Wiki

Using the Seven Horizons Wiki Using the Seven Horizons Wiki Index Using the Seven Horizons Wiki... 1 Searching for a Technology:... 1 To Edit an Existing Page:... 2 To Create a New Page... 3 To Add a Photo or Image... 5 Add a Video...

More information

Tracking changes in Word 2007 Table of Contents

Tracking changes in Word 2007 Table of Contents Tracking changes in Word 2007 Table of Contents TRACK CHANGES: OVERVIEW... 2 UNDERSTANDING THE TRACK CHANGES FEATURE... 2 HOW DID THOSE TRACKED CHANGES AND COMMENTS GET THERE?... 2 WHY MICROSOFT OFFICE

More information

Gdes2000 Graphic Design for Internet & MM. Dreamweaver: Simple page construction with DIVs.

Gdes2000 Graphic Design for Internet & MM. Dreamweaver: Simple page construction with DIVs. Dreamweaver: Simple page construction with DIVs. Websites and the design process 1/17: 1. We're making the assumption that you've been given a project or brief and are looking to create a basic web page

More information

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

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually

More information

Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme

Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme Introduction Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme In this Getting Started Guide, you can follow along as a website is built using the MIT DLC Theme. Whether you

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block

More information

FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer

FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer FORMS The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions Presented by: John Reamer Creating Forms Forms and Surveys: When and What to Use them For Both Allow you

More information

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

Introducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look

More information

ADOBE Dreamweaver CS3 Basics

ADOBE Dreamweaver CS3 Basics ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/16/2011 Contents Before you start with Dreamweaver....

More information

Cascading Style Sheets for layout II CS7026

Cascading Style Sheets for layout II CS7026 Cascading Style Sheets for layout II CS7026 Understanding CSS float The CSS float property is also a very important property for layout. It allows you to position your Web page designs exactly as you want

More information

Adobe Dreamweaver CC Tutorial

Adobe Dreamweaver CC Tutorial Adobe Dreamweaver CC Tutorial The design of the Web site index.html Click main.html header Boys toys Girls toys Media Contact us content Links sidebar1 footer content1.html content2.html content3.html

More information

Dreamweaver. An Introduction to editing webpages

Dreamweaver. An Introduction to editing webpages Dreamweaver An Introduction to editing webpages Edited: 2/7/18 Salter, Sharina D Contents Session Description... 3 Overview... 3 Introduction to Dreamweaver... 3 Toolbar... 5 Getting Started... 6 Create

More information

! " # $%& Html.htm Note: Files under html.htm are created in the previous lab exercises. (Just link it up)

!  # $%& Html.htm Note: Files under html.htm are created in the previous lab exercises. (Just link it up) ! " # $%& # &'()*+ At the end of this lab exercise, students should be able to: Invoke the main components in Macromedia Dreamweaver MX 2004 Edit and format text using Macromedia Dreamweaver MX 2004 Create

More information

Open your blogger dashboard and click the design tab and then click template designer

Open your blogger dashboard and click the design tab and then click template designer Open your blogger dashboard and click the design tab and then click template designer Now you're going to go down the list on the left hand and make changes to your blog to set up your template. First

More information

Hands On: Dreamweaver CS3 NEW SPRY Widgets

Hands On: Dreamweaver CS3 NEW SPRY Widgets What is a Spry Widget? Spry widgets provide access to dynamic and interactive elements you might like to have on your Web page. These Spry elements include: Menu Bars Tabbed Panels Accordion Effects Collapsible

More information

Dreamweaver Tutorials Working with Tables

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

More information

PowerPoint Tips and Tricks

PowerPoint Tips and Tricks PowerPoint Tips and Tricks Viewing Your Presentation PowerPoint provides multiple ways to view your slide show presentation. You can access these options either through a toolbar on your screen or by pulling

More information

Roxen Content Provider

Roxen Content Provider Roxen Content Provider Generation 3 Templates Purpose This workbook is designed to provide a training and reference tool for placing University of Alaska information on the World Wide Web (WWW) using the

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

Oracle Eloqua s User Guide

Oracle Eloqua  s User Guide http://docs.oracle.com Oracle Eloqua Emails User Guide 2017 Oracle Corporation. All rights reserved 08-Dec-2017 Contents 1 Emails Overview 6 2 Examples of emails 7 3 Creating emails 19 4 Email authoring

More information

Dreamweaver CS5 Lab 2

Dreamweaver CS5 Lab 2 Dreamweaver CS5 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 11 Part 2 11 Using Templates You can save time by storing frequently used Web page elements and layouts

More information

Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site

Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site Dreamweaver 101 First step: For your first time out, create a folder on your desktop to contain all of your DW pages and assets (images, audio files, etc.). Name it. For demonstration, I ll name mine dw_magic.

More information

Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views!

Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views! Dreamweaver CS6 Table of Contents Setting up a site in Dreamweaver! 2 Templates! 3 Using a Template! 3 Save the template! 4 Views! 5 Properties! 5 Editable Regions! 6 Creating an Editable Region! 6 Modifying

More information

Getting Started with Eric Meyer's CSS Sculptor 1.0

Getting Started with Eric Meyer's CSS Sculptor 1.0 Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly

More information

USER GUIDE. MADCAP FLARE 2017 r3. QR Codes

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

More information

Photoshop tutorial: Final Product in Photoshop:

Photoshop tutorial: Final Product in Photoshop: Disclaimer: There are many, many ways to approach web design. This tutorial is neither the most cutting-edge nor most efficient. Instead, this tutorial is set-up to show you as many functions in Photoshop

More information

Styles, Style Sheets, the Box Model and Liquid Layout

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

More information

Dreamweaver Tutorial #2

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

More information

With Dreamweaver CS4, Adobe has radically

With Dreamweaver CS4, Adobe has radically Introduction to the Dreamweaver Interface With Dreamweaver CS4, Adobe has radically reengineered the Dreamweaver interface to provide a more unified experience across all of the Creative Suite applications.

More information

ITEC185. Introduction to Digital Media

ITEC185. Introduction to Digital Media ITEC185 Introduction to Digital Media ADOBE ILLUSTRATOR CC 2015 What is Adobe Illustrator? Adobe Illustrator is a program used by both artists and graphic designers to create vector images. These images

More information

Oracle Eloqua s User Guide

Oracle Eloqua  s User Guide http://docs.oracle.com Oracle Eloqua Emails User Guide 2018 Oracle Corporation. All rights reserved 11-Jan-2018 Contents 1 Emails Overview 6 2 Examples of emails 7 3 Creating emails 19 4 Email authoring

More information

FanBuzz Business-Enterprise-Create A New fan Page

FanBuzz Business-Enterprise-Create A New fan Page This Tutorial video can be found here http://instamagicplugins.com/aio-tutorial-videos/create-a-new-fan-page/ Hi, this is Nick LaPolla with Red Zebra Media and InstaMagic Plugins. Welcome to the the All-inOne

More information

COMSC-031 Web Site Development- Part 2. Part-Time Instructor: Joenil Mistal

COMSC-031 Web Site Development- Part 2. Part-Time Instructor: Joenil Mistal COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal Chapter 9 9 Creating Pages with Frames You can divide the display area of a Web browser into multiple panes by creating frames.

More information

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

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

More information

ART170. The ART170 Final Project

ART170. The ART170 Final Project The Final Project TABLE OF CONTENTS Define the site and set up the layout pg. 2 Ordering and externalizing the style sheet pg. 2 Creating the template pg. 3 Generating pages from the template pg. 4 Updating

More information

Activity 4.1: Creating a new Cascading Style Sheet

Activity 4.1: Creating a new Cascading Style Sheet UNIVERSITY OF BAHRAIN COLLEGE OF APPLIED STUDIES LAB 4 Understanding & Creating Cascading Style Sheets (CSS) Description: Cascading style sheets (CSS) are collections of formatting rules that control the

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and

More information

Adobe Dreamweaver CS6 Digital Classroom

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

More information

Virto SharePoint Forms Designer for Office 365. Installation and User Guide

Virto SharePoint Forms Designer for Office 365. Installation and User Guide Virto SharePoint Forms Designer for Office 365 Installation and User Guide 2 Table of Contents KEY FEATURES... 3 SYSTEM REQUIREMENTS... 3 INSTALLING VIRTO SHAREPOINT FORMS FOR OFFICE 365... 3 LICENSE ACTIVATION...

More information

Table of contents. Ajax AutoComplete Manual DMXzone.com

Table of contents. Ajax AutoComplete Manual DMXzone.com Table of contents Table of contents... 1 About Ajax AutoComplete... 2 Features in Detail... 3 The Basics: Creating a Basic AJAX AutoComplete Field... 12 Advanced: Generating an AutoComplete Field using

More information

The new layer will be part of the template because we want it to appear alongside the nav bar on every page.

The new layer will be part of the template because we want it to appear alongside the nav bar on every page. Chapter 6 Layers In this chapter you'll be creating the Chalets page. Like the other pages, the bulk of the Chalets page is made up of images and text set in a table which you are already familiar with.

More information

ENGL 323: Writing for New Media Repurposing Content for the Web Part Two

ENGL 323: Writing for New Media Repurposing Content for the Web Part Two ENGL 323: Writing for New Media Repurposing Content for the Web Part Two Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Using Color to Establish Visual Hierarchies Color is useful in

More information

Siteforce Pilot: Best Practices

Siteforce Pilot: Best Practices Siteforce Pilot: Best Practices Getting Started with Siteforce Setup your users as Publishers and Contributors. Siteforce has two distinct types of users First, is your Web Publishers. These are the front

More information

Audio CD Basics Lesson 7: Submit Your CD To Gracenote

Audio CD Basics Lesson 7: Submit Your CD To Gracenote Audio CD Basics Lesson 7: Submit Your CD To Gracenote This tutorial is for itunes version 11 or newer. If you re using an older version of itunes, please refer to our other white paper. By looking at the

More information