《Dreamweaver MX 2004网页制作实例教程 教学课件 ppt 作者 彭鹏 第2章 网站前期设计制作 》由会员分享，可在线阅读，更多相关《Dreamweaver MX 2004网页制作实例教程 教学课件 ppt 作者 彭鹏 第2章 网站前期设计制作 （42页珍藏版）》请在金锄头文库上搜索。
1、第2章 网站前期设计制作,学习要点 一个优秀的网站，总是让人一目了然，不同内容的网站也有不同的风格，不管在什么时候，网站的设计者总是希望风格能更好地与网站的内容协调一致。,在网页设计的认识上，许多人似乎仍停留在网页制作的高度上，认为只要用好了网页制作软件，就能做好网页设计了。 这种观点是错误的。其实网页设计是一个感性思考与理性分析相结合的复杂过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。,网页设计中最重要的东西，并非在软件的应用上，而是在于对网页设计的理解以及设计制作的水平上，在于自身的美感以及对页面的把握上。 通过本章能够让读者掌握网站设计的基本思路，培养良好的制作习惯。,2.1
2、 网站设计思路,2.1.1 设计的目标 设计的目标是要实现设计者的意图，主要强调设计者要表现的主题和要实现的功能，站点的性质不同，则设计的目标也不同。,从形式上，可以将站点分为以下3类。 第1类是综合资讯类网站。 第2类是资讯和形象相结合的网站。 第3类则是形象类网站。,2.1.2 设计的步骤,1站点规划及草图绘制 设计首页的第一步是设计版面布局。,确定好网页的风格和版式后，网站就有了个大概的框架，这时需要明白哪些地方有什么东西，都有什么内容。,把设计好的网站版块草绘出来，安排好内容后就可以直接对照着设计草图制作了。,2设计思想在电脑上的实现,接下来要做的就是通过使用相关的计算机软件，制作需要
3、的网页，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver里完成的。,2.1.3 色彩基础,色彩是一种非常能引发感性思考的东西，它的内涵丰富，能唤起人类的心灵感知。 色彩代表了不同的情感，有着不同的象征含义。,这些象征含义是人类思想活动的一种体现，它因人的年龄、地域、时代、民族、阶层、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别等差异而有所不同。,2.1.4 造型的运用,在网页设计中，主要通过视觉传达来表现主题。 在视觉传达中，造型是很重要的一个元素。,抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。 在一幅成功的作品里，需要点
4、、线、面的共同组合与搭配来构造整个页面。,2.1.5 设计的原则,1作品的一致性 2作品的区域性 3作品的对比性 4作品的和谐性 5作品的连贯性,2.1.6 页面的优化,在网页设计中，页面的优化是较为重要的一个环节。 它的成功与否会直接影响页面的浏览速度和适应性，影响访问者对网站的印象。 在资讯类网站中，文字是页面中最多的构成元素，因此字体的优化显得尤为重要。,图片是网页中的重要元素。 图片的优化可以在保证浏览质量的前提下将其size减至最小，这样可以成倍地提高网页的下载速度。,表格（table）是页面中的重要元素，是页面排版的主要手段。 可以设定表格的宽度、高度、边框、背景色、对齐方式等参数
5、。,网页的适应性是很重要的，遇到不同的操作系统、不同的分辨率、不同的浏览器的情况下，将会看到不同的结果，因此设计时要统筹考虑。,2.2 创建本地站点,2.2.1 什么是本地站点 本地站点，是一组位于本地服务器上相互链接的页面以及这些页面所包含的图片、声音、多媒体、等素材组成的一个信息服务系统，这一系列互相链接的页面可以被访问者使用浏览器进行访问并且提供相应信息服务。,这些页面叫做网页，主页通常是指输入一个网站域名后，自动载入的页面，又称作首页。,2.2.2 建立本地站点,建站的第一步，应该是定义并且创建本地网站，当在本地机完成了网站的建设和测试后，再通过专用的软件把文件上传到Internet服
6、务器。,2.3 模板的运用,2.3.1 模板基础知识 1什么是模板 当一个网站包括很多页面，但是所有页面包括一组公共的页面元素的时候，为了减少重复页面的编写，方便管理，可以使用一个页面模板的技术构建一个页面，实现这些公共的页面元素和页面布局框架。这个特殊的页面就是模板。,2为什么要使用模板,网站模板是一个预先设计好的网站风格。 利用它可以进行快速和高质量的网站开发。 模板的核心思想就是风格和内容分离。,是当网站中有许多页面版式色彩相同的情况下，将其定义为模版，并定义其中部分可编辑，部分不可编辑，那么在利用模版制作其他页面时就会很方便，不易出错。,2.3.2 模板的制作,打开Dreamweave
7、r，按F8键打开站点控制器，新建即将制作的站点myweb，然后在站点下新建文件test.htm。 编辑test.htm，编辑好需要使用模板的公共元素，然后执行“文件/另存模板”命令，出现如图2-8所示的对话框。,图2-8 另存模板,输入模板的名字后单击“保存”按钮，可发现站点结构发生了变化，新的站点结构如图2-9所示。,图2-9 保存模板后的站点结构图,扩展名为dwt的就是模板文件，在模板文件中还需要执行“插入/模板对象/可编辑区域”命令插入可编辑区域，快捷键是Ctrl+Alt+V。 没有定义可编辑区域的模板是不能被使用的，因为它的所有部分都是被锁定的。,2.3.3 模板的使用,1从模板新建网
8、页 执行“文件/新建”命令或者按Ctrl+N组合键打开新建网页对话框，然后选择模板选项卡，如图2-11所示。,图2-11 从模板新建网页文件,2为网页套用模板,当两个模板的可编辑区域的名称一一对应时，就可以直接用一个新模板取代原有模板。,2.3.4 修改更新模板,当编辑一个使用模板建立的网页时，模板中的非可编辑区域的元素是不可修改的，要修改这些内容只有两个办法，一是直接修改相应的DWT文件，二是单击“修改/模板/从模板分离”命令来取消模板和页面的关联。,2.4 基本文字操作,2.4.1 文本的输入 按Ctrl+N组合键新建一个普通页面，选择设计者模式，将鼠标光标移动到文档窗口，就可以直接输入文
9、字内容。 输入文字的起始位置为当前光标所在位置。,2.4.2 编辑属性格式化文本,选择已经输入的文字，在下方出现文字属性，通过属性框可以编辑与修改文本的属性，如图2-16所示。,图2-16 文字属性对话框,2.5 在Dreamweaver使用CSS,2.5.1 CSS的定义及分类 层叠式样式表（Cascading Style Sheets，CSS），是由W3C组织制定的一种非常实用的网页元素规则。,是一组能控制文档中一定范围内的文本、表格、图像等外观的格式化属性的集合，能让使用者更加有效地定制和编辑网页的外观布局。,从CSS样式标记的形式来看，在Dreamweaver MX 2004中有以下3种CSS样式。 （1）自定义CSS标记样式（HTML Tag Style） （2）HTML标记样式（HTML Tag Style） （3）CSS选择器样式（CSS Selector Style）,从CSS样式的应用范围来看，CSS样式包括内联式、嵌入式和外联式。,2.5.2 使用CSS格式化文本,1CSS样式表的创建 2CSS样式表的使用 （1）内联样式表的使用 （2）嵌入式样式表的使用 （3）外联样式表的使用,
