NVHS Web Design & Advanced Web

Ch. 3 Project - Add CSS to NVHS Scholarship page

2011-09-30T11:44:00.000-07:00

Hello everyone. Here are the directions:

1. Get a copy of the CSS handout from Mr. West. You'll use the properties listed in the handout to style the scholarship page.
2. Create a new folder in your Project folder called Chapter 3.
3. Copy the contents of your Chapter 2 Project folder into Chapter 3. (Copy all the files created for the NVHS scholarship project and pasted in your new chapter 3 folder).
4. Create a new folder inside Chapter 3 called CSS.
5. Create a new file using Notepad ++. Save the file as, "scholarshipstyle.css" inside the CSS folder.
6. Open the scholarship web page in Notepad ++ for editing.
7. Add the external CSS link tag in the head section of the scholarship web page.
8. Test that the external style sheet is properly "communicating" with the scholarship page by changing the link color, font type,font size, and hover effect. Add the following to the scholarshipstyle.css:

a{font-family: chiller;
font-size: 10pt;
color: red;
}
a:hover{background-color: yellow;}

9.Save your .css file. Open the scholarship page in a browser. Confirm that your links have changed. If the changes don't show, make sure your link rel tag is correct (especially the pathing) and that there are no typos in the .css file.

10. Create various IDs and Classes using font, color, and background properties. Use the following external style coding for generating your own ids and classes.

classes examples:
.westone{
font-family: jokerman;
font-size: 100pt;
color: orange;
font-weight: bolder;
}
.westtwo{
font-family: earwig factory;
font-size: xx-small;
color: gray;
font-weight: bolder;
}

id example
#westone{
font-family: comic sans;
font-size: 35pt;
color: green;
font-weight: bolder;
}

