Final

 

Activity 1

Use The Odin Project Link 

1. Pick a group discuss the skills you need to be a front end, back end and full stack developer.

2. Explain what they do and the tools and technology they use

3. How much do they earn?

4. What should your major be in college?

5. What work values and styles should you possess?

6. What are the related occupations?

7. List three skills you must know.

 

Activity 2

Aim: How to meet the needs of a customer using UX design?

Do Now: Discuss video

Activity: You are going to design a rough sketch of a web site for surfing store using the concepts of a UX designer.

https://www.interaction-design.org/literature/topics/ux-design

 

 https://theblog.adobe.com/what-does-a-ux-designer-actually-do/

 

https://careerfoundry.com/en/blog/ux-design/what-does-a-ux-designer-actually-do/

 

 https://blog.prototypr.io/10-best-ux-designer-portfolio-examples-for-your-inspiration-cbcbd9fe1bf6

 

 

 

Activity: Create a mock up of your surf site using concepts from this website

HW- Define the following: Information Architecture, intuitive, hover, A/B testing, Conversion Data, Google Analytics

Based on a rough draft work in a group to answer the following questions about the surfing website.

Activity 3

Aim: What are the key elements of a website? Due Monday 17th

Preproduction phase 

Project: Design your final draft of your website using these elements

screen-shot-2012-10-18-at-19-09-33.png

 

 

 

 

Create the main page of your site

 

* Use one or all of your three sites from

 

the previous activity in order to get ideas.

 

 Requirements 

 

1. You must have contrast and emphasis in the design (contrast two element oppose each other in the composition)

 

Example- Dark font against a light background or

                 Light  font against a dark background

                 Use one style of font

                 One  color  of font 

 

2. Emphasis (one element stands out in the composition- using size shape or color) 

Example- The words in the Title could be larger than the words in the title bar

Use different sizes of sentences depending on the placement of the words on the page.

3. Include shapes, lines, or ornaments in your design

4. Have a theme or style that matches the subject of your Web site 

5. Have a header containing the logo and a banner (Title your main page) 

 

6. Your menu should contain the following links Home, Information, Gallery, Links, About Me, Contact   

How is the information placed differently in the header, footer, content menu area when comparing two websites

Discuss your ideas for a website and discuss what you will do differently and similar to the resources you have chosen.

Locate the header, footer, menu area and content area from your Web resources.

 

and use a color scheme and prepare to present the following questions

 

 Answer the following questions

  • What is the problem or need we are aiming to solve?
  • What does the product need to do?
  • What is the business opportunity? 
  • How else will we define success for this project?
  • How does this product fit into the overall strategy?
  • Who are the users or customers?
  • Why is this important to them?
  • Why do they care?
  • What are the users trying to do?
  • How can we reach users through this design process?
  • Are there any constraints (technological, business, etc.)?
  • How are we better than our competitors?
  • Are there any relevant products we can look at?
  • Who are the primary decision-makers on this project?
  • Do brand guidelines exist?
  • Does a style guide exist?

  

Design Reviews

Conducted with fellow designers or the larger project team, design reviews can ensure the “whys” behind design decisions align with user and business goals. Ask these questions to better understand how a designer arrived at their solution. Good design requires intentionality.

 

Overall

  • What part of this design are you looking for feedback on?
  • What constraints are you working within?

 

Interaction Design

  • What is the user trying to accomplish on this screen?
  • What problem is this solving?
  • How could this design fail?
  • How did you arrive at this solution?
  • What’s the simpler version of this?
  • Is there anything we can remove?
  • What assumptions are you making?
  • Why is that there?
  • Why is that shown at all?
  • Is that worth displaying by default?
  • Why is the screen organized this way?
  • Why is this a better solution than [established design pattern]?

 

 Read this article A website on color combinations

 

 

Activity 4 

Aim: How do we organize the building blocks of code?

Do Now:

What is the difference between a poor and excellent layout?

Fill out the grid below using the following information

1. How easy is it to locate the elements on the page (Organization, Design)?

2. How are the alignment of the graphics and white space effective (Organization)?

3. How do the colors, font and graphics help communicate the site’s purpose (Color)?

