Learning skills from creating website in iweb

i have started to create website in the iweb after layout  website outline and decided the colors and images will be used .  This is my homepage and link page my account

While i doing the site, i have learned some skills in the iweb

Choosing the new page

iWeb has a variety of templates to get me started, but it also provides blank page templates in each theme. I choose the blank one with white background, and decide the page layout by 1024×768

 

Navigation

Iweb automatically creates a navigation bar which appears at the top of each page in the site. But I want to hide the navigation bar and create my own navigation links:

1. Open the inspector and select the site inspector.
2. Uncheck the box next to “Display navigation menu.”

 

 

 

Working with text

I typing my own text and format it in the iweb, there are several ways to format the text in iweb:

• To change the spacing and alignment, open the inspector and select the text inspector. Use the sliders to change the character, line, and paragraph spacing. Click on the buttons at the top to change the alignment, or click on the color well to change the text color.
• To change the font and style, click on the fonts button in the toolbar and select a font family, font type face, and size using the different columns. The buttons at the top of this window will allow you to add underlining, a shadow, or other styling to your text.

Links

To add a hyperlink:

1. Select the text or object I want to turn into a hyperlink.
2. Open the hyperlink inspector.
3. Check the hyperlink inspector.
4. using the drop-down menu, select one of the link types:
   • One of my pages: use this option to another page in your site. Use the page drop-down to select the name of the page.
   • An external page: this is link to a page on the web.
   • E-mail message: this is to create a contact link. Enter the recipient address and a subject in the corresponding fields.

 

Images

There are several ways to add images to an iweb site:

• Drag and drop an image from a finder window
• Select a placeholder image and then choose insert > choose to navigation to location where the image is stored on your hard drive. Select the image and click on choose to replace the placeholder image.
• Click on the media button in the toolbar, then click on the photos pane and choose an image from your iphoto albums. Drag the image into the canvas until it is over a placeholder image.

Once you have added an image to a page, you can drag it to different location or use the handles that appear around it to resize it.

Te graphics inspector can be used to further customize the appearance of an image.

The adjust image window allows you to adjust the color and lighting in your images without having to open iphoto. 

I have done the shoes website, one is homepage ,the other link page is my account. hope you like it, thanks!

 

 

 

 

 

 

 

Using Iweb is a easy and effective to create website

 

Design website can with many different programs, for instance Dreamweaver, View source. But it seems difficult to use them. A Mac and iWeb 09 is a tool to design and publish your own personal website. i will use it to design my website. Why do I choose this one?  Because i am a beginner of learning web design, to use the Dreamweaver is quite confuse for me. but iweb is easy to use. Start by picking an Apple-designed theme. Each theme comes with coordinated fonts, backgrounds, and colors to give your site a consistent look throughout. you can choose a page template  you like. iWeb features ready-made templates for welcome, about me, photo album, movie, blog, and podcast pages. Create as many pages as you like. these are some samples of iweb website template as the following:

And to customize your layout with easy-to-use iWeb tools. You just drag in photos or movies or type text into placeholders. Resize and rotate photos. Create overlays. There’s no coding required. No complicated design programs to buy. No obstacles between you and a great-looking website. Therefore, in my opinion, iweb is a good tool for me to use as i am a beginner of learning web design.

Develop my website outline

I start to develop my website outline, the website outline is just what the name implies…a written outline of the content of my website.  why do i develop my website outline first? Even though I feel as if know every title and sentence on the website I am creating, once a site is online it is very difficult to remember the actual order of things.

Meanwhile, having a website outline helps provide me a mental picture of the site, the sections, subsections and content pages. This will also serve as a valuable guide when i setup my navigation scheme. I will be able to better visualize the path that I wish my visitors to follow.

Before layout my website outline, i got some information from several examples of shoes websites which i viewed on the internet, and i think some of them attractive me.    For example  http://www.templatesweb.com/blog/2008/08/22/shoes-store-zen-cart-template/

And when i searched the shoes website, there are so many nice and wonderful images, but i found some of the images really looks  fantastic and stylish which will be attractive by the visitors, i will try to design my own images but i will may portray them to my website.

For example from site  

http://www.kristopherdukes.com/category/pump-shoes

,

Parada shoes with flower heels 

These shoes look so luxury and fashion.

Before create my website i think about these things

 

Before create my website, i I have to determine the purpose of my website ? why do i want a website? what do i expect to gain from it and then think what is my audience. i have decided the purpose of my website is sale shoes, and then I determine my target audiences are women and men but not kids. The content of the website is very important; I will set up my sites content in as simple a manner as possible, focusing on what my visitors are looking for information. In order to make the visitor feel comfortable, the fonts and color will be make easy to view and consistent throughout my entire site. I will not use bright backgrounds. Like having a red, yellow or green background can draw to much attention from the users and they will be distracted from what is important on the website. for example the third of picture as the following. In addition, I will not use dark text on a dark background. i will use white background, and 1 or 2 colors might be used that would be red 

this is website green background，when i looking at this website i feel not comfortable

I will make sure my text is easy to read and is more prominent than the background. And  to figure out the image that I would like my website to portray. A good first impression is critical to my visitors, since they probably do not know you. If your website is not informative and organized you may appear unprofessional.

