网站建设基础(HTML语言).ppt

1、网络技术应用基础,1.1 网站设计基础,1.1 网站设计基础,1、网页的定义 ： 在网站中，供用户阅读的一个个页面，就称之为“网页”，又称为Web页。如图1-1所示即为一个网页的界面。,图1-2,图1-1,2、网页的分类,根据不同的分类标准，可以对网页进行如下的分类: (1)按网页在网站中所处位置不同，网页可分为主页和内页。 打开一个网站时看到的第一个页面就是主页，也称为首页，主页文件的名称一般为index.htm或index.html；与主页相链接的其他各个页面就称之为内页。,程序是否在服务器端运行，是重要标志！,（2） 按网页的表现形式，可将网页分为静态网页和动态网页。 运行于客户端的程序

2、、网页、插件、组件，属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的。 一般用户制作的都是静态网页，它是一切网页制作的基础，如果想制作动态网页，那么仍然需要先做好静态页面，然后在此静态页面中加入动态技术，从而制作出十分精彩的动态页面。 在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。,网页的组成元素,网页元素多种多样的，包括文本、图像、动画和音乐等。 文本是网页最基本的组成元素，是网页的主体部分。 图像也是网页中不可缺少的元素，是使网页看起来更

3、美观的点睛之笔。,3、网站的定义,在网上看到的一个个网页页面的集合就是网站。网站可以包含多个页面，也可以只有一个页面，比如一些简单的个人主页就可能只有一个简单的页面，而一些大型网站则可能有很多页面。,根据网站内容来分，可以将网站分为4类，即门户网站、职能网站、专业网站和个人网站。 门户网站 职能网站 专业网站 个人网站,1.1 网站设计基础,网页制作是一门综合性技术，需要用到图像处理、动画制作、页面设计、语言编程等方面知识。常用的网页制作工具可以分为五大类: 图形图像制作工具：Photoshop、Fireworks、Freehand、CorelDraw。 网页编辑工具：记事本、Dreamwea

4、ver、FrontPage、Visual Interdev、visual studio。 网页动画工具：Flash、Swish、Ulead Gif Animator。 网页开发语言：ASP、ASP.NET、JSP、PHP、 Perl 、 CGI、 XML、JavaScript、VBScript等。 网页上传工具：CuteFtp、LeapFtp、FlashFXP,1.1 网站设计基础,1HTML语言 Hypertext Markup Language (超文本标记语言) HTML文件可以直接由浏览器解释执行，而无须编译,1.1 网站设计基础,1HTML语言 编写环境：记事本、Dreamweave

5、r、Frontpage、Word等文本编辑器 HTML文件必须以html或htm为扩展名 运行环境：IE、Firefox等,1.1 网站设计基础,HTML语言的基本结构, 第一个HTML网页 Hello, world! 这里是内容区域！ ,任何的HTML都是以开始，以结束,定义了HTML文档的页头部分,指出文档的标题，这种标题会在浏览器上的标题条内显示出来,HTML的内容都定义在它们之间,1.1 网站设计基础,HTML常用标记 1）背景颜色及背景图像 颜色 : 系统预定义颜色:red、green、blue等 六位16制数:#FF0000rrggbb 图像: gif、jpg、bmp或png,1.

6、1 网站设计基础,HTML常用标记 2）字体标记 Size(字体大小 ): 取值17 ,由小到大 Face(字体类型 ): 客户端所能获得的字体，必须是用户计算机已经安装的字体，如使用特殊字体，可以把文字转化为图片进行加入,1.1 网站设计基础,HTML常用标记 3）段落标记和换行标记 注意： 是单标签 4）水平线标记 Width：宽度，可以是百分比，也可是像素 5）图像标记 src:图像文件的路径名及文件名，一般使用相对路径,1.1 网站设计基础,HTML常用标记 6）超链接标记 聊城大学传媒技术学院 Href:链接的地址 一个文件：about.html 一个网址： 打开邮件客户端软件并填写

7、接收者：mailto: target:打开目标的方式 _blank：使用新窗口打开链接 _top：上层窗口，主要在框架页中使用 _self：当前窗口 _parent ：父窗口,1.1 网站设计基础,HTML常用标记 7）表格标记, 精品课程单位负责人 网络技术传媒技术学院张三 ,border ：边框宽度,1.1 网站设计基础,HTML常用标记 8）滚动字幕标记 我会动的，哈哈! 注： Direction:运动方向（down、up、left、right） Scrolldelay:间隔时间，值越大越慢,1.1 网站设计基础,HTML常用标记 9）背景音乐标记 loop ：循环次数，当值为-1时表示

8、无限次循环播放，背景音乐一般采用*.mid格式文件。 10）多媒体文体嵌入标记 ,1.1 网站设计基础,2. Dreamweaver 8 (1) Dreamweaver 8 编辑界面,1.1 网站设计基础,2. Dreamweaver 8 (2) Dreamweaver 8 使用请看演示,1.1 网站设计基础,3 网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,用户需求分析,网站整体规划,功能需求: 网站的受众群体是哪些？其特点是什么？ 网站最受关注的是哪些功能？ 是否有留言本、论坛、站内搜索等？ 是否提供用户注册？,内容需求: 网站内容包括哪些类型？ 网站信息采用哪些表

9、现方式：文本、图片、视频、表格等？ 是否具有独立维护内容的能力？ 网站信息是否允许下载和转载？,设计需求: 网站采用哪种色系？ 网站的风格是什么样的？ 网站的页面深度有几级？ 是否有Flash动画？,技术需求 : 网站采用何种技术 系统具有的安全度 是否对浏览器有要求等,1.1 网站设计基础,3 网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,用户需求分析,网站整体规划,栏目规划的原则 : 栏目设计结构要清晰、设计简洁。 栏目顺序安排合理，分清主次，重要栏目放在靠前位置，突出重点。 栏目结构不超过三级，过深的栏目容易使访问者失去耐心。,功能规划 : 分为前台功能和后台功能 前台功能是为访问者服务的，如注册、评论、留言、搜索等功能 后台功能是供网站维护者使用多功能，如发布功能、论坛、资源库等,1.1 网站设计基础,3 网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,1.1 网站设计基础,3 网站设计流程,网站