小型企业网页制作.ppt

,|网页制作技术,目 标,重点、难点,进入学习,项目2：小型企业网站,企业往往需要通过在网络中开辟一个对外宣传的窗口来宣传产品，传播企业理念，让更多的人了解到企业的产品、最新动态和联系方式，使用户对企业更有信心，提高企业的知名度优秀企业网站：http:/,How We Work,网站规划,收集素材,网上安家,网页设计,网站维护与更新,目 标,重点、难点,进入学习,目 标,任 务,目 标,小型企业网站介绍,1知识目标：进一步掌握版面布局的技术以及多媒体在网页中的应用。2能力目标：了解企业网站建站的流程，储备撰写网站开发建议书的能力。3教育目标：培养学生沟通交流，团队协作的能力。,这是一个从事互联网服务的高科技公司网站，以宣传公司、推广公司服务为主要目的；并展示公司强大的技术支持。特点:简洁，朴素,网站主要包括以下几个模块：公司信息、业务范围、推广服务、技术支持、客户案例、联系我们和其它，共七个模块,|网页制作技术,目 标,进入学习,重 点,任 务,企业网站建设流程栏目策划布局表格的使用,难 点,网页版面设计的思考了解计划书的撰写,|网页制作技术,其他内容：文字链接的定义轮换图像的使用多媒体对象的使用CSS样式的简单设计,目 标,重点、难点,进入学习,任 务,|网页制作技术,进入学习,项目2的建设流程和项目1有所区别。主要在于，在企业网站建设过程中你需要不断的和你的客户进行沟通交流。下一个工作的开展必须在客户对上一个工作满意后方可继续。网站策划、前期收集信息、分内容策划、分栏目策划等工作在网站建设是非常重要的。,从上图中我们可以发现，与客户交流是很重要的一项工作，从中可以更好的做好策划，完成网站的建设。,|网页制作技术,解决方案,网页栏目,网页结构,|网页制作技术,解决方案,网页栏目,网页结构,对于该小型企业网站，主要从以下几个方面进行考虑：网站策划、前期收集信息、分内容策划、分栏目策划、开始制作，以及之后的维护等。,网站总策划：在做网站之前首先要做准确的定位，明确建站目的是第一步要做的。给网站做定位时，要与公司决策人士共同讨论，以便于让上层领导能对网站的发展方向有一定的把握，同时最好调动公司其他部门一起参加讨论，及时从公司立场提出好的建议，结合到策划中。,对于前期信息收集：明确定位后，开始收集相关意见，跟公司其他部门合作，并结合公司的实际情况，这样可使网站发挥最大作用。这一步是前期策划中最为关键的一步。这一步需要整理成文档，可让其他部门配合提交一份本部门需要在网上开辟的栏目计划书。每一个栏目的设置都应该是有规划的，如果考虑不充分会导致以后突如其来的新加内容破坏网站的整体规划和风格，所以在规划时考虑全面。,|网页制作技术,解决方案,网页栏目,网页结构,分栏目策划：收集完相关信息以后，要对其进行整理，整理后找出重点，再根据重点以及公司业务的侧重点，结合网站定位来敲定网站的分栏目需要有哪几项，这是一个讨论的过程，需要客户的参与，交流意见，反复比较，给定下来的内容进行归类，形成网站栏目的树状列表用以清晰表达站点结构。,子栏目：以同样的方法，来讨论二层栏目下的子栏目，对它们进行归类，并逐一确定每个二级分栏目的主页面需要放哪些具体的东西，二级栏目下的每个小栏目需要放哪些内容，让栏目负责人能够很清楚地了解本栏目地每个细节和每个栏目。,策划书：讨论完以后，就由栏目负责人按照讨论得出地结果写栏目规划书，栏目规划书要求写得详细、具体，并有统一地格式，以备网站留档只用，这次地策划书只是第一版，以后在制作过程中如出现问题应及时修改该策划书。策划书要求有电子版和书面版两个版本。,|网页制作技术,解决方案,网页栏目,网页结构,|网页制作技术,解决方案,网页栏目,网页结构,|网页制作技术,解决方案,网页栏目,网页结构,具体设计制作：具体分栏目策划完毕后，需要做的就是让页面设计人员根据每个栏目的策划书来设计页面。设计人员一定要根据策划书把每个栏目的具体位置和网站的整体风格确定下来，为了让网站有整体感，应该在网页中放置一些贯穿性的元素，最终要拿出至少三种不同风格的方案。,讨论定稿：设计方案出来后，有大家（你们和客户）讨论定稿。设计完成后，由制作人员负责实现网页，并制作成模版。在这个过程实现的同时，栏目负责人应该开始收集每个栏目的具体内容并整理。模版制作完成后，由栏目负责人往每个栏目里面添加具体内容。,整合测试：当具体的设计制作完成以后，就需要整合测试，即把程序和页面进行整合，整合完以后，进行内部测试。如果网站在以后的建设过程中需要添加新的栏目，也要像前面一样，写一份详细的策划书作为依据。,解决方案,网页栏目,网页结构,解决方案,网站规划,解决方案,小型企业网站解决方案,|网页制作技术,Photoshop或Fireworks,Dreamweaver,Flash,解决方案,网页结构,网站规划,|网页制作技术,经过讨论确定网站栏目,公司信息,业务范围,推广服务,技术支持,客户案例,联系我们,其 他,解决方案,网页栏目,网页结构,网站规划,解决方案,|网页制作技术,关于第一屏,所谓第一屏，是指一个网站在不拖动滚动条时能够看到的部分。一般来讲，在800*600的屏幕显示模式下，IE浏览器窗口能看到的部分为778*435；在1024*768的屏幕显示模式下，能看到的部分为1002*600。所以在页面中特别重要的内容最好能放在第一屏里。,什么样的布局是最好的,其实这要具体情况具体分析。如内容非常多，就要考虑用“国”字型，它方便浏览，速度快，但结构变化不灵活；如果是一个企业网站想要展示一下企业形象或个人主页想展示个人风采，那么可以选择自由型，如封面结构、Flash结果就灵活多了。好的Flash大大丰富了网页，但是不能表达过多的文字信息。,网页设计的思考？,解决方案,网页栏目,网页结构,网站规划,解决方案,|网页制作技术,网页的版面设计布置千变万化，可以根据网页内容及个人喜好的不同，进行相应的布局。具体怎样做并没有常规可寻。,1.设计要尽量简单；2.尽量使用表格布局，层虽然比较好用，但在不同浏览器下很容易错位；3.尽量使用CSS层叠样式表来控制元素的各项属性；4.定好网页的主色调，就是指主页的色彩组合。一般不要超过3种颜色；5.少用javascript脚本，更不要使用大幅的java小程序，因为会降低网页下载速度；6.在一个网页种不要放过多的突破，最好总容量不超过60KB；7.网页版面的大小，应考虑大多数浏览者的情况；网页长度不要超过3个屏幕的长度；8.版面的设计要考虑到方便以后的维护，哪些是固定，哪些是会经常变动的。,网页设计的思考？,解决方案,网页栏目,网页结构,接下来我们通过ps工具将网页栏目图做出来，并进行相应的切图。,网站规划,|网页制作技术,经过讨论确定网站首页（页面）布局,首页布局结构,子页布局结构,|网页制作技术,添加元素,文字样式,轮换图像,在开始制作网页之前，我们还是先在Dreamweaver中建立站点。根据栏目的规划完成站点结构的确立，如图所示：,客户案例,公司信息,公司信息模块里的图像文件夹,联系我们,推广服务,其 他,业务范围,技术支持,首页,公用图像文件夹,|网页制作技术,添加元素,文字样式,轮换图像,在建立网站结构过程中，会根据栏目内容的多少进一步确定子文件夹中的结构。在该项目中，每个功能模块所包含的内容较多，所以为了便于管理，将该栏目所独用的图片单独存放于该栏目下的子images文件夹；而根目录下的images用来存放的是整个网站中共用的图片。,网站栏目越多，子栏目越复杂时，根据内容的多少来确立站点结构；可能目录的层次就会增多，但最好控制在5层之内。,|网页制作技术,添加元素,文字样式,轮换图像,在项目1中我们使用表格来进行页面元素的定位，在调整表格的过程中我们遇到了很多问题，如单元格中插入内容后会影响到同一行单元格，也就是出现了单元格被积压的现象；有时候我们插入内容之前，总要进行多次的拆分或是合并单元格的操作；这些问题无疑给我们制作页面时增加了很多的操作，也耗费了更多的时间。今天我们在制作项目2将使用新的方式来进行操作。那就是布局表格。,在Dreamweaver 中，除了可以使用表格和层进行页面布局设计外，它还提供了更加方便、有效的页面布局设计工具“布局视图”。使用这个工具，页面布局将变得更加轻松快捷，一气呵成。布局视图以表格为基础，但融合了层的移动灵活的优点，克服了表格的一些缺陷。在布局视图中，你可以轻松地在页面上绘制布局表格和单元格，然后可以根据需要定制或移动单元格到理想的位置，进行页面的合理布局。,|网页制作技术,添加元素,文字样式,轮换图像,使用布局视图设计页面布局，需要在页面中绘制布局单元格和布局表格，然后在单元格中添加页面元素，并作必要的调整。1绘制布局单元格 切换到布局视图我们就可以使用绘制布局单元格工具设计页面布局了。提示：网我们在页面中绘制布局单元格时，Dreamweaver会自动插入布局表格，该表格将占据整个页面，作为布局单元格的容器。2绘制布局表格 如果不希望把整个页面作为一个布局表格，这就需要先绘制布局表格，然后再在布局表格中绘制布局单元格。,|网页制作技术,添加元素,文字样式,轮换图像,根据页面效果图进行首页布局的绘制，如图所示：,我们可以在跟踪图像的协助下，将页面的最外层的布局表格绘制好了。考虑到网络的速度，分成5个布局表格。如要插入内容则需要先绘制布局单元格。,正文内容处分有不同的模块，为了更好的控制页面，我们通过嵌套布局表格的方式将各个功能模块分开制作。,|网页制作技术,添加元素,文字样式,轮换图像,进一步绘制单元格和嵌套布局表格：,绘制的单元格的大小要与其中的对象的大小保持一致。,每个模块通过一个嵌套的布局表格来确定区域，以便于移动和修改。,添加两个单元格，因为在效果图中我们可以看到这是一个1px的表格效果。,|网页制作技术,添加元素,文字样式,轮换图像,布局视图下需要绘制了布局单元格后才能添加元素。,绘制布局单元格的时候需要注意：哪里需要插入内容，就在哪里绘制布局单元格；但是在同一格布局表格中，布局单元格应该和其他布局单元格邻接，不要让它们之间有空隙；如旁边没有其他单元格了，则占满整个布局表格的宽度。,哪种方式更好呢？我们建议使用第二种方式。因为在图片所在的位置实际上是一行一列只有一个单元格的，而方式一则是二行三列，图片所在单元格的上方、左右就变成空白的，在标准模式里面也单元格组成。,注意：在布局模式下无法设置背景图像，需转到标准模式下进行设置。,添加元素,文字样式,轮换图像,页面布局,添加元素,以上内容是我们在完成项目2页面的制作需要掌握的内容,|网页制作技术,添加元素,文字样式,轮换图像,页面布局,添加元素,插入Flash后，在该位置上出现了Flash的占位符。可以在属性面板设置Flash的属性；点击“播放”按钮就可在编辑状态下浏览到Flash的效果。在页面中我们常常会去除Flash的背景颜色，以达到更好的效果：设置参数：wmode，值为：transparent。,|网页制作技术,插入Flash,添加元素,文字样式,轮换图像,页面布局,添加元素,该设置使得页面中的所有文字都是12px，颜色为999999。那我们就不需要对页面中的文字分别去设置颜色和大小，一次就搞定了！,|网页制作技术,定义整个页面的文字大小和颜色,添加元素,文字样式,轮换图像,页面布局,添加元素,|网页制作技术,经过绘制布局表格和布局单元格，再添加上Flash动画和图片、文字等内容，页面布局效果如下图：,添加元素,文字样式,轮换图像,页面布局,添加元素,有哪些地方的效果很不尽人意呢？,|网页制作技术,浏览效果：,没有分界线？,行间距太小，不便阅读,链接文字颜色不协调,1px表格还未设置,添加元素,文字样式,轮换图像,页面布局,添加元素,|网页制作技术,我们可以通过页面属性的“链接”分类来进行简单链接效果的定义。,链接样式,为什么要这么设置？为什么要设四种颜色？,添加元素,文字样式,轮换图像,页面布局,添加元素,页面属性中只是能设置简单的效果，如需要进行其他效果的设置需要学习CSS样式。,|网页制作技术,链接的四种状态。在给文字或图像设置链接后，它们就会自动包含了四种链接状态,链接进阶：,添加元素,文字样式,轮换图像,页面布局,添加元素,|网页制作技术,1px表格设置,选中最底部的表格，设置其属性如下：,再选中表格的所有单元格，设置属性如下：,完成！,添加元素,文字样式,轮换图像,页面布局,添加元素,|网页制作技术,经过上面的操作，页面有了新的效果：,链接效果，默认文字为白色，鼠标移上去变橙色,1px表格边框效果,添加元素,轮换图像,文字样式,页面布局,|网页制作技术,当我们通过属性面板对对象的属性进行设置时，有时候不到做到预期的效果，那有什么其他办法实现吗？有！CSS样式设计！,CSS样式有助于我们进行页面格式的定义，所以掌握CSS可以提高网页制作的效率。,样式设计是指应用HTML样式和CSS（层叠样式表）设计网页的外观样式。CSS是Cascading Style Sheet的缩写，我们把它译为“层叠样式表”或“级联样式表”。样式表的优点：（1）同时更新站点的许多页面，更快更容易（2）制作体积小，下载页面快（3）样式和结构分离,添加元素,轮换图像,文字样式,页面布局,|网页制作技术,CSS允许网站作者的网页外观以及表示方式更多控制。它们扩展能够精确页上指定元素的位置和外观并创建特殊效果。,在初学过程中，我们可以先使用嵌入样式。,共有三种类型的级联样式：外部样式表嵌入样式内联样式。,添加元素,轮换图像,文字样式,页面布局,|网页制作技术,定义类样式，使得页面的对象能重复使用该样式效果。,注意：对于自定义样式的名称，即创建类样式时，建议不要使用HTML标记作为名称。,第一步：新建样式,第二步：选择类样式，设置类名称，只对该文档起作用,添加元素,轮换图像,文字样式,页面布局,|网页制作技术,定义类样式，使得页面的对象能重复使用该样式效果。,第三步：设置行高为150%，即定义行与行的间距为150%，类似word中的1.5倍行距。,添加元素,轮换图像,文字样式,页面布局,|网页制作技术,定义类样式，使得页面的对象能重复使用该样式效果。,第四步：设置方框的填充效果，我们要让单元格的文字距离单元格的左边框有10个像素。注意要去掉“全部相同”的选项。,添加元素,轮换图像,文字样式,页面布局,|网页制作技术,定义类样式，使得页面的对象能重复使用该样式效果。,第五步：将定义的textline样式应用到相应的对象上。很多时候定义的文字样式是应用到文字所在的单元格上。,先选中需要应用样式的对象-单元格,在属性面板中设置类的值为textline,添加元素,轮换图像,文字样式,页面布局,|网页制作技术,对比应用样式和没有应用样式的效果：,应用样式的效果给人的感觉会更整齐，更容易阅读。文字效果有了，表格的边框怎么加呢？如何只显示表格的某一条边框呢？,应用了样式的效果,未应用样式的效果,添加元素,轮换图像,边框样式,页面布局,|网页制作技术,我们的答案还是CSS样式。,选择边框分类,分别设置四条边框的宽度,新建一个新的类样式，命名为border。然后对样式进行设置,分别对四条边框设置样式,分别设置四条边框的颜色,定义好后应用到相应的表格上。注意，这个边框效果我们是应用到表格上，而不是单元格上。,添加元素,轮换图像,边框样式,页面布局,|网页制作技术,以同样的方法定义另一个边框类样式border2，只是上边框有1px宽度的边框，其他边则没有。应用到相应的表格上。,应用border1样式,应用border2样式,添加了边框样式后，页面的模块划分就清晰多了。到此我们完成了首页的制作。,添加元素,文字样式,轮换图像,轮换图像,页面布局,添加元素,在子页面的制作中，页面的布局和首页的布局是类似的，所以可以按照制作首页的方式完成子页面的制作。,不同的是页面正文部分的内容多了一个导航。当鼠标移动到链接的图片上时，变换成另一张图片，鼠标移开又恢复之前的图片。,轮换图像的实现，需要准备好两张大小一样，效果不一样的图片。,|网页制作技术,我们把这种效果叫做轮换图像。和插入图像是类似的。,添加元素,文字样式,轮换图像,轮换图像,页面布局,添加元素,|网页制作技术,在需要插入轮换图像（鼠标经过图像）的单元格中，选择如下命令：,在弹出的对话框中进行设置,添加元素,文字样式,轮换图像,完成页面制作,页面布局,添加元素,在子页面中还用到首页制作中边框样式和文字行间距样式。效果如下：,|网页制作技术,|网页制作技术,归纳总结,改进地方,下一项目,项目2：小型企业网站,经过努力，我们完成项目2的公司信息栏目的内容，先让我们来看一下我们的成果！其他栏目请同学们利用课外时间完成。,让我们期待！GO！请注意观察我们还有什么做得不够好的，需要改进的？,归纳总结,改进地方,下一项目,归纳总结,观看效果,归纳总结,请告诉我，您掌握了哪些内容？哪些你觉得比较难？哪些又比较简单？,1企业网站的建设：要建设一个企业网站，沟通交流的工作很重要。2策划书的：如何撰写规划书？它包括哪些内容？有什么用？3页面布局：如何更快更好进行页面布局的设计4Flash的添加：Flash透明背景怎么设置？5 轮换图像：和插入图片一样简单吧6 CSS样式的简单使用：有点难，一旦掌握了，很好用哦。,|网页制作技术,归纳总结,下一项目,讨 论,观看效果,网站的交互效果如何？网站的布局如何？有没有什么细节的地方没有注意到？,|网页制作技术,需要改进的地方：网站文字段落的缩进问题需要解决，要符合我们中国人阅读的习惯；一个一个页面去设计，效率很低，如要统一修改某个地方工作量岂不是很大？有些链接文字的颜色需要突出，怎么办？,归纳总结,改进地方,下一项目,观看效果,|网页制作技术,项目2：中型企业网站的建设我们针对企业网站的建设来巩固网站建设流程的掌握。结合项目1和项目2的内容以及需要改进的地方，我们完成企业网站的建设。主要针对：页面的布局、模板的使用以及CSS样式的使用。,