https://pixabay.

com

Objec@ve 107.02 10%

Understand web-based digital media produc@on methods,

soLware, and hardware.
ExplorNets Centers for
Quality Teaching and Learning

Production Phases
Three Phases for Designing Web-Based Digital Media
l Pre-Production
- define parameters of the project; make preliminary
decisions; determine which web design languages suit the
project goals best
Production
- create content; use web design software to make web
pages, organize the site, and create hyperlinks
l

Post-Production
- troubleshoot errors and publish the website
l

ExplorNets Centers for Quality Teaching and Learning

 Pre-Produc@on

Determine the overall purpose of the project

Define the intended target audience
Use a flowchart to determine specific pages of a website
and how they will be organized and linked together

ExplorNets Centers for Quality Teaching and Learning

Pre-Produc@on

Determine specic hardware needs:

l

Computer

Internet Connec@on
- for transferring website to external server

External Server
- used to host website and make it accessible by Internet users

ExplorNets Centers for Quality Teaching and Learning

Pre-Produc@on

Determine specic soLware needs:

l

Visual Editor
- design soLware that manipulates components of the web
page without the user wri@ng or edi@ng code W.Y.S.I.W.Y.G.
(What You See Is What You Get)

Text Editor
- simple text edi@ng program
used to write or edit web
design code; does not show
a visual component

ExplorNets Centers for Quality Teaching and Learning

Pre-Produc@on

Determine appropriate web design language(s):

l

While a par@cular web design project could use a few dierent

languages to be created, certain web design languages have
specialized uses that would work best for a given task or
process.

ExplorNets Centers for Quality Teaching and Learning

Common Web Design Languages

HTML (Hypertext Markup Language)

l

basic framework for all web design

wricen using tags that a web browser uses to interpret the
code and generate the content on the webpage
tags denote structured elements like headings, paragraphs, lists,
etc.

ExplorNets Centers for Quality Teaching and Learning

Common Web Design Languages

CSS (Cascading Style Sheets)

l

separates layout and design features(color scheme, fonts, menu

styles, etc.) from the actual content of the website

easiest way to make site-wide design changes

CSS le combines with HTML le to create a complete website

common format of downloadable

templates found on Internet
l

ExplorNets Centers for Quality Teaching and Learning

Common Web Design Languages

Javascript
l

client-side web development

creates standalone computer ac@ons that run en@rely on the
users machine,
quicker and more secure

ExplorNets Centers for Quality Teaching and Learning

Common Web Design Languages

PHP-server-side web development

l

connects an HTML le to a database of informa@on on an

external server
creates dynamic websites with enhanced user interac@vity

ExplorNets Centers for Quality Teaching and Learning

10

Common Web Design Languages

Adobe Flash
l

commonly used to create Internet games and adver@sements

anima@on, audio, and video capability

allow for enhanced design features

ExplorNets Centers for Quality Teaching and Learning

11

 Produc@on

Building a Web Site

Setup root folder for entire website
Create wireframe for each web page
Add content to specific pages
Create hyperlinks between pages and out to external
websites

ExplorNets Centers for Quality Teaching and Learning

12

Web Design Produc@on Terms

Root Folder - a central loca@on of storage for every le involved

in designing a website; allows the website to be portable from
computer to computer
Wireframe (Skeleton) - a visual guide to how a web page
content will be organized; assists in the arrangement and scaling
of design components
Template - a pre-determined wireframe that can be quickly
downloaded and u@lized
Graphics Op@miza@on - designing and expor@ng graphics with
the specic purpose of using it on a website; allows for quicker
loading @mes

ExplorNets Centers for Quality Teaching and Learning

13

Web Design Produc@on Terms

Alterna@ve Text - textual descrip@ons of graphics and other

design components on a web page; aids in search engine
op@miza@on
Image Map - a single graphic that is divided into sec@ons and
linked to dierent loca@ons
Rollover - feature that indicates interac@vity to the user;
normally causes a component of a web page to visually change
when the users cursor hovers over it
Web Form - an interac@ve feature that allows a user to submit
informa@on

ExplorNets Centers for Quality Teaching and Learning

14

 Post-Produc@on

Proof / Preview the website

Test all of the hyperlinks for quality assurance
Troubleshoot any errors found during proofing
Check compatibility with a wide variety of web browsers
to ensure consistency
Publish the finished website to a server so it can be
accessed by Internet users

"Going Live"
ExplorNets Centers for Quality Teaching and Learning

15