4. How unique and creative are the elements arranged (Design)?

5. Is the layout well structured (Organization, Design)?

6. Can the text be seen and is arranged effectively(Font)?

7. Do the graphics support the meaning and theme of the site(Graphics)?

8. Is the placement of the navigation clear and helps the user go where they want to go(Navigation)?

9 Give the URLs of the sites that you used as a reference.

  

 

Excellent

Above Average

Average

Below Average

Poor

Performance

Organization

 

 

 

 

 

Graphics

 

 

 

 

 

Font

 

 

 

 

 

Color Scheme

 

 

 

 

 

Navigation

 

 

 

 

 

Design

 

 

 

 

 

 

 

Activity:

Read the following links to get all of the information about HTML coding. 

I. If you are on a Mac, open Text Edit.

II. In OSX start TextEdit and change the following preferences: 
a. Open the "Format" menu and select "Plain text" instead of "Rich text".
b. Under the "Text Edit" menu open the "Preferences" window and select "Ignore rich text commands in HTML files". 
*Your HTML code will probably not work if you do not change the preferences above!

III. Type in the following text:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

IV. Save the file as "firstPage.html". 
     Click File Format and select the HTML format

V. Start your Internet browser (Safari or Firefox)
   a. Select "Open" (or "Open Page") in the File menu of your  browser. A dialog box will appear. Select "Browse" (or "Choose File") 
   b. Locate the HTML file you just created - "firstPage.html" - select it and click   "Open". 
   c. Click OK, and the browser will display the page.

VI. Create another page name it testP.html. Open it in the browser to test it.

<html>

<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>

<h1>Your Name</h1>

<p>

My favorite class is __________ because I have so much fun learning and my teacher is awesome.</p>

<img src="picture.jpg"width="300"height="400"/>

</body>

</html>

VII. Add these elements as needed to your page

<h1>This tag creates a heading</h1>

<p>This tag creates a space for a paragraph</p>

<br> This tag creates a line break

Tags like <b> and <i> make  bold or italic text.                         

Read this link to understand Web fundamentals

*Your HTML code will probably not work if you do not change the preferences above! 

Activity 5

This is the test

 

Aim: How is  CSS the dressing of a web page?
 
Do Now: Compare the difference between CSS and HTML .
 

HTML Style Example - Adding Color  to the Background, Font, Color and Size 

This code changes the background color:

                            {DECLARATION}

<body style="background-color:00FFCC>
 (SELECTOR)    (PROPERTY)          (VALUE)
 

Here's how you add a color with hexidecimal code

The font-family, color, and font-size properties defines the

font, color, and size of the text in an element

<p style="font-family:verdana;font-size:20px;color:FFFF66">

This tag centers the image or text

<p align=center>

 

Complete the following HTML Tutorials -HTML (HOME, Introduction, Editors, Basic, Elements, Attributes)

 

Activity 6 Test 

Activity 

Create a CSS About Me page using an Inline stylesheet 

Create a thumbnail sketch of your main page. Find a professional web page that is similar to the theme and content of your web site modify your page to match the professional page.

Use the following tags to create your page:

1. Change the background color

2. Make the words About Me a heading and put it in a <div> tag

3. Put a description about yourself in a <p> tag

4. Find a picture of your favorite hobby put it in a <div> tag

    explain it in a <p> tag

5. Change the font colors, align the text, change the background colors of the <div> 

 

Activity 7

  Second period Web Design Class Log into www.schoology.com using this code RR9GG-4VZGN

Aim How to Create an Internal stylesheet using css?

Do Now: What is the difference between an inline css and html? 

Activity:

1.Alter your About Me page's Div tags  using the following properties: margin-left, margin-right, margin-top, margin-bottom, padding, and border. Link about Div tags. Link about using Inline style tags. Link about margins

Read about the box model.

2. Find a professional looking website using div, margins, borders, span, etc and recreate your About Me page based on that website's style and use of divs

 

Web Design Assessment

 

 

 

 

Please sign into Schoology using this code MGZCR-RQQGW 

 Activity 8

Aim: How does HTML5 help layout your elements?

Do Now: What is easier about coding with HTML 5?

