Bài thực hành 1 HTML và CSS

Bước 1: Mở Netbean Menu File New project b.. Bước 3: Dùng Dreamweaver để thiết kế giao diện cho trang web... Bước 1:Viết code cho trang index.jspThẻ : Mô tả nội dụng 1 trang web Thẻ

TRƯỜNG ĐẠI HỌC KỸ THUẬT CÔNG NGHỆ

KHOA CÔNG NGHỆ THÔNG TIN

1 Tạo project trên Netbean

a Bước 1: Mở Netbean Menu File New project

b Bước 2: Chọn loại project

c Bước 3: Nhập tên project

d Bước 4: Nhấn Finish để tạo project mới

2 Thiết kế trang web bằng Dreamweaver

a Bước 1: Tạo file css qui định cách hiển thị của các tag

b Bước 2: Mở trang index.jsp ở trên

c Bước 2: Bấm F6 để chạy thử trang web.

d Bước 3: Dùng Dreamweaver để thiết kế giao diện cho trang web

e Bước 4: Mở trang index.jsp và thiết kế

3 Làm quen với HTML và CSS để thiết kế trang web

a Bước 1:Viết code cho trang index.jsp

Thẻ <title> : Mô tả nội dụng 1 trang web

Thẻ <link/> : Sử dụng add file css vào trang html

b Bước 2: Tạo div chính cho phần body

Trong phần body chúng ta tạo 1 cái div bao quanh nội dung với id=”wrapper”.Tạo các div chính như giao diện đã yêu cầu: header, content, footer

Trong div header chúng ta chia 3 div con bên trong: logo, banner và navBar.

Trong div content tạo 2 div con bên trong: sidebar, primary

Trong div primary tạo 3 div con: Welcome, tier-1, tier-2

Tạo div clear : sử dụng để đẩy footer xuống phía dưới.

Trong phần footer chúng ta có 2 phần left và bar, tạo 2 div cho footer như sau:

Đến đây chúng ta xong bước tạo các div chính cho 1 giao diện web.

c Bước 3: Thiết kế div header, chúng ta xem code như sau

Code div logo:

Code div banner:

Code div navBar

Xong phần header.

d Bước 4: Thiết kế div content Code như sau

Code div sidebar

Trong div sidebar tạo 1 div cho phần search như sau:

o Trong div sidebar tạo div thứ 2 cho phần feature như sau:

Trong div sidebar tạo div thứ 3 cho phần tin tức như sau:

Kết thúc div sidebarCode div primary:

Code div welcome:

Code div tier-1

Code div tier-2

Kết thúc phần content

e Bước 5: Thiết kế div footer

Kết thúc phần HTML, tiếp theo chúng ta qua phần CSS

4 Viết CSS cho giao diện

a Bước 1: Mở file style.css

b Bước 2: Phần cơ bản của 1 file css ban đầu ít nhất phải có code sau: (đoạn code này

có thể 1 số phần mềm soạn thảo css hổ trợ sẵn)

c Bước 2: Css cho div wrapper

d Bước 3: Css cho div header

e Bước 3: Css cho phần body

 Đến đây xem như tạm ổn file Css, các bạn mở file index.html để xem kết quả: