dw网页设计基础.ppt

第1章 网页基础知识 w网页构成要素和组成元素w网页相关知识简介w网页的设计理念和配色方案w网站建设流程w典型网站分析1.1网页构成要素和组成元素1.1.1网页构成要素 网页的构成要素主要有站标、导航条、广告条、标题栏和按钮等。站标广告条导航条按钮标题栏1.站标 站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。Logo一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合，如下图所示。2.导航条 导航条是网站内多个页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面。导航条导航条3.广告条 广告条又称Banner，其功能是宣传网站或替其他企业做广告。Banner的尺寸可以根据版面需要来安排，一般大型商务网站都有自己的标准尺寸和摆放位置。4.标题栏 此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。标题栏可以是文字加单元格背景，也可以是图片，一般大型网站都采用前者，一些内容少的小网站常采用后者。5.按钮 在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。1.1.2组成元素 网页的组成元素有文字、图片、动画（gif、flash）、表单（交互功能）、音频、视频、超链接、表格、框架、导航等。1.2 网页相关知识简介 1.2.1互联网互联网（Internet），又叫因特网，它是目前世界上最大的计算机网络，将无数广域网、局域网及单机按照一定的通讯协议组织在一起，方便了计算机之间的信息传递。1.2.2网页的本质 一个网页由多个文件组成，网页文件是“根”，图像文件都是“枝叶”，图像和动画都以链接的形式插入到网页中。打开网站“搜狐网”，在浏览器中选择“文件”“另存为”菜单，将网页保存到磁盘中，然后看看网页及其组成素材。1.2.3 网站、网页和主页 w网站是多个网页的集合，各个网页通过超级链接构成一个网站整体。w网页就是以html语言为基础编写的，能够通过网络传输，并被浏览器翻译成可以显示出来的包含文字、图片、声音、动画等媒体形式的页面文件。网页由主页和其它链接页组成。w主页也叫首页，是网站的入口，即浏览者登录网站时看见的第一个网页。w根据网页能够在服务器端运行，把网页分为动态网页和静态网页。w静态网页：纯粹用html语言编写的网页，不能在服务器端运行，没有数据库支持，交互性相对较差。每个网页都有一个固定的url，且以htm、html、shtml、xml等常见形式为后缀；发布在服务器上的静态网页是事先保存在服务器上的文件，每个网页都是一个独立的文件；内容相对稳定，容易被搜索引擎检索。动态网页：即采用动态网站技术动态生成的网页，以数据库为基础，能在服务器端运行；可以实现的功能较多，如用户注册、登陆、在线调查、用户管理、订单管理、站内搜索、歌曲下载、软件下载、即时更新新闻、可以留言或书写评论等；不是独立存于服务器上的网页文件，只有当用户请求服务器时才返回一个完整的网页。1.2.4 IP地址与域名 wIP地址用来标识每台主机在互联网上的地址，具有唯一性。它由4个小于256的数字组成，数字之间用点间隔。例如，“61.135.150.126”就是一个IP地址。但是IP地址难以书写和记忆。w域名是用字符来表示主机地址的另一种方法，与IP地址对应，在使用过程中易于记忆和书写。域名也是独一无二的。如：和都是域名。1.2.5 网址 网址又叫URL，它是一种网络上通用的地址格式，用于标识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。1.2.6 网页的布局类型1.网站的类型：门户网站、政府部门形象类网站、企业网站、医院网站、科技网站、教育网站、综合网站等。2.布局相关概念w版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素，1024*768像素等，看到的版面效果也不尽相同。w布局就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。w网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。图1 形结构3.常见的布局样式（1）形结构：如图1所示。（2）口（同、国）字形结构：总体分为上、中、下3部分，中间部分又分为3栏，中间是网页的主内容区，如图2所示。图2 口字形结构（3）T（厂）形结构：顶部通常为标志、横幅广告和站内导航菜单，顶部下面分为左、右2栏结构，通常左右不对称，栏宽的是页面的主题内容，如图3所示。图3T形结构（4）上下形结构：页面划分为上下2部分。可以对称，也可以不对称，如图4所示。图4上下形结构（5）左右形结构：页面划分为左右2部分。可以对称，也可以不对称，如图5所示。图5左右形结构1.2.7网站管理与网页制作相关软件 wFireworks：主要用于制作网页图像、网站标志、GIF动画、图像按钮与导航栏等。wFlash：主要用于制作矢量动画，如广告条、网站片头动画、动画短片、MTV等。wPhotoshop：Adobe公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计的需要（除了多媒体）。在进行网页制作时，除需要Dreamweaver外，还会用到Fireworks、Flash、Photoshop等辅助软件。（DW、FW、Flash称作网页三剑客。）1.2.8 HTML基础（1）HTML语言：HTML是网页的主要组成部分，要想精通网页制作，必须对HTML语言有所了解。HTML语言是利用标记（tag）来描述网页的字体、大小、颜色及页面布局的语言，是一种早期的用于网页制作的主要语言；它也是纯文本类型的语言，可以使用任何的文本编辑器对它进行编辑。使用HTML编写的网页文件是标准的纯文本文件，可以用任何文本编辑器打开它。其后缀名为：.html或.htm。（2）HTML文档的基本结构标题标题正文正文（3）主要标记简介w开始和结束标记。在它们中间，包含网页里的所有内容。w主体:页面内容。主体部分包含文本和图像等网页里所有可见部分。w头部：头部的内容 head是除文档标题外的不可见部分，文档标题出现在浏览器的窗口标题栏中，还可以包括META信息、关键字、说明/描述、刷新、基础网页/首页（申请的域名空间或网址）、链接等；若不需头部信息则可省略此标记。【刷新就是在网址发生变化或网页经常更新时，规定在几秒钟内更新当前网页的内容。】w标题:标题：呈现出网页的标题，文档标题出现在浏览器的窗口标题栏中，包含在 标签内部。以下内容(4)(6)为选学内容。（4）网页中的其他常用标记w:分段标记w:换行标记w:w 是空格标记w 空的标签区块w字体标签w表格标签w文字标签w文本缩进的标签 可以使用这些标记在记事本中完成网页的设计。HEAD部分包含的主要元素 标签 描 述title 文档标题meta 描述HTML元信息link 描述当前文档与其它文档之间的链接关系script 脚本程序内容style 指定当前文档的CSS层叠样式表(5)Html的重要标签和属性 头部标签HEAD部分包含的主要元素 标签 描 述title 文档标题meta 描述HTML元信息link 描述当前文档与其它文档之间的链接关系script 脚本程序内容style 指定当前文档的CSS层叠样式表HEAD部分包含的主要元素 标签 描 述title 文档标题meta 描述HTML元信息link 描述当前文档与其它文档之间的链接关系script 脚本程序内容style 指定当前文档的CSS层叠样式表HEAD部分包含的主要元素 标签 描 述title 文档标题meta 描述HTML元信息link 描述当前文档与其它文档之间的链接关系script 脚本程序内容style 指定当前文档的CSS层叠样式表HEAD部分包含的主要元素 标签 描 述title 文档标题meta 描述HTML元信息link 描述当前文档与其它文档之间的链接关系script 脚本程序内容style 指定当前文档的CSS层叠样式表HEAD部分包含的主要元素 标签 描 述title 文档标题meta 描述HTML元信息link 描述当前文档与其它文档之间的链接关系script 脚本程序内容style 指定当前文档的CSS层叠样式表meta元素描述HTML文档的元信息，即关于文档自身的信息。定义搜索关键字、字符编码、作者、版权信息以及文档描述.这些标签可以向服务器提供信息，如页面的失效日期、刷新间隔和PICC等级。PICC是internet内容选择平台，它提供了向网页分配等级的方法。格式例：定义语言格式例：script元素语法格式：属性：languagestyle元素语法格式：样式语句 主体标签BODY部分包含的主要元素 属性 描 述text 设置页面文字的颜色Bgcolor 设置页面的背景颜色Background 设置页面的背景图像Link 设置页面默认的连接颜色alink 设置鼠标单击时的连接颜色Vlink 设置访问后的连接颜色Script 设置网页中的程序脚本内容图片标签属性描述Src图片的源文件Alt提示文字Width设置图片的宽度Height设置图片的高度Border设置图片的边框Vspace垂直间距Hspace水平间距align设置图片的对齐方式字体标签属性描述字体字号文字颜色属性描述表格标签行标签单元格标签表格标签常见的列表标签标签描述无序列表有序列表目录列表定义列表菜单列表列表项目的标签（6）在编写代码时的注意事项：w在书写标签属性值的时候尽量将属性值用引号（英文标点符号）括起来。w在书写html语言的时候不区分大小写。w代码优化：清理html/xhtml和清理word 生成的html代码。w 可以使用代码片段面板插入dw中预定义的代码片段（javascript、内容表、导航、文本、表单元素、页眉和页脚等）。课堂实例创建和测试第一个html网页在“记事本”窗口或者Dreamweaver网页中输入以下内容：欢迎光临我的第一个网页这是第一个简单网页!选择【文件】|【保存】命令，在弹出的“另存为”对话框中选择要保存的路径，在【文件名】文本框中输入文件名myweb001.html。1.2.10 XHTML语言简介 XHTML是Extensible HyperText Markup Language(可扩展超文本标记语言)的英文缩写，它的前身是HTML。由于HTML代码烦琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。1.2.11 脚本语言简介 脚本语言是基于对象的编程语言，网页中常用的有VBScript、JScript和JavaScript。VBScript和JScript是微软的产品，IE都支持。JavaScript是Netscape的产品，不仅适用于Netscape，同时和IE也有很好的兼容性，可以说是一种通用的脚本语言。课堂练习2 无缝滚动效果的实现本例通过研究无缝滚动效果的实现，来认识一下XHTML和脚本语言在网页制作中的作用。XHTMLJavaScript 网页内容第一：内容要精彩且便于浏览，导航清晰明了。界面美观第三：精美的网站标志、合理的版面布局（尽量简约、美观）、网站风格统一、注重色彩搭配、能适应不同浏览器及分辨率、1.3.网页的设计理念和配色方案1.3.1设计理念网页大小第二：图片、多媒体的大小和多少要细致考虑，下载速度要尽可能快1.3.2 网页中的色彩搭配w色彩的三要素色相：色彩的相貌，是区分色彩种类的名称，表示色彩相貌的差异，这种差异由光波的波长决定。明度：色彩的强度，只色彩的明暗度。纯度：色彩的饱和度，即颜色的深浅程度或浓淡程度。w色彩心理与网页表现：不同的颜色有着不同的含义，给人各种丰富的感觉和联想。记住常用纯色的十六进制代码。w红色：热情、奔放、喜悦、庄严、浪漫、火焰、暴力、侵略。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，有愤怒、热情、活力的感觉红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作。w黄色：亮度最高，有温暖感，具有快乐、高贵、富有、灿烂、活泼、明亮、光辉、疾病、懦弱、希望、智慧和轻快的个性，让人感觉灿烂辉煌。w黑色：给人深沉、神秘、寂静、悲哀、精致、现代感、死亡、病态、邪恶、压抑的感觉。w白色：纯洁、天真、洁净、简单、真理、和平、冷淡、贫乏。白色在中华文化中也代表着死亡的颜色。w紫色：浪漫、富贵、创造、谜、忠诚、神秘、稀有。紫色在某些文化中与死亡有关。w灰色：庄重、沉稳w绿色：介于冷暖色中间，显得和睦、宁静，给人健康、安全的感觉。与金黄、淡白搭配，产生优雅、舒适的气氛。植物、生命、生机、自然、稳定、成长、忌妒。在北美文化中，绿色代表的是“行”，与环保意识有关，也经常被连结到有关财政方面的事物。w蓝色：天空、清爽、科技、忠诚、安全、保守、宁静、冷漠、悲伤。w棕色：大地、厚朴、忠诚、安全、保守w橙色：也是一种激奋的色彩，有轻快、欢欣、热烈、温馨、时尚的效果。在网页中运用色彩一般应遵循下列几个原则:（1）一个页面中切忌采用过多的颜色，否则会给人一种繁杂的感觉，也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超过三四种。（2）背景的颜色不要太深，显得过于厚重，因为这样会影响整个页面的显示效果。但也有例外，黑色的背景衬托出亮丽的文本和图像，会给人一种另类的感觉。（3）要保持整个网页的色调统一。（4）要围绕网页的主题选择颜色，色彩要能烘托出主题。1.4 网站建设流程网站需求分析创建站点，设计制作各级页面空间和域名申请测试和发布网站网站推广1.4.1 网站需求分析（1）确定网站的功能和主要内容（2）规划网站主要栏目、确定网站的风格、主题，色调，以及网页的大体布局，并绘制设计草图。（3）收集网页所用素材 教学进程教学进程网站的风格设计 风格，是指站点的整体形象给访问者的综合感受，比较抽象。网站的整体形象包含以下因素 色彩 版面布局 浏览方式网站标志的设计交互性文字价值设计草图根据实际需要，画出网站的设计草图，如下：教学进程教学进程1.4.2 设计制作网站页面 该过程主要包括设计和制作页面，所谓设计，就是用图像处理软件设计好网页的效果图，并将设计好的效果图进行切割导出。将切割好的图片进行导出后，就可以在Dreamweaver中组织网站内容了。包括输入文本、插入图片、动画等。1.4.3 空间和域名申请 申请虚拟空间 所谓虚拟空间，就是互联网上的一台功能相当于服务器级的电脑或虚拟主机，该电脑要用专线或其他形式24小时与因特网相连。申请域名 域名的申请方法与虚拟空间相同，凡提供虚拟空间服务的网站一般都提供域名服务。1.4.4 测试和发布网站 有了空间和域名后，就可以测试并发布网站了，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。1.4.5 网站推广 注册到搜索引擎 交换广告条 宣传 网络广告 报纸、杂志 1.5典型网站分析w页面结构韩国网站的页面结构相对来说比较简单，有其统一的风格：顶部的左边是网站的logo，右边是导航栏。它很少采用下拉菜单的样式，而是把各级栏目的下级内容放在导航栏的下面。下面是个大大的flash条，再往下就是各个小栏目的主要内容，如图所示：w色彩运用圣诞主题的网站 w颜色运用对比强烈，在我们看来红色和绿色搭配就是“红配绿，死牛肉”，但是合理搭配后使得网页很生动活波，红显得更红，极符合网站的主题。w相反色系两色相配，即所谓红 配绿、蓝配黄、橙配紫，这种搭配如果处理得好，出来的效果会很抢眼 教学进程教学进程洪恩在线旅游休闲网站 w该网站采用了灰色做为底色，然后用色彩明快的橙色、绿色、粉红色的色块来划分栏目，显得整洁清晰而不呆板。女性网站w运用渐变色很出色，看颜色就知道是个女性的时尚站点，几个栏目做成晶莹剔透的泡泡球放在顶部的大flash条里，非常醒目。整个站点显得异常优雅迷人。手绘风格网站w大量插入手绘插图体现了复古风个性网站课堂练习编写HTML代码：用记事本创建一个HTML文档，网页效果如图1-68所示。作业布置1.察看并对比分析大型网站（如中国网、著名学校网、著名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、著名出版社网、cctv网站、sohu、yahoo、IBM、微软等）的内容、风格、色彩搭配、布局。2.察看的同时下载自己需要的文章、图片、软件等资源。.课后习题。