@Ms. Masihi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 Dreamweaver opens and allows you to open a new HTML file, a previously created document, and several other Masihi

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

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

 Change the Workspace Layout by clicking the black triangle (“twirlie”) at the top right of the window to see various layout 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.

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

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

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

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

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

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

 Change from Design View to Code View or to Split View by clicking the corresponding Tab above the Document Masihi

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

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

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

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

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

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

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

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

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

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

 To create a link, select the image or text that will serve as a link in your Masihi

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

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

 OR, click the File Folder to Browse and select the file in the Select Image Source Dialog Masihi

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

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

 The current web page will open in the selected Masihi

 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: Masihi

 First, create an account.  Scroll down to Get Masihi

 Click Get Started.  On the Start Page, enter address, password, your name, birth date and Masihi

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

 Next, enter the security words in the text box.  Click Continue to Next Masihi

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

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

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

 Files uploaded appear in the site manager window in Masihi

 To view your uploaded page, click on the Masihi

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