Quick Guide for Dreamweaver CC Basics April 2016 Training:

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Quick Guide for Dreamweaver CC Basics April 2016 Training:"

Transcription

1

2 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 written primarily in two languages: HTML and CSS. The World Wide Web Consortium (W3C) defines the web standards, or specifications, for these languages. It is important to understand web standards to ensure that the different web browsers display your pages accurately. Dreamweaver includes features that allow you to build web pages based on the latest web standards. What is HTML? Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening <element> and closing </element> tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page. Here are three common HTML tags: <h1> specifies heading text, good for page titles <p> specifies paragraph text, good for body text <img> displays an image specified by a src (source file) Note: It is best practice to write HTML tags in lower case when coding your own pages. What is CSS? With HTML you ve given a basic structure to your web page, but there s not much customization to the style or layout. Eventually you want to add colors, format text and images, and reposition elements on your page. CSS is a language that works with HTML to apply this style and formatting to your web page. Use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page). Creating and Opening Documents Creating a Layout Using a Blank Page You can create a page that contains a predesigned CSS layout, or create a completely blank page and then create a layout of your own. 1. Select File > New. 2. In the Blank Page category of the New Document dialog box, select the kind of page you want to create from the Page Type column. For example, select HTML to create a plain HTML page. 3. If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column; otherwise, select None. Based on your selection, a preview and description of the selected layout appears on the right side of the dialog box. The predesigned CSS layouts provide the following types of columns: Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor s text settings. Help Desk: Page 1

3 Liquid Column width is specified as a percentage of the site s visitor s browser width. The design adapts if the site makes the browser wider or narrower, but does not change based on the site visitor s text settings. Dreamweaver Sites Local Root Folder Stores files you re working on. Dreamweaver refers to this folder as your local site. This folder is typically on your local computer, but it can be on a network server. Remote Folder Stores your files for testing, production, collaboration, and so on. Dreamweaver refers to this folder as your remote site in the Files panel. Typically, your remote folder is on the computer where your web server is running. The remote folder holds the files that users access on the internet. Testing Server Folder The folder where Dreamweaver processes dynamic pages. Defining a Site Local Version of your Site To set up a local version of your site, all you need to do is specify the local where you ll store all of your site files. 1. Identify or create the folder on your computer where you want to store the local version of your site files. 2. In Dreamweaver, choose Site > New Site. 3. In the Site Setup dialog box, make sure the Site category is selected. 4. In the Site Name text box, enter a name for your site. This name appears in the Files panel and in the Manage Sites dialog box; it does not appear in the browser. 5. In the Local Site Folder text box, specify the folder you identified in step one the folder on your computer where you want to store the local version of your site files. Click the folder icon to the right of the text box to browse the folder. 6. Click Save to close the Site Setup dialog box. You can now begin working on your local site files in Dreamweaver. Element Quick View 1. File > Open and browse to select your file. Enable Design View and Live View options at the top of the document window. 2. Click the </> icon in the bottom left corner of the Document window to open Element Quick View. 3. Select the element you wish to edit. The focus update can be seen throughout Dreamweaver and Live View. Manage Sites Dialog Box Options 1. Select > Manage Sites. 2. Do one of the following: Create a New Site Click the New Site button to create a new Dreamweaver site. Then specify the name and location for your new site in the Site setup dialog box. Import a Site Click the Import Site button to import a site. Help Desk: Page 2

