Dreamweaver Tutorial #1

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Dreamweaver Tutorial #1"

Transcription

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 and the Web are how does the Web work Note: The red boxes with To Do are small activities for you to complete before continuing with the tutorial. Part I: Creating your first page in Dreamweaver Open Dreamweaver Select HTML ; under Create New (See Figure 1). Figure 1. Creating a new Blank Web Page in Dreamweaver When the page opens, first check that icon is selected (this will ensure that you are in the design view edit mode). We will be working in this mode for most of the tutorials. There will be different regions on the page (see Figure 2): o top menu bar o a design view area (where you will create and view your web page) o a property menu at the bottom of the page (it displays the properties of any html feature on your page) o and a side bar menu an Insert Web Elements area that contains all the HTML tags Dreamweaver - Tutorial 1 1

2 CSS Style area that allows you to create and manipulate CSS style sheets for your web site File area that allows you to select where to save your web pages. Menu Insert Web Elements Area Design Area CSS Area Properties Menu File Area Figure 2. Dreamweaver Window 1. Add a title to your web page (see Figure 3). This title will not be visible on the page when viewed in the browser but will be used by search engine crawlers to identify and classify your web page. It will also be displayed as the title of the tab in your browser. Dreamweaver - Tutorial 1 2

3 Figure 3. Name your Web Page 2. Save the web page Before saving your web page, you should set up a web site. First set up a folder in your documents called firstwebpage. You can either select from the Menu Site / New or press the icon on the Menu bar (Figure 4a) Figure 4a. Step One to set up a New Site A dialog window will then pop-up (Figure 4b). Select the Advanced tab. Dreamweaver - Tutorial 1 3

4 Figure 4b. Select the Advanced Tab In the dialog box, make sure that you highlight Local Info under Category and enter the information in (Figure 4c): Site name firstwebpage Select the folder beside Local root folder and create a new folder in My Documents called firstwebpage (Figure 4d) and select the folder beside Default images folder and create a new folder in firstwebpage called images (Figure 4d) Enter in the HTTP address Disable the Cache and press OK Dreamweaver - Tutorial 1 4

5 Figure 4c. Step Three to set up a new Site. Create a New Folder firstwebpage Create a New Folder image Figure 4d. Create a new Folder in My Documents and an image folder in firstwebpage Dreamweaver - Tutorial 1 5

6 Now save your web page in the folder firstwebpage. Select File / Save as on the Menu (Figure 4e) and call your page homepage_1.html Figure 4e. Save your Web Page 3. Add content to the body of the page Type in your name in the Design Area To make your name stand out, you can format it as a Heading that will make it larger. Highlight your name and use any of these methods: i. Using the Menu Bar Select Format / Paragraph Format / Heading 1 (see Figure 5) Dreamweaver - Tutorial 1 6

7 Figure 5. Format Heading 1 using the Menu ii. Using the Context Menu (right-click menu) Right click the mouse on the highlighted text and select Paragraph / Format / Heading 1 (see Figure 6) Figure 6. Format Heading 1 using the Context Menu Dreamweaver - Tutorial 1 7

8 iii. Using the Properties Area In the Properties Area at the bottom of the window, select Format and from the drop-down list select Heading 1 (see Figure 7) Figure 7. Format Heading 1 using the Properties Area iv. Control Keys Dreamweaver also recognizes control key combinations. In the menu view (see Figure 5) beside the Format element it gives the Control-key combinations. To make a Heading 1 using the Control keys, highlight the text and then press Control+1. Which ever method you use (you can try all of them) you will end up with the same result (see Figure 8). Dreamweaver - Tutorial 1 8

9 Suzi-Q as Heading 1 Figure 8. You can see that the initial name Suzi-Q is highlighted in the first window and after applying the Heading 1 format, it is much larger in the second window. Type in some text in the Design Area. For example (see Figure 9): I am a [first] year student at Dalhousie University. I am currently enrolled in the Faculty of Computer Science. Figure 9. Type text in the Design Area. Dreamweaver - Tutorial 1 9

