Computer Skills
0761111
Adobe Dreamweaver CC Tutorial
Prepared by: Eman Alnaji
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.
1
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"
2. The Starting Page
2
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).
3. 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:
a. From the menu bar, choose "Site"  New Site
This will open the Site Setup window
3
b. In the "Site Name" box, name your site.
c. 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.
4
d. 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"
5
4. 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:
a. From the left-hand list of document categories, choose Blank Page.
b. 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.
c. From the Layout List, choose <none>
d. 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.
e. Click Create.
Now, a blank HTML page is created.
f. From the menu bar, choose "Modify"  "Page Properties"
6
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.
7
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.
g. 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.
8
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.
9
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.
10
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.
11
It the Properties Panel is not displayed, you can display it from menu "Window"
"Properties"
5. 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".
12