网页设计与制作20111_第1页
网页设计与制作20111_第2页
网页设计与制作20111_第3页
网页设计与制作20111_第4页
网页设计与制作20111_第5页
已阅读5页，还剩43页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与制作

基础知识

网页设计

HTML语言

脚本语言

网页发布

Dreamweaver

作业基础知识

概述网站浏览原理网站设计原则网页设计与制作全球信息网:

WWW(WorldWideWeb，即Web)

基于Internet的信息服务系统，向用户提供一个以超文本技术为基础的多媒体的全图形浏览界面；所有

WWW的页面都是用HTML编写的文件。基础知识

概述超文本标记语言:

HTML—HyperTextMarkupLanguage

其格式为ASCII码,即纯文本文件,是WWW用于建立与识别超文本文档的标准语言，即网页文件。网页(Webpage)：在浏览器上看到的画面叫网页主页(Homepage)：进入网站后所看到的第一个页面(index.htm)，也称为首页网站(Site)：是一组相关网页的集合基础知识

概述各个网页的设计与制作网页Homepage主页HTTP协议Data浏览器基础知识

网站浏览原理用HTML编写用开发工具编写如Dreamweaver基础知识

网站设计原则--主题定位制作网站首先要考虑网站的主题，好的网站不仅应该有美感、个性、创意，更要有质量。网站的内容是最重要的基本因素，空洞的网站对人没有任何吸引力。基础知识

网站设计原则--题材选择

主题要小而精，最好是自己擅长或者喜爱的内容，题材不要太滥或者目标太高；网站名称要正气、易记、要有特色。

（体现自己的个性）网站的题材主要有：新闻、体育、聊天、即时信息、ICQ、社区、邮件列表、科学技术、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚以及一些体现个人特色和爱好等的网站。网站的名称很重要，在很大程度上决定了整个网站的定位。网站的名称要有概括性、简短、有特色、容易记，还要符合自己网站的主题和风格。例：闪客帝国、清风文苑、红果园等。

所谓CI(CorporateIdentity)

，是借用的广告术语，意思是通过视觉来统一企业的形象。主要包括

Logo设计、网站的色彩搭配、网站的标准字体、网站的整体风格和创意等。基础知识

网站设计原则--定位网站CI形象定位你的网站CI形象

--Logo标准颜色：蓝/绿色、黄/橙色、黑/灰/白等其他颜色注意：背景颜色和前文的对比一定要大，为了突出主要文字，背景绝对不能选择花纹繁杂的图案；色彩要控制在三种颜色以内。网站的色彩搭配基础知识网站的标准字体网页默认的字体：中文为“宋体”

9磅字英文为“TimesNewRoman”网站的整体风格和创意网站风格：建立在有价值的内容的基础之上必须保证内容的质量和价值明确自己网站想留给人什么样的印象创意思考的过程：准备期/孵化期/启示期/验证期/形成期基础知识具有一定的美工功底会更易于上手、有创意！网页设计与制作

网页的类型网页制作方法网页版面布局网页制作三剑客网页设计与制作基于客户端：静态网页（htm）动态页面（DHTML、JavaScript

）网页的类型基于服务器端：动态页面（ASP、PHP、JSP等）工具软件实现：

Deamweaver是网页编辑软件

Fireworks是图形/图像处理软件

Flash是矢量动画编辑软件编程基础网页设计

动态网页一般以数据库技术为基础，可将相关信息通过动态网页录入到数据库，又可通过动态网页将数据库内容显示出来；其文件后缀一般与产生的服务器技术相匹配，如ASP技术的网页后缀是“.asp”、JSP技术是“.jsp”等；采用动态网页，可以实现交互功能，如用户的注册和登录、在线留言、论坛、网上调查、网上教学平台和投票选举等。何谓动态网页？示例

直接编写HTML源代码

利用工具软件

利用任何文本编辑软件保存为纯文本文件即可（htm或html）

通过编辑窗口编辑网页(不需要html源代码)

如:FrontPage、Dreamweaver

JavaScript、Java、ASP、CGI、PHP、JSPFireworks、Flash网页制作方法网页设计网页设计网站的分类树型结构网站新闻体育……计算机

国内新闻国际新闻体育新闻

……

