网站静态页面设计_第1页
网站静态页面设计_第2页
网站静态页面设计_第3页
网站静态页面设计_第4页
网站静态页面设计_第5页
已阅读5页，还剩45页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网站静态页面设计1第一页，共五十页，编辑于2023年，星期三本章要点：主页设计栏目与版面设计页面可视化设计静态网页制作技术2第二页，共五十页，编辑于2023年，星期三确定主页的功能模块设计主页的版面处理技术上的细节

6.1主页设计3第三页，共五十页，编辑于2023年，星期三1、确定主页的功能模块网站名称、广告条、主菜单新闻、搜索、友情链接联系及版权信息等4第四页，共五十页，编辑于2023年，星期三5第五页，共五十页，编辑于2023年，星期三2、主页版面设计勾画草图—软件实现3、处理技术上的细节风格、链接、图形、动画、文字、速度6第六页，共五十页，编辑于2023年，星期三栏目设计版面设计6.2栏目与版面设计

7第七页，共五十页，编辑于2023年，星期三紧扣网站的主题设立一个最近更新或网站指南栏目设定一个可以双向交流的栏目设一个下载或常见问题回答栏目

栏目与版面设计

网站栏目安排要注意以下几方面：栏目设计8第八页，共五十页，编辑于2023年，星期三版面设计

栏目与版面设计

版面设计的原则版面布局的步骤版面布局的形式

版面也称为版块：指的是浏览器看到的完整的一个页面（可以包含框架和层）

9第九页，共五十页，编辑于2023年，星期三主次分明，中心突出大小搭配，相互呼应图文并茂，相得益彰版面设计的原则设计版面布局要做到：正常平衡异常平衡对比凝视空白尽量用图片解说版面设计

布局原则：10第十页，共五十页，编辑于2023年，星期三正常平衡异常平衡对比凝视空白图片说明11第十一页，共五十页，编辑于2023年，星期三轮廓设计布局设计细节设计版面布局的步骤版面设计

12第十二页，共五十页，编辑于2023年，星期三“T”结构布局

“口”型布局

“三”型布局

对称对比布局

POP布局“国”字型

拐角型

标题正文型

左右框架型

上下框架型综合框架型封面型

Flash型

版面布局的形式版面设计

13第十三页，共五十页，编辑于2023年，星期三色彩的基本知识网页色彩设计6.3色彩设计14第十四页，共五十页，编辑于2023年，星期三颜色的概念色彩的搭配色彩的心理感觉色彩的对比色彩的区域大小和形状色彩的位置色彩的基本知识15第十五页，共五十页，编辑于2023年，星期三颜色是由光的折射产生的。红，黄，蓝被称为三原色，其它的色彩都可以用这三种色彩调和而成

颜色分非彩色和彩色两类

颜色的概念色彩的基本知识16第十六页，共五十页，编辑于2023年，星期三网页色彩搭配的基本原理：色彩的鲜明性色彩的独特性彩的合适性色彩的联想性色彩的搭配色彩的基本知识17第十七页，共五十页，编辑于2023年，星期三网页配色的基本方法网页色彩设计网页色彩搭配的技巧网页色彩设计18第十八页，共五十页，编辑于2023年，星期三底色和图形色整体色调配色的平衡配色时要有重点色配色的节奏渐变色的调和在配色方面的统调在配色方面的分割网页配色的基本方法网页色彩设计19第十九页，共五十页，编辑于2023年，星期三网页内容网页标题导航菜单侧栏页脚网页色彩设计网页色彩设计20第二十页，共五十页，编辑于2023年，星期三暖色调即红色、橙色、黄色、赭色等色彩的搭配冷色调即青色、绿色、紫色等色彩的搭配对比色调即把色性完全相反的色彩搭配在同一个空间里网页色彩搭配的技巧网页色彩设计21第二十一页，共五十页，编辑于2023年，星期三考虑人们的阅读习惯与效果不要用花纹繁复的图案作背景，以便突出主要文字内容定位于国际性质的网站，应该针对不同地区访问者，设计不同的字体

6.4字体设计

22第二十二页，共五十页，编辑于2023年，星期三网站导航要清晰，容易查找注意超链接颜色与单纯叙述性文字的颜色区别一般网页的长度不超过三个屏幕高度为佳以文档中关键的字眼作为超链接的锚点网页上传后，逐一测试每一页的每一个超链接是否有效，以杜绝失败的链接6.5导航设计

23第二十三页，共五十页，编辑于2023年，星期三6.6图像设计网页中图像的格式：网页中图形设计技巧

