《网页设计与制作(一)》由会员分享，可在线阅读，更多相关《网页设计与制作(一)（47页珍藏版）》请在金锄头文库上搜索。
1、第1章网站规划在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必 要的规划、开发、测试和发布使用。一般流程如下：1 .建设网站前进行必要的市场分析。2 .明确建设网站的目的及功能定位。3 .制定网站技术解决方案。4 .根据网站的目的确定网站内容、网站结构和网站功能。5 .进行网页设计，并根据技术方案实施网站建设。6 .做出经费预算。7 .网站测试。8 .网站发布及推广。9 .网站维护。第2章网站基础知识网站（Website）,是指在因特网上根据一定的规定，使用 HTM邙工具制作 的用于展示特定内容的相关网页的集合。网站的组成域名（DomainName ,是由一审用点分隔的组成的
2、Internet 上某一台 或计算机组的名称。空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS程序，即建设与修改网站所使用的编程语言， 换成源码就是一堆按一定格式书写的文字和符号。网页网页（Web page ,是网站中的任意一个页面，通常是HTM咯式，文件扩展名为 html、或 htm、或 asp、或 aspx、或 php、或jsp 等。基本构成元素：文字、图像、超级链接。阅读方式：浏览器。类型：以不同的后缀代表不同类型的网页文件。通常分为静态页面、动态页面。动态网页(active web page )：指网页内容可根据用户的不同请求从而返 回其对应的数据，一般情况下动态网页通过数据
3、库进行架构，一般文件名均以开服务器发语言做后缀，如php、asp等。也可以说凡是结合了 HTMLH外的高级程序设 计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。静态网页：指全部由HTMIB记页面，页面的内容和显示效果基本不发生变 化，所有的内容包含在网页文件中。一般文件名均以htm、html、shtml等为后缀。服务器术语WWWWorld Wide Web),亦称作 “ Web、WWW “W3，中文名字为“万维网”，环球网”等，常简称为Web分为Webg户端和Web服务器程序。 WWW以让Webg户端(常用浏览器)访问浏览 WebK务器上的页面。在这个系 统中，每个有用的事物，称
4、为一样“资源”；并且由一个全局“统一资源标识符” (URL标识；这些资源通过超文本传输协议( Hypertext Transfer Protocol ) 传送给用户，而后者通过点击链接来获得资源。URL (Uniform Resource Locator ),统一资源定位符，是对可以从互联网 上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。 互联网上的每个文件都有一个唯一的 URL它包含的信息指出文件的位置以及浏 览器应该怎么处理它。动态网页的URL不固定的；而静态网页的 URL固定的。HTTP (Hypertext transfer protocol) ,超文本传输协
5、议，是一种详细规 定了浏览器和万维网服务器之间互相通信的规则， 通过因特网传送万维网文档的 数据传送协议。第3章网站配色216网页安全色216网页安全色：指在不同硬件环境、不同操作系统、不同浏览器中都能够 正常显示的颜色集合（调色板），这些颜色在任何显示设备上的显示效果都是相 同的。0,51,102,153,204 和 255。网页安全色是当红色（R）、绿色（G）、 蓝色（B）颜色数字信号值为（DAC Count）:网页文字及配色文字是网页的主体。文字的优势主要体现在信息量大、所用存储空间非常小, 利于网页的快速打开，信息的直观呈现。要求：字体不超过三种（标题、正文、导航），文本字号形成对比一
6、一突出 （网页标题）、层次（栏目标题）、分明（正文，字体偏小，适于文字信息量大 的内容）规定：字号影响文字的清晰度，分辨率 1024*768,正文：12号、宋体字； 分辨率高于1024,正文：13-14号、宋体字；文章标题字号偏大，一般要使用平 滑（消除锯齿）的字体。文字与背景色彩搭配：1）文字能见度：高明度色彩背景+低明度文字2）错误色彩搭配:黄+白；绿+灰、绿+红；紫+红、紫+黑；青+黑3）前进色：红、黄、橙、白背景色柔和、淡雅一一深色文字深色背景一一浅色文字不深不浅一一根据色彩选择适合的颜色（色相、明度、饱和度）文字色彩可以与网站主题相呼应，协调主色调、副主色调等。文字色彩 有划分层次的
7、作用，网页上相同色彩的文字都属于同一层次。文字与图片的配色遵循三个原则：1 .文字周围的背景尽量单纯化。2 .图片与文字对比尽量明显，易于识别。（通常浅色图片配深色文字，深 色图片配浅色和高亮度的文字）3 .文字与背景图片对比较弱不易识别时，可用其他色彩衬托文字的方式强 化文字与图片间的对比。网页中的图像图像给人的视觉效果要比文字强烈得多。灵活应用图像，在网页中可以起到 点缀的效果。但是应用不当，会使网页变得凌乱不堪。 We顷上的图像文件大部 分都是使用JPG和GIF格式。因为他们除了具有压缩比例高外，还具有跨平台特 性。图像在网页中的应用主要有以下几种形式。1 .图像标题一般在网页中都要有标
8、题，用以提示浏览者这个网站是做什么的， 起到了导 航的作用，应用图像标题可以使网页更加美观，2 .背景图像的另一个重要应用是作为网页的背景。 网页背景千变万化，特别是一些 个人网站，应用图片背景比较多。3 .网页主图网页上除了用小图像美化网页外，通常还会在网页上用一些较大的图片来突 出网页主题，占满网页的整个空间。特别是主页中用主图的比较多， 或者直接用 图片取代文字作为超级链接按钮，可以使网页更加美观。网页图像分类网页图像分为静态图像和动态图像。动态图像：1. gif动画：适于短小动画，画面数少，图像简单。【89a】2. flash 动画（.swf ）:3. flv视频（.flv ）:体积小
9、，压缩率高，适于传播但画面不够清晰。静态图像：1. JPG优秀的图画品质，较为合理的文件大小，不支持透明格式。2. GIF: 256色，压缩后损失图像色彩但不影响图像失真；支持透明格式。87a3. PNG支持透明背景，支持 48位色彩的图像模式；平滑的透明边缘； 品质好，体积小。网页上图片注意事项1 .良好的视觉吸引力，”阅读最省力原则”2 .图片要清晰，不能模糊、变形，太大的图片要进行分割。3 .图片的主体含义要简单明了，图片上的文字要清晰容易识别。4 .采用的图片颜色要符合网页整体色彩。关于色彩由光谱可以得出6个基础色相，增加过渡色可形成12色相环和24色相环。同类色：指在同一色相中不同的
10、颜色变化。邻近色：在色环上任一颜色同其毗邻之色。补色：在色环上彼此相距180的两个色相互为补色色彩对比网页色彩搭配主要从色彩冷暖、面积、色相、明度、纯度1 .色相对比色相对比：两种以上色彩组合时，由于色相差别而形成的色彩对比效果。对比强弱关系可以从色相环上的距离（角度）入手，距离越小对比越弱;反之亦然。有彩色间的对比，按弱一强关系分为:同类色相对比（无色相差、 色相距离在45 ,基于明 度和纯度的对比）一一单 调邻近色相对比（色相距离在90左右）一一较为丰富、耐看对比色相对比（色相距离在130左右）一 一鲜明、强烈（配 色时需要考虑主色 与次色间的关系、色彩面积，降低视觉疲劳）互补色对比（色相
11、距离在180左右）一一色彩对比很强（易产生不安定感，配色时需考虑色彩面积、色彩的分散度）2 .明度对比明度对比：指色彩明暗度的对 比，也称作黑白度对比，即黑、白、 灰效果。3 .纯度对比纯度对比分为高、中、低纯度纯度对比表现出色彩艳丽效果，也是决定色调感觉的关键。特点：增强用色的鲜艳感，即通常说的明确感。表现：艳丽、生动、活泼无彩色对比，如黑与白、深灰与浅灰。表现：大方、稳重、高雅、朴素4 .冷暖对比暖色系：颜色接近红、橙、黄。冷色系：颜色偏向蓝、青。中色系：绿色和紫色5 .面积对比同一视觉范围内色彩的面积不同会产生不同的对比效果。网页色彩的搭配网页的色调：网页中的色彩，总存在某种内容联系组成
12、一个统一的整体，从而形成画面色彩的趋势。主色调一一页面色彩的主要色调。显示站点整体内容和风格；其他配色面积一般不大于该视觉面积。辅色调一一烘托主色调，支持主色调，协助主色调营造整体视觉氛围（面积 次之）。突出颜色一一强调色，用于突出主题效果，一般多用于按钮、标签之类。背景色一一协调、衬托整体第4章软件介绍软件界面常见问题1 .窗口不显示插入工具栏。方法Ctrl+F2 ;或者菜单命令窗口-插入,勾选。2 .找不到属性窗口。方法Ctrl+F3 ;或者菜单命令窗口-属性,勾选。3 .文件面板显示根节点不是命名的站点名称。方法文件面板-管理站点；或者菜单命令站点-管理站点4 .窗口显示的信息不完整，感
13、觉窗口小了。方法检查计算机的屏幕分辨率，分辨率不低于 1024*768。第5章 站点建立制作网站之前除了准备网站资料、 规划网站结构、设计网站布局以外，最好 创建一个本地站点，易于管理和上传。特别是制作动态网站，本地站点的创建必 不可少。站点的建立应注意以下情况：1 .站点的路径结构中不能含有中文，即文件夹、文件的命名都不含有中文， 且命名有规律易查找。2 .习惯上在站点根文件夹下建立用于存放图片的子文件夹， 如果网站中用 到其他较多媒体类文件也可以建立相应的文件夹存放， 但目录层次不易 过深。3 .创建网站的素材不能放在站点根文件夹中，站点文件夹中存入的图片、 音频、视频或者动画只能是真正在
14、网页中应用到的元素，一般在制作页 面的过程中都会提示保存到站点文件夹下。创建站点的视频演示创建站点的命令菜单命令：站点-新建站点 文件面板：管理站点-新建创建站点的关键步骤说明1 .新建站点对话框中，基本选项卡相当于一个建立站点的向导，引导设计者 一步步地完成基本的站点设置，高级选项卡用于站点属性的详细设置。2 .初学者可先在基本选项卡中完成站点的基本设置， 再进入高级选项卡做 进一步设置，如“默认图像文件夹”，应注意：1）设置了默认图像文件夹后，制作页面时每次插入图像都会自动将应用到的图片自动存放到该文件夹 中；2）不能将所有下载或处理过的图像素材都拷贝到该文件夹中，造成不 必要的存储负担。
15、3 .新建站点的名称可以包含中文、符号或字母，但站点路径不能包含中文和符号。创建站点的关联操作站点编辑：进行站点定义的补充设置或者重新设置。站点删除：删除无关站点或者冗余站点。站点导出：导出站点信息，并以.ste为扩展名的存储一个站点定义文件， 该文件一般存储在站点根文件夹内。站点导入：将站点根文件夹内的站点定义文件导入（扩展名.ste ）,导入中注意站点根文件夹和站点图像文件夹的指向，便于快速、正确的重构站点。第6章常用布局方法简介版面布局基础1 .网页默认习惯网站标志放在页面上部竖排导航时，导航放在页面左侧；横排导航时，放在网站标志或顶部广 告之下版权信息放在页面底部2 .第一屏：是指打开一个网站页面不拖动滚动条的情况下能看到的页面部分。分辨率800*6001024*768A屏760*4201002*600页面宽度：=1002页