篮球足球网球

……

硬件软件

……一级页面三级页面二级页面…级页面

一个个页面设计与制作主页设计（首页）

页面属性页面设计（表格、框架、……

）填写内容添加链接和交互版权信息等页面设计其他页面设计

和首页保持相同的风格要有返回首页的链接目录结构不要超过四层

认识网页三剑客DreamweaverFireworksFlash

是Macromedia公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。

是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。

是Macromedia公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。

Adobe（Macromedia）网页设计HTML语言

定义

HTML文档的基本结构

HTML的基本单位

URL路径HTML：HyperTextMarkupLanguage网页设计与制作HTML语言

HTML：超文本标记语言专门用来编写网页文件常用的文本编辑软件:

EditPlus、UltraEdit(新浪网下载)

记事本等，文件类型为.htm或.html。HTML的定义<html><head><title>表格示例</title></head><booy><hrsize=1></hr><tableborder=3cellspacing=1cellpadding=5><caption>职工档案</caption><tr><throwspan=3>基本信息</th><thcolspan=3><ahref="mailto:yongl@263.net">赵华</a></th></tr><tr><throwspan=2><imgalign=TOPSRC="hlpglobe.gif"></th><td>男</td><td>33岁</td></tr><tr><td>干部</td><td>党员</td></tr><tr><th>毕业学校</th><tdcolspan=3><center><ahref="://">清华大学</center></a></td></tr></table></booy></html>水平线宽度为1示例1浏览结果<HTML><HEAD>文件头

<TITLE>文件标题</TITLE></HEAD><BODY>文件体</BODY></HTML>HTML文件是以各种功能的元素所组成用于描述这些功能元素的符号称为标记标记基本上是成对出现(英文或英文缩写)特点HTML文档的基本结构<HTML><HEAD>文件头

<TITLE>文件标题</TITLE></HEAD>

<BODY>文件体</BODY></HTML>HTML语言<标记名>对象</标记名><标记名属性=属性值……>对象

</标记名><标记名>标记的一般格式(语法)HTML语言的指令(元素)窗口中显示的内容功能：描述文件格式，格式由浏览器解释和执行。用标记书写超文本标记语言：HTMLHTML语言定义文本属性标记语法格式:<fontsize="10"color="#00FF00"><b>计算机</b></font>示例定义段落属性标记语法格式:<palign="left"/"center"/"right"class="type"></p>标记名注意：不同的元素标记所对应的属性不同属性值标记属性HTML语言HTML的基本单位长度单位:

定义水平线、表格边框、图像等的长、宽、高及对象在页面上的位置等属性。分类:

绝对长度/相对长度示例:

在页面上建立水平线标记<HR><hrwidth="400">绝对长度

<hrwidth="50%">相对长度水平线的宽度为400像素水平线占据窗口的50%的宽度水平线标记名HTML语言颜色单位:定义字体、页面/表格背景及超连接的颜色格式1:16进制颜色代码#RRGGBB格式2:10进制RGB码RGB(RRR,GGG,BBB)格式3:

直接颜色名称示例:COLOR="red"颜色单位:

定义字体、页面/表格背景及超连接的颜色格式1:

16进制颜色代码

#RRGGBBRR代表红色(00~FF)GG代表绿色(00~FF)BB代表兰色(00~FF)RRR代表红色(0~255)GGG代表绿色(0~255)BBB代表兰色(0~255)HTML的基本单位HTML语言<html><head><title>超链接示例</title></head><bodybackground="a1.jpg"text=#0000fflink=#00ff00alink=#ff00ffvlink="red"><BGSOUNDsrc="天路.mp3"loop="-1"/><h1>背景图案为"a1.jpg"</h1><h2>普通文字色彩为蓝色</h2><hr><hr><h3>设置超链接文字为"#00ff00"</h3><br><br><ahref="a1.htm"><h4>启动超链接文字为粉红色"#ff00ff"</h4></a><h5>已链接文字为红色"red"</h5></body></html>示例2方法1：<bgsoundsrc=“声音文件”loop=“播放次数”autostart=“是否自动播放”……>示例：见ex-1.htm<bgsoundsrc=”天路.mp3”loop=trueautostart=true>计算机</bgsound>示例1：插入多媒体标记infinitetrue/false-1<MARQUEEalign=“left/center/right/top/middle/buttom”behavior=“slide/alternate/scroll”height=”y或y%”width=”x或x%”direction=”left/right”bgcolor=”颜色值”