网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，其中使用最广泛主要是GIF和JPEG两种格式24第二十四页，共五十页，编辑于2023年，星期三GIF格式GIF格式使用8位颜色，并在保留锐化细节（如艺术线条、徽标或带文字的插图）的同时，有效地压缩实色区域。还可以使用GIF格式创建动画图像。大多数浏览器都支持GIF格式。GIF格式使用LZW压缩，它是无损耗的压缩方法。但是，因为GIF文件只有256种颜色，故将原24位图像优化为8位GIF会导致颜色信息丢失。另外，Photoshop和ImageReady允许对GIF文件应用损耗压缩。使用“损耗”选项可通过牺牲一定的图像品质来生成显著减小的文件。25第二十五页，共五十页，编辑于2023年，星期三JPEG格式JPEG格式支持24位颜色，并保留照片和其它连续色调图像中存在的亮度和色相的显著和细微变化。大多数浏览器都支持JPEG。JPEG通过有选择地减少数据来压缩文件大小。因为它会弃用数据，故JPEG压缩称为损耗压缩。较高品质设置导致弃用的数据较少，但是JPEG压缩方法会降低图像中细节的清晰度，尤其是包含文字或矢量图形的图像。JPEG格式不支持透明度。26第二十六页，共五十页，编辑于2023年，星期三6.7动画设计动画就是在一定时间内显示的一系列图像或帧。每一帧较前一帧有轻微的变化，当连续、快速地显示这些帧时就创造出运动的效果。GIF动画Flash动画27第二十七页，共五十页，编辑于2023年，星期三附：网站设计基础语言HTMLHTML简介HTML的语法格式文件标签版式标签框架标签字体标签表格与清单标签表单标签超链接标签多媒体标签本节要点：28第二十八页，共五十页，编辑于2023年，星期三一、HTML简介（1）HTML语法标记（标签）：以”<”、”>”括起来的内容，大多成对出现（称为首标记与尾标记），也有单一的标记。书写约定：不区分大小写，忽略标记间多余的空格与回车分类：描述页面元素样式的标记：<body>、<p>、<h1>指向其他资源的标记：<img>、<a>例：这是<b>粗体</b>字标记的作用：描述页面元素的显示方式及其他资源访问方式属性及其值：进行一步提供详细描述信息，所有属性均放在首标记中，多个属性间以空格分开如：<imgsrc=logo.gifwidth=520height=81>属性值属性名29第二十九页，共五十页，编辑于2023年，星期三一、HTML简介（2）HTML页面文档的结构一个简单的HTML页面<html>

<head>

<title>HTML文件结构</title>

</head>

<body>

在这里显示文件的主体内容。

</body></html>30第三十页，共五十页，编辑于2023年，星期三一、HTML简介（3）HTML标记的结构形态<标记>页面元素内容</标记>如：<p>这是一个文本段落</p><标记属性名=“属性值”>页面元素内容</标记>如：<fontcolor=“red”>红色字</font><标记>如：以内容下换行显示<br>第二行内容31第三十一页，共五十页，编辑于2023年，星期三二、创建HTML文档（1）准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材，复制保存在新建文件夹中画出网页草图，安排页面元素用工具软件创建HTML文档利用DreamweaverMX创建HTML文档新建文档查看代码保存文档：文件扩展名*.htm或*.html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意：保存文件时，保存类型应选择“所有文件”，并输入文件全名查看保存的HTML文档效果打开IE浏览器，执行“文件—打开”菜单命令32第三十二页，共五十页，编辑于2023年，星期三二、创建HTML文档（2）在浏览页面时修改HTML源文件执行“查看—源文件”菜单，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。三、文件标记（1）<html></html>标记：不是HTML文档必须，但最好保持文档的完整性<head></head>标记：此标记中内容是提供给浏览器的，即文件头信息。33第三十三页，共五十页，编辑于2023年，星期三三、文件标记（2）<body>标记可包括属性，由此决定页面内容的总体显示风格、背景等。Text属性：用于设定文字颜色Bgcolor属性：设定页面背景颜色link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”，不设定时取默认值（蓝、红、紫）。Background属性：用于设定背景图片Scroll属性：设定浏览器滚动条是否显示，取值”yes”或“no”，一般用于弹出式窗口34第三十四页，共五十页，编辑于2023年，星期三三、文件标记（2）<title></title>标记：置于<head>区段，用于设定浏览器的标题<meta>标记：用于描述HTML文档相关信息。如编辑器类型，字符集等，通常用来为搜索引擎定义页面关键字常见属性：

Name和content属性：指定“网页描述”类型及相应值

