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

《网站建设基础(HTML语言).ppt》由会员分享，可在线阅读，更多相关《网站建设基础(HTML语言).ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网络技术应用基础网络技术应用基础 1.1 网站设计基础1.1 网站设计基础1、网页的定义网页的定义 ：在在网网站站中中，供供用用户户阅阅读读的的一一个个个个页页面面，就就称称之之为为“网网页页”，又又称称为为WebWeb页页。如如图图1-11-1所所示示即即为为一个网页的界面。一个网页的界面。图图1-21-2图图1-12、网页的分类根根据据不不同同的的分分类类标标准准，可可以以对对网网页页进进行行如如下下的分类的分类:(1)(1)按按网网页页在在网网站站中中所所处处位位置置不不同同，网网页页可可分为分为主页主页和和内页内页。打打开开一一个个网网站站时时看看到到的的第第一一个个页页面面就就是是主

2、主页页，也也称称为为首首页页，主主页页文文件件的的名名称称一一般般为为index.htmindex.htm或或index.htmlindex.html；与与主主页页相相链链接接的其他各个页面就称之为内页。的其他各个页面就称之为内页。程序是否在服务器端运行，是重要标志！程序是否在服务器端运行，是重要标志！（2 2）按网页的表现形式，可将网页分为静态网页和动态网按网页的表现形式，可将网页分为静态网页和动态网页。页。l运运行行于于客客户户端端的的程程序序、网网页页、插插件件、组组件件，属属于于静静态态网网页页，例例如如htmlhtml页页、FlashFlash、JavaScriptJavaScrip

3、t、VBScriptVBScript等等等等，它它们们是永远不变的。是永远不变的。l一般用户制作的都是静态网页，它是一切网页制作的基础，一般用户制作的都是静态网页，它是一切网页制作的基础，如果想制作动态网页，那么仍然需要先做好静态页面，然如果想制作动态网页，那么仍然需要先做好静态页面，然后在此静态页面中加入动态技术，从而制作出十分精彩的后在此静态页面中加入动态技术，从而制作出十分精彩的动态页面。动态页面。l在在服服务务器器端端运运行行的的程程序序、网网页页、组组件件，属属于于动动态态网网页页，它它们们会会随随不不同同客客户户、不不同同时时间间，返返回回不不同同的的网网页页，例例如如ASPASP

4、、PHPPHP、JSPJSP、ASP.netASP.net、CGICGI等。等。网页的组成元素l网页元素多种多样的，包括网页元素多种多样的，包括文本文本、图像图像、动画动画和和音乐音乐等。等。l文本是网页最基本的组成元素，是网页的文本是网页最基本的组成元素，是网页的主体部分。主体部分。l图像也是网页中不可缺少的元素，是使网图像也是网页中不可缺少的元素，是使网页看起来更美观的点睛之笔。页看起来更美观的点睛之笔。3、网站的定义 在网上看到的一个个网页页面的集合就在网上看到的一个个网页页面的集合就是网站。是网站。网站可以包含多个页面，也可以网站可以包含多个页面，也可以只有一个页面，比如一些简单的个人

5、主页只有一个页面，比如一些简单的个人主页就可能只有一个简单的页面，而一些大型就可能只有一个简单的页面，而一些大型网站则可能有很多页面。网站则可能有很多页面。根据网站内容来分，可以将网站分为根据网站内容来分，可以将网站分为4 4类，即类，即门户网站、职能网站、专业网站和个人网门户网站、职能网站、专业网站和个人网站。站。l门户网站门户网站 l职能网站职能网站 l专业网站专业网站 l个人网站个人网站 1.1 网站设计基础网页制作是一门综合性技术，需要用到图像处理、动画制作、网页制作是一门综合性技术，需要用到图像处理、动画制作、页面设计、语言编程等方面知识。常用的网页制作工具可页面设计、语言编程等方面