4 Create a New Business Catalyst Site Click the New Business Catalyst Site button to create a new Business Catalyst Site. Import a Business Catalyst Site Click the Import a Business Catalyst Site button to create a new Business Catalyst Site. 3. For existing sites, the following options are also available: Delete Deletes the selected site and all of its setup information from you list of Dreamweaver sites; it does not delete the actual site files. (If you want to remove the site files from your computer, you need to do that manually.) To delete a site from Dreamweaver, select the site in the site list and then click the Delete button. You cannot undo this action. Edit Enables you to edit information such as username, password, and server information for an existing Dreamweaver site. Select the existing site in the site list and click the Edit button to edit the existing site. (The Site Setup dialog box opens once you click the Edit button for a selected site.) Duplicate Creates a copy of an existing site. To duplicate a site, select the site in the site list and click the Duplicate button. The duplicated site appears in the site list with the word copy appended to the name of the site. To change the name of the duplicated site, leave the site selected and click the Edit button. Export enables you to export the selected site s settings as an XML file (*.ste). How to Structure a Web Page Hypertext markup language (HTML) provides the foundation of web pages. Desktop and mobile browsers, such as Internet Explorer, Chrome, Firefox, Safari, and Opera, understand and process HTML to display your web pages. Use HTML to define the overall structure of a web page. A well-defined structure provides a good foundation for defining layout and styling later in the process. HTML Structure HTML includes element names that characterize different parts of a web page. The HTML elements are written as tags. Most HTML tags have an opening and a closing tag that include the element name inside angle (< >) brackets. The closing tag has a slash (/) in front of the element name (e.g., <element></element>). Add a div to Hold Generic Page Content A <div> is a division, or generic container, for different kinds of content on a page. A div creates an invisible box around the content it contains to which you can add styling and positioning later in the process. Add the <div></div> tags immediately after the opening <body> tag. This div will include all of the visible content on the page. Add a Header The <header> includes the introduction section of a page such as a banner image, navigation (or menu) section, and page headings. Note: Code hinting helps you code faster and with fewer mistakes. When you type an open angle bracket (<) to start writing an HTML tag, Dreamweaver presents a list of elements you can use. For example, if you type <he, the header element comes into the list. Hit Enter or Return to add a highlighted tag to your code. When you type the </ to close a tag, Dreamweaver knows which tag to close and finishes writing the tag for you. Add a Navigation Section The <nav> includes the navigation links which typically serve as the main menu for the page. Add a Section to Hold Related Content A <section> has a more specific purpose than the generic <div> in that it can be used to include a group of information related to a specific topic. The <section> for a page could include general information about a topic as well as a sidebar quote to accompany it. Help Desk: Page 3

5 Add an Article to Hold Main Content and Sidebar An <article> includes information on a specific topic that can stand on its own. Creating and Attaching Style Sheets 1. In the Sources pane of the CSS Designer panel, click the plus, and then click one of the following options: Create a New CSS File: To create and attach a new CSS file to the document. Attach Existing CSS File: To attach an existing CSS file to the document. Define in Page: To define a CSS within the document. 2. Based on the option you choose, Create A New CSS File or Attach Existing CSS File dialog boxes will appear. 3. Click Browse to specify the name of the CSS file and, if you are creating a CSS, the location to save the new file. 4. Do one of the following: Click Link to link the Dreamweaver document with the CSS file. Click Import to import the CSS file into the document. 5. (Optional) Click Conditional Usage and specify the media query that you want to associate with the CSS file. Switching Between Views Switch to Code View View > Code. In the Document toolbar, click the Code button. Switch to Split Code View Split Code view splits your document in two so that you can work on two sections of the code at once. Select View > Split Code. Switch to Design View In the Document toolbar, click the drop-down list adjacent to Live option and click Design. To switch to full Design view, click the Design button. Split Views Vertically or Horizontally 1. Make sure that you are in the Split view (Split Code or split Design/Live view). 2. To split the view vertically, select View > Split Vertically. To split the view horizontally, deselect View > Split Vertically. Creating a Hyperlink Linking to an External Page 1. Add anchor tags <a></a> around the text desired. 2. Add the href= attribute to the opening <a> tag and enter the full web URL inside the quotes. For example, (<a href= >IPFW</a>). Note: When linking to a page outside of your site, it is recommended to open the page in a new window so the user does not navigate away from your site. To do this, add the target= _blank attribute. For example, (<a href= target= _blank >IPFW</a>) Linking to an Internal Page 1. Add the anchor tags <a></a> around the desired text. 2. Type href= in the opening <a> tag and browse to the desired internal page. Click Open. For example, (<a href= its.html >ITS</a>). Linking to a Section within a Page Add a unique id to the desired section of the page. 1. Add id= in the tag of the text or part of the page to be linked. 2. Insert an id that relates to that part of the page. For example, (<div id= its >ITS). 3. Add the href= attribute to the opening <a> tag and add the id name after a pound sign # in between the quotes. For example, (<a href= #its >Information Technology Services</a>). Help Desk: Page 4

