thiết kế website với photoshop, css và vận hành với wordpress

MỤC LỤC Lời mở đầu Việc thiết kế và sở hữu riêng một Website tự tạo giờ đây đã trở nên đơn giản hơn với nhiều công cụ cho phép bạn làm được điều đó. Vai trò của Website ngày càng rõ nét trong bối cảnh bùng nổ công nghệ thông tin và nhu cầu chia sẻ thông tin, tức dữ liệu của con người. Một doanh nghiệp đương nhiên cần một Website riêng để có thể cung cấp thông tin về mình cho khách hàng, giới thiệu sản phẩm của mình đến khách hàng theo cách nhanh nhất, tiện nhất và công nghệ nhất mà họ có nhiều điều kiện để thực hiện. Bạn là một cá nhân với mong muốn chia sẻ những thông tin tri thức của bạn cho bạn bè, cộng đồng, hay chỉ đơn giản là muốn cho bạn bè hiểu hơn về mình qua những gì bạn đăng tải trên Website riêng. Nhưng không dừng lại ở đó, với những nhu cầu ngày càng cao hơn về tính riêng biệt và độc đáo, tính thẩm mỹ, bộc lỗ rõ trong xu hướng Web 2.0 hiện nay thì một Website ra đời còn phải đáp ứng nhiều hơn về tính thẩm mỹ và là hình ảnh của doanh nghiệp cũng như cá nhân sở hữu Website. Điều đó đủ để thấy sự cần thiết và một nhu cầu rất lớn về việc thiết kế và vận hành riêng một Website mà chúng ta có thể tùy biến tất cả mọi thứ từ khâu thiết kế đến vận hành. Với lý do đó, trong Đề án môn học này, tôi chọn đề tài “Thiết kế Website với Photoshop, CSS và vận hành với WordPress”. Đề tài sẽ đi những bước cơ bản từ thiết giao diện trong Photoshop, dựng code HTML, định dạng với CSS và cuối cùng là quản lý, biên tập với WordPress, một CMS miễn phí và nhiều tính năng. 1 Thiết kế Website với Photoshop và CSS I. Thiết kế Layout giao diện Web với Photoshop 1. Cơ bản về thiết kế Sở hữu một Website không phải điều khó, có rất nhiều template hay các Website cho phép bạn tạo nhanh một Website chỉ trong một vài phút với những thiết đặt mặc định trước. Nhưng để có một giao diện Website đúng với nhu cầu về hình thức cũng như tính thẩm mỹ ban đầu của người dùng, không phụ thuộc vào những gì các template có sẵn thì Photoshop sẽ là sự lựa chọn chủ động nhất để chúng ta làm điều này. Thiết kế bất kể điều gì bạn muốn với các công cụ đồ họa trong Photoshop sẽ giúp bạn làm chủ giao diện của riêng mình mà không trùng lặp với bất cứ website nào. Photoshop CS5 Hiện có rất nhiều phiên bản Photoshop cho bạn lựa chọn. Với các hiệu ứng đa dạng, Photoshop sẽ mang tới cho Website của bạn sự độc đáo riêng biệt, không giới hạn, chỉ phụ thuộc vào khả năng đồ họa của bạn. 2 2. Xây dựng theo từng đối tượng Giao diện Website Đội SVTN – ĐH Kinh tế Quốc dân Để có giao diện như hình trên, phải đi qua từng bước chi tiết và căn bản nhất sau: − Tạo File mới đầu tiên với kích thước như Website thực mong muốn. Lưu ý một điểm là chiều rộng (width) của file ảnh trong khi thiết kế là chiều dài thực của Website, còn chiều cao (height) thì là chiều cao cơ bản mong muốn. Vì khi Website hình thành rồi đi vào vận hành, chiều cao của nó tùy thuộc vào nội dung đăng tải trên Web. 3 Cửa sổ làm việc với Photoshop − Đổ mà nền mong muốn, không quá sặc sỡ và tạo những Layer đầu tiên. Thiết kế trong Photoshop thực ra là làm việc với các Layer, thao tác và tạo hiệu ứng trên từng Layer. Kết quả cuối cùng chính là sự kết hợp của các Layer này. Và để thiết kế được bạn phải biết cơ bản về Layer và các tính năng của Photoshop. Điều này bạn có thể tìm trong file Help của Photoshop hoặc tài liệu Internet. − Xu hướng Web 2.0 hiện nay đang đẩy các Website theo hướng đồ họa, mỹ thuật cao, với các hiệu ứng 3D, đổ bóng và đổ màu Gradient theo các đối tượng. Đây cũng chính là điều tạo nên sự độc đáo của các Website 2.0 − Tạo các Folder riêng cho Header, Primary, Sidebar, Header để tiện quản lý. Tiến hành làm lần lượt từng thành phần của Website. Trong mỗi folder này sẽ là các Layer khác nữa chi tiết đến từng thành phần của đối tượng. 4 Lần lượt làm với từng phần, từng lớp của file − Các thành phần trích xuất gồm: các mẩu màu background của các đối tượng(màu nền, ảnh nền Body, nền banner, primary, sidebar, footer, comment ), các hình ảnh, icon Sử dụng Slice Tool, Drop tool của Photoshop chúng ta có thể lấy các đối tượng này chính xác đến từng pixel. Folder chứa các mẩu ảnh đã cắt để chẩn bị cho khâu dựng code HTML 5 − Khi hoàn thành thiết kế, tiến hành cắt file theo từng đối tượng, chúng được dùng làm “nguyên liệu” cho khâu tiếp theo là dựng code HTML. Lưu ý khi cắt nên chính xác đến từng pixel, để khi style có thể đạt giống với file ảnh nhất. Các thành Phần cắt ra phải đầy đủ, chính xác, không quá to, quá nhỏ để thuận lợi nhất cho khâu dựng code HTML. II. Dựng Code HTML 1. Công cụ code Bước dựng code HTML là một khâu quan trọng bắt buộc để có thể tạo nên cái khung chung cho Website. Để làm được điều này, có rất nhiều công cụ hỗ trợ, gồm cả miễn phí và có phí. Một số công cụ tiêu biểu thường được sử dụng như: DreamWeaver, PHP Designer, E-Text Editor Nhưng hầu hết chúng là những công cụ thương mại. Những công cụ miễn phí với tính năng chia sẻ và mở như hiện nay đã có rất nhiều và chúng cũng hoàn toàn đủ cho nhu cầu sử dụng của bạn. Có thể kể đến như: NotePad, NotePad ++, SetupEditPadLite, CoffeeFreeHTML 6 Những công cụ này sẵn có trên mạng và chúng đang được sủ dụng rất nhiều với các tính năng ưu việt như Hightlight Code, Auto-define, FTP, multi-tabs, PHP, CSS supported 2. Sử dụng các thẻ Div thay cho các thiết kế Bảng trước đây Theo cách thiết kế Web truyền thống, người ta hay dựng HTML thông qua việc sử dụng bảng (Tabble). Cách làm này có thể dễ tiếp cận hơn, đặc biệt với những người mới học code hoặc sử dụng các phần mềm WYSIWYG (what you see is what you get). Nhưng về lâu dài và để thỏa mãn với việc thiết giao diện phức tạp, hoặc thao tác hướng đối tượng, sử dụng CSS và các hiệu ứng … thì cách thức bảng này không đáp ứng và không tỏ ra ưu việt được. Chính vì thế, chúng ta nên tiếp cận cách sử dụng thẻ Div thay cho dùng bảng thuần túy, chúng ta sẽ có nhiều lựa chọn và hỗ trợ hơn trong tùy biến gia diện. 7 Code sử dụng thẻ Tabble và thẻ Div Cú pháp của thẻ Div được quản lý theo ID và Class. Mỗi ID là duy nhất cho mỗi đối tượng, còn Class thì có thể đặt giống nhau hoặc khác nhau tùy mục đích của người lập trình. Việc đặt tên cho ID và Class này có ý nghĩa quyết định cho việc Style bằng CSS sau này. Và nhờ nó ta có thể tùy biến, thay đổi giao diện nhanh chóng, thuận lợi mà không ảnh hưởng các đối tượng khác. Trong một tài liệu HTML không cần quá nhiều thẻ Div và vẫn có thể bao và quản lý hết được các đối tượng. Thẻ Div cho chúng ta những dòng code sáng sủa và dẽ quản lý hơn cả về hình thức lẫn cách thức. 3. Dựng code HTML Trong đề tài thiết kế Website cho Đội SVTN-ĐH Kinh tế Quốc dân này, tôi đã sử dụng thẻ các thẻ Div với công cụ là Notepad++ và Text-editor. Cấu trúc cơ bản của tài liệu HTML cần tạo sẽ như sau: <html> <head> </head> <body> <div id="header-outer"> <div id="header"> <div id="banner"> <! Các đối tượng cho Banner > 8 </div> <div id="menubar"> <ul> <! Các thẻ <li> cho Menulist > </ul> </div> </div><! End header > </div><! End header-outer > <div id="container"> <div id="content"> <div id="primary"> <div id="imageSlider"> <! Các đối tượng cho slide ảnh và tin ở Slide lớn > </div><! End imageSlider > <div class="post"> <! Các đối tượng cho bài viết mới nhất > </div><! End post > <div class="post"> < ! Các đối tượng cho bài viết trước > </div><! End post > <div class="post"> <! Các đối tượng cho bài viết trước nữa > </div><! End post > <div class="post-nav"> <! nút Next và Previous cho list dài > </div> </div><! End primary > <div id="sidebar"> <div class="box"> 9 [...]... tất một Website tĩnh, để website này có thể cập nhật và đăng tải được chúng ta phải vận hành nó với các CMS WordPress hỗ trợ mạnh các công cụ cho người sử dụng để quản lý, biên tập nội dung Website của mình Wordpress không chỉ dành cho những Blog, Website cá nhân mà kể cả các doanh nghiệp lớn cũng có thể sử dụng Worspress đủ thấy tính đa dạng và tiện ích của nó ΙΙΙ Vận hành với WordPress 17 Wordpress. .. các thành phần linh động trên giao diện d Trình bày CSS có hệ thống, không viết tắt nhiều, không phức tạp, gộp các thành phần tương đương vào một nhóm là cách tốt nhất để style, tùy biến và quản lý Website sau này Những dòng code phức tạp sẽ khó để quản lý và sửa đổi, đặc biệt với những trang web phức tạp 3 CSS3 CSS3 vẫn đang trong giai đoạn phát triển và hoàn thiện trước khi được chính thức đưa vào... Themes, Tùy biến và kéo thả các Widgets vào Sidebar, hỗ trợ Menus hoặc cả Menus Custome Khi bài đã được xuất bản, tất cả các thông tin thay đổi, cập nhật, phản hồi qua Website của bạn sẽ được Wordpress lưu lại và quản lý chặt chẽ Chỉ người admin mới có quyền truy cập Database và biên tập nội dung 21 Kết luận Trong phạm vi đề tài này lượng kiến thức cũng như sự phức tạp của việc thiết kế và vận hành hoàn... tự với Pages và Categories, comments, Search, imageSlider cũng đều có những trang riêng với những thiết lập riêng để hiện thị cho từng phần mỗi như người dùng lựa chọn Các hàm sử dụng trong Website được lưu và 1 file là “function.php” hàm này có thể có sẵn của Wordpress hoặc tùy người dùng thiết lập 2 Biên tập bài trong WordPress Đây là giao diện Back-en, nơi biên tập các Post cho Website của bạn Với. .. có từ sự đóng góp vô cùng lớn của người dùng toàn cầu và hơn thế nữa, nó cho phép người dùng có thể tự dựng Template riêng cho mình rồi sử dụng mã nguồn của Wordpress Người dùng thiết kế ra giao diện của mình, gắn các đoạn mã PHP và linnk các thành phần với nhau tạo nên một sự quản lý động trong toàn bộ hệ thống Website Wordpress cung cấp thiết lập và hiển thị các Pages, Categories, khi vực Back-end... có Safari và Google Schrome mới hỗ trợ đầy đủ tính năng của CSS3 Trong tương lai chúng ta sẽ có nhiều tùy biến và tính năng cao cấp hơn cho việc thiết kế, đặc biệt với xu hướng Web 2.0 ngày nay IV Các công cụ hỗ trợ Các công cụ hỗ trợ, hay rõ hơn là các Add ons cho trình duyệt (đặc biệt với Firefox) là những công cụ thực sự đắc lực cho các desiger − Texter: công cụ hỗ trợ code cả với HTML và CSS Những... dữ liệu Với Website thì đây là nhữn hệ quản trị nội dung dành cho các Website, cập nhật, thay đổi nội dung trên Website Các CMS phổ dụng nhất: 1 WordPress 2 Drupal 3 Joomla 4 DotNetNuke Hầu hết các CMS này đều là một phần mềm mở và miễn phí để làm 16 blog cá nhân, trang web cá nhân nổi tiếng WordPress được xây dựng trên sự tiện dụng, cùng với các định dạng chuẩn của web và luôn miễn phí! ΙΙ WordPress. .. code mắc phải Phải đảm bảo code đúng để có thể bước vào Style với CSS III Style với CSS 1 Giới thiệu CSS - CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc ) cho một tài liệu Web, chỉ cần một file CSS có thể quản lí định dạng và layout trên nhiều trang khác nhau - CSS quy định cách hiển thị của các thẻ HTML bằng cách... kế và vận hành hoàn chỉnh một Website chưa đạt sâu sắc Nhưng qua kết quả của đề tài, tôi muốn mọi người có được những giải pháp tốt và tiện lợi, không quá phức tạp để có thể có cho riêng mình một Website tự tạo và quản lý hoàn toàn, với sự trợ giúp của các công cụ thích hợp Việc tự thiết kế và quản lý này cho người dùng quyền tự quyết cho việc định hình cũng như quản lý Website của mình Phục vụ tốt... của thẻ vào trong một file riêng có phần mở rộng là " .css" - Có thể khai báo CSS bằng nhiều cách khác nhau Có thể đặt đoạn CSS của phía trong thẻ , hoặc ghi ra file riêng với phần mở rộng " .css" , ngoài ra, có thể đặt chúng trong từng thẻ HTML riêng biệt - Ví dụ: #box{ width: 400px; /* độ rộng */ 12 height: 300px;/* độ cao */ background-color: #CC0000; /* màu nền */ } 2 Style với CSS Khi . từ khâu thiết kế đến vận hành. Với lý do đó, trong Đề án môn học này, tôi chọn đề tài Thiết kế Website với Photoshop, CSS và vận hành với WordPress . Đề tài sẽ đi những bước cơ bản từ thiết giao. trong Photoshop, dựng code HTML, định dạng với CSS và cuối cùng là quản lý, biên tập với WordPress, một CMS miễn phí và nhiều tính năng. 1 Thiết kế Website với Photoshop và CSS I. Thiết kế Layout. về tính thẩm mỹ và là hình ảnh của doanh nghiệp cũng như cá nhân sở hữu Website. Điều đó đủ để thấy sự cần thiết và một nhu cầu rất lớn về việc thiết kế và vận hành riêng một Website mà chúng