第五章 平面静态网页设计基础_第1页
第五章 平面静态网页设计基础_第2页
第五章 平面静态网页设计基础_第3页
第五章 平面静态网页设计基础_第4页
第五章 平面静态网页设计基础_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

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

文档简介

第五章平面静态网页设计基础河海大学机电工程学院楼力律制作第五章平面静态网页设计基础本章学习目标了解网站建设的基本过程了解和应用Fireworks和Dreamweaver设计制作平面静态网页熟悉一般的HTML语法第五章平面静态网页设计基础5.1网站建设的基本过程第五章平面静态网页设计基础5.1网站建设的基本过程第五章平面静态网页设计基础5.1网站建设的基本过程申请域名和主机空间网站结构规划网页设计与制作

文字素材准备

页面结构设计，主页，内容页，辅助页规划

静态制作—平面设计动画制作网页优化HTML

动态制作—程序设计和数据库连接ASPPHP…

页面整合网页上传网站维护与推广第五章平面静态网页设计基础5.1.1域名和主机空间与网络上的数字型IP地址相对应的字符型地址，就被称为域名在域名中，常用的一个术语就是域名解析，例如我想让代替17这个地址，那么我就在域名的管理后台，把这个域名解析到17，解析完毕，访问域名的时候，其实就是访问的17顶级域名又分为两类：一是国家顶级域名（nationaltop-leveldomainnames，简称nTLDs），目前200多个国家都按照ISO3166国家代码分配了顶级域名，例如中国是cn，美国是us，日本是jp等；二是国际顶级域名（internationaltop-leveldomainnames，简称iTDs），例如表示工商企业的，表示网络提供商的.net，表示非盈利组织的.org等。域名:第五章平面静态网页设计基础5.1.1域名和主机空间专线接入Internet，是指Intranet（企业内部网）与Internet（国际互联网）之间建立物理连接。通过此连接，Intranet可以永久性的挂在Internet上，得到的IP地址也是永久的。主机空间:主机托管是企业将自己的服务器放在各地通信IDC的专用托管服务器机房，利用数据中心的线路、端口、机房设备为信息平台建立自己的宣传基地和窗口。虚拟主机，可以把一台真正的主机分成许多的“虚拟”的主机，每一台虚拟主机都具有独立的域名和IP地址，具有完整的Internet服务器功能。第五章平面静态网页设计基础5.1.1域名和主机空间购买域名和主机空间第五章平面静态网页设计基础5.1.1域名和主机空间购买域名和主机空间第五章平面静态网页设计基础5.1.1域名和主机空间购买域名和主机空间第五章平面静态网页设计基础5.1.2网站的结构及内容安排需求分析

确定网站浏览者的人群目标，年龄层次，职业层次，国内人群或者国际人群等等

确定网站的内容定位结构设计

确定主页，次页，辅助页等的内容上的逻辑关系，绘制网站结构设计图确定风格

根据企业CI设计，浏览人群特点确定主页、次页的页面风格，绘制设计图，确定页面模板第五章平面静态网页设计基础5.1.3单个网页的制作流程绘制设计图，确定模板风格页面基本HTML代码编写图像以及动画的制作和优化页面动态代码（ASP,JSP,XML,VRML）编写页面整合（包括数据库在内的其他相关内容）利用本地IIS模拟测试第五章平面静态网页设计基础5.1.4网站的上传利用FTP软件，例如CuteFTP,LeapFTP等将做好的网站内容上传到你的虚拟主机空间中。第五章平面静态网页设计基础5.1.6网站的后期维护内容的更新（如产品信息的更新，企业新闻动态更新，招聘启示更新等）网站风格的更新（如网站改版）网站重要页面设计制作（如启示类重大事件页面、突发事件及公司周年庆等活动页面设计制作）网站系统维护服务（如：email帐号维护服务、域名维护续费服务、网站空间维护、与IDC进行联系、DNS设置、域名解析服务等）第五章平面静态网页设计基础5.2网页制作基础简述网页，是网站中的一「页」，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。网页有多种分类,我们笼统意义上的分类是动态和静态的页面,原则上讲静态页面多通过网站设计软件来进行重新设计和更改；动态页面通过网页脚本与语言自动处理自动更新的页面，比方说贴吧，他就是通过网站服务器运行程序，自动处理信息，按照流程更新网页。第五章平面静态网页设计基础5.2.1什么是HTML文件

