1. @Ms. Masihi

2.  Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator, Dreamweaver, Acrobat and others.  Dreamweaver is the industry- standard software used to develop web pages and websites. Working in Design Mode and/or Code view, you can add text, images and other elements to web pages and link pages to create a website easily. @Ms. Masihi

3.  Photoshop is best suited to making raster graphics, much of which is destined for printed output. Digital image editing and manipulating are the major features of Photoshop.  Fireworks is used to create, edit, and optimize web graphics in bitmap or vector graphics format. While Fireworks has image editing tools, Photoshop has more options and is better suited for general image editing.  Illustrator creates vector artwork comprised of points and Bezier curves that connect those points - vector paths and shapes. @Ms. Masihi

4.  Adobe Bridge is primarily used for its file organization and browsing capability.  Adobe Acrobat is used to develop platform independent PDF files. @Ms. Masihi

5.  Photoshop Creative Suite consists of a suite of applications to manipulate images, text, sound, and video.  Adobe has bundled different application combinations in several different packages. @Ms. Masihi

7.  Dreamweaver, originally developed by Macromedia and now owned by Adobe, is an application used to develop Web Sites and Web Pages.  Dreamweaver users do not need to know HTML or XHTML to design and develop web pages. @Ms. Masihi

8.  At the heart of each web page, regardless of how it is created, is the foundational code – HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup Language).  HTML and XHTML tells each Web Browser how to display images and text on the screen.  In 2001 HTML was replaced with XHTML. XHTML is more strict in syntax and is more universally supported by web browsers than HTML. @Ms. Masihi

9.  While you do not need to know how to code HTML or XHTML to develop web pages, it is helpful to recognize and understand HTML and XHTML. Dreamweaver accepts both HTML and XHTML.  When you add web page elements, Dreamweaver generates appropriate XHTML Code automatically. @Ms. Masihi

10.  JavaScript is a scripting language developed by Netscape in 1996.  JavaScript interacts with HTML and allows web page interactivity.  JavaScript may be used with web pages created by Dreamweaver. @Ms. Masihi

11.  Dreamweaver automatically generates JavaScript when you add Behaviors, such as opening a New Browser Window or Validating a Form. @Ms. Masihi

12.  CSS stands for Cascading Style Sheets which are statements that control the appearance of web page elements.  CSS allow web developers to separate content from appearance by using CSS to format page elements. @Ms. Masihi

13.  A website is a collection of files and folders.  Files that end with.html (or.htm) are the actual web pages of the site.  HTML is the most basic, foundational language for the Web.  Typing in an address in a Browser will take you to the server that hosts that website. @Ms. Masihi

14.  A Website consists of one or more Web Pages linked together. The collection of all the files comprise the functional website.  Each Web Page is comprised of one or more files.  Each file must be saved with a unique name and an.html extension. @Ms. Masihi

15.  All websites must have a starting page named index.html, also known as the site’s Home Page.  index.html is the default start page for each website. @Ms. Masihi

16.  Each file that compose your web site must have a file name.  For the most part, you can name the files for your web pages almost anything that is descriptive. @Ms. Masihi

