Architect's Company Website

263-543

Multimedia

The Implementation of design presentation

ARCHITECT WEBSITE AND FLASH PRESENTATION 263-543 : MULTIMEDIA IN DESIGN PRESENTATION

by Architect Jeerawan Boodsri I Pingpink I 54059307 Computer Aided Architectural Design Faculty of Architecture | Silpakorn University

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

Architect’s Company Website การนาเสนอเว็บไซต์บริษัทออกแบบทางด้ านสถาปั ตยกรรมของ CRSTUDIO architects , pc

หลักการนาเสนอเว็บไซต์ของบริษัทออกแบบที่จดั ทาขึ ้นมา จะเน้ นความเรี ยบง่าย มีสีสนั ซึ่งประกอบด้ วย ข้ อมูลเกี่ยวกับบริษัท CRSTUDIO architects, pc ในด้ านความพร้ อมของการทางานออกแบบ ในเรื่ องของเทคโนโลยี โปรแกรมที่ใช้ งานวัสดุก่อสร้ าง พร้ อมภาพเคลื่อนไหว เพื่อนาเสนอผลงานโครงการที่เด่น ๆ ( feature projects ) และ รายละเอียดเกี่ยวกับโครงการเพื่อความเข้ าใจแก่ผ้ เู ข้ ามาเยี่ยมชมเว็บไซต์ และมีสว่ นที่เชื่ อมต่อกับเว็บไซต์อื่นๆ ที่เป็ น ที่นิยมของผู้ใช้ อินเตอร์ เน็ต คือ Twitter , Architizer , Facebook , Flickr , Youtube เพื่อเป็ นการประ ชาสัมพันธ์ ผลงานของบริษัท

263-543 มัลติมีเดียเพื่อการนาเสนองาน

1

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

องค์ ประกอบของการออกแบบเว็บไซต์

องค์ ประกอบโดยทั่วไปของเว็บไซต์ มี 3 ส่ วนด้ วยกัน คือ 1) Navigation Navigation เป็ นส่วนที่จะนาผู้เข้ าชมเว็บไซต์ไปยังส่วนต่าง ๆ ของเว็บไซต์ โดยสามารถทาให้ อยู่ในแนวนอน หรื อแนวตังก็ ้ ได้ ในเว็บไซต์ของบริษัทนาเสนอในแนวนอนด้ านบนของเว็บไซต์ โดยส่วนนี ้จะนาไปสูเ่ นื ้อหาหน้ าอื่นของ เว็บไซต์ 1. Home – หน้ าเริ่มต้ น ชื่อว่า Index.html ซึ่งแนะนาความเป็ นมาของบริษัท ข่าวสารใหม่ ๆ 2. About – วิสยั ทัศน์ของบริษัท และทีมงานออกแบบของบริษัท 3. Studio – ความเชี่ยวชาญ ความพร้ อมของบริษัทในด้ านเทคโนโลยีของการออกแบบ การใช้ โปรแกรม ออกแบบ AutoCAD and Revit, 3ds Max, Rhino, SketchUP, Adobe Creative Suite, MasterSpec and Microsoft Office.

4. Projects – โครงการที่น่าสนใจของบริษัทซึ่งแสดงถึงความเชี่ยวชาญในการออกแบบ 5. Contact – การติดต่อบริษัท , ประวัตขิ องบริษัท , การสมัครงาน 6. Sitemap – ที่รวมทุกส่วนของเว็บไซต์ให้ อยู่ในหน้ าสุดท้ ายหากผู้ชมค้ นหาบางหน้ าไม่เจอ และที่รวมหน้ า โฆษณาที่น่าสนใจทาง YouTube , AIA Awards 263-543 มัลติมีเดียเพื่อการนาเสนองาน

2

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

2) Content Contents ส่วนเนื ้อหาของเว็บไซต์ เป็ นส่วนที่สาคัญมากที่สดุ ผู้ใช้ งานจะเปลี่ยนไปชมเว็บใหม่ ทันที ตาแหน่งที่วางจะอยู่ตรงกลาง

หากผู้ใช้ งานไม่สามารถเข้ าถึงได้ โดยง่าย

