ITP 101 Project 3 - Dreamweaver

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "ITP 101 Project 3 - Dreamweaver"

Transcription

1 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 the opportunity to create their own personal website and make it available to others on the World Wide Web (WWW). This project will introduce you to the basics of web design using a What You See Is What You Get (WYSIWYG) HTML editor, specifically Dreamweaver CS5. You need the finished graphics from the Photoshop lab (Project 2) that are in a folder entitled lastname_firstname_photoshop. Those files are: header.png, nav1.png, nav2.png, nav3.png, rollover1.png, rollover2.png, and rollover3.png. You also need two images of your products. These could be the two images you used in the PowerPoint lab (Project 1) or you can download images from the Web. By the conclusion of this project, you will have created four HTML pages and one CSS file. Those files are: index.html, products.html, location.html, contact.html, and styles.css. Before you begin, please be aware that web server is case sensitive. Therefore, for consistency, be sure to name all of your.html files and graphic files in lowercase. Here is an example website: If at any time you make a mistake during this project, you can use the history palette to go back to a previous step. To undo the previous action, use CTRL+Z on a Windows machine, use COMMAND+Z on a Mac machine, or the toolbar Edit Undo option. 1

2 Instructions 1. Create a new folder on your flash drive (or on the Desktop of the computer you are currently using) and name it itp In the itp101 folder, create a new folder and name it images. 3. Copy all of the images from your lastname_firstname_photoshop folder and put them in the images folder. 4. Grab the images of your products that you used in your PowerPoint lab and put them in the images folder. File Transfer Program: 5. To set up your account on the web server named aludra, you will use a FTP (File Transfer Protocol) client. On the computers in the labs, Cyberduck is on the Mac side and FileZilla is on the Windows side. USC offers Fetch (Mac) and FileZilla (Windows) as the free FTP programs. You can download the free university distributed software at 6. Follow the directions for one of the FTP clients. Cyberduck (Mac): a. Start Cyberduck by using Finder and selecting Applications Cyberduck. You can also use the Spotlight tool and enter Cyberduck. b. Click the Open Connection icon. c. Fill in the following information: For the first pulldown, select SFTP (SSH File Transfer Protocol) instead of FTP (File Transfer Protocol). The Port should change to 22. For the Server, enter aludra.usc.edu. For the Username, enter your USC username. This is the same one you use to log into Blackboard. For the Password, enter your password. Click the Connect button. Fetch (Mac): a. Start Fetch by using Finder and selecting Applications Fetch. You can also use the Spotlight tool and enter Fetch. b. In the New Connection window, fill in the following information: For the Hostname, enter aludra.usc.edu. For the Username, enter your USC username. This is the same one you use to log into Blackboard. For the Connect using option, enter SFTP. For the Password, enter your password. Click the Connect button. FileZilla (Windows): a. Start FileZilla by selecting Start Programs Internet Tools FileZilla. b. Click on the Connect image in the upper left corner. Do not use QuickConnect. c. In the My FTP Sites folder listing, click the New Site button and create a site called aludra. d. Fill in the following information: For the Host, enter aludra.usc.edu. For the Servertype, select SFTP using SSH2. The Port should change to 22. For the Logintype, select Ask for password. For the User, enter your USC username. This is the same one you use to log into Blackboard. 2

3 Click the Connect button to log in. You will be prompted to enter your password. Setting up your web space: 6. Using your FTP client, you need to create a folder named public_html. If you are using Cyberduck, then click the Action icon at the top of the window and select the New Folder option. If you are using Fetch, then click the New Folder icon at the top of the window. If you are using FileZilla, then right click on the mouse and select the Create Directory option. 7. Make sure to enter public_html as the folder name. It needs to be all lowercase with the underscore. If you mistype this, then your website will not work. 8. Double click on the public_html folder in order to open the public_html folder. 9. Create a folder named itp101 in the public_html folder. Folder names are casesensitive. 10. You can now close your FTP client. Dreamweaver: 11. Start Adobe Dreamweaver CS6 or CS Familiarize yourself with the Dreamweaver layout. Use the following image as a guideline. Make sure that the CSS Styles and Files windows are visible on the right side and the Properties Window is visible on the bottom. If they are not visible, select Window on the main menu and the select the appropriate option. CSS Styles Files Properties index.html (Home Page) Create a HTML file: 13. From Welcome Screen window under the Create New column, select the More option. 14. In the New Document window: a. Make sure the Blank Page tab is selected. 3

