实训 13 网站建设、发布与维护

1. 实训13 网站建设、发布与维护 1.1 网站的建设 1.2 网站的发布 1.3 网站的维护

2. 网站建设流程为：策划网站→准备素材→规划网站布局→设计网站目录→规划网站导航→搭配网站色彩 →创建网站 →发布网站→维护 。

3. 1.1 网站建设 网站建设 网站发布 网站维护

4. 网站策划 1) 网站的主题(即题材和标题) 2）网站的对象 3）网站的内容 策划网站逻辑图

5. 网站题材选择的一般原则 • 一般来说，个人主页的选材定位要小，内容要精。 • 对于个人网站，题材最好是自己擅长或者喜欢的内容。 • 不要太滥或者目标太高。

6. 网站标题设置的一般原则 • 名称要正，即要合法、合情及合理 • 名称要易记，最好使用中文 • 名称要有特色，最好能体现一定的内涵，同时给浏览者更多的视觉冲击和空间想象力。如“e书时空”

7. 网站资料(素材)收集 • 素材的类型：文字、图片、动画及声音、影像等多媒体文件。 • 素材的获取途径： 1）自己编制 2）报刊杂志和光盘等传统媒体。 3）网络。

8. 网上资料使用的注意事项： 1）版权问题 2）健全性 • 内容的完整性与正确性 • 链接的正确性与完整性 3）合法性

9. 网页的布局规划 • 网页布局是设计在网页上放些什么内容，以及这些内容放在网页的什么位置。 • 即网页结构的设计，其实就是合理地设计页面中的栏目和板块，以及将其合理地分布在页面中。

10. 对网页内容的一个概括性描述，作用是引导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。对网页内容的一个概括性描述，作用是引导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。 如同一个商品的商标，应集中体现网站的特色、内容及其内在的文化内涵和理念。 • 主页的基本构成内容 1）页面标题 2）网站标志 3）页眉 4）导航栏 5）主内容区 6）页脚 指页面上端的部分，该位置吸引注意力较高，故大多网站在此处放置网站的宗旨、宣传口号、广告语或设置为广告席位来出租。 导航条的位置常见的有：在页面的左侧、右侧、顶部和底部。 是页面设计的主体元素。在首页中，它一般是二级链接内容的标题、或内容提要、或内容的部分摘录。布局通常是按网站内容的分类进行分栏或划分板块。 指页面底端部分，通常用来标注站点所属的单位的地址、e-mail链接以及版权所有或导航条

13. 网站目录设计 • 网站目录设计的作用：便于站点的上传和维护，以及内容的扩充和移植。 • 规划规范 • 目录建立的原则：以最少的层次提供最清晰简便的访问结构。 • 目录结构： • 根目录 • 根文件：通常包括主页文件以及其他必须的系统文件。 • 每个主要功能（导航栏目）建立相应目录。

14. 目录的层次不要太深，一般不要 • 超过去3层，便于维护和管理。 • 不要使用中文目录 • 尽量使用意义明确的目录名称 • 根目录下的images目录存放公用图片，每个目录下私有图片存放于各自独立images目录下。 • 根据需要分别在根目录下设置media目录存放flash、avi等多媒体文件。 • 所有的脚本文件存放在根目录下的script目录；所有CSS文件存放在根目录下的css目录。

15. 链接设计 • 链接设计是指设计页面之间相互链接的拓扑结构。 • 链接结构类型： 1）线性结构：指子页面由父页面所扩展而来的；打开页面是由父页面一级一级向下展开，而退出页面则由子页面一级一级往回收缩。

16. （续上） 2）非线性结构： • 树状链接结构：指一级页面链接指向多个二级页面。 • 星状链接结构：指每个页面相互之间都建立有链接。 • 树状、星状混合链接结构：在实际的网站设计中，通常是使用这种混合结构。此方案是首页面和一级页面之间用星状链接结构，一级页面和以下各级页面之间用树状链接结构。

