Taren Schilowsky

September 18, 2021

TECHNOLOGY DESING-WEB DEVELOPMENT

1. CHOOSE WEB DESIGN PROGRAM-

Determine best web design platform to best fit you needs, files, and application format.
A. Different Web Design Formats

 Google
 WordPress
 TeacherWeb
 Weebly
 WIX
 Jigsy
 Moonfruit

2. CURRENT APPLICATION OF WEB-

A. Google Sites- free website creator from Google. Allows you to create a website that
is compatible to the other services google provides. Easy to embed, create, and share
files straight to you web platform. Also, is easy to collaborate with others users link
into Google.

3. PRE-DEVELOP
A. Layout basic outline of what needs to be included in your web page.
For example:
• main page (home page)
 Name
 Image
 Page Tabs
• print instructional materials
• graphic instructional materials
• multimedia instructional materials
• Conclusion- Contact information
Fancy Font Signature

4. STEPS TO CREATE GOOGLE SITE-

A. Go to site.google.com
 B. Log into your google account or create a new
C. Choose a template or create from Blank

5. CREATING YOUR WEB SITE

A. Take the tour to understand basic design elements
B. Add pages needed
a. Click PAGES button on top lift corner
b. Add Pages or Edit Existing Pages
i. To add pages, click the + sign at the bottom center
ii. To edit properties- select page and click the three dots to the
right. Locate properties and select.
iii. Edit titles
C. Select theme-
a. Click THEME button on top lift corner
i. Choose the theme that best fits
1. May add new colors by selecting the drip icon and selecting new
colors
2. May adjust font by clicking arrow next to FONT below color scheme

6. MAKING IT YOURS-
A. Start with home page-
i. Adjust and create header
A. Click header selection-
a. hover over header
b. select header type
c. Choose header

B. Add new image or color

a. Hover over header again
b. Select Change image
i. Upload
ii. Select Image
C. Add title
a. Hover and click over text or add text box form sidebar
b. Type new title
c. Edit text box by click box and locating the edition tool on upper left of
box

2
 D. Add buttons
a. Click INSERT tab on upper right-hand side
i. Scroll down until see BUTTON selection
ii. Select
1. Add title of button
2. Link to page
b. Edit button look
i. Hover over button
ii. Adjust look by selecting Fill/Outlined/Font
iii. Use edit pencil to edit title
iv. Delete if need
c. Highlight button boxes to adjust length and size.
E. Edit Footer
a. Conclude your page with name, contact info
B. Other Pages
i. Continue same theme and color schemes throughout each page
ii. Use pre-design layout out or adjust you own
A. Select layout you want from right hand side under layouts
iii. Create consistence throughout the site
iv. Adjust and create header
A. Click header selection-
a. hover over header
b. select header type
c. Choose header
B. Add new image or color
a. Hover over header again
b. Select Change image
i. Upload
ii. Select Image
C. Add buttons
a. Click INSERT tab on upper right-hand side
i. Scroll down until see BUTTON selection
ii. Select
1. Add title of button
2. Link to page
b. Edit button look
i. Hover over button

3
 ii. Adjust look by selecting Fill/Outlined/Font
iii. Use edit pencil to edit title
iv. Delete if need
c. Highlight button boxes to adjust length and size.
D. Edit Footer
Conclude your page
v. Use tools and adjustment to add and delete sections to fit you needs located on left
hand side of section.
vi. All sections are movable.

7. MAKE SURE EVERYTHING IS FORMATED TO MATCH

A. Keep same font and color scheme throughout the site
B. Align picture to content
C. Double check preview to make sure it flows