COMSC-031Web Site DevelopmentWeb Site Development-

Part 2

1Part-Time Instructor: Joenil MistalOct 24, 2013

Chapter 1Chapter 1

Getting Started with1 Dreamweaver1

This chapter describes the World Wide Web, introduces the different types of information that you can put on a Web

site and shows you how to get started with Dreamweaver2

site and shows you how to get started with Dreamweaver.

Chapter 1 Topics: Getting Started with Dreamweaver Introduction to the World Wide Web Introduction to the World Wide Web Explore the Many Ways to Design a Web

PagePage Plan Your Web Site Start Dreamweaver on a PC Start Dreamweaver on a PC Tour the Dreamweaver Interface on a PC

Sh Hid Wi d Show or Hide a Window Exit Dreamweaver Get Help

Introducing the World gWide Web (pg 4)

You can use Dreamweaver to create and You can use Dreamweaver to create and publish pages on the World Wide Web.

The World Wide Web

A Web Site

DreamweaverWide Web Site

HTML A Web Server

A Web Browser

Introducing the World

The World Wide Web (www)

gWide Web (pg 4)

The World Wide Web (www) Or simply the Web is a global collection of

documents or pages stored on Internet connecteddocuments, or pages, stored on Internet-connected computers.

Commonly called the Web this collection ofCommonly called the Web, this collection of pages houses a wealth of text, images, audio, video, and more.

Web pages are connected to one another by hyperlinks that you can click.

Introducing the World

A Web Site

gWide Web (pg 4)

A Web Site A Web site is a collection of linked Web pages

t d W bstored on a Web server.

Most Web sites have a home page that describes h i f i l d h W b i dthe information located on the Web site and

provides a place where visitors can start their exploration of the Web site.exploration of the Web site.

A good Web site includes links that make it easy to find the most important information content of thefind the most important information content of the site.

Introducing the World

Dreamweaver

gWide Web (pg 4)

Dreamweaver Dreamweaver is program that enables you to

create and edit Web pages with hyperlinks textcreate and edit Web pages with hyperlinks, text images, and multimedia.

You can create Web pages on your computer and p g y pthen, when you are finished, use Dreamweaver to transfer the finished files to a Web server where others can view them on the Webothers can view them on the Web.

Introducing the World

HTML and XHTML

gWide Web (pg 4)

HTML and XHTML Hypertext markup language (HTML) is the

formatting language that is used to create Webformatting language that is used to create Web pages.

The extensible hypertext markup languageThe extensible hypertext markup language (XHTML) is a stricter version of HTML that meets today’s Web standards.

You can use Dreamweaver to create Web pages without knowing HTML because Dreamweaver

rites the HTML for o behind the sceneswrites the HTML for you behind the scenes.

Introducing the World

Web Server

gWide Web (pg 5)

Web Se ve A Web server is a computer that is connected to the

Internet and has software that serves Web pages to

Web Server

p gvisitors.

ClientClient Client

Introducing the World

A Web Browser

gWide Web (pg 5)

A Web Browser A Web browser is a program that can download

Web documents from the Internet interpretWeb documents from the Internet, interpret HTML, and then display the Web page text and any associated images and multimedia.

Explore the Many Ways to Design in a Web Page (pg 6)

Today, there are many more ways to design Web y, y y gpages, but first you have to decide which approach is best for your site.

h i h h Here are a few of the options that you can choose:

Text Images Tables Frames

AP DivsCSS

LayoutsAdobe Flash

Dynamic Web Layouts FlashSites

Explore the Many Ways to Design

Text and Imagesin a Web Page (pg 6)

Text and Images Inserting text and images into a Web page is the

simplest design option.simplest design option. Dreamweaver makes it easy to add images and text

and to change the size, color and font of the text on gyour Web page.

It also makes it easy to organize text into h h di d li t d t hparagraphs, headings and list and to change

alignment.

Explore the Many Ways to Design in a Web Page (pg 6)

Text and ImagesText and Images

Explore the Many Ways to Design

Tablesin a Web Page (pg 6)

Tables Tables have long been a popular choice for

creating page designs.creating page designs. By merging and splitting table cells, you can

create complex layouts using tables.p y g By turning off the border, you can make them

actual invisible. Today CSS layouts are recommended over table

layouts except for tabular data such as the kind of information you would find in a spreadsheetinformation you would find in a spreadsheet program.

Explore the Many Ways to Design in a Web Page (pg 6)

TablesTables

Explore the Many Ways to Design in a Web Page (pg 6)

TablesTables

Explore the Many Ways to Design

Hyperlinksin a Web Page (pg 6)

Hyperlinks Usually called a link, a hyperlink is text or an

image that has been associated with another file.image that has been associated with another file. It is the heart and soul of Web pages. Links enable users to navigate from one topic to Links enable users to navigate from one topic to

the next and from one page to another.

Explore the Many Ways to Design

Hyperlinksin a Web Page (pg 6)

Hyperlinks

Explore the Many Ways to Design

Framesin a Web Page (pg 6)

Frames In a framed Web site, the Web browser window

is divided into several rectangular frames, and ais divided into several rectangular frames, and a different Web page loads into each frame

Users scroll through content in each frame, gindependent of the content in the other frames.

Dreamweaver offers visual tools for building f b d W b itframe-based Web sites.

Explore the Many Ways to Design