HTML英语意思是：HypertextMarkedLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WorldWideWeb的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。第五章平面静态网页设计基础5.2.1什么是HTML文件通过HTML可以表现出丰富多彩的设计风格图片调用：

<IMGSRC=“文件名”>文字格式：

<FONTSIZE="+5"COLOR="00FFFF">文字</FONT>通过HTML可以实现页面之间的跳转页面跳转：

〈AHREF=“文件路径/文件名”></A>通过HTML可以展现多媒体的效果声频：

<EMBEDSRC="音乐文件名"AUTOSTART=true>视频：

<EMBEDSRC="视频文件名"AUTOSTART=true>第五章平面静态网页设计基础5.2.2HTML文件的文档结构通过HTML可以表现出丰富多彩的设计风格超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。<HTML><HEAD>

头部信息

</HEAD><BODY>

文档主体，正文部分

</BODY></HTML>第五章平面静态网页设计基础5.2.2HTML文件的文档结构其中<HTML>在最外层，表示这对标记间的内容是HTML文档。<HEAD>之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY>标记一般不省略，表示正文内容的开始。第五章平面静态网页设计基础5.2.2HTML文件的文档结构<HTML>

<HEAD>

<TITLE>一个简单的HTML示例</TITLE>

</HEAD>

<BODY>

<CENTER>

<H3>欢迎光临我的主页</H3>

<BR>

<HR>

<FONTSIZE=2>

这是我第一次做主页，无论怎么样，我都会努力做好！

</FONT>

</CENTER>

</BODY>

</HTML>第五章平面静态网页设计基础5.2.3HTML文件中的标签1.单标签

只需单独使用就能完整地表达意思，这类标记的语法是：<标签名称>最常用的单标签是<BR>,它表示换行。

2.双标签

由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：<标签>内容</标签>其中“内容”部分就是要被这对标记施加作用的部分。例如对某段文字的显示：

<EM>第一：</EM>第五章平面静态网页设计基础5.2.3HTML文件中的标签3.标签属性

许多单标记和双标记的始标记内可以包含一些属性，语法：

<标签名字属性1属性2属性3…>各属性之间无先后次序，属性也可省略（即取默认值）例如单标记<HR>表示在文档当前位置画一条水平线（horizontalline），一般是从窗口中当前行的最左端一直画到最右端。带一些属性： <HRSIZE=3ALIGN=LEFTWIDTH="75%">

第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记标题一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

〈H1>…</H1>第一级标题 〈H2>…</H2>第二级标题 〈H3>…</H3>第三级标题 〈H4>…</H4>第四级标题 〈H5>…</H5>第五级标题 〈H6>…</H6>第六级标题第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记换行在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上<br>标签。第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记水平线段<HR>这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性：

size水平线的宽度width水平线的长，用占屏幕宽度的百分比或象素值来表示align水平线的对齐方式，有LEFTRIGHTCENTER三种noshade线段无阴影属性，为实心线段第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记文字的大小设置提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。文字的字体与样式

HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。

<fontface="字体">第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记文字的字体与样式为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：<B></B>粗体<I></I>斜体<U></U>加下划线<BLINK></BLINK>闪烁效果<EM></EM>表示强调，一般为斜体<STRONG></STRONG>表示特别强调，一般为粗体第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记文字的颜色 文字颜色设置格式如下：<fontcolor=color_value>…</font>这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记位置控制通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：

<DIVALIGN=#>#＝left／right／center另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：

<PALIGN=#>

<HRALIGN=#>#＝left／right／center

<H1ALIGN=#〉第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记页面布局和文字设计的综合示范前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，

比如：

<FONTCOLOR=“#”SIZE=#>文字</FONT>

<B><U>文字</U></B>第五章平面静态网页设计基础5.2.4页面布局和文字设计的标记第五章平面静态网页设计基础5.2.5表格标记