4 b. For the Page Type, select the HTML option. c. For the Layout, select the 1 column fixed, centered, header and footer option. d. For the Layout CSS pulldown (lower right side), select the Create New File option. e. Click the Create button. 15. In the Save Style Sheet File As window: a. Save As: textfield, enter styles.css for the filename. b. Browse to the itp101 folder that you just created in step 1 in order to save this CSS file in that folder. c. Click the Save button. Save your document: 16. In the main menu, select the File Save As option. 17. In the Save As window, enter index.html for the name. Browse to the itp101 folder. Click the Save button. 18. While you continue to make changes to your image, make sure to save your document often. You may select the File Save option. If you are on a Mac machine, you can press the COMMAND and S keys at the same time. If you are on a Windows machine, you can press the CTRL and S keys at the same time. Manage your site: 19. In the main menu, select the Site New Site option. (You can edit your site definition by clicking on the Site Manage Sites option.) 20. In the Site Setup window, make sure Site is selected in the top left corner: In the Site Name textfield, enter your USC username. For the Local Site Folder, click the folder icon to select your itp101 folder on your local machine. It will be on your flash drive, on your Desktop, or in your Documents folder. This is the folder you created in step In the Site Setup window, select Servers in the top left corner: Click the + (plus) button in the bottom left corner of the table. Make sure the Basic button is selected at the top. In the Server Name textfield, enter aludra. For the Connect using pulldown, select SFTP. In the SFTP Address textfield, enter aludra.usc.edu. In the Username textfield, enter your USC username. For the Password textfield, leave it blank. Dreamweaver will ask you for your password when you try to connect. In the Root Directory textfield, enter public_html/itp101. In the Web URL textfield, enter where username is your USC username. Click the Save button. 22. In the Site Setup window, click the Save button. 23. Find the Files window in the lower right corner. If you cannot find it, then from the main menu select Window and find the Files option. If there is a checkmark in front of Files, then the panel is visible. If not, then select it and the window will be visible. Now your can put files to the web server (aludra) and get files from the server. 24. Click the up arrow to put your files on your local computer to the web server. (You can click the down arrow to get your files from the server and put them on your local computer.) 4

5 Source Code HTML page styles.css external CSS file Title Code view Design - WYSIWYG Working in Dreamweaver: The three ways to edit your document are Code, Split and Design. Design mode is the WYSIWYG (what you see is what you get) editor. Code mode lets you see your HTML code so you edit it like you are using a text editor. Split mode lets you see both. On a laptop, this can be hard to use. For this class, you should be using Design. Following is a button labeled Live View that will toggle on and off. Make sure it is toggled off. When you are in Live View, you will not be able to edit certain components. Under the edit mode buttons, you will see Source Code and styles.css. These act like radio buttons. Click on the Source Code to view and edit the HTML page. Click on styles.css to view and edit the stylesheet. You should select Source Code. Most people will never need to edit the external css file since when you edit properties when you are working on your HTML page, the external css file will be updated automatically. Make sure to save your pages. If you see an asterisk (star) by Source Code or by any of the HTML or CSS files in your project, then they have been updated but not saved. To save everything at one time, select the File Save All option on the main menu. 5

