Here’s the link: https://shanghai.nyu.edu/
With this week’s assignment, I focused on laying the foundation for my personal website, so that I can easily add more styling, backgrounds, and other interesting stuff later. I built a very simple website, with very little styling, that contains links at the top to various parts of my portfolio, a link to my About page, and links to the Chinese- and Japanese-language versions of my page. The links to my portfolio are currently empty (set to “#”), but will be implemented once I actually have something to show (i.e. after completing some projects for ComLab). The English Index page contains no actual content except the text “Nothing yet”; the Chinese one displays a similar message in Chinese, while the Japanese one displays an error message about not being able to reach the server, but in all three languages (just to mix things up). The About page has been set up and the link to it works, although the actual About section is still very basic, having been mostly copied from the week 1 assignment using only basic HTML. The About page looks very similar to the Index page, and contains the same set of links at the top (including the language links), something I plan to do with all the other pages once they’ve been added (although plans change…). I haven’t made my about page in Chinese and Japanese yet, so the About page link only works on the English page so far. The Chinese and Japanese pages look identical to the English version, except I added separate CSS files for each language (including English) allowing me to manipulate the fonts and anything else I desire for each language. These CSS files (en.css, zh.css, ja.css) are mostly empty for now, but can be expanded later as needed, and as a result each language’s page can contain a different font, different font colors, and other styling, which still retaining the same layout and (aside from the text of course) content.
That’s what the “finished” product, although I’d call it more of a framework at this point, looks like at this time. So how’d I actually build it? Well, I used the html page that we were given for Monday’s CSS assignment, with a few modifications. I had the idea of different language-specific versions of my site very early on, and to allow for this I added a specific div tag for each language: english, chinese, and japanese. I placed the appropriate tag (depending on the page’s language) just inside the body of each html page, to encompass all the text that would be actually displayed on the page, not including the page’s title and meta fields since these don’t need styling. I also added two two div classes, called language and lang-box, to serve a similar function to navigation and navi-box, or content and content-box. These boxes hold the links to the page in other languages, and a dead link to the page’s current language. I also added the other languages’ styling around those specific links, so that i.e. on the English-language page, the button that says “中文” to switch to the Chinese page will display in the font being used for the Chinese page, not the English one.
I also added two other div classes: current-navi and current-navi-box. They’re similar to the other ones but display only the name of the page you’re currently at, on the row below the links to other pages, to make it clear what page you’re on. I made the current-navi-box box and font sizes larger than the others to make this abundantly clear; if that doesn’t make sense, it will once you’ve seen the page. Each page has its own name in a current-navi-box, and the links to the other pages in navi-boxes. Therefore, each page only has one current-navi-box.
Another thing was that since I haven’t added any content to my page (aside from text in the About section), I commented out most of the content-boxes that were included in the html pages. I kept one for each page, to contain the “Nothing yet” message in the Index and the About section’s image and text. I modified the content-box class in the css layout file – since I only need one (at least for the time being), I made it span the width of the screen to allow the text it contains to reach across the whole screen, and made its height such that it goes nearly all the way down to the bottom, but allows you to see the footer without having to scroll (at least on my computer anyway). This way, the location of the header stays consistent no matter how much text or content you add – at least until you add more than the screen can handle and need to scroll, and at that point I’ll need to find a better solution.
One more thing: I’ve put a hidden link somewhere on the website. It’s embedded in an item of text, but doesn’t go to one of the other pages on my site. Hint: What part of the website stays constant, no matter where you go…and is right at the top?
That’s about it so far! I’ve got a solid framework in place to add content, style and interactivity in the near future. All I’ve got to do now is make sure I don’t botch the upload to the IMA server…
Screenshots below, of the four semi-completed pages so far:
