Computer Skills

0761111

Adobe Dreamweaver CC Tutorial

Prepared by: EmanAlnaji

Introduction: Internet and Web design Concepts

Internet: A system of connected computers that allows your computer to exchange data and files with other connected computers around the world.

World Wide Web (WWW): A collection of Web pages that are linked together within the Internet system.

Hyperlink: A piece of text that can perform an action when the user clicks on it.

Web Browsers: Are programs that allow people to view the web pages on the World Wide Web. (Such as: Internet Explorer, Google Chrome, Firefox, Netscape, Opera, …etc)

Web Site: A computer storage area that contains one or more Web pages.

Home Page: The first web page you see when you launch a web browser. Or, it is the first web page that appears when you visit a web site.

Uniform Resource Location (URL): A unique address given to each web page on the World Wide Web (WWW).

Hyper Text Markup Language (HTML): A set of commands (programming language) that is used to format text, pictures, etc. that are displayed on your web page.

Part One: Getting Started with Adobe Dreamweaver CC

Dreamweaver CC, is a computer program that is used to design a web site, and generates an HTML code automatically.

  1. Launching Dreamweaver

To open Dreamweaver CC tool, go to Start menu in your computer, and from "All programs" select "Adobe Dreamweaver CC"

  1. The Starting Page

From this page, you can open a file that is already exist on your PC (1), or you can create a new file from the ones in "Create New" list (2).

  1. Setting Up a Site

This is the most important first step when you start using Dreamweaver. Defining a site lets Dreamweaver know where you store your web pages on your computer. It also helps Dreamweaver correctly insert images and add links from one page to another.

Steps of setting up a site:

  1. From the menu bar, choose "Site"  New Site

This will open the Site Setup window

  1. In the "Site Name" box, name your site.

  1. Click (the browse-for-file button), next to the "Local Site Folder" box.

This will open "Choose Root Folder" screen that will help you specify the place where you want to reside your site Root folder (the folder that contains all your web pages, images, videos, etc.). When finish, press "Select Folder" button.

  1. For additional options, select "Advanced Settings" from the left-hand list.

From "Default Images Folder", select a folder where you prefer to reside all images used in your website.

Then keep all settings as displayed in the latest image, and press "Save".

Now, you will find the Root folder "MyFirstSite" and the Images folder "Images"

  1. Creating a Web Page

After you define a site, you will want to start building pages. Just choose "File"  "New", to open Dreamweaver's New Document window.

To create a basic HTML file for a web page:

  1. From the left-hand list of document categories, choose Blank Page.
  1. From the "Page Type" list, choose HTML.

You can choose other types of pages as well, but for web design, HTML will be good enough.

  1. From the Layout List, choose <none>
  1. Select a Document Type from the DocType menu.

Here you choose the type of language the code generated is written. Always choose HTML5, the latest version.

  1. Click Create.

Now, a blank HTML page is created.

  1. From the menu bar, choose "Modify"  "Page Properties"

A "Page Properties" window is opened.

Select "Title/Encoding" from the left-side panel (Category). Then change the Title of your web page.

This Title will be displayed at the Title bar of your page when it is displayed on the Web Browser. If you left it black, "Untitled Document" will be displayed instead.

The look of your web page will be as displayed below.

The tab "Untitled-1*", shows that your page is not saved as a file yet. The * will be displayed each time you update your page, to remind you that it needs to be saved.

  1. Choose "File"  "Save"

A "Save as" window will be displayed, to enable you to save this page as an "HTML" file, check the File name box, with the extension.

Change the file name as desired, maintaining the extention ".html" or ".htm".

Important Note: If you are creating the home page of your site "The starting page of your website; the first page to appear in your website", you should name it either "index.html" or "default.html", so that when uploading your site to Internet, a web browser looks for one of these names to display first when a user enters the URL (the address of your website)

Then choose the location of this file. By default the window will show the Root folder of your site.

Now, click "Save". Note, the title changed on the page tab.

Now, check the following image that shows the main parts of your Dreamweaver screen.

The panel groups are several windows (panels) that each has its own function and purpose.

The Insert Panel

This panel includes all tools (items) that can be inserted into your web page. These tools are categorized to make finding them easier.

The Files Panel

This panel lists all the files – web pages, graphics, etc. that make up your web site. From this panel, you can rename a file/folder or delete it.

The Properties Panel

When you add any item from "Insert Panel", this item has its own properties that you can change using this panel.

It the Properties Panel is not displayed, you can display it from menu "Window""Properties"

  1. Creating another web page.

Surely, you don't intend to create a site with one page only. You need to add other pages during your design. To do that, just repeat the steps in point (4), but make sure to name the new pages other than "Index" or "default".

1