HTML + CSS plus

Luong Tran HyHien, FIT of HCMUP, VietNam

1. The plan for site Development

2. Advanced CSS

2

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

Three phases of building a website

Phase 1. Information Architecture

Phase 2. Design

Phase 3. Development

The Plan for Site Development

Phase 1. Information Architecture Project

between the web company and the client. Define functional requirements.

• Discovery - High-level discovery meeting

• 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.

data, etc.

• SEO Plan - the URL's, page titles, meta

• 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

created that contains a page by page index of the content information structure in flow-chart form.

• Site Map Generation - A useable sitemap is

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

Select object too (black arrow)

Window Drop-down: opens all menus checked

Type tool (“LETTER T”)

Draw shape tool Draw line tool

Stroke (outline) menu

Swatches (color) menu

Type (fonts) menu

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 of media for each page • Animation • Sound • video

List graphics for each page •Logos •Bullets and icons

(can use place-holders)

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.

Logo creation and optimization

Branding the site: • • 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

Hand-drawn mockup sketch

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

Phase 2: Design • Wireframing - List all design elements that are to be displayed on the home page.

Hand-drawn mockup sketch

• Generate Mockups “Pictures” of the final design (can be sketches or finished products).

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

Parts of a Website – “Website Anatomy” The URL

You are here

Local Path:

Linking to here

Depends on WHERE you are on the site.

Link reads preservation/digital.html

You are here

Parts of a Website – “Website Anatomy” The URL

Local Path:

Linking to here

Depends on WHERE you are on the site.

The code for “down a folder” is “../”

Local path: ../images/earth.jpg

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.: – http://andrew-

hoyer.com/experiments/rain/

– http://vlog.it/ – http://lab.simurai.com/monster/ – http://andrew-

hoyer.com/experiments/walking/

CSS Selector Summary

context is: CSS_selectors { style_property_declarations } • Element Type E • Grouping • Universal • Class

E, F, G * [E].classvalue (element name E optional – meta brackets)

[E]#myID

• • Contextual

E > F E + F

– Descendent E F – Child – Adjacent

• 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”

CSS Element Boxes

Parent’s background covers margin Border

Element Content Padding

Padding

Margin

Element’s background covers padding

Box Formatting Model

margin (transparent)

border

padding (transparent)

content

element width

box width

 Provides a means to control the spatial layout of

elements; the basis for position-oriented properties

Common CSS Layout Properties

margin

padding

width

h e i g h t

border

• Width • Height • Float • Clear • Border • Padding • Margin

Width & Height

Width and height define the width and height of an element.

div id=“box”

#box {width=“50em”}

#box {height=“auto”} #box {width=“50px”}

*Width and height can be specified in pixels, ems, percentages or set to auto

#box {width=“100%”}

#box {width=“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

•

q { clear: right; }

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

• clear property possible values:

left, right, both, none (default)

Clear: (left, right, 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”

#box3 { background-color: white; border: 1px solid #000; clear: both;}

Border (top, right, bottom, left)

div id=“box”

#box { border: 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:

#box { border-color: red; border-style: dotted; border-width: 2px;

#box { border-top: red dotted 1px; border-bottom: red dotted 1px; border-left: red dotted 1px; border-right: red dotted 1px; }

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

Padding: 10px 10px;

div id=“box”

padding: 10px 10px 10px 10px;

padding-left: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-top: 10px;

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;

margin

or

margin: 10px 10px;

or

div id=“box”

margin: 10px 10px 10px 10px;

or

margin-left: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-top: 10px;

Typical Web Page (Browser)

Container

header

main

footer

#container

#banner

#nav

#content

#footer

home

HTML

href="contact.htm">contact

My Resume

Resume text

body {

font-size: 1em; }

#container {

width: 920px; }

#banner {

width: 920px; height: 120px; }

#nav {

float: left; width: 200px; }

CSS

#content {

width: 720px; }

#footer {

font-size: .8em; }

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

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.

Khả năng tìm kiếm

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 – 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