教你建立自己的网站27857.pptx

《教你建立自己的网站27857.pptx》由会员分享，可在线阅读，更多相关《教你建立自己的网站27857.pptx（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第10章章 建立自己的网站建立自己的网站10.1 网站建设概述网站建设概述 一、一、网站的概念网站的概念 1网页网页就是在浏览器上看到的一页，网页也称为Web页，如下图所示。3/27/20231计算机网络应用基础 2网站 将大量网页放置在服务器中供Internet上的人浏览，就构成了一个网站。网站是通过超链接将网页有机地组织在一起，使网页之间形成一种逻辑关系，便于浏览。主页（首页）主页（首页）主页通常是进入网站首先浏览到的网页，具有引导用户浏览整个网站内容的作用。3/27/20232计算机网络应用基础163网站的主页 3/27/20233计算机网络应用基础 3个人网站 个人网站是指个人创建的

2、网站，也叫个人主页。网站是通过超链接将网页有机地组织在一起，使网页之间形成一种逻辑关系，便于浏览。主页（首页）主页（首页）主页通常是进入网站首先浏览到的网页，具有引导用户浏览整个网站内容的作用。3/27/20234计算机网络应用基础 二、网站的规划与发展策略二、网站的规划与发展策略 1网站的规划 规划内容包括：网站的目的 网站的内容 网站的风格 3/27/20235计算机网络应用基础 （1）网站的目的 展示网页制作的水平，尝试建立网站的感觉。展现多姿多彩的生活，以爱好结识网络朋友。发挥网站技术特长，体验网络经营风险，实现自我经营理念。3/27/20236计算机网络应用基础 （2）网站的内容 在

3、确定个人网站的主题和题材时，应该遵循以下原则：主题小而精 题材为己所长 题材档次适宜 3/27/20237计算机网络应用基础 （3）网站的风格 网站的风格网站的风格:指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的标志、色彩、布局、浏览方式、交互性、文字、语气、内容价值和站点信誉等诸多因素。要想使自己的网站有风格而且“与众不凡”，应该按下面的3个步骤进行：第1步 确信风格是建立在有价值内容之上。第2步 明确网站要给浏览者的综合印象。第3步 在明确网站的综合印象后，开始努力建立和加强这种印象并付诸实施。3/27/20238计算机网络应用基础 2网站发展策略 网站发展的3个阶段：第一

4、阶段是建站阶段 第二阶段是生存阶段 第三阶段是跨越阶段 针对3个阶段的发展策略：第一阶段 技术策略 第二阶段 差异化策略 第三阶段 是聚焦策略 3/27/20239计算机网络应用基础 三、网站的组建方法与步骤三、网站的组建方法与步骤 1网站的组建方法 （1）空间租赁 申请和租赁ISP（Internet Server Provider互联网服务提供商）空间。（2）主机托管 将自己的服务器交给ISP维护、管理。（3）申请专线 向ISP申请一条专门的数据线路（专线），自己架设服务器，自己管理。3/27/202310计算机网络应用基础 2网站的组建步骤 （1）构建网站框架 （2）设计网页版面 （3）创

5、建模板 （4）制作主页 （5）制作普通网页 （6）添加更多功能 3/27/202311计算机网络应用基础 四、四、网站的发布网站的发布 1申请空间 申请空间就是向提供Internet服务器的网站申请一个个人主页空间。申请个人主页空间的步骤如下：（1）注册新用户 （2）申请空间 3/27/202312计算机网络应用基础 2上传网站 上传网站就是将自己制作的网站上传到所申请的空间里。上传网站的方法：采用FTP软件 借助网页制作工具软件的上传功能 使用空间所在网站提供的FTP上传服务 3/27/202313计算机网络应用基础 3宣传网站 （1）直接做广告 （2）友情链接 （3）在搜索网站登记站点 （

6、4）利用新闻组或BBS发信息 （5）发电子邮件 3/27/202314计算机网络应用基础10.2 网页制作网页制作 内容：内容：FrontPage简介 HTML基础知识 简单网页制作 3/27/202315计算机网络应用基础 一、一、FrontPageFrontPage简介简介 1FrontPage的界面 主窗口工作区视图栏3/27/202316计算机网络应用基础 2FrontPage的网页视图 FrontPage的网页视图包含“普通”、“HTML”和“预览”3个选项卡。3在FrontPage中输入HTML语言编写的脚本代码 输入步骤是：第1步 单击“文件”菜单，选择“新建”中的“网页”命令。

7、第2步 在“新建”对话框的“常规”选项卡中，选择“普通网页”图标，并单击“确定”按钮。第3步 在网页视图中，选择“HTML”选项卡按钮，切换到“HTML”选项卡。3/27/202317计算机网络应用基础 第4步 输入HTML脚本代码。第5步 切换到“预览”选项卡查看网页设计效果。第6步 单击“文件”菜单，选择“保存文件”命令。第7步 在“另存为”对话框中输入网页的文件名，单击“保存”按钮。网页文件的扩展名是htm3/27/202318计算机网络应用基础 二、二、HTMLHTML基础知识基础知识 HTML（Hypertext Markup Language）的含义是超文本标记语言，是网页制作的基

8、础，也是最基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式进行存储。1HTML脚本的基本结构 先观看 p304305对应 图10-7的HTML脚本 HTML是以标记来标示及排列对象的。标记本身则以“”符号标识。3/27/202319计算机网络应用基础 今日消息 计算机网络应用基础经修订，再次出版！欢迎同学们使用！3/27/202320计算机网络应用基础图10-7 HTML脚本在IE浏览器中的显示效果 3/27/202321计算机网络应用基础 HTML脚本的基本结构：(1)HTML脚本都是以标记开头，标记结尾。(2)在和标记之间是HTML的脚本内容，一般情况下它分为两部分：头部和主

9、体。头部头部 是由和标记的，其中包含了该HTML脚本的标题和说明信息（如编码方式、关键字、编辑软件、作者信息等）。主体主体 是由作为起始标记，作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。3/27/202322计算机网络应用基础 HTML脚本的基本结构：网页标题 网页内容 3/27/202323计算机网络应用基础 2HTML脚本中的标记 （1）标记有4种语法格式：内容 内容 不同的标记采用不同的语法格式，其中的参数要加引号。3/27/202324计算机网络应用基础 （2）常用的标记 格式：内容其间的内容就是一个HTML的脚本 格式：内容 HTML脚本的头部标记，

10、其间的内容通常嵌套和标记。3/27/202325计算机网络应用基础 格式：内容 HTML脚本主体内容的标识标记，所有的内容都嵌套在这对标记中。3/27/202326计算机网络应用基础 可以包含很多属性，这些属性对其间有关的对象起作用。它的属性见下表：属性描述background=图像文件定位 设置页面背景图像文件 text=颜色 设置页面文本文字颜色，默认为黑色 link=颜色 设置页面尚未被访问过的超链接文字颜色，默认为蓝色 vlink=颜色 设置页面已被访问过的超链接文字的颜色，默认为蓝色 alink=颜色 设置页面超链接文字在访问瞬间的颜色，默认为蓝色 3/27/202327计算机网络应

11、用基础 颜色:可以用数字代码表示 形式为:#RRGGBB 如 text=#ff0000 也可以用英文单词表示 如 text=red 3/27/202328计算机网络应用基础将图10-7的HTML脚本中的 换为 图10-8 给网页页面加背景图像3/27/202329计算机网络应用基础 格式：内容 其间的内容是文字，是网页的标题。标题将显示在浏览器窗口的标题栏内。如：上面脚本中的“今日消息”是用来描述HTML脚本本身信息的标记，在网页中不出现。3/27/202330计算机网络应用基础 格式1：单独的表示段落结束，是段落标记。格式2：内容 表示其间的文字是同一个段落，浏览器会根据窗口的宽度自动将一个

12、段落分行。它可以包含align属性，用于指定段落的对齐方式，默认为左对齐。比如“”，表示段落居中显示。3/27/202331计算机网络应用基础 只能单独使用，表示在页面上加个回车，即用于文本的分段。与分段不同的是：用所分的各个段实际上仍属于一个段落，且的段间距与行间距相同。3/27/202332计算机网络应用基础 格式：内容 是文字标记，用于指明所包含文字的显示属性，如大小和颜色等。例：计算机网络应用基础已经正式出版了！指明显示文字的方式是大小为5，颜色为红色。3/27/202333计算机网络应用基础 的属性见下表：属 性描 述color=字体颜色设置文字颜色size=字号设置字号，取值范围1

13、7，1最小，7最大face=字体设置文字字体。文字是汉字，可以用汉字字体名，如：宋体、隶书等；文字是英文，则可以用英文字体名，如：Times New Roman等3/27/202334计算机网络应用基础 格式：是在页面上划水平线的标记。属性width用于指定水平线的长度，它的值可以是百分比，表示水平线的长度相对于窗口宽度的比例；也可以是数字，表示像素数。属性color用来设置线条的颜色，默认为灰色。例：在页面上绘制一条长为窗口宽度85%的水平线。3/27/202335计算机网络应用基础图10-9 页面添加水平线示例 3/27/202336计算机网络应用基础 格式：图像标记，在网页中插入一幅图像

14、。它只是指明一幅图像在网络上的位置（URL地址），而不是把这幅图像的所有数据信息包含进来。通常采用JPG和GIF格式的图像。3/27/202337计算机网络应用基础 的属性：属性描述src=图像文件定位设置插入图像的来源位置，路径可以是相对的，也可以是绝对的，这是不可缺少的属性 alt=图像说明 对这个图像的说明align=文本对齐方式默认情况下，文本放在图像的下面（bottom），也可以用middle、top参数设置文本位置 border=边宽厚度 设置图像边宽厚度，参数为数字，即像素数 width=图像宽度 设置图像宽度，参数可以是数字，即像素数，也可以是相对于窗口宽度的百分比 heigh

15、t=图像高度 设置图像高度，参数可以是数字，即像素数，也可以是相对于窗口高度的百分比 3/27/202338计算机网络应用基础例：表示在页面中插入_image001.jpg图像文件，它的 说明是“水果与蔬菜”，图像的宽是575，高是260。3/27/202339计算机网络应用基础 超链接标记，是HTML页面的核心标记，通过它将图像或文字加上超链接。URL（Uniform Resource Locator）即统一资源定位器，是文件名的扩展，用来指定被链接对象的位置和名称。使用格式有3种，见下表：格 式说 明目标文本链接文本页内链接链 接文本目标文本其他页面的页内链接链接内容链接到一个文件，可以是

16、HTML文件，也可以是图像文件或其他3/27/202340计算机网络应用基础例：在图10-9页面的脚本中添加3条代码：图片显示 将“图片显示”四个字超链接到页面page10-3.htm上。友情链接：效果见下图：3/27/202341计算机网络应用基础图10-11 带超链接的页面示例 3/27/202342计算机网络应用基础 格式：内容 移动字幕标记，其间的内容将在页面上移动显示。的属性见下表：3/27/202343计算机网络应用基础 标记的属性 属 性描 述bgcolor=背景颜色设置字幕的背景颜色width=字幕宽度设置字幕的宽度，可以是数字（像素数），也可以是相对于窗口宽度的百分比heig

