网页制作1.ppt

《网页制作1.ppt》由会员分享，可在线阅读，更多相关《网页制作1.ppt（46页珍藏版）》请在三一办公上搜索。

1、,网页设计与制作,基础知识 网页设计 HTML语言 脚本语言 网页发布 Dreamweaver,作业,基础知识,概 述 网站浏览原理 网站设计原则,网页设计与制作,全球信息网:WWW(World Wide Web，即Web)基于Internet的信息服务系统，向用户提供一个以超 文本技术为基础的多媒体的全图形浏览界面；所有 WWW的页面都是用HTML编写的文件。,基础知识,概 述,超文本标记语言:HTML Hyper Text Markup Language 其格式为ASCII码,即纯文本文件,是WWW用于建立 与识别超文本文档的标准语言，即网页文件。,网页(Webpage)：在浏览器上看到的

2、画面叫网页主页(Homepage)：进入网站后所看到的第一个页面(index.htm)，也称为首页网站(Site)：是一组相关网页的集合,基础知识,概 述,网页,Homepage主页,HTTP协议,Data,浏览器,基础知识,网站浏览原理,用HTML编写,用开发工具编写如Dreamweaver,基础知识,网站设计原则-主题定位,制作网站首先要考虑网站的主题，好的网站不仅应该有美感、个性、创意，更要有质量。网站的内容是最重要的基本因素，空洞的网站对人没有任何吸引力。,基础知识,网站设计原则-题材选择,主题要小而精，最好是自己擅长或者喜爱 的内容，题材不要太滥或者目标太高；网站名称要正气、易记、要

3、有特色。（体现自己的个性）,网站的题材主要有：新闻、体育、聊天、即时信息、ICQ、社区、邮件列表、科学技术、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚以及一些体现个人特色和爱好等的网站。,网站的名称很重要，在很大程度上决定了整个网站的定位。网站的名称要有概括性、简短、有特色、容易记，还要符合自己网站的主题和风格。例：闪客帝国、清风文苑、红果园等。,所谓CI(Corporate Identity)，是借用的广告 术语，意思是通过视觉来统一企业的形象。主要包括 Logo设计、网站的色彩搭配、网站的标准字体、网站的整体风格和创意等。,基础知识,网站设计原则-定位网站CI形象,定位你的网站C

4、I形象-Logo,标准颜色：蓝/绿色、黄/橙色、黑/灰/白等其他颜色注意：背景颜色和前文的对比一定要大，为了突 出主要文字，背景绝对不能选择花纹繁杂 的图案；色彩要控制在三种颜色以内。,网站的色彩搭配,基础知识,网站的标准字体,网页默认的字体：中文为“宋体”9磅字 英文为“Times New Roman”,网站的整体风格和创意,网站风格：建立在有价值的内容的基础之上 必须保证内容的质量和价值 明确自己网站想留给人什么样的印象,基础知识,具有一定的美工功底会更易于上手、有创意！,网页设计,网页的类型 网页制作方法 网页版面布局 网页制作三剑客,网页设计与制作,基于客户端：静态网页（htm）动态页

5、面（DHTML、JavaScript）,网页的类型,基于服务器端：动态页面（ASP、PHP、JSP等）,工具软件实现：Deamweaver是网页编辑软件 Fireworks是图形/图像处理软件 Flash是矢量动画编辑软件,编程基础,网页设计,直接编写HTML源代码 利用工具软件,利用任何文本编辑软件 保存为纯文本文件即可（htm 或 html）,通过编辑窗口编辑网页(不需要html 源代码)如:FrontPage、Dreamweaver JavaScript、Java、ASP、CGI、PHP、JSP Fireworks、Flash,网页制作方法,网页设计,网页设计,网站的分类树型结构,网 站

6、,一级页面,三级页面,二级页面,级页面,一个个页面设计与制作,主页设计（首页）,页面属性 页面设计（表格、框架、）填写内容 添加链接和交互 版权信息等,页面设计,滚 动 文 字,主页示例,北京交通大学计算机学院010-51681111,新闻发布,其他页面设计,和首页保持相同的风格 要有返回首页的链接 目录结构不要超过四层,认识网页三剑客,Dreamweaver Fireworks Flash,是Macromedia公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。,是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。,

7、是Macromedia公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。,Adobe（Macromedia）,网页设计,HTML语言,定义 HTML文档的基本结构 HTML的基本单位 URL路径,HTML：HyperText Markup Language,网页设计与制作,HTML语言,HTML：超文本标记语言 专门用来编写网页文件 常用的文本编辑软件:EditPlus、UltraEdit(新浪网下载)记事本等，文件类型为.htm或.html。,HTML的定义,表格示例 职工档案 基本信息 赵华 男33岁 干部党员 毕业学校 清华大学,水平线

