《Web前端开发技术课件.ppt》由会员分享，可在线阅读，更多相关《Web前端开发技术课件.ppt（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、实训实训13 网站建设、发布与维护网站建设、发布与维护1.1 网站的建设网站的建设1.2 网站的发布网站的发布1.3 网站的维护网站的维护 网站建设流程网站建设流程为：策划网站为：策划网站准准备素材备素材规划网站布局规划网站布局设计网站设计网站目录目录规划网站导航规划网站导航搭配网站色搭配网站色彩彩 创建网站创建网站 发布网站发布网站维护维护。1.1 网站建设网站建设图图1 网站的建设流程网站的建设流程网站建网站建设设网站发网站发布布网站维网站维护护网站策划网站策划 1)网站的主题网站的主题(即题材和标题即题材和标题)2）网站的对象）网站的对象 3）网站的内容）网站的内容策划网站逻辑图策划网站
2、逻辑图策划网站逻辑图策划网站逻辑图网站题材选择的一般原则网站题材选择的一般原则 一般来说，个人主页的选材定位一般来说，个人主页的选材定位要小，内容要精。要小，内容要精。对于个人网站，题材最好是自己对于个人网站，题材最好是自己擅长或者喜欢的内容。擅长或者喜欢的内容。不要太滥或者目标太高。不要太滥或者目标太高。网站标题设置的一般原则网站标题设置的一般原则 名称要正，即要合法、合情及合理名称要正，即要合法、合情及合理名称要易记，最好使用中文名称要易记，最好使用中文名称要有特色，最好能体现一定的内名称要有特色，最好能体现一定的内涵，同时给浏览者更多的视觉冲击和涵，同时给浏览者更多的视觉冲击和空间想象力
3、。如空间想象力。如“e书时空书时空”网站资料网站资料(素材素材)收集收集素材的类型：文字、图片、动画及素材的类型：文字、图片、动画及声音、影像等多媒体文件。声音、影像等多媒体文件。素材的获取途径：素材的获取途径：1）自己编制）自己编制 2）报刊杂志和光盘等传统媒体。）报刊杂志和光盘等传统媒体。3）网络。）网络。网上资料使用的注意事项：网上资料使用的注意事项：1）版权问题）版权问题 2）健全性）健全性 内容的完整性与正确性内容的完整性与正确性 链接的正确性与完整性链接的正确性与完整性 3）合法性）合法性网页的布局规划网页的布局规划网页网页布局是设计在网页上放些什么布局是设计在网页上放些什么内容，
4、以及这些内容放在网页的什内容，以及这些内容放在网页的什么位置么位置。即即网页结构的设计，其实就是合理网页结构的设计，其实就是合理地设计页面中的栏目和板块，以及地设计页面中的栏目和板块，以及将其合理地分布在页面中。将其合理地分布在页面中。主页的基本构成内容主页的基本构成内容1）页面标题）页面标题2）网站标志）网站标志3）页眉）页眉4）导航栏）导航栏5）主内容区）主内容区6）页脚）页脚对网页内容的一个概括性描述，作用是引导对网页内容的一个概括性描述，作用是引导对网页内容的一个概括性描述，作用是引导对网页内容的一个概括性描述，作用是引导访问者清楚地知道所要浏览网站的内容，不访问者清楚地知道所要浏览网
5、站的内容，不访问者清楚地知道所要浏览网站的内容，不访问者清楚地知道所要浏览网站的内容，不至于迷失方向。至于迷失方向。至于迷失方向。至于迷失方向。如同一个商品的商标，应集中体现网站的特如同一个商品的商标，应集中体现网站的特如同一个商品的商标，应集中体现网站的特如同一个商品的商标，应集中体现网站的特色、内容及其内在的文化内涵和理念。色、内容及其内在的文化内涵和理念。色、内容及其内在的文化内涵和理念。色、内容及其内在的文化内涵和理念。指页面上端的部分，该位置吸引注意力较高，故指页面上端的部分，该位置吸引注意力较高，故指页面上端的部分，该位置吸引注意力较高，故指页面上端的部分，该位置吸引注意力较高，故
6、大多网站在此处放置网站的宗旨、宣传口号、广大多网站在此处放置网站的宗旨、宣传口号、广大多网站在此处放置网站的宗旨、宣传口号、广大多网站在此处放置网站的宗旨、宣传口号、广告语或设置为广告席位来出租告语或设置为广告席位来出租告语或设置为广告席位来出租告语或设置为广告席位来出租。导航条的位置常见的有：在页面的左侧、右侧、导航条的位置常见的有：在页面的左侧、右侧、导航条的位置常见的有：在页面的左侧、右侧、导航条的位置常见的有：在页面的左侧、右侧、顶部和底部顶部和底部顶部和底部顶部和底部。是页面设计的主体元素。在首页中，它一般是二是页面设计的主体元素。在首页中，它一般是二是页面设计的主体元素。在首页中，
7、它一般是二是页面设计的主体元素。在首页中，它一般是二级链接内容的标题、或内容提要、或内容的部分级链接内容的标题、或内容提要、或内容的部分级链接内容的标题、或内容提要、或内容的部分级链接内容的标题、或内容提要、或内容的部分摘录。布局通常是按网站内容的分类进行分栏或摘录。布局通常是按网站内容的分类进行分栏或摘录。布局通常是按网站内容的分类进行分栏或摘录。布局通常是按网站内容的分类进行分栏或划分板块划分板块划分板块划分板块。指页面底端部分，通常用来标注站点所属的单位指页面底端部分，通常用来标注站点所属的单位指页面底端部分，通常用来标注站点所属的单位指页面底端部分，通常用来标注站点所属的单位的地址、的
8、地址、的地址、的地址、e-maile-mail链接以及版权所有或导航条链接以及版权所有或导航条链接以及版权所有或导航条链接以及版权所有或导航条2 21 13 34 45 56 6 网站目录设计网站目录设计网站目录设计的作用网站目录设计的作用：便于站点的上传和：便于站点的上传和维护，以及内容的扩充和移植。维护，以及内容的扩充和移植。规划规范规划规范 目录建立的原则：以最少的层次提供最目录建立的原则：以最少的层次提供最清晰简便的访问结构。清晰简便的访问结构。目录结构：目录结构：根目录根目录根文件：通常包括主页文件以及其他必须的根文件：通常包括主页文件以及其他必须的系统文件。系统文件。每个主要功能（
9、导航栏目）建立相应目录。每个主要功能（导航栏目）建立相应目录。根目录下的根目录下的images目录存放公用图片，目录存放公用图片，每个目录下私有图片存放于各自独立每个目录下私有图片存放于各自独立images目录下。目录下。根据需要分别在根目录下设置根据需要分别在根目录下设置media目目录存放录存放flash、avi等多媒体文件。等多媒体文件。所有的脚本文件存放在根目录下的所有的脚本文件存放在根目录下的script目录；所有目录；所有CSS文件存放在根目文件存放在根目录下的录下的css目录。目录。目录的层次不要太深，目录的层次不要太深，目录的层次不要太深，目录的层次不要太深，一般不要一般不要一
10、般不要一般不要 超过去超过去超过去超过去3 3层，便于维护层，便于维护层，便于维护层，便于维护和管理。和管理。和管理。和管理。不要使用中文目录不要使用中文目录不要使用中文目录不要使用中文目录 尽量使用意义明确的目尽量使用意义明确的目尽量使用意义明确的目尽量使用意义明确的目录名称录名称录名称录名称 链接设计链接设计链接设计是指设计页面之间相互链链接设计是指设计页面之间相互链接的拓扑结构。接的拓扑结构。链接结构类型：链接结构类型：1）线性结构：指子页面由父页面所扩展）线性结构：指子页面由父页面所扩展而来的；打开页面是由父页面一级一级而来的；打开页面是由父页面一级一级向下展开，而退出页面则由子页面一
11、级向下展开，而退出页面则由子页面一级一级往回收缩。一级往回收缩。（续上）（续上）2）非线性结构：）非线性结构：树状链接结构：指一级页面链接指向多个二树状链接结构：指一级页面链接指向多个二级页面。级页面。星状链接结构：指每个页面相互之间都建立星状链接结构：指每个页面相互之间都建立有链接。有链接。树状、星状混合链接结构：在实际的网站设树状、星状混合链接结构：在实际的网站设计中，通常是使用这种混合结构。此方案是计中，通常是使用这种混合结构。此方案是首页面和一级页面之间用星状链接结构，一首页面和一级页面之间用星状链接结构，一级页面和以下各级页面之间用树状链接结构。级页面和以下各级页面之间用树状链接结构
12、。网站导航的规划网站导航的规划网站导航的设计，其实就是对网站网站导航的设计，其实就是对网站链接结构的设计。链接结构的设计。导航分类：导航分类：1）导航栏）导航栏(续上续上)2）下拉菜单导航：包括隐藏类和不可隐）下拉菜单导航：包括隐藏类和不可隐藏类（如折叠式）。藏类（如折叠式）。可隐藏式下拉菜单可隐藏式下拉菜单折叠式下拉菜单折叠式下拉菜单（续上续上）3）分类列表式导航：通常用于集锦类网）分类列表式导航：通常用于集锦类网站中。站中。（续上续上）4）关键词导航：通常是在文本中将某）关键词导航：通常是在文本中将某些关键文字设置成超链接，常出现在帮些关键文字设置成超链接，常出现在帮助类和产品说明类的网页
13、中。助类和产品说明类的网页中。5）其他类导航：如使用图像或动画来）其他类导航：如使用图像或动画来引导一个网站的导航。引导一个网站的导航。网网页色彩的搭配页色彩的搭配原则：原则：1）保持网页的色彩搭配的协调性）保持网页的色彩搭配的协调性 2）保持不同网页色彩的一致性）保持不同网页色彩的一致性 3）根据页面的主题、性质及）根据页面的主题、性质及 浏览者来规划整体色彩。浏览者来规划整体色彩。网站创建网站创建 1)网页的制作网页的制作 2）网站的优化）网站的优化 3）网站的测试）网站的测试13.2 网站发布网站发布域名和空间的申请域名和空间的申请 在网上收索可提供在网上收索可提供域名和空间的网域名和空
14、间的网站，如站，如http:/可可提供免费空间申请，根据网站的申请提供免费空间申请，根据网站的申请流程进行申请即可流程进行申请即可申请示例申请示例网站上传网站上传 1）使用）使用Dreamweaver 上传上传定义远程站点定义远程站点上传网站或网页上传网站或网页 2）使用）使用FTP软件软件(如如CuteFTP)13.3.网站的维护网站的维护 指即时更新网站内容，将网站中的指即时更新网站内容，将网站中的废旧文件即时清除以及调整网站的废旧文件即时清除以及调整网站的功能和服务等活动。功能和服务等活动。综合实训综合实训准备工作准备工作v站点规划站点规划 “水族世界水族世界”网站的导航草图如图所示，主
15、要分为网站的导航草图如图所示，主要分为8个栏目。个栏目。准备工作准备工作v素材收集素材收集 制作网页的相关素材和资料可通过网络或其他途径获得，网页中的制作网页的相关素材和资料可通过网络或其他途径获得，网页中的一些图像素材，如导航按钮等可以利用一些图像素材，如导航按钮等可以利用Photoshop或或Fireworks等图形等图形图像软件制作。图像软件制作。网站网站logo图像图像制作思路分析制作思路分析 本案例是综合案例，因此应从站点创建与管理的操作开始，首先本案例是综合案例，因此应从站点创建与管理的操作开始，首先制作制作“index.html”页面，并利用该页面制作页面，并利用该页面制作“xi
16、nwen.html”页面，依页面，依次类推。需注意的是，除首页外，其他页面的基本结构大致相同，因此次类推。需注意的是，除首页外，其他页面的基本结构大致相同，因此制作时可通过复制已有资源的方法来提高制作效率。制作时可通过复制已有资源的方法来提高制作效率。操作过程操作过程v创建创建“水族世界水族世界”站点站点 为了更好的管理网站中的各种文件并方便网页制作，应首先创建站为了更好的管理网站中的各种文件并方便网页制作，应首先创建站点，并在站点中创建各种文件和文件夹。点，并在站点中创建各种文件和文件夹。操作过程操作过程v制作网站首页制作网站首页（1）插入表格 利用表格可以很好地布局页面，也是初学者最常使用
17、的布局网页的方利用表格可以很好地布局页面，也是初学者最常使用的布局网页的方法。法。操作过程操作过程v制作网站首页制作网站首页（2）输入文本并插入图像 完成表格和嵌套表格的插入后，即可在各单元格中输入需要的文本完成表格和嵌套表格的插入后，即可在各单元格中输入需要的文本并插入需要的图像。并插入需要的图像。操作过程操作过程v制作网站首页制作网站首页（3）创建并设置外部CSS样式文件 由于站点包含多个网页，且各网页中相同类型的对象格式应尽量保由于站点包含多个网页，且各网页中相同类型的对象格式应尽量保持一致，因此可通过创建外部持一致，因此可通过创建外部CSS样式文件的方法统一设置网页中的对样式文件的方法
18、统一设置网页中的对象格式。象格式。操作过程操作过程v制作网站首页制作网站首页（4）设置超链接和图像热点区域 接下来将对导航栏上的各图像创建超链接并取消超链接格式的图像接下来将对导航栏上的各图像创建超链接并取消超链接格式的图像边框效果，然后在边框效果，然后在“bg.jpg”图像上使用热点工具创建图像热点区域。图像上使用热点工具创建图像热点区域。操作过程操作过程v制作网站首页制作网站首页（5）创建并设置AP Div 下面将通过绘制下面将通过绘制AP Div来创建鼠标经过图像效果。来创建鼠标经过图像效果。操作过程操作过程v制作制作“水族新闻水族新闻”页面页面（1）布局页面 下面通过复制网站首页中的对
19、象并适当进行修改来快速布局下面通过复制网站首页中的对象并适当进行修改来快速布局“水族水族新闻新闻”页面。页面。操作过程操作过程v制作制作“水族新闻水族新闻”页面页面（2）编辑外部CSS样式 为方便快速对网页中不同对象的格式进行设置，下面链接制作首页为方便快速对网页中不同对象的格式进行设置，下面链接制作首页时创建的外部时创建的外部CSS样式文件，并在其中添加适当的规则。样式文件，并在其中添加适当的规则。操作过程操作过程v制作制作“水族新闻水族新闻”页面页面下面将利用嵌套表格、文本和图像等对象来丰富下面将利用嵌套表格、文本和图像等对象来丰富“水族新闻水族新闻”网页的内。网页的内。练习题练习题打开提供的打开提供的打开提供的打开提供的“luntan.html”luntan.html”网页，利用嵌套表格、文本和图像等对网页，利用嵌套表格、文本和图像等对网页，利用嵌套表格、文本和图像等对网页，利用嵌套表格、文本和图像等对象设置网页内容。象设置网页内容。象设置网页内容。象设置网页内容。