6、知识。常用的网页制作工具可以分为五大类以分为五大类:u图形图像制作工具：Photoshop、Fireworks、Freehand、CorelDraw。u网页编辑工具：记事本、Dreamweaver、FrontPage、Visual Interdev、visual studio。u网页动画工具：Flash、Swish、Ulead Gif Animator。u网页开发语言：ASP、ASP.NET、JSP、PHP、Perl、CGI、XML、JavaScript、VBScript等。u网页上传工具：CuteFtp、LeapFtp、FlashFXP1.1 网站设计基础1HTML语言语言lHypertex

7、t Markup Language(超文本标记语言超文本标记语言)lHTML文件可以直接由浏览器解释执行，而无须编译文件可以直接由浏览器解释执行，而无须编译 客户端客户端（浏览器）（浏览器）服务器端服务器端（网页提供者）（网页提供者）Internet提供内容提供内容提出请求提出请求1.1 网站设计基础1HTML语言语言l编编写写环环境境：记记事事本本、Dreamweaver、Frontpage、Word等文本编辑器等文本编辑器lHTML文件必须以文件必须以html或或htm为扩展名为扩展名l运行环境：运行环境：IE、Firefox等等1.1 网站设计基础HTML语言的基本结构语言的基本结构 第

8、一个第一个HTML网页网页Hello,world!这里是内容区域！这里是内容区域！任何的HTML都是以开始，以结束 定义了HTML文档的页头部分 指出文档的标题，这种标题会在浏览器上的标题条内显示出来 HTML的内容都定义在它们之间 1.1 网站设计基础HTML常用标记常用标记1）背景颜色及背景图像）背景颜色及背景图像 颜色颜色:系统预定义颜色系统预定义颜色:red、green、blue等等 六位六位16制数制数:#FF0000rrggbb图像图像:gif、jpg、bmp或或png1.1 网站设计基础HTML常用标记常用标记2）字体标记）字体标记 Size(字体大小字体大小):取值取值17,由

9、小到大由小到大Face(字体类型字体类型):客户端所能获得的字体，必须是用户计算机已经安装客户端所能获得的字体，必须是用户计算机已经安装的字体，如使用特殊字体，可以把文字转化为图片进的字体，如使用特殊字体，可以把文字转化为图片进行加入行加入1.1 网站设计基础HTML常用标记常用标记3）段落标记）段落标记和换行标记和换行标记注意：注意：是单标签是单标签4）水平线标记）水平线标记 Width：宽度，可以是百分比，也可是像素：宽度，可以是百分比，也可是像素5）图像标记图像标记 src:图像文件的路径名及文件名，一般使用相对路径图像文件的路径名及文件名，一般使用相对路径1.1 网站设计基础HTML常

10、用标记常用标记6）超链接标记）超链接标记 聊城大学传媒技术学院聊城大学传媒技术学院 Href:链接的地址链接的地址一个文件：一个文件：about.html一个网址：一个网址：http:/打开邮件客户端软件并填写接收者：打开邮件客户端软件并填写接收者：mailto: target:打开目标的方式打开目标的方式_blank：使用新窗口打开链接：使用新窗口打开链接_top：上层窗口，主要在框架页中使用：上层窗口，主要在框架页中使用_self：当前窗口：当前窗口_parent：父窗口：父窗口1.1 网站设计基础HTML常用标记常用标记7）表格标记表格标记 精品课程单位负责人网络技术传媒技术学院张三bo