3) Footer Footer คือส่วนล่างสุดของหน้ าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ตา่ งๆเอาไว้ footer จะเป็ นตัวบอกผู้ชมว่าส่วนนี ้ คือล่างสุดของหน้ าที่กาลังแสดงอยู่แล้ ว ไม่มีเนื ้อหาเพิม่ เติมแล้ ว หรื อเป็ นเนื ้อหาที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ตา่ งๆ เช่น © 2011 CR STUDIO architects, pc และเว็บไซต์ตา่ งๆ เช่น Facebook : <a href= “ชื่อไฟล์ที่ตอ้ งการลิงค์”> ตัวอักษรหรื อรู ปภาพที่จะใช้แสดง </a> <a href="http://www.facebook.com/pages/CR-Studio-Architects-PC/223209761051568"><img src="images/facebook.png" width="13" height="14" alt="l1" /></a> Flickr : <a href="http://www.flickr.com/photos/crstudioarchitects/"><img src="images/flickr.png" width="13" height="14" alt="l2" /></a> Twitter : <a href="http://twitter.com/crsarchitects"><img src="images/twitter.png" width="13" height="14" alt="l3" /></a> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

3

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

Architizer : <href="http://www.architizer.com/en_us/firms/view/cr-studio-architects-pc/632/"><img src="images/architizer.png" width="13" height="14" alt="l4" /></a></div>

Html Code - Footer <!-- footer --> ( คอมเมนต์ เพื่อเป็ นการแบ่งการทางานของเว็บไซต์เป็ นส่วน ) <footer> <div class="container"> <div class="wrapper"> <div class="fleft">© 2011 CR STUDIO architects, pc</div> <div class="fright"><a rel="nofollow" href="http://issuu.com/pingpinkapple/docs/fire__rescue_station" target="_blank">Website template</a> designed by pingpink&nbsp; &nbsp; |&nbsp;<a href="http://www.facebook.com/pages/CR-Studio-Architects-PC/223209761051568"><img src="images/facebook.png" width="13" height="14" alt="l1" /></a> <a href="http://www.flickr.com/photos/crstudioarchitects/"><img src="images/flickr.png" width="13" height="14" alt="l2" /></a> <a href="http://twitter.com/#!/crsarchitects"><img src="images/twitter.png" width="13" height="14" alt="l3" /></a> <a href="http://www.architizer.com/en_us/firms/view/cr-studioarchitects-pc/632/"><img src="images/architizer.png" width="13" height="14" alt="l4" /></a></div> </div> </div> </footer> <script type="text/javascript"> Cufon.now(); </script> </body> </html> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

4

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

การสร้ าง Website ในปั จจุบนั มีเว็บไซต์ทางเลือกหลายอย่าง ที่มีตวั อย่างการออกแบบ Template , CSS ที่เราสามารถดาวน์ โหลดได้ ฟรี เพื่อมาดูเป็ นแบบอย่าง การจัดวาง Layout ในหน้ าหนึ่ง องค์ประกอบของเว็บไซต์ที่ดี และทาการ เพิม่ เติม หรื อแก้ ไข ในภายหลัง หากต้ องการส่วนอื่นเพิม่ เติม ซึ่งผู้ออกแบบเว็บไซต์เองต้ องทาการศึกษาภาษา HTML และนามาประยุกต์ใช้ เช่น เว็บไซต์-http://www.templatemonster.com/free-opencart-template.html

จัดเรี ยง Folder ใน Drive D:\.........\

263-543 มัลติมีเดียเพื่อการนาเสนองาน

5

จีระวรรณ บุตรศรี 54059307

สร้ าง Site 1. คลิกเมนู Site เลือก New Site ใน โปรแกรม Dreamweaver 2. ปรากฏหน้ าต่าง Site Definition เลือก Advanced 3. Local info - Site Name ตังชื ้ ่อ Site > crstudio - Local Root Folder เลือกชี ้ไปที่ Directory ที่เก็บ File - Default Image Folder เลือกชี ้ไปที่ Directory ที่เก็บรูปภาพ - HTTP Address ใส่ URL ของ Local Host - Cache เลือกเพื่อปรับปรุงจุดเชื่อมโยง Web Page

263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

6

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

CSS CSS มีหน้ าที่กาหนดโครงเว็บไซต์ ควบคุมตาแหน่ง ขนาด และการแสดงผลของ DIV tag

263-543 มัลติมีเดียเพื่อการนาเสนองาน

7

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

การสร้ าง effect ให้ เว็บไซต์ คือการใช้ Java Scripts ดาวน์โหลดจาก http://docs.jquery.com/Main_Page เก็บไว้ ในโฟลเดอร์ “ Js ”

<!DOCTYPE html> <html lang="en"> <head> <title>Home - Home Page | Design Company </title> <meta charset="utf-8" /> *ลิงค์ เชื่อมต่ อกับ CSS* <link rel="stylesheet" href="css/reset.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> * สคริป Java ใช้ สาหรับหมุนดูรูปภาพ * <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script> <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script> <script type="text/javascript" src="js/roundabout.js"></script> <script type="text/javascript" src="js/roundabout_shapes.js"></script> <script type="text/javascript" src="js/gallery_init.js"></script> <script type="text/javascript" src="js/cufon-replace.js"></script> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

