WEB TECHNOLOGY

Instructor -

Mohamed Yasin- B.E, M.E

All Quires and Comments: yasinmhd@msn.com

Pre Requirement
Some Basic Knowledge in the following areas

Final Output

The Finally you are capable of

Dreamweaver Basics and Advance Programming for a Web page, using WY

Client and Server Technology Operating System (Linux /Windows) URL- IP Address- Domains IP Protocols {http, www, ftp, smtp, pop, https} Web Page Web Site Browser Photoshop or any photo editing tool

All Quires and Comments: yasinmhd@msn.com

E-Commerce Models
Business-to-Business (B2B) model
www.alibaba.com , www.ec21.com

online banking, travel services, health information

Business-to-Consumer (B2C) model

Consumer-to-Consumer (C2C) model

www.ebay.com

Consumer-to-Business (C2B) model

www.monster.com, www.naukri.com

All Quires and Comments: yasinmhd@msn.com

How to star t your design:

Each webpage must have the same look

All Quires and Comments: yasinmhd@msn.com

Things to Remember, especially for Assignments

Keep the menu in the same place on every page. (either the top or the left, it is up to you) Should not have to scroll horizontally Keep the colours consistent on every page Keep the layout fairly consistent on every page Should always have a way to get home Long pages should have a Back to Top button

All Quires and Comments: yasinmhd@msn.com

Web Page File Names Each webpage will have an extension of either : .html, .htm

.htm - DW versions prior to version 8 .html DW 8 version and later uses this extension The code is what the browser uses to display the webpage on your screen

.shtml
Server Side Includes means that html document has special commands for the server to process ie. Other data to pull in from server, counter processing etc. please parse this file before displaying it in the browser since it contains server commands

.php, .asp, .cgi

extra stuff that is brought in also from the server, allows for use of data in a database on the server, more complex form manipulation. asp is a Microsoft technology
All Quires and Comments: yasinmhd@msn.com

Adobe Dreamweaver
vHistory of Dreamweaver
o1997 Developed by Allaire Systems o2001 Macromedia acquired Allaire o2005 Adobe acquired Macromedia o2007 Adobe Dreamweaver 9 ( CS3 )
- 4 / 07

o2008 Adobe Dreamweaver 10 ( CS4 ) - 10 / 08 o2010 Adobe Dreamweaver 11 ( CS5 ) - 04 / 10

vWhat will the future hold?

o2011 Adobe Dreamweaver 12 ( CS6 ) - 10 / 11 ????
All Quires and Comments: yasinmhd@msn.com

Dreamweaver Versions

Dreamweaver is a web page editor & site management tool WYSIWYG interface much easier to work with Create and edit pages Link them easier Site management: Organize files/folders, Moving files, rearranging pages, and

All Quires and Comments: yasinmhd@msn.com

Typical Screen Short of Dreamweaver cs5

All Quires and Comments: yasinmhd@msn.com

Dreamweaver Screen

PANELS:

Provide you with commands/propertie s & characteristics of the current object or task you are busy with

Can move them around on the screen (click and drag) Most common floating panel is the Property Inspector
All Quires and Comments: yasinmhd@msn.com

Dreamweaver Windows/Panels

Document window

The actual working environment where you are entering text, images to build your web page

Site Panel

folder that you are currently working on Gives filenames, path directory etc.

Property Panel
C h a ra cte ri cs o f o b j cts/ text th a t yo u h a ve sti e i se rte d i . S i , co l r, text fo n t e tc . n e ze o
All Quires and Comments: yasinmhd@msn.com

Show / Hide Panels

The side panels always stay on To activate the Property Inspector/ Site window
From the menu bar, select Window > Properties From the menu bar, select Window > Files

To hide/show panels
Press <F4> key to make panel appear and disappear.

To close a panel simply click select Close panel Drag panel and lock it into place

of the panel, and

All Quires and Comments: yasinmhd@msn.com

Design layout &

File Organization Navigation Style Your Choice !! Be consistent Banner Menu Colors

All Quires and Comments: yasinmhd@msn.com

Website for organization Polar bear site All webpages stored on H: polarbears
index.html Homepage or Splash page

