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
Wednesday, January 27, 2016
Post 2
Files LINK.
- Because of some issues using Targets in Dreamweaver CS3 we are going to use pages with no frames.
- Download a work in progress that can be used as a template here are the files LINK. Once you download it empty the root folder (if you want to keep your images don't remove them) of your project and copy the files in the zip.
-Now open the main.html file select Home from the top menu then in the bottom panel there is a link drop down, open it and select main.html and for target select _self, for the next menu item, Info, do the same but the link will be info.html, do the same for media and about.
- Now you have four pages with the same menu, you can manually add the links to all the pages or try to copy and paste the first menu to the other pages, you can choose.
- You can test the pages in the browser and you should be able to navigate to and from all four of them.
- Add your own backgrouds and images if you kept them form before, also add text for title, main description, information.
- In the Info page add some text about your website and some images.
-For your media page create a table of 3x3 and add images with descriptions under each image.
-Don't forget to align the images and text.
-Test them when you are ready.
- Because of some issues using Targets in Dreamweaver CS3 we are going to use pages with no frames.
- Download a work in progress that can be used as a template here are the files LINK. Once you download it empty the root folder (if you want to keep your images don't remove them) of your project and copy the files in the zip.
-Now open the main.html file select Home from the top menu then in the bottom panel there is a link drop down, open it and select main.html and for target select _self, for the next menu item, Info, do the same but the link will be info.html, do the same for media and about.
- Now you have four pages with the same menu, you can manually add the links to all the pages or try to copy and paste the first menu to the other pages, you can choose.
- You can test the pages in the browser and you should be able to navigate to and from all four of them.
- Add your own backgrouds and images if you kept them form before, also add text for title, main description, information.
- In the Info page add some text about your website and some images.
-For your media page create a table of 3x3 and add images with descriptions under each image.
-Don't forget to align the images and text.
-Test them when you are ready.
Wednesday, January 20, 2016
Post 1
Creating working space
-Open Dreamweaver
-Select Dreamweaver Site
-Give the site a name and address (make up one)
-Select “No, I don’t want to use a server technology”
-Press next
-Select “Edit local copies on my machine, then upload to the server when ready.
-Press next
-Select “none” from the first drop down.
-press next
-press done
Adding files to the project
-On the right side of the screen there is a tab labeled “Files”
-Right click on the root folder (starts with “site -...”) and select “New File”
-Name the new file “index.html”‘, this will be the intro screen or homepage.
-Add the main.html, media.html and contact.html pages as well
-Now we have 4 pages to work on.
Frames, navmenu an intro pages
-We will divide the pages into 2 frames, one for the pages and the other for the navigation menu
-To do this we will create frames.
-Modify->Split Frame Up
-Click on the frames and save them calling the top one introPage.html and the bottom navMenu.html
-click on the border to select the main frame and save it as index.html
-click on navpage area to select it
-click on page properties and add a background.
-do the same to the intropage
- add a table of 1 column and 3 rows
- Add text to top row
- Add image to middle row
- Add text to lower row
Sample background (click on it to get the original size version):
Sample main image:
Subscribe to:
Posts (Atom)