SlideShare una empresa de Scribd logo
1 de 12
What is a Web site? 
AA wweebb ssiittee iiss:: 
a presentation tool; 
a way to communicate; 
a learning tool; 
a teaching tool; 
a marketing important 
tool; 
introduction why examples
Step 1 
Think! 
Before you do anything else, you need to 
spend time thinking about the 4w’s. 
What is the purpose of the web page/site? 
Who is your target audience? 
What will bring your audience back? 
Where will your audience be using the site? 
introduction why examples
Step 2:Follow The Rules 
To creat a we site you must follow theses rules: 
RRuullee 11:: YYOOUU aarree NNOOTT tthhee UUSSEERR.. 
• What you understand is not what a user will understand; ask 
the users to design the site the way they want. 
RRuullee 22:: UUSSEERRSS aarree NNOOTT PPRROOFFEESSIIOONNAALLSS 
• Users will not think carefully about the new added features in 
the Web site without your directions. 
RRuullee 33:: GGiivvee tthhee ccoommmmoonn uusseerr aa lliittttllee ccoonnttrrooll 
• Allow the user some choices and the ability to control color 
and themes on their accounts. 
introduction why examples
Step 2:Follow The Rules 
RRuullee 44:: MMaakkee ssuurree tthhee vviissuuaall ccoonntteennttss ooff aa ssiittee rreellaatteess ttoo 
iittss ffuunnccttiioonn.. 
 A nice-looking design must enforce the website functionality 
RRuullee 55:: RReessppeecctt GGUUII aanndd WWeebb iinntteerrffaaccee ccoonnvveennttiioonnss.. 
 Designers need to respect conventions of navigation choices, 
navigation placement, colors, and so on. 
RRuullee 66:: KKnnooww aanndd rreessppeecctt tthhee WWeebb aanndd IInntteerrnneett mmeeddiiuumm 
ccoonnssttrraaiinnttss.. 
• Don’t ignore the differences in the emerging Web medium, 
color reproduction, bandwidth limitations, and so on. 
introduction why examples
Step 3 
introduction why examples
Step 4 
Open Website designing tools like 
DDrreeaammwweeaavveerr ,, FFrroonnttPPaaggee ,, 
SSeeaaMMoonnkkeeyy,…and start designing your 
web pages. 
Save your work often!!!!!!!! 
Typically we name the home page in a web site 
“iinnddeexx..hhttmmll” 
introduction why examples
Some Things to Remember 
You do not have the layout control in a web editor that 
you do in Word or PowerPoint. 
Therefore, the web designers used ttaabblleess to control the 
layout out of their pages. If you set the borders of the 
table to 0 width, you can't see the outline of the tables in 
the web browser. 
YYoouu wwiillll ggeett vveerryy ffrruussttrraatteedd iiff 
yyoouu ttrryy ttoo ddeessiiggnn aa wweebb ppaaggee 
wwiitthhoouutt ttaabblleess.. YYoouurr ggrraapphhiiccss wwiillll 
nnoott aappppeeaarr wwhheerree yyoouu wwaanntt tthheemm.. 
introduction why examples
NNoottee:: 
Naming Web Files: 
Use all lower case (it will be easier to communicate the 
URL to others if it is all lower case). 
DO NOT have spaces in file names (some old browsers 
cannot handle spaces. You should rename graphic files if 
they have spaces) 
Try to keep file names as short as possible (this prevents 
errors in typing in URLs) 
 URL(Universal Resource Locator)= Site Address 
ex: URL of hotmail is : www.hotmail.com 
introduction why examples
Types of Web Pages 
Any web site composed from a set of web pages: 
Some of those pages are ssttaattiicc ((aabbssttrraacctt)) ppaaggeess while other pages are 
ddyynnaammiiccss ((pprrooaaccttiivvee)) ppaaggeess.. 
A dynamic page that will 
take user name and 
password and check it to 
allow login. 
A static page with no 
interaction that user will 
only read and close if. 
introduction why examples
Web Development Languages & Tools 
1. HHTTMMLL/DHTML/XHTML 
2. Java 
3. Web Design Tools e.g. FFrroonnttppaaggee, Dreamweaver. 
3. Scripting Languages e.g. VBScript, Javascript 
4. Cascading Style Sheets 
5. XML 
6. …more!!! 
introduction why 11examples
Let’s go to build a website 
AA ggoooodd aaddvviiccee ““DDoonn’’tt rreeiinnvveenntt tthhee wwhheeeell ““ 
•Use pre-designed templates. 
• Download lovely icons, backgrounds and images from the internet. 
• Use pre-programmed scripts. 
Web Design Calgary by Red Cherry 
Calgary Web Design by Red Cherry 
Let’s go to use Microsoft FrontPage. 
And learn how to build powerful website 
introduction why examples

Más contenido relacionado

Más de Red Cherry Calgary Web Design (8)

Kessler & Resnick, DDS - Broomfield Cosmetic Dentist
Kessler & Resnick, DDS - Broomfield Cosmetic DentistKessler & Resnick, DDS - Broomfield Cosmetic Dentist
Kessler & Resnick, DDS - Broomfield Cosmetic Dentist
 
Website design-calgary
Website design-calgaryWebsite design-calgary
Website design-calgary
 
Sbwire 525914
Sbwire 525914Sbwire 525914
Sbwire 525914
 
Sbwire 522548
Sbwire 522548Sbwire 522548
Sbwire 522548
 
Seo company-india
Seo company-indiaSeo company-india
Seo company-india
 