6 Set the title: 25. In the Title textfield (which is denoted in the image above), enter a meaningful tile for HTML page. For your index.html page, set it to the name of your website/company. By default, Dreamweaver puts in the text Untitled Document and that is what will be displayed at the top of the web browser when someone is viewing your page if you do not change it. Add the header image: 26. Double click in the page where it says Insert_logo (180 x 90). 27. In the Select Image Source window, select the images folder and then the header.png image file. Click the Choose button. Make the header image a link: 28. Click on the header image. 29. In the Properties window, change the Link textfield to index.html. Get ready to insert the navigation bar images: 30. From the main menu, select the Edit Select Parent Tag option. You have now selected the <a> tag. (You can click on the Code option to verify.) 31. From the main menu, select the Insert HTML Special Characters Line Break option. Set up navigation bar images: 32. From the main menu, select the Insert Image Objects Rollover Image option. 33. In the Insert Rollover Image window: In the Image name textfield, enter Products. For the Original image, click on the Browse button. Find and select the nav1.png file. Click the Choose button. For the Rollover image, click on the Browse button. Find and select the rollover1.png file. Click the Choose button. In the Alternate text textfield, enter Products. In the When clicked, Go to URL textfield, enter products.html. Click the OK button. 34. Repeat this process for the other two navigation items Location and Contact. For Location, use nav2.png and rollover2.png. For Contact, use nav3.png and rollover3.png. 35. Delete the extra line between the header image and the navigation images by clicking right in front of the nav1 image and clicking the Delete key. 6

7 Set up the CSS properties: 36. In the CSS Styles window, select All toggle button. Click the arrow (Mac) icon or + (Windows) next to styles.css such that it is shows all of the rules. 37. Click on the.header rule. Right click on the background property and select the Delete option. (Or you may change it to a color that you want for the header.) Change the text in the main content section: 38. Select the word Instructions in the main content div. Center align it by selecting Format Align Center from the main menu. You may also change the color by selecting the Format Color option. In the New CSS Rule window, click the OK button. 39. Select and change the text in the main content div. 40. Delete text that you do not want. 41. Add images, hyperlinks and other items using the Insert menu. Change the styles for entire page: 42. In the CSS Styles window, select All toggle button. Click the arrow next to styles.css such that it is pointing down and showing all of the rules. 43. Double click on the body rule to open the CSS Rule Definition window. 44. In the CSS Rule Definition window under the Type Category, change the Font-family. Under the Background Category, change the Background-color. You may change other properties as well. Once done, click on the OK button. 45. Double click on the.container rule. Under the Background Category, change the Background-color and anything else you want to change. 46. Double click on the a:link and a:visited rules to change the color for all hyperlinks. Change the text in the footer section: 47. Select and change the text in the footer div. 48. Add your name, ITP 101 and Spring Change the styles for the footer section: 49. In the CSS Styles window, double click on the.footer rule. 50. In the CSS Rule Definition window under the Background Category, change the Background-color. If your background color is dark, then you need to change your font color to a light color such as white by using the Type Category. Under the Block Category, change the Text-align to center or right. You may change other properties as well. Once done, click on the OK button. Add metadata: 51. To add a description for your web page, from the main menu select the Insert HTML Head Tags Description option. 52. In the Description window, enter a description for your company website such as At company name, we provide a wonderful selection of product name. 53. To add keywords, select the Insert HTML Head Tags Keywords option. 54. In the Keywords window, enter keywords separated by commas. Add your company name, your product, USC, and itp101. Test the page: 55. To see how your pages will look in a web browser, then click on the image of the globe which is near the Title textfield. This will let you test the pages you are working on in Dreamweaver. 7

8 Products Page Example Products Page: Create a new page by copying the index page: 56. From the main menu, select the File Save As option. 57. In the Save As window, change the filename to products.html. Click the Save button. 58. Change the Title to your company name Products. 59. Change the top text in main content section to Products (or something like that). 60. In the main content section, insert a table to display your products and their info (such as price). From the main menu, select the Insert Table option. In the Table window, enter a number for the Rows and a number for the Columns. There should be a minimum of 2 columns and 2 rows. For one of the rows, add images of your products. Just click in each cell. From the main menu, select the Insert Image option. In the Select Image Source window, browse to your images folder and select one of your product images. Repeat this for each cell of the row. o You will likely need to resize the image if it is too big. To resize, select the image and then drag the black resize square in the corner of the image. You can hold Shift while resizing an image to maintain its aspect ratio (proportions). In another row (above or below the row of images), enter in information about the product such as name and price. To do this, just click in each cell and type information. 8

