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