Lab 13 Reflection
Lab 13 involved turning our DD portfolio online into a genuine looking website. This website needed to have a homepage, page that has links to all labs, page that has links to all projects, and a unifying stylesheet all pages are linked to. The reason for having a unifying stylesheet is that websites must have a consistent look so the user knows they are in the same site. If web pages of the same site have wildly different styles the user is confused about whether they're in the same site or not. The <link> tag was a crucial part of this lab, letting me link all pages in the site to the main stylesheet.
I started out by creating the home page, which I named index.html and saved in the DD folder outside of any other folder inside the DD folder. I named and saved it this way as when the browser opens up my website it automatically loads the index or home page without having to click a link to do so. The home page needed to have navigation bars that would take the user to other pages. This involved making tables and using the <a> tag to make entries in the tables hyperlinks to other pages. I put all the navigation bars necessary to be able to access other pages in the site but no styles yet. I needed to create a main.css file for the home page, and other web pages in the site, to link to. This way I don't need to constantly copy and paste a single CSS, rather, have a single file I can easily link all other pages to. Not only does it make styling the website easy but helps give a unifying look to the site with the same style being applied to all pages linked to it. Once I had the main.css created I linked the CSS to the home page using the <link> tag with rel being stylesheet, type being main/css, and href being the relative path to the file. I started stylizing the homepage from there. Next came making the labs page and projects page. These pages needed to house links to all labs and projects, respectively. This was achieved by again using the <a> tag to create hyperlinks to each lab and project. The labs and project pages were linked to the main.css using the <link> tag just like how the home page was linked to the main.css. Once I had created the labs and project pages I made sure not only they linked to all labs and projects but that the home page could link to them. Finally came stylizing each lab to make it look like the rest of the site. Up to now each lab had no style or a unique style but with this lab all other labs need to have styles changed to look like the rest of the site. This was done using the <link> tag to link up the web pages of each lab to the main.css file.
These skills are important for a web designer since creating unity in a site is very important as well as a good user navigation. We learned how to easily make a site look the same across all its pages; it's just a matter of linking a web page to a main CSS. This knowledge is important since a website must look the same no matter which page you're on to ensure the user knows they're on the same site. While it's tedious to copy and paste the same CSS into every single webpage linking up to a single CSS file eliminated the need to do so, making it less of a hassle to stylize an entire website and saving time that could be put else where. Thus knowing how to link every webpage to the same stylesheet is important. We also made sure the user could navigate to every page in the website. If a web page in a site cannot be accessed it might as well not exist since no one can see it. In this lab we made sure everything was accessible by creating navigation bars from tables and hyperlinks and creating entire web pages dedicated to directing the user to other webpages. We made it clear where the user was and where the links would take them. This helps the user experience by making it possible for the user to navigate anywhere they want and easily figure out how to do so.
I started out by creating the home page, which I named index.html and saved in the DD folder outside of any other folder inside the DD folder. I named and saved it this way as when the browser opens up my website it automatically loads the index or home page without having to click a link to do so. The home page needed to have navigation bars that would take the user to other pages. This involved making tables and using the <a> tag to make entries in the tables hyperlinks to other pages. I put all the navigation bars necessary to be able to access other pages in the site but no styles yet. I needed to create a main.css file for the home page, and other web pages in the site, to link to. This way I don't need to constantly copy and paste a single CSS, rather, have a single file I can easily link all other pages to. Not only does it make styling the website easy but helps give a unifying look to the site with the same style being applied to all pages linked to it. Once I had the main.css created I linked the CSS to the home page using the <link> tag with rel being stylesheet, type being main/css, and href being the relative path to the file. I started stylizing the homepage from there. Next came making the labs page and projects page. These pages needed to house links to all labs and projects, respectively. This was achieved by again using the <a> tag to create hyperlinks to each lab and project. The labs and project pages were linked to the main.css using the <link> tag just like how the home page was linked to the main.css. Once I had created the labs and project pages I made sure not only they linked to all labs and projects but that the home page could link to them. Finally came stylizing each lab to make it look like the rest of the site. Up to now each lab had no style or a unique style but with this lab all other labs need to have styles changed to look like the rest of the site. This was done using the <link> tag to link up the web pages of each lab to the main.css file.These skills are important for a web designer since creating unity in a site is very important as well as a good user navigation. We learned how to easily make a site look the same across all its pages; it's just a matter of linking a web page to a main CSS. This knowledge is important since a website must look the same no matter which page you're on to ensure the user knows they're on the same site. While it's tedious to copy and paste the same CSS into every single webpage linking up to a single CSS file eliminated the need to do so, making it less of a hassle to stylize an entire website and saving time that could be put else where. Thus knowing how to link every webpage to the same stylesheet is important. We also made sure the user could navigate to every page in the website. If a web page in a site cannot be accessed it might as well not exist since no one can see it. In this lab we made sure everything was accessible by creating navigation bars from tables and hyperlinks and creating entire web pages dedicated to directing the user to other webpages. We made it clear where the user was and where the links would take them. This helps the user experience by making it possible for the user to navigate anywhere they want and easily figure out how to do so.
Comments
Post a Comment