11、rder：边框宽度：边框宽度1.1 网站设计基础HTML常用标记常用标记8）滚动字幕标记滚动字幕标记 我会动的我会动的，哈哈哈哈!注：注：Direction:运动方向（运动方向（down、up、left、right）Scrolldelay:间隔时间，值越大越慢间隔时间，值越大越慢1.1 网站设计基础HTML常用标记常用标记9）背景音乐标记背景音乐标记 loop：循循环环次次数数，当当值值为为-1时时表表示示无无限限次次循循环环播播放放，背背景音乐一般采用景音乐一般采用*.mid格式文件。格式文件。10）多媒体文体嵌入标记）多媒体文体嵌入标记 1.1 网站设计基础2.Dreamweaver 8(

12、1)Dreamweaver 8 编辑界面编辑界面 1.1 网站设计基础2.Dreamweaver 8(2)Dreamweaver 8 使用请看演示使用请看演示 1.1 网站设计基础3 网站设计流程网站设计流程 网站整体规划网站整体规划搜集和准备素材搜集和准备素材 网站制作网站制作 网站测试与发布网站测试与发布 用户需求分析用户需求分析 网站整体规划网站整体规划 内容需求内容需求 包含什么包含什么功能需求功能需求如何实施如何实施 设计需求设计需求如何更好如何更好 技术需求技术需求具体实现具体实现 功能需求功能需求:网站的受众群体是哪些？其特点是什么？网站最受关注的是哪些功能？是否有留言本、论坛、

13、站内搜索等？是否提供用户注册？内容需求内容需求:网站内容包括哪些类型？网站信息采用哪些表现方式：文本、图片、视频、表格等？是否具有独立维护内容的能力？网站信息是否允许下载和转载？设计需求设计需求:网站采用哪种色系？网站的风格是什么样的？网站的页面深度有几级？是否有Flash动画？技术需求技术需求:网站采用何种技术 系统具有的安全度 是否对浏览器有要求等 1.1 网站设计基础3 网站设计流程网站设计流程 网站整体规划网站整体规划搜集和准备素材搜集和准备素材 网站制作网站制作 网站测试与发布网站测试与发布 用户需求分析用户需求分析 网站整体规划网站整体规划 栏目规划栏目规划 功能规划功能规划 页面

14、结构规划页面结构规划 栏目规划的原则栏目规划的原则:栏目设计结构要清晰、设计简洁。栏目顺序安排合理，分清主次，重要栏目放在靠前位置，突出重点。栏目结构不超过三级，过深的栏目容易使访问者失去耐心。首页首页个人简介个人简介课程教学课程教学学术研究学术研究生活随笔生活随笔联系方式联系方式教教学学理理论论教教学学课课件件教教学学资资源源论论文文专专著著科科研研项项目目获获奖奖情情况况图图4-33 栏目结构图栏目结构图功能规划功能规划:分为前台功能和后台功能 前台功能是为访问者服务的，如注册、评论、留言、搜索等功能 后台功能是供网站维护者使用多功能，如发布功能、论坛、资源库等 导航区导航区版权信息版权信

15、息内容区内容区功功能能区区功功能能区区图图4-34 首首页页页页面面布局布局导航区导航区版权信息版权信息内容区内容区功功能能区区图图4-35 二二级级列列表表页页面布局面布局导航区导航区版权信息版权信息内容区内容区图图4-36 三三级级内内容容页页面面布布局局1.1 网站设计基础3 网站设计流程网站设计流程 网站整体规划网站整体规划搜集和准备素材搜集和准备素材 网站制作网站制作 网站测试与发布网站测试与发布 1.1 网站设计基础3 网站设计流程网站设计流程 网站整体规划网站整体规划搜集和准备素材搜集和准备素材 网站制作网站制作 网站测试与发布网站测试与发布 1.1 网站设计基础3 网站设计流程网站设计流程 网站整体规划网站整体规划搜集和准备素材搜集和准备素材 网站制作网站制作 网站测试与发布网站测试与发布 网站测试网站测试 注册域名注册域名 申请虚拟主机申请虚拟主机 利用利用FTP上传网页（上传网页（DW）虚拟主机是通过技术手段将一台服务器虚拟分成许多份，虚拟主机是通过技术手段将一台服务器虚拟分成许多份，可以在一台服务器上同时安装多个网站可以在一台服务器上同时安装多个网站