All webpages pertaining to a website are stored in a folder on your computer called polar Dreamweaver refers to this folder as a site (DW associates a descriptive name with the folder name as identified through steps of Manage Sites) First webpage is usually called index.htm or .html
All Quires and Comments: yasinmhd@msn.com

Links for the simple structure is: Assume the domain name for this site
ArcticAnimals.org
Thus the website would be:

http://www.ArcticAnimals.org

To get to the polar bear web site, you could type:

http://www.ArcticAnimals.org/polarbears OR http://www.ArcticAnimals.org/polarbears/index.html

To get to the habitat page you would type:

http://www.ArcticAnimals.org/polarbears/habitat.htm l
All Quires and Comments: yasinmhd@msn.com

Why is it important that you call the homepage index.html? Once you transfer your files to a server into a folder called polarbears , the URL address will depend on which server you upload it to. For example:
http://publish.uwo.ca/~vtryphon/polarbears www.uwo.ca/polarbears www.brescia.uwo.ca/polarbears

To view another webpage within the site, the URL address would be:
http://publish.uwo.ca/~vtryphon/polarbears/habitat.html www.uwo.ca/polarbears/habitat.html www.brescia.uwo.ca/polarbears/habitat.html
All Quires and Comments: yasinmhd@msn.com

Creating a New Site

ALWAYS DO THIS: You must identify to Dreamweaver the folder where your website will be stored performed through Manage Sites

New site

Folder/files exist

N o file s e x ist y e t B u t n e v e r w o rk e d b u t w ill b e w ith file s in D W cre a tin g th e m Note: You can only work on one site at a time (but you can switch between sites but must close each site before you open the next
All Quires and Comments: yasinmhd@msn.com

File Names

Rules for File Names 1.Do not use spaces in your file names and folders (even though Word files allow it!) facts and stats.html vs factsandstats.html 2.Do not use capital letters in your file/folder names (due to case sensitivity on some servers ie. Panther)

E x a m p le : If th e file

Factsandstats.html vs W h ich u rl site factsandstats.html w o u ld sh o w th e

w ebpage? a ) h ttp : // w w w . u w o . ca / in d u str y / se rv ice s . h tm l b ) h ttp : // w w w . u w o . ca / in d u str

S e rv ice s . h t m l
w a s u p lo a d e d

All Quires and Comments: yasinmhd@msn.com

Entering Text
Automatic line wrapping nThe width of your paragraph depends on the width of the Web browser window (unless text is entered into a table
n

or using CSS style sheets)

Paragraph break Leaves a blank line between lines Press <Enter> Line break no space between lines Press <Shift><Enter>

All Quires and Comments: yasinmhd@msn.com

View Layouts

Design View: - shows the WYSIWYG view Split: - combo of both views (Design and Code) Code View: shows your HTML code

All Quires and Comments: yasinmhd@msn.com

To Preview a webpage in a Browser

You can see how your page will appear online by previewing it in a web browser. It assumes that you have a browser or browsers installed on your computer.

Preview icon

You must always preview in as many browsers & different versions Ie. Internet Explorer, Firefox, Netscape etc.
All Quires and Comments: yasinmhd@msn.com

Page Title property

Information Technology Services, the University of Western Ontario

Associates a general description of what webpage is all about -- an identity Displays title on first line (title bar) when page is opened in browser window

Importance:

All Quires and Comments: yasinmhd@msn.com

Page Title property

Important: when printed Identity

http://www.brescia.uwo.ca/curr
ent/advising/index.html

All Quires and Comments: yasinmhd@msn.com

Formatting text

REVIEW:
Color: hexadecimal vs RGB web safe pallette Size: Pixels vs points Font Type: Serif vs. Sans-serif

Control:
ie. H1, H2, H3, H4, H5, H6 (predefined approximate sizes and bolds text)

a) Headers

b)Text color ie. Blue, green, red,.. c) Text size ie. 8 px, 10 px or 8pt, 10 pt, 12
pt,n

d)Font type ie. New Times, Verdana, e) Special effects ie. Bold, italics, underline,
superscript, subscript etc
Headers Font type Text Size Text Color Special Effects