17、ht=字幕高度设置字幕的高度，只可以是数字（像素数）direction=移动方向参数值为left或right，表示字幕从右向左或从左向右移动，默认是leftloop=循环次数设置字幕移动的循环次数，若为非正的数字则无限循环，默认是无限循环behavior=移动方式参数值为scroll或alternate，表示单向滚动或来回移动，默认是scroll3/27/202344计算机网络应用基础例：例：在图10-11页面的脚本中添加移动字幕的脚本代码 我们竭诚为大家服务！移动字幕的高度是20个像素数，宽度是窗口宽度的90%，背景是桔黄色；移动字幕的文字是“我们竭诚为大家服务！”，字体是华文彩云，颜色是青

18、蓝，字号是5。效果见下图：3/27/202345计算机网络应用基础图10-12 添加有移动字幕的页面示例 3/27/202346计算机网络应用基础 、和 格式：内容 内容内容 这3个是对其间的文字进行修饰的标记。第一个是对文字加粗，第二个是将文字变斜体，第三个是给文字加下划线。3/27/202347计算机网络应用基础 三、三、简单网页制作简单网页制作 用HTML语言制作一张简单的网页。页面标题 两个栏目区 移动字幕 1网页的内容 （1）页面标题 页面的标题是“我网上的家”，居中显示在页面的正上方。在其下方配有一条下划线。显示在标题栏的网页标题也是“我网上的家”。3/27/202348计算机网络

19、应用基础 （2）两个栏目区 第一个栏目是“诗词欣赏”，位于页面标题的下方、页面的中央，放有一首唐代诗人贺知章的诗，诗名“回乡偶书”，在此栏目的上下各加了一条水平线。第二个栏目是功能服务栏目，有两个功能：新闻浏览、查看邮箱。新闻浏览中有两个超链接，分别与搜狐网站、163网站相链接；查看邮箱是超链接到了126电子邮箱网站的主页邮箱登录页面。（3）移动字幕 移动字幕有两条：第一条移动字幕的文字是“常回家来看看！”，第二条移动字幕的文字是“_二五年六月_”。3/27/202349计算机网络应用基础 2网页的脚本代码 见教材p311-312 提示：提示：为了使网页在上传或复制到其他计算机后都不因为文件路

20、径而出问题，网页中访问其他文件都采用相对路径，而且还将整个网站的文件都存放在一个文件夹及其子文件夹中。一些标记的width、height等属性的参数值既可以取相对值（相对于浏览器窗口的百分比），又可以取实际值（像素数），但一般情况选用相对值，这样可以保持合理的比例。3/27/202350计算机网络应用基础图10-13 一张用HTML语言制作的简单网页 3/27/202351计算机网络应用基础10.3 网站的管理与维护网站的管理与维护 一、一、网站的信息服务管理网站的信息服务管理 包括：1留言簿的管理 2电子邮件的处理 3投票调查栏目的管理 4BBS的管理 5信息资源的管理 3/27/20235

21、2计算机网络应用基础 二、二、网站的数据维护网站的数据维护 网站的数据维护实际上就是更新网页文件。1、更新网页的方法（1）上传文件更新（2）上传模板更新（3）使用库更新 2、网页更新要做到（1）定期更新新闻性栏目（2）时常检查相关链接（3）用户调查 3/27/202353计算机网络应用基础 三、三、网站的安全网站的安全 1网站安全因素（1）网站系统软件自身的安全问题（2）网站系统中数据的安全问题（3）传输线路的安全与质量问题（4）网站安全管理问题（5）其他威胁网站安全的因素 3/27/202354计算机网络应用基础2网站安全维护 主要措施有：（1）制定并实施一系列的安全管理制度。（2）实行严密的身份认证。（3）实施访问控制（存取控制）。（4）采用信息传输加密算法和电子签名。（5）进行完整的审计，定期进行风险分析。（6）加强网站安全管理配置，改进网站运行环境。（7）消除及屏蔽干扰电磁辐射，防止信息泄露。3/27/202355计算机网络应用基础演讲完毕，谢谢观看！