bài thực hành thiết kế web, phần 3

Chọn trang web ñang thiết kế, ñể ở chế ñộ design, sau ñó vào->menu->text… 2.Xuất hiện hộp thoại:... Xuất hiện hộp thoại sau: Lựa chọn các thông số, ñặc tính cho ñịnh dạng trang web ñang

– Hoàn thành các bài thực hành trước

– Nắm bắt các kiến thức về CSS

Các bước thực hành:

Phần I: Tạo CSS

1 Chọn trang web ñang thiết kế, ñể ở chế ñộ design, sau ñó vào->menu->text…

2.Xuất hiện hộp thoại:

Bài thực hành – Thiết kế web

Bấm SAVE

4 Xuất hiện hộp thoại sau:

Lựa chọn các 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 hiện dòng:

<link href="file:///D|/Fasatoho/trangtri.css" rel="stylesheet" type="text/css">

5 Sửa ñổi và thêm bộ chọn mới Vào menu->text->cssStyles ->Manage Styles

6 Xuất hiện hộp thoại

Chọn file trangtri và bấm edit sẽ thấy hình:

7

Bài thực hành – Thiết kế web

Chọn selector type là dạng Advanced sau ñó tại selector chọn bộ chọn có sẵn a:link, bấm OK, OK lần nữa ñể ñóng dialog Tương tự cho các bộ chọn khác a:visited, a:hover Cuối cùng sẽ có kết quả như hình sau:

9 ðể ñịnh thuộc tính cho các bộ chọn lựa, chọn bộ chọn (vd a:link) sau ñó click nút edit sẽ thấy hình sau:

Bài tập 1:

Sử dụng cách tạo file CSS ñể thiết kế ví dụ dạng như sau:

dl.center

{

text-align: center;

color: blue }

dl.bold {font-weight: bold}

…

<dl class="center bold"> Trong phan DL co center va bold</dl>

p.right{text-align:right}

p.left{text-align:left}

<p class=left> Trong class left</p>

<p class=right> Trong class right</p>

<p class="right left"> Trong class right va left</p>

Thay ñổi các thông số trong ví dụ ñể thấy sự khác biệt của chúng

Bài tập 2:

Tương tự như bài 1 nhưng có dạng như sau:

#green {color: green}

Bài thực hành – Thiết kế web

Vào Menu: File->New->Trong tab General chọn mục Framesets, trong hộp Framesets hãy chọn một mẫu thích hợp sau ñó Click Create

2 Nhập liệu sơ bộ các khung tương ứng ðể lưu Frame vào Menu: File->Save All chương trình sẽ

tự ñộng ñánh dấu trang ñể lưu (ñến trang nào thì trang ñó sẽ ñược ñánh dấu mờ) Nhập vào tên trang web tương ứng Chú ý:

- Không ñược lưu các trang cùng tên

- Số trang = Số Frame + 1

3 Sau khi lưu ñóng tất cả các cửa sổ và mở trang cha lên, nếu các trang con ñược mở theo thì ñã thành công

4 ðị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