Framesin a Web Page (pg 6)

FramesBanner

Navigation ContentContent

Explore the Many Ways to Design

BFramesin a Web Page (pg 6)

BannerFrames

Navigation Main

Explore the Many Ways to Design

AP Divs (Absolute Positions)in a Web Page (pg 6)

AP Divs (Absolute Positions) Dreamweaver’s AP Divs, called layers in earlier

versions of Dreamweaver, use absoluteversions of Dreamweaver, use absolute positioning to create “boxes” that you can use to position images, text and other content on a page.

AP Divs are very intuitive to use: You just click and drag to create a box anywhere on a Web page.Th bi t li it ti i th t t t The biggest limitation is that you cannot center a design created with Divs, a common trick for accommodating different screen sizes.g

Explore the Many Ways to Design

CSS (Cascading Style Sheet) Layoutsin a Web Page (pg 6)

CSS (Cascading Style Sheet) Layouts Many professional Web designers today

recommend creating page layouts usingrecommend creating page layouts using cascading style sheets (CSS)

Using CSS is one of the most challenging WebUsing CSS is one of the most challenging Web design options, but it brings some powerful benefits, such as greater accessibility and flexibility which can help your site look better toflexibility, which can help your site look better to more people on a greater range of devices.

Explore the Many Ways to Design

CSS Layoutsin a Web Page (pg 6)

Web PageCSS Layouts Web Page

Cascading Style

Web Page

Style Sheet

stores all formatting information

W b PWeb Page

Web Page

Explore the Many Ways to Design in a Web Page (pg 6)

CSS LayoutsCSS Layouts

Explore the Many Ways to Design

Adobe Flashin a Web Page (pg 6)

Adobe Flash Some of the “flashiest” sites on the Web have

been created using Adobe Flash.been created using Adobe Flash. Adobe Flash is a vector based design program

that you can use to create animations and highly y g yadvanced interactive features.

Many of the most elaborate multimedia sites on th W b t d i Fl h dthe Web were created using Flash and Dreamweaver.

Explore the Many Ways to Design in a Web Page

Ad b

in a Web Page (pg 6)

Adobe Flash

Explore the Many Ways to Design

Adobe Flashin a Web Page (pg 6)

Adobe Flash

Explore the Many Ways to Design

Dynamic Web Sitesin a Web Page (pg 7)

Dynamic Web Sites At the highest end of the Web design spectrum,

you can connect a Web site to a database,you can connect a Web site to a database, extensible markup language (XML) files or another data source to create highly interactive sites with features such as shopping carssites with features such as shopping cars, discussion boards, and more.

Database-driven sites are especially useful when aDatabase driven sites are especially useful when a Web site grows to more than 100 pages or so because they are much more efficient to update.

Explore the Many Ways to Design

Dynamic Web Sitesin a Web Page (pg 7)

Dynamic Web Sites

30

Explore the Many Ways to Design

Dynamic Web Sitesin a Web Page (pg 7)

Dynamic Web Sites

Start Dreamweaver

Start Dreamweaver on a PC

Start Dreamweaver (pg 10)

Start Dreamweaver on a PCYou can start Dreamweaver on a PC and begin building pages that you can publish on the Webbuilding pages that you can publish on the Web.

1. Click Start2 Click All Programs2. Click All Programs3. Click Adobe 4 Cli k Ad b D CS34. Click Adobe Dreamweaver CS3

Start DreamweaverStart Dreamweaver (pg 10)

Tour the Dreamweaver I f PCInterface on a PC (pg 12)

Menus

Insert Bar

Menus

Document Window

Panels

Properties Inspector

Show or Hide a Window

Show or Hide a Window

Show or Hide a Window (pg 14)

Show or Hide a WindowYou can show or hide accessory windows, also called panels and inspectors by using commandscalled panels and inspectors, by using commands in the Window menu.

1. Click Window2. Click the name of the window, panel, or

inspector that you want to open.

Show or Hide a Window

Show or Hide a Window

Show or Hide a Window (pg 14)

Show or Hide a Window1

22

Opens the Property i tinspector

Exit Dreamwever

Exit Dreamwever

Exit Dreamwever (pg 15)

Exit DreamweverYou can exit Dreamwever to close the program.1 Cli k Fil1. Click File2. Click Exit.3. Click Yes to save any open documents that have

unsaved changes.

Exit Dreamwever

Exit Dreamwever

Exit Dreamwever (pg 15)

Exit Dreamwever1

33

2

G t H lGet Help

Get Help (pg 16)

Get e pYou can use the help tools that are built into Dreamweaver to find answers to your questions y qor to learn techniques that you do not know..

1. Click Help2. Click Dreamweaver Help3. You can search for a topic in Dreamweaver Help

b i k d i h S hby typing one or more keywords into the Search field.

4 Press <Enter>4. Press <Enter>5. Click a topic from the search result list.

G t H lGet Help

Get Help (pg 16)

p

3

5

G t H lAre there different ways of opening the

Get Help (pg 17)

y p ghelp tools and other options in Dreamweaver?Very often yes. As with many programs, there is often more than one way to do the same task.For example, you can access many tools and commands, such as Modify Page Properties, by using either a menu or the Property inspectorusing either a menu or the Property inspector.You can also use the Split or Code view commands to view and edit the HTML code directly, if you y, yknow how to write HTML.