网设计与制作课件.ppt
《网设计与制作课件.ppt》由会员分享,可在线阅读,更多相关《网设计与制作课件.ppt(27页珍藏版)》请在三一文库上搜索。
1、网页设计与制作,西京学院 电子商务教研室,网站建设流程,站点规划,1,素材准备与站点设计,2,网页制作,3,WEB服务器的配置,4,站点的上传与发布,5,站点的维护与更新,6,随着网络科技的发展,Internet已经成为企业宣传自己的重要途径之一。拥有一个好的商业网站就是企业最好的名片。建立商业网站不仅可以让客户了解企业,提高企业的知名度;而且更能突破时空的限制,为企业在网络时代创造更多的商机。 在本章中,将详细介绍一个商业网站的建设过程。网站首页草图如图所示。 【本章学习目的】 本章通过详细讲解商业网站建设过程,读者掌握规划网站、页面布局的技术、网站的制作流程。,1、站点规划,制作网站首先是
2、规划出一个具体的方案,以此作为进一步工作的依据。它包括以下几个方面。 1. 确定建设网站的目标 创建网站的第一步就是确定网站的目标。本章要创建的网站是一个小型的商业网站,网站的目标就是要让客户了解该企业的概况、产品信息、相关技术、产品购买方法以及联系方式等。通过该网站能够建立从客户到公司的有效沟通渠道。 2. 分析目标用户对站点的需求 访问该网站的用户主要是已有的客户和潜在的浏览者,所以在制作网站时,考虑如何为已有的客户提供完善、周到的服务,比如:新产品的推广、技术支持、在线订购,同时考虑到如何吸引到更多的消费群体,并分析这种消费潜力到底有多大。,3. 确定网站风格 在确定了网站的目标和功能之
3、后,接下来就要针对用户需求对网站的风格进行定位。本网站定位于提供企业信息类网站。 本网站所有页面均采用灰色加草绿色的配色方案,严谨中透着人文化气息,页面全部采用“T”布局,顶部为横条网站标志,下方左边为导航条,右面显示具体内容的布局。网页布局如图11.2所示。 4. 考虑网络的技术问题 考虑多种浏览器和不同分辨率的兼容性,采用浏览器的分辨率:800*600,兼顾1024*768。运用的技术有:表格、模板、CSS样式、Flash动画等。,2、素材准备与站点设计,可根据推荐的主题选择网站主题或自定义一个网站主题 确定网站的栏目并画出栏目结构图 色彩搭配根据网站主题特点,确定网站的色彩方案 根据网站
4、的主题收集资料:文字及图像等,2.1绘制首页草图,首页的设计时应该注意以下几个问题: 框架清晰,重点突出; 色彩搭配既要能够吸引浏览者的注意力,又不要过于花哨,过于浓烈的色彩反而容易引起浏览者的反感; 文字和图片相辅相成。,2.2素材准备,有了总体结构,还要进行基本素材的收集,比如文本、动画、图片、音乐、视频素材等。这其中有些可以自己制作,比如使用fireworks制作图片、flash制作动画等;有些可以通过其他途径获得,比如在网上下载,购买素材光盘等等。 本网站中使用的主要素材就是图片,一部分是通过实物拍摄后处理获得的,还有一部分装饰图像是通过素材光盘获得。,3、网页制作,11.3.1 创建
5、站点 在Dreamweaver 8.0中,执行 “站点”菜单“新建站点”命令,弹出“站点定义”的对话框。 选择“高级”选项卡,单击“本地信息”,在右侧选项中定义网站的一些本地信息。 站点名称:综合实例。 本地根文件夹:即指定站点文件的保存位置。输入H:shili11-1。 默认图像文件夹:H:shili11-1images。 其它选择默认项。,3.2 创建网站结构,1. 目录结构 网站的目录结构是指你建立网站时创建的目录。目录结构的好坏,对于网站本身的上传、维护、内容未来的扩充和移植有着重要的影响。 将文件分门别类地放在不同的文件夹下,本网站的目录结构如下: Images用于保存图像素材 Pa
6、ge用于存放网页 Css用于存放CSS样式文件 Flash用于存放Flash动画 2. 链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。如果把每个页面比喻成一个固定点,那么链接就是两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。 本网站采用的是最常见的星状链接。所谓星状链接是指每个页面之间都建立链接。星状链接结构的优点是浏览方便,用户可以从当前页面跳转到网站内的任何页面中。网站结构如图所示。,3.3页面模板的制作,使用模板来创建网站的好处是快速建立具有统一风格的多个网页,提高网站设计与制作的效率。本网站有一组风格相同的8个网页,因此,首先制作页面的模板,操作步骤如下:
7、 选择“文件”菜单“新建”命令,新建一个模板页面, 划分模板的锁定区域和可编辑区域。在这个模板中,上、下和右侧的上部是所有网页的共同部分,因此为锁定区域,右侧的中部是每个网页的具体不同部分,创建为可编辑区域,如图所示。模板的编辑过程与普通网页相同。,可编辑区域,锁定区域,3.4首页的制作,制作过程如下: 步骤1 选择“文件”菜单“新建”命令,新建一个网页,命名保存为“index.html。打开“资源”面板,选择“模板”选项,将模板文件“moban.dwt”直接拖动到“文档”窗口。即此网页应用了该模板。 步骤2 将光标置于可编辑区域main中,插入一个二行二列的表格,表格宽度为100%,光标放在
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 设计 制作 课件
链接地址:https://www.31doc.com/p-3229514.html