8、宽度为1,示例1,运行结果,文件头 文件标题 文件体,HTML文件是以各种功能的元素所组成 用于描述这些功能元素的符号称为标记 标记基本上是成对出现(英文或英文缩写),特点,HTML文档的基本结构,文件头 文件标题 文件体,HTML语言,对象 对象,标记的一般格式(语法),HTML 语言的指令(元素),窗口中显示的内容,功能：描述文件格式，格式由浏览器解释和执行。,用标记书写,超文本标记语言：HTML,HTML语言,定义文本属性标记语法格式:计算机,示 例,标记名,注意：不同的元素标记所对应的属性不同,属性值,标记属性,HTML语言,HTML的基本单位,长度单位:定义水平线、表格边框、图像等的

9、长、宽、高及对象在页面上的位置等属性。分类:绝对长度/相对长度示例:在页面上建立水平线标记 绝对长度 相对长度,水平线的宽度为400像素,水平线占据窗口的50%的宽度,水平线标记名,HTML语言,颜色单位:定义字体、页面/表格背景及超连接的颜色格式1:16进制颜色代码#RRGGBB格式2:10进制RGB码 RGB(RRR,GGG,BBB)格式3:直接颜色名称 示例:COLOR=red,颜色单位:定义字体、页面/表格背景及超连接的颜色格式1:16进制颜色代码#RRGGBB,RR代表红色(00FF)GG代表绿色(00FF)BB代表兰色(00FF),RRR代表红色(0255)GGG代表绿色(0255

10、)BBB代表兰色(0255),HTML的基本单位,HTML语言,超链接示例背景图案为a1.jpg 普通文字色彩为蓝色设置超链接文字为#00ff00启动超链接文字为粉红色#ff00ff已链接文字为红色red,示例2,滚动字幕,示例：插入滚动标记,align：字幕的对齐方式（left/center/right/top/middle/buttom）behavior：设定浏览器处理字幕的方法height：设定字幕的高度width：设定字幕的宽度direction：设定字幕滚动的方向（left/right/）bgcolor：设定字幕的背景颜色hspace：设定字幕左右的空白空间vspace：设定字幕上下

11、的空白空间scrollamount：设定每个连续滚动字幕后面的间隔scrolldelay：设定两次滚动之间的间隔时间loop：设定字幕的滚动次数ONMOUSEOUT=this.start()：鼠标移出该区域时继续滚动；ONMOUSEOVER=this.stop()：鼠标移入该区域时停止滚动。,scroll表示文本单项滚动 slide表示文本到达边界停止 alternate表示滚动文本到达边界后反向滚动,为“infinite”或“-1”时，字幕会无限制地滚动。,URL 路径,含义:一种互联网地址的表示法 在数据中可以包含以何种协议链接、要链接到 哪一个地址、链接地址的端口号以及服务器里 文件的完

12、整路径和文件名等信息。URL 路径分类:绝对路径和相对路径作用:对链接的地址和文件进行定位,HTML语言,URL 路径,绝对路径:包含服务器上磁盘驱动器名称和完整的路径语法格式:示例:,相对路径:相对于当前的HTML文档所在目录的路径语法格式:相对关系/部分路径/文件名 示例:./images/logo.gif 相对文档的相对路径/html/link/index.htm 相对根目录的相对路径,HTML语言,脚本语言,脚本语言 客户端脚本 服务器端脚本 脚本标记,网页设计与制作,通过脚本语言实现动态网页,一种嵌入在网页中的解释型语言,脚本语言,客户端脚本,服务器端脚本,控制网页元素的外观和行为(

13、创作动态的、交互式的网页)在客户端计算机上被浏览器执行,调用服务器端部件及操作服务 器端数据库,实现向客户端用 户发送动态信息的功能 在服务器端被Web服务器执行,脚本语言,JavaScriptJscriptVBSVBScript,脚本语言:JavaScript即:Java语法和函数,脚本语言:VBScript即:Visual Basic 语法和函数,脚本标记格式,脚本语言,是一种基于对象和事件驱动、并具有安全性能的、基于客户端浏览器的脚本语言；是Java与HTML折衷的选择。,认识JavaScript,脚本语言,JavaScript的特点,脚本语言,简单性：JavaScript采用小程序段的

14、方式实现编程，而且是一种解释性语言，不需要编译就能解释执行。,动态性：JavaScript可以直接对用户的输入作出响应，无需经过Web服务器。它对用户的响应，是以事件驱动的方式进行的。,跨平台性：JavaScript依赖于浏览器本身，与服务器和客户端的操作环境无关。但不同的浏览器对它的执行在个别方面存在差别，在使用时需要注意。,JavaScript 代码格式 放于 标识或 标识之中,JavaScript的引入,注意：JavaScript 代码有大、小写之分，在写 JavaScript脚本时要严格区分；否则，得不到 所需结果。,脚本语言,JavaScript应用示例 var first=window.prompt(请输入姓名:,);document.write(欢迎进入JavaScript世界，+first+。);大家好！,示例3,申请主页空间 发布网页 设置服务器 上传文件 浏览网站,网页发布,网页设计与制作,学习安装网页制作三剑客软件熟悉Dreamweaver 8基本操作,快乐学习,