17. 网站导航的规划 • 网站导航的设计，其实就是对网站链接结构的设计。 • 导航分类： 1）导航栏

18. (续上) 2）下拉菜单导航：包括隐藏类和不可隐藏类（如折叠式）。

20. （续上） 3）分类列表式导航：通常用于集锦类网站中。

21. （续上） 4）关键词导航：通常是在文本中将某些关键文字设置成超链接，常出现在帮助类和产品说明类的网页中。 5）其他类导航：如使用图像或动画来引导一个网站的导航。

22. 网页色彩的搭配 原则： 1）保持网页的色彩搭配的协调性 2）保持不同网页色彩的一致性 3）根据页面的主题、性质及 浏览者来规划整体色彩。

23. 网站创建 1) 网页的制作 2）网站的优化 3）网站的测试

24. 13.2 网站发布 • 域名和空间的申请 在网上收索可提供域名和空间的网站，如http://www.kudns.com可提供免费空间申请，根据网站的申请流程进行申请即可

25. 申请示例

26. 网站上传 1）使用Dreamweaver 上传 • 定义远程站点 • 上传网站或网页 2）使用FTP软件(如CuteFTP)

27. 13.3. 网站的维护 指即时更新网站内容，将网站中的废旧文件即时清除以及调整网站的功能和服务等活动。

28. 综合实训

29. 准备工作 • 站点规划 “水族世界”网站的导航草图如图所示，主要分为8个栏目。

30. 准备工作 • 素材收集 制作网页的相关素材和资料可通过网络或其他途径获得，网页中的一些图像素材，如导航按钮等可以利用Photoshop或Fireworks等图形图像软件制作。 网站logo图像

31. 制作思路分析 本案例是综合案例，因此应从站点创建与管理的操作开始，首先制作“index.html”页面，并利用该页面制作“xinwen.html”页面，依次类推。需注意的是，除首页外，其他页面的基本结构大致相同，因此制作时可通过复制已有资源的方法来提高制作效率。

32. 操作过程 • 创建“水族世界”站点 为了更好的管理网站中的各种文件并方便网页制作，应首先创建站点，并在站点中创建各种文件和文件夹。

33. 操作过程 • 制作网站首页 • （1）插入表格 利用表格可以很好地布局页面，也是初学者最常使用的布局网页的方法。

34. 操作过程 • 制作网站首页 • （2）输入文本并插入图像 完成表格和嵌套表格的插入后，即可在各单元格中输入需要的文本并插入需要的图像。

35. 操作过程 • 制作网站首页 • （3）创建并设置外部CSS样式文件 由于站点包含多个网页，且各网页中相同类型的对象格式应尽量保持一致，因此可通过创建外部CSS样式文件的方法统一设置网页中的对象格式。

36. 操作过程 • 制作网站首页 • （4）设置超链接和图像热点区域 接下来将对导航栏上的各图像创建超链接并取消超链接格式的图像边框效果，然后在“bg.jpg”图像上使用热点工具创建图像热点区域。

37. 操作过程 • 制作网站首页 • （5）创建并设置AP Div 下面将通过绘制AP Div来创建鼠标经过图像效果。

38. 操作过程 • 制作“水族新闻”页面 • （1）布局页面 下面通过复制网站首页中的对象并适当进行修改来快速布局“水族新闻”页面。

39. 操作过程 • 制作“水族新闻”页面 • （2）编辑外部CSS样式 为方便快速对网页中不同对象的格式进行设置，下面链接制作首页时创建的外部CSS样式文件，并在其中添加适当的规则。

40. 操作过程 • 制作“水族新闻”页面 • 下面将利用嵌套表格、文本和图像等对象来丰富“水族新闻”网页的内。

41. 练习题 打开提供的“luntan.html”网页，利用嵌套表格、文本和图像等对象设置网页内容。