Chicago home security
Chicago home securityChicago home security
Chicago home security
 
SECURITY SYSTEMS CHICAGO
SECURITY SYSTEMS CHICAGOSECURITY SYSTEMS CHICAGO
SECURITY SYSTEMS CHICAGO
 
Easy content-creation-for-websites
Easy content-creation-for-websitesEasy content-creation-for-websites
Easy content-creation-for-websites
 

Último

办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable BricksCosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricksabhishekparmar618
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRCall In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRdollysharma2066
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
Call Girls Meghani Nagar 7397865700 Independent Call Girls
Call Girls Meghani Nagar 7397865700  Independent Call GirlsCall Girls Meghani Nagar 7397865700  Independent Call Girls
Call Girls Meghani Nagar 7397865700 Independent Call Girlsssuser7cb4ff
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 

Último (20)

办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable BricksCosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRCall In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Call Girls Meghani Nagar 7397865700 Independent Call Girls
Call Girls Meghani Nagar 7397865700  Independent Call GirlsCall Girls Meghani Nagar 7397865700  Independent Call Girls
Call Girls Meghani Nagar 7397865700 Independent Call Girls
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 

Website design-calgary-inc

  • 1.
  • 2. What is a Web site? AA wweebb ssiittee iiss:: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important tool; introduction why examples
  • 3. Step 1 Think! Before you do anything else, you need to spend time thinking about the 4w’s. What is the purpose of the web page/site? Who is your target audience? What will bring your audience back? Where will your audience be using the site? introduction why examples
  • 4. Step 2:Follow The Rules To creat a we site you must follow theses rules: RRuullee 11:: YYOOUU aarree NNOOTT tthhee UUSSEERR.. • What you understand is not what a user will understand; ask the users to design the site the way they want. RRuullee 22:: UUSSEERRSS aarree NNOOTT PPRROOFFEESSIIOONNAALLSS • Users will not think carefully about the new added features in the Web site without your directions. RRuullee 33:: GGiivvee tthhee ccoommmmoonn uusseerr aa lliittttllee ccoonnttrrooll • Allow the user some choices and the ability to control color and themes on their accounts. introduction why examples
  • 5. Step 2:Follow The Rules RRuullee 44:: MMaakkee ssuurree tthhee vviissuuaall ccoonntteennttss ooff aa ssiittee rreellaatteess ttoo iittss ffuunnccttiioonn..  A nice-looking design must enforce the website functionality RRuullee 55:: RReessppeecctt GGUUII aanndd WWeebb iinntteerrffaaccee ccoonnvveennttiioonnss..  Designers need to respect conventions of navigation choices, navigation placement, colors, and so on. RRuullee 66:: KKnnooww aanndd rreessppeecctt tthhee WWeebb aanndd IInntteerrnneett mmeeddiiuumm ccoonnssttrraaiinnttss.. • Don’t ignore the differences in the emerging Web medium, color reproduction, bandwidth limitations, and so on. introduction why examples
  • 6. Step 3 introduction why examples
  • 7. Step 4 Open Website designing tools like DDrreeaammwweeaavveerr ,, FFrroonnttPPaaggee ,, SSeeaaMMoonnkkeeyy,…and start designing your web pages. Save your work often!!!!!!!! Typically we name the home page in a web site “iinnddeexx..hhttmmll” introduction why examples
  • 8. Some Things to Remember You do not have the layout control in a web editor that you do in Word or PowerPoint. Therefore, the web designers used ttaabblleess to control the layout out of their pages. If you set the borders of the table to 0 width, you can't see the outline of the tables in the web browser. YYoouu wwiillll ggeett vveerryy ffrruussttrraatteedd iiff yyoouu ttrryy ttoo ddeessiiggnn aa wweebb ppaaggee wwiitthhoouutt ttaabblleess.. YYoouurr ggrraapphhiiccss wwiillll nnoott aappppeeaarr wwhheerree yyoouu wwaanntt tthheemm.. introduction why examples
  • 9. NNoottee:: Naming Web Files: Use all lower case (it will be easier to communicate the URL to others if it is all lower case). DO NOT have spaces in file names (some old browsers cannot handle spaces. You should rename graphic files if they have spaces) Try to keep file names as short as possible (this prevents errors in typing in URLs)  URL(Universal Resource Locator)= Site Address ex: URL of hotmail is : www.hotmail.com introduction why examples
  • 10. Types of Web Pages Any web site composed from a set of web pages: Some of those pages are ssttaattiicc ((aabbssttrraacctt)) ppaaggeess while other pages are ddyynnaammiiccss ((pprrooaaccttiivvee)) ppaaggeess.. A dynamic page that will take user name and password and check it to allow login. A static page with no interaction that user will only read and close if. introduction why examples
  • 11. Web Development Languages & Tools 1. HHTTMMLL/DHTML/XHTML 2. Java 3. Web Design Tools e.g. FFrroonnttppaaggee, Dreamweaver. 3. Scripting Languages e.g. VBScript, Javascript 4. Cascading Style Sheets 5. XML 6. …more!!! introduction why 11examples
  • 12. Let’s go to build a website AA ggoooodd aaddvviiccee ““DDoonn’’tt rreeiinnvveenntt tthhee wwhheeeell ““ •Use pre-designed templates. • Download lovely icons, backgrounds and images from the internet. • Use pre-programmed scripts. Web Design Calgary by Red Cherry Calgary Web Design by Red Cherry Let’s go to use Microsoft FrontPage. And learn how to build powerful website introduction why examples