CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5"

Transcription

1 CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - <ul>. Any navigational bar can be thought of as a list or links. The first step is to create a list of links and then to remove bullets, margins and paddings that all lists have in default. 1. In the Code view, place the cursor inside the #navholder. In the Properties panel click the unordered list button to start unordered list as shown below: <div id="navholder"> <ul> <li></li> </ul> </div> <!-- end of #navholder --> 2. Make sure your mouse pointer is placed between <li> and </li> tags. Return to the Design view. Type home and click Enter, type portfolio and click Enter, type resume, and click Enter, type contact and click Enter. Click Enter twice to exit from the list. The list is completed.

2 Step 2 - Adding anchors - (5 points) 1. Add the anchor tag to each list item. In Design view, select the home text. In the Properties panel, locate the Link field. Type index.html in this field. Click Enter to complete the link. 2. Do the same for the rest of menu items entering the following names: portfolio.html, resume.html, contact.html. In the Code view, review the list of links <ul> <li><a href="index.html">home</a></li> <li><ahref="portfolio.html">portfolio</a></li> <li><a href="resume.html">resume</a></li> <li><a href="contact.html">contact</a></li> </ul> Design View

3 The list of links is created inside of the DIV #navholder. Step 3 - Styling lists of links - (10 points) 1. First, we will create an ID for the list (We need this to set up styles for unordered list (<ul>). You may include unordered lists somewhere else on the same page; but you don t want other lists look like navigation buttons. To solve this issue, we will give a unique ID to our navigation menu. Let s name it #nav. 2. Go to the CSS STYLES panel and click New CSS Rule button (+). In the New Style dialog box, type #nav in the Selector name field. Make sure that Choose where your rule will be defined drop-down menu displays main.css your external css file. Click OK. The CSS Rule Definition dialog box appears. 3. In the Box category set the Margin and Padding (the Same for All sides) to zero. This will remove the default left indent. Click OK to close the window 5. Apply the ID #nav to the <ul>. To do so, click the <ul> tag in the Tag Selector (at the bottom of the document window) to select it. 6. Right-click the selected <ul> and choose Set ID > nav (shown below)

4 This will apply id #nav to our list Step 4 - Styling list items - <li> - (10 points) Now we will set styles for list items <li>. 1. Click any link. In the Tag Selector click the <li> tag to select it. 2. With the <li> selected, go to the CSS STYLES panel and click the New CSS Rule button (+) 3. In the New CSS Rule dialog box, remove the #wrapper selector to make the rule less Specific (shown below). Click OK. 4. The CSS Rule Definition window appears. In the Box category: a. set the Margin and Padding to zero (Same for all). b. Set the Float property to left. The float:left will move all the list items to the left, so they will appear one after another as one row of links. c. Click Apply button. 5. Click the Block category. Locate the Display drop-down list and choose inline from the list. Display: inline turns block-level elements into inline elements. <li> is a block-level element. This will reinforce the horizontal orientation of the items in the menu. 6. Click the Apply button.

5 6. In the List category, click the list-style-type drop-down arrow and set the Type to none. This will remove the bullets from the list. 7. Click OK. The menu should look as shown below: Step 5 - Styling links - (10 points) The next step is to style the links inside the <li>. We will change the links into rollover buttons. This can be accomplished by changing the <a> tag to block-level element. Once the <a> tag is a block-level element, you can assign width, height, padding, and background image to your links. 1. Click on one of the list items. In the Tag Selector bar, click the <a> to select it 2. With the <a> selected, go to the CSS STYLES panel and click the New CSS Rule button (+) 3. The New CSS Rule window opens. 4. In the Selector Type field remove the selector and type the following: #nav a:link, #nav a:visited, #nav a:active (Unfortunately, you have to enter the group of styles manually)

6 Click OK. There are 4 states of the anchor tag in CSS: a:link (unvisited) a:visited (visited link) a:active (link that is currently clicked) a:hover (a link is hovered when the mouse moves over it) 5. In the CSS Rule Definition window, click the Type Category and establish the following settings: a. Type :Arial, Helvetica, sans-serif b. Size: 12px c. Color: #333333; Set the Text-Decoration to none by clicking none check box.

