Người đăng: 
AndyKK - Ngày đăng: Tháng Mười Hai - 26 - 2011
AndyKK - Ngày đăng: Tháng Mười Hai - 26 - 2011 Để tiện cho các bạn làm bài tập web mình xin mạo muội 1 lần nữa hướng dẫn các bạn thiết kế 1 giao diện web đơn giản (nếu các bạn còn nhớ cách làm giao diện hồi trước của thầy Hùng thì cũng có thể áp dụng mà ko cần bài viết này
) I. Khái niệm cơ bản:
Để tạo nên một giao diện web cơ bản ta sẽ cần 2 phần chính là HTML và CSS (ngoài ra còn có javascript…). Đôi khi tùy vào mục đích của người viết web mà file chứa CSS không tồn tại, thay vào đó họ viết CSS trực tiếp trên file HTML, nhưng như thế rất khó kiểm soát code đôi khi bạn cần sử dụng lại file CSS nhưng nó nằm chung trong file HTML rất mất công khi bạn phải chép toàn bộ CSS ra một file rỗng và blah blah blah các thứ khác. Ở đây chúng ta sẽ làm giao diện với 2 phần chính là HTML và CSS như đã nhắc đến ở trên.
1. HTML thô:
HTML thô là một loạt các đoạn code cấu thành giao diện cơ bản của một website, trong loạt code này chúng ta không hề đụng đến bất cứ thành phần vào gọi là thẩm mỹ hết
nói chung, khi làm xong HTML thô, trông trang web tĩnh bạn làm ra rất ư là nhàm chán 
2. CSS là gì:
Ta có thể tưởng tượng HTML thô là phần khung tạo nên một cái hộp, còn CSS sẽ là lớp sơn để chúng ta vẽ vời lên cái hộp nhàn chán ấy
CSS cũng chẳng hơn gì HTML khi bạn phải viết 1 loạt các đoạn code tào lao ba trợn :P vào 1 file rỗng, chỉ khi tích hợp nó vào HTML thì 2 thành phần này sẽ tạo nên một giao diện hoàn thiện (đối với bạn :P)
3. Áp dụng CSS vào HTML:
Để nhúng 1 file CSS vào khung HTML thô, đầu tiên, cả 2 thành phần này phải nằm cùng 1 thư mục, ta có thể đặt đoạn code sau vào phía trên cùng của khung HTML:
YYY.css là tên file code CSS của bạn. Nếu bạn có 1 file CSS nằm trong 1 thư mục AAA chẳng hạn thì thư mục AAA này phải nằm chung thư mục với file HTML (chứ ko phải html nằm trong thư mục AAA nhé, cái này càng nói càng khó hiểu đó, thà đừng nói còn hơn :P)
4. Một file CSS này có thể dùng chung với một file HTML khác không:
Có thể là không, vì các thành phần bạn gọi trong CSS cũng sẽ là tên của 1 số thành phần trong HTML, vì thế chúng ta có thể dùng 1 file CSS cho 1 file HTML hoặc bạn sẽ phải thay đổi tên thành phần trong file HTML khác để có thể dùng file CSS cũ kia :P lại đi vào mê cung loằng ngoằng, thôi ta đi ra @@
II. Khâu chuẩn bị
1. Các công cụ cần thiết:
- Công cụ chỉnh sửa HTML:
- Công cụ chỉnh sửa CSS:
Trước tiên, bạn mở Firefox lên, vào nút Firefox ribbon và chọn mục Add-ons:
Gõ “Web developer” vào khung search và nhấn enter:
Khung ở giữa sẽ hiển thị kết quả, bạn tìm mục Web developer và nhấn nút Install kế bên đó:
Bây giờ bạn tắt và mở lại firefox hoặc nhấn nút Restart firefox. Lúc này bạn sẽ thấy 1 thanh công cụ mới xuất hiện trên giao diện firefox.
Bạn nhấp phải chuột vào thanh đó và chọn Customize… :
Sau khi bảng Customize hiện lên, bạn kéo nút CSS trên thanh công cụ đó và thả vào 1 vị trí khác mà bạn muốn:
Bây giờ bạn nhấp phải chuột vào thanh công cụ đó và bỏ chọn mục Web developer để giao diện Firefox không bị rối mắt nữa:
Bây giờ bạn nhấp vào nút CSS lúc nãy và chnn mục Edit CSS:
Lúc này ở phía dưới giao diện của Firefox đã hiện lên 1 khung mới, đó là khung mà ta sẽ làm việc sau này, bạn tiếp tục nhấp vào nút Position ở trên khung đó:
Bây giờ khung Edit CSS đã chuyển sang vùng bên trái, từ đây ta sẽ dùng nó để chỉnh sửa giao diện dễ dàng hơn.
****Lưu ý khi sử dụng CSS edit tool này: Lúc bạn đang chỉnh sửa CSS, tuyệt đối không nhấn F5 hay Refresh lại trang web hoặc chuyển đổi qua lại giữa các tab trang web, vì như thế những gì bạn gõ sẽ biến mất nếu bạn chưa lưu lại.
2. Lên ý tưởng cho giao diện web:
Bây giờ, bạn hãy vẽ giao diện của web trong đầu hoặc cách tốt nhất là bạn lấy giấy bút ra và phác thảo giao diện web vào đó, vì khi chúng ta định hình được giao diện thì các bạn sẽ xác định được bạn sẽ phải làm gì với nó. Thường người ta sẽ dùng 1 phần mềm chuyên dụng về đồ họa để phác thảo giao diện, chẳng hạn như photoshop nhưng ở đây vì 1 số lý do khách quan nên mình sẽ đi ngược quá trình đó 1 chút để câu giờ các bạn >:)
Quay lại vấn đề. Ví dụ:
Theo như ví dụ trên thì mình sẽ có các khung như sau:
Mình sẽ quy ước cách đặt tên như trong hình nhé, còn bạn có thể đặt khác thì tùy nhưng phải nhớ rõ tên để chúng ta còn dùng về sau.
3. Tạo nên khung thô bằng HTML:
Bạn hãy tạo 1 thư mục mới ở một chỗ nào đó tùy bạn và đặt tên gì tùy bạn, ở đây mình đặt tên là GIAODIENWEB. Tiếp đến bạn hãy mở Notepad lên và gõ đoạn code sau đây vào:
Đoạn code này là một khung chuẩn của HTML để quá trình làm không bị lỗi, các bạn vui lòng gõ giống như trên vào cho mình nhé
(Dòng Untitled Document bạn có thể thay thế bằng tên website của bạn)
sau đó hãy lưu nó vào thư mục GIAODIENWEB với tên index.htmlChúng ta sẽ gõ thêm các đoạn code khác vào giữa thẻ ….. nhé.
Theo như phác thảo, thì chúng ta có 1 khung lớn màu đen ở ngoài tên là wrapper. Chúng ta sẽ khởi tạo khung này bằng đoạn code:
Trong đó:
là đoạn code bắt đầu 1 khung với id.
Wrapper là tên (và cũng là id) của khung đó.
là đoạn code để đóng khung wrapper lại. Tiếp tục cũng với đoạn code đó, cho 3 phần chính bên trong wrapper là header, bodymain và footer. Lúc này đoạn code của chúng ta sẽ như sau:
Vì 3 phần đó có cùng cấp, tức là cùng nằm bên trong khung wrapper nên chúng ta không lồng chúng vào nhau mà mở rồi đóng chúng luôn như trong hình trên.
Bắt đầu tiếp với khung navs bên trong khung header:
Khung menu và poster cùng cấp nằm trong thẻ bodymain:
Lúc này bạn đã có sườn cơ bản cho web của các bạn. Tiếp đến ta đi chi tiết vào từng thẻ. Đầu tiên là tiêu đề web chúng ta sẽ bỏ vào 1 khung (mình đặt tên cho nó là tieude) có cùng cấp với thẻ navs và bao nó lại với thẻ
(thẻ này có chức năng bắt đầu cho 1 đoạn văn bản) như sau:
(trong quá trình làm bạn cũng có thể vào thư mục GIAODIENWEB và mở file index.html của các bạn bằng firefox để xem trực tiếp kết quả
thực ra thì đến lúc này giao diện chỉ có mỗi 1 đoạn TIEU DE WEBSITE thôi )Giờ đến các nút chọn trong thanh điều hướng navs, các bạn gõ như trong hình sau:
Trong đó: là mở và đóng 1 thẻ list nhằm tạo danh sách. xxxxx là tạo liên kết đến trang zzzzz khi ta nhấn vào đoạn xxxx. Để hiểu rõ đoạn này, bạn mở file index.html bằng firefox để xem kết quả:
>> Kế đến, ta đi sâu vào khung menu. Cấu trúc của menu lúc này sẽ như hình sau:
Vẫn các quy ước tên như trong hình, ở đây ta chỉ thực hiện 1 khung, sau đó chúng ta sẽ xử lý để có được 2 khung.
Vì khung tabs nằm trong khung menu và khung tabtitle và tabbody nằm trong khung tabs, như vậy đoạn code của chúng ta sẽ như sau:
Các râu ria bên trong như Danh muc
bên trong tabtitle là để hiển thị tiêu đề của 1 tab. Các thẻ bên trong tabbody là để tạo ra một danh sách cách đề mục.
>> Đi sâu vào khung poster. Cấu trúc của poster như sau:
Vẫn quy ước như trong hình, ta có thêm 2 khung con bên trong khung poster, như vậy đoạn code sẽ như sau:
Trong đó,
là thẻ định dạng văn bản. lolem ipsum is simply…..
là nội dung khởi tạo giả để bạn có thể dễ dàng quan sát trong lúc viết code giao diện, bạn có thể tự viết đoạn nội dung này như thế nào tùy bạn.
Cuối cùng bạn chỉ cần thêm đoạn
vào thẻ footer như thế nào tùy ý bạn, ở đây mình gõ như sau:
Bây giờ bạn hãy lưu lại và mở file index.html bằng Firefox ra xem mọi thứ có ổn chưa, nếu được như sau đây, thì bạn đã thành công bước đầu rồi đó:
4. Quy ước kích thước cho giao diện web:
Các bạn có thể tùy ý quy định kích thước cho web của bạn, ở đây mình sẽ quy ước theo hình sau:
Bước quy định kích thước này khá quan trọng vì nó sẽ quyết định đến toàn bộ giao diện web của bạn. (Nhưng trong lúc code CSS bạn có thể sẽ phải thay đổi 1-2 px so với kích thước quy định sẵn, mục đích là để các thành phần được chèn vào vừa khớp và nhìn hợp mắt hơn).
Như mình nói ở trên, đang lẽ ra bước quy ước kích thước này và bước làm giao diện bằng photoshop sẽ được thực hiện trước. Nhưng do mình muốn đi từ cơ bản lên nên mình chỉ hướng dẫn các bạn làm 1 giao diện đơn giản thôi chứ không phải cao siêu gì
mục đích là tạo kiến thức nền móng để các bạn có thể phát triển theo ý của các bạn 5. Áp dụng kích thước vào photoshop để làm hình ảnh trang trí cho giao diện web:
Bước này thực chất không quan trọng lắm đối với ví dụ này (mình nhắc lại là chỉ với ví dụ này thôi nhé, chứ web nào mà ko có hình ảnh thì thôi rồi, nhìn như sh*t gà @@) vì trong ví dụ này mình sử dụng CSS để làm giao diện luôn. Nhưng đôi số chỗ mình sẽ cần 1 tý photoshop cho nó máu ngóe
6. Định nghĩa lại giao diện trong CSS:
Bây giờ bạn tạo giúp mình một thư mục tên là CSS bên trong thư mục GIAODIENWEB nhé. Tạo tiếp file txt rồi đổi tên và đuôi file txt này lại thành css.css.
Tiếp theo bạn chèn đoạn code sau vào phía dưới thẻ title trong file index.html:
Lúc này nó sẽ như vầy:
Lưu file index.html lại nhé
Bây giờ bạn mở file index.html lên bằng Firefox, vẫn chưa có gì đúng ko, đương nhiên rồi vì file css của bạn hiện đang trống mà
Bây giờ bạn lại click vào nút CSS và chọn Edit css:
Mở đầu file css, bạn cần copy đoạn code sau vào khung edit css trên firefox:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
a{text-decoration:none; color:#000;}
a:hover{text-decoration:none; color:#000;}
Mục đích của đoạn code này là để khởi tạo lại toàn bộ giao diện theo mặc định. Để lưu lại bạn nhấn vào nút Save trên khung Edit CSS:
Và trỏ đến vị trí của file css.css trong thư mục GIAODIENWEB/CSS (nhớ chọn ghe đè nhé)
Lúc này bạn sẽ thấy khung web bên tay trái của trình duyệt đã được trả về mặc định, tức là mọi thứ đề là đen và nhỏ
**** Bắt tay vào định nghĩa cho khung wrapper nào
Khung wrapper là khung bao bên ngoài nên bạn không cần gõ nhiều, chỉ cần gõ như sau vào cuối bảng Edit CSS nhé:
Trong đó:
- #wrapper{….} là cú pháp để gọi khung wrapper ra, thuộc tính của khung được gõ vào giữa 2 dấu ngoặc nhọn “{}”.
- Width: 900px; là cú pháp để nhập chính xác kích thước ngang của khung. Ở đây là 900px vì mình đã quy ước ở phần 4. Quy ước kích thước cho giao diện web
- Margin: auto; là cú pháp để canh chỉnh 2 bên của khung 1 cách tự động, mục đích là để đưa khung này vào chính giữa của trình duyệt, cho dù người dùng có nhấn Ctrl+ cuộn chuột giữa lên hoặc xuống thì khung này cũng sẽ tự động chạy vào giữa.
- Border: 1px solid #b9b9b9; là cú pháp để vẽ nên 1 khung viền cho wrapper. 1px là kích thước của nét vẽ, solid là thuộc tính của nét vẽ (ở đây solid có nghĩa là thuộc tính liền mạch hay bình thường), #b9b9b9 là màu xám (bạn cũng có thể đổi màu theo ý thích nhưng nhớ giữ lại # nhé).
- Overflow: hidden; là đoạn code để giấu những phần thừa bên trong khung nếu nó dư ra ngoài. Chẳng hạn như bạn để hình nền bên trong khung quá to dẫn đến hình đó tràn ra ngoài, bạn dùng đoạn code này thì hình nền đó sẽ được xén lại cho vừa khít với khung này.
Hình 30
**** Tiếp tục đến header. Theo quy ước thì header của mình sẽ cao 200px và màu vàng mình sẽ gõ đoạn code sau vào tiếp phần edit css:
Hình 31
Trong đó:
- Height: 200px; là đoạn code để gán giá trị chiều cao của khung là 200px.
- Backgroun: YELLOW; là đoạn code để gọi nền và đổ màu nền là vàng. Bạn cũng có thể thay YELLOW thành #xxxxxx để có được màu của riêng bạn hoặc thay thành url(xxxxxxxxxx.png); để gán 1 hình ảnh nào đó cho nền thay vì để màu đơn sắc như của mình xxxxxxxx.png là tên file hình (file hình này phải nằm chung thư mục với file index.html hoặc có thể tạo 1 thư mục IMAGE trong thư mục GIAODIENWEB và bỏ những hình ảnh được dùng trong we vào đó, nếu như thế thì lúc này bạn sẽ dùng code url(IMAGE/xxxxxxxxxx.png); túm lại là không cần quan tâm đến cái này nữa, nếu đụng đến ở chỗ khác thì mình giải thích thêm).
Bài đăng
0 nhận xét:
Đăng nhận xét