ITP 101 Project 3 - Dreamweaver
|
|
- Gyles Barker
- 8 years ago
- Views:
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 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 informationPersonal 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 informationJoomla! 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 informationUsing 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 informationCreating 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 informationIntroduction 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 informationSFTP 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 informationCreating 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 informationAdobe 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 informationCreating 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 informationBuilding 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 informationDreamweaver 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 informationADOBE 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 informationMicrosoft 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 informationSite 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 informationUH 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 informationEBOX 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 informationCreating 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 informationAdobe 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 informationCREATING 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 informationHow 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 informationDreamweaver. 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 informationHow To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
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 informationHow To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For
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 informationMicrosoft 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 informationUsing 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 informationHow To Write A Cq5 Authoring Manual On An Ubuntu Cq 5.2.2 (Windows) (Windows 5) (Mac) (Apple) (Amd) (Powerbook) (Html) (Web) (Font
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 informationGetting 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 informationUsing 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 informationLogin: 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 informationChapter 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 informationKOMPOZER 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 informationUSC 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 informationBasic 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 informationUploading 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 informationCreating 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 informationJadu 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 informationAppspace 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 informationCreating 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 informationTransitioning 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 informationHow 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 informationCreating 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 informationWinSCP: 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 informationVirtual 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 informationWeb 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 informationCreate 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 informationChapter 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 informationPassword 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 informationOU 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 informationDreamweaver 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 informationNJCU 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 informationGoogle 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 informationHow 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 informationMiraCosta 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 informationResponsive 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 informationMicrosoft 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 informationPage1. 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 informationMicrosoft 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 informationCMS 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 informationTo 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 informationDreamweaver. 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 informationIngeniux 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 informationGoogle 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 informationBasic 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 informationSoftChalk. 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 informationRHYTHMYX 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 informationLab 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 informationPE 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 informationWeb 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 informationInstructions 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 informationGoogle 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 informationIntro 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 informationDecision 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 informationMicrosoft 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 informationIAS 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 informationInstall 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 informationLab: 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 informationDreamweaver 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 informationUsing 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 informationCollege of Continuing Education Video Production Room
College of Continuing Education Video Production Room To Begin a Session: Step 1: Turn on the Station by pressing the red switch near the desktop monitor. By doing this the following equipment will be
More informationdarlingharbour.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 informationWeb Mail Guide... Error! Bookmark not defined. 1 Introduction to Web Mail... 4. 2 Your Web Mail Home Page... 5. 3 Using the Inbox...
Powered by Table of Contents Web Mail Guide... Error! Bookmark not defined. 1 Introduction to Web Mail... 4 1.1 Requirements... 4 1.2 Recommendations for using Web Mail... 4 1.3 Accessing your Web Mail...
More informationDESIGN 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-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 informationUsing Outlook Web Access
Using Outlook Web Access Log on JTSA Outlook Web Access 1. Enter the following URL into the address bar on your web browser (Internet Explorer recommended) and press enter http://exweb.jtsa.edu 2. The
More informationHow to Setup and Connect to an FTP Server Using FileZilla. Part I: Setting up the server
How to Setup and Connect to an FTP Server Using FileZilla The ability to store data on a server and being able to access the data from anywhere in the world has allowed us to get rid of external flash
More informationGoogle 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 informationBlackboard 9.1 Basic Instructor Manual
Blackboard 9.1 Basic Instructor Manual 1. Introduction to Blackboard 9.1... 2 1.1 Logging in to Blackboard... 3 2. The Edit Mode on... 3 3. Editing the course menu... 4 3.1 The course menu explained...
More informationTitan Apps. Drive (Documents)
Titan Apps Drive (Documents) University of Wisconsin Oshkosh 7/11/2012 0 Contents What is Titan Apps?... 1 Need Help with Titan Apps?... 1 What other resources can I use to help me with Titan Apps?...
More informationQuick 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 informationDreamweaver CS5. Module 1: Website Development
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
More informationContent 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 informationMicrosoft Word 2010 Tutorial
Microsoft Word 2010 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,
More information(These instructions are only meant to get you started. They do not include advanced features.)
FrontPage XP/2003 HOW DO I GET STARTED CREATING A WEB PAGE? Previously, the process of creating a page on the World Wide Web was complicated. Hypertext Markup Language (HTML) is a relatively simple computer
More informationHow 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 informationWEBSITE 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 informationTraining Manual Version 1.0
State of Indiana Content Management System Open Text v.11.2 Training Manual Version 1.0 Developed by Table of Contents 1. Getting Started... 4 1.1 Logging In... 4 1.2 OpenText Menu...5 1.3 Selecting a
More informationMicrosoft PowerPoint 2010
Microsoft PowerPoint 2010 Starting PowerPoint... 2 PowerPoint Window Properties... 2 The Ribbon... 3 Default Tabs... 3 Contextual Tabs... 3 Minimizing and Restoring the Ribbon... 4 The Backstage View...
More informationCascade 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 informationProject 1 - Business Proposal (PowerPoint)
Project 1 - Business Proposal (PowerPoint) extraordinary faculty, inquisitive and talented students, a constant striving to build upon and expand historical strengths, the vision to anticipate the future,
More information