In this lab, I created a homepage for my website. First I opened up Dreamweaver by clicking on the program. Secondly, I created a new document in Dreamweaver by clicking New to OK. Thirdly I typed in the code for my HTML document. I typed in the HTML tags, head tags, body tags, meta tags, title tags with "Wei Jian Zhen's Homepage" in it, and link tags that show my favicon and stylesheet I made for the page. I also placed inside the body inside div tags the heading tags which inside says my name, Digital Design, date, and title. I typed in div tags inside my body tags. Inside one of the div tags, there's a table tag with tr, th, and a tags that link to another website/webpage. That div tag with the table is the navigation bar for the homepage. After that, I had another div with p tag which shows on the website in big bold letters "WELCOME TO MY WEBSITE!". All content was centered using the stylesheet/center attributes. I saved my document and uploaded it to the servers.
For my subpages of my homepage, I had the navigation bars on the top and the rest of the content at the bottom. I had a table with image tags and a href tags linking my labs and projects to and from the subpages of my homepage. I also had a footer for each subpage to give credit to the author of the image and to myself. Knowing how to make a homepage is important and beneficial to a web designer because it allows the web designer do its job effectively and can enable them to do tasks for their client.
My homepage (May get future updates): http://techteach.us/Web2020/ZWeiJian/Index.html
Sunday, June 9, 2019
Junior Achievment Community Service
During a trip in May, I went on a mandatory trip in which I taught 1st graders in an elementary school about finance and how to advertise a business? To prepare for this, I rehearsed and practice being a teacher with the lesson plan and worked together with my teammates. We talked about how it would go and what we would do in any and all occasions. At the date of the trip, I went last as the lesson plan and my teammates instructed me with the last lesson. I helped out my teammates with their lessons like holding up materials or helping out students during the lesson. When my lesson began, I first introduced myself. Secondly, I talked about business and taught them about advertisement. Thirdly, I did a skit with a teammate to show the students how to start a business and progress with the lesson. We talked about a pet holding store for the students. I then segwayed into asking questions on how to advertise a business like the pet holding store. After a few questions and responses from the students, I proceeded to make them do the activity. The activity was to have students solve math problems so that they can color in a picture of an animal. After the activity, my teammates and I began to wrap up the lesson and gave out the diplomas to the students. At the end, we all said our goodbyes ad left to go back home. I taught the students because it was mandatory and I wanted to teach the students to expand their knowledge of the world around them. I learned that you had to engage with the students more and know the material better to teach students about a topic. I envision improving my leadership skills with this experience. One advice I'll give is that you need to be active with your students a lot to engage the min the topic.
Project 2 Teacher Appreciation
During the month of May and June, I have been developing my teacher appreciation website on and off about Mr. King, my previous social studies teacher. To start the teacher appreciation website, I first opened up Dreamweaver/Atom.io and created 5 new files/pages/documents. I wrote the basic html code for the documents. I wrote <!doctype html>, <html lang="en">, <head> tags, <meta> tags with the meta information of the website, <title> tags with the title specific for that page, <body> tags, and <html> tags. I wrote <link rel> tags to link my favicon and CSS style sheet onto all 5 documents. For the first page, I named the file index.html and the title, "homepage". Inside the <body> tags, I first typed in <div> tags with the class name of "page-container". Inside the page-container <div> tags, I typed in another <div> tags with the class name of "content-wrap". Inside the content-wrap <div> tags, I typed in <nav> tags to set up for a navigation bar. Next I typed in <div> tags with the class name of "navbar". Inside the navbar <div> tags, I wrote <div> tags with the class name of "dropdown". Inside the dropdown <div> tags, I typed in <button> tags for a hamburger menu. After that, I typed div tags with the class name of "dropdown-content" and id name of "myDropdown". After that, I linked all the pages inside the hamburger menu inside the dropdown-content <div> tags using <a> tags. Afterwards, I typed in <div> tags with the class name of "sideBtn" below the dropdown-content <div> tags. I linked all the webpages again. The sideBtn <div> tags are the buttons next to the hamburger menu. With that, the navigation bar is done. The navigation bar is present in all pages of the teacher appreciation website. After the <nav> tags, I placed a <br> tag to make a line break for the content. Then, I placed <section> tags after the <br> tag and placed in <center> tags. I typed in <div> tags inside the <center> tags. Inside the <div> tags I typed in <table> tags. Inside the <table> tags, I typed in <tr> tags. Inside the <tr> tags, I typed two <th> tags. Inside the first <th> tags, I typed in <div> tags with the class name of "mainContent". Inside the mainContent <div> tags, I typed in <h1> tags, <h6> tags, <p> tags, <img> tags, and <br> tags describing the specific topic at hand. For the second <div> which has a class name of "sideInfo", the inside content has <h1> tags and <p> tags iterating a history fact. Now I created the main content of the page. Secondly, I created a footer to represent the copyright. I did this by first making <section> tags and inside those <section> tags, I typed in <center> tags. Inside the <center> tags, I typed in <footer> tags to make the footer with the id name of "ft". Next I used <p> tags, <a> tags, and <br> tags inside the <footer> tags to make the content inside the footer and cite copyright. At the end of the <body> tags, I wrote JavaScript for all 5 pages for the navigation bar. I typed in <script> tags and inserted the following code:
/*Credits to www.w3schools.com for the javascript code necessary for the dropdown menu.*/
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
Now the first page of the teacher Appreciation website is complete and parts of the other pages are completed as well. For the second, third, and fourth page, I pretty much typed in the same code from the first page. I tweaked the content for the second page for the topic of Mr. King's Biography. The title was Biography and the file name was Page_1.html. For the third page, I typed in Page_2.html for the file name and Subject as the title. I tweaked the content as well. For the fourth page, I typed in more <p> tags and <img> tags to showcase trivia and data about Mr. King. The title was named Trivia and the file name was called Page_3.html. For the fifth page, I had the navigation bar and footer already created. Inside the <body> tags I typed in <p> tags, <a> tags, <h1-h6> tags, and <br> tags to credit and cite all sources and copyright. Now the entire website is completed. The website will be uploaded in the near future. I did this website because it was a project from my computer science teacher, Ms. Ramirez. I learned that I still need to improve my skills as a web developer. I envision that I will create better websites with the new tags I learned like <section> tags and <nav> tags. One advice I will give is to organize your code better because jumbled up code might confuse you when programming.
/*Credits to www.w3schools.com for the javascript code necessary for the dropdown menu.*/
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
Now the first page of the teacher Appreciation website is complete and parts of the other pages are completed as well. For the second, third, and fourth page, I pretty much typed in the same code from the first page. I tweaked the content for the second page for the topic of Mr. King's Biography. The title was Biography and the file name was Page_1.html. For the third page, I typed in Page_2.html for the file name and Subject as the title. I tweaked the content as well. For the fourth page, I typed in more <p> tags and <img> tags to showcase trivia and data about Mr. King. The title was named Trivia and the file name was called Page_3.html. For the fifth page, I had the navigation bar and footer already created. Inside the <body> tags I typed in <p> tags, <a> tags, <h1-h6> tags, and <br> tags to credit and cite all sources and copyright. Now the entire website is completed. The website will be uploaded in the near future. I did this website because it was a project from my computer science teacher, Ms. Ramirez. I learned that I still need to improve my skills as a web developer. I envision that I will create better websites with the new tags I learned like <section> tags and <nav> tags. One advice I will give is to organize your code better because jumbled up code might confuse you when programming.
Subscribe to:
Posts (Atom)