Megumi Takada and Meltem Ozcan
CS 110-01 April 2014
Client Name: Nan Nan, artist and founder of art school “Atutu”
Website Name: Nan Nan Art Studio
Contact person: Jennifer Henbest
Link to our website: click here
We had initially planned to have 9 pages, and changed some of the names/purpose/styling of them, leading to a total of 10 pages. There were many stylistic and structural changes, and these changes are summarized below.
Changes to homepage.html: For artistic purposes, we decided to make the size of the slideshow images 631px x 479px rather than 400px. For visual reasons, we decided that the homepage will be the only page with a especially different footer arrangement. Nan Nan's contact info line is not included, and the other line is taken out of the main content box.
Changes to about.html: Instead of about.html, we used about_nann.html. In addition, we added the drawing of the long line of people above and below the text and the picture of Nan Nan for aesthetic reasons.
Changes to inspirations.html: Since we used a Google Map in the contactUs.html page we decided not to have the Myanmar map. Instead of having images with a height and width of 200px floated right or left, we used the myanmarTopBar.js to generate one image at the top of the page depending on the time of the day.
Changes to artwork_paintings.html:Instead of 30 images per page, we included 22 pictures upon our client Nan Nan's wish. The background is not white like what was intended, because we realized that our current off-yellow background color is more appealing and brings out the colors in the paintings without tiring the eyes of the user. The background-color of each box in the Artwork galleries and the larger info box that opens up when the thumbnails are clicked on do have a white backgrounds, however, with the aim of preventing distraction. The small boxes are of size 238px x 254px and the pictures have a set width of 200px. Although we had intended to include 4 pictures on each line with a menu bar on the top, our change in the position of the menu bar allowed for 3 pictures to fit into one row. We decided to only have shadows around the box on hover. These shadows are in brown rather than gray or black as intended, because we think it visually fits with the artwork. When the image is clicked, the enlarged version of the picture (400px x 400px) appears in an info box (570px x 530px). The half transparent overlay covers all of the page, instead of just the gallery as we had intended. Clicking on the overlay or clicking on the close icon (another feature newly added) undoes the enlargement of the picture and hides the info box.
Changes to artwork_design.html:The changes to this page are identical to the changes to the artwork_paintings.html page mentioned above, with the exception of the inclusion of 19 pictures.
Changes to atutu_aboutTheSchool.html:The logo of the school was not included, because we realized that it would be repetitious to have the logo both in the menu bar and this particular html page. Instead of having two images of 200px x 150px at the top of the page, we instead used the randomImagesTopBar.js to randomly generate 3 images on load to give more variety while not putting all pictures on the page itself. The image bar consisting of three images is 800px x 193.3px. We also decided to add a photograph of the class schedule for the users' convenience.
Changes to atutu_childrenArtwork.html:Although we had intended to use the same layout for all the artwork pages (artwork_paintings.html, artwork_design.html, and atutu_childrenArtwork.html), we realized that the Children's Artwork page should have a more playful look to it. Thus, we tried to make the web page very colorful by including the Atutu Art School logo figurines between the artwork and creating a gallery that would be visually appealing. We also decided not to have a clickable info box for each picture, because the artwork is already quite easy to see.
Changes to intended CSS styling:
All of the following files are gathered inside a folder 'beta'.
List of Files and Folders
|about_nann.html||Brief biography about Nan Nan and the work that she does||Meltem|
|about_inspirations.html||Information on Myanmar’s art and culture||Megumi|
|artwork_paintings.html||Nan Nan's paintings||Meltem|
|artwork_design.html||Nan Nan's design and crafts||Meltem|
|atutu_aboutTheSchool.html||Information on the school and classes||Meltem|
|atutu_childrenArtwork.html||Information on the children and display of their artwork||Megumi|
|contactUs.html||Information on contacting and supporting Nan Nan and Atutu||Meltem|
|headerLogo.png||Logo for the header: children's drawing edited on Photoshop||Megumi|
|nav.part||Contains the html coding for the menu bar that is consistent among the pages.||Meltem and Megumi|
|mainfooter.part, rightfooter.part||Contains the html coding for the footer that is consistent among the pages.||Megumi|
|processform.php||A php file used in the volunteer page that stores information provided by the user, sends the information to Nan Nan, and sends a confirmation email to the user.||Megumi|
|randomImagesTopBar.js||An additional js that randomly chooses a set of three images and makes it appear on the top of some pages.||Megumi|
|maynmarTopBar.js||An additional js that chooses one image out of three images that is included on the top of the inspiration page.||Megumi|
|styling.css||The CSS file containing all styling for the website||Megumi and Meltem|