7 5. Click the Apply button. 6. In the Block category: a. set Text-align to center. b. Set Letter-spacing to 2px. c. set Display property to block. The display: block definition allows you to turn inline element into block-level so you can set width, height, padding and background properties to the anchor tags. 7. In the Background category, click Browse button and choose the image for the background. I used file nav_back.png. Note: you can use background-color instead. Set Repeat property to repeat-x. 8. In the Box category, establish the following settings: a. set Width to 120 pixels b. set Height to 21 pixels. pixels. c. In the Padding section, uncheck the Same for All checkbox and set the padding-top to 4 9. Click the Border category. Uncheck the Same for All checkbox. Click the Right drop-down menu, and set the value to solid. In the Width field, set the value to 1 pixel, set the Color to # Click OK. 11. Preview your menu in the web browser by clicking F12. Step 6 - Creating styles for a:hover state - (10 points) 1. In the CSS STYLES panel, click the New CSS Rule button (+). 2. In the New CSS Rule window type #nav a:hover in the Selector field. Click OK. 3. In the CSS RULE Definition window click the Background Category. For the Hover state we need to change the background image (or color) only. The links in the hover state will inherit the styles from the unvisited and visited link states.

8 4. Set the background to the image of your choice. Set repeat to repeat-x. (Alternatively, you can set Background-color to a color of your choice). Note: If you use dark background color, go to the Type category and set the Color: to white to provide good foreground/background contrast. 4. Click OK. Navigation is competed. You can save your files (File > Save All) and click F12 to preview the menu. Navigate the menu items to view the rollover effect.

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

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

Web Design - Css Layout (Page 1)

