Tutorial
As a prerequisite, you should have already completed the Cascading Style Sheet Assignment in the Steb by Steps
Using a web site to organize your class and weekly plans is an excellent way to work with all the components of a Virtual Business Class.
The class web site can also be used as promotional tool , a good source for parents who want to see what is done in a virtual business class
A tool to be used by school counselers for advertising and enrollment purposes
A excellent example for an IT Department member for a portfolio item.
The sample web pages given here are designed for Benicia High School Virtual Business class called the Cakery.
Currently there is no program at Benicia High School.
You will customize these forms for your school
You wil be given a template for each page.
It is designed so that it is easy to make changes to the site and assignments.
The assignements suggested are tied to the assignments at janetbelch.com web site
Materials to Collect
- Student handbook for your school. Need for attendance and tardy policies
- Digital pictures of your school's logo.
- Address and telephone number of your school.
- Coordinator's e-mail address
- Email address of your company
- URL of company's web site
- Job descriptions and salaries of each employee if you want to make changes to what is already here.
- An organization chart for your company
- A list of all departments
- Pictures to be used
- Videos wanted as part of web page
- Animated gif's if you choose to use them.
- Decide on font family, colors, size, weight, headlines and lists formats, headers and footers for Cascading Style Sheet Page
- Quarter Tasks from VE website for each department are included
- Pictures of Your VE class members
- Pictures of activities that your VE company has participated, like open houses, grand openings, trade fairs, etc.
- Lesson plans not already determined from your instructor.
Teacher's Responsibility
- Look at lessons already developed for the different departments.
- Decide how you want to modify lessons to fit your needs.
- Add new lessons for third and fourth quarter for your IT department to key in for each department.
- Hand out progress logs to department head
- Grade progress logs when returned from CEO
- There is quite a bit of JavaScript in these pages. If there no changes made to it by your students, you will NOT have to change some Internet Options
- If the pages do not perform properly do the following, like loading and assignment
- Click Tools on the browser tool bar.
- Select
- Click on the Advanced tab
- Under the browsing category, uncheck Disable script debugging Internet Explorer
- Uncheck Disable scribt debugging other
- Click Apply
- Click OK
Second Semester Ideas by Department
Accounting
- New General Ledger VB10
- Stand alone payroll program
- Stand alone Accounts Receivable
- Invoicing
- Personal Finance
- Inventory unit
- Accounting presentation to be given at grand opening
- Annual report presentation including monthly financial statements
Administration
- Set up dates for open houses and grand opening
- Determine which trade shows to attend
- Transportation for events
- Personal Finance
- Grand Opening Presentation
- Annual report
Sales
- Inventory
- Invoicing
- Inservice staff on sales procedures for grand opening and open houses
- Personal Finance
- Grand Opening Presentation
- Annual report
Marketing
- Plan Grand Opening
- Determine dates for Open Houses
- Coordinate fundraising
- Internet Advertisements
- Inventory
- Organize Open houses
- Personal Finance
- Grand Opening Presentation
- Annual report
Information Technology
- Cascading Style sheets
- Teacher Assignment Web site
- Internet ads
- Personal Finance
- Grand Opening Presentation
- Annual report
Fundraising
- Organize fundraising activities
- Keep track of all monies collected
- Personal Finance
- Grand Opening Presentation
- Annual report
Human Resources
- Monthly News letters
- Employee of the Month
- Personal Finance
- Grand Opening Presentation
- Annual report
|
Step-By-Step Instructions
Teacher Assignment Web Site - Week 1
There are seven major pages linked to the first page. Each page is used to help the VE teacher organize the assignments for each department. The categories are: Our Company which links the user to the Administration Department, the Accounting Department, The Human Resources Department, The Information Technology Department, The Marketing Department, The Sales Department and the Fundraising Department.
Other links from the first page are: Grading Policy, Business Partners, Apply for a Job, Special Events, Quarter Tasks and a Photo Gallery.
Day 1: Viewing template web page/Saving first page.
Click Here to see Benicia High School's web page. You will use it as a template for your site.
- Go Through each page site
- The first page is composed of the following elements:
- The header
- The school's Logo
- School's contact information
- Name of the School and Virtual Enterprise
- All the Links down the side to other pages
- What is Virtual Enterprise?
- A picture of the Virtual Business Team
- The Logo for the VE company
- A link to your Virtual Business Web site
- The logo for California Virtual Enterprise
- A link to the California VE website.
- Some of these items you will change. Others you will leave alone.
- Saving the first page.
- Display on your screen the beginning page, indexlp.html
- Right-Click on the page.
- Select "View Source" from drop-down menu
- You will see the source code displayed in Notepad
- Click File on the menu bar, then click "Save" - Save As Box appears.
- Use Look-In Box to decide where to store your web page files.
- I suggest making a new folder on your hard drive in My Documents section to keep all related documents in one place.
- Use "indexlp.html" as your file name for this first page. Keep this name to save yourself a lot of work changing links from other pages.
- Make sure that the file extension is ".html"
- By saving indexlp.html to as separate folder, we have the main body of the document.
- We did not however, transfer the following:
- Getting started assignment
- The style.css file
- The Company Page
- The job Application Page
- The grading Policy
- Business Partner Page
- Special Events
- Photos
- Quarter Tasks
Day 2: Tranhsferring the missing links to your student folder
- All of the items needing transfer except one are Microsoft Word documents.
- Look at the table below to see the files we will be downloading to your site
- For the Cascading Style Sheet file. This one is not a Microsoft Word document
- Click on the file name in the table above.
- It will load automatically into Notepad.
- Click "File" on the menu bar.
- Click "Save As"
- Select your student work folder for this project.
- Key in file name to save "style.css" - Watch the file name. It is case sensitive. Do not type the quotation marks.
- Click the Save button.
- Close Notepad application
- Microsoft Word Documents - all other files in the table
- If you have Windows 7 follow the instructions below.
- In the table above, click on the file name.
- Click "Save As"
- Make sure that you are saving into your student work folder for this project.
- File name to save is "gs.doc"
- The .doc exenstion is for Word Files from older Microsoft Word versions.
- The newer version of Microsoft Word will still be able to read this file.
- The newer version uses a .docx extension. and cannot read a file with the newer extension.
- If you do not have Windows 7, follow the same procedure. There are a few more steps to download the file
- You need to actually open the file in Word.
- When the file opens in Word, You need to use Save As to save the file to your student work folder for this project.
- Follow the procedure above and transfer all the files in the table to your student work folder.
- Now it is time to check our work
- Go into your student folder and double click on "indexlp.html" to see the page.
- What is missing?
- Header, Footer, Logo, Company Picture, VE logo for California, Company Logo and link to your company web site.
- Getting the missing parts
- We need to look at the code in the both the style.css file and the indexlp.html file.
- Make sure that you are still in your student folder
- Double-Click on the "style.css" file. It will open in Notepad.
- The file appears below in the scroll box
- Scroll down to the #header section
- background :url(cropped-office.jpg); is where the picture for the header is named.
- The picture is simply a .jpg picture called "cropped-office.jpg"
- You may choose to keep this one and then no changes need to be made for the header picture.
- If you want to use this header, go back to the step by Step tutorial
- click here: header picture. Then right-click the picture, click on Save As and save it in your student folder under the file name of "cropped-offfice.jpg"
- No changes need to be made to the style file since you are usung that file name as the picture header.
- If you choose to use a different picture
- Find a suitable picture and copy it into your student folder
- If it is a small image, you can repeat the image multiple times. See the lines for the footer under background-repeat: repeat-x;
- It takes some experimenting to find the right header that works with your class assignment web page.
- There are numerous clip-art packages available: The Big Box of Art and Art Explosion, for example.
- Make certain that when you save the name of the picture file that the name of the file is the same as the one specified in the style.css file.
- Remember to save the style file after adjusting images for the header. Keep the same name for the file.
- Now scroll down to see the #footer section of he style file.
- I used a minature picture of the school's mascot.
- Microsoft Paint has a great feature that allows you to adjust the size of an image.
- You will notice that the image is repeated horizontally. repeat-y would repeat the image vertically.
- After finding your image and reducing it,copy it into your folder and make the name of the file match the one indicated in the style file.
The style file is listed below.
- Now let's look at the indexlp.html file
- Double Click on "indexlp.html"
- Right click the Form
- Select "View Source"
- Your screen should look like the file listed below in the scroll box.
- Scroll down about 20 lines until you find the line that says <img src="cougar.jpg" height=200 width=250 border=3 vspace=10 hspace=10 align=center>Benicia High Cougars</TD>
- You want to insert the picture of your school's mascot and change the name of the school. Just replace"cougar.jpg" with a picture of your school's mascot.
- Replace your school's name and team name with where it says "Benicia High Cougars"
- Remember the name in the indexlp.html file must match the name of your school mascot file name.
The indexlp file
- Now we need to change the contact information
- Scroll down until you see the line <Center>Benicia High School
- Key in your high school name
- Look at the lines that directly follow. Change phone, address, city, state and zip code.
- Substite either your teacher's email address or the email address of your VE company
- Find the line <FONT face="Helvetica" color=chocolate size=6> <Center>Virtual Business Benicia High School>
- Put in your school's name here.
- Scroll down to the line
<Img height=200 width=200 src="5.jpg" border=3><BR><Center>Our company picture<//Center>
- Copy a picture of you company to your work folder.
- Use the file name of that picture in the indexlp.html page where is says src="5.jpg"
- Find the line <img height = 200 width=200 src="Company Logo.jpg" border= 3 ><BR><Center><A href="http://bhsve.com/the_cakery"</A>The Cakery Web Site<BR></Center></TD>
- This line contains a pictue of the company logo and a link to the company web site.
- Save a picture of your company's logo in your folder. Call it "Company Logo.jpg". It is case sensitive, so be careful. Make it match.
- The next part of that line contains the address of the Cakery's web site. <A href="http://bhsve.com/the_cakery"</A>The Cakery Web Site<BR></Center></TD>
- Substitute your company's URL here after the // A folder called called the_cakery was created in the domain name - bhsve.com
- When a user clicks on it, they will be directed to your company's web site.
- The cakery web site is no longer available
- Substiture the Cakery Web Site text with the name of your company.
- Find the line <TD><img height=200 src="VE Logo.gif" width = 220 border= 3 ><BR>
- Here is where the California VE logo goes on the page. Notice that it is a "gif" picture format.
- There is a newer version of this Logo. I believe that you can capture a copy of it on The VE Web site. Just right-click it and use "Save Picture As" method.
- The line that says <A href="http://www.virtualenterprise.org/index.aspx"</A>Virtual Enterprise WebSite
is a link to the VE web site
- If you want to keep this link on your classroom page, leave the line unchanged.
The Style File - Changing the Footer
- In the style file, find the line that states background:url(cougar2.jpg);
- Substitute your graphic here instead of cougar2.jpg
- This graphic can be almost anything. but keep it small and repeat it horizontally
- Remember to save the style.css file after making changes to it.
Day 3: Modifying the Company Page
Our company page
- The company page's main function is to be a link to all department pages.
- Find the line in the company.html page that states <FONT face=Helvetica><FONT color=chocolate size=6 > Virtual Business Benicia High School </Center >
- Key in the Virtual Business and the name of your school.
- Find the line that states <img src="Organization Chart.jpg" height=720 width=720 hspace=5>
- Copy your own company's organizational chart to your student folder. Rename it if necessary to match the file name above. Watch the case.
- Replace the line that states The Cakery is a bakery service that designs speciality cakes for companies and individuals for special events. We can create cakes for birthdays, anniversaries, office parties.
- Make this line about your company
- Replace this line with contact information about your school site
Benicia High School Phone (707) 747-8325 1101 Military West Benicia, CA 94510 <A href="mailto:veteacher@gmail.com">mailto: VE Teacher</A>
Day 4 Modifying the Accounting Department's Page.
Accounting Department Page
- Scroll back in this tutorial to Day 1 and click on the template for the web page.
- Click on the Accounting Page Link from the first page.
- Double Click on "accounting.html"
- Right click the form
- Select "View Source"
- You may also click in the text area box above, select the text, copy it then paste it into Notepad and save the file
- Make certain that you save the file under the name "accounting.html" in your student folder. Case matters.
- Your screen should look like the file listed above in the scroll box.
- Change the line below to reflect the name of your high school.
- <CENTER>Virtual Business Benicia High School <BR>Accounting
- If you want to change the department's description, do so at this time.
- You may also want to change the job descriptions of department menbers.
- Remember to save material into your student folder after making changes.
- Saving quarter tasks.
- Return to the original template next to Day 1 in the tutorial.
- Select link to take you to the Accounting Page.
- Click on the link for each quarter.
- Open the file
- Use "Save AS" to save the file in your student folder.
- Keep the same file name as before. Do not change it.
- Switch back into your student folder and test the accounting page links for quarter tasks.
- Test each link to see that it works. Note: These Microsoft Word files were saved as Word 97 - 2003
- The extension is ".doc"
- The newer version of Word uses a ".docx" extension. If you save it this way, you will have to modify the file name in the accounting page.
the line below and the other quarter tasks links
- <A href="q1accounting.doc" </A>Quarter 1 Accounting Tasks
- You will notice that this page of the web site is considerbly more complicated than the others
- It contains a way to select the actual assignments
- The code above the body is Javascript. Do not change any of the code between the beginning <Script> and ending </Script> tags.
The lessons are for each quarter starting with quarter 2 and ending through quarter 4.
- There are 9 weeks in a quarter,
- The file names reflect the quarter and week of these assignments. Do not change these file names
- For example a file called "accq3w4.doc" is the accounting department file for the third quarter fourth week.
- We need to copy these assignments to your student folder. There is actual information in these files for the second quarter
- To copy these files to your student folder, follow these steps:
- Use Scroll bar to see lesson
- Click on lesson
- A message box opens on your screen, telling you which lesson you selected
- Click OK
- Open the file or use the Save AS choice to put the file in your student folder
- Continue until all accounting lessons and forms are coppied into your student folder.
- Change the contact information at the bottom of the form so that it reflects your school.
- Save accounting.html in your student folder.
Day 5: Modifying the Administration Page
Our Administration Page
- We need to copy and paste the page into our student folder
- The administrative page appears below in the textarea box.
Select all the text above
CTRL C for Copy
Get into your student folder
Open Notepad or Notepad++
CTRL V to paste document into your folder
Save your file as adm.html
You need to change the name of the school. This line is just below the header.
If you wish change Department Descriptions and Jobs in the Administrative Department. Ask your instructor.
Change contact information about school. It is located on the bottom of this page
Save your web page. Keep the name the same "adm.html"
Go back top the template next to day 1 and click the link for the administrative page. We need to copy the quarter tasks and assignments into our student folder.
To copy the Administrative tasks
- Click on the link for Quarter 1 Adminisrative Tasks. Either use Save AS in Windows 7 or Open it and then use Save As
- Remember keep the same file name and save them into your student folder.
- Try the links out in your studnet folder to make sure that they all work.
Administrative Department Assignments
Click on the link and use either :Save As: into student folder or Open the file and Save AS in student folder.
Follow the same procedure to copy all assignments into student folder.
Check out the links in your student folder.
Printer Friendly Version - Week 1
Teacher Assignment Web Site - Week 2
Day 1: Sales Department Page
- Now we are going to use the template for the sales department and modify if for our own school.
- Go back to day one, Click on the template, select company Link, then select the Sales Department Link
- This page, as you can see, is very much like the Administration Department and Accounting Department pages.
- You need to change The school name in the box just below the header.
- The contact information needs to be changed.
- It is located just above the header.
- The quarter tasks need to be saved into your student folder
- The assignments need to be saved into your school folder
- Follow the same instructions as demonstrated above for Accounting and Administration Departments.
- Click on quarter task
- Click Save As and put it into student folder
- Use the same procedure for assignments.
- Remember when these documents are open, your instructor may want to modify them
- Just make the changes, use the same file name and save them into your student folder.
- Change job descriptions and titles if you wish
- Save and test
Day 2: Marketing Department
- Now we are going to use the template for the marketing department and modify if for our own school.
- Go back to day one, Click on the template, select company Link, then select the Marketing Department Link
- This page, as you can see, is very much like the Administration Department and Accounting Department pages.
- You need to change The school name in the box just below the header.
- The contact information needs to be changed.
- It is located just above the header.
- The quarter tasks need to be saved into your student folder
- The assignments need to be saved into your school folder
- Follow the same instructions as demonstrated above for Accounting and Administration Departments.
- Click on quarter task
- Click Save As and put it into student folder
- Use the same procedure for assignments.
- Remember when these documents are open, your instructor may want to modify them
- Just make the changes, use the same file name and save them into your student folder.
- Change job descriptions and titles if you wish
- Save and test
Day 3: Human Resources Department
- Now we are going to use the template for the human resources department and modify if for our own school.
- Go back to day one, Click on the template, select company Link, then select the Human Resources Department Link
- This page, as you can see, is very much like the Administration Department and Accounting Department pages.
- You need to change The school name in the box just below the header.
- The contact information needs to be changed.
- It is located just above the header.
- The quarter tasks need to be saved into your student folder
- The assignments need to be saved into your school folder
- Follow the same instructions as demonstrated above for Accounting and Administration Departments.
- Click on quarter task
- Click Save As and put it into student folder
- Use the same procedure for assignments.
- Remember when these documents are open, your instructor may want to modify them
- Just make the changes, use the same file name and save them into your student folder.
- Change job descriptions and titles if you wish
- Save and test
Day 4: Information Technology Department
- Now we are going to use the template for the information technology department and modify if for our own school.
- Go back to day one, Click on the template, select company Link, then select the Human Resources Department Link
- This page, as you can see, is very much like the Administration Department and Accounting Department pages.
- You need to change The school name in the box just below the header.
- The contact information needs to be changed.
- It is located just above the header.
- The quarter tasks need to be saved into your student folder
- The assignments need to be saved into your school folder
- Follow the same instructions as demonstrated above for Accounting and Administration Departments.
- Click on quarter task
- Click Save As and put it into student folder
- Use the same procedure for assignments.
- Remember when these documents are open, your instructor may want to modify them
- Just make the changes, use the same file name and save them into your student folder.
- Change job descriptions and titles if you wish
- Save and test
Day 5: Fundraising Department
- Now we are going to use the template for the fundraising department and modify if for our own school.
- Go back to day one, Click on the template, select company Link, then select the Fundraising Department Link
- This page, as you can see, is very much like the Administration Department and Accounting Department pages.
- You need to change The school name in the box just below the header.
- The contact information needs to be changed.
- It is located just above the header.
- The quarter tasks need to be saved into your student folder
- The assignments need to be saved into your school folder
- Follow the same instructions as demonstrated above for Accounting and Administration Departments.
- Click on quarter task
- Click Save As and put it into student folder
- Use the same procedure for assignments.
- Remember when these documents are open, your instructor may want to modify them
- Just make the changes, use the same file name and save them into your student folder.
- Change job descriptions and titles if you wish
- Save and test
Printer Friendly Version - Week 2
Teacher Assignment Web Site - Week 3
Day 1: Applying For Your Virtual Enterprise Job
- The on-line job application form is a link from all pages
- the form appears below
- Go back to the beginning of the tutorial and load this page.
- Just a few changes are needed to customize the form.
- You will need to change the name of the school and where the form is sent when the user clicks the submit button
- You may want to change the logo as well.
- A complete listing in Notepad appears below.
Find the following <Strong>Benicia High School Virtual Business</Strong><P> near the top part of the form
Change it to your high school instead of Benicia High School and save it.
The next line is responsible for displaying the logo <font size=4>Employment Application <img src="VE logo.gif" hspace=525 width=75 height=75 border=5 Align=top ><P>
Just substitute the name of your logo file in between the quotation marks.
Now we need to direct the application to an e-mail adddress when the Submit button is pressed.
Find the line just below APPLICANT INFORMATION.
|