Outlining for Ecommerce: SmartSite Design Inside and out.


110 views
Uploaded on:
Category: Education / Career
Description
Planning for Ecommerce: SmartSite Representation Inside and out Jason Zook Basepage changes Changing your site's look and feel to coordinate the season Including new flags/advancements to your header Adding streak standards to your site Using the HTML Editorial manager to add glimmer to your landing page
Transcripts
Slide 1

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 phone

Slide 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 name

Slide 4

Right tap on picture Save two forms Update the picture Now have new and unique Basepage Changes Seasonal Change

Slide 5

Basepage Changes Seasonal Change Before After

Slide 6

Basepage Changes Seasonal Change Changing the BasePage_xxx.htm Root > HtmlTemplates > BasePage_xxx.htm Always a decent idea to reinforcement your records Open BasePage

Slide 7

Basepage Changes Seasonal Change Find picture you need to overhaul

Slide 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 changes

Slide 9

Basepage Changes Adding a New Banner to your BasePage Adding another standard to your BasePage_xxx.htm Before After

Slide 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 measurements

Slide 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.htm

Slide 12

Basepage Changes Adding a New Banner to your BasePage View your progressions and test your connection

Slide 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 Text

Slide 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 Upload

Slide 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/Images

Slide 17

Adding a Flash Banner Using HTML Editor

Slide 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, OK

Slide 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/pictures

Slide 20

Adding a Flash Banner Using Dreamweaver/Web Development Application Update your Dreamweaver File AC_RunActiveContent.js, should be in pictures envelope and your document needs to reference that. <script src="/pictures/AC_RunActiveContent.js" type="text/javascript"></script> Code should be entered that tells the record where the AC.js is found, if not, Flash won\'t appear.

Slide 21

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 Save

Slide 23

Adding a Flash Banner Using Dreamweaver/Web Development Application

Slide 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 Images

Slide 25

Product Pictures Getting the most out of your pictures Main Product Images Large - Maximum size of 520px wide by 400px high

Slide 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 tall

Slide 27

Product Pictures Getting the most out of your pictures Additional Images These pictures are sorted into a gathering called “ XLarge ”. View More Images

Slide 28

Product Pictures Getting the most out of your pictures Improper Image Size Manipulation

Slide 29

Product Pictures Getting the most out of your pictures Correct Image Size Manipulation

Slide 30

Product Pictures Getting the most out of your pictures Looking at them next to each other has the effect self-evident

Slide 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 Xlarge

Slide 32

Product Pictures Saving your pictures Starting with a decent picture that is 700px by 580px Large XLarge Thumbnail Tiny

Slide 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 High

Slide 35

Creating Smart Graphics Creating Multi-Tasking Banners and illustrations Creating Multi-Tasking Banners and representation Old Method Nothing for Spiders to Crawl

Slide 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 Tags

Slide 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 Analysis

Slide 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 Links

Slide 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 each

Slide 40

Creating Smart Graphics Creating Multi-Tasking Banners and design Adding Banners to Category Pages Content Management > Content > Website > Menus > XXX Menu Category > Edit Node

Slide 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 code

Slide 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 pennant

Slide 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 wide

Slide 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 wide

Slide 46

Putting portable controls in your grasp IIS sidetracks Create versatile/cell phone CSS Tell which programs/gadgets ought to dive

Recommended
View more...