Soumettre la recherche
Mettre en ligne
Creating Web Sites with HTML and CSS
•
Télécharger en tant que ODP, PDF
•
3 j'aime
•
4,638 vues
BG Java EE Course
Suivre
Spirituel
Signaler
Partager
Signaler
Partager
1 sur 42
Télécharger maintenant
Recommandé
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
Introduction to HTML
Introduction to HTML
Professional Guru
Presentation html
Presentation html
Billy Tierra
Creating a webpage in html
Creating a webpage in html
Shrey Goswami
HTML
HTML
CONNECTINGTO
HTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
shabab shihan
HTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
Recommandé
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
Introduction to HTML
Introduction to HTML
Professional Guru
Presentation html
Presentation html
Billy Tierra
Creating a webpage in html
Creating a webpage in html
Shrey Goswami
HTML
HTML
CONNECTINGTO
HTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
shabab shihan
HTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
Learning HTML
Learning HTML
Md. Sirajus Salayhin
Intr To Html & Xhtml
Intr To Html & Xhtml
Digital Insights - Digital Marketing Agency
Html basic
Html basic
Viccky Khairnar
HTML Fundamentals
HTML Fundamentals
BG Java EE Course
Html1
Html1
learnt
Html ppt
Html ppt
Ruchi Kumari
Html
Html
Nisa Soomro
JSP Custom Tags
JSP Custom Tags
BG Java EE Course
Basic HTML
Basic HTML
coachhahn
Html - Tutorial
Html - Tutorial
adelaticleanu
Html ppt
Html ppt
Iblesoft
WWW and HTTP
WWW and HTTP
BG Java EE Course
Learning Html
Learning Html
Damian Gonz
Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners
MediaLinkers Kennesaw
Html
Html
EPAM Systems
Html Ppt
Html Ppt
vijayanit
Html Tutorial
Html Tutorial
DenMas Hengky
Html basics
Html basics
mcatahir947
Introduction To HTML
Introduction To HTML
Mehul Patel
Html
Html
Lakshmy TM
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Hatem Mahmoud
Page Layout 2010
Page Layout 2010
Cathie101
Contenu connexe
Tendances
Learning HTML
Learning HTML
Md. Sirajus Salayhin
Intr To Html & Xhtml
Intr To Html & Xhtml
Digital Insights - Digital Marketing Agency
Html basic
Html basic
Viccky Khairnar
HTML Fundamentals
HTML Fundamentals
BG Java EE Course
Html1
Html1
learnt
Html ppt
Html ppt
Ruchi Kumari
Html
Html
Nisa Soomro
JSP Custom Tags
JSP Custom Tags
BG Java EE Course
Basic HTML
Basic HTML
coachhahn
Html - Tutorial
Html - Tutorial
adelaticleanu
Html ppt
Html ppt
Iblesoft
WWW and HTTP
WWW and HTTP
BG Java EE Course
Learning Html
Learning Html
Damian Gonz
Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners
MediaLinkers Kennesaw
Html
Html
EPAM Systems
Html Ppt
Html Ppt
vijayanit
Html Tutorial
Html Tutorial
DenMas Hengky
Html basics
Html basics
mcatahir947
Introduction To HTML
Introduction To HTML
Mehul Patel
Html
Html
Lakshmy TM
Tendances
(20)
Learning HTML
Learning HTML
Intr To Html & Xhtml
Intr To Html & Xhtml
Html basic
Html basic
HTML Fundamentals
HTML Fundamentals
Html1
Html1
Html ppt
Html ppt
Html
Html
JSP Custom Tags
JSP Custom Tags
Basic HTML
Basic HTML
Html - Tutorial
Html - Tutorial
Html ppt
Html ppt
WWW and HTTP
WWW and HTTP
Learning Html
Learning Html
Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners
Html
Html
Html Ppt
Html Ppt
Html Tutorial
Html Tutorial
Html basics
Html basics
Introduction To HTML
Introduction To HTML
Html
Html
Similaire à Creating Web Sites with HTML and CSS
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Hatem Mahmoud
Page Layout 2010
Page Layout 2010
Cathie101
Page Layout 2010
Page Layout 2010
guest0f1e7f
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
sanjay2211
CSS For Online Journalism
CSS For Online Journalism
amherstwire
Advance Css
Advance Css
vijayta
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5
dharshyamal
HTML5- Create divisions in a web page
HTML5- Create divisions in a web page
Grayzon Gonzales, LPT
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
thebeebs
Slice and Dice
Slice and Dice
Doncho Minkov
Html Expression Web
Html Expression Web
Mark Frydenberg
Css
Css
MAGNA COLLEGE OF ENGINEERING
CSS Layout Tutorial
CSS Layout Tutorial
hstryk
CSS
CSS
anandha ganesh
Block2 Session2 Presentation
Block2 Session2 Presentation
Michael Gwyther
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Tom Hapgood
introduction to web technology
introduction to web technology
vikram singh
Web Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros Developer
Nyros Technologies
Webpages And Dynamic Content
Webpages And Dynamic Content
maycourse
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
sritikumar
Similaire à Creating Web Sites with HTML and CSS
(20)
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Page Layout 2010
Page Layout 2010
Page Layout 2010
Page Layout 2010
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
CSS For Online Journalism
CSS For Online Journalism
Advance Css
Advance Css
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5
HTML5- Create divisions in a web page
HTML5- Create divisions in a web page
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Slice and Dice
Slice and Dice
Html Expression Web
Html Expression Web
Css
Css
CSS Layout Tutorial
CSS Layout Tutorial
CSS
CSS
Block2 Session2 Presentation
Block2 Session2 Presentation
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
introduction to web technology
introduction to web technology
Web Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros Developer
Webpages And Dynamic Content
Webpages And Dynamic Content
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
Plus de BG Java EE Course
Rich faces
Rich faces
BG Java EE Course
Java Server Faces (JSF) - advanced
Java Server Faces (JSF) - advanced
BG Java EE Course
Java Server Faces (JSF) - Basics
Java Server Faces (JSF) - Basics
BG Java EE Course
JSTL
JSTL
BG Java EE Course
Unified Expression Language
Unified Expression Language
BG Java EE Course
Java Server Pages
Java Server Pages
BG Java EE Course
Web Applications and Deployment
Web Applications and Deployment
BG Java EE Course
Java Servlets
Java Servlets
BG Java EE Course
CSS
CSS
BG Java EE Course
HTML: Tables and Forms
HTML: Tables and Forms
BG Java EE Course
JavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals
BG Java EE Course
Processing XML with Java
Processing XML with Java
BG Java EE Course
Introduction to XML
Introduction to XML
BG Java EE Course
Data Access with JDBC
Data Access with JDBC
BG Java EE Course
Introduction to-sql
Introduction to-sql
BG Java EE Course
Introduction to-RDBMS-systems
Introduction to-RDBMS-systems
BG Java EE Course
Basic data-structures-v.1.1
Basic data-structures-v.1.1
BG Java EE Course
Basic input-output-v.1.1
Basic input-output-v.1.1
BG Java EE Course
Strings v.1.1
Strings v.1.1
BG Java EE Course
Object-oriented concepts
Object-oriented concepts
BG Java EE Course
Plus de BG Java EE Course
(20)
Rich faces
Rich faces
Java Server Faces (JSF) - advanced
Java Server Faces (JSF) - advanced
Java Server Faces (JSF) - Basics
Java Server Faces (JSF) - Basics
JSTL
JSTL
Unified Expression Language
Unified Expression Language
Java Server Pages
Java Server Pages
Web Applications and Deployment
Web Applications and Deployment
Java Servlets
Java Servlets
CSS
CSS
HTML: Tables and Forms
HTML: Tables and Forms
JavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals
Processing XML with Java
Processing XML with Java
Introduction to XML
Introduction to XML
Data Access with JDBC
Data Access with JDBC
Introduction to-sql
Introduction to-sql
Introduction to-RDBMS-systems
Introduction to-RDBMS-systems
Basic data-structures-v.1.1
Basic data-structures-v.1.1
Basic input-output-v.1.1
Basic input-output-v.1.1
Strings v.1.1
Strings v.1.1
Object-oriented concepts
Object-oriented concepts
Dernier
Best Astrologer Vashikaran Specialist in Germany and France Black Magic Exper...
Best Astrologer Vashikaran Specialist in Germany and France Black Magic Exper...
Amil Baba Naveed Bangali
Genesis 1:10 || Meditate the Scripture daily verse by verse
Genesis 1:10 || Meditate the Scripture daily verse by verse
maricelcanoynuay
St. Louise de Marillac and Abandoned Children
St. Louise de Marillac and Abandoned Children
Famvin: the Worldwide Vincentian Family
Connaught Place, Delhi Call girls :8448380779 Model Escorts | 100% verified
Connaught Place, Delhi Call girls :8448380779 Model Escorts | 100% verified
Delhi Call girls
Authentic Black magic, Kala ilam expert in UAE and Kala ilam specialist in S...
Authentic Black magic, Kala ilam expert in UAE and Kala ilam specialist in S...
baharayali
Deerfoot Church of Christ Bulletin 5 5 24
Deerfoot Church of Christ Bulletin 5 5 24
deerfootcoc
Zulu - The Epistle of Ignatius to Polycarp.pdf
Zulu - The Epistle of Ignatius to Polycarp.pdf
Filipino Tracts and Literature Society Inc.
St. Louise de Marillac and Care of the Sick Poor
St. Louise de Marillac and Care of the Sick Poor
Famvin: the Worldwide Vincentian Family
Emails, Facebook, WhatsApp and the Dhamma (English and Chinese).pdf
Emails, Facebook, WhatsApp and the Dhamma (English and Chinese).pdf
OH TEIK BIN
Hire Best Next Js Developer For Your Project
Hire Best Next Js Developer For Your Project
Cyanic lab
Codex Singularity: Search for the Prisca Sapientia
Codex Singularity: Search for the Prisca Sapientia
jfrenchau
The Revelation Chapter 4 Working Copy.docx
The Revelation Chapter 4 Working Copy.docx
Fred Gosnell
MEIDUNIDADE COM JESUS PALESTRA ESPIRITA1.pptx
MEIDUNIDADE COM JESUS PALESTRA ESPIRITA1.pptx
MneasEntidades
Deerfoot Church of Christ Bulletin 4 28 24
Deerfoot Church of Christ Bulletin 4 28 24
deerfootcoc
Famous Kala Jadu, Black magic expert in UK and Kala ilam expert in Saudi Arab...
Famous Kala Jadu, Black magic expert in UK and Kala ilam expert in Saudi Arab...
baharayali
Amil baba in Lahore /Amil baba in Karachi /Amil baba in Pakistan
Amil baba in Lahore /Amil baba in Karachi /Amil baba in Pakistan
Amil Baba Mangal Maseeh
Genesis 1:2 - Meditate the Scripture Daily bit by bit
Genesis 1:2 - Meditate the Scripture Daily bit by bit
maricelcanoynuay
Verified Amil baba in Pakistan Amil baba in Islamabad Famous Amil baba in Ger...
Verified Amil baba in Pakistan Amil baba in Islamabad Famous Amil baba in Ger...
Amil Baba Naveed Bangali
"The Magnificent Surah Rahman: PDF Version"
"The Magnificent Surah Rahman: PDF Version"
aijazuddin14
Popular Kala Jadu, Black magic expert in Karachi and Kala jadu expert in Laho...
Popular Kala Jadu, Black magic expert in Karachi and Kala jadu expert in Laho...
baharayali
Dernier
(20)
Best Astrologer Vashikaran Specialist in Germany and France Black Magic Exper...
Best Astrologer Vashikaran Specialist in Germany and France Black Magic Exper...
Genesis 1:10 || Meditate the Scripture daily verse by verse
Genesis 1:10 || Meditate the Scripture daily verse by verse
St. Louise de Marillac and Abandoned Children
St. Louise de Marillac and Abandoned Children
Connaught Place, Delhi Call girls :8448380779 Model Escorts | 100% verified
Connaught Place, Delhi Call girls :8448380779 Model Escorts | 100% verified
Authentic Black magic, Kala ilam expert in UAE and Kala ilam specialist in S...
Authentic Black magic, Kala ilam expert in UAE and Kala ilam specialist in S...
Deerfoot Church of Christ Bulletin 5 5 24
Deerfoot Church of Christ Bulletin 5 5 24
Zulu - The Epistle of Ignatius to Polycarp.pdf
Zulu - The Epistle of Ignatius to Polycarp.pdf
St. Louise de Marillac and Care of the Sick Poor
St. Louise de Marillac and Care of the Sick Poor
Emails, Facebook, WhatsApp and the Dhamma (English and Chinese).pdf
Emails, Facebook, WhatsApp and the Dhamma (English and Chinese).pdf
Hire Best Next Js Developer For Your Project
Hire Best Next Js Developer For Your Project
Codex Singularity: Search for the Prisca Sapientia
Codex Singularity: Search for the Prisca Sapientia
The Revelation Chapter 4 Working Copy.docx
The Revelation Chapter 4 Working Copy.docx
MEIDUNIDADE COM JESUS PALESTRA ESPIRITA1.pptx
MEIDUNIDADE COM JESUS PALESTRA ESPIRITA1.pptx
Deerfoot Church of Christ Bulletin 4 28 24
Deerfoot Church of Christ Bulletin 4 28 24
Famous Kala Jadu, Black magic expert in UK and Kala ilam expert in Saudi Arab...
Famous Kala Jadu, Black magic expert in UK and Kala ilam expert in Saudi Arab...
Amil baba in Lahore /Amil baba in Karachi /Amil baba in Pakistan
Amil baba in Lahore /Amil baba in Karachi /Amil baba in Pakistan
Genesis 1:2 - Meditate the Scripture Daily bit by bit
Genesis 1:2 - Meditate the Scripture Daily bit by bit
Verified Amil baba in Pakistan Amil baba in Islamabad Famous Amil baba in Ger...
Verified Amil baba in Pakistan Amil baba in Islamabad Famous Amil baba in Ger...
"The Magnificent Surah Rahman: PDF Version"
"The Magnificent Surah Rahman: PDF Version"
Popular Kala Jadu, Black magic expert in Karachi and Kala jadu expert in Laho...
Popular Kala Jadu, Black magic expert in Karachi and Kala jadu expert in Laho...
Creating Web Sites with HTML and CSS
1.
2.
3.
Floating DIVs and
DIVs Behaving Like Tables
4.
Vertical Alignment of
DIVs
5.
Centering Site Contents
6.
Web Site with
Frames
7.
Web Site with
Tables
8.
Web Site with
DIVs
9.
Slice and Dice:
Showcases
10.
11.
12.
Fixed width –
what resolution (800, 1024, …)?
13.
Fluid width –
which parts will resize?
14.
Identify site sections
15.
Header, main, footer,
columns, navigation, etc.
16.
Decide on the
layout model
17.
DIVs vs. tables
(any good reason to use tables?)
18.
19.
Text vs. images
– which belongs to the content and which is part of the styling?
20.
Create the page
layout
21.
Create the layout
DIVs and define their CSS
22.
Create the contents
of each section
23.
Test the site
in different Web browsers
24.
25.
26.
900px-1000px page width
is OK
27.
28.
Beware of very
large screens (e.g. 1920 x 1200)
29.
Fix the min-width
for the main <div>
30.
31.
The main content
usually has some main section, sidebars or navigation controls
32.
The main section
could be split in columns Main section Header Footer Left Side Bar Right Side Bar Column 1 Column 2 Column 3
33.
34.
35.
When they are
floating, you can fix their width, but height is determined by their content (or is fixed)
36.
When height is
determined by content, background may not be applied properly
37.
Footer must also
be floating with clear:left
38.
39.
40.
When they are
floating, you can fix their width, but height is determined by their content (or is fixed)
41.
When height is
determined by content, background may not be applied properly
42.
Footer must also
be floating with clear:left
43.
44.
The parent container's
height can be less left <div> Floating-right <div> Non-floating <div> The container <div> has height based on its non-floating content
45.
46.
47.
48.
#row { display:
table-row; }
49.
50.
<div id="row">
51.
<div id="left">Left Column</div>
52.
<div id="middle">Middle Column</div>
53.
<div id="right">Right Column</div>
54.
</div>
55.
</div>
56.
57.
58.
#row { display:
table-row; }
59.
60.
<div id="row">
61.
<div id="cell">Vertically Centered</div>
62.
</div>
63.
64.
65.
66.
67.
The presentation should
live in the CSS
68.
When the CSS
is disabled, the site should look like an article with titles, lists and paragraphs
69.
70.
71.
Transparent PNG not
supported by old browsers
72.
PNG files are
larger than GIF
73.
GIF supports less
colors than PNG
74.
GIF supports animation
75.
76.
77.
The width of
the content is fixed
78.
79.
margin: 20px auto;
80.
81.
<head>
82.
<style type="text/css">
83.
body { background-color:
#CCCCCC; }
84.
#site-contents {
85.
width: 940px; margin:
20px auto; }
86.
</style>
87.
</head>
88.
<body>
89.
<div id="site-contents">
90.
<h1>Welcome to our
Web site!</h1>
91.
...
92.
</div>
93.
</body>
94.
</html>
95.
96.
97.
Works for small
and simple Web sites
98.
99.
<frame src="header.html" scrolling="no"
100.
noresize="yes" />
101.
<frameset cols="126,*" frameborder="no"
border="0"
102.
framespacing="0">
103.
<frame src="left.html" name="leftFrame"
104.
scrolling="no" noresize="yes" />
105.
<frame src="welcome.html" name="mainFrame"
/>
106.
</frameset>
107.
</frameset>
108.
109.
110.
111.
<tr class="headerRow">
112.
<td class="logoCell">Logo</td>
113.
<td class="headerCell">Header Text</td>
114.
</tr>
115.
<tr valign="top">
116.
<td class="menuCell">Menu</td>
117.
<td class="mainContentCell">Main Content</td>
118.
</tr>
119.
<tr class="footerRow">
120.
<td colspan="2">Footer</td></tr>
121.
</table>
122.
123.
124.
125.
<div id="headerLogo">Logo</div>
126.
<div id="headerText">Header</div>
127.
</div>
128.
<div id="container">
129.
<div id="leftSidebar">Menu</div>
130.
<div id="mainContent">Main Content</div>
131.
</div>
132.
<div id="footer">Footer</div>
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
Use table, slice
the image to fit the needed rows and columns
147.
Leave the text
in the image
148.
149.
Inner tag has
the underline as background image, repeat-x, positioned in the bottom
150.
Note: the underline
background image is 1px wide to save bandwidth!
151.
152.
But soon will
be
153.
We can create
them with multiple images in table
154.
Too much code
155.
jQuery to the
rescue!
156.
157.
See the file:
site-sample.png
158.
159.
See the file:
architecture.psd
Télécharger maintenant