Read the links on HTML5  and recreate your surf shop

 

 

 Activity 9 

Monday November 26th Take Pretest

 

Activity 10

Aim: What do you do during the planning phase of Web Design?

Do Now: What should be the steps in planning of building your web site?

1. Brainstorm

2. Decide the purpose and audience of your website

4. Research different designs

5. Create a rough draft

Activity:

Make two different rough drafts of your website due Thursday

 

Take Test Thursday 11/29/18

Activity 11

Activity:

Make a prototype of your website using Powerpoint or Photoshop. Include all of the appropriate elements (header, navigation, main content, footer, images) of a professional layout. Refer to a professional website to make your design choices.

 

You may use this Online Text Editor to work on your final project; it provides color schemes for easier coding and auto-complete for tags. If you want to save your work, you will have to make a GitHub account. Links for both are provided below.

GitHub Sign-Up Page: https://github.com/

Online Text Editor: https://codesandbox.io/

(You also get extra credit if you use this editor and learn to work with it)

 

Activity 12

Aim: How can making an external stylesheet make our web building easier?

1. Make a folder called - myWebsite 

2. Put all html files and picture associated with the site your creating into this folder

3. Rename your main page - index.html

4. Create your main page in TextEdit using External stylesheets 

5. Open your index.html (main page). Copy all of the rules between the <style> and closing </style> tag put it in a new blank textEdit document.

6. Save this document as - mystyles.css

7. Now copy these tags

<head>
<link rel="stylesheet" type="text/css"href="mystyle.css">
</head>

on every single page

 

Activity 13

Aim: How can using an External Stylesheet make Web Development easier?

Do Now: What are the pros and cons of using an external stylesheet?

Activity:

Once you complete linking your five pages with an external stylesheet.

 

Read this link 

 

Creating an External Stylesheet

 

1. Type the declarations that represent how you want the layout of your website to look.

 

2. Save new document  as mystyle.css

 

3. Link each of your html documents  to the External stylesheet. Using the following code

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Mini Lesson

Aim: How can using an External Stylesheet make Web Development easier?

Do Now: What are the pros and cons of using an external stylesheet?

Activity:

Once you complete linking your five pages with an external stylesheet.

Read this link 

Creating an External Stylesheet

1. Type the declarations that represent how you want the layout of your website to look.

2. Save new document  as styles.css

3. Link each of your html documents  to the External stylesheet. Using the following code

<head>
  <link rel="stylesheet" href="styles.css">
</head>

 

Start creating your five page website. Make sure you use the web address of your images

 Example: 

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

 

When you finish your site zip your "website" folder and submit to Schoology

To zip your files:

1. Select your folder

2. Go to Finder -> File ->Select Compress

3. Find compressed file on desktop and submit to 5PageSite link. 

 

 

Activity 14

 

Upload Website using Github pages

Instructions

 

1) Register yourself on GitHub

2) Start "New Repository" a) Verify Email b) Name repository "username.github.io"; username is the one you registered on
            GitHub.
        c) Leave all default options 

3) Upload files
a) Click on "upload existing files"
b) Go into your project folder on your desktop, drag files to upload section
c) Commit your changes

4) Make a new tab and go to "username.github.io" to visit and check your website

*NOTE: Make sure your first page is called "index.html"*
*NOTE2: Make sure your Repository is all lowercase

 

 Post the link to your website here on Padlet

 

Review

 

 

 

 

 

 

 

 

 

 

and Internal stylesheet?

Aim: How to create an External stylesheet?

Do Now: 

Final Evaluation

I- Open Preview>File>Take Screenshot

II- 1. Take Screenshot of your five pages in the browser, one example of your external stylesheet, one page of your HTML code pertaining to the external style sheet

III - Answer the following question: List two strengths and weaknesses of you using HTML and CSS

 

 Look at the following website to get ideas


 

 

 

 

 

 

 

 

 

 

 

Aim: How can exploring the terminology of Web Design help in the creation of a Web Page?

 

Do Now: List the meaning of one Web Design term you know.

 

Label the following activities Activity 1 on your wordpress blog

 

What is  design?

 