http-equiv和content属性：指定HTTP响应头标及相应值举例：35第三十五页，共五十页，编辑于2023年，星期三四、排版标记功能：实现页面的版式编排，应用广泛，兼容性强。主要有以下标记：<!---->：注释标记<p></p>：段落标记<br>：换行标记<hr>：水平线标记<pre></pre>：预设格式标记<div></div>区段标记36第三十六页，共五十页，编辑于2023年，星期三<!---->：注释标记注释格式：<!–注释内容--><p></p>段落标记<br>标记<hr>标记Size属性：设置水平线高度，以像素为单位width属性：设置水平线宽度，以像素为单位，也可以视窗的百分比为宽度。Align属性：设置水平线水平对齐方式，可取值：left、right、centerColor属性：指定水平线颜色Noshade属性：无需设置属性值，设置水平线无阴影。Title属性：用于设置水平线在鼠标指向时的提示说明<pre></pre>标记<div></div>区段标记Align属性：取值left、right、center37第三十七页，共五十页，编辑于2023年，星期三五、框架标记功能：实现页面的框架分割，一般多用于在页面需保留一部分信息的情况下。<frameset><frameset>框架集标记：定义框架内部的基本结构Rows属性：设置横向分割窗口的比例（框架页的高度），可以是像素值，也可为%，*代表剩余高度如<framesetrows=“30%,*”></frameset>Cols属性：用于设置纵向分割窗口的比例Border属性：设置框边界宽度，以像素为单位Bordercolor属性：设置框边界颜色。38第三十八页，共五十页，编辑于2023年，星期三<frame>框架内容标记Src属性：指定当前框架中显示的页面文件Name属性：设置框架名称<noframes></noframes>标记用于设置不支持frame时页面显示的信息如在含有框架的HTML页面中加入<noframes>

对不起，你的浏览器不支持frame!</noframes>39第三十九页，共五十页，编辑于2023年，星期三六、字体标记功能：用于设定字体的大小、粗线、颜色等<b></b>：粗体<strong></strong>：加强语气（一般通过加粗来实现，视不同浏览器面有所不同）<h1></h1>（小）……<h6></h6>（大）标题标记<u></u>下划线标记<strike></strike>删除线标记<sub></sub>下标标记与<sup></sup>上标标记40第四十页，共五十页，编辑于2023年，星期三<font></font>字体标记Face属性：用于指定字体，多个字体用逗号分隔，默认字体中文为“宋体”，英文“TimesNewRoman”Color属性：设置文字颜色，属性值可以为颜色英文代码，也可为RGB颜色代码（#rrggbb）rr、gg、bb分别表示红、绿、蓝三原色代码，取值00—FF如：<fontcolor=“red”>红字</font><fontcolor=“#FF0000”>红字</font>Size属性：设置字号，取值1（大）—7（小），默认为3，41第四十一页，共五十页，编辑于2023年，星期三七、项目清单与表格标记一个项目清单实例<ul></ul>、<ol></ol>与<li></li>标记<ul></ul>（unorderedlist）无序清单标记<ol></ol>（orderedlist）有序清单标记例：无序列表 有序列表<ul> <ol><li>无序项目1</li> <li>有序项目1</li><li>无序项目2</li> <li>有序项目2</li></ul> </ol>42第四十二页，共五十页，编辑于2023年，星期三表格完整代码示例<table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>第一行第一列第一行第二列第二行第一列第二行第二列构成表格的一行构成表格的一列43第四十三页，共五十页，编辑于2023年，星期三<table></table>、<tr></tr>、<td></td>标记<table></table>标记：表格开始与结束标记border属性：表格边线宽度，以像素为单位，为0时不显示表格线Cellpadding属性：设置单元格内容与边线之间空间，默认值为1Cellspacing属性：表格内单元格之间的距离。默认值为2Width属性：表格宽度，可以为像素值和%两种形式Height属性：表格高度，可以为像素值和%两种形式Align属性：水平对齐方式，取值left、right、centerValign属性：垂直对齐方式，取值top、center、bottomBgcolor属性：表格背景色Bordercolor属性：表格边界线颜色Bordercolorlight与bordercolordark属性：三维表格亮色与暗色颜色Background属性：表格背景图片<tr></tr>表格行开始与结束标记<td></td>单元格开始与结束标记说明：表格标记属性较多。设置较复杂，一般先通过软件生成，于细节处利用代码修改44第四十四页，共五十页，编辑于2023年，星期三八、表单标记功能：用于提供与用户交互，收集用户信息，通常需配合CGI、ASP等服务器端Web程序来实现。一个表单实例<form></form>表单标记Action属性：指定表单处理程序，其值为一个服务器端Web程序URL。Method属性：指定数据传递的方法，取值为get或postName属性：指定表单名称，区分不同表单，及便于其他程序调用。45第四十五页，共五十页，编辑于2023年，星期三表单元素标记详释<input>输入标记name属性：表单元素名称type属性：反映不同类型输入项目，可取TEXT：文本框PASSWORD：口令框。CHECKBOX：复选框RADIO：单选按钮SUBMIT：提交按钮RESET：复位按钮IMAGE：图像按钮HIDDEN：隐藏表单组件Value属性：表单元素初始值46第四十六页，共五十页，编辑于2023年，星期三<select></select>下拉列表标记<option></option>选项标记，置于<select>区段内Selected属性：默认选项，无属性值Value属性：设置选项被选中后提交的内容，默认为<option></option>之间显示的内容<textarea></textarea>多行文本框标记Rows属性：设定textarea输入框行数Cols属性：textarea输入框列数47第四十七页，共五十页，编辑于2023年，星期三九、超链接标记功能：提供浏览者在不同Web页面进行跳转<a></a>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论