设计与制作教学网站).pptVIP

第七章 设计与制作教学网站 7．1网页制作工具简介 网页制作的工具很多，按照制作方式分，可分为标注型、编程型和“所见即所得”型。 所谓“所见即所得”，是指创建中的文件在编辑过程中的显示与文件最终在浏览器中的显示是一样的。 常用的“所见即所得”型网页编辑器有FrontPage和Dreamweaver等，后面将详细讲解用Dreamweaver制作网站的方法。 7．2教学网页设计的艺术性及一般程序 网页艺术设计是伴随着互联网络的产生而形成的，网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为网站设计的重要组成部分，并随着网络技术的发展而发展。从表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。 7．2.1网页的色彩设计 1．网页色彩设计的原则 网页色彩设计总的原则应该是”整体调和,局部对比”，即网页色彩设计要以色彩的三要素中的某一种或二种要素作调和基础，在其他一种或两种要素中进行对比处理;或者在这三要素取得调和的基础上，在某些局部用一些对比强烈的色彩。 网页色彩设计具有四个原则： ①独特性 ②针对性 ③相关性 ④视认性 7.2.2网页色彩设计的方法 1．明确网站的主题、服务对象及所用色彩要表达的目的 2．确定网页的主色调 ３．根据主调色选择辅助色 ：可选一至两种辅助色，要控制在三种之内。 ４．确定背景和文本的色彩 。通常的做法是：主要内容文字用非彩色（黑色），边框、背景、图片用彩色。 ５．确定超链接、超链接翻转效果、当前超链接及已访问的超链接的色彩 7.2.3 网页色彩心理感觉 红色：是一种激奋的色彩。使人产生冲动、热情、活力的感觉。 绿色：介于冷暖色彩之间，给人和睦、宁静、健康、安全的感觉。 黄色：充满快乐和希望，它的亮度最高。 蓝色：是凉爽、清新、专业的色彩。 白色：给人明快、纯真、清洁的感受。 黑色：给人深沉、神秘、寂静的感觉。 灰色：是一种中庸、平凡、温和、谦让、中立和高雅的颜色。 7.2.4网页页面元素的设计 网站是由多个网页组成的，网页又是由多个页面元素构成的，合理地组织编排这些元素，对于页面设计都有重要的意义。 根据不同的网站的信息存储和不同的页面信息内容，每个页面不可能放置相同固定的元素，但大多数网页，都包含导航、网站标志、图片、文字、动画和超级链接等页面元素中的一项或几项，其中前四项对网页设计的艺术美的影响最大，这里着重谈谈这些元素的设计技巧 1．导航 2．网站标志（Logo） 3．图片 4．文字 互联网是一个很大的信息共享空间，而信息主要是以文字的形式展现的，因此，文字是页面主要组成元素之一。针对不同需要，选择字体、字号、内文编排和版式设计等，都属于文字的设计。 7.2.4教学网页设计的一般程序 1.教学网页的教学设计 2.教学网页的结构设计 3.稿本准备 4.素材准备 5.技术合成 6.网站的发布与推广 7.3 Dreamweaver 简介 Dreamweaver 由Macromedia 公司出品，是一个简单易用的网页制作软件，他的最大特点是“所见即所得”，即在Dreamweaver的编辑状态下看到的网页效果与在浏览器中看到的效果一样。 7.4 网页设计前的基本设置 定义本地站点 设置页面属性 定义样式表 定义本地站点 定义本地站点就是在本地电脑硬盘上建立一文件目录，将所有的网页和相关文件都放在里面，再用Dreamweaver的站点管理功能统一管理他们。 步骤 为网站起名字。用鼠标单击[站点]菜单，选择[管理站点]命令，弹出[管理站点]对话框，单击[新建]按钮，选择其中的[站点]命令，在弹出的[站点定义]对话框中，键入站点的名称。 设置网站在本地硬盘的位置，即本地根目录。以后所有的网页文件以及要用到的文件都要放在这个文件夹下。 创建文档或文件夹。 7、5制作一个简单的网页 在网页中输入文字 在网页中插入图片 设置网页背景 7.5.1在网页中输入文字 在文件面板中新建文件。打开[文件]菜单，选择[新建文件]选项，将默认名字改名。 双击文件名，进入编辑状态。 插入文字 注意空格的插入方式 设置文字属性：在属性面板上可设置文字的大小、字体等等。 7.5.2在网页中插入图片 将光标定位于要插入图片的地方，点一下[插入]栏上的[图像]按钮，弹出[选择源图像]对话框，选择好图片，单击[确定]按钮。 选中这张图，拖动图片四周的控制点，可以缩放图片。 保持这张图处于选中状态，看一下[属性]面板，注意其中的[替代] 一项的设置。 可以在浏览器中预览一下。 7.5.3设置网页背景 在页面的空白处单击鼠标右键，从弹出的菜单中，