9 Center align the text in each cell. From the main menu, select the Format Align Center option. You may also change the font, color and other properties of the text by using the Format option. 61. Update the image for the element of your navigation bar to be the rollover image. Click on the Products image. In the Properties window, change the Src of the image from navbar1.png to rollover1.png. You can change the filename in the Src textfield or click on the Browse for File icon (looks like an image of a folder). 62. Save this page. Example Location Page: Location Page Create a new page by copying the index page: 63. Click on the index.html tab. 64. From the main menu, select the File Save As option. 9

10 65. In the Save As window, change the filename to location.html. Click the Save button. 66. Change the Title to your company name Location. 67. Change the top text in main content section to Location (or something like that). 68. In the main content section, insert text about your location. 69. Add a Google map to your web page ( Open a web browser such as Firefox, IE, Chrome or Safari: Enter into the web address text field. In the Google maps text field, enter the address for your company. (You can use any address such as your own address or the address of USC.) Specify the map type you want such as Map, Satellite or Terrain. If you want to use Street View to see a street-level image of the address, drag the Pegman icon to the location you want to see. Click on the Link icon. In the window that comes down below the Link, click on the Customize and preview embedded map link. In the Google Maps window, adjust the map size until the Preview displays it like the way you want. Select all of the text in the Copy and paste this HTML to embed in your website text area using clicking in the text area. Select the text with your mouse or by using the main menu and selecting the Edit Select All option (COMMAND+A for Macs or CTRL+A for Windows). Copy the text by selecting the Edit Copy option (COMMAND+C for Macs or CTRL+C for Windows). Close the Google Maps window. 70. Back in Dreamweaver, click in the Location page where you want to put the map. From the main menu, select the Code view option. It will show the HTML code. Paste the code by selecting the Edit Paste option off of the main menu. 71. Select the Design view. A grey box will appear. When you preview the page, you will see the map. 72. Update the image for the element of your navigation bar to be the rollover image. 73. Save this page. 10

11 Contact Page Example Location Page: Create a new page by copying the index page: 74. Click on the index.html tab. 75. From the main menu, select the File Save As option. 76. In the Save As window, change the filename to contact.html. Click the Save button. 77. Change the Title to your company name Contact. 78. Change the top text in main content section to Contact (or something like that). 79. In the main content section, insert a form: a. From the main menu, select Insert Form Form. You will see a pink box. Click inside the form. b. From the main menu, select Insert Form Text Field to add a text field. c. In the Input Tag Accessibility Attributes window, enter name for the ID and Name for the Label. Click the OK button. d. Insert your mouse cursor after the text field and hit the Return key. e. Repeat the process to add text fields/labels for Phone and . Insert new lines using the Return key after each text field. f. Select Insert Form Textarea in order to add a text area for comments. g. In the Input Tag Accessibility Attributes window, enter comments for the ID and Comments for the Label. Click the OK button. h. Insert a new line using the Return key after the text area. i. Select Insert Form Button to add a button for submitting the form. j. In the Input Tag Accessibility Attributes window, enter Submit for the ID and leave the Label textfield blank. Click the OK button. 11

12 k. Select the Submit button that you just created and look at the Properties window. Make sure that in the Action radio button group the Submit form radio button is selected. l. Select the whole form by clicking on the pink box. Look at the Properties window. Change the Form ID to contact. In the Action textfield, enter where username is replaced with your USC username. 80. Update the image for the element of your navigation bar to be the rollover image. 81. Save this page. Submitting the project 82. In the Files window (lower right): Click on the Site - username folder. Click on the up arrow. When it asks you if you are sure you wish to put the entire site, click the OK button. 83. Test your site by opening a web browser such as Firefox or Safari. Enter your URL which is where username is your USC username that you use to log into Blackboard. Click on your navigation bar items and your header image. Make sure your form on your contact page works. 84. Go to Blackboard ( Click on the Assignments option. Click on the Lab3 link. In the Submission box, enter your full URL which should be where username is your USC username. Highlight your URL and click on the globe icon. In the Insert Link window, enter the web address in the URL textfield, make sure that there is a checkmark in the Open link in new window checkbox, and click on the Submit button. Since your files are all on aludra, you do not need to upload them. 12

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

Personal Portfolios on Blackboard

Personal Portfolios on Blackboard Personal Portfolios on Blackboard This handout has four parts: 1. Creating Personal Portfolios p. 2-11 2. Creating Personal Artifacts p. 12-17 3. Sharing Personal Portfolios p. 18-22 4. Downloading Personal

More information

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.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

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

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

Introduction to Macromedia Dreamweaver MX

Introduction to Macromedia Dreamweaver MX Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver

More information

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

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

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

Adobe Dreamweaver - Basic Web Page Tutorial

Adobe Dreamweaver - Basic Web Page Tutorial Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized

More information

Creating a Website with Publisher 2013

Creating a Website with Publisher 2013 Creating a Website with Publisher 2013 University Information Technology Services Training, Outreach, Learning Technologies & Video Production Copyright 2015 KSU Division of University Information Technology

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

SFTP Server User Login Instructions. Open Internet explorer and enter the following url: https://sftp.sae.org

SFTP Server User Login Instructions. Open Internet explorer and enter the following url: https://sftp.sae.org SFTP Server User Login Instructions Open Internet explorer and enter the following url: https://sftp.sae.org You will be prompted for a user id and password as such. Please enter your account id and password.

More information

Creating a Website with MS Publisher

Creating a Website with MS Publisher Creating a Website with MS Publisher Getting Started with the Wizard...1 Editing the Home Page...3 Editing Text...3 Editing and Inserting Graphics...4 Inserting Pictures...6 Inserting a Table...6 Inserting

More information

II. Creating Your Website

II. Creating Your Website 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

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

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

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

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

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

Site Maintenance. Table of Contents

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

More information

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

Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College *

Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Some Student Organizations are on our web server called

More information

Creating a Web Site with Publisher 2010

Creating a Web Site with Publisher 2010 Creating a Web Site with Publisher 2010 Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This document may be

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

Adobe CQ5 Authoring Basics Print Manual

Adobe CQ5 Authoring Basics Print Manual Adobe CQ5 Authoring Basics Print Manual SFU s Content Management System SFU IT Services CMS Team ABSTRACT A summary of CQ5 Authoring Basics including: Setup and Login, CQ Interface Tour, Versioning, Uploading

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

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

Getting Started with KompoZer

Getting Started with KompoZer Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files

More information

Web Ambassador Training on the CMS

Web Ambassador Training on the CMS Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create

More information

Login: https://ipfw.edu/c Quick Guide for dotcms & Accessibility November 2014 Training: http://ipfw.edu/training

Login: https://ipfw.edu/c Quick Guide for dotcms & Accessibility November 2014 Training: http://ipfw.edu/training dotcms & Accessibility Folders Creating a New Folder Note: All folders showing on menu must have an index page. 1. Right-click the parent folder in which the new folder will reside. 2. Click New > Folder.

More information

USC Aiken CMS Manual. A manual on using the basic functions of the dotcms system. Office of Marketing and Community Relations-USC Aiken

USC Aiken CMS Manual. A manual on using the basic functions of the dotcms system. Office of Marketing and Community Relations-USC Aiken USC Aiken CMS Manual A manual on using the basic functions of the dotcms system Office of Marketing and Community Relations-USC Aiken Table Of Contents Introduction/How to Use Manual... 2 Logging In...

More information

How to Create and Send a Froogle Data Feed

How to Create and Send a Froogle Data Feed How to Create and Send a Froogle Data Feed Welcome to Froogle! The quickest way to get your products on Froogle is to send a data feed. A data feed is a file that contains a listing of your products. Froogle

More information

Microsoft FrontPage 2003

Microsoft FrontPage 2003 Information Technology Services Kennesaw State University Microsoft FrontPage 2003 Information Technology Services Microsoft FrontPage Table of Contents Information Technology Services...1 Kennesaw State

More information

KOMPOZER Web Design Software

KOMPOZER Web Design Software KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web

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

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

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

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

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Chapter 14: Links. Types of Links. 1 Chapter 14: Links 1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and

More information

Uploading and Editing Your Course Web Page

Uploading and Editing Your Course Web Page Uploading and Editing Your Course Web Page CM210 Multimedia Storytelling I Fall 2008 Downloading the Web Page Template I have created and styled a simple Web page that everyone can use as the index page

More information

OU Campus Web Content Management

OU Campus Web Content Management DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT OU Campus Web Content Management Table of Contents OU Campus Web Content Management... 1 Introduction

More information

NJCU WEBSITE TRAINING MANUAL

NJCU WEBSITE TRAINING MANUAL NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...

More information

Transitioning from TurningPoint 5 to TurningPoint Cloud - LMS 1

Transitioning from TurningPoint 5 to TurningPoint Cloud - LMS 1 Transitioning from TurningPoint 5 to TurningPoint Cloud - LMS 1 A Turning Account is a unique identifier that is used to tie together all software accounts and response devices. A Turning Account is required

More information

Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)

Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing

More information

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

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

Creating Web Pages With Dreamweaver MX 2004

Creating Web Pages With Dreamweaver MX 2004 Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic

More information

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

WinSCP: Secure File Transfer Using WinSCP for Secure File Transfer on Windows

WinSCP: Secure File Transfer Using WinSCP for Secure File Transfer on Windows WinSCP: Secure File Transfer Using WinSCP for Secure File Transfer on Windows Overview WinSCP is an SFTP (Secure File Transfer Protocol), FTP (File Transfer Protocol), and SCP (Secure Copy Protocol) application

More information

Creating Your Personal Website

Creating Your Personal Website Creating Your Personal Website These instructions will show you how to create a personal webpage for CSULB students using Dreamweaver MX 2004. The page will consist of a title, background image, text,

More information

Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015

Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015 Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015 1 TABLE OF CONTENTS 2 What is Appspace For Digital Signage... 4 3 Access Appspace... 4 4 Best Practices and Notes... 4 5 Appspace

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

Create a GAME PERFORMANCE Portfolio with Microsoft Word

Create a GAME PERFORMANCE Portfolio with Microsoft Word Create a GAME PERFORMANCE Portfolio with Microsoft Word Planning A good place to start is on paper. Get a sheet of blank paper and just use a pencil to indicate where the content is going to be positioned

More information

Dreamweaver Tutorial #1

Dreamweaver Tutorial #1 Dreamweaver Tutorial #1 My first web page In this tutorial you will learn: how to create a simple web page in Dreamweaver how to store your web page on a server to view your page online what the Internet

More information

Microsoft PowerPoint 2008

Microsoft PowerPoint 2008 Microsoft PowerPoint 2008 Starting PowerPoint... 2 Creating Slides in Your Presentation... 3 Beginning with the Title Slide... 3 Inserting a New Slide... 3 Slide Layouts... 3 Adding an Image to a Slide...

More information

Password Memory 6 User s Guide

Password Memory 6 User s Guide C O D E : A E R O T E C H N O L O G I E S Password Memory 6 User s Guide 2007-2015 by code:aero technologies Phone: +1 (321) 285.7447 E-mail: info@codeaero.com Table of Contents Password Memory 6... 1

More information

Page1. Tera Doty-Blance http://library.cortland.edu/ttc/training_center.asp

Page1. Tera Doty-Blance http://library.cortland.edu/ttc/training_center.asp Page1 Contents Setting Up a Student Web Account on the SUNY Cortland Web Server... 2 Opening the iweb Application and Choosing a Template... 3 Publishing Your iweb site to Student Web... 5 Creating a Copy

More information

Chapter 4: Website Basics

Chapter 4: Website Basics 1 Chapter 4: In its most basic form, a website is a group of files stored in folders on a hard drive that is connected directly to the internet. These files include all of the items that you see on your

More information

MiraCosta College now offers two ways to access your student virtual desktop.

MiraCosta College now offers two ways to access your student virtual desktop. MiraCosta College now offers two ways to access your student virtual desktop. We now feature the new VMware Horizon View HTML access option available from https://view.miracosta.edu. MiraCosta recommends

More information

Using the CCNY Server Space with Secure Shell 3.0 for Windows Created by Doris Grasserbauer dgrasserbauer@ccny.cuny.edu

Using the CCNY Server Space with Secure Shell 3.0 for Windows Created by Doris Grasserbauer dgrasserbauer@ccny.cuny.edu Using the CCNY Server Space with Secure Shell 3.0 for Windows Created by Doris Grasserbauer dgrasserbauer@ccny.cuny.edu Topics: 1. Logging on to the server space 2. How to create a new folder on the server

More information

To change title of module, click on settings

To change title of module, click on settings 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

More information

Lab 1: Create a Personal Homepage

Lab 1: Create a Personal Homepage Objectives: Lab 1: Create a Personal Homepage Understand the basics of HTML Create a personal website, if you do not have one Learn how to submit your assignments Preparation 1. Create a folder with the

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

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

SOCS Javascript Editor

SOCS Javascript Editor Javascript Editor Tool Bar and Buttons Insert Article Redirect Use the Article Redirect icon when you want a Section to redirect to another website, to a webpage or file within your site. The article containing

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

How to Build a More Effective XSite

How to Build a More Effective XSite How to Build a More Effective XSite presented by a la mode Course Highlights Take advantage of advanced design and content features Enable XSite access and features for your employees and colleagues Introduction

More information

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux

More information

RHYTHMYX USER MANUAL EDITING WEB PAGES

RHYTHMYX USER MANUAL EDITING WEB PAGES RHYTHMYX USER MANUAL EDITING WEB PAGES Rhythmyx Content Management Server... 1 Content Explorer Window... 2 Display Options... 3 Editing an Existing Web Page... 4 Creating a Generic Content Item -- a Web

More information

Intro to Web Development

Intro to Web Development Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing

More information

Microsoft Word 2013 Tutorial

Microsoft Word 2013 Tutorial 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,

More information

CMS Training Manual. A brief overview of your website s content management system (CMS) with screenshots. CMS Manual

CMS Training Manual. A brief overview of your website s content management system (CMS) with screenshots. CMS Manual Training A brief overview of your website s content management system () with screenshots. 1 Contents Logging In:...3 Dashboard:...4 Page List / Search Filter:...5 Common Icons:...6 Adding a New Page:...7

More information

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit

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

Decision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide

Decision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide Decision Support AITS University Administration Web Intelligence Rich Client 4.1 User Guide 2 P age Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence

More information

Google Sites: Site Creation and Home Page Design

Google Sites: Site Creation and Home Page Design Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and

More information

Google Drive Create, Share and Edit Documents Online

Google Drive Create, Share and Edit Documents Online Revision 3 (1-31-2014) Google Drive Create, Share and Edit Documents Online With Google Drive, you can easily create, share, and edit documents online. Here are a few specific things you can do: Convert

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

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

Web Hosting Training Guide. Web Hosting Training Guide. Author: Glow Team Page 1 of 28 Ref: GC278_v1.1

Web Hosting Training Guide. Web Hosting Training Guide. Author: Glow Team Page 1 of 28 Ref: GC278_v1.1 Web Hosting Training Guide Internet Explorer version Doc Ref: GC278_v1.1 Author: Glow Team Page 1 of 28 Ref: GC278_v1.1 Contents Introduction... 3 What is the Glow Web Hosting service?... 3 Why use the

More information

darlingharbour.com Content Management System Tenant User Guide

darlingharbour.com Content Management System Tenant User Guide darlingharbour.com Content Management System Tenant User Guide August 2014 Table of Contents 1 Introduction... 1 2 Getting started... 1 2.1 Requirements...1 2.2 Logging in...1 2.3 Change your Password...2

More information

-SoftChalk LessonBuilder-

-SoftChalk LessonBuilder- -SoftChalk LessonBuilder- SoftChalk is a powerful web lesson editor that lets you easily create engaging, interactive web lessons for your e-learning classroom. It allows you to create and edit content

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

Install FileZilla Client. Connecting to an FTP server

Install FileZilla Client. Connecting to an FTP server Install FileZilla Client Secure FTP is Middle Georgia State College s supported sftp client for accessing your Web folder on Webdav howeve you may use FileZilla or other FTP clients so long as they support

More information

How to use FTP Commander

How to use FTP Commander FTP (File Transfer Protocol) software can be used to upload files and complete folders to your web server. On the web, there are a number of free FTP programs that can be downloaded and installed onto

More information

PE Content and Methods Create a Website Portfolio using MS Word

PE Content and Methods Create a Website Portfolio using MS Word 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

More information

Google Docs A Tutorial

Google Docs A Tutorial Google Docs A Tutorial What is it? Google Docs is a free online program that allows users to create documents, spreadsheets and presentations online and share them with others for collaboration. This allows

More information

Cascade Content Management System Training

Cascade Content Management System Training Cascade Content Management System Training 2 3 HOW TO LOGIN 1. Visit cms.unomaha.edu 2. Using your NetID and password, login in here. THE DASHBOARD Here is an example of the dashboard: CASCADE CONTENT

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

Instructions for Setup and Connecting to Department of Education Secure FTP(SFTP) server January 23, 2013

Instructions for Setup and Connecting to Department of Education Secure FTP(SFTP) server January 23, 2013 Instructions for Setup and Connecting to Department of Education Secure FTP(SFTP) server January 23, 2013 Download the Filezilla program at: http://sourceforge.net/projects/filezilla/files/filezilla_client/3.5.1/filezilla_3.5.1_win32-

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

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

Using the Content Management System 05-02-12

Using the Content Management System 05-02-12 Using the Content Management System 05-02-12 Using the Content Management System Introduction 2 Logging In 3 Using the Editor 4 Basic Text Editing 5 Pasting Text 7 Adding Hyperlinks 8 Adding Images 9 Style

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

Quick Guide to the Cascade Server Content Management System (CMS)

Quick Guide to the Cascade Server Content Management System (CMS) Quick Guide to the Cascade Server Content Management System (CMS) Waubonsee Community College Cascade Server Content Administration January 2011 page 1 of 11 Table of Contents Requirements...3 Logging

More information

Content Management System Help. basic tutorial on Evergreen s CMS

Content Management System Help. basic tutorial on Evergreen s CMS Content Management System Help cms.evergreen.edu Tips, tricks and basic tutorial on Evergreen s CMS Contents Vocabulary Login Opening a page Editing a page Creating a new page Inserting internal and external

More information

Lab: Create Your Own Homepage! This exercise uses MS Expression Web as a Web Page creation tool. If you like you

Lab: Create Your Own Homepage! This exercise uses MS Expression Web as a Web Page creation tool. If you like you Lab: Create Your Own Homepage! This exercise uses MS Expression Web as a Web Page creation tool. If you like you can download a trial version at http://www.microsoft.com/enus/download/details.aspx?id=7764.

More information

WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13

WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...

More information

1.5 MONITOR. Schools Accountancy Team INTRODUCTION

1.5 MONITOR. Schools Accountancy Team INTRODUCTION 1.5 MONITOR Schools Accountancy Team INTRODUCTION The Monitor software allows an extract showing the current financial position taken from FMS at any time that the user requires. This extract can be saved

More information