Designing is a process of creating a plan and originating the development of a specific product. Once the product is designed, its design is used to start the production. Design often refers to the creation of a product prototype. In most cases the meaning of “product design” refers only to the product's appearance rather than to its construction, architecture and technical specifications.

 

Web page design

 

Web design itself refers to the process of creating a web page’s appearance and to the choice of a right color scheme, page layout, fonts and more. Every single web page in a website has different content, but all the pages are using a similar graphic design. Often sites will use website templates, which contain all the basic elements of web design - the website's CSS style, buttons, backgrounds, borders and various graphic elements like hover images, bullets and header banners. When the website template is applied to the website, all the pages assume its appearance, using the same styles, background and other graphical elements.

But most of the pages in a website have their own design elements. This is needed because every page has to present a different content, and the basic website style is not fully applicable for all the web pages. For example, designing a contact form will sometimes require a custom layout and design elements with which to handle the form's fields, buttons, drop-down menus, etc. All these styles, layouts, images, etc. are often not applicable for the other website pages. So, the contact page uses the basic website template for the menus, backgrounds, header images, etc. but also has its own web page design, including the contact form’s design itself and all the other elements specific for that page.

 

Activity 2 

Answer the following questions by reading this article. Click answer questions link

 

I. What are Important Internet Terms?  

Go to this link to play the Scatter or Asteriods game that uses the Web Design Terms 

Complete the assignments below:

Web Game

 

Rags to Riches

 

Pop Ups

 

Activity 3

Front End Developer

Read the article below

http://www.theguardian.com/help/insideguardian/2009/sep/28/blogpost

Answer the questions

Practice the vocabulary by choosing two of the games 

I.Take assessment     

 

Activity 4

What is Interactivity?

Interactivity: For each site describe how you the user interacts with the Web site or Web application.
Example- Clicking on a mouse, rolling over a picture and the picture changes, or clicking on a hyperlink.

How does the following sites use interactivity in a unique way? Answer on your Blog.

Site 1

Site2
Site3

 

Read this article A website on color combinations

 

On your blog discuss how the Websites below use the principles and color schemes

 

Monochromatic and Contrast
Cool Colors and Harmony
Cool Colors and Balance
 

Set up an account in codecademy.com

Go to Language Skills-HTML/CSS

Read this link to understand Web fundamentals

Case Study

Mr. Caldera would like a high end car selling e-commerce site built . He has a sketch of the main page, pictures are place on the sketch randomly. He wants a royal feel to the site.

1. What kind of colors would you use?

2. What type of font?

3. What type of cars would you choose?

4. What type of pages would you create?

 

 

Take Test

 

Activity 5

 

Aim: What are Important Internet Terminology?

 

Activity: Create a Powerpoint presentation explaining ten things you learned in the last four activities and present your findings to the class. Use at least 20 vocabulary word in your explainations.

 

1. What does the term or name mean?

 

2. How is it important or used in the Internet?

 

3. Give a specific example of it's use on the Internet?

 

 

Internet  

 

URL 

 

Web Page 

IP ADDRESS

SERVER

CLIENT SIDE

 

Index Group2

 

Ecommerce 

 

Internet Service Provider (ISP) 

 

SSH Telnet 

CABLE MODEM

TCP

FTP

 

File 

 

Website 

 

Web Space 

DHTML

COOKIES

PHP

 

Web Browser 

 

Bandwidth 

 

Image Galleries 

 

Banners 

 

Freelance 

 

 

 

 

    

Activity 13

Aim: How to create a website using dreamweaver CS6

Do Now: What would you like for your text editor to do?

Activity: Read this link and open up Dreamweaver 

video

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Web_Communication_CS6_ExamPrep.pdf

 

5/15/16

 

Learn Bootstrap

 

 

5/9/16

 

Aim: How would you add more interactivity to your site using Dreamweaver? 

 

Do Now: What's the difference between hard coding and using Dreamweaver to create your site?

Activity: Watch video and transfer your information to a new template

5/4/16

Aim: How would you add more interactivity to your site? 

Take HTML assessment 

Jquery

 

JQuery Introduction

 

Jquery examples

 

more examples

 

 

 

 

 

 

 

 

Wednesday April 13

