Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 3: HTML + CSS plus

1HTML + CSS plus
Luong Tran Hy Hien, FIT of HCMUP, VietNam
2Contents
1. The plan for site Development
2. Advanced CSS
The Plan for Site Development
Course Project:
The “About Me” site
Throughout this course we will be building a personal site with the theme 
“about me” as practice for future web projects. Each class we will learn 
new techniques for improving and adding features to this site.
The Plan for Site Development
Phase 1. Information Architecture
Phase 2. Design
Phase 3. Development
Three phases of building a website
The Plan for Site Development
Phase 1. Information Architecture Project 
• Discovery - High-level discovery meeting 
between the web company and the client. 
Define functional requirements. 
• Site Map Generation - A useable sitemap is 
created that contains a page by page index 
of the content information structure in 
flow-chart form.
• Aggregation - Gather together as much of 
the core content as possible. This includes 
media and text.
The Plan for Site Development
Phase 2: Design
• Creative Discovery - Discuss the site 
audience, user needs and brand guidelines. 
Quality Assurance - review and progress 
report. 
• Wireframing - List all design elements that 
• are to be displayed on the home page. 
• Generate Mockups – “Pictures” of the final 
design (can be sketches or finished products).
• Production ready designs - Production ready 
media is created and development beings.
The Plan for Site Development
Phase 3: Development 
• Technical Discovery - validate the 
technology requirements.
• Technical Collaboration / Client Review 
Session - Client review and progress 
report. 
• SEO Plan - the URL's, page titles, meta 
data, etc. 
• Template Development -Based on the 
production ready designs, we are ready 
to develop html templates, styles, and 
programming. 
The Plan for Site Development
Phase 1. Information Architecture Project 
• Discovery - High-level discovery meeting between 
the web company and the client. Define functional 
requirements. 
You can think of Phase 1 as the 
“Business Plan” for the website.
Let’s work in groups of two to fill out 
the:
Information Architecture Project Plan
The Plan for Site Development
Phase 1. Information Architecture Project 
• Site Map Generation - A useable sitemap is 
created that contains a page by page index of the 
content information structure in flow-chart form.
Site Map examples
Simple flow-chart style site map
Site Map examples
Traditional Flow-chart form
Cấu trúc website – phân cấp
Company Logo
Site Map examples
Contemporary Flow-chart form
Cấu trúc website – nối tiếp
Company Logo
Cấu trúc website – mạng nhện
Company Logo
Creating a digital version of your site map in Illustrator
Window Drop-down: 
opens all menus checked
Stroke (outline) menu
Swatches (color) menu
Type (fonts) menu
Type tool (“LETTER T”)
Select object too (black arrow)
Draw shape tool
Draw line tool
The Plan for Site Development
Phase 1. Information Architecture Project 
• Aggregation - Gather together as much of the core 
content as possible. This includes media and text.
Gather and organize the Resources for your site
List of Links appearing on each page
List graphics for each page
•Logos
•Bullets and icons
(can use place-holders)
List of media for each page
• Animation
• Sound
• video
The Plan for Site Development
Phase 2: Design
• Creative Discovery - Discuss the site audience, user 
needs and brand guidelines.
• Quality Assurance - review and progress report. 
Branding the site:
• Logo creation and optimization
• Color scheme choices
• Determine who the expected users are
(Customers? Employers? Readers? Friends?)
Logo designs
• What are others in your industry doing?
• Can you use symbols?
Google images is a great tool to help you answer these 
questions.
Color schemes
• What looks good?
• What are other companies doing
note: red/blue are common in IT, blue/purple/light blue are common in 
healthcare, orange/brown is common in photography)
Note how color schemes for logos and website vary by industry.
Why do you think that might be?
How do certain colors make you feel?
Color schemes
Color associations and customer psychology
When colors are 
applied in 
unexpected ways, 
they can change a 
logos meaning! 
Would you buy a 
brown-green food?
Color schemes
How does changing the website color scheme affect the page?
Color schemes
Pick 3-5 colors for your page color scheme. 
Define them in terms of web color.
Web colors are in hexadecimal, or 6-digit colors.
Color schemes
hexadecimal, or 6-digit colors, used in HTML and CSS code
You can click on the 
foreground color in Adobe 
Photoshop or Illustrator to see 
the foreground color’s 
hexadecimal number.
Color schemes
Sometimes the color schemes are based on photos or objects
The Plan for Site Development
Phase 2: Design
•Wireframing - List all 
design elements 
that are to be 
displayed on the 
home page. 
•Generate Mockups 
“Pictures” of the 
final design (can be 
sketches or finished 
products).
Hand-drawn mockup sketch
Hand sketched website mockups vs. digital mockups
Usually the digital mockup is made based on the quick hand-sketch. Use the 
mockup to present to clients or buyers, or just to plan for your own site!
“Wireframe” type website mockup
Printed Digital Mockup for investor
The Plan for Site Development
Phase 2: Design
• Wireframing - List 
all design elements 
that are to be 
displayed on the 
home page. 
• Generate Mockups 
“Pictures” of the 
final design (can be 
sketches or finished 
products).
Hand-drawn mockup sketch
The Plan for Site Development
Phase 2: Design
Production ready designs - Production ready 
media is created and development beings.
This is where we start working on real web 
versions of the site using HTML markup and 
Adobe Dreamweaver.
Adobe Dreamweaver
Note
Quick Note About File Names
Spaces will be interpreted by the web server as “%20”:
My First Page.html becomes My%20First%20Page.html
On certain servers (i.e. older Linux Servers) capital letters can be 
changed to lower case:
MyFirstPage.html becomes myfirstpage.html
Generally use lower case file names and no spaces in web files 
in order to ensure that the files work properly on all web servers.
HTML vs CSS
In modern web design, HTML is used ONLY for the framework of 
the site. Cascading Style Sheets (CSS) is used for many of the 
attributes we have discussed in this lesson (font characteristics, 
layout, and more).
Parts of a Website – “Website Anatomy”
The URL
The Root Directory is where 
your data that makes up your 
site is located. It appears at 
www.yourdomain.com.
It may contain both files and 
folders.
It may contain nested folders 
(folders within folders).
Parts of a Website – “Website Anatomy”
The URL
Paths
A path is a “map” to how to 
find a file on your site.
Local Paths: Assume a set 
location
Global Paths: Full path, can be 
accessed from anywhere.
Contains full URL.
i.e. 
Parts of a Website – “Website Anatomy”
The URL
Local Path:
Depends on WHERE you are 
on the site.
Link reads
preservation/digital.html
You are here
Linking to here
Parts of a Website – “Website Anatomy”
The URL
Local Path:
Depends on WHERE you are 
on the site.
The code for “down a folder” 
is “../”
Local path:
../images/earth.jpg
You are here
Linking to here
Parts of a Website – “Website Anatomy”
The index page
Default Root Page
Each folder contains a default 
file (the file that shows when 
no directory is typed).
The file is normally named:
Index.html 
Index.htm
Index.php
Index.aspx/Default.aspx
**ALL FOLDERS should 
contain an index file!
Advanced CSS
Examples of CSS
• CSS provides a powerful and 
still-evolving toolkit of style 
properties to develop 
advanced Web apps, e.g.:
– 
hoyer.com/experiments/rain/
– 
– 
– 
hoyer.com/experiments/walking/
CSS Selector Summary
context is: CSS_selectors { style_property_declarations }
• Element Type E
• Grouping E, F, G
• Universal *
• Class [E].classvalue
(element name E optional – meta brackets)
• Id [E]#myID
• Contextual
– Descendent E F
– Child E > F
– Adjacent E + F
• Pseudo-element E:pseudo-element
• Attribute E[foo="hi"] (literal brackets)
CSS Style Properties
• Sufficiently expressive for fine-grained control
– don’t give designers a reason to cheat
• Too many properties to cover comprehensively 
(many dozens)
• We’ll focus on a few of the most important ones
– text properties
– layout and positional control, including the 
“box model”
Padding
CSS Element Boxes
Element
Content
Padding
Margin
Element’s background covers padding
Parent’s background covers margin Border
Box Formatting Model
element width
margin (transparent)
border
padding (transparent)
content
box width
 Provides a means to control the spatial layout of 
