Lesson 5 Tools for Website Development

cortegesmashInternet και Εφαρμογές Web

10 Νοε 2013 (πριν από 4 χρόνια και 2 μέρες)

76 εμφανίσεις

Copyright ©
200
8

20
1
1

National
Academy

Foundation. All rights reserved.

AOIT Web Design

Lesson 5



Tools for Website Development

Student Resources

Resource

Description


Student Resource 5.1

Reading: Website Development Tools

Student Resource 5.2

Taxonomy
: Website Development

Student Resource 5.3

Research
: Website Developme
nt Tools

Student Resource 5.4

Worksheet: WYSIWYG Editing Tasks




AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.

Student Resource 5.1

Reading: Website Development Tools


This presentation gives an overview of the web development tools most commonly used by web
designers today. It is in no way comp
lete, as there are many tools available beyond these, most of which
are specialized and require specific skills beyond the scope of this course.

While viewing this presentation, think about the websites you visit and how they integrate these tools.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


W
ith an HTML / XHTML editor (sometimes called a text editor), you can write HTML code to create pages
that are the building blocks of web design. These editors allow you to edit both HTML and XHTML as well
as CSS and javascript. WordPad and Notepad are popu
lar HTML / XHTML editors. Notepad2 is a free
HTML / XHTML editor that color codes HTML tags. You can download Notepad2 from Sourceforge.net.

WYSIWYG editors allow you to create or make changes to web pages without writing the HTML code.
Instead, when you
create the page, the editor writes the HTML code. Dreamweaver, Nvu (pronounced
N
-
view
), Office SharePoint and iWeb are popular WYSIWYG editors. A popular WYSIWYG editor for MAC
OS is SeaMonkey.

Web
-
based publishing tools allow you to create web pages thro
ugh a website. iGoogle, WordPress, and
Facebook are popular web editors.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


When you use an HTML / XHTML editor, you type both the content and the HTML tags that define the
content as headings and paragraphs and such. When you are finished coding the page,

you save the file
with the file extension .htm or .html.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


WYSIWYG stands for “What You See Is What You Get.” So what you type on the page is actually what
you will see when your web page is posted. You don’t have to manually enter any of the HTML tags
or
other coding. However, some WYSIWYG editors like Dreamweaver let you see both the web page and
the HTML code. A WYSIWYG editor has toolbars and menus to make it easy for you to format your text.
The final web pages are actually very similar to the what
is displayed in the editor prior to publishing.
However, sometimes a web page may not look like you expected when it is published, and you will have
to take additional measures such as modifying the cascading style sheets.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


Web
-
based publishing tools hav
e a user
-
friendly interface based on Ajax. (Ajax is a group of interrelated
web development methods used to create interactive web applications.) These tools allow users to go to
a website where they can post pages directly. They are often used for social
networking and blogging.
Examples are Facebook, Xanga, Blogger, and WordPress.

One of the great advantages of a web
-
based publishing tool is CMS file management. The tool itself
takes care of the content naming and storage for you. It also eliminates the n
eed for FTP transfers.

Web
-
based publishing tools don’t require knowledge of HTML, but can include it. With web
-
based
publishing tools, you may be able to include programming protocols and change the code of individual
pages or templates. Multiple templat
es and add
-
ons are available for free or for purchase.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


This slide lists some of the basic web design tools; each has advantages and disadvantages and allows
the user to add specific functions to their pages. The basics of each are explained in this pres
entation.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


HTML, or hypertext markup language, describes the structure of the content on a web page by “marking
up” text. It identifies certain text as links, headings, paragraphs, lists, etc., and supplements the text with
images, forms, and other objec
ts. HTML is written in the form of tags, surrounded by angled brackets.
HTML pages use links to embed graphics and animation in web pages.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


When designers create web pages, there are two main areas they must address: document content and
document present
ation.

Document content is written in HTML and includes all the text on the page. HTML also includes links to
other pages, images, or multimedia and the formatting of the pages.

While designers can use HTML to control the document presentation, or how th
e page looks, using a
cascading style sheets (CSS) makes the job easier. CSS, which are written in a markup language, dictate
how the document will look so that the designer doesn’t have to define colors, formatting styles, and such
on each page of the web
site.

You can create an external CSS file and put a link to this file in each web page, or you can hard code a
CSS at the beginning of each page. Using an external CSS reduces the complexity of each page, and
ensures that all pages use the same formatting
.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


Graphics source files are referenced in the HTML file using an <image /> tag. Use the GIF (.gif) file format
for flat images like navigation bars, buttons, and menus. Use the JPEG (.jpg) format for photos. Use an
image editor like Adobe Photoshop or C
orel PaintShop Pro to alter images. Alterations include cropping,
rotating, changing colors, and adding artistic effects. Use a drawing tool like Adobe Illustrator or Microsoft
Visio to create drawings, flowcharts, and shapes for your website.

Navigation
can be done without graphics with the use of javascript and CSS.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


Animation is often a series of frames that give the impression of moving footage. WYSIWYG editors
include features to create your own animation. Moving a mouse over a link to draw attentio
n to it requires
animation, and is a common way to make web pages interesting. Flash animation is used to animate
(provide a visual image of) complex concepts in an easy
-
to
-
understand way.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


Video clips are popular multimedia objects to insert on web page
s. They can be referenced on HTML
pages using an <object> tag. Simply specify the source file and set its dimensions, parameters, and other
attributes to include it on the page. If you are writing HTML code with an HTML / XHTML editor, you write
the code t
o call the multimedia object using the <object> tag. If you are using a WYSIWYG editor, you
can specify objects that you want to embed using a GUI, as shown in the slide. In both cases, the actual
HTML code will call the object.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