8

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

<!--[if lt IE 7]> <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all"> <![endif]--> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <script type="text/javascript" src="js/IE9.js"></script> <![endif]--> <style type="text/css"> #apDiv1 { position:absolute; width:226px; height:40px; z-index:1; left: 736px; top: 507px; } #apDiv2 { position:absolute; width:135px; height:31px; z-index:1; left: 791px; top: 205px; } body,td,th { color: #000000; } </style> <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

9

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

*Navigation ด้ านบน* <body> <!-- header --> <header> <div class="container"> <h1>CRSTUDIO </h1> <nav> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="privacy.html" class="current">Studio</a></li> <li><a href="gallery.html">Projects</a></li> <li><a href="contacts.html">Contact</a></li> <li><a href="sitemap02.html">Sitemap</a></li> </ul> </nav> </div> </header> <!-- #gallery --> <section id="gallery"> <div class="container"> <ul id="myRoundabout"> <li> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','w idth','898','height','417','title','Imageslider1','src','../flashmo_254_grid_slider_click','quality','high','pluginspa ge','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','../flashmo_254_grid_slider_click' ); //end AC code 263-543 มัลติมีเดียเพื่อการนาเสนองาน

10

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="898" height="417" title="Imageslider1"> <param name="movie" value="../flashmo_254_grid_slider_click.swf" /> <param name="quality" value="high" /> <embed src="../flashmo_254_grid_slider_click.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFl ash" type="application/x-shockwave-flash" width="898" height="417"></embed> </object></noscript> </li> <li><img src="images/CR-Studio-Architects-Eileen-Fisher-Store-1_1.jpg" alt="" /></li> <li><img src="images/CR-Studio-Architects-Audi-Special-Projects-5_0.jpg" alt="" /></li> <li><img src="images/CR-Studio-Architects-Work-2.jpg" alt="" /></li> <li><img src="images/CR-Studio-Architects-Work-3.jpg" alt="" /></li> </ul> </div> </section> <!-- /#gallery --> <div class="main-box"> <div class="container"> <div class="inside"> <div class="wrapper"> <!-- aside --> <aside> <h2>Recent <span>News</span></h2> <!-- .news --> <ul class="news"> <li> <figure><strong>22</strong>June</figure> <h3><strong>FDNY Marine Company 01 </strong></h3> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

11

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

CR Studio is pleased to announce the official opening of the new FDNY facility <a href="#">...</a> </li> <li> <figure><strong>09</strong>June</figure> <h3><strong>Construction Kicks Off At Sands Point Residence</strong></h3> Construction begins this week on the Sands Point Residence on Long Island. <a href="#">...</a> </li> <li> <figure><strong>31</strong>May</figure> <h3><strong>Audi Fletcher Jones Showroom Opens in Chicago</strong></h3> Audi Fletcher Jones in Chicago is a conversion of three separate buildings into one multi - level brand statement. <a href="#">...</a> </li> <li> <figure><strong>25</strong>May</figure> <h3><strong>Pier 62 Carousel Building Awarded MetalMag Architectural Award</strong></h3> CR Studio's Pier 62 Carousel Building is featured in Alex Ulam's article.<a href="#">...</a> </li> </ul> <!-- /.news --> </aside> * Content – เนื ้อหา* <!-- content --> <section id="content"> <article> <h2>Welcome to <span>Our CR Studio architects !</span></h2> <p>Established in New York City in 1996, CR Studio is a multidisciplinary architecture practice with an emphasis on pragmatic research and building realization. CR Studio's portfolio is a manifestation of the processes of collaboration and consideration of the unique qualities and constraints of each 263-543 มัลติมีเดียเพื่อการนาเสนองาน

12

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

project. CR Studio uses evolving technology to create unique works of architecture while incorporating environmentally sound principles..</p> <figure><a href="#"><img src="images/Fletcher_Jones.jpg" alt="" width="566" height="99" /></a></figure> <p>A spirit of collaboration is the bedrock of CR Studio&rsquo;s design and project-management processes. Partners play an integral role in every step of project development and progress. Guided by ongoing dialogue with clients, consultants, artists and craftspeople, we are committed to identification of a client&rsquo;s core challenges and goals. Immediate or "signature" solutions are eschewed in favor of consensus building throughout the execution of the design.</p> CR Studio Architects has won eight AIA awards and was selected as one of the 24 original small firms in the NYC Department of Design and Construction&rsquo;s &ldquo;Design for Excellence&rdquo; initiative. CR Studio has been featured in numerous design journals and publications.

