Planning for Ecommerce: SmartSite Graphics In Depth Jason Zook Basepage changes Changing your siteâs look and feel to coordinate the season Adding new standards/advancements to your header Adding glimmer pennants to your webpage Utilizing the HTML Editor to add blaze to your landing page Using an outside source, Dreamweaver, to add glimmer to your website Working with different item pictures Getting the most out of your pictures Creating âSmart Graphicsâ Creating multi-tasking flags and design Putting portable controls in your grasp Creating CSS that will permit your webpage to show legitimately on a cell phoneSlide 2
Basepage_xxx.htm controls 3 unique regions of your webpage TOP: LEFT: Underneath the left route Basepage Changes Seasonal Change BOTTOM:Slide 3
Basepage Changes Seasonal Change Working with the Top without Editing the Basepage Changing the realistic however keeping the same record nameSlide 4
Right tap on picture Save two forms Update the picture Now have new and unique Basepage Changes Seasonal ChangeSlide 5
Basepage Changes Seasonal Change Before AfterSlide 6
Basepage Changes Seasonal Change Changing the BasePage_xxx.htm Root > HtmlTemplates > BasePage_xxx.htm Always a decent idea to reinforcement your records Open BasePageSlide 7
Basepage Changes Seasonal Change Find picture you need to overhaulSlide 8
Basepage Changes Seasonal Change Save new logo with new name Replace old record/realistic name with new record Save BasePage_xxx.htm, transfer to webpage and perspective changesSlide 9
Basepage Changes Adding a New Banner to your BasePage Adding another standard to your BasePage_xxx.htm Before AfterSlide 10
Basepage Changes Adding a New Banner to your BasePage Open BasePage_xxx.htm Find area that your new standard would fit and make your flag to fit those measurementsSlide 11
Basepage Changes Adding a New Banner to your BasePage Create picture and static page if necessary Add picture to BasePage_xxx.htm and connection to static page Save BasePage_xxx.htmSlide 12
Basepage Changes Adding a New Banner to your BasePage View your progressions and test your connectionSlide 13
Adding a Flash Banner Using HTML Editor Adding a Flash Banner to your Home Page utilizing the HTML Editor Open Content Management 1.) Content 2.) Website 3.) Text 4.) New Site TextSlide 14
Adding a Flash Banner Using HTML Editor Select âHomePageRotatingBannerâ Select âFlash Managerâ Select âUpload Flashâ Select âBrowseâSlide 15
Adding a Flash Banner Using HTML Editor Find your .swf record Select Open Select UploadSlide 16
Adding a Flash Banner Using HTML Editor Input your Width and Height Select Insert Save your progressions Upload your swf to your picture index located at: Root/ImagesSlide 17
Adding a Flash Banner Using HTML EditorSlide 18
Adding a Flash Banner Using Dreamweaver/Web Development Application Open Dreamweaver Open another archive Clear all additional code, <!DOCTYPE, <head>, <body>â¦ Save Insert > Media > Flash Enter Title, OKSlide 19
Adding a Flash Banner Using Dreamweaver/Web Development Application Two Important Files AC_RunActiveContent.js YourFlashFile.swf Copy Both Place in pictures registry Root/picturesSlide 20
Adding a Flash Banner Using Dreamweaver/Web Development Application Update your Dreamweaver File 4 spots to alter Anytime you see your swf document referenced, you have to redesign that code with the area of that record Before: ,\'src\',\'YourFlashFile\', After: ,\'src\',\'/pictures/YourFlashFile\',Slide 22
Adding a Flash Banner Using Dreamweaver/Web Development Application Copy your code from Dreamweaver Content Management Content > Website > Text > New Site Text Select HomePageRotatingBanner Select â<>â HTML Paste SaveSlide 23
Adding a Flash Banner Using Dreamweaver/Web Development ApplicationSlide 24
Product Images Getting the most out of your pictures Main Product Images Large, Thumbnail and Tiny Additional Image(s) Extra Large, Glamor shots or any extra photographs Main Product Images Additional ImagesSlide 25
Product Pictures Getting the most out of your pictures Main Product Images Large - Maximum size of 520px wide by 400px highSlide 26
Product Pictures Getting the most out of your pictures Main Product Images Thumbnail and Tiny Thumbnail - Maximum size of 150px wide by 100px tall Tiny - Maximum size of 70px wide by 70px tallSlide 27
Product Pictures Getting the most out of your pictures Additional Images These pictures are sorted into a gathering called â XLarge â. View More ImagesSlide 28
Product Pictures Getting the most out of your pictures Improper Image Size ManipulationSlide 29
Product Pictures Getting the most out of your pictures Correct Image Size ManipulationSlide 30
Product Pictures Getting the most out of your pictures Looking at them next to each other has the effect self-evidentSlide 31
Product Pictures Saving your pictures Finally, we are prepared to spare our pictures. Your illustrations individual will need to make an organizer for them. This organizer ought to contain the accompanying envelopes: 1_TIFFs Large Thumbnail Tiny XlargeSlide 32
Product Pictures Saving your pictures Starting with a decent picture that is 700px by 580px Large XLarge Thumbnail TinySlide 33
Product Pictures Saving your pictures This procedure may appear to be confounded, however in the event that your representation individuals use Photoshop, these resizing and sparing undertakings can be refined with a solitary snap in Photoshopâs Actions Pallet. Your design individuals can make their own Action, or we can make a few of these activities accessible to you.Slide 34
Product Pictures Saving your pictures In this Last situation, we have a decent picture that is 420px high. Since as far as possible is 400px, it should be made littler for the Large picture, yet it is not by any stretch of the imagination sufficiently substantial for a XLarge picture. You may need to consider overlooking the XLarge picture to abstain from showing so as to baffle your customer him/her a practically indistinguishable picture in the pop-up window. For this situation, you could resize the picture to 400px high and spare a Large, Thumbnail and Tiny form just. 400px high 420px HighSlide 35
Creating Smart Graphics Creating Multi-Tasking Banners and illustrations Creating Multi-Tasking Banners and representation Old Method Nothing for Spiders to CrawlSlide 36
Creating Smart Graphics Creating Multi-Tasking Banners and design Smarter Graphics Create utilizing both realistic and html Add decisive words to enhance watchword rankings Create various flags that turn for crisp substance Utilize Title TagsSlide 37
Creating Smart Graphics Creating Multi-Tasking Banners and illustrations Creating a pennant in Dreamweaver/Web Dev. Application Background realistic Leave space for html/content to show up overtop Save picture, to nearby and to site pictures organizer Open Dreamweaver Using CSS to set up the flag, control design, content, shading Adding Product connects additionally adding Keywords to enhance positioning based off Keyword Research AnalysisSlide 38
Creating Smart Graphics Creating Multi-Tasking Banners and representation Working in Dreamweaver Set width, stature, and foundation picture with no rehash Add Product Links Add Keyword LinksSlide 39
Creating Smart Graphics Creating Multi-Tasking Banners and illustrations Keys to recollect Add supreme or full urls for connections Add title labels to connections Make picture sources relative urls Save and make 2 more standards Add new magic word expressions and connections to every pennant Optional; 3 distinct design with diverse item on eachSlide 40
Creating Smart Graphics Creating Multi-Tasking Banners and design Adding Banners to Category Pages Content Management > Content > Website > Menus > XXX Menu Category > Edit NodeSlide 41
Creating Smart Graphics Creating Multi-Tasking Banners and representation Adding Banners to Category Pages Text > New Menu Node Text Under Menu Node Text Type Desc Select Html â<>â Paste codeSlide 42
Creating Smart Graphics Creating Multi-Tasking Banners and illustrations Set up different pennants to begin and stop on specific dates Check âUse Start Dateâ Enter Date to begin Check âUse End Dateâ Enter Date to end Save Repeat for every pennantSlide 43
Creating Smart Graphics Creating Multi-Tasking Banners and illustrations Taking it above and beyond Fresh Content Create 3 Banners Rotate like clockwork SQL script to guarantee Banners turn ceaselessly When one finishes, SQL script will add 6 days so pennant will start up again in 6 days. This proceeds for every flag until you decide to stop the turn.Slide 44
Putting versatile controls in your grasp IIS ( Internet Information Services) ISS can now distinguish kind of program and gadget and sidetracks can be made. Current CSS Created for screens 800px wide yet best saw by screen determination set at 1000px This versatile program is set at 240px wideSlide 45
Putting portable controls in your grasp Many diverse approaches to get to the web Most phones Smartphones; iPhone, Android, Palm, BlackBerryâ¦ iTouch, iPad, PSPâ¦ List develops ordinary Resolution can differ Starting at 240px wideSlide 46
Putting portable controls in your grasp IIS sidetracks Create versatile/cell phone CSS Tell which programs/gadgets ought to dive
Profundity of Field shallow: A huge opening prompts less central profundity. Wide: If the gap is ...
Site Answers for the Blessing Business. Retail Ecommerce – For Expert online blessing shops Wh ...
Semantics represented a vital error in the middle of explorers and tourism data on the web. ... ...
Varying so as to con outlines the lattice scale or skipping interims ... Pie diagrams show exten ...
Once the business is off the ground, the following key choice is to develop ... business framewo ...
Think about Hiring as a Website Developer. Give your business an expert appearance. ... Enter an ...
Robotized arrangement permits progressively shaped collusions on a for each ... Points of intere ...
Design incorporate pictures, photographs, catches, logos, and so forth. To make a strong ... con ...
Make a couple of expert searching design for utilization on your page. Reuse slug or ... Look at ...
Web fundamentals and conventions. New web advancements and patterns. New eCommerce advances ... ...
A Success Story: eBay. The code took every necessary step, the space on the Web server accompani ...
Essential area name. Well known hunt class destination. An Example of terrible area: ... Gooey l ...
Game Games. Players are mentors or competitors in well known games ... Outline and execute a div ...
In Spain Google has a 98% piece of the overall industry. Business with no online vicinity are ge ...
34 Frost profundity gage destinations. 29 at COOP and UCOOP destinations
Instructions to start planning a center gathering task. Step by step instructions to start outli ...
Teaching with Depth An Understanding of Webb’s Depth of Knowledge. “He who learns but do ...
Outlining Rubrics. Understudies as Self AssessorsTeachers as Focused Coaches. What is a rubric?. ...