How to Make a Contact Us PAGE in Dreamweaver

Size: px
Start display at page:

Download "How to Make a Contact Us PAGE in Dreamweaver"

Transcription

1 We found a great website on the net called and we have basically followed their tutorial for creating Contact Forms. We also checked out a few other tutorials we found by Googling, but the dreamweaverspot one seemed to be the simplest one for beginners. When a Contact Form is made, there are two key parts: a PHP script and a Webpage Form. A PHP script is a set of instructions that needs to be downloaded from the following location: and then extracted. If our web host does not allow scripts to run, then later on we will find that our new contact us page does not work. If this happens we will have to forget about PHP and forms. Instead of using PHP we can easily make and put an image onto the Contact Us page like this one: People can then create their own to us. (So we can get by without PHP if we need to). The second part of the Contact Form is to create the Contact Us webpage with a Form on it using Dreamweaver. Let s first look at how we modify and set up the PHP script. Setting Up the PHP Script As noted previously, there is a start file of script that we need to download and unzip onto our PC from: Next we need to setup a subfolder in our site using Dreamweaver, called something like PWorldContactUs and into this folder we copy the FormTo .php file that we unzipped. How to Create a Contact Us Page in Dreamweaver Page 1 of 17

2 We now need to modify the PHP file by editing it in Dreamweaver. Change the title to be Contact Form PHP The other step is to change the $my value line in the PHP from the generic to be the address where we want the form to be sent to, which for our site is: (Do not use this address in your PHP, use your won one.) If you need to set up a free hotmail account to use for this exercise, then go to the following link for a full set of step by step instructions: The only other thing is to now save this file into our Dreamweaver site folder, and make sure the file type is set to the PHP group, and the filename (which is case sensitive) is exactly FormTo . Create Contact Us Webpage We used Adobe Fireworks to make a 1024x768 pixels sized background image for our page: How to Create a Contact Us Page in Dreamweaver Page 2 of 17

3 Now we need to make some blank starting HTML code. In Dreamweaver do File > New The New Document Dialog Box appears. In the Blank Document list, choose HTML, then click Create to create a new HTML document. In the Title: text field at the top of the Document toolbar, enter Contact Form to add this as the title in your document. Choose File > Save, name it ContactForm.htm then save the document into your local site folder. We now need to setup the background image for our ContactForm.htm HTML code. To do this, we do from the top of page menu: Modify > Page Properties and then click on browse next to Background image, and navigate to where our image is, and then click OK. How to Create a Contact Us Page in Dreamweaver Page 3 of 17

4 Note that we need to make sure that our HTML and the background image PWContactBkgrnd1024x768.jpg are both in the same folder on our website. This makes our page appear with the Background design on it. We now need to put a Div onto our page, where we can enter some text instructions. First we insert an AP Div box container that we will be able to move around the page to adjust the location of our text. We do Insert > Layout Objects > AP Div and then drag the Div into position. We can then click into the Div box, (to get a big flashing vertical line cursor), and start typing some text into the Div Box. We can set the font, the color and the size of this text using the bottom of screen Properties Inspector: We can also use our mouse to click onto the Div Box and stretch its size and shape, and move it around the page. We can thus make something like this: How to Create a Contact Us Page in Dreamweaver Page 4 of 17

5 We are now ready to add the Contact Us data entry Form onto the page. We found that we needed to make another AP Div to put the form into. When we did not do this, DW put the form at the top of the page over our background and other items. There was then now way to click and drag the form to any other position. This Div box was dragged out to occupy most of the remaining space on our web page: We next need to click our mouse inside this Div Box, to get a big vertical flashing cursor. Now do Insert > Form then select Form from the Flyout Menu. Now in the Properties Inspector at the bottom of the DW screen: In the Action text box type in FormTo .php (this is the file we set up on our site earlier). Change the Method to POST and then in the NAME text box type in ContactForm. This is all shown below on the next page: How to Create a Contact Us Page in Dreamweaver Page 5 of 17