</article>

</section> </div> <p>&nbsp;</p> <div class="linkweb"></div> </div> </div> </div> * Footer – ลิงค์ ด้านล่ าง * <!-- footer --> <footer> <div class="container"> <div class="wrapper"> <div class="fleft">© 2011 CR STUDIO architects, pc</div> <div class="fright"><a rel="nofollow" href="http://issuu.com/pingpinkapple/docs/fire__rescue_station" target="_blank">Website template</a> designed by pingpink&nbsp; &nbsp; |&nbsp;<a href="http://www.facebook.com/pages/CR-Studio-Architects-PC/223209761051568"><img src="images/facebook.png" width="13" height="14" alt="l1" /></a> <a href="http://www.flickr.com/photos/crstudioarchitects/"><img src="images/flickr.png" width="13" 263-543 มัลติมีเดียเพื่อการนาเสนองาน

13

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

height="14" alt="l2" /></a> <a href="http://twitter.com/#!/crsarchitects"><img src="images/twitter.png" width="13" height="14" alt="l3" /></a> <a href="http://www.architizer.com/en_us/firms/view/cr-studioarchitects-pc/632/"><img src="images/architizer.png" width="13" height="14" alt="l4" /></a></div> </div> </div> </footer> <script type="text/javascript"> Cufon.now(); </script> </body> </html>

263-543 มัลติมีเดียเพื่อการนาเสนองาน

14

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

เมื่อคลิกที่รูปภาพจะทาให้ เกิดการหมุนวนภาพในช่อง Div ตรงกลาง เพื่อเลือกดูรูปภาพได้

263-543 มัลติมีเดียเพื่อการนาเสนองาน

15

จีระวรรณ บุตรศรี 54059307

263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

16

จีระวรรณ บุตรศรี 54059307 แสดงรูปภาพนาเสนองานด้ านบน

263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

17

จีระวรรณ บุตรศรี 54059307

Studio

263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

18

จีระวรรณ บุตรศรี 54059307

Projects

263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

19

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

Free SlideShow Maker การนาเสนอผลงานในหมวดของ Projects ได้ นาเสนอเทคนิคแบบภาพเคลื่อนไหว ซึ่งสามารถ Download ได้ จากโปรแกรมของ Visual Slideshow ที่เว็บไซต์ http://visualslideshow.com/ , และสามารถศึกษาวิธีใช้ จาก เว็บไซต์ http://visualslideshow.com/index.html#help

ขัน้ ตอนที่ 1 : การใส่ รูปภาพ การใส่รูปภาพสามารถเลือกใส่รูป ( Add images ) , โฟลเดอร์ ของรูปภาพ ( Add images from folder ) , รูปภาพของในเว็บไซต์ ( Flickr , Photobucket ) ซึ่งเป็ นฟั งก์ชนั เสริมที่เพิม่ เข้ ามา หรื อจะใช้ วธิ ี Drag & Drop รูปภาพ จากภายนอกเข้ ามา ซึ่งรูปภาพทังหมดจะถู ้ กรวบรวมเข้ ามาใช้ ในโปรแกรม ถ้ ามีรูปภาพที่ไม่ต้องการ สามารถทาการ กด Ctrl ค้ างไว้ และลบได้ โดยกดปุ่ ม Delete เครื่ องหมายลบ

263-543 มัลติมีเดียเพื่อการนาเสนองาน

20

Architect’s Company Website

จีระวรรณ บุตรศรี 54059307 ขัน้ ตอนที่ 2 : การใส่ Caption 

 

Caption – ในช่องสีขาวข้ างรูปมีไว้ สาหรับพิมพ์ข้อความอธิบายรูปภาพ แต่ถ้านารูปมาจากเว็บไซต์ของ Flickr ข้ อความที่เคยพิมพ์ไว้ จะถูกนาเข้ ามาโดยอัตโนมัติ Path, Size – ในแต่ละรูปภาพจะมีร ายละเอียดชื่อรูป ขนาดของรูป วันที่แก้ ไขล่าสุดกากับไว้ Url – รูปภาพแต่ละรูปสามารถทาลิงค์ ( Link ) เชื่อมต่อไปหน้ าเว็บไซต์สว่ นอื่นได้

