Bài 15 - Xuất bản website

Bài 15 - Xuất bản website

Video này sẽ hướng dẫn chúng ta cách đưa website lên internet để người dùng có thể truy cập vào các website này bằng cách sử dụng phần mềm Dreamweaver.

Các bạn có thể tham khảo thêm cách sử dụng phần mềm Filezilla Client cho mục đích xuất bản website (http://www.zend.vn/public/lap-trinh/joo ... 8l139.html)

Video

 

ZendVN.

Read more »

Bài 14 - Website bán hàng - Phần 3 Xây dựng others

Bài 14 - Website bán hàng - Phần 3 Xây dựng others

Bài học này sẽ hướng dẫn chúng ta hoàn thiện các thành phần còn lại của website bán hàng. Bao gồm các hướng dẫn để xây dựng phần liên hệ, footer và trang xem chi tiết sản phẩm

Phần 01

http://www.youtube.com/watch?feature=player_embedded&v=8sSO05GE-mw 

Phần 02

 http://www.youtube.com/watch?feature=player_embedded&v=qx5AJr4CT1Y

Phần 03

 http://www.youtube.com/watch?feature=player_embedded&v=MRoM5jlnxrc

ZendVN.

Read more »

Bài 14 - Website bán hàng - Phần 2 Xây dựng content

Bài 14 - Website bán hàng - Phần 2 Xây dựng content

Trong phần đầu tiên chúng ta đã được hướng dẫn xây dựng giao diện phần header. Ở bài học này chúng ta sẽ được hướng dẫn xây dựng giao diện cho phần content

Phần 01

 http://www.youtube.com/watch?feature=player_embedded&v=5jH_j59xHj8

Phần 02

 http://www.youtube.com/watch?feature=player_embedded&v=iA0GPNDbS1Q

Phần 03

 http://www.youtube.com/watch?feature=player_embedded&v=jCS3x-ryYz0

ZendVN.

Read more »

Bài 14 - Website bán hàng - Phần 1 Xây dựng header

Bài 14 - Website bán hàng - Phần 1 Xây dựng header

Sau khi hoàn thành 13 bài học đầu tiên, chúng ta đã có các kiến thức cơ bản về việc sử dụng Dreamweaver để xây dựng các thành phần của một website. Bài học hôm nay sẽ là bài học tổng hợp để chúng ta xây dựng một website hoàn chỉnh.

Chúng ta sẽ tiến hành việc xây dựng website bán hàng trực tuyến, việc thiết kế một website tương đối phức tạp nên bài học của chúng ta sẽ được chia ra làm nhiều phần. Mỗi phần chúng tôi sẽ hướng dẫn các bạn xây dựng từng thành phần trên website đó để có được một website bán hàng hoàn chỉnh

Phần 01

 

Phần 02

 

Phần 03

 

ZendVN.

Read more »

Bài 13 - Spry Framework

Bài 13 - Spry Framework

Spry Framework là một mã nguồn mở Ajax Framework được phát triển bởi Adobe System và được tích hợp sẵn trong Dreamweaver. Spry Framework tập trung hướng tới việc thiết kế website đơn giản và nhanh chóng. Bài học hôm nay sẽ hướng dẫn chúng ta cách sử dụng Spry Framework để xây dựng các thành phần của website như menu, panel, accordion, tooltip, ... 

Video

 

ZendVN.

Read more »

Bài 12 - Template

Bài 12 - Template

Sử dụng template trong thiết kế website giúp chúng ta tiết kiện thời gian và đảm bảo các web page kế thừa từ các template này được nhất quán với nhau. Bài học này sẽ hướng dẫn chúng ta một số thao tác cơ bản đối với việc xây dựng template trong phần mềm Dreamweaver 

Video

 

ZendVN.

Read more »

Bài 11 - Làm việc với Form

Bài 11 - Làm việc với Form

Bài học này sẽ hướng dẫn chúng ta cách sử dụng phần mềm Dreamweaver để tạo ra các thành phần trên form như textbox, selectbox, radio button, checkbox, ... và tìm hiểu thuộc tính của các thành phần này.

+ Phần 1

 

+ Phần 2

 

ZendVN.

Read more »

Bài 10 - Table

Bài 10 - Table

Trong bài học này chúng ta sẽ được giới thiệu cấu trúc của một table cơ bản, và cách sử dụng phần mềm Dreamweaver để có thể làm việc với các table trong website của chúng ta 

+ Phần 1

Link youtube: http://www.youtube.com/watch?v=4D1Qi6nG ... r_embedded

 

+ Phần 2

Link youtube: http://www.youtube.com/watch?feature=pl ... XtBLm1mRwY

 

ZendVN.

Read more »

Bài 09 - Siêu liên kết

Bài 09 - Siêu liên kết

Sử dụng thẻ a để tạo ra các liên kết cho văn bản và hình ảnh là các nội dung được giới thiệu trong bài học này. Ngoài ra chúng ta sẽ được ôn tập lại cách định dạng cho thẻ a và các ví dụ về việc sử dụng thẻ a trong thực tế.

Video

 

ZendVN.

Read more »

Bài 08 - Xử lý hình ảnh

Bài 08 - Xử lý hình ảnh

Bài học này sẽ hướng dẫn chúng ta các thao tác chèn, định dạng và quản lý hình ảnh trong phần mềm Dreamweaver.

+ Phần 1
http://www.youtube.com/watch?feature=player_embedded&v=xogR8sFyQew
 

+ Phần 2

 http://www.youtube.com/watch?feature=player_embedded&v=qxHzu1Llik8

+ Phần 3

 http://www.youtube.com/watch?feature=player_embedded&v=pzjS4P3nyNY

ZendVN.

Read more »

Bài 07 - Xử lý văn bản

Bài 07 - Xử lý văn bản

Trong bài học này chúng ta sẽ được hướng dẫn các thao tác để chèn và định dạng văn bản trong Dreamweaver.

+ Phần 1

Link youtube: http://www.youtube.com/watch?v=WZVtmwjFe7w

 

+ Phần 2

Link youtube: hhttp://www.youtube.com/watch?feature=p ... lLizAm7LUc

 

ZendVN.

Read more »

Bài 06 - Làm quen với HTML & CSS

Bài 06 - Làm quen với HTML & CSS

Có rất nhiều cách để chúng ta nói về HTML & CSS vì hai mảng kiến thức này tương đối rộng. Tuy nhiên trong bài học ngày hôm nay chúng ta chỉ tập trung tìm hiểu cấu trúc của một tài liệu HTML cơ bản và cách định dạng các thẻ HTML trong phần mềm Dreamweaver 

+ Phần 1

Link youtube: http://www.youtube.com/watch?v=2HuLiXc917M

 

+ Phần 2

Link youtube: http://www.youtube.com/watch?v=qCUSfarqonM

 

ZendVN.

Read more »

Bài 05 - Làm việc với mã nguồn

Bài 05 - Làm việc với mã nguồn

Về mặt giao diện mặc dù Dreamweaver đã cung cấp khá đầy đủ các công cụ và menu để chúng ta có thể thiết kế một website hoàn chỉnh. Tuy nhiên chúng ta cũng cần biết thêm các chức năng để có thể tương tác và làm việc với mã nguồn được tốt hơn. Bài học này sẽ hướng dẫn cho chúng ta các thao tác để định dạng mã nguồn, tùy chỉnh mã nguồn trong Dreamweaver 

Link youtube http://www.youtube.com/watch?v=uYlwxdSceSs

Video

 

ZendVN.

Read more »

Bài 04 - Tạo trang trong Dreamweaver

Bài 04 - Tạo trang trong Dreamweaver

Bài học này sẽ hướng dẫn cho chúng ta cách tạo ra các webpage cho website và các thao tác để định dạng cho các webpage này 

Link youtube http://www.youtube.com/watch?v=36frTu7HQQ4

Video

 

ZendVN.

Read more »

Bài 03 - Quản lý website trong Dreamweaver

Bài 03 - Quản lý website trong Dreamweaver

Trong bài học này chúng ta sẽ được giới thiệu cấu trúc tập tin và thư mục trong một website tĩnh đơn giản, và chúng ta cũng sẽ được hướng dẫn cách sử dụng Dreamweaver để tạo ra các phần quản lý cho website 

Link youtube http://www.youtube.com/watch?v=B1fwgGer ... r_embedded

Video

 

ZendVN.

Read more »

Bài 02 - Làm chủ giao diện trong Dreamweaver

Bài 02 - Làm chủ giao diện trong Dreamweaver

Trong bài học này chúng ta sẽ được giới thiệu chức năng của các thành phần chính trong giao diện của Dreamweaver, như là màn hình khởi động, các thanh menu, thanh panel, toolbar, ... 

Link youtube http://www.youtube.com/watch?feature=pl ... ij0TalacHw

Video

 

ZendVN.

Read more »

Bài 01 - Thiết kế web với Adobe Dreamweaver CS6

Bài 01 - Thiết kế web với Adobe Dreamweaver CS6

- Như chúng ta đã biết website đã trở thành một thành phần không thể thiếu của thời đại công nghệ thông tin ngày nay. Một tổ chức, một doanh nghiệp, một cơ quan hay thậm chí một cá nhân đều cần một website cho công việc của mình. Mặt khác việc có thể xây dựng một website lại là một vấn đề không đơn giản, nó đòi hỏi người xây dựng phải có kiến thức về thiết kế và lập trình web. 

- Tuy nhiên bằng cách sử dụng phần mềm Adobe Dreamweaver chúng ta có thể tạo ra một website cho các nhu cầu công việc đơn giản mà không đòi hỏi quá nhiều kiến thức về thiết kế và lập trình web. Khóa học "Thiết kế web với Dreamweaver" sẽ giúp chúng ta sử dụng thành thạo phần mềm Adobe Dreamweaver, từ đó chúng ta có thể xây dựng một website đơn giản theo mục đich của chúng ta.

- Trong bài học đầu tiên này chúng ta sẽ tìm hiểu các kiến thức căn bản về website như: website là gì, các thành phần của một website, phân biệt website động và website tĩnh, ... Sau đó chúng ta sẽ được hướng dẫn cách tải và cài đặt phần mềm Adobe Dreamweaver CS6 để phục vụ cho khóa học này.

Link download phần mềm

- Part 1: http://www.mediafire.com/?ekwnblzqkcbafcs
- Part 2: http://www.mediafire.com/?ube7jpugfw4ad0z

Link youtube http://www.youtube.com/watch?feature=pl ... vUx9e4YNfc

Video



ZendVN.

Read more »

90 Content Slider PSD Templates

Content sliders are extremely useful. It`s special kind of navigation that can display all sorts of information. They instantly draw the audience’s attention and quickly provide users with featured posts and images. You can use it everywhere.

In this collection I`ve compiled a massive amount of content slider psd templates. You`ll find simple content sliders, accordions, 3D carousels, tabbed sliders etc.

Enjoy and Good Luck!

1. Dark Content Slider

2. Accordion Horizontal Slider 2

Read more »

Hướng dẫn thiết kế giao diện web với Photoshop

Trước khi thiết kế ngoài các kiến thức cơ bản về Photoshop các bạn nên tham khảo các vần đề cần làm trước khi thiết kế giao diện tại đây.
Bài này tôi sẽ hướng dẫn các bạn thiết kế hoàn chỉnh một trang Website Thương Mại Điện Tửđơn giản và để khởi đầu cho công việc kinh doanh của mình.
Tôi dùng phần mềm Adobe Photoshop 5. Các bạn có thể dùng CS6 , CS3, CS4 cũng đều giống như nhau.
Trước mở một tài liệu mới từ Photoshop và chọn kích thước và các thông số như hình dưới:

Các bạn nên nhớ một điều quan trọng khi thiết kế hoàn chỉnh một Layout thì sẽ có rất nhiều layer được tạo ra, vì vậy các bạn nên tạo những danh mục liên quan và đặt tên cho nó để dễ quản lý khi chỉnh sửa giúp tiết kiệm thời gian.
Đầu tiên là tạo một một group mới trong bảng quản lý layer và đặt tên ví dụ tôi đặt cho nó là home sao đó trong Floder home tôi tiếp tục tạo những group khác để quản lý và làm việc từng group riêng biệt.

Đầu tiên chúng ta sẽ thiết kế các thành phần sau: Logo, Nút Shopping Cart, Các nút tiền tệ và chữ.




B1.Logo: công ty ta có thể dùng phần mềm vẽ logo như illustrator hoặc corel tạo làm logo khi làm xong ta sẽ xuất file hình ảnh để dùng cho Photoshop. Như hình bên dưới:

B2.Nút shopping Cart: cách làm nút shopping cart như sau, chọn công cụ Rectangle Tool (U) – tiếp tục chọn Rounded Rectangle tool trên thanh menu ngang cho Radius (độ bo góc) là 6 px – ta sẽ vẽ một khung hình chữ nhật trên mẫu thiết kế như hình:


Đổi màu lại cho khung Shopping Cart như sau: chọn lại công cụ Move Tool (V) sau đó click phải chuột vào Layer Shape mà ta mới vừa vẽ xong chọn Blending Options. Bảng Blending Options hiện ra ta click chọn vào Gradient Overlay và chọn lại màu cho khung Shopping Cart, các bạn có thể biến tấu cho màu sắc phù hợp với tiêu chí của mình.

Sau đó ta tiếp tục trở lại công cụ Rectangle Tool để vẽ hình chiếc xe đẩy, bạn chọn vào biểu tượng ngôi sao, chọn vào nút mũi tên xổ xuống chọn vào hình chiếc xe đẩy, sau đó vẽ lên trên khung Shopping cart, như hình bên dưới:

Tiếp tục chọn công cụ Text gõ chữ vào, vẽ một đường line với chiều ngang 1 pixed tô màu trắng và giảm Opacity còn 70%. Vậy là hoàn thành nút Shopping Cart.
B3.Nút tiền tệ và chữ đăng nhập: Tương tự như nút Shopping cart chúng ta sẽ vẽ tiếp ba nút tiền tệ. Và dùng công cụ Text để gõ các câu còn lại như hình bên dưới:

B4.Bây giờ chúng ta sẽ tiếp tục thực hiện menu ngang danh mục sản phẩm. Tạo Floder đặt tên là Menu sản phẩm sau đó tạo một layer mới trong Floder đó, sau đó tiếp tục chọn công cụ Rectangular Marquee Tool (M) vẽ một thanh menu như hình bên dưới:

Vẫn giữ nguyên vùng chọn ta tiếp tục chọn công cụ Gradient Tool (G), chọn màu sắc từ lại và sau đó giữ chuột drag một đường vào vùng chọn để tô màu cho đối tượng.

Sau khi tô màu xong ta sẽ làm hai viền cho thanh menu ngang này như sau: Click phải vào layer vừa mới tô màu chọn Blending Options – tiếp tục chon Stroke và chọn thông số như trong hình mẫu bên dưới ta sẽ có viền trên và dưới của thanh menu:

Tạo bóng mờ bên dưới thanh menu. Tạo một layer tên “bóng mờ” và cho nằm dưới layer thanh ngang menu, dùng công cụ Rectangular Marquee Tool vẽ một khung nhỏ hơn thanh menu, sau khi vẽ xong ta sẽ tiếp tục vào Menu Select – Modify – Feather (Shift + F6) thông số bằng 5 sau đó tô màu cho nó nên chọn màu xám đen, sau khi tô màu xong nếu vẫn còn thấy đậm thì ta có thể giảm Opacity để phù hợp với giao diện hơn:

Sau đó ta sẽ dùng công cụ Text để gõ vào danh mục menu ngang. Tiếp theo là tạo nút “Tìm kiếm”, dùng công cụ Rectangle Tool vẽ khung “tìm kiếm”, tô màu trắng, cho viền màu xám đậm như hình bên dưới:

B5. Tạo danh mục sản phẩm, tương tự như các bước trên tạo Floder đặt tên là “Danh mục sản phẩm” dùng công cụ Rectangle Tool (U) vẽ một khung hình chữ nhật vào tô màu cho nó, dùng công cụ Text để gõ vào danh mục sản phẩm, vẽ đường Line màu trắng (Opacity là 50%) sau đó Duplicate đường line đó lên thành 7 Layer và sắp xếp cho chúng đều nhau (xem hình mẫu), Tiếp tục dùng công cụ Rectangle Tool vẽ nút cho danh mục sản phẩm cũng Duplicate thành 7 Layer và sắp xếp những nút đó đều nhau ở trước tiêu đề sản phẩm, sau khi thực hiện xong các bước trên ta sẽ có Danh mục sản phẩm như hình bên dưới:

B6. Tạo một Slice sản phẩm mới. Dùng công cụ Rectangle Tool vẽ một khung slice lớn, sau đó chọn một hình mẫu đưa vào Layout. Sau đây tôi sẽ hướng dẫn các bạn tạo một Clipping Mask (có nghĩa đơn giản là tấm hình sẽ nằm bên trong khung chữ nhật mà ta vừa mới vẽ), Click phải vào layer “hình người mẫu” vừa đưa vào khung làm việc chọn Creater Clipping Mask, thế là hình đã nằm ở trong khung Slice. Tương tự ta sẽ thực hiện cho các Slice nhỏ còn lại, lưu ý các bạn có thể dùng công cụ Transform (Ctrl+T) để thu nhỏ hay phóng to hình ảnh, và khi hoàn thành sẽ như hình bên dưới:

B7. Tạo sản phẩm trong trang website, cũng tương tự như các bước trên chủ yếu dùng công cụ Rectangle Tool vẽ khung dùng Clipping Mask để lồng sản phẩm vào khung Shape đó, dùng công cụ text để gõ thêm thông số sản phẩm vào.
B8. Tạo các banner quảng cáo bên dưới Danh mục sản phẩm. Banner quảng cáo thì có thể là hình ảnh hoặc các đoạn Javacript hình ảnh, Banner Fash, sau khi lập trình hoàn tất trang website thì ta sẽ đưa lên sau, tuy nhiên chúng ta cũng thiết kế một banner ảnh demo cho đẹp về bố cụ và hoàn chỉnh một Layout. Làm banner cũng là kết hợp giữa vẽ khung, thêm hình ảnh, thêm câu chữ....

B9. Tạo Footer cho trang website, tạo floder mới đặt tên là Footer vẽ khung hình chữ nhật dùng Gradient tô màu chuyển sắc từ màu xám đậm (mã màu: b6b6b6) đến xám nhạt (mã màu: e4e4e4). Sau đó dùng công cụ text gõ các danh mục vào, Copy logo đổi thành màu xám (mã màu: 898989) đưa xuống góc phải, gõ vào dòng chữ Powered By OpenCart Sport © 2012. Thế là xong rồi đấy. Tác phẩm hoàn thành sau cùng

Download File Gốc Tại đây : http://www.mediafire.com/?sttmpmlmmpbnus4
Lưu ý: Ta thấy trong khi thiết kế giao diện Website chúng ta sẽ dụng các công cụ vẽ khung, đường rất nhiều, như Rectangle Tool, Rectangular Marquee Tool, công cụ Text, Gradient, kết hợp màu sắc… đây là những kiến thức cơ bản trong Photoshop, các bạn chỉ cần nắm được kiến thức căn bản cùng với sự tìm tòi và sáng tạo thì chắc chắn các bạn sẽ có một thiết kế đẹp mắt. Điều quan trọng nhất sau khi đọc xong bài này là: HÃY MỞ PHOTOSHOP RA VÀ BẮT ĐẦU THIẾT KẾ NÀO!

Read more »