Website design india, web designing services, ecommerce website design
Website design
-
Upload
jagan-asan -
Category
Documents
-
view
667 -
download
1
description
Transcript of Website design
![Page 1: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/1.jpg)
T.THANGA JAGAN NIVASH
![Page 2: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/2.jpg)
Webpage Layout and Website Design
Technical definitions:
A webpage is a single HTML document
A website is a collection of related webpages
Designing a good website requires more than just putting together a few pages
![Page 3: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/3.jpg)
Web Page Layout
Layout of web pages is very important
Poor layout makes for -
Difficult navigation
Hard to locate information on page
Visually unappealing
![Page 4: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/4.jpg)
Tables, tables, tables!
Use tables to lay out your pages!
Make the table borders invisible
A 2x2 table works well
![Page 5: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/5.jpg)
Areas of a Web Page
Menu
Header
Content
Logo
![Page 6: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/6.jpg)
A 2 x 2 Layout
![Page 7: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/7.jpg)
Other Designs
www.adobe.com (menu on right)
www.uintafishing.com (many columns)
![Page 8: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/8.jpg)
Table within a table
![Page 9: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/9.jpg)
The outer table
![Page 10: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/10.jpg)
The inner table
![Page 11: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/11.jpg)
Centered with three columns
![Page 12: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/12.jpg)
Really complicated design!
![Page 13: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/13.jpg)
Monitors and Dimensions
Monitor resolution affects how you should lay pages out
800x600 = 50% - 760 x 420 pixels in browser window
1024x768 = 35%
640x480 = 3%* - 595 x 360 pixels
*Was 20% three years ago
![Page 14: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/14.jpg)
Dimensions in a 2x2 table
Logo
And
Menu
Header
Content
100-140wide
Up to 650 wide
Up to 760 wide*
![Page 15: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/15.jpg)
Page Width
Because monitors differ (640x480, 800x600, 1024x768), pages look different.
You can use a % width for a table, for example make it 80% of the page width
![Page 16: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/16.jpg)
Splash Page
The index.html file is called the “Splash Page”It is the key page—the first page visitors usually
seeMust be visually attractive, informative, and easy
to navigateExamples:
www.projectpuffin.orgwww.pmlodge.comwww.uncommonadv.comwww.rainforestandreef.org
![Page 17: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/17.jpg)
Organizing Information
Decide what info goes on each page
Friends page
Family page
Personal page
Hobbies page
![Page 18: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/18.jpg)
Good Web Communication
Be Concise
Limit choices – use a hierarchical structure
A hierarchy is a structured organization where some pages are at a higher level than others
Hierarchy results in a site map with multiple levels
![Page 19: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/19.jpg)
Site Map
A site map is designed to show the connections between pages
A graphical site map uses lines to connect linked pages
![Page 20: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/20.jpg)
Design Theme
Choose a common layout for your website. The Splash Page will probably differ but interior pages should be the same
Use tables to control placement throughout
![Page 21: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/21.jpg)
Consistency in Design
Use the same font throughout!
Use consistent graphics in website – do not use ultra modern on one page and calligraphy on another
Use color scheme that is consistent
![Page 22: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/22.jpg)
The Font Barrier
Only fonts you can reliably use are Times New Roman (Times) and Arial (Helvetica)
Text in site should be one of these choices
How to overcome this? Any font used in graphics is
loaded as a graphic, and does not rely upon the font being on the user’s computer
Make cool font images in Photoshop
![Page 23: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/23.jpg)
Website Design
From your existing web pages, build a website. Add more pages to site – whatever you want
Some suggestions: Resume, friends page, hobbies page
Minimum 6 pages (splash page + 5)
Use common design themeMake custom graphics in PhotoShop
Prepare graphical site map in PowerPoint to turn in when finished
![Page 24: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/24.jpg)
HOW TO MAKE A SIMPLE SITE USING BLOGGER
CREATE A BLOG .
HIDE THE NAV-BAR USING HTML CODING.
REMOVE THE ATTRIBUTION
CREATE MANY PAGES LIKE THIS AND GIVE LINKS
![Page 25: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/25.jpg)
USING GOOGLE SITES
CREATE A GOOGLE SITE ACCOUNT
DESIGN SIMPLY USING DESIGN TOOLS
CREATE A FREE DOMAIN ACCOUNT AND MAKE URL FORWARD TO YOUR GOOGLE SITE OR BLOG
![Page 26: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/26.jpg)
CREATING A OWN SITE USING HTML OR PHP
DOWNLOAD WEB PAGE MAKER SW
DESIGN YOUR PAGES
EXPORT AS HTML OR PHP
![Page 27: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/27.jpg)
HOW TO UPLOAD YOUR WEBPAGES ON WEB
BUY A HOST FOR 0$ IN FREEHOSTIA.COM
THEY WILL GIVE YOUR USERNAME PASSWORD FOR THE HOST
AND THEY WILL GIVE FTP ADDRESSES
dns1.freehostia.com
dns2.freehostia.com
![Page 28: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/28.jpg)
Download filezilla sw
Give your user name and password
Connect to the server
Copy your html or php files and image source files from your desktop to server
Now host set up is ok
![Page 29: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/29.jpg)
![Page 30: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/30.jpg)
Now select DNS forwarding in your free domain
Give dns name and ftp address
Click ok to finish
![Page 31: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/31.jpg)
Now your website is ready to view
![Page 32: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/32.jpg)
Visit:
www.cse2008.co.cc
www.classleaks.info.cm
www.tnivash.co.cc
![Page 33: Website design](https://reader037.fdocuments.us/reader037/viewer/2022102823/546996fdaf7959e3018b6e80/html5/thumbnails/33.jpg)
Thank You