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 Vào Menu: File->New->Trong tab General chọn mục Framesets, hộp Framesets chọn mẫu thích hợp sau ñó Click Create Nhập liệu sơ khung tương ứng ðể lưu Frame vào Menu: File->Save All chương trình tự ñộng ñánh dấu trang ñể lưu (ñến trang trang ñó ñược ñánh dấu mờ) Nhập vào tên trang web tương ứng Chú ý: - Không ñược lưu trang tên - Số trang = Số Frame + Sau lưu ñóng tất cửa sổ mở trang cha lên, trang ñược mở theo ñã thành công ðịnh thuộc tính cho Frames Mở trang cha lên vào menu: Windows->Frames sau ñó lựa frame tương ứng ñể ñịnh thuộc tính GVHD TS Vũ ðức 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 ... 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. .. ñã thành công ðịnh thuộc tính cho Frames Mở trang cha lên vào menu: Windows->Frames sau ñó lựa frame tương ứng ñể ñịnh thuộc tính GVHD TS Vũ ðức Lung Bài thực hành – Thiết kế web Bài tập 03: Ứng... 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