All Quires and Comments: yasinmhd@msn.com

Indenting Paragraphs
Can indent/outdent a paragraph to make it stand out. Beware: if text separated by break lines

Hi-light text or place cursor in the paragraph. 2.Click indent or outdent icon in Property Inspector as many times to indent text over.
1. 3.
All Quires and Comments: yasinmhd@msn.com

Page Properties: Changing the Background Color

For variety, you can change the background color of your Web page
To set a Background color
1.From menu, click on Modify > Page Properties 2.Click on Background field to open color menu. Select color and click OK. TIP: When starting a webpage, set the properties

To set a Background image

1.From menu, click on Modify > Page Properties 2.Click on Browse button beside the Background Image field and select the file. Click OK.
All Quires and Comments: yasinmhd@msn.com

Graphics
Enhances the appearance of a web page Images can be obtained from scanner, digital camera, clipart, images from internet Common universal image formats .gif clipart .jpg photo .png

IMPORTANT Lower download times IMPORTANT Use smaller sized graphics Resize a larger image in a graphics pkg rather than in Dreamweaver Any resizing you do within Dreamweaver will not affect the download speed Optimize: color resolution, compression will affect quality and size
All Quires and Comments: yasinmhd@msn.com

Download time of page

Benchmark ??

See status bar

Total size of page appears in Kilobytes (includes text and images)

Estimated download time To view/change speed From menu select Edit>Preferences>Status bar

@28.8K ________ sec @56K ________ sec

All Quires and Comments: yasinmhd@msn.com

@128K ________ sec

Image Attributes
Once image is inserted, click on it and then you can control attributes through Property Inspector panel

Sharpen, contrast, crop

Alignment Size Space around image Border Alternative text

All Quires and Comments: yasinmhd@msn.com

Alternative Text
Displays text associated with the image if using a text only browser may display while graphic is loading when mouse passes over the graphic
To meet Barrier Free Access" which is the initiative to make sure information, by those with those with disabilities requiring special software to "read" the information.

All Quires and Comments: yasinmhd@msn.com

Creating Links

You can create a link:

You can LINK to files of type: Other html files (.htm, .html) Proprietary software: Word, Excel, etc. Images (.gif, .jpg etc) Acrobat Reader files (.pdf)
All Quires and Comments: yasinmhd@msn.com

1. To another web page within your site 2. To another website on the Internet http://www.uwo.ca 3. To an e-mail address mailto:johndoe@uwo.ca 4. Creating an Image Hyperlink 5. 6. Create multi- links within an image (image map) 7. To jump to a specific spot (other than beginning of the webpage) within a web page (setting

#1 Hyperlink to a page within your website

Or on the Internet

Point to the file

All Quires and Comments: yasinmhd@msn.com

#2 Hyperlink to a page on the Internet

Opens in a new window Set to ____________ You can type URL address directly Must start with ___________________ ex. http://www.uwo.ca

All Quires and Comments: yasinmhd@msn.com

#3 Hyperlink to an e-mail address

1.Select the text that you want to turn into a hyperlink. 2.From the menu, select Insert > E-mail Link
johndoe@uwo.c a

Or enter directly
mailto:johndoe@uwo.c a

All Quires and Comments: yasinmhd@msn.com

#4 Creating an Image Hyperlink

1.Select the image that you want to turn into a hyperlink. 2.In the Property Inspector, by the Link field, click on the folder. 3.Select proper path directory and then highlight the file to link to and then click Select. 4.Notice that the image is now a hyperlink.
All Quires and Comments: yasinmhd@msn.com

#5 Creating an Image Map

Aka _________ _______, _________

1.Select the image 2.In the Property Inspector, type a descriptive name in the Map field. 3.Click on a drawing tool. Draw an area on the image using the tool. 4.In the Property inspector, Click on the folder beside the Link field, and proceed to indicate the file that the link will be associated with this hotspot.
All Quires and Comments: yasinmhd@msn.com

#6 To jump to a specific spot

Links Within a Web Page/ or to another page To link to another spot within a web page or to a specific spot on another webpage
n

Aka anchors targets bookmarks