11. Apply the IDs and classes to various tags inside the scholarship coding, not sure what tags to apply it to? Use paragraph, H1, and link tags. Applying the same ID (ex: #west1) to multiple tags will help you. Use a wide range of fonts.

Applying a class attribute to an existing paragraph tag example: p class="westone"

12. Open the web page in a browser to see the applied styles.

13. Apply a background property to the page.

14. Print the code and browser.

Chapter 2 Project - Basic directions

2011-09-19T13:08:00.000-07:00

1. Create a new folder called "Chapter 2" in your new "Projects" folder on your desktop.
2. Create a new folder called "images" inside "Chapter 2" folder.
3. Copy and paste the PDF file from the shared V drive. Open the PDF and copy/paste the text to a new notepad file.
4. Save the file as chapter2project.html
5. View the file in any available browser.
6. You must add the basic web page tags, spacing tags, img src tag, and multiple break tags.
7. Include link tags in the appropriate places based on your wireframe sketch.
8. Once you are finished, please let Mr. West know and he'll ask you to verify that all of your links work.

20 Effective Examples of Web and Mobile Wireframe Sketches

2011-09-15T17:18:00.000-07:00

A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as effective reference points, this article features 20 impressive web and mobile wireframe sketches.

Here's the LINKKKKKKKKKKKKKKKKKKKKKKK

Pencil 1.2

2011-09-15T17:11:00.000-07:00

Wireframing Tools for Designers Building a website can be a time-consuming and expensive business. To ensure that you minimize the number of hours spent and the amount of money wasted on each project, it’s absolutely essential that you plan properly, flushing out content and functionality early, reducing rework. Most people simply use a pen and paper to plan the early stages of their website designs, but is this enough? Besides a rough, handwritten sketch, you should be creating wireframes for your own benefit and to aid in preliminary discussions with clients and team members. To create a successful wireframe, you’re going to need to use a good wireframing tool.

Here's the LINK!!!!!!!!!!http://www.blogger.com/img/blank.gif!!!

Web Design "Bible" for reference

2011-09-12T22:05:00.000-07:00

Great websites for reference as discussed by the pros

The Best Designs http://www.blogger.com/img/blank.gif

Siteinspire.com

HTML cheat sheet

2011-09-12T21:17:00.001-07:00

herehttp://www.blogger.com/img/blank.gif

23 Most Popular jQuery Photo Gallery and Slider Plugins

2011-09-12T21:02:00.000-07:00

If anyone's interested in what Bryan and Gunnar (and myself) will be researching for possible addition to our competitive websites, here you go. I've always believed that any quality website should include a photo viewer. There are plenty to choose from in this website.

Here's the LINK

Chapter 1 - Project - Top Five Favorite - Single Web Page

2011-09-09T14:17:00.000-07:00

Hi everyone. Here are the directions to complete the project.

1. Create a new folder on your Desktop called Projects

2. Inside your Projects folder, create a new folder called Chapter 1

3. Inside your Chapter 1 folder, created a folder called imgs

4. Open Notepad. Immediately save the file as chapter1project.html inside the Chapter 1 folder. (Please don't save the file to the imgs folder. Only image files will be saved there.)

5. Open Internet Explorer. Find and save five images to the imgs folder. Please save ONLY .jpg and/or .gif files. No .png or .bmp files are allowed for this project.

6. Create a web page similar to the sketch designed in class. You must include the height, width, alt, and align attributes in the tag.

7. Be sure to include paragaph tags, H1 - H6 tags, don't forget to add the align attribute to the paragraph tag.

8. Once you're satisfied with your design, print the code and browser.

download and install notepad ++

2011-09-07T12:35:00.000-07:00

Here's the Link

MOON FIGHTER CODE

2011-04-25T12:07:00.000-07:00

setup = function()
{

firing = false; // Is player firing?
fireRate = 10; // Frame delay between shots
enemyTime = 0; // Enemy creation timer
enemyRate = 30; // Frame delay between enemy waves
score = 0;
score_txt.text = score;
counter = 20; // Game time
counter_txt.text = counter;

ship.onMouseDown = function()
{
firing = true;
repeatTime = 0;
}

ship.onMouseUp = function()
{
firing = false;
}

ship.onEnterFrame = function()
{
this.destx = _xmouse;

var diffx = (this.destx - this._x)

this._x += diffx * .15;

if (firing && repeatTime == 0)
{
createProjectile("bullet", this._x,
this._y - 5, 0, -15);
}
repeatTime ++;
repeatTime %= fireRate;

if (enemyTime == 0)
{
var sx = Math.random() * 100 + 80;
createEnemy("bob", sx, -30);
createEnemy("bob", 200, -30);
createEnemy("bob", 400 - sx, -30);
}
enemyTime ++;
enemyTime %= 30;

}

doCounter = function()
{
counter--;
counter_txt.text = counter;

if (counter == 0)
{
delete ship.onEnterFrame;
delete bgscroller.onEnterFrame;
enemyLayer.removeMovieClip();
projectileLayer.removeMovieClip();
startButton._visible = true;
clearInterval(countID);
}
}

countID = setInterval(doCounter, 1000);

_root.createEmptyMovieClip("projectileLayer", 99);
projectileCount = 0;

_root.createEmptyMovieClip("enemyLayer", 98);
enemyCount = 0;

ship.swapDepths(100);
ship.gotoAndStop(1);

bgscroller.onEnterFrame = function()
{
if (this._y >= 500)
{
this._y = 0;
}
this._y+=5;
}
}

createProjectile = function(type, x, y, dx, dy)
{
var nm = "proj" + projectileCount;
projectileLayer.attachMovie(type, nm, projectileCount);
projectileLayer[nm]._x = x;
projectileLayer[nm]._y = y;
projectileLayer[nm].dx = dx;
projectileLayer[nm].dy = dy;

projectileLayer[nm].onEnterFrame = function()
{
this._x += this.dx;
this._y += this.dy;

if (this._y < 0) this.removeMovieClip();

for (var i = 0; i < 10; i++)
{
var enm = "enemy" + i;
if (this.hitTest(enemyLayer[enm]) && enemyLayer[enm]._currentframe == 1)
{
enemyLayer[enm].play();
score++;
score_txt.text = score;
this.removeMovieClip();
}
}
}

projectileCount ++;
projectileCount %= 10;

}

createEnemy = function(type, x, y)
{
var nm = "enemy" + enemyCount;
enemyLayer.attachMovie(type, nm, enemyCount);
enemyLayer[nm]._x = x;
enemyLayer[nm].xline = x;
enemyLayer[nm]._y = y;
enemyLayer[nm].dy = Math.random() * 3 + 10;
enemyLayer[nm].t = Math.random() * 6.28;

enemyLayer[nm].onEnterFrame = function()
{
this._x = this.xline + Math.sin(this.t) * 100;
this._y += this.dy;

this.t += 0.1;

if (this._currentframe == 1 && ship.hitTest(this._x, this._y, true))
{
counter = 1;
doCounter();
ship.play();
}

if (this._y > 500) this.removeMovieClip();
}

enemyCount ++;
enemyCount %= 10;
}

startButton.onRelease = function()
{
this._visible = false;
setup();
}

WHACK - A - CAPSULE ASC code

2011-04-21T11:44:00.001-07:00

titleScreen.onRelease = function()
{
this._visible = false;
startgame();
}

startgame = function()
{
for (var i = 0; i < 9; i++)
{
var nm = "m" + i;

_root[nm].onPress = function()
{
if (this._currentframe == 10)
{
this.play();
whacks++;
scoreDisplay.whack_txt.text = whacks;
doWhackAt(_xmouse, _ymouse);
}
}

_root[nm].onEnterFrame = function()
{
if (this._currentframe == 1)
{
if ((Math.random() * 100) < 1)
{
this.play();
}
}
else if (this._currentframe == 10)
{
if ((Math.random() * 100) < 10)
{
this.play();
}
}
}
}

whacks = 0;
scoreDisplay.whack_txt.text = whacks;
endTime = getTimer() + 30000;

_root.onEnterFrame = function()
{
var etime = endTime - getTimer();

if (etime <= 0)
{
scoreDisplay.time_txt.text = "Time Up";

for (var i = 0; i < 9; i++)
{
var nm = "m" + i;
delete _root[nm].onPress;
delete _root[nm].onEnterFrame;
_root[nm].stop();
delete _root.onEnterFrame;
}
}
else
{
scoreDisplay.time_txt.text = Math.ceil(etime / 1000) + " sec";
}
}
}

wcnt = 0;
doWhackAt = function(x, y)
{
var nm = "wc" + wcnt;
_root.attachMovie("whackSign", nm, wcnt + 99);
_root[nm]._x = x;
_root[nm]._y = y;
_root[nm]._xscale = _root[nm]._yscale = 60;

_root[nm].onEnterFrame = function()
{
this._alpha -= 10;
if (this._alpha <= 10)
{
delete this.onEnterFrame;
this.removeMovieClip();
}
}

wcnt++;
wcnt %= 5;
}

BLOCK BREAKER ACTIONSCRIPT CODE

2011-04-06T11:51:00.000-07:00

2011 Nevada FBLA State Conference Info

2011-02-20T22:07:00.000-08:00

Download the 2011 FBLA State Conference Info
Click here to download the PDF

Nevada Future Business Leaders of America and the Nevada Department of Education
are excited to invite your FBLA chapter to the 40th Annual Nevada FBLA State
Business Leadership Conference, April 25-27, 2011. The Grand Sierra Resort
will be the site of Nevada FBLA-PBL’s 40th State Business Leadership Conference!

Here's the cost for each FBLA member to attend:
2 Night Package: $205 Quad Occupancy

Important deadlines:
March 11 (RECEIPT DEADLINE):
• SBLC Registration forms due
• State Officer Application Deadline
• Home Site Testing RETURN RECEIPT Deadline for Accounting II,
Computer Applications, Database Design and Applications, Desktop
Publishing, Spreadsheet Applications, Word Processing I, and Word
Processing II

• Pre-Judged Materials Deadline for Future Business Leader, Job
Interview, Web Site Design, Digital Video Production, E-Business,
Desktop Application Programming, Computer Game & Simulation
Programming, Digital Design & Promotion, and Electronic Career
Portfolio
• Chapter Reports Deadline for American Enterprise Project, Business
Financial Plan, Business Plan, Community Service Project, Local
Chapter Annual Business Report, and Partnership with Business
Project
• National Business Honor Roll forms due
• Who’s Who deadline
• Chassey Ako Community Service forms due
• Erin Hackman NLC Scholarship Applications due
• Business Person of the Year nominations due
• Administrator of the Year nominations due
• Adviser of the Year nominations due

March 21 – April 8:
• Online Testing Period

April 25-27:
• State Business Leadership Conference!

STYLED TABLE WITH CSS - PROJECT #3

2010-10-11T10:09:00.000-07:00

Hello everyone. Directions for the third project of the semester are here. 60 pts possible. Read carefully. Also, there is an extra credit opportunity on page 3.
DUE DATE IS FRIDAY, OCT. 15

CSS cheat sheet

2010-10-01T12:09:00.001-07:00

HEre's the PDF

30+ CSS Cheat Sheets & Quick Reference Guides

2010-09-27T20:04:00.000-07:00

I would be hard pressed to find a web designer or web developer who doesn’t like a helpful CSS Quick Reference Card or Cheat Sheet. Cheat Sheets can help you save so much time and can really help you learn about CSS in an easy to understand format. I have gathered a list of CSS cheat sheets that I have found to be the most helpful

CLICK HERE FOR THE ARTICLE

ADD CSS TO SCHOLARSHIP PAGE" PROJECT (60 PTS) DIRECTIONS HERE!!!

2010-09-23T11:33:00.000-07:00

Hello everyone. Here are the directions:

1. Download, save to your H drive the following PDF file: Click here

2. Create a new folder called CSS inside your Scholarship folder.
3. Create a new file using Notepad ++. Save the file as, "scholarshipstyle.css" inside the CSS folder.
4. Apply the external CSS link tag after the body section Here's an example
5. Create various IDs and Classes using font, color, and background properties. Use the following external style coding for generating your own ids and classes: Here
6. Apply the IDs and classes to various tags inside the scholarship coding, not sure what tags to apply it to? Use paragraph, H1, and link tags. Applying the same ID (ex: #west1) to multiple tags will help you. Use a wide range of fonts.
7. Open the web page in a browser to see the applied styles.
8. Apply a background property to the page. Here's an example of what I'm looking for.
9. Print the code and browser.

NVHS SCHOLARSHIP PROJECT

2010-09-15T10:32:00.000-07:00

1. Create a new folder called "scholarships" in your new "projects" folder in your H drive.
2. Create a new folder called "images" inside "scholarships" folder.
3. acquire the information below to help you build your web page.
Include your own title and H1 title

Here's the PDF containing all required text.

Here's the sample sketchup I drew in class

Here's the image file you need to save to the "images" folder inside of your "scholarship" folder.

chapter 2 - hyperlinks and URLs

2010-09-14T21:32:00.000-07:00

This chapter focuses you being able to demonstrate how link three ways:
1. from one page to another inside a website
2. from one website to another via URL (web address)
3. from one location in a webpage to another spot on the page.

#1-2 are simple with using the "a" tag, but there seems always to be some difficulty with students to understand anchors and target tags required for #3 to be demonstrated. To help you with this, I'm assigning the "NVHS Scholarship" Project as the next assignment following this chapter. In it, you'll be required to set anchors and targets throughout a very long web page allowing users to click on scholarship names to be directed to that part of the web page with additional description provided.

Directions for this project will be available on this blog Wednesday morning.

Sa'a ("see you")

Mr. West

website page created in class using notepad - demo

2010-09-13T11:27:00.001-07:00

Here's the page. I uploaded it to the mywebzilla.com server. I pay godaddy.com $7 a month to host my website. I uploaded the "west" folder to the server using Dreamweaver CS3. It took me just a few minutes to do this. You will learn how to do this as well soon.

Use Notepad ++ to complete your textbook work

2010-09-13T10:18:00.001-07:00

It's a great program that makes life so much easier. Add Notepad ++ to your installer list at ninite.com. It's all the way at the bottom of the page in the Utilities list. It has great features that plain old notepad does not such as line numbering, color coordination, and autocomplete.

Mr. West

2011 FBLA Web Site Design topic

2010-09-13T10:10:00.000-07:00

WEB SITE DESIGN

The career specialist at your high school has asked for FBLA’s assistance. She has been getting phone calls from local businesses to hire 16-18 year old high school students. The businesses would like to find a quick, easy way to look for qualified students to interview. She doesn’t have time to post the jobs on the school Web site, and would like for FBLA to develop a Web site specifically for the purpose of posting of positions. This site should list part-time jobs or internships available for 16-18 year old students. This would require, at a minimum, developing criteria for:

position description
qualifications
hours
days of the week
pay
duties

The opportunities posted may be real or fictitious.

Web Project - ninite.com (10 project pts)

2010-09-09T10:48:00.000-07:00

ninite.com
Check all web browsers, then click Get Installer.
Click here to download your installer
Save it to your H drive. Run the installer to install Chrome, Firefox, Safari and Opera.
Show Mr. West the installed browsers. Use these browsers instead of IE.

Tribalboy project - intro - teacher thoughts so far

2010-09-07T15:19:00.000-07:00

Hi everyone. It seems our advanced boys are stuck on Question #3. It's true there is plenty of coding to sort through, they are doing their best. Basically, #3 is asking them to answer what is the name of the image viewer that appears when the visitor clicks on one of the images on that one web page. I'd like to think that they were distracted slightly. What I'm asking the advanced students to do is recall six months worth of web techniques in roughly one hour.

This question means more to me than their ability to answer it correctly. The actual javascript file associated with the viewer WILL be used in our competitive websites for SkillsUSA and FBLA.

Sure, the javascipt module is somewhat dated, it's still cool as heck. I want to say that mmo-champion.com recently converted their way of user viewed images with this javascript programming.

Good luck advanced guys,

-Mr. West

Web Design - 1st year students - extra credit opportunity

2010-09-06T22:59:00.001-07:00

If you'd like to earn extra credit, visit www.tribalboy.com on your own. Visit all the pages that make up the website. Write a minimum one page essay detailing:

Purpose of the website
Information about the company
services offered at the website
how visitors can contact the website
what you liked about the website
what you feel can be improved upon with the website. Hint - contact page can use a definite update/upgrade.

The essay must be single-spaced. Feel free to interview, talk with our advanced student to get ideas and advice about this site. No deadline for this extra credit at this time.

9-7-10 agenda: Advanced Wed Design - first project - DUE 9-9-10

2010-09-06T22:21:00.000-07:00

Tribalboy.com Project - Introduction, 40 project pts

Introduction: Over the years I've been very interested in this company's portfolio of web design work. One of the reasons is due to the fact that it's an American Indian owned website. I've seen very few out there in my time as a web design teacher. The other reason is Tribal Boy's web developer has designs created from scratch with elements of joomla, javascript, and CSS.

Your task has multiple steps, here's the breakdown:
visit tribalboy.com
spend a few minutes looking over each page AND the coding. Focus on identifying as much of the important parts of the design as possible (.js files used, css components, div usage).

Open Word, insert a header with your name, date, and assignment name.

Type the following questions and provide the necessary answers:

1. On tribalboy's home page, what .js files are linked to the page? I do not want the entire path but the actual .js file name. (10 pts)

2. Visit the "About" page at tribalboy.com, View the code and skim over. Return to the About page. Notice the rows of images. Click on one of the images. What happens? What is the name of the javascript file that allows such an action to occur? (10 pts)

3. Return to the home page. When you move your mouse pointer over the Service link in the top right corner of the page, a drop down menu appears. What javascript file allows such an action to occur? AND What is the external style sheet that applies to the drop down menu? View the coding for the answer. (10 pts)

4. Visit the Contact page at tribalboy.com There is a form for visitors to fill out if they would like to contact the company. View the source code. Capture (using HyperSnap DX) the actual coding associated with the form, hint, do not forget to include the javscript function. Copy/paste the image to your word document. Visit www.mywebzilla.com/FBLA2 View the Contact Us page. Open the source code. Locate the code that allows the form on the Contact Us page to be viewable. Capture and copy/paste the coding to the Word document. What is common about the two forms? What is different about the two forms? In order to receive points for #4 you MUST EXPLAIN THE SIGNIFICANT DIFFERENCE(S) between the two forms. Trust me, the difference is like night and day. Which of the two forms do you prefer? Why?

Save the Word document as tribalboy project - introduction to your H drive or flash drive. Print and turn in the Word document.

Our FBLA Web Development Judges Scores

2010-08-31T14:54:00.000-07:00

We did outstanding in the design portion of the judging, but it was the interview judges scores that doomed us from advancing to finals (top 15) at NLC 2010 in Nashville, TN this past summer.

Judge's Scores for prejudged and interview

Syllabus

2010-08-31T10:40:00.000-07:00

Here's the syllabus, it explains the class and grade breakdown. Everyone's required to follow my blog via google, twitter, or yahoo accounts. We'll be setting up google accounts in class on Tuesday, August 31.

Check out our NVHS FBLA Web Development entry

2010-08-31T08:39:00.001-07:00

Want to see the website entry NVHS FBLA submitted to the FBLA National Competition over the summer? Here's the link: www.mywebzilla.com/FBLA2

Welcome to Web Design!

2010-08-31T08:07:00.000-07:00

Thanks for registering for this class. I'm excited to be able to show you all the great features of web design. By taking this class you are also becoming a member of our NVHS Future Business Leaders of America or SkillsUSA local chapters. both chapters are career and technical student organizations (CTSOs). CTSOs are a vital component of this class in order for it to be most beneficial to you. By joining a CTSO you are eligible to represent North Valleys in local and state web design/development competitions. Each year since 2006 NVHS FBLA has participated in the annual State Business Leadership Conference (SBLC) which is held in Reno or Las Vegas. Last year, SBLC was in Las Vegas; this year we'll be traveling down the street to the Grand Sierra Resort to be a part of SBLC. Visit this website often as I'll be posting information for upcoming assignments, FBLA, SkillsUSA, and NVHS information. Have a great year!

Mr. West