1 Web Design concepts Web page design through Tables.
-
Upload
beatrix-gibbs -
Category
Documents
-
view
218 -
download
3
Transcript of 1 Web Design concepts Web page design through Tables.
![Page 1: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/1.jpg)
1
Web Design concepts
Web page design through Tables
![Page 2: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/2.jpg)
2
Some terms
Tags, attributes & element Web page Web site Web client Web server
![Page 3: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/3.jpg)
3
Website …..
Designing a good website requires more than just putting together a few pages
![Page 4: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/4.jpg)
4
Web Page Design
Design of web pages is very important because …..
Poor design makes for - Difficult navigation Hard to locate information on page Visually unappealing
![Page 5: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/5.jpg)
5
Design consistency Choose a common layout for your
website. The index page will probably differ but interior pages should be the same
Use tables/div to control placement throughout
Use the same font throughout! Use color scheme that is consistent Use a hierarchical structure
![Page 6: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/6.jpg)
Web design
Design your web site through Tables Division
6
![Page 7: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/7.jpg)
7
Tables Use tables to lay out your pages! Make the table borders invisible A 2x2 table works well
![Page 8: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/8.jpg)
8
Areas of a Web Page
Menu
Header
Content
Logo Header
![Page 9: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/9.jpg)
9
A 2 x 2 Layout
![Page 10: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/10.jpg)
10
A 2 x 2 Layout
![Page 11: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/11.jpg)
11
Table within a table
![Page 12: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/12.jpg)
12
The outer table
![Page 13: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/13.jpg)
13
The inner table
![Page 14: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/14.jpg)
14
The inner table
![Page 15: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/15.jpg)
15
Centered with three columns
![Page 16: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/16.jpg)
16
Really complicated design!
![Page 17: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/17.jpg)
17
Site Map
A site map is designed to show the connections between pages
A graphical site map uses lines to connect linked pages
![Page 18: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/18.jpg)
18
Site Map
Interior orInternal
Pages
Your Website
index.html
Friends.html Personal.html Family.html
Educational.html Hobbies.html
![Page 19: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/19.jpg)
19
Assignment – Website Design
Build your personal website. Add pages to site – like
Resume, friends page, hobbies page Minimum 4 pages Make sure design consistency
This is an individual assignment.
![Page 20: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/20.jpg)
PresentationsGroup Members Topic Date
1 Zuhair + Zain Adobe photoshop 27.2.2013
2 Faisal + Qasim Firebug 6.3.2013
3 Junaid Rashid Dreamweavor 13.3.2013
4 Nashra+Madiha+Kanwal+Aleena
Dreamweavor 13.3.2013
5 Falak sher + Usman WebMatrix 20.3.2013
6 Affan + Usman Joomla 27.3.2013
7 Ahsan+Shafqat+Iqra Wordpress 3.4.2013
8 Mustansir+ Nouman Modernizer 10.4.2013
9 Samer OSCommerce 17.4.2013
10 Zeeshan + Haris + Rabia Magento 24.4.2013
11 Ibrahim + Ali Tariq Brackets 1.5.2013
12 Sana + Farwa 8.5.2013
13 Khurram + Hasan 15.5.2013
14 Nouman + Zeeshan + Sahar 22.5.201320
![Page 21: 1 Web Design concepts Web page design through Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062802/56649ea85503460f94bab520/html5/thumbnails/21.jpg)
21
Thanx!