ขัน้ ตอนที่ 3 : การแก้ ไขรูปภาพ ในโปรแกรม Visual Slideshow ผู้ใช้ สามารถปรับแต่งหมุนรูปภาพ Rotate Left หรื อ Rotate Right นอกจากนี ้เมื่อกด Double Click ที่รูปภาพสามารถปรับแต่งสีรูปภาพได้ ขัน้ ตอนที่ 4 : Gallery properties ที่เมนูของ Gallery หรื อ กดปุ่ ม Properties แสดงเป็ นรูปข้ างล่า ง ในส่วนนี ้ผู้ใช้ สามารถแก้ ไขหรื อเพิม่ ฟั งก์ชนั ชื่อ Slide Show title , การเล่น โดยอัตโนมัติ ( Auto play Slide Show ) , การเล่นย้ อนกลับเมื่อจบการ นาเสนอ ( Loop Slide Show ) , แสดงข้ อความกากับในแต่ล ะรูป ( Show caption ) , แสดงฟั งก์ชนั ควบคุมการเล่น เช่น Play—Pause—Previous—Next

เพื่อกดหยุดดูรูปภาพได้ ทังนี ้ ้ผู้ใ ช้ สามารถกาหนดตาแหน่ งการวางในส่วน

ด้ านล่าง ( Bottom ) , ตรงกลาง ( Medium ) หรื อถ้ าไม่ต้องการแสดงก็สามารถปิ ดในช่อง Show loader และผู้ใช้ สามารถเพิม่ เพลงไฟล์ Mp3 ( Play audio file ) ประกอบการนาเสนอได้ แต่สงิ่ ที่ขาดไป คือไม่สามารถกด เปิ ด —ปิ ด เสียงได้

263-543 มัลติมีเดียเพื่อการนาเสนองาน

21

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

รูปภาพ Thumbnails ที่ใช้ สาหรับคลิกกดดูรูปภาพ และขยายเป็ นรูปใหญ่ โดยมีฟังก์ชนั ต่าง ๆ ดังนี ้ - กาหนดว่าต้ องการฟั งก์ชนั ( Enable thumbnails ) , - ขนาดของรูปภาพ ( Thumbnails Size ) , - กาหนดไฟล์ของรูปภาพ ( Thumbnails Format in PNG or JPG format ), - ความละเอียดของรู ปภาพ ( Thumbnails Quality ) , Thumbnails Format (save in PNG or JPG format) , - จัดวางตาแหน่ง ( Alignment of thumbnails ) เป็ น ด้ านบน ( Top ) , ด้ านล่าง ( Bottom ) , ด้ านซ้ าย ( Left ) , ด้ านขวา ( Right ) - สีพื ้นหลัง ( Page color ) หรื อถ้ าไม่ต้องการกาหนดสี ( Use default ) ซึ่งพื ้นหลังจะเป็ นสีเทา

สาหรับ Demo ทดลองใช้ จะมี Water Mark ของบริษัท Visual SlideShow แต่ถ้าเป็ นแบบ Licensed Program จะไม่มีในส่วนนี ้ และผู้ใช้ โปรแกรมสามารถเพิม่ ชื่อ โลโก้ ของบริษัท เพื่อใช้ ในทางธุรกิจ

263-543 มัลติมีเดียเพื่อการนาเสนองาน

22

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website



Fade effect : รูปภาพจะค่อย ๆ จางหาย และปรากฏรูปใหม่เข้ ามา



Flash effect : รูปภาพเข้ ามาทีละช่วงแบบรวดเร็วระดับปานกลาง



Fold effect : รูปภาพพับออกมาจากมุมบนด้ านซ้ าย



Ken burns effect : รูปภาพจะมีการเคลื่อนไหวแบบลอย และค่อย ๆ จางหาย สลับรูปภาพ



Push effect : รูปภาพเลื่อนจากขวามาซ้ าย

263-543 มัลติมีเดียเพื่อการนาเสนองาน

23

Architect’s Company Website

จีระวรรณ บุตรศรี 54059307

เลือกขนาดของ Image Thumbnails 640X480 px ซึ่งเป็ นขนาดที่พอเหมาะ ปรับขนาด Image quality ของ Image Thumbnails ให้ มีความละเอียดสูงสุด ขัน้ ตอนที่ 5 : การ Publish เป็ นหน้ า Html - Publish to folder : คลิกเลือกโฟลเดอร์ ที่ต้องการจะบันทึกไฟล์งาน เช่น C:/Users/User/Desktop/projects จากนันจากนั ้ นกดปุ่ ้ ม publish และทาการ Copy ไปวางในโฟลเดอร์ เว็บไซต์ของ Site - Publish to FTP server : FTP Location Manager window เป็ นการ Upload ผ่านระบบ Server ของเว็บไซต์ - Insert to page : นา Visual Slideshow ไปวางในเว็บไซต์ที่เราได้ จดั ทาไว้ แล้ ว

