As a group we have discussed, how we are going to display the client’s images on our background tables. We can up with several ideas:
1. Have several images, on the table and then have the rest in boxes underneath the table to show the rest.
2. The next was to have a categories table underneath, that when you click on a category, such as colour, then the images of the category would appear on the table. And when you clicked on a different category, then the images of that category would appear and the others would disappear. Then as you hover the images on the table they would grow and have a lightbox affect on them.
3. The other idea that I had was to have a CSS scroller underneath the table to display all of the images, and then on the background table have a few images defining the category. The customer looking at the site would then be able to scroll through the images and select the one they want.
As a collective group we have decided to go with idea, two, and have the table with a few images on the background table and then have a categories table underneath with the different categories, such as: colour, design, size.
When you hover then image on the background table then there would be a lightbox affect that appears around the image and increases the size of the image to give customers a better look.
We will achieve this affect by:
- content DIV
- lightbox DIV
- background_table DIV
- table_image DIV
Having the content DIV, with the lightbox DIV, this is set to display none and has a background of transparent black. This then has a DIV in it which is the background table, and the client’s images will be put into UL (unordered list).
The images on the table will be set to a size percentage and then on hover the lightbox DIV display will be set to true showing it, and the client’s image percentage will increased in size and will be wrapped by the lightbox DIV.
We will get the background or the lightbox DIV by, creating a small Photoshop file with a fill of black with a opacity of 40% and then save this file as a .png which supports the transparency and then this will be repeated through CSS to cover the whole DIV
Lightbox {
Background: url(../images/ lightbox_bg.png) repeat-x;
Width: 000px ;
Padding: 0px 0px 0px 0px;
Margin: 0px 0px 0px 0px;
}
Friday, 27 November 2009
Tuesday, 17 November 2009
Development: Coding
I have coded the base HTML for the site, all i now have to do, is get the finished Cleaned Text from Andy, and i will be able to add it into the different web pages. This is a blank code page, with filler in it to show where headers and text is.
This is a piece of code that a forgot to add in, it is meant to be above the style sheet code.
This is a piece of code that a forgot to add in, it is meant to be above the style sheet code.
Development
Today we delegated tasks for people in the group to do. We also discussed layout ideas, pages, styles, and finalized DIV ID names for CSS and HTML.
We also decided to have on a layout of the page, we came up with two ideas and made a group decision on which one we thought would look best.
Initial Layout Design:
Finalized Layout Idea:
These are the Tasks that we delegated:
Each Page:
We also decided to have on a layout of the page, we came up with two ideas and made a group decision on which one we thought would look best.
Initial Layout Design:
Finalized Layout Idea:
These are the Tasks that we delegated:
- HTML Coding - Aarron
- CSS Coding - Matt, Dan
- Illustrations - tables - Alex D
- Putting photos into AI - Matt, Pete
- Exporting Web Graphics - Pete
- Emailing Client - Aarron
- Cleaning the Text - Andy
- Designing the layout - Everyone
- Choosing a design - Everyone
- Working with logo - Integrate into design (everyone)
Each Page:
- 1x h1
- Nav listed (nested with h2)
- H2
- H3
- Wrapper
- Header
- Navigation
- Content
- Footer
This code is for blind people and the JAW reader. These lines of code enable to person to skip straight to the text instead of having to listen to all the links. We display it as none in the CSS so that everyone else that is viewing the web page will not be able to see it but the JAW reader will recognize it.
HTML for Content Jumper:
<body>
<div id="contentjumper">
<a href="#content">Go straight to content</a>
</div>
CSS of the Content Jumper:
#contentjumper{
Display:none;
}
Tuesday, 10 November 2009
Searched: Gifts-Enhancements, Display.
These are the top 10 results in Google
1. http://www.displaygifts.com/
2. http://digg.com/odd_stuff/Golf_Gifts_Gallery_Golf_Ball_Display_Cabinet
3. http://www.giftshopmag.com/display_ideas_for_gift_retail
4. http://www.wvnet.edu/banner/preview/alumni60.html
5. http://www.freepatentsonline.com/7552553.html
6. http://platinumgifts.co.uk/product-view.html?p=530
7. http://www.preciousmomentsstationery.com/p173298/picture-collage.html
8. http://www.become.com/acrylic-tier-display
9. http://driver.wareseeker.com/free-personalized-gifts/
All of these sites for this search were not relevant
1. http://www.displaygifts.com/
2. http://digg.com/odd_stuff/Golf_Gifts_Gallery_Golf_Ball_Display_Cabinet
3. http://www.giftshopmag.com/display_ideas_for_gift_retail
4. http://www.wvnet.edu/banner/preview/alumni60.html
5. http://www.freepatentsonline.com/7552553.html
6. http://platinumgifts.co.uk/product-view.html?p=530
7. http://www.preciousmomentsstationery.com/p173298/picture-collage.html
8. http://www.become.com/acrylic-tier-display
9. http://driver.wareseeker.com/free-personalized-gifts/
All of these sites for this search were not relevant
Searched: Table Ornaments + Paper + Card
These are the top 10 results in Google
1. http://www.encyclopedia.com/doc/1G1-20463596.html
This site is not relevant to paper cutting it is a directory. It speaks about rice paper ornaments but has nothing to do with them inside.
2. Two Peas in a Bucket
http://www.twopeasinabucket.com/cg_display.asp?cmd=display&seed_id=25629
This site is about paper cutting, but it is for 2-D cutting. They have different themes, with a slideshow of their recent work to show off what they can do.
3. http://ideas.thenest.com/100-days-of-holiday/decorating/Articles/sabrinas-paper-ornament-diy.aspx
This site is not relevant, but it does have an article within about how to make a certain 3-D paper cutting.
4. http://www.associatedcontent.com/article/1247860/simple_diy_christmas_place_cards_that.html
This site is not relevant but has a article within in about how to make them.
5. http://www.marthastewart.com/article/lipstick-101
This site is not relevant it is how to make gift card wrappings.
6. http://www.ipo.gov.uk/t-tmj/journals/6748/domestic/2483680.html
Object not found
7. http://eng.fnfa.myhomeserver.com/khigrinadiol.html
Server not found
8. http://www.save-on-crafts.com/ornamentcard.html
This site is not relevant.
9. http://www.indiabizclub.com/qxzptd/index.php?q=7;;;;Gold+Ornaments;;;;india
This site is not relevant.
10. http://findarticles.com/p/articles/mi_hb3291/is_2_26/ai_n29390336/
This site has an article about creating Christmas card ornaments: create memories while making special ornaments and decorations from old cards, but is not relevant.
From searching Table Ornaments + Paper + Card, I got 6 sites that were not relevant to paper cutting. I also got 2 sites that could not be found. And 1 site that had some relevance to card cutting.
Searched: Paper Cutting Services
These are the top 10 results in Google
1. G B Brooks
http://www.gbbrooks.co.uk/services.php
This company cuts various products from paper, to PVC. They only provide 2-D cuttings.
2. Perfection with Paper
http://www.perfectionwithpaper.co.uk/guillotining.htm
This site is all about cutting paper to standard and non-standard sizes. They only produce 2-D cuttings but not designs; they cut paper into different sizes
3. Paper Shapers
http://www.papershapers.co.uk/paper-cutting-service.php
This site is for cutting 2-D shapes, they have a long list of products that they do, and also of services they offer, because they offer more than just paper cutting
4. Automated Cutting Services
http://www.automatedcutting.co.uk/services.html
Once again this site is just for 2-D cutting, they use a flat bed laser, to cut through various materials.
5. The Paper Mill Store
http://www.thepapermillstore.com/pages.php?pageid=343
This site uses a laser cutter to cut the sizes of the paper; they can cut through various paper products.
6. http://www.eguide.asia/ASIA/SEARCH/Paper+Cutting+Service/1
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.
7. Paper and More
http://www.paperandmore.com/cutting-service.html
This site is for different size paper cutting.
8. http://www.kellysearch.com/qz-product-66117.html
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.
9. Paper Mojo
http://www.papermojo.com/Detail.bok?no=1792
This site cuts paper in 2-D
10. http://www.eguide.co.th/TH/SEARCH/Paper+Cutting+Service/1
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.
From searching Paper Cutting Services, I got 7 sites that cut paper into different shapes and sizes but no that cut into 3-D. I also got 3 sites that were directories.
1. G B Brooks
http://www.gbbrooks.co.uk/services.php
This company cuts various products from paper, to PVC. They only provide 2-D cuttings.
2. Perfection with Paper
http://www.perfectionwithpaper.co.uk/guillotining.htm
This site is all about cutting paper to standard and non-standard sizes. They only produce 2-D cuttings but not designs; they cut paper into different sizes
3. Paper Shapers
http://www.papershapers.co.uk/paper-cutting-service.php
This site is for cutting 2-D shapes, they have a long list of products that they do, and also of services they offer, because they offer more than just paper cutting
4. Automated Cutting Services
http://www.automatedcutting.co.uk/services.html
Once again this site is just for 2-D cutting, they use a flat bed laser, to cut through various materials.
5. The Paper Mill Store
http://www.thepapermillstore.com/pages.php?pageid=343
This site uses a laser cutter to cut the sizes of the paper; they can cut through various paper products.
6. http://www.eguide.asia/ASIA/SEARCH/Paper+Cutting+Service/1
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.
7. Paper and More
http://www.paperandmore.com/cutting-service.html
This site is for different size paper cutting.
8. http://www.kellysearch.com/qz-product-66117.html
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.
9. Paper Mojo
http://www.papermojo.com/Detail.bok?no=1792
This site cuts paper in 2-D
10. http://www.eguide.co.th/TH/SEARCH/Paper+Cutting+Service/1
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.
From searching Paper Cutting Services, I got 7 sites that cut paper into different shapes and sizes but no that cut into 3-D. I also got 3 sites that were directories.
Monday, 9 November 2009
Logo
I have designed a new logo, I used Adobe Illustrator to design the logo, i was using Beige, Pea Green, Duck Egg Blue and Cream as my colour scheme provided by Card Cuts.
Documentation on how i made the logo:
f:\IT\Unit 3\Website\Card Cuts\Logo\Card Cuts Documentation.pdf
Documentation on how i made the logo:
f:\IT\Unit 3\Website\Card Cuts\Logo\Card Cuts Documentation.pdf
Subscribe to:
Posts (Atom)