Bài tập thực hành thiết kế web cơ bản

Bài tập thực hành 01 – CĐ1: Thiết kế Web với HTML, CSS, và JavaScript Biên soạn: Nguyễn Văn Quyết E-mail: quyetict@gmail.com 4 Dùng các thẻ HTML và các thuộc tính định dạng văn bản/thẻ đ

Trang 1

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN

KHOA CÔNG NGHỆ THÔNG TIN

BÀI TẬP THỰC HÀNH THIẾT KẾ WEB CƠ BẢN (Tài liệu lưu hành nội bộ)

Giảng viên biên soạn: Nguyễn Văn Quyết

Hưng Yên – Tháng 01 năm 20 20

Trang 2

Bài tập thực hành 01 – CĐ1: Thiết kế Web với HTML, CSS, và JavaScript

Biên soạn: Nguyễn Văn Quyết E-mail: quyetict@gmail.com 2

BÀI THỰC HÀNH 1: THIẾT KẾ TRANG WEB VỚI HTML(1)

A MỤC TIÊU

- Nhắc lại được các kiến thức cơ bản về các thẻ của HTML

- Sử dụng các thẻ căn bản như: thẻ định dạng tiêu đề, dòng, đoạn, liên kết, bảng trình bày văn bản trên Web

- Sử dụng các thẻ thuộc nhóm điều khiển nhập liệu của HTML

- Vận dụng kiến thức về các thẻ HTML để tạo ra trang web tĩnh đơn giản

B YÊU CẦU

Bài 1.1

Tạo trang HTML có tên Practice1 -1.htmvới tiêu đề: “TUYỂN TẬP THƠ TÌNH XUÂN DIỆU” Sau đó soạn thảo nội dung như dưới đây sử dụng các thẻ html căn bản: thẻ tiêu đề, danh sách, liên kết, định dạng chữ, kẻ dòng

Sao cho:

- Khi nhấn vào tên 1 bài thơ trong danh sách ở trên, thanh cuộn sẽ cuộn đến vị trí bài thơ tương ứng

- Các đoạn phân cách nhau rõ ràng

- Kết thúc 1 bài thơ có kẻ ngang rộng 450px

TUYỂN TẬP THƠ TÌNH XUÂN DIỆU

1 Cảm xúc

2 Vội vàng

CẢM XÚC

Làm thi sĩ, nghĩa là ru với gió

Mơ theo trăng, và vơ vẩn cùng mây

Để linh hồn ràng buộc bởi muôn dây

Hay chia sẻ bởi trăm tình yêu mến

Đây là quán tha hồ muôn khách đến

Đây là bình thu hợp trí muôn hương

Đây là vườn chim nhả hạt mười phương

Trang 3

Hoa mật ngọt chen giao cùng trái độc

VỘI VÀNG

Tôi muốn tắt nắng đi

Cho màu đừng nhạt mất;

Tôi muốn buộc gió lại

Cho hương đừng bay đi

Bài 1.2:

Tạo trang Practice1-2.htm, dùng thẻ tạo bảng và một số thẻ html căn bản để thiết

kế trang “BẢNG ĐIỂM HỌC VIÊN” như sau:

STT Mã học viên Họ và tên

Điểm quá trình Trung bình

Quá trình KTHP

Điểm

HP Đ1 Đ2 Đ3

1 120101 Nguyễn Văn A 6.0 7.0 8.0 7.0 8.0 7.5

2 120102 Nguyễn Thị B 8.0 8.0 8.0 8.0 8.0 8.0

3 120103 Trần Văn C 9.0 9.0 9.0 9.0 8.0 8.5

Trang 4

Dùng các thẻ HTML và các thuộc tính định dạng văn bản/thẻ để thiết kế trang

Practice2-1.html có tiêu đề “Trang cá nhân” có khung giao diện như sau:

Trang 5

Hình 1-4: Trang thông tin cá nhân bằng HTML

Bài 1.5

Dùng các thẻ HTML và các thuộc tính định dạng văn bản/thẻ để thiết kế trang

Practice2-2.html có tiêu đề “Giới thiệu sản phẩm” có khung giao diện như sau:

Trang 6

Hình 1-5: Trang giới thiệu sản phẩm

C HƯỚNG DẪN

Hướng dẫn Bài 1.1:

- Dùng cặp thẻ <h3></h3> cho tên các bài thơ, có gắn id

- Dùng cặp thẻ <p></p> cho từng đoạn trong bài thơ

- Dùng thẻ <br /> cho từng dòng nội dung bài thơ

- Dùng thẻ <hr /> để kẻ dòng, kết hợp thuộc tính width

- Dùng thẻ <a> kết hợp với <ol>, <li> cho phần danh mục các bài thơ

Trang 7

- Dùng các thẻ <table>, <tr>, <th>, <td>

- Dùng thuộc tính colspan cho 1 <td> hoặc <th> để gộp cột

- Dùng thuộc tính rowspan cho 1 <td> hoặc <th> để gộp hàng

- Dùng thẻ <table> với 3 hàng và 3 cột, có viền

- Dùng thuộc tính colspan để gộp các cột cho phần Header và Footer

- Dùng các thuộc tính width, height để định độ cao cho các phần:

o Header: height=248, width=960

o Left: height = 350, width=160

o Content: height = 350, width=600

o Right: height = 350, width=200

o Footer: height = 80, width=960

- Dùng thuộc tính bgcolor=”tên màu” để định dạng màu nền cho các vùng

- Phần Header đưa ảnh banner vào

- Phần Left, thiết kế 2 đoạn <ul>, <li> với kiểu khác nhau, trong <li> là thẻ <a> có thể liên kết đến các trang tương ứng

- Phần Content, thiết kế Form thông tin cá nhân, sử dụng thêm các bảng

- Phần Right, dùng <marquee> cho chạy từ dưới lên 1 danh sách các hoạt động (dùng <ul>, <li>)

- Phần Footer, căn giữa = <center>

- Dùng cặp thẻ các thể <div> và thuộc tính style của nó để tạo layout cho trang Web

- Dùng các cặp thẻ <ul>, <li> cho để liệt kê thông tin cá nhân, liên kết

- Dùng các thẻ <img> để liệt kê danh sách ảnh trong thư viện ảnh

- Dùng cặp thẻ các thể <div> và thuộc tính style của nó để tạo layout cho trang Web

Trang 8

- Dùng các thẻ <img> để hiện thị ảnh các sản phẩm

- Dùng các cặp thẻ <ul>, <li> cho để liệt kê thông tin từng sản phẩm, liên kết

Lưu ý: ảnh trong bài thực hành do sinh viên tự đề xuất

Trang 9

BÀI THỰC HÀNH 2: THIẾT KẾ TRANG WEB VỚI HTML(2)

A MỤC TIÊU

- Sử dụng thành thạo các thẻ căn bản như: <div>, <span>, <ul>, <li>, <img> <a>

- Sử dụng thành thạo các thuộc tính định dạng văn bản, định dạng các thẻ với thuộc tính “style”

B YÊU CẦU

Dùng các thẻ HTML căn bản và các thuộc tính định dạng văn bản/thẻ để thiết kế trang chủ website tin tức cho Khoa CNTT, Trường ĐHSPKT Hưng Yên có giao diện mẫu như hình ở trang bên

Trang 10

Trang 11

Bước 1: Tạo thư mục để chứa website (đặt tên thư mục là “fit”)

Bước 2: Tạo file “index.html” trong thư mục fit

Bước 3: Viết mã HTML trong file index.htm để tạo trang web với tiêu đề (title)

“Website khoa CNTT”

Bước 4: Thiết kế layout cho trang web với cấu trúc như sau:

Bước 5: Dùng thuộc tính “ style” của các thẻ để định dạng cho các khối div ở trên

Bước 6: Dùng các thẻ html căn bản như: <span>, <ul>, <li>, <img>, <a> để trình bày

nội dung bên trong website (lưu ý nên đưa ảnh vào thư mục fit trước)

Trang 12

BÀI THỰC HÀNH SỐ 3: CASCADING STYLE SHEETS

A MỤC TIÊU

- Sử dụng các thuộc tính cơ bản của CSS để định dạng giao điện trang web

- Sử dụng được các thuộc tính position, z-index, float, clear trong CSS để thực hiện Layout một trang web

B YÊU CẦU

Bài 3.1

Tạo trang HTML có tên “Practice4-1.html” và sử dụng các thuộc tính CSS

để định dạng trang HTML giống như hình sau:

Hình 3-1: Trang minh họa Position trong HTML

Trang 13

Trang 14

Hình 3-3: Trang chủ website một công ty phần mềm

Bài 3.4

Sử dụng các thuộc tính CSS để định dạng phần nội dung bên trong 3 chuyên mục đã được dựng từ Bài 4.3

Trang 15

Hình 3-4: Trang chủ website một công ty phần mềm (điền nội dung)

- Tạo trang html theo yêu cầu

- Tạo khung Web theo cấu trúc tương tự sau

- Sử dụng thẻ Style Sheet (có thể đặt bên trong thẻ <head>) để định dạng các thẻ

<div> theo yêu cầu như hình đã cho

- Chú ý việc sử dụng các giá trị của thuộc tính position

- Sử dụng các thuộc tính CSS nâng cao như: border radius, box-shadow

-Hướng dẫn Bài 3.2:

Trang 16

- Tạo khung Web theo cấu trúc tương tự sau:

- Sử dụng thẻ Style Sheet (có thể đặt bên trong thẻ <head>) để định dạng các thẻ

<div> theo yêu cầu như hình đã cho

- Chú ý việc sử dụng thuộc tính float, margin padding ,

- Tạo dự án Web với ASP.NET

- Tạo tệp tin có tên Practice4-2.htm vào dự án

- Copy thư mục Images vào dự án

- Tạo thư mục Styles để chứa các file CSS

- Tạo 1 tệp tin CSS có tên: Main.css

- Kéo tệp tin vào phần trong thẻ <head> của trang để áp dụng

- Viết CSS cho thẻ body để định dạng ảnh nền: Chú ý: không cuộn ảnh, lặp ảnh mà

cần cố định ảnh nền

- Dùng khối thẻ DIV để chia trang thành các vùng như trên giao diện

Trang 17

- Dùng các thuộc tính width, height để định độ cao cho các thành phần:

o Header: height=154, width=960

Trang 18

- Tiếp tục định dạng phần nội dung bên trong từng chuyên mục đã có

- Có thể sử dụng nội dung hiển thị trên các chuyên mục như sau:

1 Với mục tiêu luôn đi đầu về giải pháp thi trắc nghiệm, Phòng phát triển

và gia công ph n m m thuầ ề ộc Trung tâm Hưng Yên Aptech: CNTT&TT

- Trường Đạ ọc Sư phạm Kỹi h thuật Hưng Yên tiế ụp t c nghiên c u và ứ

đã cho ra một sản phẩm mới – Máy chấm thi trắc nghi m TestPro ệEngine

2 Sau nhiều năm nghiên cứu, phát tri n ng d ng H p trể ứ ụ ọ ực tuyến (còn gọi

là H i nghộ ị truyền hình), chúng tôi đã chính thức tung ra thị trường s n ảphẩm Navi Video Conference Version 3.0 t ừ cuối năm 2011

3 Rạng sáng nay (1/6) theo giờ Việt Nam, Microsoft đã chính thức công

bố phiên b n Windows 8 Release Preview vả ới nhiều tính năng và ứng dụng mới được thêm vào

Trang 19

BÀI THỰC HÀNH SỐ 4: NGÔN NGỮ KỊCH BẢN

JAVASCRIPT/JQUERY

A MỤC TIÊU

- Nhắc lại được các kiến thức cơ bản về JavaScript/Jquery

- Sử dụng các cấu trúc điều khiển trong JavaScript/Jquery

- Sử dụng JavaScipt/ Jquery để truy xuất các phần tử HTML

- Vận dụng kiến thức về JavaScipt/Jquery để tạo tạo ra các hiệu ứng cơ bản trong website

Trang 20

1 Khi hiển thị trang web lên ảnh “1.jpg” sẽ được gán vào Khung ảnh

2 Khi nhấn vào nút có biểu tượng thì sẽ chuyển sang ảnh tiếp theo, nếu hết số ảnh trong Album thì chuyển sang ảnh đầu tiên

3 Khi nhấn vào nút có biểu tượng thì sẽ quay trở lại ảnh trước đó, nếu hết số ảnh trong Album thì quay lại ảnh cuối cùng

4 Khi Load trang web, hiệu ứng trình chiếu ảnh tự động chạy, sau mỗi 3 giây lại

chuyển 1 ảnh tiếp theo

Bài 4.2

Tạo trang HTML có tên “Pactice5-2.html” và trình bày thẻ DIV tương tự sau:

Khi Load trang, nội dung bên trong thẻ DIV sẽ hiển thị thời gian hiện tại:

Thứ, ngày/tháng/năm, giờ:phút:giây

Thời gian sẽ tự động thay đổi từng giây giống như đồng hồ số

Bài 4.3

Tạo trang HTML có tên “Pactice4-3.html” và thiết kế giao diện tương tự sau:

Hình 4-2: Trang đăng ký học viên khóa học

Trang 21

Viết các hàm JavaScipt/JQuery và gọi chúng trên Form để đảm bảo các ràng buộc sau:

a) Tất cả các ô nhập liệu không được để trống dữ liệu

b) Họ và tên không quá 50 ký tự, không chứa ký tự số

c) Ngày sinh đúng định dạng Ngày/Tháng/Năm

d) Địa chỉ không quá 40 ký tự

- Viết các hàm JavaScipt như: LoadImage(), Next(), Back() để thực hiện các yêu câu a, b, c

- Gọi các hàm trên đúng vị trí

- Sử dụng hàm có sẵn setTimeout(“mã code”, thời gian) để tạo hiệu ứng chuyển ảnh ngay trang LoadImage()

- Sử dụng thẻ <span> để chứa nội dung là giờ hiện tại

- Viết hàm GetTime() lấy về ngày giờ hiện, sử dụng các hàm sẵn có trang JavaScript như: Date(), getDay(), getMonth(), getFullYear(), …

Ví dụ: var today = new Date();

today.getFullYear() => sẽ trả ề năm hiệ ạ v n t i

- Sử dụng hàm Substring(), lấy về 3 ký tự đầu tiên từ kết quả của hàm Date() sau

đó, dùng Switch case để lấy về thứ:

Trang 22

Ví dụ: case“Wed”: thu = “Thứ 4”;

- Dùng cấu trúc if để kiểm tra sự hợp lệ của thời gian như: các số về giờ phút giây

- Thiết kế giao diện theo yêu cầu

- Nội dung dấu “*” chưa trong thẻ <span>

- Viết các hàm kiểm tra ứng với mỗi điều khiển yêu cầu xác nhận dữ liệu và gọi trong sự kiện OnBlur của mỗi điều khiển

Chú ý sử dụng thuộc tính “Title” của <Span> để chứa nội dung cảnh báo lỗi

Trang 23

BÀI THỰC HÀNH SỐ 5: THIẾT KẾ TRANG

QUẢN TRỊ NỘI DUNG (1)

Trang 24

- Sử dụng JavaScript/Jquery tạo hiệu ứng ẩn/hiện các thực đơn cấp 2 (phần bên trái)

- Khi Click vào các menu-item hay các chức năng chính chuyển đến trang tương ứng

3 Thiết kế trang quản lý danh mục sản phẩm “list product.html” - có giao diện như sau:

Trang 25

BÀI THỰC HÀNH SỐ 6: THIẾT KẾ TRANG

QUẢN TRỊ NỘI DUNG (2)

A MỤC TIÊU

- Sử dụng các kiến thức cơ bản về HTML/CSS/JavaScript/Jquery thiết kế trang quản trị nội dung cho một website

- Sử dụng một số điều khiển nâng cao thiết kế trang quản trị nội dung

- Vận dụng kiến thức về HTML/CSS/JavaScript/Jquery để tạo ra trang web thực tế

B YÊU CẦU

Thiết kế trang “ admin/product html”cho phép người dùng nhập thêm thông tin sản phẩm phân hệ quản trị nội dung, có giao diện như sau:

Trang 26

- Sử dụng các điều khiển HTML cơ bản và CSS để thiết kế và định dạng các điều khiển thông thường

- Sử dụng thư viện Ckeditor để thiết kế điều khiển định dạng văn bản

• Bước 1: Khai báo thư viện JavaScript/Jquery để sử dụng điều khiển Ckeditor vào trong cặp thẻ <head></head>

• Bước 2: Thiết kế vùng hiển thị điều khiển Ckeditor cho phần nhập thông tin chi tiết sản phẩm

<p>Chi tiết thông số kỹ thuật.</p>

Định dạng
Số trang	26
Dung lượng	6,17 MB