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.
Top Related