Jan 20 - 'About us' Modification

Me and my client have been undergoing discussion this week, and we have completed our modification of our 'About Us' webpage.

Using email, me and my client have discussed how we can modify our webpage:

From our discussion, we decided to use a 'scroll box' and change the color scheme of the text box. Also, using rounded edges for the photo would also increase the visual appeal of the website.

First of all, we changed the text box for the 'About Us' webpage.

We used the word attributes from the 'Contact Us' webpage (font-family). 'Overflow: auto' creates the scroll box. 'background-color: white' creates a white background for the black text, so that it can easily be read. We also moved it slightly further down by 20px using 'margin-top'.




We then added a title to the webpage as well. This is because it would inform the user which webpage they are on. To do this, we put <center> tags inside a div, and used the div to give the title its attributes:

Using percentage for the margin and width attributes makes sure that the width will always fit the monitor of the user. Using 'border-bottom' also gives the title an underline.



Finally, we rounded the edges of our picture to finish modifying the webpage.

To round the edges of the picture, I used 'border' and 'border-radius' to create an invisible border that will round the edges of the picture. I learnt this by experimenting through different ways to get this task accomplished. First of all, I tried to round by using photoshop or other photo editing software, but my client told me not to do so this way because if she wants to change the picture, she would need to also round the edges of the other picture using photo editing software as well (which would be inconvenient). Instead, we experimented with other methods and finally used this method.

Here is what the modified webpage looks like now:

We will modify my final webpage(s) next lesson, after discussion with my client.

Jan 8/12 - Contact Us modification

Over the past few days, me and my client started to work on my Contact Us page, and looked at some other pages for ideas. When going through previous blog posts on existing solutions, we found the "Xava Interiors" contact us page to be rather interesting. The emphasis on the maps and the address details on the bottom gives the user a clearer view of the map location.

In order to emulate this, we changed the height/width of some things in the code. For the iframe (google maps), We set the width to 70% (the exact size will change according to the monitor size, or pixel of monitor the user views it on. However, it will always take up 70% of the width of screen in the browser). Also, We set the margin for left/right to be both 15%, therefore centering the iframe. It also makes sure that it is the only content in the row, excluding things set as position:absolute. 

Using the webpage http://www.xavainteriors.hk/contact.html as inspiration (as mentioned above), the address details will be put at the bottom of the iframe. I used similar width attributes for the address details to the iframe, changed the font and word sizes, and border settings.

The font I used was 'trajan pro', or 'times new roman' if the user didn't have that font installed. I changed the font size to 13px and the letter spacing as 2px, to make sure it doesn't jumble up. The height is set as 230px so that it can accomodate all the text. For the width, and margins, I set it to the exact ones used for the iframe. I also only set a border for the top side, because I discussed with my client to not use a border. Instead, the top border is used as a line for the address title, as seen here:

For each paragraph that separates the different address details, I also changed the margins for them so that the distance between them has been reduced.

For the title of the address (Contact details), I used <center> to create the title. Here is the HTML and CSS code:

This makes sure that the words will be in the center of the row, and won't be placed on the left or right.

The title uses the same font as the address details, with a grey color. The margin for top is to make sure it doesnt stay too close to the iframe, and make it look too 'squished'. Me and my client decided to use 5px for letter spacing because we agreed it looks best after experimenting with different pixels for letter spacing.

After doing all the modifications that enlarged various parts of the webpage, we realized that the side buttons for social media looked too small in comparison to the website. Therefore, we looked at modifying the sizes of the buttons, and their spacing. The old size for the buttons were 90px * 90px, but I changed them to 100px * 100px, and also they have 80px between each one using margin-bottom for the top 3 buttons.

We only used margin-bottom for the first 3 buttons, because me and my client only want the buttons themselves to have 80px between them. If we set the bottom button to also have 80px underneath it, it will create unnecessary space underneath it.

We also moved the buttons down more, by changing the position:absolute top from 100px to 150px. This way, it also reduces the 'squished' look.

Finally, we also created a title for google maps. To make the website look better and make use of the extra space, we decided to make the title flip sideways so that its on the left side of the google map iframe. At first, we decided to do this by using an image. However, my client decided against this because it would be difficult to edit the text. At first, I didn't know how to do this, so I found a tutorial on the internet that would teach me to flip text on CSS (http://davidwalsh.name/css-vertical-text). It teaches me to use "transform" attribute to flip the text.

The transform attribute tells the text to rotate a certain degree, and the transform-origin tells us how to rotate the page.

We used this to help me with creating the title. First of all, We created a <div> for the title which was put in <center> tags:

For the CSS, I used the code that was in the tutorial:

Because the transform is done in the middle of the <div>, We needed to use "left: -3%" so that it would be placed alongside the iframe. The same goes for the "top: 330px". It's width is set as 450px, which is the height of the iframe so it can be aligned with it. The rest of the attributes are copied from the title for the address details.

After this, we finally completed our webpage for "contact us". Here is what it looks like now (top and bottom, since my monitor cannot see the whole webpage without scrolling):

Now that we have finished making this webpage, I will discuss with my client using email for modifying the final webpages to finish our website modification.

Jan 3 - Homepage Modification

Due to the time I needed to spend on revising for my mock exams, I didn't have time to work on my ICT coursework. However, today, I continued to modify the homepage of me and my clients website. First of all, me and my client found an image on the internet to use as a background: http://images2.alphacoders.com/564/56492.jpg. To put this image onto my website, I changed the body code in css to use an image for the background:

The background color has been changed to background-image, and I saved this file as a different name so I can keep both variations of the modified homepage.


I then showed both designs to my client, and we both agreed that the plain background would be better, since we agreed the design looked too 'confusing' and 'jumbled'. However, after looking at other images that could be used as a background, we stumbled upon this image that would look good as a background: http://th00.deviantart.net/fs29/PRE/f/2008/061/8/8/Background_for_my_Website_by_aisu_isme.png. This website background has a simple background and also looks simple. Compared to the graffiti background, it looks alot better. Here is a comparison:

Me and my client agreed that if we used this graffiti image as a background, it might not let the user see those buttons on the bottom clearly.

Instead, we came upon this image that blends both black and white as the background while finding an alternative background. We agreed that this image looks alot better and we decided to use it for our website. However, there was a slight error when I added this image to the website. The image would repeat itself since it isnt wide enough, as seen by the far right of the webpage. In order to prevent this, I would need to set the width of the background image. To do this, I added an attribute to the code:

I added the background-size attribute to make the image fit the website size, no matter what monitor size is used to view the website. This fixes the overlapping of the image and now the website looks like this:

The website is now alot more visually appealing than our previous edit of the homepage. I will continue to work on other parts of the website soon, to transfer this style into other sections of the website.