17.  A file name must begin with a letter.  File names should only contain letters (and numbers if needed).  If a file name contains multiple words, you may separate each word with an underscore.  Do not use spaces or symbols ( such as * $ > # “ ) in a file name. @Ms. Masihi

18.  Dreamweaver opens and allows you to open a new HTML file, a previously created document, and several other options. @Ms. Masihi

19.  The Document Window is where you will be working to create some of your web pages, adding text, images, and links.  In the Classic Workspace Menu Items appear across the top, Panels to the left, and the large area in the middle is the Document Workspace where you add all web page components.  The Properties Inspector at the bottom of the Workspace gives you different formatting options, depending on what is selected on your workspace. @Ms. Masihi

20.  The Classic workspace layout most closely resembles previous Dreamweaver layouts. These lessons will use the Classic Layout for all examples.  Designer workspace layout puts the Insert Bar with various Tabs on the right side of the workspace and is the default layout when you first open Dreamweaver. @Ms. Masihi

21.  Change the Workspace Layout by clicking the black triangle (“twirlie”) at the top right of the window to see various layout options. @Ms. Masihi o Select the layout best suited to your needs or you may create your own layout design and save it with a name you create.

22.  All websites are collections of files and folders.  It is important to plan your website before beginning the work on any of the individual pages.  First, create the main folder on your hard drive where you will place all files and other folders for this website. This folder is commonly referred to as a Root Folder. @Ms. Masihi

23.  Create other folders within the root folder that may be necessary for the website – such as a folder for images, a folder for CSS.  For our first websites we will not create these folders. We will create these folders for later sites as they increase in size and use more assets to create the pages. @Ms. Masihi

24.  All websites must have a starting page called index.html, also known as the sites Home Page.  index.html is the default start page for each website.  Enter text, images and links in a file and save it. Click File > Save As  Name the file index.html @Ms. Masihi

25.  In the Design View, begin typing text as you want to see it on your web page.  Code View is where you can view and edit HTML code. @Ms. Masihi

26.  CS4 and newer versions Split the Screen Layout positioning – horizontally splitting the screen into HTML code on the left and Design View on the right.  Previously, Dreamweaver has split the screen horizontally to show HTML Code in a top window and Design View in a Bottom window. @Ms. Masihi

27.  Split View allows you to view and edit HTML code and to see the design of your page at the same time.  CS5 rapidly refreshes your page as you make content or layout changes. @Ms. Masihi

28.  Change from Design View to Code View or to Split View by clicking the corresponding Tab above the Document Workspace. @Ms. Masihi

30.  Enter the Page Title carefully- an identifying title that describes the page. Click in the Title Box and type in the Title.  The Page Title appears at the top of the web page window in the Browser.  The Page Title is also used when you bookmark a page.  The Page Title is NOT the name of your file. @Ms. Masihi

31.  Click in the Document Window.  Begin typing to add text.  When you press Return, you create a paragraph. Dreamweaver inserts a blank line after each paragraph.  Hold Shift and Press Enter moves text to next line but does not create a new paragraph with an additional blank line. @Ms. Masihi

32.  Highlight text to be formatted.  Click Format > Font in the Menu Bar then click to select the desired font set.  Highlighted text will now be formatted using the indicated font set. @Ms. Masihi

33.  Bold and /or italic styles can be applied to text. Highlight text to be formatted.  Click to select desired style, such as bold, italic, in the Properties Inspector.  Highlighted text will now be formatted using the selected style. @Ms. Masihi

34.  Dreamweaver is not an image editing program. Use Photoshop to create and edit your web images.  To add an image to your page, in the Common Tool Bar, click the Image icon to open the Select Image source dialogue box. @Ms. Masihi

35.  In the Image Source Dialog Box, navigate to where the file is located and click OK to insert the image into the document.

36.  A Background Image added to your web page will appear on the bottom layer. All text and images will appear above the background.  The default behavior of a background image is to repeat itself until the image fills the entire screen. @Ms. Masihi

37.  In the Properties Inspector, click Page Properties.  This brings up the Page Properties Dialog Box. Which contains several Categories for page formatting. @Ms. Masihi

38.  In the Page Properties Dialog box in the Appearance Category, Click Browse next to Background image.  In the Select Image Source Dialog Box, navigate to the location of the file, highlight the file, and click OK.  This file will be the background for the current web page. @Ms. Masihi

39.  A link is a part of your web page that will take you to another location – another page or another site.  Link is short for “hyperlink”.  Both text and images can serve as a link. @Ms. Masihi

40.  To create a link, select the image or text that will serve as a link in your document. @Ms. Masihi

41.  In the Properties Inspector, click the folder to Browse for the file, or click the Target. You may also type in the filename in the Link Dialog Box. @Ms. Masihi

42.  Click the down arrow to see a listing of previously inserted links, click the Target and point to the file listed in the Files Panel, or click the folder to Browse for the file. @Ms. Masihi

43.  OR, click the File Folder to Browse and select the file in the Select Image Source Dialog Box. @Ms. Masihi

44.  OR, click the Point to File icon and drag it to a file listed in the Files or Asset Panel on the side of the Workspace. @Ms. Masihi

45.  Preview the web page in the Dreamweaver, click the Preview Tab on the Menu Bar.  In the drop down menu, select the Browser to be used to preview the web page. @Ms. Masihi

46.  The current web page will open in the selected Browser. @Ms. Masihi

47.  An easy web host to use is webs.com  Let’s follow a few simple steps to sign up for a free website and upload some documents to publish a website with webs.com.  In the Address Bar type in: webs.com @Ms. Masihi

48.  First, create an account.  Scroll down to Get Started. @Ms. Masihi

49.  Click Get Started.  On the Start Page, enter email address, password, your name, birth date and gender. @Ms. Masihi

50.  Add your site name – use your first name and last name (no spaces). You will get a message about whether or not this site name is available.  Give your side a name.  Click HTML Mode only. DO NOT USE ANY TEMPLATES @Ms. Masihi

51.  Next, enter the security words in the text box.  Click Continue to Next Step. @Ms. Masihi

52.  We want to use the Basic Package which is the default package.  Click No Thanks, continue. @Ms. Masihi

53.  This will take you into the Site Manager where you can create new folders, upload files, view uploaded pages and do all of your site maintenance. @Ms. Masihi

54.  To upload files, click Single File Uploader.  In the Dialog Box that opens, browse to locate the file and click Upload File. @Ms. Masihi

55.  Files uploaded appear in the site manager window in Webs. @Ms. Masihi

56.  To view your uploaded page, click on the filename. @Ms. Masihi

57.  The first page for each website to upload should be your index.html.  Note that many web hosting services include their own index.htm file.  This file normally contains “site under construction” text.  Add your own index.html and then be sure to delete index.htm so there is no confusion about which page to use as the site index. @Ms. Masihi