Đang tải... (xem toàn văn)
Bài tập thực hành thiết kế web với dreamweaver Bài tập thực hành thiết kế web với dreamweaver Bài tập thực hành thiết kế web với dreamweaver Bài tập thực hành thiết kế web với dreamweaver Bài tập thực hành thiết kế web với dreamweaver Bài tập thực hành thiết kế web với dreamweaver
Bài thực hành – Thiết kế web Bài 01: Thiết kế web với Notepad Mục tiêu – – Làm quen với ngôn ngữ thiết kế web – HTML Thiết kế trang web ñơn giản dùng Notepad Các bước thực hành: Mở Notepad ñể soạn thảo trang web HTML Sau soan lưu trang web dạng file có ñuôi *.htm *.html (ví dụ: bai01.htm) Khởi ñộng Internet Explorer, từ menu vào FILE->OPEN->chọn file vừa tạo ñể xem kết hiển thị Yêu cầu không sử dụng phần mềm hỗ trợ khác FrontPage Dreamweaver Bài tập 1: Sử dụng tag ñể hiển thị phân cấp tiêu ñề ñề mục Bài tập 2: ðịnh dạng kiểu chữ GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Bài tập 3: Tạo hai list (Two shopping lists) sau Bài tập 4: Tạo Bảng sử dụng tag , , , GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Và bảng GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Bài 02: Thiết kế web với Macromedia Dreamweaver MX 2004 Mục tiêu – – Làm quen với ngôn ngữ thiết kế web – HTML Thiết kế trang web tĩnh với trợ giúp Dreamweaver MX 2004 Yêu cầu – – Hoàn thành thực hành số 01 Nắm bắt kiến thức thiết kế web với Dreamweaver MX 2004) Các bước thực hành: Tìm hiểu môi trường làm việc Dreamweaver MX tác giả Hoàng Đăng Quang file "DREAMWEAVER_Vietnamese MX.PDF" Sử dụng Dreamweaver MX 2004 để làm thực hành sau: Bài tập 1: Viết trang web ñể mời dự tiệc, vận dụng ñịnh dạng văn theo mẫu sau: GVHD TS Vũ Đức Lung Bài thực hành – Thiết kế web Bài tập 2: Tạo Bảng, ý ñến thuộc tính ROWSPAN, COLSPAN Bài tập 3: Tạo bảng , sử dụng thêm việc chèn ảnh (Các hình ảnh ví dụ thư mục Notebook) Bài tập 4: Dùng cách Link ñến ñoạn ñịnh trang hành dể thiết kế trang có nội dung file “tim hieu FTP.doc” GVHD TS Vũ Đức Lung Bài thực hành – Thiết kế web Bài 03: Sử dụng CSS với Macromedia Dreamweaver MX 2004 Mục tiêu – – Làm quen với CSS (Cascading Style Sheets) Thiết kế trang web tĩnh dùng HTML CSS với trợ giúp Dreamweaver MX 2004 Yêu cầu – – Hoàn thành thực hành trước Nắm bắt kiến thức CSS Các bước thực hành: Phần I: Tạo CSS Chọn trang web ñang thiết kế, ñể chế ñộ design, sau ñó vào->menu->text… 2.Xuất hộp thoại: Chọn dạng chọn muốn làm (Các loại chọn xem slide lý thuyết) Giả sử chọn ".classA" Bấm OK Lưu lại file dạng *.css vào nơi cần thiết (ví dụ file "trangtri") GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Bấm SAVE Xuất hộp thoại sau: Lựa chọn thông số, ñặc tính cho ñịnh dạng trang web ñang thết kế Chuyển sang chế ñộ code ta thấy xuất dòng: Sửa ñổi thêm chọn Vào menu->text->cssStyles ->Manage Styles GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Xuất hộp thoại Chọn file trangtri bấm edit thấy hình: Bấm NEW ñể tạo chọn mới, chọn chọn có sẵn ñể thay ñổi Khi chọn NEW: GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Chọn selector type dạng Advanced sau ñó selector chọn chọn có sẵn a:link, bấm OK, OK lần ñể ñóng dialog Tương tự cho chọn khác a:visited, a:hover Cuối có kết hình sau: ðể ñịnh thuộc tính cho chọn lựa, chọn chọn (vd a:link) sau ñó click nút edit thấy hình sau: GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Ví dụ color chọn màu #FF6600, Decoration chọn none ñể bỏ gạch hyperlink,… Mở file *.css ñể xem kết tạo CSS 10 Nếu trang web khác muốn sử dụng ñịnh dạng mở lên vào Menu: Text>CSS Style->Manage style sheet->click nút Attach->Click nút Browse tới tập tin trangtri.css->OK Bài tập 1: Sử dụng cách tạo file CSS ñể thiết kế ví dụ dạng sau: dl.center { text-align: center; color: blue } dl.bold {font-weight: bold} … Trong phan DL co center va bold p.right{text-align:right} p.left{text-align:left}Trong class left
Trong class right
Trong class right va left
Thay ñổi thông số ví dụ ñể thấy khác biệt chúng Bài tập 2: Tương tự có dạng sau: #green {color: green} p#para1 { text-align: center; color: red }Tin tức thị trường
Thị trường chứng khoán
Phần II: Tạo Thiết kế web dạng Frame Trang web dạng Frame trang ñược chia thành nhiều khung, khung tải trang web tương ứng vào khung ñó ðể tạo trang web dạng Frame ta có nhiều cách Cách dùng thẻ HTML ñã học qua, phần giới thiệu cách tạo qua bước sau: Tạo Frame mẫu có sẵn: GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Bài tập 1: Dùng PHP thiết kế trang web in sau: My SQL gì? MySQL phần mềm quản trị CSDL mã nguồn mở, miễn phí nằm nhóm LAMP (Linux - Apache -MySQL - PHP) Bài tập 2: Viết trang PHP hiển thị dãy số từ ñến 100 cho số chẵn chữ in ñậm, số lẽ chữ in thường Kết quả: 4… , 100 Hướng dẫn: Sử dụng vòng lập for, biến ñếm i, toán tử % Bài tập 3: GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Viết trang PHP hiển thị thông tin sau: STT Tên sách Tên sách Tên sách … … 10 Tên sách 10 Tác giả Tác giả Tác giả … Tác giả 10 Bài tập 4: Thiết kế webform có dạng sau: Sau nhập họ tên vào bấm Submit cho kết trang ñó: Code mẫu file "names.php": Input data First Name: Last Name: GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Bài tập 5: Viết chương trình kiểm tra username password người truy cập Với username password mặc ñịnh : Username: admin Password: 12345 + Nếu nhập ñúng trả kết : "Chào mừng, admin ñến với website" + Ngược lại sai trả thông tin "Cảnh báo : Username password bạn không xác Vui lòng nhập lại" Mẫu trích dẫn từ file nhập liệu login.php:UserName
Password
Từ file kiểm tra có tên check.php $user=$_POST['username']; $pass=$_POST['pw']; if ($user == "admin" AND $pass == "12345") { echo "Chào mừng, $user ñến với website"; } else { echo "Cảnh báo : Username password bạn không xác Vui lòng nhập lại"; } ?> GVHD TS Vũ ðức Lung ... ðức Lung Bài thực hành – Thiết kế web Bài 02: Thiết kế web với Macromedia Dreamweaver MX 2004 Mục tiêu – – Làm quen với ngôn ngữ thiết kế web – HTML Thiết kế trang web tĩnh với trợ giúp Dreamweaver. .. Lung Bài thực hành – Thiết kế web Bài tập 03: Ứng dụng thiết kế trang web theo mẫu sau (Các file hình thư mục Images): GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Bài 04: Tạo Web Form với. . .Bài thực hành – Thiết kế web Bài tập 3: Tạo hai list (Two shopping lists) sau Bài tập 4: Tạo Bảng sử dụng tag , , , GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Và