不写代码做网站1.pptVIP

写代码作网站1 By yorkinchai 2012-12 示例网站视频 准备工作—安装Adobe Muse Adobe Muse下载地址 / 下载时要求注册Adobe帐号（免费） 安装时选择体验版 安装过程中必须联网，如出现以下界面，请检查网络，并按Retry（可能要多试几次） 如果在官网已有注册帐号，在此处输入，没有的话可以选create Adobe ID 还要输入生日(有礼物!?) 无条件接受它的条款 安装成功了 准备工作—下载素材 下载地址 /_literature_92348/Katie%27s_Cafe_Demo_Asset 解压后的目录FirstMuseSite中含有教程所会使用到的图片等素材 第一步 打开Muse，在出现的欢迎界面中选择Create —New 在出现的界面中调整网站的页面大小 选菜单【File】-【Save site as】，然后选择网站要保存的位置 Muse自动生成了网站的主页Master page 网站应该包含各种区域，如header、footer和page，这些区域的位置和大小没有固定的模式，比如下面网站： 在muse中，可以为这些区域设置为不同的region，这样各个区域的内容占据页面的固定区域，不会因为内容多少的改变而影响整体的布局。 首选鼠标点中页面左边灰色区域，右击，弹出菜单中将前三个项，如果是hide开头，全部选为show（默认都是show） 到主界面，选择下方的Master page，进入后才能拉动各种滑块 拉动左边四种滑块（分别代表header、page、footer、botton区域）到我们添加的矩形边端上 在master page，拉动滑块 到home页面看看效果 选择描边为none 选择矩形工具 画出一个矩形 选择“黑色鼠标”，可调整矩形大小和位置 选中矩形的情况下，点击右边调色面板的fill 选择填充矩形的图片 选择tile方式 选择preview可以预览网站，点击Design可以回到设计界面 现在的网站： 同样在页面底部添加相应的矩形，并设置背景图片为footer.jpg(注意：画矩形时，从页面右下角往左上角拉) 修改最近矩形框的Position如下图所示 预览效果如下： 在底部放置另一个矩形，背景图片为footer-content.jpg 注意图片的fitting模式为scale to fit 选中footer.jpg所在矩形，再按shift将footer-content.jpg所在矩形也一起选中，右键将footer-item选中 换黑色鼠标，将矩形大小调整至合适 接下来使用ps图片添加按钮到网页中，选择【File】-【place photoshop button】，在对话框中选择素材的katiescafe.psd图片 接下来的对话框中可以设置按钮的各种状态对应ps的某一图层，现在无需改变，直接点ok 移动鼠标到左上角，放置按钮，并调整其大小 所添加的是虚拟网站的logo，现在为其添加超链接，每次用户点击这个logo就跳转到主页。选中按钮，在上面工具栏的Links中选择Home 选择【File】-【export as html】，输入域名 利用浏览器的预览效果为 资料翻译自《Building your first website with Muse》Adobe Muse 官网Tutorial教程 不 header page footer Header的下边界还不够低，页面上方存在空白，需调整 双击这里 1点这里 2选素材中的header.jpg