hspace=”m”vspace=”n”scrollamount=”数值”scrolldelay=”数值”

loop=”i/-1/infinite”ONMOUSEOUT=this.start();ONMOUSEOVER=this.stop();>滚动字幕</marquee>示例2：插入滚动标记align：字幕的对齐方式（left/center/right/top/middle/buttom）behavior：设定浏览器处理字幕的方法height：设定字幕的高度

width：设定字幕的宽度direction：设定字幕滚动的方向（left/right/）bgcolor：设定字幕的背景颜色

hspace：设定字幕左右的空白空间

vspace：设定字幕上下的空白空间scrollamount：设定每个连续滚动字幕后面的间隔scrolldelay：设定两次滚动之间的间隔时间

loop：设定字幕的滚动次数

ONMOUSEOUT=this.start()：鼠标移出该区域时继续滚动；

ONMOUSEOVER=this.stop()：鼠标移入该区域时停止滚动。scroll表示文本单项滚动

slide表示文本到达边界停止

alternate表示滚动文本到达边界后反向滚动为“infinite”或“-1”时，字幕会无限制地滚动。示例：见ex-3.htm<marqueewidth="400"height="300"bgcolor="#1B78D6"direction="up"behavior="scroll"loop="-1"ONMOUSEOUT=this.start();ONMOUSEOVER=this.stop();scrolldelay=“500”>北京交通大学计算机学院</marquee>元素格式功能<Palign=lift>┅</P>设置段落<Ahref="a.htm">超文本文字</A>设置超链接<fontsize=4>┅</font>设置字体<hrsize=10width="50%">┅</hr>水平线<brclear=left/rigt/all>┅</br>换行<!┅┅>注释 插入空格<TABLE>插入表<TR><TH><TD>有几个TR就有几行表示行、表头、表数据<IMGsrc="图形文件地址"></IMG>插入图形文件元素格式功能<Hn>┅</Hn>第n级标题<bodyonload="resetDiv()">┅</body>设置文本区段属性<bodybackground="a.gif">┅</body>设置背景图文件<bodybgcolor=#rrggbb>┅</body>设置背景颜色<bodytext=#rrggbb>┅</body>设置普通文字颜色<bodylink=#rrggbb>┅</body>设置超链接颜色<bodyalink=#rrggbb>┅</body>启动超链接颜色<bodyvlink=#rrggbb>┅</body>已链接颜色<BGSOUND/embedsrc=""loop=true>插入多媒体文件<MARQUEE>设置滚动文字URL路径含义:一种互联网地址的表示法在数据中可以包含以何种协议链接、要链接到哪一个地址、链接地址的端口号以及服务器里文件的完整路径和文件名等信息。URL路径分类:绝对路径和相对路径作用:对链接的地址和文件进行定位HTML语言URL路径绝对路径:包含服务器上磁盘驱动器名称和完整的路径语法格式:<scheme>:<scheme_dependent_information>示例:<ahref="file://d:/website/index.htm"><ahref=":///advce/index.htm">相对路径:相对于当前的HTML文档所在目录的路径语法格式:相对关系/部分路径/文件名示例:../images/logo.gif相对文档的相对路径

/html/link/index.htm相对根目录的相对路径HTML语言脚本语言

脚本语言客户端脚本服务器端脚本脚本标记网页设计与制作通过脚本语言实现动态网页一种嵌入在网页中的解释型语言脚本语言客户端脚本服务器端脚本

控制网页元素的外观和行为

(创作动态的、交互式的网页)

在客户端计算机上被浏览器执行

调用服务器端部件及操作服务器端数据库,实现向客户端用户发送动态信息的功能在服务器端被Web服务器执行脚本语言<SCRIPTLANGUAGE=参数>JavaScriptJscriptVBSVBScript脚本语言:

JavaScript即:Java语法和函数脚本语言:VBScript即:

VisualBasic

语法和函数脚本标记格式脚本语言

是一种

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

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

最新文档

评论

0/150

提交评论