Web Technology: Mohamed Yasin

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
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
How to star t your design:

Each webpage must have the same look
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
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
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 ????
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
Typical Screen Short of Dreamweaver cs5
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
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
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
Design layout &

File Organization Navigation Style Your Choice !! Be consistent Banner Menu Colors
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
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
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
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
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
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>
View Layouts
Design View: - shows the WYSIWYG view Split: - combo of both views (Design and Code) Code View: shows your HTML code
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.
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:
Page Title property
Important: when printed Identity
http://www.brescia.uwo.ca/curr
ent/advising/index.html
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
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.
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.
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
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

@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

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.
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)
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
#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
#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
#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.
#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.
#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

#6 To jump to a specific spot
2 1
(1) Create the anchor
(2) Link to the anchor
ashley
#ashley
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
Tables
Organize content into columns and rows by inserting tables
Control web page layout and customize effects

n
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/
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/
1.Draw a layout of your website using tables (use fixed 780 pixels for width)
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 %
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
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
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
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
1. Draw a layout of your website using tables (use fixed 780 pixels for width)
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

Web Technology: Mohamed Yasin

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Technology: Mohamed Yasin

Hochgeladen von

Copyright:

Verfügbare Formate

WEB TECHNOLOGY

Mohamed Yasin- B.E, M.E

All Quires and Comments: yasinmhd@msn.com

The Finally you are capable of

All Quires and Comments: yasinmhd@msn.com

online banking, travel services, health information

Business-to-Consumer (B2C) model

Consumer-to-Consumer (C2C) model

Consumer-to-Business (C2B) model

All Quires and Comments: yasinmhd@msn.com

How to star t your design:

All Quires and Comments: yasinmhd@msn.com

Things to Remember, especially for Assignments

All Quires and Comments: yasinmhd@msn.com

.php, .asp, .cgi

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

vWhat will the future hold?

All Quires and Comments: yasinmhd@msn.com

Typical Screen Short of Dreamweaver cs5

All Quires and Comments: yasinmhd@msn.com

Show / Hide Panels

of the panel, and

All Quires and Comments: yasinmhd@msn.com

Design layout &

All Quires and Comments: yasinmhd@msn.com

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

To get to the habitat page you would type:

Creating a New Site

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

All Quires and Comments: yasinmhd@msn.com

or using CSS style sheets)

All Quires and Comments: yasinmhd@msn.com

All Quires and Comments: yasinmhd@msn.com

To Preview a webpage in a Browser

Page Title property

Information Technology Services, the University of Western Ontario

All Quires and Comments: yasinmhd@msn.com

Page Title property

Important: when printed Identity

All Quires and Comments: yasinmhd@msn.com

All Quires and Comments: yasinmhd@msn.com

Page Properties: Changing the Background Color

To set a Background image

Download time of page

See status bar

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

@28.8K ________ sec @56K ________ sec

@128K ________ sec

Sharpen, contrast, crop

Alignment Size Space around image Border Alternative text

All Quires and Comments: yasinmhd@msn.com

You can create a link:

#1 Hyperlink to a page within your website

Point to the file

All Quires and Comments: yasinmhd@msn.com

#2 Hyperlink to a page on the Internet

All Quires and Comments: yasinmhd@msn.com

#3 Hyperlink to an e-mail address

All Quires and Comments: yasinmhd@msn.com

#4 Creating an Image Hyperlink

#5 Creating an Image Map

Aka _________ _______, _________

@28.8K sec @56K sec

Aka _____ _, _______