6 This should add some HTML code to our page as: <form action="formto .php" method="post" name="contactform"></form> Next step is to place the form objects onto the page (the information we would like to collect). We need text boxes for Name and Address, and also a Text Area for Comments. To do this click inside our form object (which is defined by a dotted red rectangle in DW: and then from the top menu select Insert > Form > Label. From the Code Window click in between the LABEL Tags and type in Name:. How to Create a Contact Us Page in Dreamweaver Page 6 of 17

7 Move your cursor in the code window to the end of the >/label> tag, and then from the top menu select Insert > Form > Text Field. Name the Text field name, with a max length of 50 characters in the pop up window that appears: Click the OK button. Test your Form to see how it is going, by Saving and then clicking the planet earth icon (or F12 key) to check how it is working. How to Create a Contact Us Page in Dreamweaver Page 7 of 17

8 Back in Dreamweaver, click so that the cursor is inside the red from area, and past the white text box, and repeat the above process to make a Label and text box where a person can enter their address. Name the text field and give it a maximum length of 80 characters. We then have an interesting problem, because the text entry boxes do not display at max width, and we have tem next to each other, and would like them underneath each other. To get them one under each other, we need to place our cursor in between them here: And then hold down the shift key, and press the Enter key a couple of times: We can make the white text boxes display at maximum width, by clicking on them, and in the Properties inspector at the bottom of DW, set them to have Char Width values of 80 to display them on screen as 80 characters wide. We can also click in the code view onto the label names, and then in the Properties at the bottom of DW, change Font, size, and color, like this: How to Create a Contact Us Page in Dreamweaver Page 8 of 17

9 Now we need to set up a box where people can type in their comments (which will become the content). To do this we add another Label and call it Comments. Position our cursor at the end of the white text box, and then do Insert > Form > Label (just like before). Do the Shift key held down with Enter key at same time, to move down one or two lines inside the red form box, and move the comments box so it is underneath the Comments label. Then add a Text Area multiline box where people can enter their comments. Do to Insert > Form > Text Area in the top menu. For the Input Tag Accessibility Attributes box that pops up, just click on Cancel or on OK to get rid of it. A default text area of 5 rows that are 45 characters wide is inserted. We can alter this in either the code view, or the bottom of screen Properties inspector in DW: Name the Text Area comments from the Properties box at the bottom and give the Character Width a value of 50 and the Number of Lines a value of 10. Also type into the Init Value box : Type comments here and click the submit button when finished. Save the page and use the Planet Earth icon of F12 to test it in the browser and confirm it is working ok. How to Create a Contact Us Page in Dreamweaver Page 9 of 17

10 We now need to create the submit button. From the top menu Insert > Form > Button and click Cancel on the Input Tag Accessibility Attributes box that pops up. We do not have to name the button, because DW does this for us. Test the finished form and it should look like the one shown below. Fill in the form, and click the submit button in local mode on the PC and see what happens: Note that FormTo .php is displayed in the bottom left hand corner of the web screen. Well in Local mode we just get a pop up window that asks us if we would like to Open or Save the FormTo .php file. If we click open, it just opens the PHP file in Dreamweaver and does not send an . Hopefully it will work when we ship all the components to our web host server. However, before we do that we need to add a Rollover Link button to our page so that we can click it to go back to our site s Home page when we are done with the submit. We can use the Home button images we already have setup for our Homepage, from back How to Create a Contact Us Page in Dreamweaver Page 10 of 17

11 when we built the Under Construction Page. These images are 94x101 pixels in size, and look like this: They are already stored on our site in the Folder PWorldImages and so we should just be able to point to them. We need to add an AP Div to place the Rollover link into, which we do by the top of page : Insert > Layout Objects > AP Div and then move it into position, and set its Width to 94 and Height to 101 in the bottom of screen Properties Inspector. Now Click inside the Div box, and on the top of screen menu do Insert > Image Objects > Rollover Image and then set the pop up box to have the two images linked to and set the link to be to Index.html like this: Click ok and then test the webpage using F12 to see that the link works ok locally. We also need to modify our Index.HTML homepage so that it now links to this Contact Us page instead of its current link to an under construction page. How to Create a Contact Us Page in Dreamweaver Page 11 of 17

12 We updated our Index page to point to the ContactForm.htm as the link but had an awful time in Dreamweaver trying to F12 make it work locally. For some reason DW updated the link to look ok in DW, and also looked ok when tested in Internet Explorer, but whenever we clicked it it would just stay on the home page. The Contact Us page would work ok if linked to from some other brand new test HTML we made, and it also ran ok on its own. In the end we gave up, and decided to migrate it all up to the web host anyway. On the actual web host everything links and loads and works fine. and when we click the Submit button, it appears to run the PHP and give us a successful end message (that we know is coded into the PHP script): How to Create a Contact Us Page in Dreamweaver Page 12 of 17

13 And when we click on the Click here to continue message, it takes us nicely back to the Passy World homepage. However, when we go to check our destination inbox at there are no s in there. We will have to raise a help request with our Web Hosting Company and see if they can figure out why the script runs ok, but produces no resulting to our inbox. Maybe our host will output the test s to us in the next day or so. Anyway, we have seen how to make a form inside a webpage in Dreamweaver, and combine it with a PHP script, just like business sites do in the real world. So it has not been a total waste of time. If we cannot get the page working, we will have to go back to the simple display of an image** of our address, for people to use their own program to contact us. We display the address in an image, rather than as text on our web page to prevent spiders and spammers from capturing our address by reading our page s source code. How to Create a Contact Us Page in Dreamweaver Page 13 of 17

14 Getting the PHP Script Working We raised a help request with our web hosting company Namecheap.com (who may I say are always sensational at supplying support answers within 24 hours and highy recommended). The showstopper is because of Spammer problems, our host does not let the From field on an be the sender's address. The from field must be something that cannot be replied to, that is on our Host's server such as: noreply@passyworld.com Namecheap.com also kindly supplied us the following sample PHP: <?php $mail_to_send_to = "postmaster@yourdomain.tld"; $your_feedbackmail = "noreply@yourhosteddomain.tld"; $sendflag = $_REQUEST['sendflag']; if ( $sendflag == "send" ) { $ = $_REQUEST[' '] ; $message = $_REQUEST['message'] ; $headers = "From: $your_feedbackmail". "\r\n". "Reply-To: $ ". "\r\n" ; $a = mail( $mail_to_send_to, "Feedback Form Results", $message, $headers ); if ($a) { print("message was sent, you can send another one"); } else { print("message wasn't sent, please check that you have changed s in the bottom"); } }?> <form method="post" action="feedback.php"> <input type="hidden" name='sendflag' value="send"> Your <input name=" " type="text" /><br /> Message:<br /> <textarea name="message" rows="15" cols="40"> </textarea><br /> <input type="submit" /> </form> How to Create a Contact Us Page in Dreamweaver Page 14 of 17

15 We had to make some substantial changes to this PHP as follows: We need to set to be (or we can use but cannot get all the fields passed) and to be in the PHP script. We also need to change the variable names in the Namecheap PHP to match our form which has: Person's Name = name (we will need to add this variable to the Namecheap script) Person's address = (this matches our form HTML ok already) Persons comment text is 50 chars by 10 lines, not 40x15 and = "comments" (not "message") The bottom part of the PHP builds a form on the screen, which we do not need, and so we will delete it. We will replace it with some HTM code form our old PHP that says thankyou, it was sent. We also have to save this PHP with a name of "feedback.php" and set the Action field on our form in Dreamweaver to be "feedback.php". We also needed to remove the If statement, and make a few other changes to end up with this as our final PHP: <?php $mail_to_send_to = "passyworld@hotmail.com"; $your_feedbackmail = "noreply@passyworld.com"; { $ = $_REQUEST[' '] ; $name = $_REQUEST['name'] ; $message = $_REQUEST['comments'] ; $headers = "From: $your_feedbackmail". "\r\n". "Reply-To: $ ". "\r\n". "Name: $name". "\r\n" ; $a = mail( $mail_to_send_to, "PW Contact Us Message", $message, $headers );?> } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>contact Form PHP</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body bgcolor="#ffffff" text="#000000"> How to Create a Contact Us Page in Dreamweaver Page 15 of 17

16 <div> <center> <b>thank you <?php print stripslashes($_request['name']);?></b> <br>your message has been sent <p><a href="../index.html">click here to continue</a></p> </center> </div> </body> </html> So when we enter a message like this: And receive the PHP confirm message ok: and the click here takes us back to the home page (we set this link up using Dreamweaver) How to Create a Contact Us Page in Dreamweaver Page 16 of 17

17 The resulting we get to the hotmail inbox is as follows: The problem with this is that it does not give us the person s address or their name which they entered onto our original form. This is the main drawback to using hotmail. If we use the service provided by our web host, by sending our to info@passyworld.com instead of to passyworld@hotmail.com then we get an with headers where we can see the sender s in the Reply-To: header like this: So the Best advice we can give on making a Contact Us webpage, is to obtain a model PHP script from your web host, and not blindly try to make one yourself. If you are using a great web hosting company like Namecheap.com, then this should be a breeze. How to Create a Contact Us Page in Dreamweaver Page 17 of 17

How to lay out a web page with CSS

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

More information

Adobe Dreamweaver CS5 Tutorial

Adobe Dreamweaver CS5 Tutorial Adobe Dreamweaver CS5 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 layout,

More information

ADOBE DREAMWEAVER CS4 BASICS

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

More information

Adobe Dreamweaver CC 17 Tutorial

Adobe Dreamweaver CC 17 Tutorial Adobe Dreamweaver CC 17 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 Contribute 4 A guide for new website authors

Using Adobe Contribute 4 A guide for new website authors Using Adobe Contribute 4 A guide for new website authors Adobe Contribute allows you to easily update websites without any knowledge of HTML. This handout will provide an introduction to Adobe Contribute

More information

Dreamweaver: Web Forms

Dreamweaver: Web Forms Dreamweaver: Web Forms Introduction Web forms allow your users to type information into form fields on a web page and send it to you. Dreamweaver makes it easy to create them. This workshop is a follow-up

More information

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next. Getting Started From the Start menu, located the Adobe folder which should contain the Adobe GoLive 6.0 folder. Inside this folder, click Adobe GoLive 6.0. GoLive will open to its initial project selection

More information

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

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

More information

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Get Organized... 1 Create the Home Page... 1 Save the Home Page as a Word Document...

More information

How to lay out a web page with CSS

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

More information

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel.

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel. Adobe Dreamweaver CS6 Project 3 guide How to create forms You can use forms to interact with or gather information from site visitors. With forms, visitors can provide feedback, sign a guest book, take

More information

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

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

More information

Netscape Composer: Working with Tables

Netscape Composer: Working with Tables Why tables? Netscape Composer: Working with Tables Tables on the Web can be divided into two categories: data display and page layout. Although the method for making both kinds of tables is the same, it

More information

How to set up a local root folder and site structure

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

More information

COMSC-031 Web Site Development- Part 2

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

More information

Taking Fireworks Template and Applying it to Dreamweaver

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

More information

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

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

More information

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

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

More information

Interactive Tourist Map

Interactive Tourist Map Adobe Edge Animate Tutorial Mouse Events Interactive Tourist Map Lesson 1 Set up your project This lesson aims to teach you how to: Import images Set up the stage Place and size images Draw shapes Make

More information

The Dreamweaver Interface

The Dreamweaver Interface The Dreamweaver Interface Let s take a moment to discuss the different areas of the Dreamweaver screen. The Document Window The Document Window shows you the current document. This is where you are going

More information

Using Dreamweaver CS6

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

More information

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

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

More information

ORB Education Quality Teaching Resources

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

More information

Table Basics. The structure of an table

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

More information

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

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

More information

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the

More information

Dreamweaver Basics Outline

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

More information

Flash Album Generator 2 Manual Version 1.0. About Flash Album Generator 2. Flash Album Generator 2 Manual version 1.0 DMXzone.com

Flash Album Generator 2 Manual Version 1.0. About Flash Album Generator 2. Flash Album Generator 2 Manual version 1.0 DMXzone.com Flash Album Generator 2 Manual Version 1.0 Flash Album Generator 2 Manual Version 1.0...1 About Flash Album Generator 2...1 Converting a Flash Album Generator 1 gallery...6 Creating a new album...7 Editing

More information

ADOBE Dreamweaver CS3 Basics

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

More information

Want to add cool effects like rollovers and pop-up windows?

Want to add cool effects like rollovers and pop-up windows? Chapter 10 Adding Interactivity with Behaviors In This Chapter Adding behaviors to your Web page Creating image rollovers Using the Swap Image behavior Launching a new browser window Editing your behaviors

More information

Layout with Layers and CSS

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

More information

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

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

More information

NVU Web Authoring System

NVU Web Authoring System NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the

More information

Dreamweaver Basics Workshop

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

More information

Section 6: Dreamweaver

Section 6: Dreamweaver Section 6: Dreamweaver 1 Building TPS Web Pages with Dreamweaver Title Pages 1. Dreamweaver Storyboard Pages 3 2. Folder Management 4 3. Defining Your Site 5-8 4. Overview of Design Features 9-19 5. Working

More information

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

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

More information

Getting Started with Universal

Getting Started with Universal Getting Started with Universal Email Universal Email adds email power to your website. This Getting Started Guide shows you how to use Universal Email to enable a contact form that you have on your site,

More information

Locate it inside of your Class/DreamWeaver folders and open it up.

Locate it inside of your Class/DreamWeaver folders and open it up. Simple Rollovers A simple rollover graphic is one that changes somehow when the mouse rolls over it. The language used to write rollovers is JavaScript. Luckily for us, when we use DreamWeaver we don t

More information

Using Dreamweaver. 3 Basic Page Editing. Planning. Viewing Different Design Styles

Using Dreamweaver. 3 Basic Page Editing. Planning. Viewing Different Design Styles Using Dreamweaver 3 Now that you should know some basic HTML, it s time to get in to using the general editing features of Dreamweaver. In this section we ll create a basic website for a small business.

More information

ekaizen Lessons Table of Contents 1. ebook Basics 1 2. Create a new ebook Make Changes to the ebook Populate the ebook 41

ekaizen Lessons Table of Contents 1. ebook Basics 1 2. Create a new ebook Make Changes to the ebook Populate the ebook 41 Table of Contents 1. ebook Basics 1 2. Create a new ebook 20 3. Make Changes to the ebook 31 4. Populate the ebook 41 5. Share the ebook 63 ekaizen 1 2 1 1 3 4 2 2 5 The ebook is a tabbed electronic book

More information

Adobe Fireworks CS Essential Techniques

Adobe Fireworks CS Essential Techniques Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally

More information

About Freeway. Freeway s Tools and Palettes

About Freeway. Freeway s Tools and Palettes About Freeway The most important thing to appreciate before you start a site in Freeway is how the process works, especially if you have tried other Web publishing software before. Freeway is not an HTML

More information

Dreamweaver Handout. University of Connecticut Prof. Kent Golden

Dreamweaver Handout. University of Connecticut Prof. Kent Golden Dreamweaver Handout University of Connecticut Prof. Kent Golden Kent@GoldenMultimedia.com www.goldenmultimedia.com Main goal of this handout: To give you the steps needed to create a basic personal website

More information

Building TPS Web Pages with Dreamweaver

Building TPS Web Pages with Dreamweaver Building TPS Web Pages with Dreamweaver Title Pages 1. Folder Management 7 2. Defining Your Site 8-11 3. Overview of Design Features 12-22 4. Working with Templates 23-25 5. Publishing Your Site to the

More information

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

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

More information

How to lay out a web page with CSS

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

More information

Dear Candidate, Thank you, Adobe Education

Dear Candidate, Thank you, Adobe Education Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:

More information

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

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

More information

The figure below shows the Dreamweaver Interface.

The figure below shows the Dreamweaver Interface. Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia

More information

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production Dreamweaver CS 5.5 Creating Web Pages with a Template University Information Technology Services Training, Outreach, Learning Technologies, and Video Production Copyright 2012 KSU Department of Information

More information

What is EasyWeb?! 3 EasyWeb QuickStart! 4. Publishing Your Website! 10

What is EasyWeb?! 3 EasyWeb QuickStart! 4. Publishing Your Website! 10 What is EasyWeb?! 3 EasyWeb QuickStart! 4 Website List! 6 Toolbar! 6 Inspector, Assets and Widgets! 7 Assets! 8 Widgets! 8 EasyWeb s Web Page Designer! 8 Publishing Your Website! 10 Head and Footer Code!

More information

HO-FL1: INTRODUCTION TO FLASH

HO-FL1: INTRODUCTION TO FLASH HO-FL1: INTRODUCTION TO FLASH Introduction Flash is software authoring package for creating scalable, interactive animations (or movies) for inclusion in web pages. It can be used to create animated graphics,

More information

Content: Step-by-Step instructions to duplicate MS Outlook files to a file. Purpose: To move content from one computer to another.

Content: Step-by-Step instructions to duplicate MS Outlook  files to a file. Purpose: To move  content from one computer to another. Content: Step-by-Step instructions to duplicate MS Outlook e-mail files to a file. Purpose: To move e-mail content from one computer to another. Definitions: Old Computer == the computer you want to copy

More information

PROFESSIONAL TUTORIAL. Trinity Innovations 2010 All Rights Reserved.

PROFESSIONAL TUTORIAL. Trinity Innovations 2010 All Rights Reserved. PROFESSIONAL TUTORIAL Trinity Innovations 2010 All Rights Reserved www.3dissue.com PART ONE Converting PDFs into the correct JPEG format To create a new digital edition from a PDF we are going to use the

More information

Section 1: How The Internet Works

Section 1: How The Internet Works Dreamweaver for Dummies Jared Covili jcovili@media.utah.edu (801) 585-5667 www.uensd.org/dummies Section 1: How The Internet Works The Basic Process Let's say that you are sitting at your computer, surfing

More information

A Dreamweaver Tutorial. Contents Page

A Dreamweaver Tutorial. Contents Page A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating

More information

Eng 110, Spring Week 03 Lab02- Dreamwaver Session

Eng 110, Spring Week 03 Lab02- Dreamwaver Session Eng 110, Spring 2008 Week 03 Lab02- Dreamwaver Session Assignment Recreate the 3-page website you did last week by using Dreamweaver. You should use tables to control your layout. You should modify fonts,

More information

Café Soylent Green Chapter 12

Café Soylent Green Chapter 12 Café Soylent Green Chapter 12 This version is for those students who are using Dreamweaver CS6. You will be completing the Forms Tutorial from your textbook, Chapter 12 however, you will be skipping quite

More information

Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web

Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Tutorial 4 Activities Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Ensure that the editor is in code mode, down the bottom

More information

Microsoft Expression Web Quickstart Guide

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

More information

FrontPage 2000 Tutorial -- Advanced

FrontPage 2000 Tutorial -- Advanced FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right

More information

COMSC-031 Web We S ite Site Development Development- Part 2 Part-Time Instructor: Joenil Mistal April 30, 2013

COMSC-031 Web We S ite Site Development Development- Part 2 Part-Time Instructor: Joenil Mistal April 30, 2013 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal April 30, 2013 Chapter 11 Part 1 11 Using Library Items You can save time by storing frequently used dweb page elements and layouts

More information

Authoring World Wide Web Pages with Dreamweaver

Authoring World Wide Web Pages with Dreamweaver Authoring World Wide Web Pages with Dreamweaver Overview: Now that you have read a little bit about HTML in the textbook, we turn our attention to creating basic web pages using HTML and a WYSIWYG Web

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

More information

How to create a prototype

How to create a prototype Adobe Fireworks Guide How to create a prototype In this guide, you learn how to use Fireworks to combine a design comp and a wireframe to create an interactive prototype for a widget. A prototype is a

More information

Embedding and linking to media

Embedding and linking to media Embedding and linking to media Dreamweaver makes it incredibly easy to embed and link media files (these include audio files and movie files) into your web site. We ll start with linking. Linking to media

More information

Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions

Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions Your Thesis Drive (T:\) Each student is allocated space on the Thesis drive. Any files on this drive are accessible from

More information

Google Earth: Significant Places in Your Life Got Maps? Workshop June 17, 2013

Google Earth: Significant Places in Your Life Got Maps? Workshop June 17, 2013 Google Earth: Significant Places in Your Life Got Maps? Workshop June 17, 2013 1. Open Google Earth. 2. Familiarize yourself with Google Earth s navigational features by zooming into Furman s campus, your

More information

Microsoft Excel 2010 Basic

Microsoft Excel 2010 Basic Microsoft Excel 2010 Basic Introduction to MS Excel 2010 Microsoft Excel 2010 is a spreadsheet software in the new Microsoft 2010 Office Suite. Excel allows you to store, manipulate and analyze data in

More information

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4 Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered

More information

Creating and Publishing Faculty Webpages

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

More information

ITEC447 Web Projects CHAPTER 9 FORMS 1

ITEC447 Web Projects CHAPTER 9 FORMS 1 ITEC447 Web Projects CHAPTER 9 FORMS 1 Getting Interactive with Forms The last few years have seen the emergence of the interactive web or Web 2.0, as people like to call it. The interactive web is an

More information

Flash MP3 Player DMXzone.com Flash MP3 Player Manual

Flash MP3 Player DMXzone.com Flash MP3 Player Manual Flash MP3 Player Manual Page 1 of 16 Index Flash MP3 Player Manual... 1 Index... 2 About Flash MP3 Player... 3 Features in Detail... 3 Before you begin... 7 Installing the extension... 7 Creating a MP3

More information

Figure 1 Properties panel, HTML mode

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

More information

Implementing a chat button on TECHNICAL PAPER

Implementing a chat button on TECHNICAL PAPER Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook

More information

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

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

More information

Introduction to Dreamweaver CS3

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

More information

Dreamweaver MX The Basics

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

More information

Website Development (WEB) Lab Exercises

Website Development (WEB) Lab Exercises Website Development (WEB) Lab Exercises Select exercises from the lists below to complete your training in Website Development and earn 125 points. You do not need to do all the exercises listed, except

More information

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout

More information

Flash Image Enhancer Manual DMXzone.com Flash Image Enhancer Manual

Flash Image Enhancer Manual DMXzone.com Flash Image Enhancer Manual Flash Image Enhancer Manual Copyright 2009 All Rights Reserved Page 1 of 62 Index Flash Image Enhancer Manual... 1 Index... 2 About Flash Image Enhancer... 3 Features in Detail... 3 Before you begin...

More information

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

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

More information

Dreamweaver Domain 4: Adding Content by Using Dreamweaver CS5

Dreamweaver Domain 4: Adding Content by Using Dreamweaver CS5 Dreamweaver Domain 4: Adding Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Define a Dreamweaver site. Create,

More information

Macromedia - Fireworks TechNotes: How to create transparent Pop-up Menus

Macromedia - Fireworks TechNotes: How to create transparent Pop-up Menus Page 1 of 6 Home > Products > Fireworks > Support > TechNote Index How to create transparent Pop-up Menus Pop-up Menus can be structured to have transparent or translucent backgrounds. Modifying the Pop-up

More information

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

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

More information

Introduction to Dreamweaver

Introduction to Dreamweaver COMMUNITY TECHNICAL SUPPORT Introduction to Dreamweaver What is Dreamweaver? Dreamweaver helps you to create Web pages while it codes html (and more) for you. It is located on the bottom tray or in the

More information

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

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

More information

Dreamweaver Website 1: Managing a Website with Dreamweaver

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

More information

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.x Training Manual 1 Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several

More information

HAPPY HOLIDAYS PHOTO BORDER

HAPPY HOLIDAYS PHOTO BORDER HAPPY HOLIDAYS PHOTO BORDER In this Photoshop tutorial, we ll learn how to create a simple and fun Happy Holidays winter photo border! Photoshop ships with some great snowflake shapes that we can use in

More information

Dreamweaver CS3 Lab 2

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

More information

Using Microsoft Word. Working With Objects

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

More information

User Manual. Page-Turning ebook software for Mac and Windows platforms

User Manual. Page-Turning ebook software for Mac and Windows platforms User Manual Page-Turning ebook software for Mac and Windows platforms 3D Issue is a digital publishing software solution that converts your pdfs into online or offline digital, page-turning editions. Getting

More information

Outlook Web Access. In the next step, enter your address and password to gain access to your Outlook Web Access account.

Outlook Web Access. In the next step, enter your  address and password to gain access to your Outlook Web Access account. Outlook Web Access To access your mail, open Internet Explorer and type in the address http://www.scs.sk.ca/exchange as seen below. (Other browsers will work but there is some loss of functionality) In

More information

Working with Images 1 / 12

Working with Images 1 / 12 V2 APRIL 2017 1 / 12 To brighten up your website it is often nice to have images inserted onto various pages of your website. We have an easy option to size these photos on your page, as well as aligning

More information

Google Earth. Tutorials. Tutorial 2: Annotating Google Earth

Google Earth. Tutorials. Tutorial 2: Annotating Google Earth Google Earth Tutorials Tutorial 2: Annotating Google Earth Google Earth makes it easy to create a map with annotations - you can add placemarks (points), paths (lines), polygons in Google Earth, and add

More information

1.0 Overview For content management, Joomla divides into some basic components: the Article

1.0 Overview For content management, Joomla divides into some basic components: the Article Joomla! 3.4.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials

More information

Introduction to Cascade Server (web content management system) Logging in to Cascade Server Remember me Messages Dashboard Home

Introduction to Cascade Server (web content management system) Logging in to Cascade Server Remember me Messages Dashboard Home Introduction to Cascade Server (web content management system) Last Updated on Jul 14th, 2010 The College of Charleston's web site is being produced using a Content Management System (CMS) called Cascade

More information

Inserting Flash Media

Inserting Flash Media Inserting Flash Media Chapter 20 DreamWeaver allows you to directly import media created in Flash and you can even create Flash Text and Flash Buttons within DreamWeaver. Flash is a graphics program that

More information

Goldfish 4. Quick Start Tutorial

Goldfish 4. Quick Start Tutorial Goldfish 4 Quick Start Tutorial A Big Thank You to Tobias Schilpp 2018 Fishbeam Software Text, Graphics: Yves Pellot Proofread, Photos: Tobias Schilpp Publish Code: #180926 www.fishbeam.com Get to know

More information