elements; the basis for position-oriented properties
Common CSS Layout Properties
• Width
• Height
• Float
• Clear
• Border
• Padding
• Margin
width
h
eig
h
t
padding
margin
border
Width & Height
div id=“box”
#box {width=“50px”}
#box {width=“50em”} 
#box {width=“100%”}
#box {width=“auto”} 
Width and height define the width and height of an element.
#box {height=“auto”} 
*Width and height can be 
specified in pixels, ems, 
percentages or set to auto
Float: (left, right)
Float property makes elements float to the right or 
left of the screen, positioned where they are in the 
HTML. Floating allows word wrapping. 
div id=“box”
Here is some text which 
wraps around the box 
floated to the left.
#box {float:left; margin-right: 10px;}
Floats
• a floated element shifts out of the 
normal document left-to-right layout 
flow
• if there is text beside a float, the text will 
wrap around the floated element
.right_img { float: right; width: 200px; }
• to escape the wrapping behavior, use 
the “clear” property, which prevents 
overlap of floating elements
q { clear: right; }
• clear property possible values: 
left, right, both, none (default)
Clear: (left, right, both)
#box3 { background-color: white; border: 
1px solid #000; clear: both;} 
When elements are floated, they wrap around each other to 
form a “caravan.” The clear property detaches an element 
from the “caravan” and allows it to start on a new line.
div id=“box1” div id=“box2”
div id=“box3”
Border (top, right, bottom, left)
#box { 
border-color: red; 
border-style: dotted; 
border-width: 2px;
div id=“box”
#box { 
border: red dotted 1px;
#box {
border-top: red dotted 1px;
border-bottom: red dotted 1px;
border-left: red dotted 1px;
border-right: red dotted 1px;
}
You can define the entire border or 
only the top, bottom, left, or right. You 
can also define the border using one 
declaration. The code could be any of 
the following:
Padding (top, right, bottom, left)
Padding is the space between the text/content and the border. You can use 
padding for all around the element or specify each side of the rectangle 
separately.
The code could be any of the following:
padding: 10px;
Padding: 10px 10px;
padding: 10px 10px 10px 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
div id=“box”
padding
Margin (top, right, bottom, left)
Margin is the space outside the text/content and the border. You can use 
margin for all around the element or specify each side of the rectangle 
separately.
The code could be any of the following:
margin: 10px;
or
margin: 10px 10px;
or
margin: 10px 10px 10px 10px;
or
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
margin
div id=“box”
Typical Web Page (Browser)
header
footer
mainmenu
Container
#container
#banner
#nav #content
#footer
home
<a 
href="contact.htm">contact
My Resume
Resume text
Copyright info here
HTML
body {
font-size: 1em; }
#container { 
width: 920px; }
#banner { 
width: 920px; height: 120px; }
#nav { 
float: left; width: 200px; }
#content { 
width: 720px; }
#footer { 
font-size: .8em; }
CSS
Thiết kế Website
• Interface Design
• Page Design
• Graphic Design
Interface Design
• Tính định hướng
• Trang Dead-end
• Khả năng tìm kiếm
Tính định hướng
• Trả lời các câu hỏi:
– Đang ở đâu?
– Có thể làm gì?
– Có thể đi tiếp tới đâu?
• Biểu tượng nhất quán, dễ hiểu, theo chuẩn
quy định
63
Trang Dead-end
• Trang “dead-end” thất vọng, mất khả
năng đến với các trang khác.
• Mỗi trang có ít nhất một liên kết. Luôn có
khả năng quay lại trang chủ hoặc các
trang chủ chốt trên website.
64
Khả năng tìm kiếm
65
Page Design
• Bố cục Layout
• Kích thước Khung nhìn
• Tính nhất quán
• Tính ổn định
• Tương thích trình duyệt
Bố cục Layout
Layout : 2 cột
Layout : Table within a table
Layout : Table within a table
Layout : Table within a table
Layout : Table within a table
Layout – cấu trúc phức tạp
Tính nhất quán
• Mọi website đều được thiết lập quanh
Homepage
• Xây dựng theo cấu trúc cơ bản của
website
• Nhất quán, phù hợp với các thuộc tính đã
định dạng trước
Tính ổn định
• Ổn định về cấu trúc và nội dung
• Cấu trúc: các thành phần được đặt đúng
chỗ và hoạt động nhịp nhàng.
• Nội dung:
– Các mối liên kết luôn đảm bảo có đích đến
– Nội dung luôn đảm bảo thích hợp và phải cập
nhật cho phù hợp với ngữ cảnh tại thời điểm
độc giả duyệt web
Graphics Design
• Font chữ
• Màu sắc
• Hình ảnh
Các mô hình ứng dụng Web
Các mô hình ứng dụng Web
• Kiến trúc – Thiết kế
• Các Mô hình ứng dụng
• Các Mô hình triển khai ứng dụng Web
Kiến trúc xử lý
Mô hình logic
Mô hình ứng dụng máy đơn cục bộ
Mô hình ứng dụng máy đơn mạng cục bộ
Mô hình ứng dụng mạng
Internet
Mô hình ứng dụng mạng
Internet
• Tăng cường phạm vi sử dụng
• Giải quyết bài toán giao tiếp
• Vấn đề tốc độ:
– Xét thời gian và khối lượng thông tin
• Vấn để bảo mật
Mô hình ứng dụng Web
Mô hình Logic
Các mô hình triển khai
Xử lý hệ khách
• Ưu điểm
– Giao diện đẹp
– Khả năng tương tác cao
– Giảm tải cho Server
• Khuyết điểm
– Khó phát triển
– Đòi hỏi phần mềm phụ hỗ trợ
– Có thể không tương thích trình duyệt
Xử lý hệ phục vụ
• Ưu điểm
– Phát triển đơn giản
– Dễ triển khai và bảo trì
– Chia sẽ được dữ liệu
• Khuyết điểm
– Giao diện người dùng thô sơ
– Tính tương tác kém
Xử lý hệ khách
Ngôn ngữ Script
• Ngôn ngữ thông dịch với trình duyệt web là hệ
thông dịch
• Giúp trang web có tính tương tác
– Cho phép đưa các hiệu ứng động vào trang HTML
– Tương tác với các sự kiện của trang HTML
– Thay đổi nội dung của các đối tượng HTML
– 
Xử lý hệ phục vụ
Q & A
THE END