What is website i decide to do and why?

 

For the second assessment design own website, I would like to do store and online shopping shoes website. Why do I choose this web design?  Before answer the question, I would like to talk about my Mum’s business in China.

My Mum in my town Jiangyin with a small scale female’s footwear business retail in 2003, in 2005, the business expanded to several other towns in my city such as Jiangjin, Longtai, and YuXi and so on.

 

These shoes for spring season from my Mum’s shoes store

i quite like the ankle footwear.

 

Why is it my Mum business became such a hit in my city? The answer is very simple; its affordable price and stylish design. So people can purchase many different styles according to the latest fashion trend. My Mum She understood about the happening situation during this era. She Not everyone can afford the fabulous expensive shoes. But yet, they still want to look stylish in not a ripping way.

Now my Mum she plans to expand her business to other countries, she would like have a website for people can shopping online as well. This is good opportunity for me to design a website for her and good chance to practice. But I am the beginner of learning web design, I will do my best use what I have learn the knowledge in class and outside class. 

 

 

 

 

 

Weblin can make any Web Site social

 

 

If you’re a social media addict but think that visiting regular Web sites is a lonely experience, you might want to take a look at Weblin.

Created by a German company, Weblin is designed to make the experience of surfing Web sites social–or make services like Facebook or MySpace.com more social. It does so by letting users create an avatar that they can then, effectively, take with them as they move around from site to site.

 

If they then find themselves on a site that is being visited at the same time by other Weblin users, then they can communicate with each other.

Weblin’s utility seems like it only comes from there being a critical mass of users and when users visit sites that are popular with others employing the service. But over time, if it grows large enough, it could provide a fun alternative to the traditional way of using Web sites. 

 

when the user use the weblin they  will not require registration they just have to enter a URL into a Weblin page

How to do E-mail Links

 

It is a good idea to include a method by which you can be contacted. Users may want to notify you of an error, provide you with additional content, or ask for your permission to borrow from your content. An easy way to provide this outlet is to create an e-mail link.

1. Place the insertion point after the Last Modified date and click the Line Break button from the Insert Panel or press Shift + Enter.

2. Type “Created by: “.

3. In the Common group of the Insert Panel click the Email Link button.

4. In the Text field type your name (or the text that you wish to serve as the link). In the second text field of the dialog box that appears, enter your e-mail address.

5. Click OK. When the user clicks on the e-mail link, a new e-mail message will open in his default e-mail application with your e-mail address in the To: field.

6. Save the file.

Image in the page

 

Images on the Web are generally one of two types, GIF or JPEG. The GIF format efficiently relays information about drawings because it focuses on areas that are the same color from dot to dot, or pixel to pixel. JPEGS are usually photographs and are better for images in which there are many colors with many variations.

1. Position your cursor at the end of your text and press Enter on your keyboard.

2. Click the Insert Image button in the Common group of the Insert Panel. 

3. The Select Image Source window pops up.

 

4. Navigate to the image you wish to insert and click OK. The image will now appear on your page.

5. If the image you would like to use is located outside of your root folder, Dreamweaver will prompt you to place a copy there. You should click Yes and save the file in your root folder with the same name.

6. Save your document.

7. Click the Preview in Browser button in the toolbar at the top of the Document Window to see you page in the browser.

On the right side of the Properties Panel there is a field for Alt, or alternate text. This is text that will be displayed in the event that the viewer cannot properly view the image. This may be due to a visual impairment, and slow modem connection, or a missing file.

8. Position the cursor within the Alt field and enter some text that describes the image. Think of what text you would like to see if you were not able to view the image.

9. Press Enter on the keyboard to confirm the alternate text entry.

You can resize an image in Dreamweaver by clicking and dragging one it its three handles. You can constrain the proportions of the image while resizing it by holding down the Shift key.

Page background color

 

To quickly add some color you can assign a background color to the page. This information is communicated in the HTML code itself, not as a separate image, so it loads very quickly.

1. Click the Page Properties button in the Properties Panel.

2. The Page Properties dialog box will appear.

3. Select a background color by clicking the box to the right of the word Background, called the color picker, or by typing in the 6-digit code for that color. (This is the hexadecimal color code that browsers use to identify colors.) Click Apply to see if you like the color. When you are satisfied with your color choice click OK.

The Dreamweaver Interface

 

Dreamweaver opens with a main document window and several panels that are docked along the top, right, and bottom of the screen. The main document window is where you will spend most of time to build your Web pages.

One of the panels is appear in the right-hand side of the Dreamweaver Windows is the Files panel. This panel keeps track of all the files in your site; Web pages, images, and more.

This panel can be expanded for additional functionality by clicking on the Expand/Collapse Button.

 

Insert Panel 

 

The Insert Panel allows you to insert various objects into your web page, such as images, anchors, and e-mail links. These objects are arranged by group. The Common group is shown by default. The panel is located at the top of the screen.

Properties Panel

The properties panel, located at the bottom of the screen, is one of the most useful tools in Dreamweaver. From here you can change the properties for just about anything, from text to tables to the page itself.