This template design combines both responsive design techniques coupled with a self-running jQuery promotional marquee. The unique challenge this template solves is that it uses jQuery’s Ajax feature to load additional interactive data into the template based on the user’s screen size. Combined with CSS3 media queries, this template offers a compelling user experience across devices, while maintaining a shared set of HTML and CSS markup.
Read the full article on Adobe Developer Connection.
This article shows you how to use this customizable starter design for embedding HTML5 video in your websites. Read the overview to learn about the HTML5 Video Player widget used by this template, preview and download the template and related files and assets, and watch a short video to learn how you can customize this template.
Read the full article on the Adobe Developer Connection.
This article shows you how to use this customizable starter design for your jQuery Mobile projects. Read the overview to learn about two key approaches to developing websites for mobile, preview and download the template and related files and assets, and watch a short video to learn how you can customize this template.
Read the full article on the Adobe Developer Connection website.
Learn to create CSS-based layouts and add interactivity to your pages with courses by Chris Converse on Lynda.com.
This link provides you with access to a FREE 7-day trial. Watch as many videos as you like within the 7-day trial period with no cost to you.
Start your FREE 7-Day Trial at lynda.com/trial/chrisconverse
MOGO Media announces Dreamweaver Tour – Design and Create your Website seminar tour.
This seminar was developed to teach designers how to create HTML and CSS from the very beginning. Based around our new video workbook series Bring Your Web Design to Life, the morning sessions cover the very basics of HTML and CSS, and gives designers a base understanding of these technologies. The afternoon session covers more advanced web techniques, which include and intro web 2.0 techniques including Ajax, Spry, JavaScript, and XML.
This video workbook series, written and designed by Chris Converse, teaches designers to bring their web design comps into fully functioning HTML and CSS that can be displayed in a web browser.
Each attendee also receives a copy of Bring Your Web Design to Life, which includes 3.5 hours of video, sample files, and a reference guide to teach designers to create a web site with Dreamweaver. In addition, this video series contains lessons for the whole Creative Suite Web Premium CS4, CS5 (or later), including:
Learn the advantage of using HTML and CSS to add images to your web page.
Use CSS to covert anchor links into buttons by manipulating the HTML display properties.
Use Adobe Dreamweaver to compress and optimize web optimized graphics from an Adobe Photoshop file.
Learn to create compound rules in CSS to create different links colors.
Learn how to test a local web page (one that is only on your computer) using the Adobe BrowserLab service, which is available online. The video excerpt is used by permission from the book Bring Your Web Design to Life, available by Peachpit and Adobe Press.
What is BrowserLab? Adobe BrowserLab is a browser compatibility service that provides designers exact renderings of their pages on leading browsers. Results are fast, with powerful tools to spot HTML and CSS related design and layout issues.
The Cōdify Design Studio team has created a series of widget designs that you can download and customize for your own web projects. The assets include modified HTML and CSS files that are specifically developed to work with the presliced Photoshop files.
For quick and easy customization, simply update the PSD files in either Photoshop or Fireworks, and export the slices to the CodifyAssets folder. If you’re a more advanced user, feel free to modify the slice structure, HTML, and CSS files to achieve any design configuration your project requires.
Download 7 free Spry widget templates, complete with HTML, CSS, JavaScript and pre-sliced Photoshop files.
Although it is fast and easy to add widgets in Dreamweaver using the Insert panel, some design techniques require some customization of the HTML and CSS files. In the following video, we walk you through the assets provided at the MAX 2009 conference session, as well as a brief description of the specific HTML and CSS elements that were modified in each Spry widget of the Adobe MAX theme.
Click here to watch a video and download the files from Adobe DevNet.
Adobe is providing free Dreamweaver beginner templates designed and developed by Cōdify Design Studio.
The following templates were designed and developed by Cōdify Design Studio to give web designers a jump on new web layout techniques. In addition to design and layout, each design contains a dynamic element developed using CSS, HTML and JavaScript, commonly referred to as Ajax. Adobe has its own framework for developing Ajax-based sites, commonly known as Spry, and Adobe Dreamweaver supports a visual way to work with Spry and Spry widgets. The download files also include source Photoshop files with slices, which can be edited with either Photoshop or Fireworks, and the design elements are already set up to work with the layout and Spry widgets. Preview and download the templates you want, and watch a short video to learn how you can customize these templates for your own needs.
Click here to watch a video and download the files from Adobe DevNet.
You are currently browsing the archives for the Dreamweaver category.