Create an html document and external style sheet for your main page.

Monday April 11

Take assessment

 

Aim:How to use HTML5 in your Web site?

Do Now: How is the structure of code like the human body?

Activity: Go to this link and this link

 

Copy this code

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">

 

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

 

<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header, nav, section, article, footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>

 

<body>

 

<header>
<h1>HTML5 Skeleton</h1>
</header>

 

<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>

 

<section>

 

<h2>Famous Cities</h2>

 

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>

 

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

 

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

 

</section>

 

<footer>
<p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

 

</body>
</html>

 

 

 
 

 

 

 

 

6/11/15

Final Test

 

painting

FTP using browser

Download cyberduck ftp program to upload your files

 

 

 

 

5/1/15

 

Go to codecademy.com click on HTML/CSS complete all of the lessons

Start at HTML Basics and end at CSS positioning

4/30/15

 

Review

 

4/27/15

Aim: How can using CSS3 + HTML5  help us enhance our design?

Do Now: What are the avantages of using CSS3 and HTML5?

Actiivity: Finish your main page by adding at least four CSS3 and four HTML5 features.

                Due Tuesday

                Ingredients of a Website

CSS3

Javascript

 

 

4/21/15

Please take survey 

Aim: How can using CSS3  help us enhance our design?

CSS3

Test 4/16/15

<!DOCTYPE html>