263-543 มัลติมีเดียเพื่อการนาเสนองาน

24

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

ภายในโฟลเดอร์ Projects จะประกอบด้ วย 2 โฟลเดอร์ คือ data และ engine data – รูปภาพใหญ่ ( images ) , รูปภาพเล็ก ( thumbnail ) engine –โครงหน้ า ( CSS ) , รูปภาพที่ Control การเคลื่อนไหว ( images ) , ภาษา Java ( js ) html – ไฟล์เว็บไซต์ที่มีอยู่ 4 หมวดด้ วยกัน คือ Cultural+Institution , Commercial + Retail , Residential , Residential และนามาใส่ในช่อง Link ของรูปภาพในหน้ า Projects เพื่อเชื่อมต่อข้ อมูล

263-543 มัลติมีเดียเพื่อการนาเสนองาน

25

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

Insert -> Layout Objects -> AP Div นารูปภาพที่ปรับขนาดใน Photoshop ขนาด width="196" height="43" คลิกที่รูปภาพและ Paste ไฟล์ Html ลงในช่อง Link : <a href="proj_re6.html">

Code : <div id="apDiv24"><a href="projectculture2.html"><img src="images/thumb-Proenza-Schouler-1 copy.jpg" alt="pic17" width="196" height="43" /></a></div> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

26

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

วิธีการปรับค่า Resolution : พิมพ์คา่ Resolution -- height : 768px , width: 1024px ในไฟล์ Slideshow.css และ ทดลองด้ วยการเปลี่ยนค่า Screen resolutions ของหน้ าจอเป็ น 800 X 600 ภาพหน้ าเว็บไซต์จะเต็มจอไม่ผดิ ไปจาก เดิม

263-543 มัลติมีเดียเพื่อการนาเสนองาน

27

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

Effect : Ken burns effect : รูปภาพจะมีการเคลื่อนไหวแบบลอย และค่อย ๆ จางหาย สลับรูปภาพ

Show Controller : Play—Pause—Previous—Next เพื่อกดหยุดดูรูปภาพ

Download file PDF : CR-Studio-Architects-Snowmass-Residence-Summary_0.pdf

263-543 มัลติมีเดียเพื่อการนาเสนองาน

28

จีระวรรณ บุตรศรี 54059307 แบบที่ 1 แผนที่แบบ 2 มิติ

แบบที่ 2 แผนที่ 3 มิติ –ของ Google

แบบที่ 3 แผนที่แบบ Street View ของ Google Earth

263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

29

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

ขัน้ ตอนที่ 1 : ค้ นหาที่อยู่บริษัท CR Studio Architects , PC เลือกที่ Earth ซึ่งอยู่ด้านบนของแผนที่

ขัน้ ตอนที่ 2 : คลิกเลือก Street View เพื่อเข้ าสูร่ ูปถ่าย Panorama

ขัน้ ตอนที่ 3 : หมุนรูปภาพเพื่อหาตาแหน่งอาคารบริษัท

263-543 มัลติมีเดียเพื่อการนาเสนองาน

30

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

ขัน้ ตอนที่ 4 : Copy Code ตรงช่อง วาง HTML เพื่อฝั งในเว็บไซต์ และวางลงในช่อง Div พื ้นที่วา่ งตรงกลาง จะ ปรากฏเป็ นหน้ าจอขึ ้นมาในช่อง กด F12 ทดลองเปิ ด หน้ าเว็บไซต์ Contact จะมีการโหลด Link ของ Google Earth ผู้ใช้ สามารถทาการขยายแบบเต็มหน้ าจอ เพื่อดูสถานที่จริง ถนนรอบข้ าง หรื อกดดูบนแผนที่แบบธรรมดา

263-543 มัลติมีเดียเพื่อการนาเสนองาน

31

จีระวรรณ บุตรศรี 54059307

263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

32

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

<a href="mailto:mail@crstudio.com">mail@crstudio.com</a> <h3>Press Inquiries</h3> Lea Cloud<br /> <a href="mailto:lea@crstudio.com">lea@crstudio.com</a> <h3>New Business</h3> Victoria Rospond<br /> <a href="mailto:victoria@crstudio.com">victoria@crstudio.com</a> </div> <div><a href="#" onClick="document.getElementById('contacts-form').submit()">Send Your Message!</a></div>

263-543 มัลติมีเดียเพื่อการนาเสนองาน

33

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

