Monday, October 20, 2008
Building a Web Site using Photoshop
Create all the pages in one Photoshop file, and use grouped layers to hold each page.
For each web page, turn on and off the appropriate groups and layers and SAVE FOR WEB (HTML and images for up state, and images only for over state).
Open the html files inside your Dreamweaver Site and add the NAV BAR behaviors and drop down menu scripts.
For example, a typical portfolio site might include the following pages:
index.html ( Flash animation)
menu.html (hyperlinked menu to all the pages)
contact.html (name, address, email)
portfolio.html (illustrations, photo gallery, design sketches)
videos.html (process videos, tutorials, animations)
references.html ( at least three references, academic and industry)
resume.html (up-to-date curriculum vitae)
For each web page, turn on and off the appropriate groups and layers and SAVE FOR WEB (HTML and images for up state, and images only for over state).
Open the html files inside your Dreamweaver Site and add the NAV BAR behaviors and drop down menu scripts.
For example, a typical portfolio site might include the following pages:
index.html ( Flash animation)
menu.html (hyperlinked menu to all the pages)
contact.html (name, address, email)
portfolio.html (illustrations, photo gallery, design sketches)
videos.html (process videos, tutorials, animations)
references.html ( at least three references, academic and industry)
resume.html (up-to-date curriculum vitae)
Wednesday, October 15, 2008
Exam Preparation Exercise
Here's today's challenge:
Create a Web Site in 100 minutes, with the following specifications:
1) (10 marks) Web site will have four pages ( index page, menu page, strengths page, contact page). Each page must include a page wrapper with a width of 760 pixels.
2) (10 marks) Menu is created in Photoshop with the file saved as menu.psd. Menu page will have two links (Strengths, Contact) each with a NavBar Behavior with over and up state. The strengths link will link to the strengths.html page. The contact link will link to the contact.html page.
3) (10 marks) Strengths page will have a drop down menu with three strengths and a link to a description of each. TIP: You can use anchors for the links to the descriptions on this page. The drop down menu is created in Photoshop and must be saved as dropdown.psd.
4) (10 marks) Contact Page will have a picture of self, a working email link, and name information.
5) (10 marks) Each page will have an image map linking back to menu.html.
6) (10 marks) All pages will have meta tags (title with author name, 10 keywords, 1 sentence description of page)
7) (10 marks) Index page will have a Flash Header text and a Flash button hyperlinking to menu.html.
8) (10 marks) The local EXAM Site is set up with the following file names and folders: index.html, menu.html, strengths.html, contact.html, images folder, scripts folder, headertxt.swf, button.swf. All images must be inside the images folder. A folder called PHOTOSHOP will hold the two photoshop files(menu.psd, dropdown.psd)
9) (10 marks) Files are posted to your account (Remote Site) in a folder called EXAM. Place a new link from your Remote Site Account main menu to the index file in the EXAM folder. You can use an image map for this.
10) (10 marks) Everything works perfectly AND all specifications met.
Create a Web Site in 100 minutes, with the following specifications:
1) (10 marks) Web site will have four pages ( index page, menu page, strengths page, contact page). Each page must include a page wrapper with a width of 760 pixels.
2) (10 marks) Menu is created in Photoshop with the file saved as menu.psd. Menu page will have two links (Strengths, Contact) each with a NavBar Behavior with over and up state. The strengths link will link to the strengths.html page. The contact link will link to the contact.html page.
3) (10 marks) Strengths page will have a drop down menu with three strengths and a link to a description of each. TIP: You can use anchors for the links to the descriptions on this page. The drop down menu is created in Photoshop and must be saved as dropdown.psd.
4) (10 marks) Contact Page will have a picture of self, a working email link, and name information.
5) (10 marks) Each page will have an image map linking back to menu.html.
6) (10 marks) All pages will have meta tags (title with author name, 10 keywords, 1 sentence description of page)
7) (10 marks) Index page will have a Flash Header text and a Flash button hyperlinking to menu.html.
8) (10 marks) The local EXAM Site is set up with the following file names and folders: index.html, menu.html, strengths.html, contact.html, images folder, scripts folder, headertxt.swf, button.swf. All images must be inside the images folder. A folder called PHOTOSHOP will hold the two photoshop files(menu.psd, dropdown.psd)
9) (10 marks) Files are posted to your account (Remote Site) in a folder called EXAM. Place a new link from your Remote Site Account main menu to the index file in the EXAM folder. You can use an image map for this.
10) (10 marks) Everything works perfectly AND all specifications met.
Friday, October 10, 2008
Converting mov to flv & Inserting into HTML page
Some multimedia content for ya!!
Creating a flv (Flash Video Format) from a Quicktime mov file using Flash Video Encoder.
Then, inserting a flv into Dreamweaver and adding a Skin, with auto play and rewind settings.
Creating a flv (Flash Video Format) from a Quicktime mov file using Flash Video Encoder.
Then, inserting a flv into Dreamweaver and adding a Skin, with auto play and rewind settings.
Flash Video
Flash Video referred to a proprietary file format, having the extension FLV.
The most recent public release of Flash Player supports H.264 video and HE-AAC audio.
Flash Video content may also be embedded within SWF files.
Notable users of the Flash Video format include YouTube, Google Video, Yahoo! Video, Reuters.com, and many other news providers.
The most recent public release of Flash Player supports H.264 video and HE-AAC audio.
Flash Video content may also be embedded within SWF files.
Notable users of the Flash Video format include YouTube, Google Video, Yahoo! Video, Reuters.com, and many other news providers.
Web Site Portfolio Project Specifications
PROJECT DUE DATE: Week 14
CLASS PRESENTATION DATE : Week 15
THEME: “The Medium is the Massage.”
The purpose of this project is to create a Web Site Portfolio that reflects the identity of Me, the Web Designer.
The Web Site Portfolio must include all original work, specifically including the following content and technical specifications:
1) A picture of me, the Web Designer;
2) A description of my identity (five) strengths – in relationship to me as a designer;
3) Working links to at least five Web sites that relate directly to my identity;
4) A Site Map, including working hyperlinks to all page references;
5) At least five examples of my own original designs, with description of techniques, design features, process;
6) A Mailto: linking to the email address of Me, the Web designer;
7) Meta tags for each page – Description and Keywords, and a proper title tag;
8) A custom designed internal or external CSS, including a page wrapper for each page;
9) Use of image maps;
10) Use of a table;
11) Use of rollovers (including Nav Bar Behavior);
12) Drop down menu (using Timeline technique);
13) Evaluations: by self & by another associate;
14) Contact and Project information from the designer: full name, email address, hours worked on the project, date due.
15) All resource files (Photoshop [.psd], Illustrator [.ai], Flash [.fla] text, etc…), and the final Web Site must be submitted on a CD-R, or DVD-R. The Site must be fully functional on the CD-R, DVD-R. Suggestion: Use two folders: one labeled “Working Files” and the other named “Final Site”.
The Web Site will be evaluated according to the following: evidence of creativity, aesthetics, and web design principles, functionality, ease-of-use, and the meeting of all content and technical specifications.
Important Notes:
1) Projects are evaluated in class on the due date and must be submitted on CD-R, DVD-R (readable on both MAC & PC).
2) All submissions must be received on the due date.
3) All CD-R, DVD-R submissions (to be accepted) must be labeled with full name, Email address, and date of submission.
CLASS PRESENTATION DATE : Week 15
THEME: “The Medium is the Massage.”
The purpose of this project is to create a Web Site Portfolio that reflects the identity of Me, the Web Designer.
The Web Site Portfolio must include all original work, specifically including the following content and technical specifications:
1) A picture of me, the Web Designer;
2) A description of my identity (five) strengths – in relationship to me as a designer;
3) Working links to at least five Web sites that relate directly to my identity;
4) A Site Map, including working hyperlinks to all page references;
5) At least five examples of my own original designs, with description of techniques, design features, process;
6) A Mailto: linking to the email address of Me, the Web designer;
7) Meta tags for each page – Description and Keywords, and a proper title tag;
8) A custom designed internal or external CSS, including a page wrapper for each page;
9) Use of image maps;
10) Use of a table;
11) Use of rollovers (including Nav Bar Behavior);
12) Drop down menu (using Timeline technique);
13) Evaluations: by self & by another associate;
14) Contact and Project information from the designer: full name, email address, hours worked on the project, date due.
15) All resource files (Photoshop [.psd], Illustrator [.ai], Flash [.fla] text, etc…), and the final Web Site must be submitted on a CD-R, or DVD-R. The Site must be fully functional on the CD-R, DVD-R. Suggestion: Use two folders: one labeled “Working Files” and the other named “Final Site”.
The Web Site will be evaluated according to the following: evidence of creativity, aesthetics, and web design principles, functionality, ease-of-use, and the meeting of all content and technical specifications.
Important Notes:
1) Projects are evaluated in class on the due date and must be submitted on CD-R, DVD-R (readable on both MAC & PC).
2) All submissions must be received on the due date.
3) All CD-R, DVD-R submissions (to be accepted) must be labeled with full name, Email address, and date of submission.
Project Tip#1: Menu Sections
When building your menu for your Web Site Portfolio ... Common sections include:
Portfolio: This is the showcase of your work.
About: This can be a bio overview.
Contact: Be sure to make it easy for people to find your contact info.
The Process: Talk about your design process, goals and how you deal with clients.
Case Studies: In a case study section, you can focus on a few clients or projects and discuss the design process. This is effective for showcasing branding jobs or clients for whom you have done several related projects.
Clients: A list of clients, often divided by industry or job type.
Press: Show publications you have appeared in and any awards or honors.
Resume: Depending on the goal of the site, including a standard format resume can be helpful to prospective employers or clients.
http://graphicdesign.about.com/od/buildingaportfolio/ss/web_portfolio.htm
Portfolio: This is the showcase of your work.
About: This can be a bio overview.
Contact: Be sure to make it easy for people to find your contact info.
The Process: Talk about your design process, goals and how you deal with clients.
Case Studies: In a case study section, you can focus on a few clients or projects and discuss the design process. This is effective for showcasing branding jobs or clients for whom you have done several related projects.
Clients: A list of clients, often divided by industry or job type.
Press: Show publications you have appeared in and any awards or honors.
Resume: Depending on the goal of the site, including a standard format resume can be helpful to prospective employers or clients.
http://graphicdesign.about.com/od/buildingaportfolio/ss/web_portfolio.htm
Subscribe to:
Posts (Atom)
