Dreamweaver CS6网页设计案例教程解析

十二五职业教育国家规划教材
模块二站点管理与网站制作
任务一创建和管理站点 模块介绍：
站点由若干个网页组成，分为远程站点和本地站点。远程站点就是用户在 Internet上访问的各种站点，站点文件都存储在Internet服务器上。由于直接 建立维护远程站点有很多困难，因此通常在本地计算机上先完成网站的建设， 形成本地站点，再上传到Internet 服务器上。这种在本地磁盘上建立的网站 就称为本地站点。
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务三 网站设计的基础知识
子任务1 网站设计的基本原则 1．明确建立网站的目标和用户需求 Web站点的设计是展现自我形象的重要途径，因此必须明确设计站点的 目的和用户需求，从而做出切实可行的设计计划。我们会根据使用者的需求 进行分析，以“使用者”为中心，而不是以“美术”为中心进行设计规划。 在设计规划时我们会考虑： 建设网站的目的是什么？ 为谁提供服务？ 网站的目的消费者和受众的特点是什么？ 2．网页设计总体方案主题鲜明 在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的 整体风格和特色做出定位，规划网站的组织结构。
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务二 了解网页制作的基本流程
子任务2 网站制作流程 对于静态网站，掌握网页制作流程即可。如果是动态网站，需要掌握以下内 容： 1．整体规划 2．数据库规划 3．编写网站后台 4．编写网站前台 5．测试，修改 6．发布
十二五职业教育国家规划教材
模块二站点管理与网站制作
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务三 网站设计的基础知识
子任务2 网页的布局 在设计页面版式时应该注意以下两点：一是设计页面版式时应以目标 为准，最大限度地体现网站的功能。二是设计的页面应形象简明、易于接受。 设计页面时应当始终为目标用户着想，网页中的任何信息都应该是为用户服 务，因此要确保网页中的信息能够被用户接受。 总之，设计网页布局时，以简单、和谐为追求目标。
学材小结
实训任务 实训一 创建个人网站的本地站点。 【实训内容】 1．创建站点文件夹 2．规划站点内各子文件夹 实训二 设计一个网页布局的图片设为跟踪图像 【实训内容】 1．设计网页布局图片 2．将网页布局图片设为跟踪图像 3．按照跟踪图像所示实现网页设计 实训三 创建个人网站的主页。 【实训内容】 1．新建一个网页,在网页上添加一行文字“这是***的个人主页”。 2．将该网页文件命名为index.html。 3．试着练习“可视化向导”中的各项内容。
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务一创建和管理站点
子任务3 管理站点 1．打开站点 2．编辑站点 3．复制站点 4．删除站点 5．导入和导出站点
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务二 了解网页制作的基本流程
子任务1 网页制作流程 1．确定目标 主要确定自己的目的网站是什么样的，如网站的主色调、网站的颜色、网站 的内容排列等。对于新手来说，可以参考借鉴别人的作品，然后去模仿。好 的策划是成功的重要基础。 2．设计图纸 设计图纸的主要目的是要把网页中用到的图片用Photoshop或firework画出 来，这一步非常重要。对于希望从事网页美工的同学来说，Photoshop或 firework是必须要熟练掌握的。有些情况下，需要将图片切割成若干个小图 片，这项工作也需要用到Photoshop或firework。 3．制作网页 使用Dreamweaver制作网页。网页实际上就是表格加图片加FLASH。
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务一创建和管理站点
子任务1 站点规划 合理的站点结构能够加快对站点的设计，提高工作效率。如果将所有的网页 都存储在同一个目录下，当站点的目录越来越大、文档越来越多时，管理起 来就会增加很多困难。所以对站点进行规划就是很重要的一个准备工作。 1．确定站点目标 2．组织站点结构 3．确定站点的栏目和版块 4．分析访问对象
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务三 网站设计的基础知识
子任务2 网页的布局 常见的网页布局形式有以下5种： 1．“T”型布局 2．“口”字型布局 3．POP布局
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务三 网站设计的基础知识
子任务3 网站的配色 无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显 示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页 的色彩。 1．标准颜色 2．其它颜色 3．网页色彩搭配原理 4．色彩搭配的技巧 5．避免配色中的误区：
任务三 网站设计的基础知识
网站是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示 特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像公告栏 一样，人们可以通过网站来发而自己想要公开的信息，或者利用网站来提供 相的网络服务。用户可以通过网页浏览器来访问网站，获取自己需要的资料 或者享受网络服务。
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务四 使用可视化向导
子任务1 使用“标尺”和“网格” 1.设置标尺 2．使用布局网格
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务四 使用可视化向导
“跟踪图像”是Dreamweaver一个非常有效的功能，它允许用户在网页中将 原来的平面设计稿作为辅助的背景。用户就可以非常方便地定位文字、图像、 表格、层等网页元素在该页面中的位置了。 跟踪图像的具体使用：首先使用各种绘图软件做出一个想象中的网页排版格 局图，然后将此图保存为网络图像格式（包括gif、jpg、jpeg和png）。在 Dreamweaver中将刚才创建的网页排版格局图设为跟踪图像。再在图像透明 度中设定跟踪图像的透明度。这样就可以在当前网页中方便地定位各个网页 元素的位置了。 使用了跟踪图像的网页在用Dreamweaver编辑时不会再显示背景图案，但当 使用浏览器浏览时正好相反，跟踪图像不见了，所见的就是经过编辑的网页 （包括背景图案或颜色）。
十二五职业教育国家规划教材
模块二---站点管理与网站制作
பைடு நூலகம்
模块介绍：
网页是网站中的一“页”，通常是HTML格式（文件扩展名为.html或.htm 或.asp或.aspx或.php或.jsp等）。网页通常用图像档来提供图画。网页是构 成网站的基本元素，是承载各种网站应用的平台。 Dreamweaver提供了几种可视化向导来帮助用户设计文档并大致估计其在 浏览器中的效果。如：使用标尺为定位和调整层或表格的大小提供一个可视 的信息；使用跟踪图像作为页面背景以帮助您复现一个设计；使用网格能够 精确定位层和调整层大小，而且当靠齐选项启动后，移动或调整过大小的层 将自动向最近网格点靠齐。无论网格是否可见，靠齐均有效。 站点，通俗的讲，就是一个文件夹。用来存放用户做网页时用到的所有文件 和文件夹，包括主页、子页、用到的图片，声音，视频等等。规划创建和管 理站点就是为了更好的管理在做网站时用到的文件。
十二五职业教育国家规划教材
模块二站点管理与网站制作
学材小结
知识导读 本模块主要介绍了网页的基本操作，如新建、打开、保存、另存为等；可视 化向导的作用及操作；如何规划和创建站点并对站点进行管理。
理论知识 1．什么是本地站点？ 2．站点的规划从哪几方面进行？
十二五职业教育国家规划教材
模块二站点管理与网站制作
十二五职业教育国家规划教材
书名： Dreamweaver CS6网页设 计案例教程 第2版 ISBN： 978-7-111-48487-5 作者：王春红 王瑾瑜 出版社：机械工业出版社 本书配有电子课件
网页设计案例教程-----模块二
任务一创建和管理站点 任务二了解网页制作的基本流程
任务三网站设计的基础知识 任务四使用可视化向导
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务四 使用可视化向导
1．将跟踪图像放在文档窗口中 2．跟踪图像相关设置
十二五职业教育国家规划教材
模块二站点管理与网站制作
学材小结
知识导读 本模块主要介绍了网页的基本操作，如新建、打开、保存、另存为等；可视 化向导的作用及操作；如何规划和创建站点并对站点进行管理。
理论知识 1．什么是本地站点？ 2．站点的规划从哪几方面进行？
十二五职业教育国家规划教材
模块二站点管理与网站制作
学材小结
知识导读 本模块主要介绍了网页的基本操作，如新建、打开、保存、另存为等；可视 化向导的作用及操作；如何规划和创建站点并对站点进行管理。
理论知识 1．什么是本地站点？ 2．站点的规划从哪几方面进行？
十二五职业教育国家规划教材
模块二站点管理与网站制作
任务一创建和管理站点
子任务2 创建站点 Dreamweaver站点是网站中使用的所有文件和资源的集合。Dreamweaver 站点通常包含两个部分：可在其中存储和处理文件的计算机上的本地文件夹， 以及可在其中将相同文件发布到Web服务器上的远程文件夹。 实例2-1：在C盘根目录下新建一个名为“DM站点”的文件夹作为本地站点， 站点名称为“我的站点”。
十二五职业教育国家规划教材
xxx
十二五职业教育国家规划教材
十二五职业教育国家规划教材