การนา Flash เข้ ามาใส่ ในเว็บไซต์ การนาเสนอภาพเคลื่อนไหวแบบ Flash มีให้ ดาวน์โหลดฟรี ที่เว็บไซต์ http://www.flashmo.com/ เมื่อผู้ใช้ ดาวน์โหลดมาเสร็จแล้ ว เราสามารถนารูปภาพที่มีอยู่ใส่ไปในโฟลเดอร์ Photos

263-543 มัลติมีเดียเพื่อการนาเสนองาน

34

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

ขัน้ ตอนที่ 1 : ปรับขนาดรูปภาพใน Photoshop ขนาด 700X300 และตังชื ้ ่อว่า flashmo_700X300 บันทึกลงใน โฟลเดอร์ ชื่อว่า photos

ขัน้ ตอนที่ 2 : นาไฟล์ทงหมดที ั้ ่ เกี่ยวข้ องกับภาพ flash ใส่ลงในโฟลเดอร์ site

ขัน้ ตอนที่ 3 : Insert -> Media -> Flash ไฟล์งาน flash flashmo_254_grid_slider_click

263-543 มัลติมีเดียเพื่อการนาเสนองาน

35

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

Site Map ขัน้ ตอนการทา Accessible expanding and collapsing menu : http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/ Accessible expanding and collapsing menu demo page : http://www.456bereastreet.com/lab/accessible-expanding-collapsing-menu/

263-543 มัลติมีเดียเพื่อการนาเสนองาน

36

จีระวรรณ บุตรศรี 54059307

ตัวอย่ าง HTML วางไว้ ท้ายสุดของ Style4.css

<!------------------------------ /#sitemap_style ----------------------------------------> .menu, .menu ul { margin:0; padding:0; list-style:none; } .menu {width:200px;} .menu li { margin:0; padding:0; margin-bottom:1px; } .menu a { display:block; padding:2px 5px; color:#000; 263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

37

จีระวรรณ บุตรศรี 54059307 background:#b0c23d; text-decoration:none; } .menu a:hover {background:#d9dcb0;} .menu ul li {padding-left:15px;} .menu ul a {background:#ced174;} .hidden {display:none;} /*==========================================*/

Sitemap.html

263-543 มัลติมีเดียเพื่อการนาเสนองาน

Architect’s Company Website

38

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

โครงสร้ าง Dropdown Menu ใส่ ในตอนท้ ายของ Sitemap.html

เพิ่มเติม Menu และ Submenu ตามกลุ่มเว็บไซต์ <ul class="menu"> <li><a href="#">Home</a> <div id="apDiv2"><img src="images/Charred_C.jpg" alt="oo" width="560" height="159 " /></div> <ul> <li><a href="index.html">Welcome</a></li> <li><a href="http://crstudio.com/news">Recent News</a></li> </ul> </li> <li><a>About</a> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

39

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

<ul> <li><a href="about.html">Approach</a></li> </ul> </li> <li><a href="#">Studio</a> <ul> <li> <div id="apDiv11"><img src="images/1_4.JPG" alt="tect" width="600" height="220" /></div> <a href="privacy.html">Techology</a></li> </ul> </li> <li><a href="gallery.html">Projects</a> <ul> </ul> </li> <li><a href="#"><img src="line_def1.gif" alt="io" />|Cultural + Institutional</a> <ul> <li><a href="project00.html">Pier 62 Carousel</a></li> <li><a href="project11.html">Marine Company 01</a></li> <li><a href="projectcu1.html">FDNY Fire Hook + Ladder Company </a> <div id="apDiv2"><img src="images/r12.jpg" alt="oo" width="626" height="424 " /></div> </li> <li><a href="project02.html">AMNH Discovery Center</a></li> <li><a href="project07.html">Filmmakers Collaborative</a></li> <li><a href="projectculture1.html">Millburn Public Library</a></li> </ul> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

40

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

</li> <li><a href="#"><img src="line_def1.gif" alt="io" />|Commercial + Retail</a> <ul> <li> <div id="apDiv6"><img src="images/CR-Studio-Architects-Audi-Special-Projects-5_0.jpg" alt="retailing" width="650" height="450" /></div> <a href="projectretail1.html">Eileen Fisher SoHo Store</a></li> <li><a href="projectre2.html">Eileen Fisher Showroom</a></li> <li><a href="project04.html">Audi USA Showrooms</a></li> <li><a href="project09.html">Museum of Art + Technology</a></li> <li><a href="projectculture2.html">Proenza Schouler</a></li> <li><a href="projectre8.html">House of Crypton</a></li> </ul> </li> <li><a href="#"><img src="line_def1.gif" alt="io" />|Residential</a> <ul> <li> <div id="apDiv7"><img src="images/Projects/CR-Studio-Architects-Snowmass-Residence-5.jpg" alt="House" width="650" height="450" /></div> <a href="project05.html">Collector's Loft</a></li> <li><a href="projectresident1.html">Hillsdale Screen House</a></li> <li><a href="projectre6.html">House of Resistance</a></li> <li><a href="projectre7.html">Hillsdale Screen House</a></li> <li><a href="projectre1.html">Do DiDo Duplex</a></li> <li><a href="projectre3.html">Gramercy Park Residence</a></li> </ul> </li> <li><a href="#"><img src="line_def1.gif" alt="io" />|Competitions</a> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