Scripting languages allo
w web designers to create dynamic web pages. Some simple examples of
JavaScript usage are:

1.

Controlling the size, position, and look of a new window or pop
-
up.

2.

Validating web form input values to make sure that they will be accepted before they are
submitte
d to the server.

3.

Changing images as the mouse moves over them. This draws the user’s attention to important
links.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


Server
-
side scripts allow the page to be generated differently for each user. The response of the page is
customized based on the user’s
requirements, access rights, or queries into the data stores. Server
-
side
scripting technologies include ASP with SQL, PHP with SQL, and ColdFusion.

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.


These elements work together to make web pages interesting, dynamic, and polished. As you gain
experien
ce using each of them in web design, your pages will look more professional.


AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.

Student Resource 5.2

Taxonomy
:
Website Development

Directions: Follow the steps below to

create
a taxonomy

f
or the tools and technologies

related to website
development
.
C
ontin
ue to add new terms throughout the lesson a
s
you
learn and discover more about
website developmen
t
.

Step One
:
Using the chart on the following page
, create a taxonomy like the others that are already in
your notebook
.

Step Two
: Begin by working alone. Thi
nk of a website

development
-
related term that you already know
or learned from the PowerPoint presentation
;

for example,
HTML
. Write that term next to the letter it
begins with,
H
. You have five minutes to think of website

development terms and write them
next to the
appropriate letters. Your teacher will tell you when your time is up.

Step Three
: Pair up with a partner and choose one person to go first. That person will read
his
list from
A

to
Z
.
T
he listener
should
add the terms
she has

not written to
her

taxonom
y
. For example, if you have
written
CSS

and your partner has not, your partner will add
CSS

to
his
taxonomy. Now, switch sides and
have the second partner read
her

list from
A

to
Z
. The listener will add the reader’s terms to
his

list.

Step Four
:
Once you have comp
l
eted your research and worksheet about the tool or technology you and
your group are
researching
, add any new website development terms to your taxonomy.
Then
, after you
listen to your classmates’ presentations on their tools,
add

any mo
re terms you encounter.

Make sure you
keep this taxonomy in your notebook; it

will help you for the rest of this course!

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.

Website Development Taxonomy

Student Name:







Date:




A


B


C


D


E


F


G


H


I


J


K


L


M


N


O


P


Q


R


S


T


U


V


W


X


Y


Z





AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.

Student Resource 5.3

Research
: Website Development Tools

Directions:
Working with your group, research the web development tool that
your teacher assigns

to you
using the websites listed
below to

begin your research. (You may

also want to look at
other websites.)
Write

notes about your tool

on chart paper
, using the headings listed below.

After you complete your
research,
hang

your chart paper on the wall to teach the rest of the class about your tool.

List these headings on y
our chart paper:



Name of
t
ool



How designers use it



How users benefit
f
rom the
use of this
tool



Example of a
website that uses the tool

(
s
ince you can

t

always

tell what technologies a website is
incorporating,
you may need to make

an
educated guess with su
pporting arguments
)



Advantages and
disadvantages of this tool



Miscellaneous
information that is important to know

Website
d
evelopment
t
ool
r
esources

Graphics



Web Graphics for Beginners:

http://www.webmonkey.com/tutorial/Web_Graphics_for_Beginners




JPEG:

http://en.wikipedia.org/wiki/Jpeg



Adobe:

http://www.adobe.com/

Animation



Flash Tutorial

for Beginners


Lesson 1
:
http://www.webmonkey.com/tutorial/Flash_Tutorial_for_Beginners_
-
_Lesson_1




Animation Learning Guide for Flash
:
http://www.adobe.com/devnet
/
flash
/learning_guide/animation.html



Graphic Effects Learning Guide for Flash
:
http://www
.adobe.com/devnet/flash/learning_guide/graphic_effects.html



Flash Animation
:

http

//en.wikipedia.org/wiki/Flash_animation

Multimedia



Multimedia Tutorial
:

http://www.w3schools.com/media/default.asp



Video Learning Guide for Flash
:

http://www.adobe.com/devnet/flash/learning_guide/video.html



Microsoft Silverlight
:

h
ttp://en.wikipedia.org/
wiki
/SilverLight



How Streaming Video and Audio Work
:

http://electronics.howstuffworks.com/s
treaming
-
video
-
and
-
audio3.htm

JavaScript



JavaScript Tutorial Lesson 1
:
http://www.webmonkey.com/tutorial/JavaScript_Tutorial_
-
_Lesson_1




JavaScript Tutorial
:

http://www.w3schools.com/js/default.asp



JavaScript Tutorial
:
http://www.
javascriptkit
.com/javatutors/



The JavaScript Library
:
http://jquery.com



This is for more advanced developers

AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.

Student Res
ource 5.4

Worksheet: WYSIWYG Editing Tasks

Student Name:_______________________________________________ Date:___________

Directions: The following are some of the most common tasks yo
u will need to know
how to do
to create
and modify web pages in a WYSIWYG editor. Your teacher will give you information about how to
accomplish the tasks to complete this activity. Take notes about what to do in the space
s

provided and
keep this sheet
in
your notebook
.

The name of the WYSIWYG editor we use in this class:

1.

Create folders:





2.

Open a web page:




3.

Select, copy, paste text:




4.

Modify text:




5.

Format text:




6.

Check spelling:




7.

Create ordered and unordered lists:



AOIT Web Design

Lesson 5
Tools for Website Development

Copyright ©
200
8

201
1

National Academy Foundation. All right
s reserved.

8.

Modify lists:




9.

Insert ima
ges:




10.

Align images:




11.

Create links within the web page:






12.

Create links to text on another page:




13.

Create email links: