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

Sau đó dùng các thẻ HTML căn bản thiết kế nội dung và yêu cầu như sau: Hình 1-3: Trang thông tin cá nhân bằng HTML Bài 1.4 Dùng các thẻ HTML và các thuộc tính định dạng văn bản/thẻ để th

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 2020

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ảngtrì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.htm với tiêu đề: “TUYỂN TẬP THƠ TÌNHXUÂ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

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

Bài 1.3

Tạo trang HTML có tên Practice1-3.htm với tiêu đề “Trang web cá nhân” Sau đó

dùng các thẻ HTML căn bản thiết kế nội dung và yêu cầu như sau:

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

Bài 1.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:

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:

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ơ

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

- 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

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

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

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

- 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

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

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

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

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

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 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ộctính “style”

- 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

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ế trangchủ 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

C HƯỚNG DẪN

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)

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

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 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ệnLayout một trang web

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

Bài 3.2

Tạo trang HTML có tên “Pactice4-2.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-2: Layout trang HTML

Bài 3.3

Tạo trang HTML có tên “Pactice4-3.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-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

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

C HƯỚNG DẪN

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

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

- 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

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

- 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

- 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

- 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 Đại học Sư phạm Kỹ 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

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 trongwebsite

B YÊU CẦU

Bài 4.1

Tạo trang HTML có tên “Pactice4-1.html” giống như hình sau, rồi viết các hàm JavaSctipt/

Jquery thực hiện các yêu cầu:

Hình 4-1: Giao diện Slide ảnh sử dụng JavaScript/Jquery

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

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

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ự

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

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

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

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

- 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ả về năm hiệ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

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

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

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

1 Thiết kế trang đăng nhập có tên “login.html” cho phép truy cập vào hệ thống quản

trị nội dung có giao diện như sau:

- Khi người dùng nhấn vào nút đăng nhập sẽ chuyển đến trang index.html nằm trong thư mục admin.

2 Thiết kế trang chủ quản trị “index.html” đặt trong thư mục admin có giao diện như

sau:

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

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ế trangquả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:

C HƯỚNG DẪN

- 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ểnthô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àotrong cặp thẻ <head></head>

<script src="https://cdn.ckeditor.com/ckeditor5/19.1.1/decoupled-document/ckeditor.js"></script>

 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ếtsản phẩm

<h3>Mô tả chi tiết</h3>

<div id="toolbar-container" style="width: 780px"></div> <div id="details" style="width: 760px">

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