10 4. Format your name and the text i) Format the text Again, you can use a variety of methods to change the format of the text, for this example we will use the Menu Bar Highlight all the text (name and text) and on the Menu select Format / Align / Center (see Figure 10) Figure 10. Align your name and text on the page ii) Change the background colour and font colour On the Properties Area at the bottom of the window, press the Page Properties button A dialog box will open (see Figure 11) and select the Appearance HTML tag Dreamweaver - Tutorial 1 10

11 Figure 11. Select the Appearance (HTML) category On the Background box select the small arrow. A dialog box will open with a number of colours. Select a colour (try a darker shade, for example purple or blue) for your web page (see Figure 12). Figure 12. Select a Background Colour for your Web Page If you chose a darker colour, like the purple in Figure 12 you should also change your font colour to a lighter colour for better contrast. On the Text box select the small arrow. Another dialog box will appear where you can Dreamweaver - Tutorial 1 11

12 Figure 13. Select a Font Colour Press Apply on the Page Properties dialog box and close the box Your page will now look similar to the Figure 14 Figure 14. The Web Page after the Background and Font Colour have Changed Dreamweaver - Tutorial 1 12

13 You can also at anytime preview your web page in a browser. Select the small globe beside the title of your web page. Select a browser from the drop-down list (see Figure 15) and the page will open in that browser. Notice that the name of the web page is the Title that you entered earlier. If you have multiple tabs open, this name will also appear in the tab. Figure 15. Preview your Web Page in a Browser 5. Add URLs (links) in the text Often on a web page, if the content mentions an institution or organization, a link is usually available. In this web page, we reference both Dalhousie University and the Faculty of Computer Science. You can add a link for both of these sites. We ll use two different ways to add links in your page. Highlight Dalhousie University in your Design Area In the Properties Area in Link type and press the little button beside the link address (see Figure 16) Figure 16. Enter a URL address in Link in the Properties Area Dreamweaver - Tutorial 1 13

14 The text will change in the Design Area to reflect there is a link to Dalhousie University Highlight Faculty of Computer Science in your Design Area On the Menu select Insert / Hyperlink (see Figure 17) Figure 17. Enter a URL address in using the Menu In the dialog box, enter the address of the Computer Science in Link and hit OK. (see Figure 18) Preview your web page again and try the links Figure 18. Enter the URL of Computer Science in the Dialog Box Dreamweaver - Tutorial 1 14

15 To make hyperlinks you can also use the Insert Web Elements on the side menu. After highlighting the text, if you select Hyperlink (the top element) the same dialog box will appear as in Figure 18. To help explain URLs and links on the Web, below is a brief introduction to the Internet and the Web and how the Web Works: The Internet What is the Internet? The Internet is a huge collection of computers and other devices (e.g., printers) that are connected by a communication network. It is actually a network of networks; rather than connect every computer to each other, individual computers in a given organization are connected together in a local network and one node connects physically to the Internet (see Figure A). Local Networks: Group of Computers connected together Connectors linking Local Networks Figure A. The Internet a network of networks Brief History of the Internet In 1960 s Department of Defense (DoD) wanted to create a large scale computer network to communicate, and share programs and computer access anywhere for defense researchers. DoD s Advanced Research Projects Agency (ARPA) funded a network between a dozen ARPA funded laboratories and universities In 1969 the first network node was established at UCLA (University of California, Los Angeles) In the 1970 s other networks were starting up (e.g., BITNET (Because it s Time NETwork) at the City University of NY) but for different reasons, these other networks never became a dominate network In 1982 TCP/IP become the standard communication protocol on the Internet In 1986 the National Network NSFnet (funded by the National Science Fund in US) connected 5 universities and became available for other universities In the 1990 s - NSFnet replaced ARPAnet for non-military uses and US Vice President Al Gore popularized the term information superhighway that referred to the now Internet By 1992 over a million computers were connected to the network around the world In 1995 NSFnet returned to be a research network, and the rest became as what we know as the Internet Dreamweaver - Tutorial 1 15

16 The World Wide Web What is the Web? The Web is a collection of electronic documents that are linked together similar to a spider web, known as hypertext (Figure B). The links that connect the documents are bi-directional. The Web is a protocol that that uses the Internet as a communication structure. The main authority on the Web is W3 Consortium ( Web Pages (the nodes) Figure B. A representation of the Web as a set of nodes (web pages) and bi-directional links Source: At minimum, the Web consists of computers, web browsers, and a connection to the Internet using an Internet Service Provider (ISP), such as Aliant or Eastlink (see Figure C). Figure C. How the Web Works (Source: Dreamweaver - Tutorial 1 16

17 History of the Web Tim Berners-Lee considered the inventor of the Web In the 1980 s Tim Berners-Lee while consulting for CERN (Conseil Européen pour la Recherche Nucléair) writes a notebook program that allows links to be made between arbitrary nodes (hypertext) with the aim to share information between researchers. Each node had a title, a type, and list of bi-directional typed links 1980 s collection of different protocols that run on top of TCP/IP developed (e.g., Telnet, FTP) 1990 s hypertext GUI (Graphical User Interface) browser and editor and makes up the World Wide Web (first web page as we know it) 1992 Mosiac Browser from University of Illinois is the first browser with graphical user interface (see Figure D) This is significant because previous browsers were text based used mainly by researchers but now anyone can easily access the Web Browser tools today have not changed much either from this first browser (see Figure E) Figure D. Mosiac Browser and its Tools List of Browser Tools -History list -Hotlist -Hotlist manager -Home page -Forward/back buttons -Find/search on page -Save page -Print page -Tool tips -Copy and paste -Annotations Dreamweaver - Tutorial 1 17

18 Figure E. Other Common Browsers with similar tools as Mosiac Conclusions The Internet and Web are not the same! Internet: collections of computers and other devices connected by equipment that allows them to communicate with each other Web: collection of software and protocols that have been installed on computers that are connected to the Internet A vast collection of documents often connected by links 6. Add a list of courses 1. You can add other structures to your page as well. For example, you could add a list of the current courses that you are enrolled in. You can create an unordered list that will display your text in a bulleted form or you can create an ordered list that will number your items. In your Design Area, enter your [five] courses that you are registered in for the fall term (e.g., CS1100, CS1106, etc) Highlight all the courses In the Properties Area select the unordered list button (see Figure 19) (note that if you want your list numbered, it is the button beside the bullet button). Dreamweaver - Tutorial 1 18

19 Unordered Bulleted List Ordered Numbered List Figure 19. Select the Unordered List button in the Properties Area Your courses will now be in a list format (see Figure 20) Right or Left Indent your list or text on the page Figure 20. Bulleted List You can move your list over using the indent buttons in the Properties Area as well (see Figure 20) You can also make a list using the Menu (see Figure 21) Dreamweaver - Tutorial 1 19

20 Figure 21. Create a List using the Menu Add a title for your list List of Current Courses above the list (e.g., Using the Menu, select Format / Paragraph Format / Heading 2). (see Figure 22) Figure 22. List of Current Courses indented and with a Title (Heading 2) 7. Change the list of courses to a table of courses Change the title List of Current Courses to Current Courses Delete the list off the page To insert a table there are two ways: On the Menu select Insert / Table On the Insert Web Element on the side of the Window select Table In both cases, a dialog box will appear (see Figure 23) that will allow you to build your table Dreamweaver - Tutorial 1 20

21 Figure 23. Build a Table Dialog Box For the courses, you will need a table with one column and 5 rows. You can also change the cell padding to make the cells larger; try 2, for example (see Figure 24) Figure 24. Change the default values of the Table Press OK and the table will appear on your page You can edit your table in the Properties Area at the bottom of the window (Figure 25) Align your table so that it is centered on the page Change the width of the table to 75 pixels Change the Cell Pad (which increases the size of the cell) and the Cell Space which changes the space between the cells Dreamweaver - Tutorial 1 21

22 Inserted Table Change the Properties of the Table Figure 25. Edit the Table using the Properties Area After you edit your table, enter your courses in the table To see the result of your table, click anywhere on the page off the table (see Figure 26) To edit the table further, click on the table and the table properties will be displayed in the Properties Area again Figure 26. Results of the Added Table To Do: Change the table of courses to a timetable that displays all your courses by day and time Change the colour of the background to a light colour and all the text on the page to a dark colour (your choice) Add links to any courses with a course web site Preview your changes in the browser Dreamweaver - Tutorial 1 22

23 Resources/Tutorials on Dreamweaver da3a.html f21-7ceda.html Dreamweaver - Tutorial 1 23

24 Part II: Saving your Web Page to a Remote Server While you have been working on your web page you have been saving it to your computer (local). In order to view your page online, you need to save your page to a server. In Computer Science, all students have accounts with space on the bluenose server. As well, your files that are stored under the directory public_html are assessable online. To save your web page to the server (bluenose), you need to set up the ftp (file transfer protocol) client in Dreamweaver. You can manage the current local site (firstwebpage) to also use a remote server. There are three ways to start the set up for the remote server for the site: In the File area in the Side Menu, select the link Manage Sites, or the icon on the Menu bar or using the Menu Site / Manage Sites (Figure 27) Figure 27. Access Manage Sites on the File Section Highlight (Figure 28) firstwebpage and select Edit (see Figure 28) Figure 28. Edit the current Local Site to include a Remote Site Dreamweaver - Tutorial 1 24

25 Ensure that you select Remote Info in Category. Then in the dialog box, enter in the following information (see Figure 29): Access: FTP FTP Host: bluenose.cs.dal.ca Host directory: public_html/ Login: your username Password: your password Check the box beside Use Secure FTP (SFTP) and Maintain synchronization information Before pressing OK test your connection. If Dreamweaver successfully connects to the server you will get a success message. If it doesn t connect, check your inputted data, especially your username and password. Figure 29. Set up the Server for the remote Site Before you can save your work to the server you need to create a folder with the name firstwebpage on bluenose. Go to the File Area on the side Menu and select firstwebpage, Remote in the drop down boxes (Figure 30). Dreamweaver - Tutorial 1 25

26 Figure 30. Select firstwebpage in Remote View Follow the directions given in the Remote Site view and click on the icon in the toolbar of the File Area. This will bring up all your files stored on your public_html folder (Figure 31). Figure 31. Files on public_html To create a new folder (firstwebpage like on your computer), first click on the icon (to expand local and remote sites) on the toolbar. This will bring up a directory (Figure 32) which will show all the folders and files in your public_html folder. Select on the menu File / New Folder and call the new folder firstwebpage. Close this window (the small x in the upper left hand corner). Dreamweaver - Tutorial 1 26

27 Figure 32. Expanded Remote view of public_html folder To create a new folder (firstwebpage like on your computer), first click on the icon (to expand local and remote sites) on the toolbar. This will bring up a directory (Figure 32) which will show all the folders and files on your public_html folder. Select on the menu File / New Folder and call the new folder firstwebpage. Close this window (the small x in the upper left hand corner). Now that you have created a folder for you web page, you need to update your site using the site manager: go to the File area in the Side Menu, select the link Manage Sites or the icon on the Menu bar or using the Menu Site / Manage Sites (see Figure 27). In the Manage Site dialog (see Figure 28), select firstwebpage and press Edit. This will bring up the Site Definition for firstwebpage dialog. Ensure that you select Remote Info in Category and in the dialog box, update in the following information (Figure 33): Host Directory: public_html/firstwebpage/ Test your connection. Dreamweaver - Tutorial 1 27

28 Figure 33. Update the Host directory to include the new Folder firstwebpage Now that you have set up the connection to the server, you can save your work to the server. Go to the main menu and select File / Save to Remote Server (Figure 34). Dreamweaver - Tutorial 1 28

29 Figure 34. Save Web Sites to the Remote Server (bluenose) A dialog box will open with all the folders on bluenose s directory public_html (Figure 35). Select the folder firstwebpage. Press Save and your web page homepage_1.html will be saved to the folder on the server. Figure 35. Save the file to the server Dreamweaver - Tutorial 1 29

30 When you save your file, it may ask you if you want to save the dependent files as well, select Yes (when you get this message). This will also save any other information in your local folder to the remote one. (Figure 36). Figure 36. Select Yes. In your File area on the side menu, you can view your files on the server (or local if you wish) (Figure 37). Figure 37. The remote site and files are now available in your File Area To view your web page online go to the following address: You need to use enter your own Compute Science Username (don t forget the ~ sign before). You will need use exact spelling and case for the file folder and page name or else you would get an error (Figure 38). Dreamweaver - Tutorial 1 30

31 Figure 38. The Web Page viewed online The Client-Server Model The client-server model helps explain how information is transferred over the Internet, in particular using the Web (see Figure A). The Client: has software that allows users to make requests for information. The software sends the request over the Internet to get the appropriate information. The Server: has software that listens for client requests for information. The server software then finds the appropriate information resource from its stored files and returns it back to the asking client. There are different kinds of servers, such as web servers and mail servers. Dreamweaver - Tutorial 1 31

32 Files Client a Internet Server x Files Client b Figure A. Client-Server Model Server y For example, a browser is a software program on the client side. When a user makes a request in the browser (e.g., follow a link to a new web page or download a music file), the browser makes the request for the document (e.g., web page or music file) over the Internet. The server has software to listen for client requests. Once a request is made, the server retrieves the appropriate document from its file storage (usually a database) and returns the requested information to the client. The browser on the client side then displays the information to the user. Recommended Videos to Demonstrate the Internet and the Web References Deitel, H.M., Deitel, P.J., Neito, T.R. (2001). Internet and the World Wide Web: How to program, 2 nd Edition: Prentice-Hall Canada, Toronto. Dreamweaver - Tutorial 1 32

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

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

HTML CREATOR. HTML Creator

HTML CREATOR. HTML Creator HTML CREATOR The HTML Creator is an HTML editing tool that allows you to create content in HTML without having to enter HTML tags. Similar to a word processor, you can easily create and maintain content

More information

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

Terminal Four. Content Management System. Moderator Access

Terminal Four. Content Management System. Moderator Access Terminal Four Content Management System Moderator Access Terminal Four is a content management system that will easily allow users to manage their college web pages at anytime, anywhere. The system is

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

Your Personal Homepage

Your Personal Homepage Your Personal Homepage You can use your Personal Homepage to share information about yourself, something that interests you, or a course topic. Your classmates can view your home page from the Classlist

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

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

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

Site Maintenance Using Dreamweaver

Site Maintenance Using Dreamweaver Site Maintenance Using Dreamweaver As you know, it is possible to transfer the files that make up your web site from your local computer to the remote server using FTP (file transfer protocol) or some

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

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

ITP 101 Project 3 - Dreamweaver

ITP 101 Project 3 - Dreamweaver ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with

More information

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

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

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA

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

More information

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

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

Micro soft Expression Web 4

Micro soft Expression Web 4 University of Texas at Arlington Micro soft Expression Web 4 Beginner s Guide 2011 1 2 Table of Contents UTA Web Pages... 5 Connecting to your Website... 5 Copying files from your Website... 8 To open

More information

Web Design. Links and Navigation

Web Design. Links and Navigation Web Design Links and Navigation Web Design Link Terms HTTP, FTP, Hyperlink, Email Links, Anchor HTTP (HyperText Transfer Protocol) - The most common link type and allows the user to connect to any page

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

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

MAPPING THE WEBDRIVE REFERENCE GUIDE

MAPPING THE WEBDRIVE REFERENCE GUIDE MAPPING THE WEBDRIVE REFERENCE GUIDE INTRODUCTION The university WebDrive is a dedicated drive to host all university web content. For help with mapping the WebDrive, please read the instructions below

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

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

Creating Webpages in Dreamweaver MX for PC

Creating Webpages in Dreamweaver MX for PC Creating Webpages in Dreamweaver MX for PC Getting Started Before you can create a webpage you need to think about where the page will be stored both locally (i.e., hard drive, CD, disk) and remotely (i.e.,

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

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit DREAMWEAVER BASICS A guide to updating Faculty websites Created by the Advancement & Marketing Unit Table of content Tip: Click on the links below to go straight to the desired section The W (Web Services)

More information

CMS Training. Prepared for the Nature Conservancy. March 2012

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

More information

Using SSH Secure FTP Client INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Fall 2008.

Using SSH Secure FTP Client INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Fall 2008. Using SSH Secure FTP Client INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Fall 2008 Contents Starting SSH Secure FTP Client... 2 Exploring SSH Secure FTP Client...

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

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

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

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

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

Module One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface...

Module One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface... 2 CONTENTS Module One: Getting Started... 6 Opening Outlook... 6 Setting Up Outlook for the First Time... 7 Understanding the Interface...12 Using Backstage View...14 Viewing Your Inbox...15 Closing Outlook...17

More information

Setting Up a Dreamweaver Site Definition for OIT s Web Hosting Server

Setting Up a Dreamweaver Site Definition for OIT s Web Hosting Server page of 4 oit UMass Office of Information Technologies Setting Up a Dreamweaver Site Definition for OIT s Web Hosting Server This includes Web sites on: https://webadmin.oit.umass.edu/~user http://people.umass.edu/

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

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move WORD PROCESSING In this session, we will explain some of the basics of word processing. The following are the outlines: 1. Start Microsoft Word 11. Edit the Document cut & move 2. Describe the Word Screen

More information

Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP

Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP Introduction This document describes how to create a basic web page with Netscape/Mozilla Composer and how to publish

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

Terminal Four (T4) Site Manager

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

More information

ECDL / ICDL Web Editing Syllabus Version 2.0

ECDL / ICDL Web Editing Syllabus Version 2.0 ECDL / ICDL Web Editing Syllabus Version 2.0 Purpose This document details the syllabus for ECDL / ICDL Web Editing. The syllabus describes, through learning outcomes, the knowledge and skills that a candidate

More information

Setting Up Dreamweaver for FTP and Site Management

Setting Up Dreamweaver for FTP and Site Management 518 442-3608 Setting Up Dreamweaver for FTP and Site Management This document explains how to set up Dreamweaver CS5.5 so that you can transfer your files to a hosting server. The information is applicable

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

WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA

WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://easywpguide.com/wordpress-manual/ to assist you with your website 1 WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA

More information

Item Editor Reference Guide

Item Editor Reference Guide Item Editor Reference Guide This reference guide is intended for all iwebfolio users. The item editor is the editing tool that appears when a user is editing an item within a portfolio or template. This

More information

Web Portal User Guide. Version 6.0

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

More information

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

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

Microsoft Outlook 2010 Part 1: Introduction to Outlook

Microsoft Outlook 2010 Part 1: Introduction to Outlook CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Microsoft Outlook 2010 Part 1: Introduction to Outlook Spring 2015, Version 1.4 Table of Contents Introduction...3 Starting Outlook...3

More information

Using econtentmanager s ewebeditpro Editor

Using econtentmanager s ewebeditpro Editor Using econtentmanager s ewebeditpro Editor econtentmanager comes with its own content editor, called ewebeditpro. With ewebeditpro, you can add and modify your page content with WYSIWYG ease-of-use. The

More information

Introduction to Drupal

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

More information

Dreamweaver 8 Basics

Dreamweaver 8 Basics Dreamweaver 8 Basics Software: Dreamweaver 8 Platform: Mac/PC Overview Dreamweaver is a great tool for producing Web sites. It provides an array of options and functions that speed up the development process

More information

Microsoft Outlook 2010 Part 1: Introduction to Outlook

Microsoft Outlook 2010 Part 1: Introduction to Outlook CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Microsoft Outlook 2010 Part 1: Introduction to Outlook Spring 2012, Version 1.0 Table of Contents Introduction...3 Starting the

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

Using Microsoft Excel as a Database

Using Microsoft Excel as a Database Using Microsoft Excel as a Database Whether it is a personal list of phone numbers, a contact list for members of an organization or team, or a collection of tourist sites, hotels, or travel agencies,

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

Mastering the JangoMail EditLive HTML Editor

Mastering the JangoMail EditLive HTML Editor JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop

More information

Below is the toolbar for the Rich Text Editor on the SharePoint Portal.

Below is the toolbar for the Rich Text Editor on the SharePoint Portal. Rich Text Editor Below is the toolbar for the Rich Text Editor on the SharePoint Portal. You will find instructions for using each of these functions on the following pages. 1. Cut 2. Copy 3. Paste 4.

More information

Operating Computer Using GUI Based Operating System

Operating Computer Using GUI Based Operating System Operating Computer Using GUI Based Operating System 2.0 Introduction An operating system (OS) is an interface between hardware and user. It is responsible for the management and coordination of activities

More information

Wellesley College Alumnae Association. Volunteer Instructions for Email Template

Wellesley College Alumnae Association. Volunteer Instructions for Email Template Volunteer Instructions for Email Template Instructions: Sending an Email in Harris 1. Log into Harris, using your username and password If you do not remember your username/password, please call 781.283.2331

More information

CREATE A WEB PAGE WITH LINKS TO DOCUMENTS USING MICROSOFT WORD 2007

CREATE A WEB PAGE WITH LINKS TO DOCUMENTS USING MICROSOFT WORD 2007 CREATE A WEB PAGE WITH LINKS TO DOCUMENTS USING MICROSOFT WORD 2007 For Denise Harrison s College Writing Course students Table of Contents Before you Start: Create documents, Create a Folder, Save documents

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

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

Introduction. Steps in Creating Web Pages

Introduction. Steps in Creating Web Pages 1 of 7 Introduction A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser. To see the HTML codes of any

More information

UPDATING HTML CONTENT

UPDATING HTML CONTENT LEARNING BLACKBOARD VISTA 4.0 1 UPDATING HTML CONTENT Hypertext Markup Language (HTML) is the code used to structure and format a web page. It is the most common delivery format for online content because

More information

The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013

The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013 INFORMZ USER GUIDE: The HTML Editor Version 1.0 January 13, 2013 ABOUT THIS GUIDE This guide provides an overview of the HTML editor used by Informz. This guide does not cover all aspects of the editor,

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

A Microsoft Expression Tutorial

A Microsoft Expression Tutorial A Microsoft Expression Tutorial Contents Page (click page numbers to move to the page) Page 1-2..Things to do and know before we start Page 3 How to save your web pages Page 4 Opening an existing web page

More information

Creating a Web Presentation

Creating a Web Presentation 9.1 LESSON 9 Creating a Web Presentation After completing this lesson, you will be able to: Create an agenda slide or home page. Create a hyperlink to a slide. Create a Web presentation with the AutoContent

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

OpenOffice Impress (Presentation Software) Tutorial

OpenOffice Impress (Presentation Software) Tutorial OpenOffice Impress (Presentation Software) Tutorial Table of Contents Introduction...3 Starting OpenOffice Impress...3 Looking at the Screen...4 Creating an Empty (Blank) Presentation...5 Adding Information

More information

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0 University of Sheffield PART 1 1.1 Getting Started 1. Log on to the computer with your usual username

More information

Previewing & Publishing

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

More information

How to Use the Text Editor in Blackboard

How to Use the Text Editor in Blackboard How to Use the Text Editor in Blackboard The image below is the text editor in Blackboard. No matter you add an item or discussion forum for your course as an instructor, post threads and replies on a

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

Schools Remote Access Server

Schools Remote Access Server Schools Remote Access Server This system is for school use only. Not for personal or private file use. Please observe all of the school district IT rules. 6076 State Farm Rd., Guilderland, NY 12084 Phone:

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

Information Technology

Information Technology Information Technology Drupal Manual Revised: August 2013 Training and Empowerment Table of Contents Drupal Manual 1 Important notes... 1 2 How to login... 1 3 How to create a Bookmark to your Business

More information

Joomla Article Advanced Topics: Table Layouts

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

More information

Remote Viewer Recording Backup

Remote Viewer Recording Backup Remote Viewer Recording Backup Introduction: In this tutorial we will explain how to retrieve your recordings using the Web Service online. Using this method you can backup videos onto your computer using

More information

Index. Page 1. Index 1 2 2 3 4-5 6 6 7 7-8 8-9 9 10 10 11 12 12 13 14 14 15 16 16 16 17-18 18 19 20 20 21 21 21 21

Index. Page 1. Index 1 2 2 3 4-5 6 6 7 7-8 8-9 9 10 10 11 12 12 13 14 14 15 16 16 16 17-18 18 19 20 20 21 21 21 21 Index Index School Jotter Manual Logging in Getting the site looking how you want Managing your site, the menu and its pages Editing a page Managing Drafts Managing Media and Files User Accounts and Setting

More information

SITE MANAGEMENT INTRODUCTION DEFINING A SITE

SITE MANAGEMENT INTRODUCTION DEFINING A SITE SITE MANAGEMENT INTRODUCTION Those of you who have already built Web pages will likely agree that file management is one of the biggest challenges of this medium. By file management, I mean the organization,

More information

TYPO3 6.2 Editor s Guide SeeThrough Web. Editor's Guide to TYPO3 Content Management System

TYPO3 6.2 Editor s Guide SeeThrough Web. Editor's Guide to TYPO3 Content Management System Editor's Guide to TYPO3 Content Management System 1 Table of Contents Editor's Guide to TYPO3 Content Management System... 1 Table of Contents... 2 Website Overview... 3 Front and Back End Management...

More information

Working with the new enudge responsive email styles

Working with the new enudge responsive email styles Working with the new enudge responsive email styles This tutorial assumes that you have added one of the mobile responsive colour styles to your email campaign contents. To add an enudge email style to

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

Content Management System

Content Management System OIT Training and Documentation Services Content Management System End User Training Guide OIT TRAINING AND DOCUMENTATION oittraining@uta.edu http://www.uta.edu/oit/cs/training/index.php 2009 CONTENTS 1.

More information

Blackboard 9.1 SP 11 The Content Editor

Blackboard 9.1 SP 11 The Content Editor Blackboard 9.1 SP 11 The Content Editor Introduction Blackboard has introduced a new content editor. The content editor is available to instructors, teaching assistants and students throughout Blackboard.

More information

7 th Annual LiveText Collaboration Conference. Advanced Document Authoring

7 th Annual LiveText Collaboration Conference. Advanced Document Authoring 7 th Annual LiveText Collaboration Conference Advanced Document Authoring Page of S. La Grange Road, nd Floor, La Grange, IL 6055-455 -866-LiveText (-866-548-3839) edu-solutions@livetext.com Page 3 of

More information

... Asbru Web Content Management System. Getting Started. Easily & Inexpensively Create, Publish & Manage Your Websites

... Asbru Web Content Management System. Getting Started. Easily & Inexpensively Create, Publish & Manage Your Websites Asbru Ltd Asbru Ltd wwwasbrusoftcom info@asbrusoftcom Asbru Web Content Easily & Inexpensively Create, Publish & Manage Your Websites 31 March 2015 Copyright 2015 Asbru Ltd Version 92 1 Table of Contents

More information

Umbraco Content Management System (CMS) User Guide

Umbraco Content Management System (CMS) User Guide Umbraco Content Management System (CMS) User Guide Content & media At the bottom-left of the screen you ll see 2 main sections of the CMS Content and Media. Content is the section that displays by default

More information

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)

More information

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

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

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