Web Design - Css Layout (Page 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

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

DREAMWEAVER CS5.5: USING STYLE SHEETS

DREAMWEAVER CS5.5: USING STYLE SHEETS Medical Library/Department of Information & Communication Sciences WHAT ARE STYLE SHEETS? DREAMWEAVER CS5.5: USING STYLE SHEETS Style sheets are collections of rules that define the styles of a document.

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

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

Formatting Web Pages Using Cascading Style Sheets

Formatting Web Pages Using Cascading Style Sheets HOUR 6 Formatting Web Pages Using Cascading Style Sheets What You ll Learn in This Hour:. How to create each of the three style types: classes, redefined HTML tags, and advanced styles. How to apply styles

More information

CSS Template Tutorial. Please take your time to visit http://www.freecss.info

CSS Template Tutorial. Please take your time to visit http://www.freecss.info 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

Task 1a: Create a new external CSS file Task 1b: Styling background

Task 1a: Create a new external CSS file Task 1b: Styling background Overview of CSS (and CSS3) Task 1a: Create a new external CSS file Task 1b: Styling background CSS Styling Task 2: Using ID and Classes Task 3: Set the box model properties Task 4: Styling the content

More information

Web Design with CSS and CSS3. Dr. Jan Stelovsky

Web Design with CSS and CSS3. Dr. Jan Stelovsky Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style

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 - Formatting your page with CSS

Dreamweaver - Formatting your page with CSS Dreamweaver - Formatting your page with CSS Creating your first website Part 4: Formatting your page with CSS Now I ll show you how to format text on your page using cascading style sheets (CSS). Learn

More information

A7 CSS Review Reviewing examples of all the CSS learned throughout the semester

A7 CSS Review Reviewing examples of all the CSS learned throughout the semester GRC 175 A7 A7 CSS Review Reviewing examples of all the CSS learned throughout the semester Tasks: 1. Please first read CSS tutorial http://multimedia.journalism.berkeley.edu/tutorials/css-intro/printfriendly/

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

HTML CREATOR. HTML Creator

HTML CREATOR. HTML Creator HTML CREATOR The HTML Creator is an HTML editing tool that allows you to create content in HTML without having to enter HTML tags. Similar to a word processor, you can easily create and maintain content

More information

Cascading Style Sheets. An Introduction

Cascading Style Sheets. An Introduction Cascading Style Sheets An Introduction WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION... 1 Why Use CSS? 1 How Do They Cascade? 2 INTERNAL AND EXTERNAL STYLE SHEETS... 2

More information

How to create and edit a CSS rule

How to create and edit a CSS rule Adobe Dreamweaver CS6 Project 1 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

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

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

The resulting HTML page, with colors and layout, all done with CSS.

The resulting HTML page, with colors and layout, all done with CSS. CSS TUTORIAL STARTING WITH HTML + CSS REVIEW/TUTORIAL 1. The HTML 2. Adding color 3. Adding fonts 4. A navigation bar 5. Styling links 6. Horizontal line 7. External CSS Further reading This short tutorial

More information

{color:blue; font-size: 12px;}

{color:blue; font-size: 12px;} CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:

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

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

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

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

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

Diane s CSS Cheatsheet

Diane s CSS Cheatsheet Diane s CSS Cheatsheet Anatomy of a CSS Rule: selector { property: value; selector { property: value; property: value; property: value; CSS Comment: /* This is a CSS comment */ Inline CSS Styles: The CSS

More information

Below is the toolbar for the Rich Text Editor on the SharePoint Portal.

Below is the toolbar for the Rich Text Editor on the SharePoint Portal. Rich Text Editor Below is the toolbar for the Rich Text Editor on the SharePoint Portal. You will find instructions for using each of these functions on the following pages. 1. Cut 2. Copy 3. Paste 4.

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

Style & Layout in the web: CSS and Bootstrap

Style & Layout in the web: CSS and Bootstrap Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts

More information

CSS WEB DESIGN WITH DREAMWEAVER

CSS WEB DESIGN WITH DREAMWEAVER CSS WEB DESIGN WITH DREAMWEAVER By Michael L Curry WEBSITE http://michaelcurry.com/default.aspx?p=73&n=articles-on-web-design-topics DESCRIPTION This is an advanced web design article that builds on the

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

Dreamweaver 8 Basics

Dreamweaver 8 Basics Dreamweaver 8 Basics Software: Dreamweaver 8 Platform: Mac/PC Overview Dreamweaver is a great tool for producing Web sites. It provides an array of options and functions that speed up the development process

More information

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here

More information

Web Guide. Style Types. Understanding CSS. Tag styles defined in most style sheets to start. What is a rule (style)?

Web Guide. Style Types. Understanding CSS. Tag styles defined in most style sheets to start. What is a rule (style)? Web Guide Understanding CSS Let s say you want to create a headline with certain text formatting. Now, suppose you want to apply those characteristics to many headlines. It would be advantageous to be

More information

Web Development 1 A4 Project Description Web Architecture

Web Development 1 A4 Project Description Web Architecture Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:

More information

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2 Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.

More information

Dreamweaver CS6 Lab 2

Dreamweaver CS6 Lab 2 Dreamweaver CS6 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

Introduction to Web Design Curriculum Sample

Introduction to Web Design Curriculum Sample Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic

More information

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Objectives Create your Web page in layout view Insert Flash Text and Flash Button objects

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/27/2008 Contents Before you start with Dreamweaver....

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

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

Using the CSS Box Model for Page Layout

Using the CSS Box Model for Page Layout What You ll Learn CSS Features in Dreamweaver 8 Elements of the Using the CSS Box Model for Page Layout How to manipulate: Borders Margins Padding Different Ways of applying styles: External style sheet

More information

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets language Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents designed for HTML in 1996

More information

Your Personal Homepage

Your Personal Homepage Your Personal Homepage You can use your Personal Homepage to share information about yourself, something that interests you, or a course topic. Your classmates can view your home page from the Classlist

More information

Selectors in Action LESSON 3

Selectors in Action LESSON 3 LESSON 3 Selectors in Action In this lesson, you will learn about the different types of selectors and how to use them. Setting Up the HTML Code Selectors are one of the most important aspects of CSS because

More information

Further web design: Cascading Style Sheets Practical workbook

Further web design: Cascading Style Sheets Practical workbook Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these

More information

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28 CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline

More information

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head

More information

Web Design and Databases WD: Class 7: HTML and CSS Part 3

Web Design and Databases WD: Class 7: HTML and CSS Part 3 Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML

More information

Micro soft Expression Web 4

Micro soft Expression Web 4 University of Texas at Arlington Micro soft Expression Web 4 Beginner s Guide 2011 1 2 Table of Contents UTA Web Pages... 5 Connecting to your Website... 5 Copying files from your Website... 8 To open

More information

How to code, test, and validate a web page

How to code, test, and validate a web page Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on

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

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements

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

Site Maintenance. Table of Contents

Site Maintenance. Table of Contents Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...

More information

How to work with external Cascading Style Sheets

How to work with external Cascading Style Sheets Adobe Dreamweaver CS5 Activity 3.6 guide How to work with external Cascading Style Sheets Many web professionals find it that using an external style sheet--a style sheet that exists in its own file--offers

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013

The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013 INFORMZ USER GUIDE: The HTML Editor Version 1.0 January 13, 2013 ABOUT THIS GUIDE This guide provides an overview of the HTML editor used by Informz. This guide does not cover all aspects of the editor,

More information

Terminal 4 Site Manager User Guide. Need help? Call the ITD Lab, x7471

Terminal 4 Site Manager User Guide. Need help? Call the ITD Lab, x7471 Need help? Call the ITD Lab, x7471 1 Contents Introduction... 2 Login to Terminal 4... 2 What is the Difference between a Section and Content... 2 The Interface Explained... 2 Modify Content... 3 Basic

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

Web Site Construction II: CSS for Style. David Gerbing. School of Business Administration. Portland State University

Web Site Construction II: CSS for Style. David Gerbing. School of Business Administration. Portland State University Web Site Construction II: CSS for Style David Gerbing School of Business Administration Portland State University Table of Contents Typeface Conventions... 3 SECTION II STYLING THE WEB PAGE WITH CSS...

More information

Creating and Using Links and Bookmarks in PDF Documents

Creating and Using Links and Bookmarks in PDF Documents Creating and Using Links and Bookmarks in PDF Documents After making a document into a PDF, there may be times when you will need to make links or bookmarks within that PDF to aid navigation through 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

HTML & CSS Brief Introduction and Exercises

HTML & CSS Brief Introduction and Exercises HTML & CSS Brief Introduction and Exercises Chris Sparks HTML and CSS are useful to understand when working on digital editions, since they are very frequently published online, and hence often make use

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

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets Using Dreamweaver MX In this lesson you will: Create an external style sheet Add styles to an existing style sheet Edit a style Create a custom style Link to an external style sheet

More information

LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview

LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and

More information

Creating and Deploying an Air Application

Creating and Deploying an Air Application Creating and Deploying an Air Application Note: The starter and solution files for this project do not include the LiveCycle Data Services technology that you implemented in Exercise 9. Removing that code

More information

How to create buttons and navigation bars

How to create buttons and navigation bars How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,

More information

Quick Guide for Dreamweaver CC Basics April 2016 Training:

Quick Guide for Dreamweaver CC Basics April 2016 Training: Dreamweaver CC Basics When you look at a web page, you might wonder how it is made. To display a web page, your internet browser reads and interprets a special set of instructions. These instructions are

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

Dreamweaver CS6 Manual

Dreamweaver CS6 Manual Dreamweaver CS6 Manual Joan Weeks SLIS Computer Labs Mgr. March 2013 Topic 1 What is Dreamweaver CS6? Dreamweaver CS6 is a complete website development tool that gives you the ability to create multiple

More information

SharePoint Basic Editing. Text. Creating List

SharePoint Basic Editing. Text. Creating List Text Putting Text on the Page 1. Entering text on the web page is just like typing in a word processing document. Lines will wrap within a paragraph. 2. Enter = Paragraph Break (leaves a blank line) 3.

More information

Guide to Content Editing

Guide to Content Editing Guide to Content Editing Page 1 of 119 Contents 1 About This Guide... 8 1.1 Users of This Guide... 8 1.2 Topics Covered in the Guide... 8 1.3 Software Requirements... 9 1.4 Conventions Used in the Guide...

More information

Web Design with Dreamweaver

Web Design with Dreamweaver Web Design with Dreamweaver August 2003 Macromedia Dreamweaver MX and Fireworks MX This document describes how you can use Dreamweaver and Fireworks to develop Web sites quickly and easily. You can create,

More information

CSS Image Gallery Manual

CSS Image Gallery Manual CSS Image Gallery Manual Copyright 2009 All Rights Reserved Page 1 of 39 Index About CSS Image Gallery... 3 Features... 4 Before you begin... 9 Installing the extension... 9 The Basics: Creating a gallery...

More information

Dreamweaver: Styling and Layout Using CSS

Dreamweaver: Styling and Layout Using CSS Dreamweaver: Styling and Layout Using CSS ii How to Use This Book The Exercises This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic for your

More information

Creating the Surf Shop website Part3 REVISED

Creating the Surf Shop website Part3 REVISED Creating the Surf Shop website Part3 REVISED Part 2 Recap: You should have the navigation completed for the website before starting Part 3. 1)Create a new DIV in index.html. It should come after banner

More information

Expression Web Lab Exercises

Expression Web Lab Exercises Expression Web Lab Exercises Expression Web Quick Start Tutorial Heavy Metal Show Car By Aseem Badshah Heavy Metal Show Car Tutorial Page 1 Information in this document, including URL and other Internet

More information

Chapter 3: The Schoolwires Editor

Chapter 3: The Schoolwires Editor : By the end of this chapter you will be able to: Insert and format text. Insert and format images. Insert and format tables. Insert links. Use ActiveBlocks to enhance your pages. Introduction to the Schoolwires

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

Expression Web 3 Lab Exercises

Expression Web 3 Lab Exercises Expression Web 3 Lab Exercises Expression Web 3 Quick Start Tutorial Beaches Around the World By Aseem Badshah Edited by Dave Burkhart (Part 2: Beaches Around the World series) Information in this document,

More information

Girls for STEAM. HTML and CSS Course. Class #1 HTML

Girls for STEAM. HTML and CSS Course. Class #1 HTML Girls for STEAM HTML and CSS Course Class #1 HTML Taught by: Katherine Wakefield {WebCodeChicks} webcodechicks.com Tools The Basics: Windows - Notepad Downloads: Google Chrome Browser (Free) - www.google.com/chrome/

More information

Tables. Miscellaneous. Tips

Tables. Miscellaneous. Tips Getting Started Definitions Screen layout Views Create a web using the web wizard Create a web page from a template Report view Open a web Save a web Page Properties Text General properties Themes Removing

More information

WORD 2013 GETTING STARTED

WORD 2013 GETTING STARTED WORD 2013 GETTING STARTED Information Technology September 1, 2014 1 P a g e 1 Word 2013 2 3 4 5 1. Quick Access Toolbar contains shortcuts for the most commonly used tools. 2. Backstage View Contains

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

Creating Web Pages with a Template

Creating Web Pages with a Template Creating Web Pages with a Template Adobe Dreamweaver Creative Cloud 2014 University Information Technology Services Training, Outreach, Learning Technologies & Video Production Copyright 2015 KSU Division

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

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?

More information

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of

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

Creating a Web Site with Adobe Dreamweaver

Creating a Web Site with Adobe Dreamweaver Creating a Web Site with Adobe Dreamweaver This tutorial will teach you how to: 1. Create a new web site using Adobe Dreamweaver 2. Create a new webpage using the Dreamweaver editor 3. Create numbered

More information

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading

More information

ITD 210 EXAM 1 STUDY GUIDE

ITD 210 EXAM 1 STUDY GUIDE ITD 210 EXAM 1 STUDY GUIDE FINAL EXAM: ADOBE WEB COMMUNICATION USING DREAMWEAVER CS3 OBJECTIVES Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for a website.

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

Expression Web Lab Exercises

Expression Web Lab Exercises Expression Web Lab Exercises Expression Web Quick Start Tutorial Beaches Around the World By Aseem Badshah (Part 2: Beaches Around the World series) Information in this document, including URL and other

More information