6 Adding Images Adding an Image with HTML Use the <img> tag in HTML to place images when the image is part of the content or for accessibility purposes. 1. Click on Source Code and scroll to the desired place to add an image. 2. Type <img src= and browse for the image. Click Open. Note: The <img> tag is self-closing, so just place the / before the > (i.e., <img src= images/its.jpg />) Setting Width, Height, and Alt Properties HTML images are added at full size by default. You can use the height and width to scale the image. To do that, add the following properties and desired values. (e.i., <img src= images/its.jpg width= 500px height= 500px />) The alt attributes provides a short description of the image in case the image does not load in a user s browser and is also read by screen readers for users with disabilities. (e.i., <img src= images/its.jpg width= 500px height= 500px alt= ITS Banner />) For more information about how to code, visit p Help Desk: Page 5

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

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

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

Microsoft Expression Web

Microsoft Expression Web Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as

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

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

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

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

Caldes CM12: Content Management Software Introduction v1.9

Caldes CM12: Content Management Software Introduction v1.9 Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge

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

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

Page Design, Layout, & Module Explanation:

Page Design, Layout, & Module Explanation: Page Design, Layout, & Module Explanation: Page Overview: Navigate to your assigned page on the website. Once on your page click login At the login screen enter user USERNAME & PASSWORD and CLICK Login

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

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

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 XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

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

Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short

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

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

WELCOME TO CORNERSTONE ONDEMAND LMS FUNCTIONALITY TRAINING

WELCOME TO CORNERSTONE ONDEMAND LMS FUNCTIONALITY TRAINING Slide 1 WELCOME TO CORNERSTONE ONDEMAND LMS FUNCTIONALITY TRAINING UI Maintenance: How To Edit The Interface, The Navigation And Custom Pages Slide 2 OBJECTIVES At the end of this session, you should be

More information

Short notes on webpage programming languages

Short notes on webpage programming languages Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of

More information

Creating your personal website. Installing necessary programs Creating a website Publishing a website

Creating your personal website. Installing necessary programs Creating a website Publishing a website Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on

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

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

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

Introduction to Drupal

Introduction to Drupal Introduction to Drupal Login 2 Create a Page 2 Title 2 Body 2 Editor 2 Menu Settings 5 Attached Images 5 Authoring Information 6 Revision Information 6 Publishing Options 6 File Attachments 6 URL Path

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

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

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL

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

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title CANAJOHARIE CENTRAL SCHOOL

More information

Terminal Four (T4) Site Manager

Terminal Four (T4) Site Manager Terminal Four (T4) Site Manager Contents Terminal Four (T4) Site Manager... 1 Contents... 1 Login... 2 The Toolbar... 3 An example of a University of Exeter page... 5 Add a section... 6 Add content to

More information

COMMON CUSTOMIZATIONS

COMMON CUSTOMIZATIONS COMMON CUSTOMIZATIONS As always, if you have questions about any of these features, please contact us by e-mail at pposupport@museumsoftware.com or by phone at 1-800-562-6080. EDIT FOOTER TEXT Included

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

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site.

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. Updating a Site in Drupal If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. You should be able to find your site at a URL similar to

More information

Drupal Training Guide

Drupal Training Guide Drupal Training Guide Getting Started Drupal Information page on the IT site: http://it.santarosa.edu/drupal On this page is information about Drupal sign up, what Drupal is, which is a content management

More information

Quick Reference Guide

Quick Reference Guide Simplified Web Interface for Teachers Quick Reference Guide Online Development Center Site Profile 5 These fields will be pre-populated with your information { 1 2 3 4 Key 1) Website Title: Enter the name

More information

User Guide. Appendix A. RadEditorAjax

User Guide. Appendix A. RadEditorAjax User Guide Appendix A Table of Contents About this Chapter... 3 What is?... 3 Section 1: at a Glance... 5 Publishing Options... 11 Keyboard Shortcuts Quick Reference... 12 Section 2: Formatting Tools...

More information

Dreamweaver. Links and Tables

Dreamweaver. Links and Tables Dreamweaver Links and Tables WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 ADDING HYPERLINKS... 2 New Text Hyperlink 2 Existing Text or Image Hyperlink 2 EXERCISE 1 3 New Text E-mail

More information

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK

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

Note: Prior to creating your web site you will need to plan and organize all the required information which includes:

Note: Prior to creating your web site you will need to plan and organize all the required information which includes: Creating a Simple Skype* As more and more people are using the Internet to get information, it has become very important for businesses to have their own web site. The Website not only gives an online

More information

How to add rich media to a web page

How to add rich media to a web page Adobe Dreamweaver CS6 Project 3 guide How to add rich media to a web page To add interest and interactivity, you can easily add rich media to web pages. Rich media includes most kinds of video, Flash videos,

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

The McGill Knowledge Base. Last Updated: August 19, 2014

The McGill Knowledge Base. Last Updated: August 19, 2014 The McGill Knowledge Base Last Updated: August 19, 2014 Table of Contents Table of Contents... 1... 2 Overview... 2 Support... 2 Exploring the KB Admin Control Panel Home page... 3 Personalizing the Home

More information

Web Editing Basics 2: Reference

Web Editing Basics 2: Reference Web Editing Basics 2: Reference We will be using the sample pages as a reference point for this training. They can be found on the Web Policy site: http://www.umkc.edu/web-policy/downloads.asp TOPICS 1.

More information

Introduction to Web Development with Dreamweaver

Introduction to Web Development with Dreamweaver ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn

More information

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products... Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...

More information

Fortis Theme. User Guide. v1.0.0. Magento theme by Infortis. Copyright 2012 Infortis

Fortis Theme. User Guide. v1.0.0. Magento theme by Infortis. Copyright 2012 Infortis Fortis Theme v1.0.0 Magento theme by Infortis User Guide Copyright 2012 Infortis 1 Table of Contents 1. Introduction...3 2. Installation...4 3. Basic Configuration...5 3.1 Enable Fortis Theme...5 3.2 Enable

More information

SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production

SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production SoftChalk Level 1 University Information Technology Services Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production Page 1 of 49 Copyright 2013 KSU Department of University Information

More information

MAGENTO THEME SHOE STORE

MAGENTO THEME SHOE STORE MAGENTO THEME SHOE STORE Developer: BSEtec Email: support@bsetec.com Website: www.bsetec.com Facebook Profile: License: GPLv3 or later License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html 1

More information

Create a Simple Website. Intel Easy Steps 1 2012 Intel Corporation All rights reserved.

Create a Simple Website. Intel Easy Steps 1 2012 Intel Corporation All rights reserved. Create a Simple Website Intel Easy Steps 1 2012 Intel Corporation Website Creating a Simple Website As more and more people are using the Internet to get information, it has become very important for businesses

More information

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades. 28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML

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

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

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

Microsoft Access 2010 Part 1: Introduction to Access

Microsoft Access 2010 Part 1: Introduction to Access CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Microsoft Access 2010 Part 1: Introduction to Access Fall 2014, Version 1.2 Table of Contents Introduction...3 Starting Access...3

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

CMS Training. Prepared for the Nature Conservancy. March 2012

CMS Training. Prepared for the Nature Conservancy. March 2012 CMS Training Prepared for the Nature Conservancy March 2012 Session Objectives... 3 Structure and General Functionality... 4 Section Objectives... 4 Six Advantages of using CMS... 4 Basic navigation...

More information

Basic Web Development @ Fullerton College

Basic Web Development @ Fullerton College Basic Web Development @ Fullerton College Introduction FC Net Accounts Obtaining Web Space Accessing your web space using MS FrontPage Accessing your web space using Macromedia Dreamweaver Accessing your

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

No web design or programming expertise is needed to give your museum a world-class web presence.

No web design or programming expertise is needed to give your museum a world-class web presence. PASTPERFECT-ONLINE PastPerfect-Online is the fast, affordable and easy way to provide public access to your PastPerfect data via the World Wide Web. Built on proven MWeb technology, PastPerfect-Online

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

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

3. We will work with the Page Content Web Part, so single click Edit Content

3. We will work with the Page Content Web Part, so single click Edit Content Using SharePoint to Create Web Pages Signing In 1. Open Internet Explorer 2. Type in the school URL: https://www.fsd1.org/schools/schoolname or teacher sub-site URL https://www.fsd1.org/schools/schoolname/yourusername

More information

Test Generator. Creating Tests

Test Generator. Creating Tests Test Generator Creating Tests Table of Contents# Cognero Overview... 1 Cognero Basic Terminology... 2 Logging On to Cognero... 3 Test Generator Organization... 4 Question Sets Versus Tests... 4 Editing

More information

Do It Yourself Website Editing Training Guide

Do It Yourself Website Editing Training Guide Do It Yourself Website Editing Training Guide Version 3.0 Copyright 2000-2011 Sesame Communications. All Rights Reserved. Table of Contents DIY Overview 3 What pages are editable using the DIY Editing

