Bài giảng phát triển ứng dụng web – web programming chương 3 HTML + CSS plus

• Site Map Generation - A useable sitemap is created that contains a page by page index of the content information structure in flow-chart form.. The Plan for Site DevelopmentPhase 2: D

HTML + CSS plus

Luong Tran Hy Hien, FIT of HCMUP, VietNam

Contents

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

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

http://www.spaceotechnologies.com/digital-mock-up/

The Plan for Site Development

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:

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

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 http://www

Parts of a Website – “Website Anatomy”

Parts of a Website – “Website Anatomy”

Parts of a Website – “Website Anatomy”

The index page

Default Root Page

Each folder contains a default

file (the file that shows when

**ALL FOLDERS should

contain an index file!

Advanced CSS

hoyer.com/experiments/walking/

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

“box model”

CSS Element Boxes

ElementContent

PaddingMargin

Element’s background covers paddingParent’s background covers margin Border

Box Formatting Model

Common CSS Layout Properties

border

Width & Height

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;}

• 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; }

<img class=“right_img” src=“…” alt=“…”>

• 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=“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:

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

Typical Web Page (Browser)

header

footer

main menu

Container

#banner

#footer

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

Bố cục Layout

Layout : 2 cột

Layout : Table within a table

Layout – cấu trúc phức tạp

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

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

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

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