41

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

<ul> <li> <div id="apDiv8"><img src="images/Projects/Projects/CR-Studio-Architects-NMAAD-Oslo-1.jpg" alt="compe" width="650" height="454" /></div> <a href="projectcm1.html">NJ 9/11 Memorial Cove</a></li> <li><a href="project03.html">African Burial Ground</a></li> <li><a href="projectcm4.html">ThyssenKrupp</a></li> <li><a href="projectco2.html">Robbins School</a></li> <li><a href="projectculture3.html">National Museum of Art,Architecture and Design</a></li> <li><a href="projectcm2.html">NMAAD Oslo</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li> <div id="apDiv9"><img src="images/contactus.jpg" alt="contactus" width="652" height="450" /></div> <a href="contacts.html">Our Contact</a></li> <li><a href="mailto:mail@crstudio.com">mail@crstudio.com </a></li> <li><a href="mailto:lea@crstudio.com">lea@crstudio.com </a></li> <li><a href="mailto:victoria@crstudio.com">victoria@crstudio.com</a></li> </ul> </li> <li><a href="#">Sitemap</a> <ul> <li> <div id="apDiv10"><img src="images/CASE - ACS - LSMSHF -(58)_LOW_0_0.jpg" alt="social" width="654" height="450" /></div> <a href="#">AIA</a></li> <li><a href="#">YouTube</a></li> <li><a href="#">Facebook</a></li> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

42

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

<li><a href="#">Flickr</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Architizer</a></li> </ul> </li> </ul> </div> </div> <div id="apDiv3"> <h3>Press Kit</h3> Download a <a href="http://crstudio.com/sites/default/files/press_kit.pdf">PDF</a> of our press kit, which includes our firm profile, approach, selected projects, awards and client list. <h3>Employment</h3> If you would like to be considered for a position at CR Studio please email a cover letter, resume and work samples in a single PDF with a maximum file size of 5mb to <a href="mailto:jon@crstudio.com">jon@crstudio.com</a>.<br /> <br /> Please use the following file naming convention: <strong>CV_Lastname_Firstname_monthdateyear.pdf</strong><br /> <br /> We cannot accept files that do not match this criteria nor can we accept CDs, DVDs, or hand-delivered packages. No phone calls please.</div> <p>&nbsp;</p> </div> <div id="apDiv4"><a href="http://www.youtube.com/watch?v=xRPn2uCW43A"><img src="images/Whats_New_Video_dark_blue.png" alt="youtube" width="215" height="64" /></a></div> <p>&nbsp;</p> </div> <!-- footer --> <footer> 263-543 มัลติมีเดียเพื่อการนาเสนองาน

43

จีระวรรณ บุตรศรี 54059307

Architect’s Company Website

<div class="container"> <div class="wrapper"> <div class="fleft style1">© 2011 CR STUDIO architects, pc</div> <div class="fright"><a rel="nofollow" href="http://issuu.com/pingpinkapple/docs/fire__rescue_station" target="_blank">Website template</a> <span class="style3">designed by pingpink&nbsp;</span> <span class="style3">&nbsp;</span><span class="style1"> |</span>&nbsp;<a href="http://www.facebook.com/pages/CR-Studio-Architects-PC/223209761051568"><img src="images/facebook.png" width="13" height="14" alt="l1" /></a> <a href="http://www.flickr.com/photos/crstudioarchitects/"><img src="images/flickr.png" width="13" height="14" alt="l2" /></a> <a href="http://twitter.com/#!/crsarchitects"><img src="images/twitter.png" width="13" height="14" alt="l3" /></a> <a href="http://www.architizer.com/en_us/firms/view/cr-studioarchitects-pc/632/"><img src="images/architizer.png" width="13" height="14" alt="l4" /></a></div> </div> </div> </footer> <script type="text/javascript"> Cufon.now(); </script> </div></div></div></div></body> </html>

263-543 มัลติมีเดียเพื่อการนาเสนองาน

44

A D V A N C E D TECHNOLOGY S T U D I O