Thursday, August 29, 2013

Lesson 6

Type of web forms

Common types of web form:
  • Contact Form
  • Survey Form
  • Enquiry/Feedback Form
  • Registration Form
  • Order Form
Contact Form

Survey Form 

































Enquiry/Feedback Form
Order Form












































Registration Form




















For further reading:

Creative Web Forms



























How to build web form in Adobe Dreamweaver

Check out this website http://support.website-creator.org/forms.html
Videos site http://www.youtube.com/watch?v=iD067xH1D_I
http://dreamweaver.wonderhowto.com/how-to/build-web-form-dreamweaver-143038/


Using Table to contain Web Form

Tables are useful if you want to show relationships between different types of data. They allow you to group related data in rows and link them to other data in different columns. While they are often not needed on many sites, there are certain situations where you may want to present your data in tabular form.
Video demo http://www.youtube.com/watch?v=5jLkkkIadrY
Posted by at No comments:

Saturday, August 24, 2013

Lesson 5

This blogsite is specially prepared for students of NAFA taking module FS3004 E-commerce for Fashion Business.

1. Website layout:

Refer to Understanding the Z-layout in Web design &
(http://webdesign.tutsplus.com/articles/design-theory/understanding-the-z-layout-in-web-design/)
Good page layout design elements
(http://www.cs.umd.edu/~mount/Indep/CHassan/element.htm)

Examples of poor design web:
http://vacaway.com/products_display/
http://www.fabricland.co.uk/
http://art.yale.edu/

Examples of good layout design web:
 
Adobe Kuler is an internet application from Adobe Systems that lets individuals try out, create and save various colour schemes, each of which consists of a set of five colours.
http://www.adobe.com/products/kuler.html
http://www.adobe.com/products/creativecloud.edu.html

2. The beauty of Cascading Style Sheets (CSS):

This website exhibits the important of CSS. Content no change, while the visual design can be change frequently to keep visitor's revisit the site http://csszengarden.com/
 
 

3. The benefits of applying CSS in a website:

Cascading style sheets control the look and feel of a web page. The language and syntax is complex and powerful.

Benefits:
  • Ease of maintaining large web sites
  • Sophisticated layout & design features
  • No plugins required
  • Minimise download times

This is a CSS syntax.
CSS ID & Class
The id selector is used to specify a style for a single, unique element.
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

Refer to this site for hands-on practice. http://w3schools.com/css/css_id_class.asp

The way to insert CSS:-
Internal stylesheet
<head>
< style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
< /style>
< /head>

External stylesheet
<head>
< link rel="stylesheet" type="text/css" href="mystyle.css">
< /head>

How to create a external stylesheet?
Videos:
http://blog.infiniteskills.com/2012/09/adobe-dreamweaver-cs6-tutorial-converting-css/
http://www.youtube.com/watch?v=5Q58B6f6ahU
 
 

4. CSS styling:

Video http://www.youtube.com/watch?v=X08ffrrtpM4
 
Posted by at 1 comment:

Friday, August 23, 2013

Lesson 4

This blogsite is specially prepared for students of NAFA taking module FS3004 E-commerce for Fashion Business.

Function of Navigation:

  • A key element of any website
  • User gets from section to section, and to the content.
  • Help user browse site easily.

 

Basic Principles of Navigation:

  • Consistency
  • Easily learnt - making it obvious
  • Feedback
  • Appear when needed
  • 3 click rule
Global navigation - Defined as links to a site's top-level categories that occur on every page of the website.
Local navigation - Links within each page of the webpage.
For further reading, login to this site
http://www.webpagemistakes.ca/website-navigation
Video:
http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-08-website-navigation/

Different types of Navigation:

For further reading, login to this site
http://sixrevisions.com/user-interface/navigation-design-patterns/

Video:
http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-2-interaction-design-navigation/ (start watch from 09:00 seconds to 19:20 seconds

Interactive Navigation:

This video show how to create different types of  hyperlink, mailto link & external links
http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs06-creating-links-in-dreamweaver/

Link Syntax:

http://www.w3schools.com/html/html_links.asp
 

Hyperlink:

This video is all about links & linking in Dreamweaver CS6.
http://www.youtube.com/watch?v=7gqXFi8cjEQ
 

Relative & Absolute Paths

For further reading, login to this site http://www.computerhope.com/jargon/r/relapath.htm http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/ 
 
This video show the important of relative & absolute paths.
http://www.youtube.com/watch?v=Gy6k7D57lSY
 

 

Posted by at No comments:

Thursday, August 8, 2013

Lesson 3

This blogsite is specially prepared for students of NAFA taking module FS3004 E-commerce for Fashion Business.

Introduction of Dreamweaver

  • Dreamweaver offers a customisable and easy-to-use WYSIWYG HTML editor that doesn’t compromise when it comes to power and flexibility.
  • DW is the industry leading HTML editor.
  • Beside HTML, DW can interpret PHP, ASP, CSS JavaScript, ColdFusion
  • Saving 1st page as index.html (internet can recognise)

Website infrastructure:



 
How does the Internet work?
How can I have my own website be seen by others?
How does a browser fetch a web page?
How does a browser display a web page?
What is a Web server?
What is an internet service provider?
  http://www.w3schools.com/hosting/host_intro.asp

Defining a new site in Dreamweaver:




Set up a local folder, where Dreamweaver stores the files that you’re currently working.
(To ensure the links you set up on your computer will work when you upload the site to a web server, it is essential that you store all the sites resources in one main folder on your hard drive, and then identify it within Dreamweaver. This is because the link will only work properly if all the site’s elements remain in the same relative location on the web server as with your hard drive.)

http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-02-defining-sites/

DW interface:





Web Design Tool - Image editing



Insert image
Insert image placeholder – Use this when you want to start building web pages before you have all the final content available and you want to visualise the page layout

Exporting Images from Adobe Photoshop
  • It’s best to make adjustment to your images using a professional graphics-editing program like Photoshop.
  • DW offers a number of editing options – Adjusting brightness & contrast; resizing images.
  • Save image in gif, jpg or png format (in photoshop, File > save for web & devices
Resizing images – Although DW allows you to quickly optimize images, however, it is still recommend to crop or trim in PS before importing to DW.

Using table to organize images



Refer to the following tutorial
http://www.siteground.com/tutorials/dreamweaver/dreamweaver_tables.htm
http://www.guidesandtutorials.com/dreamweaver_tables.html



Using AP Div in web layout



Insert layout objects AP Div
The following illustration is base on 3 columns layout
-          Container (page width usually between 940px-960px)
-          Header
-          Left menu
-          Body
-          Left content
-          Right content
-          footer
Size & layout of a web page
http://www.iteracy.com/resources/size-and-layout-of-a-web-page/
How to center a AP Div tag in DW container
http://www.youtube.com/watch?v=GV36n5uYpSM&gl=SG&hl=en-GB


Protecting your copyright images



  • Don't have to register every piece you have created.
  • Always put on a copyright notice on your work.
  • " © your name here @2013".
  • Make image harder to "borrow" by reducing the image size from screen viewing.

Posted by at No comments:

Thursday, August 1, 2013

Lesson 2

This blogsite is specially prepared for students of NAFA taking module FS3004 E-commerce for Fashion Business.
Anatomy of HTML Document:


http://designshack.net/?p=25363
http://www.webopedia.com/TERM/H/HTML.html
http://www.html.net/tutorials/html/lesson2.php



Fundamental of HTML:
http://www.w3schools.com/

 HTML Layout:


Management of files:
  • Create a main folder with <yourname>.
  • Create two other sub-folders inside the main folder, an "images" and ”artwork" folder.  These sub folders were to save all images that will display in your website & artworks that required photoshop or illustrator to work on respectively.
 
Summary:
  • Website is build using html coding.
  • The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.
  • Elements give structure to a HTML document and tells the browser how you want your website to be presented.
  • Use columns to layout web page to make your website look good.
  • Appropriate file management.
Posted by at No comments:
Subscribe to: Posts (Atom)