Wednesday, February 17, 2016
Wednesday, February 10, 2016
COMPUTER CLASS FINAL TEST (STEPS TO FOLLOW TO COMPLETE THE TEST)
Computer Class Final Test (Updated)
You can sit down with other student and work together in the test, you can use this blog to get information.- Go in the class and find a computer with dreamweaver and internet working, it is your responsibility to find one fast I will only give you 5 MINUTES.
- I will give the steps that you can follow to pass this test. If you do the extra work I will point out, you will get extra points
- SAVE YOUR WORK (DRIVE D:/M3/<yourFolder>) AS YOU GO, its your responsibility to save and make sure that a computer crash will not stop you from finishing your test.
STEPS (DO THIS TO PASS THE TEST):
- Open Dreamweaver
- Create a workspace (click on Dreamweaver Site...)
- Give it a name and set its location to D:/M3/<yourFolder>
Creating three pages.
- On the right panel in the "file" tab right click on the root folder and click on "New Folder"
- There will be a new html file created, rename it to Home.html
- Add two more pages called Main.html and About.html
- Save
Adding a table to each page for the navigation menu
- Double click on Home.html to open it
- Make sure you are in design tab (its located in the upper left side of the window opened for Home.html)
- Click on the Home.html window to make sure its selected
- Click on Insert->Table
- Set the table width to 100 percent (make sure you select "percent")
- Set the table to 1 row and 3 columns
- Click done
- Select the first cell in your table and type "Home" do the same for the other cells and type "Main" and "About"
- Select the entire table and copy paste it to the other two files (Main.html and About.html)
- Save
- Go back to Home.html
- Select the text "Home" from the navigation menu (table)
- On the bottom there is a panel with Properties
- In the panel look for "Link", now you can use the drop list to choose Home to link the text "Home" to the Home.html page, if you don't see Home in the list, use this little target icon next to the list, click and hold the mouse button down while you drag it to the Home.html file in the File Tab.
- Below Link there is another drop list called Target, choose "_self"
- Now do the same with "Main" and "About", link them to the Main.html and About.html files and set their targets to "_self" as well
- Save
- Do the same in the other two pages (Main.html and About.html
- Make sure you test your project using File->Preview in Browser->IExplorer
- If it all works fine at this point you have a pass grade, once done call me and I will grade your work, you will have to show me something you did (for example how you added a link or a table, or how to add new files.
- Add text to your pages
- Add backgrounds
- Add some images
Thursday, February 4, 2016
OCCUPATION AND TECHNOLOGY LESSONS!! get your pdf copies of your OccTech lessons here.
M3 OccTechLessons LINK.
*********************
Wednesday, February 3, 2016
Post 3
Adding google maps.
- To add a google map to your about page, add a table, I used a 3x3 table.
- Switch to code view
- In the head of the html (between <html></html>) add this code:
<style>
#map {
width: 500px;
height: 400px;
}
</style>
- Go to the code view and add this code in the middle cell <td>:
<td align="center"><div id="map" ></div></td>
- Finally add this code inside <body></body> it can be at the end of it:
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 12.893785, lng: 100.902102},
zoom: 8
});
var marker = new google.maps.Marker({
position: {lat: 12.893785, lng: 100.902102},
map: map,
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
-Test your page.
- Play around with the coordinates, you can change them to point anywhere, you can get the lat and lng (latitude and longitude) in the actual google maps site.
Here are the files in case you want to use them LINK
- To add a google map to your about page, add a table, I used a 3x3 table.
- Switch to code view
- In the head of the html (between <html></html>) add this code:
<style>
#map {
width: 500px;
height: 400px;
}
</style>
<td align="center"><div id="map" ></div></td>
- Finally add this code inside <body></body> it can be at the end of it:
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 12.893785, lng: 100.902102},
zoom: 8
});
var marker = new google.maps.Marker({
position: {lat: 12.893785, lng: 100.902102},
map: map,
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
-Test your page.
- Play around with the coordinates, you can change them to point anywhere, you can get the lat and lng (latitude and longitude) in the actual google maps site.
Here are the files in case you want to use them LINK
Subscribe to:
Posts (Atom)