一个表由<table>开始，</table>结束，表的内容由<tr>,<th>和<td>定义。<tr>说明表的一个行，表有多少行就有多少个<tr>；<th>说明表的列数和相应栏目的名称，有多少个栏就有多少个<th>；<td>则填充由<tr>和<th>组成的表格。是否用表格线分开为部分内容用border属性说明。横向通栏的表用<thcolspan=#>属性说明，colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。有纵向通栏的表用rowspan=#属性说明。rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。第五章平面静态网页设计基础5.2.5表格标记表的大小用width=#和height=#属性说明。前者为表宽，后者为表高，#是以象素为单位的整数。边框宽度由border=#说明，#为宽度值，单位是象素。表格间距即划分表格的线的粗细用cellspacing=#表示，#的单位是象素。第五章平面静态网页设计基础5.2.6超链接

一个超文本链接指针由两部分组成：一是被指向的目标，它可以是同一文件的另一个部分，也可以是世界另一端的一个文件，可以是文字，也可以是动画或者音乐、影片；另一部分是指向目标的链接指针。超链接类型有以下几种方式：内部链接：链接到本站点的其他文档；外部链接：链接到本站点以外的其他文档：E-mail链接：单击该链接可以打开e-mail表单。链接到特定“锚记”（即“书签”）：可以跳转到同页或其他页的特定区域；虚拟链接（null链接）脚本链接：可附加行为至对象或创建一个执行JavaScript代码的链接。第五章平面静态网页设计基础5.2.6超链接在Internet网上，每个网页都有唯一的地址（URL）。用户在创建本地链接是往往未指定完整的URL地址，只是指明了当前文档或站点的根目录的相对路径。路径类型有以下3种：绝对路径：提供了链接文档的完整URL地址（包括所使用的协议）。

例如：://sina

文档相对路径：用于本地链接时最常用的链接设置方式。

例如：content/intro.htm

在站点中尽量使用相对路径！根相对路径：从站点根文件夹到文档的路径第五章平面静态网页设计基础5.2.6超链接创建超链接的标记被称为“锚”标记，即HTML标记。

HTML代码：

<ahref=“index.htm”>主页</a><ahref=“://sina”>新浪网</a><ahref="../ch02/ch02.htm">第二章平面力系的简化</a><imgname="ch11_r2_c1"src="../../images/ch11_r2_c1.gif"><aname=“top1”>文档顶部</a><ahref=“#top1”>返回顶部</a>目标窗口可以用target属性修饰链接指针，有“_blank”“_self”“_parent”“_top”四种，例如在新窗口中打开链接：<ahref=“://sina”target=“_blank”>新浪网</a>第五章平面静态网页设计基础5.2.6其他网页设计的相关内容1、表单:教材90-91页；本课程将结合ASP编程部分讲述；2、CSS级联样式表是现代网页设计的重要工具，教材99页至104页有详细叙述。但本教材仅仅谈论了CSS的最为皮毛的内容；3、网页的框架设计模式和一些特殊效果，参阅教材第四章及相关网页设计教材。第五章平面静态网页设计基础5.3利用FW和DW完成单页面的设计和制作Dreamweaver(以下简称DW)和Fireworks(以下简称FW)是网页设计制作的一种有效的组合。可以利用DW和FW快速有效地完成平面静态网页的设计和制作，而不需要涉及HTML代码。其基本步骤如下1、通过图像处理软件绘制网页的界面样式2、在FW中通过切片输出为基础的网页HTML文件3、在DW中设置文字编码，输入相应的文字，嵌入制作好的Flash动画、GIF动画等其他元素；以上是纯静态页面，如果需要制作动态页面，则需要:4、在DW或InterDev中输入相关动态代码，如VBScript、JavaScript代码5、通过InternetInformationServer本地调试。第五章平面静态网页设计基础5.3.1通过图像处理软件绘制网页的界面样式用photoshop或fireworks或其他图像处理软件把整个网页画下来。

一般来说需要”画下来”的网页主要是网站的主页和结构页，网站中的次级页面可以通过拷贝做好的其他同类网页进行修改来实现。“画出来的网页”大小的设定根据分辨率来确定；如果浏览器的目标分辨率是800*600，则设定的图像大小宽度为778，高度不小于458；如果浏览器的目标分辨率是1024*768，则设定的图像大小宽度为1000，高度不小于580；第五章平面静态网页设计基

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

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

最新文档

评论

0/150

提交评论