Useful when a page is very long and you want to jump to different sections of the SAME webpage or to a spot on a different webpage other than the beginning.
n

2-Step Process

(1) Create the anchor (2) Create the link to the anchor

http :// www . thedancemovement . ca / faculty / index . html

All Quires and Comments: yasinmhd@msn.com

#6 To jump to a specific spot

2 1
(1) Create the anchor

(2) Link to the anchor

ashley

#ashley
All Quires and Comments: yasinmhd@msn.com
http :// www . thedancemovement . ca / facul

#6 To jump the Top of The Page 1 top Predefined anchor #top

BUT .

Back to Top

(2) Link to the anchor

#top
All Quires and Comments: yasinmhd@msn.com

Tables

Organize content into columns and rows by inserting tables

Control web page layout and customize effects

n

All Quires and Comments: yasinmhd@msn.com

Table Width: Expressed as % - covers a percentage of screen

How do you know your resolution? Start Control Panel Display Settings

Stretch Stretch

640 x 480

Stretch

Stretch

800 x 600 1024 x 800

http://www.largnet.on.ca/

All Quires and Comments: yasinmhd@msn.com

Table Width: Fixed - table width is fixed on screen

How do you know your resolution? Start Control Panel Display

640 x 480

ideal

800 x 600 1024 x 800

http://www.largnet.on.ca/

All Quires and Comments: yasinmhd@msn.com

1.Draw a layout of your website using tables (use fixed 780 pixels for width)

All Quires and Comments: yasinmhd@msn.com

Inserting a Table
1. Click at point where you want table to appear 2. From menu select Insert >Table 3. In the Insert Table dialog box, enter # of rows and columns. 4. Set the table width in terms of pixels or %

All Quires and Comments: yasinmhd@msn.com

How to Select a Table

Place your mouse over one of the tables cell grids and once you observe a red outline, single-click Notice the Property Panel will reflect the table properties

All Quires and Comments: yasinmhd@msn.com

Table

Merging & Splitting Cells

Provides a more flexible table layout for presentation purposes

Merge icon

Split icon

Merging cells
Highlight the cell(s) that you wish to merge. nOn Property inspector, click on Merge icon.
n n

Splitting cells
Highlight the cell that you wish to split. nOn Property inspector, click on Split icon. A pop up box asks whether you are splitting into rows or columns and how many.
n

All Quires and Comments: yasinmhd@msn.com

Table properties

You can control:

Layout center, left, right, justify Width size of table (pixels, percent) Cell Padding the space around the contents of each cell Cell Spacing the space between each cell in a table Borders- size (value 0 = invisible), color

Click anywhere on table 2.Right-click and select Table >Select Table 3.Property Inspector reflects table properties. Then set property values accordingly.
1. All Quires and Comments: yasinmhd@msn.com

Cell properties

You can control:

cells) right

(applied to one cell or a group of

Horizontal alignment text is center, left, Vertical alignment text is aligned at

top,middle,bottom

Width & Height of cell as pixels, percent Cell border color (note: Table border must
be >0) cells

Background color- color of a cell or set of

4 5 1.Select cell(s) you wish to change its property 2.In Property Inspector (expand box), and select desire feature you wish applied.
1/2
All Quires and Comments: yasinmhd@msn.com

Web Publishing

Once your pages are ready, you must upload (transfer) the pages to your server with

Secure Shell Client

http://www.uwo.ca/its/doc/hdi/infoservices//ssh-telnet.html

Or Can transfer directly from within Dreamweaver

All Quires and Comments: yasinmhd@msn.com

1. Draw a layout of your website using tables (use fixed 780 pixels for width)

All Quires and Comments: yasinmhd@msn.com

 Web pages will NOT format as precisely as something like a MS Word document to be printed because everyones resolution is different and screen size is different. Design a general webpage and then save it and make copies for each page in your site and add the content to the copies Dont forget to make an images folder! Put your images in the folder BEFORE you start adding them to your page. Try previewing your page in more than one browser It is easier to create the top level folder and subfolders first and then point Dreamweaver to that folder Always use lower case names with no spaces All Quires and for all folder and all file names Comments: yasinmhd@msn.com

Dreamweaver Tips