adobe muse cc - basic.pdf

Adobe Muse CC | 1

""

"Adobe Muse CC""""""""""""""""

"""

www.nextflow.in.th 083-071-3373 Adobe Muse

Adobe Muse CC | 2

Workshop!" Adobe Muse CC Adobe Muse "" Adobe Muse Workshop: Design the Web Basic" Adobe Muse Workshop: Create the Web Advanced"""

Adobe Muse CC ?""Adobe Muse Web Designer HTML, CSS, Javascript "" "" "" "" User Group Manager Thai Adobe Developer Community, , nextflow.in.th sochiie.com


Adobe Muse CC | 3

Site! 6! Website ! 6! Web Page ! 7! Master Page! 9!

Master Page Web page ! 9!

Web Page! 9! Web Page ! 9! Web Page! 9! Selection Tool ! 10! 4 ! 10!

! 12! ! 12! ! 13! Crop Tool ! 13!

Text ! 14! ! 14! Text! 15! Font! 16!

System Font! 16! Web Font! 17!

State! 18! Widget! 19! www.nextflow.in.th 083-071-3373 Adobe

Muse

Adobe Muse CC | 4

"

Menu Widget! 19! Menu Widget! 19! Menu Widget! 19! Font Menu Widget! 20!

Slideshow Widget! 21! Slideshow Widget Thumbnails! 21! Slideshow Widget! 22!

Mobile Layout ! 23! Tablet Phone Layout! 23!

Scroll Effect! 24! Website Adobe Muse HTML project! 25! Website FTP! 26


Adobe Muse CC | 5

"""""""""""

"DO. OR DO NOT. There is no TRY."""- Yoda, Star Wars


Adobe Muse CC | 6

Site!" Website !1. File > New Site""

""2. Layout Web Page ""

""3. OK ""www.nextflow.in.th 083-071-3373 Adobe

Muse

Adobe Muse CC | 7

" Web Page !1. Plan Mode Control Panel"2. Page Thumbnail + ""

""3. Web page Enter"4. Web page Page Thumbnail

remove Thumbnail""


Adobe Muse CC | 8

""5. Web page Page Thumbnail

""

""


Adobe Muse CC | 9

""" Master Page!" Master Page Web page !1. Master Page"2. Master Page Page Thumbnail """ Web Page! Web Page !1. Plan Mode"2. Double-click Web page "3. Adobe Muse Design mode web page"" Web Page! Preview Mode" File > Preview Page in Browser File > Preview Site in Browser"


Adobe Muse CC | 10

""" Selection Tool !1. Selection Tool Tool Box"""

""2. , Text frame, Page"3. Control Panel

""

""" 4 !1. Rectangle Tool Tool Box""


Adobe Muse CC | 11

""2. Rectangle Page"3. Control Panel Rectangle

Selection Tool Control Panel """


Adobe Muse CC | 12

!!1. File > Place Ctrl + D (Windows) Cmd + D (OS X)""

""2. (1 ) Select ""

""www.nextflow.in.th 083-071-3373 Adobe

Muse

Adobe Muse CC | 13

3. Page (100%)"4. ""!1. Selection Tool Tool Box"2. Page"3. Control Panel Image Frame

"" Crop Tool !1. Crop Tool Tool Box"2. Page"3. Control Panel Image Frame "4. Crop Area "5. Crop Area Crop Area""

"""


Adobe Muse CC | 14

Text !!1. File > Place "2. TXT ""

""3. Text frame Page""

"


Adobe Muse CC | 15

Text!1. Selection Tool Text Tool""

""2. Text Frame Double-click Text Frame

Panel Font face, , , ""

"""


Adobe Muse CC | 16

Font! System Font!1. Text frame"2. Font menu System Font""

""3. Font "4. Text frame System Font Website

Adobe Muse Text frame ""

"


Adobe Muse CC | 17

" Web Font!1. Text frame"2. Font menu Web Font"3. Add Web Font""

""4. Adobe Muse Add Web Font (

Internet)""

""5. Font OK"www.nextflow.in.th 083-071-3373 Adobe

Muse

Adobe Muse CC | 18

6. Font Menu font Web Font"" State!1. Rectangle "2. State Panel ""

""3. Rollover State "4. Mouse Down State "5. Active State "6. Web page Preview mode """"


Adobe Muse CC | 19

Widget! Menu Widget! Menu Widget!1. Widget Library Panel "2. Menu""

""3. Menu Web Page"4. Menu Link Site map "" Menu Widget!1. Selection Tool"2. Menu widget "3. Menu Item Control Panel Menu Item ""


Adobe Muse CC | 20

""4. Control Panel "" Font Menu Widget!1. Selection Tool"2. Menu widget "3. Menu Item Control Panel Menu Item ""

""4. Double-click Menu Item Control Panel Label"5. """


Adobe Muse CC | 21

Slideshow Widget! Slideshow Widget Thumbnails!1. Widget Library Panel "2. Slideshows""

""3. Slideshows Web Page (

Thumbnails)"4. Slideshow Web Page"""


Adobe Muse CC | 22

Slideshow Widget!1. Selection Tool"2. Widget"3. Option Panel"4. Add Image""

""5. "6. Slideshow widget "7. Selection tool delete slideshow""""


Adobe Muse CC | 23

Mobile Layout ! Tablet Phone Layout!1. Plan Mode "2. Layout Menu Layout +

Layout "" ""

3. layout "4. "

Copy from: Adobe Muse copy layout Site Plan, Page Attribute, Browser Fill""

""5. OK"6. Adobe Muse Site map ""


Adobe Muse CC | 24

""7. copy Layout Layout "" Scroll Effect!1. Design Mode"2. "3. Panel Scroll Motion Effect "

Key Position: " Motion Before Key: Key position" Motion After Key: Key position""


Adobe Muse CC | 25

Website " Website Adobe Muse HTML project!1. File > Export as HTML""

""2. "

Domain name: domain name website www.nextflow.in.th hosting "

Location: folder Adobe Muse Website HTML, CSS, ""

""3. OK"


Adobe Muse CC | 26

4. Adobe Muse HTML, CSS, Javascript, project Adobe Dreamweaver CC Adobe Edge Code CC""

Website FTP!1. File > Upload to FTP Host""

""2. ( Hosting ) 2

FTP " Upload:"

Only modified files: "

All files: ()" Store Credentials (encrypted): ""


Adobe Muse CC | 27

""3. OK Adobe Muse upload file "" !""


Adobe Muse CC | 28

""", "

Video Tip & Trick, " ""

www.nextflow.in.th" "

facebook.com/nextflow"""


adobe muse cc - basic.pdf

Documents