<html>
<head>
<style>
body {
background-image:url('Flower.jpg');
background-repeat:no-repeat;
background-size:900px 800px;
}
h1 {
text-align:center;
color:FFFFFF;
}
div {
text-align:center;
background-color:#000000;
font-size:20px;
border:3px solid white;
color:#FFFF00;
}
table, td, th
{
border:1px solid green;
padding:15px;
}
th
{
background-color:green;
color:white;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<div>
<h1>My Page</h1>
</div>
<table>
<tr>
<th><a href="secondpage.html target="_blank">Home</a></th>
<th><a href="stylestest1.html target="_blank">Gallery 1</a></th>
<th><a href="stylestest1.html target="_blank">Gallery 2</a></th>
<th><a href="secondpage.html target="_blank">Fun Facts/a></th>
<th><a href="stylestest1.html target="_blank">Contact Us</a></th>
<th><a href="stylestest1.html target="_blank">About Me</a></th>
</tr>
<tr>
<td><img src="rose.jpg"width="250" height="200"/></td>
<td><img src="rose.jpg"width="250" height="200"/></td>
<td><img src="rose.jpg"width="250" height="200"/></td>
</tr>

 

</table>
</body>
</html>

 

Questions (refer to the code above ^)

 

1. What are the attributes of the <img> tag?
2.How many rows are in the table?
3. What does target="_blank" mean?
4. In order for you to see the contents of a web page they must be between what two tags?
5. Which property centers text?
6. Which property and value allows you to have one background picture cover the entire page rather than multiple images?
7. What would you do in order to create an external style sheet from the code above?
8. What selector allows you to change the colors of links?
9 What type of punctuation should separate properties from values?
10. what type of punctuation should separate declarations?

 

 

 

 

Test 

March 24th

 

Aim: How can using an external CSS style sheet help us organize our code?

 

Do Now: Play game

 

Activity: Using the code in the handout redesign the page to look like the main page of your website.

Refer to these links to get more information:

navigation link, tables, backgrounds, box model, floatid & use of idclass

CSS3 multiple columns

 

ENGINEERING DESIGN PROCESS 

 STAGE 2- EXPLORE 

 RESEARCH WHAT OTHERS HAVE DONE. 

LEARN WHAT MATERIALS AND

APPLICATIONS YOU NEED

March 20th

Aim: How can using an external style sheet better organize our information ?

Do Now: Go to link to understand what are external style sheets.

Activity: Break into groups of 3 or 4 create an explain how the following elements and tags in the css section are used on the html section (page). Each group will have to present their finding to the class. 

body               

a:link

a:visited

a:active

a.case1:link

p:first-line

div.foo:first-line                 

div:first-letter

ul ul li                  

h2 em

h2.ex1                  

.funkyclass                 

#tagid1

#tagid2

 h1, h2, div.class5, blockquote

p.special

blockquote

.part1

h6 

Here is some more information on class and id

 

March 18th

Aim: How can using a list organize our information better?

Do Now: How do you order lists?

Activity: Copy the code below and put it in a div tag under the table on your css internal style sheet.

<h2>unordered List</h2>

<ul>

  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h2>Ordered List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

then add a rule to the style section of your HTML page

March 16th

Aim: Using CSS to create Web Pages
 
Do Now: Discuss CSS
 
OPEN MICROSOFT WORD AND READ THE DOCUMENT BELOW 
 


CSS or Cascading Style Sheets, can be used with XML to allow XML documents to be displayed in a Web browser. But how do you actually create a style sheet?

There are three parts of a style sheet:

selector
the element or class and id title to which the style will be applied
property
the information on how to format the selector
value
the actual style to be applied to the property on the selector
For example, if you want all of your paragraphs to be the same font, you would use the following CSS:

p {
  font-family : arial;
}
p
the selector. All text within the <p></p> tags is impacted by this style
font-family
the property. All text will have the font-family changed
arial
the value. The font-family will be "Arial"
As you can see above, the format of a style declaration is:

selector {
  property : value ;
  property2 : value ;
}
Group your styles for each selector together in curly braces
{}
Then separate the property from the value with a colon
:
Finally, end each style statement with a semi-colon
;
 Go to the link below create a page using CSS code

link

I. How to use CSS?

 First decide if you want to create an external, internal or inline style sheet. 

1. External style sheet (must use <link> tag and save as a .css extension)
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css"/>
</head>

2. Internal style sheet (inside the <head> tag)
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

3. Inline style (inside an HTML element) 
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
the reason why and when you should use a particular style
 

HTML Style Example - Background Color

The background-color property defines the background color for an element:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

Here's how you add a color with hexidecimal code

Example


<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
 
This property centers your text in a heading tag
 
 
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
The example shows how to change the property color and left margin

of a paragraph with a red and 20px value:

<p style="color: red; margin-left: 20px"> This is a paragraph</p>

* Here is a link that allows a nice special effect
link


Use this site as a guide in CSS
Here are more CSS references
 
 Use this link as a reference

Aim: How to use CSS to create Web Pages?

Read the following link about Using CSS.

Use the CSS generator to redesign your main page use 3 of the items i.e box, gradient background and or table from one of the following pages. 

http://www.cssmatic.com/box-shadow
http://www.csstablegenerator.com
http://www.css3.me


 
 
 

 

 

March13

 

Aim: How to use tables to arrange objects on your page?

Do Now: Discuss what is wrong with the code in the handout.

Activity:

Recreate your political page using the table, menu, 3 or more pictures, &nbsp

and div tags

 

March 8

Aim:How to use tables to arrange objects on your page?

Do Now:

Copy and paste code, replace the name of the pictures with the names of your picture and explain the difference between the arrangement of the pictures and which tags created the difference.

Open a document and save as Table1.html

<html>
<head>
<title>horizontal alignment</title>
</head>
<body>
<center><table width=65%>
<tr><td align=center valign=top><img src="yourpicture.jpg"width="200" height="200"></td></a>
<td align=center valign=top><img src="yourpicture.jpg"width="200" height="200"></td>
<td align=center valign=top>
  <img src="yourpicture.jpg"width="200" height="200">
</td></tr></table></center>
</body>
</html>

Open another document and save as Table2.html

<html>
<head>
<title>Vertical alignment</title>
</head>
<body>
<center><table width=65%>
<tr><td align=center valign=top><img src="Humanface.jpg"width="200" height="200"></td></tr>
<tr><td align=center valign=top><img src="Humanface.jpg"width="200" height="200"></td></tr>
<tr><td align=center valign=top><img src="Humanface.jpg"width="200" height="200"></td></tr>
</center>
</table>
</body>
</html>

Activity:

How to use tables

See how this code and create a menu. Replace the html files with html files you have created.

<html>
<head>
<title>Vertical alignment</title>
</head>
<body>
<p align=center><table width=65%>
<tr><td align=center valign=top>
<a href="firstpage.html">About Me</a>
</td>
<td align=center valign=top>
<a href="secondpage.html">Gallery</a>
</td>
  <td align=center valign=top>
<a href="thirdpage.html">Contact Us</a>
</td></tr></table></p></body>
</html>

 

 

Aim: How to arrange objects using HTML?

Do Now: How can div tags help arrange objects on your page

Activity: Create a page about a social or political concern using:

               div, hr, h1,back-ground color, img src, margin, padding

               What are block line elements

               Use entities like &nbsp and span style to create white space,

 

March 5

 

<html>

<head>

<title>Title of page</title>

</head>

<body style="background-color:yellow;">

<h1 style=" font-family:verdana;color:blue"> Global Warming</h1>

<p style="font-family:verdana;font-size:60px;color:green">

<p align=center>Global warming or Climate change is something that
everyone should be concerned about.<br> Put "br" tags at the end of
each sentence.
</p> <p align=center>

<img src ="picture.jpg" width="300" height="400">

<p>

<a href=http://www.w3schools.com/ target="blank">Visit W3Schools!</a> </p>

</body>

</html>

Refer to the code above to answer some of the questions below:


1. What is the name of the HTML editor that we are using?
2. What does HTML stand for?
3. Name one tag name.
4. what goes between the head tag?
5. What is the purpose of the <!DOCTYPE> declaration?
6. Write two HTML elements and their function.
7. What are attributes?
8. Give examples of 2 attributes and their function.
9. Name two declarations and their function.
10. Name two selectors and their function.
11. Name two properties and their function.
12. Name two values and their function.
13. Write two hexadecimal colors and their color.
14. List two ways to troubleshoot your code.

 

March 4

Aim: What is Troubleshooting?

Do Now:  What steps can we take to get our web page to work?

Activity:

Read HTML ELEMENTS1

Make a web page of a poem or quote of a famous African American athlete Wilma Rudolph:

“Never underestimate the power of dreams and the influence of the human spirit. We are all the same in this notion: The potential for greatness lives within each of us.” – Wilma Rudolph

Make sure the page has the following:

a title, a color, font, font color, a centered picture with your own dimensions,

and a link that opens to a new window. 

 
 
 

 

 
 

               

 

 

Test

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ENGINEERING DESIGN PROCESS 

 January 13th 2014 

 

STAGE 6 - Make It Better

 

Aim: How does publishing fit into the Web Design Process?

  

Compare launching a site and launching a rocket ship into space 

The publishing part of the website making process involves two simple steps: 

Find and register with a Weebly.com

Upload your files to your host

Once you've done that, anyone with access to that wacky world wide web can see your site. Google can find it. Potential employees can see how talented you are. All the work you put into making it is now paying off!

 

Step 1: Find and register with a web host

Choosing a host is like buying anything online: You do some research, find a few hosts that meet your needs, and maybe consider the recommendations of your peers before you commit. 

Whatever service you choose, you'll need two basic things from your host: 

A domain name: This, as you probably know, is the human-friendly URL for your site.

A hosting plan: This is the service that provides you with the disk space and bandwidth for your site. It hosts your files and transfers your web page to the computers that visit your site.

  

Step 2: Deploy Your Web Site

Sign into your web host.

Find the FTP (or for better security, SFTP) credentials. Basically you need an FTP, SFTP, or SSH username and password. 

You should see a directory listing of files or folders, for your domain, on your host. 

Find the root folder of your domain. 

Now that you've found your root, all that's left is to upload your site from your local computer to your server! Just drag the files from your desktop to the root folder 

 

 

ENGINEERING DESIGN PROCESS 

 

STAGE 2- EXPLORE

 

 RESEARCH WHAT OTHERS HAVE DONE.

 

LEARN WHAT MATERIALS AND

 

APPLICATIONS YOU NEED

 

WEEK OF December 16th

http://www.quia.com/quiz/3466596.html

 

 

ENGINEERING DESIGN PROCESS 

STAGE 2- EXPLORE

 RESEARCH WHAT OTHERS HAVE DONE.

LEARN WHAT MATERIALS AND

APPLICATIONS YOU NEED

WEEK OF NOVEMBER 18th


Tables

 
Make an image a hyperlink and put it into one of the cells of your tables.
 
This example creates an image that's a hyperlink to a page within your Website
 
<html>
<head>
<title>Title of page</title>
</head>
<body>
<center><table width=65%>
<tr><td align=center valign=top><a href="secondpage.html"><img src="onepicture.jpg"width="65" height="38"></td></a>
<td align=center valign=middle><img src="secondpicture.jpg"></td>
<td align=center valign=bottom>
    <br><br><br><br><br><img src="thirdpicture.jpg">
</td></tr></table></center>
</body>
</html>
 
Here are more CSS references
 

Create three different types of tables:

1. Three pictures aligned horizontally

2. Three pictures aligned vertically

2. Three staggered pictures  

 
 

Digital Portfolio Checklist

The checklist below contains all of the criteria for a "complete" portfolio. Make sure all items in the portfolio reflect the best you can do.

 

A well designed blog

 
   

Student as Learner

Best Works
You need to explain at least 2 of your best assignments. Your best works should reflect your growth as a student and reflect what you can accomplish. Each best work must be accompanied with a Cover Sheet which explains why you chose this item as your best. Use at least  5 computer terms

 

Give a description of the task on each post.

Describe how this assignment help you gain a better understanding of Web Design.

Personal Statement
1.Write a paragraph about how you feel about your creative and computer skills at this point in the marking period.

2. How could these creative and or computer skills help you in the future?

3. How did you meet the requirements for the last project (refer to rubric)

 

 

.

 

 

 

 

 

 

 

 

 

 

 

ENGINEERING DESIGN PROCESS 

STAGE 2- EXPLORE

 RESEARCH WHAT OTHERS HAVE DONE.

LEARN WHAT MATERIALS AND

APPLICATIONS YOU NEED

WEEK OF NOVEMBER 12ND

ACTIVITY:

Students will break into groups of three.

They will create a main page using html coding for a bakery that has the following items:

A colored background

A picture that is a link

A picture

A link that links to a website

An ordered and unordered list

A div tag that has content in it and a background color

 

Paste the Code on your blog and explain the task and what role you played on your team.

 

Using Formatting Your Page

 

HTML Style Example - Adding Color  to the Background, Font, Color and Size

 

This code changes the background color:

 

                           {DECLARATION}

 

<body style="background-color:00FFCC>
 (SELECTOR)    (PROPERTY)          (VALUE)

 

Here's how you add a color with hexidecimal code

 

 

 

The font-family, color, and font-size properties defines the

 

font, color, and size of the text in an element

 

<p style="font-family:verdana;font-size:20px;color:FFFF66">
 

 

This tag centers the image or text

 

<p align=center>

Activity 

Create an About Me page using the code from the hand out.

 

 

 

 

Exercise 2 
Create a visual poem with words and photos based on your Website
1. Download pictures. Press the mouse pad until you see Download Image to Disk
2. Click Photoshop>Open the picture you downloaded
3. Open another document - File>New Document>Save>Collage 
    this will be your work area. You will copy and paste parts of images and   compose a still life.
4. Use the Lasso or Magnetic Lasso  to select around the object in the downloaded images. Go to Edit>Copy
5. Go to the Collage file and go to Edit>Paste

Two different ways on how to create collage - link or link2

 

 

 

 

 

Stage 1- Identify the Problem

What do you need to know about the Web Design?

What artistic and technical terms do you need to know?

 

Information You Need To Know - Design Terminology


Project 1- Design a REBUS using one of the Elements of Art as a background.

Elements of Art (LineShapeColorColor2Color3Texture, Value, Space,Space2 Form) 

In the Step 6 phase redesign using a Principle of Design

Principles of Design (BalanceMovementContrastEmphasisRhythmPatternUnity, Harmony, Variety)

 

Balance - shows symmetry in the composition
Movement - elements show movement or action
Contrast - The elements are opposing one another i.e., big against small, light against dark
Emphasis - artist directs the eye to one part of the composition
Rhythm - the same elements in a pattern vary in size or direction
Harmony - elements are similar in size, shade or shape
Variety - elements are different in size, color or shape

add a color scheme

 

 

.
.