1 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 create a new website, most of the time you ll want to create a new HTML (hyper- text markup language) document. Web pages must be written using HTML, but luckily it s one of the simpler languages. CSS (cascading style sheets) works in conjunction with HTML pages to alter the presentation of the website, that is, the look and formatting of it. If you have a previously created website, you can locate it by clicking on Open
3 Example of a 3 column fixed website with a header and footer. Inserting text: There are two ways to insert text into a website through Dreamweaver. The two ways to insert text, either: 1. in the design section, or 2. in the code itself. The different codes created for websites dictate what is visually seen on a website. Dreamweaver allows you to look at both the code of the website (2) and how the website will look like with the codes (1). Through Dreamweaver, you can insert text into either of these fields. Just simply click where you want to be inserted into and type away.
4 On a side note, don t be worried about getting lost going back and forth between the code and the design section. If you click the mouse on a section in the design section (1), there will be mark in the code itself (2) to show where the text is. Cleaning up HTML (from Word): You ll most likely find yourself importing text from Microsoft Word into Dreamweaver. Since Word uses its own coding to show different design changes (such as paragraphs, indents, characters, and tables), a lot of times copying and pasting will show up different in Dreamweaver. Rather than going through the whole document again and changing every character back to its original state, here are some suggestions to clean up the HTML. 1. When inserting the text, click where you want the text to be inserted, then go to Edit - > Paste Special. In the pop- up box, check Text only as demonstrated below. This will remove any formatting that Word has added and leave you with just the text. 2. Check the code itself to see if there are any unwanted characters added into the text. Often these are characters only noticeable in the code and not in the design view itself, so it s rather useful to scan the code to make sure everything looks correct. Lists: There are two types of lists that can be created, ordered lists and unordered lists. An ordered list is just that, a list that goes in order, either numerically or alphabetically. An unordered list is typically a bulleted list, although its appearance can be altered through CSS. 1. This 2. Is an 3. Ordered list This Is an unordered list
5 To create either of these lists, click on the space you want to create the list in the design view. Then below in the Properties menu, the lists will be to the right of the bold and italicize symbols. The first of the buttons on the left is an unordered list, and the button on the right is the ordered list. After clicking either of the buttons, start typing above. Every time you hit return, the list will continue. To get out of the list, hit return twice. If you re having difficulty finding the Properties bar below, go to Window - > Properties (or F3). An alternative way to access the lists is by going into Insert - > HTML - > Text Objects - > Unordered List or Ordered List. History Panel: The history panel shows recent changes that you ve made to your document. This panel allows you to undo or redo commands you ve completed. To activate the history panel, simply go to Windows - > History.
6 ( 10b1f693f21-7cf5a.html) Dreamweaver CSS Classes: Dreamweaver has a window to manage the different CSS styles. These CSS styles, as explained earlier, allow users to customize the appearance of the HTML website. When you create a new website, you have the option to attach the CSS style to the head of the HTML page, or to create a separate CSS page that is linked to the HTML page. Often, it s useful to create a new CSS style. If you decide to create another HTML page but you want to use a previously created CSS page, it s as easy as clicking the link button under the Attach CSS file query (as shown above), finding the CSS page,
7 and accepting it. Also, if you change any aspects of the CSS page, it changes all of the previously linked HTML pages, making it easier to keep everything in unison. On the right side of the screen, there should be a CSS Styles window. If not, go to Window - > CSS Styles. Each of these properties has a slew of customizations that each user can apply to it. To access these customizations, double- click on any of these properties. There is quite a lot of different ways to customize these CSS style pages, and most of it you ll pick up while making changes to your pages. Dreamweaver lets you change the following fields: Type, Background, Block, Box, Border, List, Positioning, and Extensions. Type lets you change the font of the text. This includes the size, the weight, the color, and decorations. Background lets you change the background of a field. You can change it into a color or into an image. There are fields that allow you to position it according to its x and y- axis along with how it repeats itself. Block lets the users change the alignment of text and how it s placed. The display section can be used to change unordered lists into creative navigations. Box lets you change attributes of boxes. This includes its width and height, along with padding and margin. Border adds a border to a certain section. You can change the type of style, width, and color for all four sides (top, right, bottom, and left) of a box. List lets you change aspects of lists, such as the type of bullet used for unordered lists, images, and positions. Positioning lets you move the position of an attribute, such as its placement, position, visibility, along with its z- index and overflow. Extensions allow you to change aspects of page breaks and visual effects, such as different cursor types and filters.
8 Links (websites, documents, PDF files, s): To include a hyperlink, highlight the text that you want to link. Below in the Properties bar, enter in the desired URL under the Link query and then hit enter. Another method to create a hyperlink is to highlight a text and then right- click. In the contextual menu, select Make Link. In the window, at the bottom there is a section to include a URL. Simply enter in the URL. If you want to link to another document (i.e. an HTML page, a PDF, etc.), find the document and hit OK. s are treated similarly. Highlight the text, enter in the address in the Link query below for example), then hit enter. It s recommended to use an obfuscator to avoid spambots from using available addresses online. Dreamweaver also allows you to use the HTML code to enter in a hyperlink. The code is as follows: <a href=" is the text.</a> The is where the URL goes, where This is the text. is the text that appears for the link. So you d be left with a field that looks like this: This is the text. Make sure to enter this code online in the code section of Dreamweaver. If you enter it in the Design view, then it will not work.
9 Anchors: A technique that websites use is allowing users to be linked to a specific part of a website. This is often used with news stories, where a user is taken to a perhaps the third or fourth paragraph rather than at the beginning. To create this, you should use IDs. There are two steps, the first is labeling the area to link to with an ID and the second is linking to this ID. 1. To create an anchor, highlight a word where you want the anchor to be. In the Property Window, type in a name for the ID. 2. To link to the ID, select the text that will be the link in the Design view. Under the Link box in the Property window, type # and then the name of the ID created in step 1. If you chose the ID name to be fisher, type in #fisher in the Link box. 3. It s also possible to link to an ID in a different HTML page. Rather than typing in #fisher into the Link box, put the filename ahead of it. So if the ID is on a page titled about.html, you would type in about.html#fisher. Multiple Text Link Styles: Dreamweaver lets you change the different styles of hyperlinks depending on what the user does. There are three main styles for links: 1. Link color How the link is viewed regularly on a website without the cruiser hovering over it. (a:link) 2. Visited links After a link is clicked, the link is changed to a different color. This lets the user know that they had already visited the hyperlink. (a:visited) 3. Rollover links When the user rolls over the link with the mouse without clicking it, the link turns into a different color. When the mouse is rolled off the link, it reverts to its original link color. (a:hover) You can define different rules for different areas of a page by placing the name of the ID or class before the pseudo- tags described above:.content a:link OR.sidebar1 a:link
10 Inserting Images: To insert an image, place the insertion marker in the Design view of Dreamweaver. Next, go to Insert - > Image. You can then either choose to insert an image saved locally on your computer (or hosted on the server), or you can insert the URL of the image if taken online. To use the image as a link, first click on the image. In the Properties box below, go to the Link box. Then either insert the URL and press enter, or click on the folder button and find a document to link the image to. Background Images: To insert a background image, you ll need to go through the CSS Styles panel. Double- click on an existing rule to open the properties for it. (Typically, the templates use body as the background for the whole page, but depending on how the page is set up, it may be something different.) In the CSS Rule Definition dialogue box, select Background. The second field has Background- image, which lets you choose whichever image you d like to be the background of that property. This can either be a URL or a saved image. Image Maps: Images can be divided into regions called hotspots, creating image maps. When someone clicks on the hotspot, an action happens, such as following a URL or opening a file. After an image is put onto your page, click on it. Below in the Properties field there will be a section titled Map. Fill in a name for the hotspot to keep track of the image map. After entering in a name, click on either the circle tool, the rectangle tool, or the polygon tool. You can use either of these tools to create a hotspot shaped to fit whatever you need.
11 After clicking on the tool, go to the image and click and drag to create the desired shape. If you have the polygon tool, you can click on the image wherever you want a point, and to close it simply click on the first point created. You ll be asked to fill out an Alternative title so people that are either unable to view the picture or whose computers can t access it will be able to know what the image is of. After creating the hotspot, click on the hotspot. Below in the Properties field, insert the URL in the Link box, or click on the folder and search for a document on the computer.
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
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,
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,
JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
Dreamweaver Help: common functions and operations To learn about Dreamweaver CS6 environment view YouTube video: https://www.youtube.com/watch?v=dczjfrgyms0 Setting up Dreamweaver Preferences By default,
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
Microsoft Word 2013 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,
Quick Start Guide to: Understanding the Advanced Template Editor The basic template editor in Swiftpage is used to create templates that began as imported templates or global advanced templates. (One function
Microsoft Word 2016 Tutorial For Mac 1 GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents,
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
JangoMail Tutorial Mastering the JangoMail TinyMCE HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
Working with the Ektron Content Management System Table of Contents Creating Folders Creating Content 3 Entering Text 3 Adding Headings 4 Creating Bullets and numbered lists 4 External Hyperlinks and e
Lab6: Creating a Web page with Macromedia Dreamweaver I. Introduction When you need to find a specific recipe or when you want to visit somewhere you ve never been to before, what do you do? Most of you
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * email@example.com Information Technology Group  Institute
MICROSOFT WORD TUTORIAL G E T T I N G S T A R T E D Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents,
Microsoft Word 2011 Prepared by Computing Services at the Eastman School of Music May 2011 Table of Contents New Look in Microsoft Office 2011... 4 Standard Toolbar... 4 Ribbon... 4 Appearance of Microsoft
Understanding the Advanced Template Editor The Sage E-marketing for Sage CRM Advanced Template Editor is a tool for customers with a working knowledge of HTML design. It is a WYSISYG editor that can modify
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...
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
Microsoft Word 2010 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,
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
New characteristics of Office 2007 software Table of Contents p. 2 Office Button p. 2 Quick Access Toolbar p. 2 Close a Document p. 2 Print Preview p. 2 Help button p. 3 Ribbons p. 4 Some Common Functions
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?...
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
Word 2 Microsoft Word 2013 Mercer County Library System Brian M. Hughes, County Executive Action Technique 1. Page Margins On the Page Layout tab, in the Page Setup group, click Margins. Click the margin
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.
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
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
II. Creating Your Website In this part of Dazzle the Web with Dynamic Dreamweaver, we will learn the following skills: 1. Define a website 2. Create our home page 3. Add content to the home page 4. Format
WYSIWYG Tips and FAQ Version 1.0 WYSIWYG: What you see is what you get. This is an abbreviation for the type of editor Acalog uses. You will layout your content in the editor, and when you hit preview,
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.
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,
Dreamweaver CS3 Dreamweaver CS3 Chapter 5 Templates and Style Sheets Part 1 The idea Structure a page and save as a template Build the CSS page Apply CSS to the template Start using the template to build
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
Editing the Main Template Using Microsoft Front Page This is the Solutions for Your Life main template. Below you will find information on how to edit each section. The first thing to realize about Front
1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.
Microsoft Word 2007 (Getting Started) Screen Layout Menus When you begin to explore Word 2007 you will notice a new look to the menu bar. There are three features that you should remember as you work within
Application Note Building a Website Using Dreamweaver without Programming Nan Xia MSU ECE 480 Team 5 11/16/2012 Table of Contents Abstract... 3 Introduction and Background... 3 Keywords... 3 Procedure...
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...
A Microsoft Expression Tutorial Contents Page (click page numbers to move to the page) Page 1-2..Things to do and know before we start Page 3 How to save your web pages Page 4 Opening an existing web page
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.
University of North Carolina at Chapel Hill Libraries Carrboro Cybrary Chapel Hill Public Library Durham County Public Library DOING MORE WITH WORD: MICROSOFT OFFICE 2010 GETTING STARTED PAGE 02 Prerequisites
Drag-and-drop editor Quick Start Guide Contents Introduction 3 Drag-and-drop editor interface 4 Working with elements 6 Adding and moving elements 7 Resizing of elements 8 Editing your template 9 Working
LESSON 1 MS Word 2007 Introduction to Microsoft Word & Its New Interface What is Microsoft Office Word 2007? Microsoft Office Word 2007 is the twelfth version of Microsoft s powerful word processing program.
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)
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
Item Editor Reference Guide This reference guide is intended for all iwebfolio users. The item editor is the editing tool that appears when a user is editing an item within a portfolio or template. This
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
Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally. 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode
MS Word, Part 3 & 4 Office 2007 Line Numbering Sometimes it can be helpful to have every line numbered. That way, if someone else is reviewing your document they can tell you exactly which lines they have
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
Name: Class: Date: 450 Study Guide Chaps 1-6 Multiple Choice Identify the choice that best completes the statement or answers the question. 1. An HTTP response is sent from a. the web server to the application
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
PE Content and Methods Create a Website Portfolio using MS Word Contents Here s what you will be creating:... 2 Before you start, do this first:... 2 Creating a Home Page... 3 Adding a Background Color
WORD 2013 FORMATTING TEXT and USING STYLES Information Technology September 1, 2014 1 P a g e TABLE OF CONTENTS Paragraph Format Options... 3 Paragraph group under the Home tab... 3 First Line Indent...
HTML Module: The most widely used module on the websites. This module is very flexible and is used for inserting text, images, tables, hyperlinks, document downloads, and HTML code. Hover the cursor over
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...
Microsoft Word 2010 Quick Reference Guide Union Institute & University Contents Using Word Help (F1)... 4 Window Contents:... 4 File tab... 4 Quick Access Toolbar... 5 Backstage View... 5 The Ribbon...
Microsoft Word 2007 Getting Started Microsoft Office Button The Ribbon (formerly toolbar) Quick access Toolbar Working with Documents Creating a New Document Opening an Existing Document Saving a Document
WORD PROCESSING In this session, we will explain some of the basics of word processing. The following are the outlines: 1. Start Microsoft Word 11. Edit the Document cut & move 2. Describe the Word Screen
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
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
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
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
Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the
Microsoft Word Review November 24, 2014 Exercise 1: Open Word Click on Word. OR Click Start. Click All Programs. Click Microsoft Office. Exercise 2: Create a new document Click File Tab. Select New. Click
Microsoft Word 2010 Scavenger Hunt The commands in Microsoft Word 2003 are similar to that of Microsoft Word 2010 except the placement if different. This scavenger hunt will help you get acquainted with
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
Advanced Word Creating Boxes and Borders Boxes Boxes, which look like this, can be placed around single words, groups of words, or entire paragraphs. To create a box, you first need to select (or highlight)
Introduction to CommonSpot 5.0 Presented by OHSU Web Strategies Introduction to CommonSpot 5.0 Lesson Summary Turning Off Web Browser Pop up Blockers Internet Explorer 7.x (Win): Tools Pop-up Blocker Turn
JustEdit WYSIWYG Toolbar Overview When entering JustEdit, users will encounter the JustEdit toolbar, which has a variety of functions available in order to make editing the page easier. The icons present
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
Microsoft Word 2010 Prepared by Computing Services at the Eastman School of Music July 2010 Contents Microsoft Office Interface... 4 File Ribbon Tab... 5 Microsoft Office Quick Access Toolbar... 6 Appearance
Microsoft Word Below are quick references to the important features that we practiced using during class. A. Insertion Point Indicates, with a blinking vertical line where text or graphics will be inserted.
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
Overview... 2 Getting Started... 3 Working with Text... 4 Linking Text Boxes... 4 Using Text Styles in Publisher... 5 Formatting Exercise: Adding a Drop Cap... 5 Working with Graphics... 6 Replacing the
Creating Acrobat Forms Acrobat 9 Professional Acrobat forms typically have an origin from another program, like Word, Illustrator, Publisher etc. Doesn t matter. You design the form in another application
Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Project 1: Personal Web Site FIGURE 1 Dangerous Frogs Web Site Project 1 2 Web Site Design Document Good plans produce good Web sites Design document
Creating a Newsletter with Microsoft Word Frank Schneemann In this assignment we are going to use Microsoft Word to create a newsletter that can be used in your classroom instruction. If you already know
MICROSOFT ACCESS 2007 BOOK 2 4.1 INTRODUCTION TO ACCESS FIRST ENCOUNTER WITH ACCESS 2007 P 205 Access is activated by means of Start, Programs, Microsoft Access or clicking on the icon. The window opened
How to Build a SharePoint Website Beginners Guide to SharePoint Overview: 1. Introduction 2. Access your SharePoint Site 3. Edit Your Home Page 4. Working With Text 5. Inserting Pictures 6. Making Tables
Impress Guide Chapter 2 Using Slide Masters, Styles, and Templates Copyright This document is Copyright 2005 2009 by its contributors as listed in the section titled Authors. You may distribute it and/or
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,