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

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