Creating the Highlighted Tab

At the top of my webpage, I have five tabs that are home, biography, academic, resources and contact. I started creating these tabs with Photoshop by setting the same length and width for each tab. Then, I adjusted the colors for the tabs using the eyedropper feature which selects the nearest and closest color to my theme color, pink. Next, I selected a font and created borders around the image. After saving and uploading these images into 2.0 Files, I recoded each tab with a link to my other pages. I searched different codes online about creating highlights and discovered a website that changed the opacity of the original image using “Javascript”. I decided to use that highlighting technique and copied and adjusted the coding with the tab images. At first, the opacity was too light therefore I couldn’t see the tabs, so I changed the opacity to 60%. The change to the opacity greatly helped and now you can view the tabs clearer.

My website makeover - Idea

If you have been to my website recently, you may realize that my overall theme or look has changed. I have decided to use tables to help organize the look of my page. These tables were located on the professor’s website under “Tables html demos” which featured a demo page and a blank table guide. The sample that I corresponded with my website was the demo “Canyon”. I basically copied the html into my html page and adjusted the coding to my preference which wasn’t an easy process. I realized the demo page used a css file in the body section of the coding. I wasn’t sure what a css file was but basically it is simply a way of keeping track of your data without repeating the codes on several pages. From what I researched on the internet about a css file, you create a document using notepad and insert special coding unique to css like font, images, tables, or a type of style and save the document as css. Afterwards, you upload the document and code the css file into your html page. I tried this method a few times but was unsuccessful about figuring out this feature. Therefore, I decided to stick with the originally html coding.

Switching to 2.0 Files

The process of switching files to the new “2.0 Files” was challenging for me as a PC user for Windows XP. I started by downloading the FTP software to transfer out my documents from my previous hosting system to my desktop. Next from my PC, I went to Start -> my network places -> add a new network place ->appears (add a network wizard) click next -> choose from another network location (click next) -> type in website (2.0 Files)-> enter password (if needed) -> appear a folder in my network places. Then I clicked on that folder and uploaded all my documents (for my website) there. Whenever I need to work on my page, I would right click and open the html page with notepad. Notepad would automatically switch the page into html coding where I can start working on my website.