Adobe Creative SuiteHTML, JavaScript, CSS

Creating Web Pages - Adding Text, Images

Web Page LinksUploading Files – Webs and Zymic

@Ms. Masihi

Adobe Creative Suite 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

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

Adobe Bridge is primarily used for its file organization and browsing capability.

Adobe Acrobat is used to develop platform independent PDF files.

@Ms. 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 packages.

@Ms. Masihi

@Ms. Masihi

Dreamweaver

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

HTML and XHTML Code 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

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

JavaScript

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

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

@Ms. Masihi

CSS

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

What is a Website ?

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

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

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

File Names for Web Pages

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

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

Opening Dreamweaver Dreamweaver

opens and allows you to open a new HTML file, a previously created document, and several other options.

@Ms. Masihi

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

Workspace Layout

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

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.

Planning a Website

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

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

Creating Home Page

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

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

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

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

Change from Design View to Code View or to Split View by clicking the corresponding Tab above the Document Workspace.

@Ms. Masihi

@Ms. Masihi

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

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

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

Change Text Style

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

Adding Images

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

@Ms. Masihi

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

Backgrounds

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

In the Properties Inspector, click Page Properties.

This brings up the Page Properties Dialog Box. Which contains several Categories for page formatting.

@Ms. 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 page.

@Ms. Masihi

Creating Links

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

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

@Ms. 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 Box.

@Ms. 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 file.

@Ms. Masihi

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

@Ms. 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 Workspace.

@Ms. Masihi

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

The current web page will open in the selected Browser.

@Ms. Masihi

Webs.com (optional read - an example of what is out out there)

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

First, create an account.

Scroll down to Get Started.

@Ms. Masihi

Step One – Create your Account

Click Get Started.

On the Start Page, enter email address, password, your name, birth date and gender.

@Ms. Masihi

Step Two – Set Up Site 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

Step Three – Enter Security Code

Next, enter the security words in the text box.

Click Continue to Next Step.

@Ms. Masihi

Step Four – Select User Package

We want to use the Basic Package which is the default package.

Click No Thanks, continue.

@Ms. Masihi

Upload Files – Site Manager

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

To upload files, click Single File Uploader.

In the Dialog Box that opens, browse to locate the file and click Upload File.

@Ms. Masihi

Files uploaded appear in the site manager window in Webs.

@Ms. Masihi

To view your uploaded page, click on the filename.

@Ms. 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 index.

@Ms. Masihi