More information

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8 University Computing and Information Services Training Guide For additional help, contact the UCIS Help Desk at (910) 5216260 or helpdesk@uncp.edu, or visit

More information

UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130

UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130 UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS Silva Introduction to Silva Document No. IS-130 Contents What is Silva?... 1 Requesting a website / Web page(s) in Silva 1 Building the site and making

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

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

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1 UH CMS Basics Cascade CMS Basics Class UH CMS Basics Updated: June,2011! Page 1 Introduction I. What is a CMS?! A CMS or Content Management System is a web based piece of software used to create web content,

More information

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame... Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with

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

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

SPHOL326: Designing a SharePoint 2013 Site. Hands-On Lab. Lab Manual

SPHOL326: Designing a SharePoint 2013 Site. Hands-On Lab. Lab Manual 2013 SPHOL326: Designing a SharePoint 2013 Site Hands-On Lab Lab Manual This document is provided as-is. Information and views expressed in this document, including URL and other Internet Web site references,

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical

More information

Web Mail Guide... Error! Bookmark not defined. 1 Introduction to Web Mail... 4. 2 Your Web Mail Home Page... 5. 3 Using the Inbox...

Web Mail Guide... Error! Bookmark not defined. 1 Introduction to Web Mail... 4. 2 Your Web Mail Home Page... 5. 3 Using the Inbox... Powered by Table of Contents Web Mail Guide... Error! Bookmark not defined. 1 Introduction to Web Mail... 4 1.1 Requirements... 4 1.2 Recommendations for using Web Mail... 4 1.3 Accessing your Web Mail...

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

CONTENT MANAGEMENT SYSTEM USER GUIDE

CONTENT MANAGEMENT SYSTEM USER GUIDE CONTENT MANAGEMENT SYSTEM USER GUIDE TABLE OF CONTENTS Logging in to the CMS...p. 3 Folders...p. 4 Creating a web page...p. 5 Step one: create your content section...p. 5 Step two: use a smart form to

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

Joomla Article Advanced Topics: Table Layouts

Joomla Article Advanced Topics: Table Layouts Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand

More information

WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro

WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that

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

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

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

Web Portal User Guide. Version 6.0

Web Portal User Guide. Version 6.0 Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries

More information

HTML5 & CSS 8 th Edition. Chapter 3 Enhancing a Website with Links and Images

HTML5 & CSS 8 th Edition. Chapter 3 Enhancing a Website with Links and Images HTML5 & CSS 8 th Edition Chapter 3 Enhancing a Website with Links and Images Chapter Objectives 1. Describe types of hyperlinks 2. Create relative links, absolute links, email links, and telephone links

More information

Editing the Main Template in Contribute

Editing the Main Template in Contribute Editing the Main Template in Contribute - 1 - Editing the Main Template in Contribute About The index page is unique over all secondary pages and has some special formatting that should be followed to

More information

Previewing & Publishing

Previewing & Publishing Getting Started 1 Having gone to some trouble to make a site even simple sites take a certain amount of time and effort it s time to publish to the Internet. In this tutorial we will show you how to: Use

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

EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators

EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators Version 1.0 Last Updated on 15 th October 2011 Table of Contents Introduction... 3 File Manager... 5 Site Log...

More information

Making Content Editable. Create re-usable email templates with total control over the sections you can (and more importantly can't) change.

Making Content Editable. Create re-usable email templates with total control over the sections you can (and more importantly can't) change. Making Content Editable Create re-usable email templates with total control over the sections you can (and more importantly can't) change. Single Line Outputs a string you can modify in the

More information

Google Sites: Creating, editing, and sharing a site

Google Sites: Creating, editing, and sharing a site Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly

More information

Expression Web 4 Tutorial

Expression Web 4 Tutorial Expressions Web 4 Tutorial This is a basic look at the interface and workings of Expression Web. Here is the opening screen. It is divided into five windows which include; 1. A folder window top left 2.

More information

Beginning Dreamweaver Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager

Beginning Dreamweaver Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager Beginning Dreamweaver Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager ce-dennis@wiu.edu Malpass Library 637 Phone: 309.298.2434 1 Setting

More information

Microsoft PowerPoint 2010

Microsoft PowerPoint 2010 Microsoft PowerPoint 2010 2 The PowerPoint Ribbon 1 4 3 Getting Started 1 Quick Access Tool Bar Contains shortcuts for commonly used tools. 2 Backstage View Contains tools to work with files and manage

More information