Transcript 网络专题的策划与制作
自己动手做专题！ 民革重庆市委 虞佳佳 2012.6 网络专题的策划与制作 什么是网络专题： 网络专题通常是利用一个点、一件事，形成一个主题来策划一个页 面或一个活动的流程页面。 为什么要做专题？ ： 如何整合信息内容，是网站吸引注意力的关键。 将用户需要的信息集中的展示在专题上能够方便用户 的浏览与查找，体现网站内容的全面与系统. 好的专题不仅能为网站带来流量，还能吸引来部分用 户。 网络专题的策划与制作 第一、专题的主题设计 1 如何进行主题设计 2 专题主题设计评估标准 网络专题的策划与制作 1 如何进行主题设计 1 2 3 选题的思路 选题的角度 做专题前 要明确几个问题 网络专题的策划与制作 1 如何进行主题设计 选题是专题策划和制作第一步 选题的思路 重大突发事件 可预知事 件 重要社会现 象或问题 常规性会议、 活动 网络专题的策划与制作 1 如何进行主题设计 专题的切入点 透视背景 典型意见 典型人物 选题的角度 典型数据 典型时刻 网络专题的策划与制作 1 如何进行主题设计 做专题前要明确几个问题 1 2 3 为什么要做这个专 题？ （明确制作专题的 目的） 做这个专题是给谁 看的？ （明确专题的受众 群体） 通过这个专题收到 怎样的效果？ （明确这个专题你 想要的效果： 流量？纪念？宣 传？） 网络专题的策划与制作 2 专题主题设计评估标准 是否与网站定位、版面特点相符合 资料分析是否到位 提交材料与主题是否相关联 是否具备可操作性和扩展性 网络专题的策划与制作 第二、网络专题的内容策划 1 专题策划文案 2 选择、组织专题材料 3 专题的栏目设置 4 专题版式架构、页面设计 网络专题的策划与制作 1 专题策划文案 标题：ＸＸＸＸ专题策划案 副标题：ＸＸＸＸ版面专题 策划人：ＸＸＸ 策划时间：ＸＸ年ＸＸ月ＸＸ日 正文： 专题主题：ＸＸＸＸＸＸＸＸＸＸ 专题关键字：ＸＸＸＸ 专题说明：…… 创意说明：…… 版面设计：… 附图 材料分类： 网络专题的策划与制作 1 专题策划文案 专题策划文案审查标准 不合格 不符合版面特点、 内容不佳、材料 脱离主题、缺乏 新闻特性、创意 不足等，修改也 无法形成一个有 效的专题 合格 立意基本清楚， 一定的可操作性， 基本符合新闻特 性、设计创意有 效，组织分类标 准，选材一般， 材料有限 优秀 立意清楚、可操 作性强、符合新 闻特性、材料齐 全、设计创意明 确、组织分类准 确，引题选材出 色 网络专题的策划与制作 2 选择、组织专题材料 与传统媒体互通 编辑、加工 自采稿件 基层投稿 信息共享 具体 操作 运用搜索引擎 搜索关键词 引擎搜索 约稿 向专家、学者或创 作者 约稿，体现 独家性 网络专题的内容策划 2 选择、组织专题材料 要围绕专题的主题进行 2. 选择和组织 专题材料 （注意事项） 要与网站形象、功能、目标受众等定位一致 要对信息进行编辑和加工 网络专题的内容策划 3 专题的栏目设置 时间 1 2 5 专题栏目设置思路 意见态度 空间 3 人物 4 社会环境 网络专题的内容策划 3 专题的栏目设置 栏目分类要 界 定 清 楚 1 挑选什么样的内容，如何组织这些 材料，能够使得专题内容丰满、厚 实，能够让受众满意，也能够最全 面地反映事件、问题和现象等，成 为专题策划中必须要考虑的问题。 2 5 专题栏目设置思路 要确定好各栏 目的形式与名 称 设置栏目要注 意动静结合 3 要体现网站特 色和独创性 4 栏目的设置尽 可能全面 网络专题的策划与制作 3 专题的栏目设置 编者按语 要闻栏 小常识栏 受众调查、服务栏 主要类型 评论栏 背景栏 网络专题的策划与制作 3 专题的栏目设置 文字 图片 Flash 互动：受众调查 受众评论 信息手段 音频 视频 网络专题的策划与制作 4 专题版式架构、页面设计 专题版式设计版式 ：与网站的传播风格一致、方便传播 专题版面结构设计的操作 网络专题的策划与制作 4 专题版式架构、页面设计 色彩 标准字体 标准字版 遵从目标观众群 的文化背景 根据网站和网站 频道自身的定位 决定 对字体的衬托和 突出 网络专题的策划与制作 4 专题版式架构、页面设计 Dreamweaver中实现 PS的切片与输出 Photoshop绘图 设计版面 画出导航条、图标 处理专题所需的图 片 切片是最直白的网 页布局方法。要想 网页要做成什么样 子？把所想的画出 来就行了。 将PS中绘制出的版 式和各种素材导入 到Dreamweaver搭 建网站框架中 网络专题的策划与制作 版面设计实例 制作如下网页版面效果 网络专题的策划与制作 制作步骤: 制作页面主题图标1.在PS中新建文件 778×500 像素 2.输入文字“Bient Ciemnu”,分别着上不同的蓝色.双击文字图层添 加投影和描边 图层样式,投影的不透明度为 44%,描边颜色为白色,大 小为 2 像素,参数设置如左图和右图所示.效果如下图所示 网络专题的策划与制作 3.制作主题文字之下的透明几何形状.选择钢笔工具,并选择路径绘图 方式绘制如下图所示的几何形状. 网络专题的策划与制作 4.选择路径面板中的“将路径作为选区载入”按钮,如图所示，把路 径转为选区. 网络专题的策划与制作 5.在文字图层之上新建一图层,选择画笔工具,画笔的直径为 170 像 素,硬度为 0%, 前景色为蓝色.使用设置好的画笔边缘在选区上单击, 便可得到如下效果图 网络专题的策划与制作 6.导航条的制作.选择矩形工具,选上形状图层绘图方式,绘制一长条 矩形.双击该 形状图层,添加渐变叠加图层样式,颜色为一系列深浅相 差不大的蓝色进行渐变,如下图 然后再添加深蓝色的描边,描边大小为 1 像素.效果如下图 网络专题的策划与制作 7.绘制导航条的分隔线：新建图层,用 1 像素的画笔工具选用比导航 条颜色稍深的直 线,再新图层,再用 1 像素画笔选用比导航条颜色稍 浅的直线.然后将两直线偏移 1 像素并 排放置,如图所示 合并这两条直线的图层为一个层,复制若干层,生成若干条分隔直线，效 果如下图 网络专题的策划与制作 8.导航条文字：根据栏目的设置输入文字，比如“图片新闻”,“最新 动态”,“要闻”之类，并设置字体为"宋体",字号为 12 点,抗据齿为 无,如图 网络专题的策划与制作 9.双击文字图层,可设置导航文字描边图层样式,参数设置如下图 网络专题的策划与制作 10.绘制左右两个版块：选择圆角矩形,绘图方式为形状图层方式,半 径为 8 像素,如下图 网络专题的策划与制作 分别绘制这两块版块,并用渐变叠加图层样式,给它们添加渐变色 网络专题的策划与制作 然后再加上描边图层样式 网络专题的策划与制作 效果图 网络专题的策划与制作 11.右边版块的格子填充：首先自定义图案,新建一文件 30×30 像素, 用白色 1 像素大小的线条填充最上面和最左边部分, 网络专题的策划与制作 12.按住 Ctrl 键同时单击右边版块的图层,得到此版块的选区,新建 一图层,选择菜 单“编辑-填充”,选择自己定义的图案进行填充,并 降低此图层的透明度. 网络专题的策划与制作 13.格子上的图案,方法与第 3,4,5 步一样,用钢笔工具绘制几何形状, 并把路径转 为选区,再用硬度为 0%的画笔进行喷绘. 14.最后用前面的方法,把其它形状绘制完 网络专题的策划与制作 图片效果 网络专题的策划与制作 Photoshop 切片：在 PS 中通过切片操作,可以在图像保存为网页时, 将每一个切片作为一个独立的文件进行存储.当保存的网页格式在 Dreamweaver 中打开时,Photoshop 中生成的图像切片就变成 Dreamweaver 中表格中的各个单元格. 在 Photoshop 中可以采用多 种方法对图像进行切片,包括使用切片工具创建切片,基于参考线创建 切片和基于图层创建切片等等.下图就是切片工具和切片选择工具. 网络专题的策划与制作 切片的形状都是矩形的, 只要动手一切就有主切片和辅助切片的生成, 切片生成后可以使用切片选择工具进行选择,并设置切片属性,如名 称,URL,大小等,也可移动切片的位置和重新定义切片.切片选择工具 和切片选项面板如下图所示 网络专题的策划与制作 切片是按网页的结构和图片的特点进行切片 切片的大小和位置可以通过切片选项来进行调整 网络专题的策划与制作 Photoshop 切片与 Dreamweaver 的结合：这里我们把前面那个简单的版面设 计实例进行切片操作,然后导入到 Dreamweaver中进行相关的操作制作一个静 态网页. 制作步骤: 1.将页面中涉及到要链接的文字,标题和要插入 flash 及其它部 分进行切割.选择切片工具,按各个区域进行裁切,效果如图 网络专题的策划与制作 2.选择PS菜单“文件-存储为 web 所用格式”命令,弹出的对话框。 在默认情况下,所有切片生成的文件都是 Gif 格式,但是如果某个切 片中的图像是照片或要求颜色数量非常高的时候,可在对话框中使用 切片选择工具,选择这个切片,并设置此切片的格式为 JPG 或 PNG.设 置完成后,单击"存储"按钮,将网页存储在自己所需要的地方即可. 网络专题的策划与制作 3.输出来之后,生成了 Image 文件夹及一个 html 格式网页文件.如 下图所示. 其中 Image 文件夹中都是生成的一个个的切片文件 网络专题的策划与制作 4.将导出的 html 格式文件导入到 Dreamweaver 中进行设置：选择其中的导 航标题,然后选择链接即可. 网络专题的策划与制作 5.如要在中间的右边版块上插入 Flash,而且原来的图像不能去掉,方 法是将图像设置为背景图片:先将原切片图像的大小记住,并删除它, 然后选择此单元格,按照刚才记住的 原切片图像的大小设置此单元格 的大小, 然后选择属性栏中的设置背景图片, 把刚刚删除的 图像重 新设置为背景图片. 网络专题的策划与制作 6、选中此单元格, 选择菜单中的 "插入-媒体-Flash" 如图所示. , 即可插入 Flash 在此背景图片上. 网络专题的策划与制作 7、设置 Flash 的背景透明.选中插入的 Flash,并选择属性中的参数 面板,设置参数如下图所示 . 网络专题的策划与制作 8、最后的效果如图 网络专题的策划与制作 第三、网络专题的发布 1 填充材料 2 专题的测试 3 专题的发布 网络专题的策划与制作 1 填充材料 上传稿件 更新栏目树 创建专题模版 建立专题节点 网络专题的策划与制作 在“民革专题”节点下，点击右键选择“新建子栏目”，填写专题名 称； 网络专题的策划与制作 再在该专题节点下，点击右键选择“新建子栏目”填写专题各栏目名 称 网络专题的策划与制作 创建完目录后，选择“扩展信息”，选择“页面模版”和“文章模板” （就是我们在页面设计中完成的），点击“更新”即可 网络专题的策划与制作 专题创建完后，右键点击刚刚建好的专题，选“更新栏目树”，返回发布中 心后，点击“刷新”按钮就可以看到新建的专题了 最后在各栏目下按照平时的发稿流程上传稿件。 网络专题的策划与制作 2 专题的测试 • 内容测试 • 浏览器兼容性 测试 • SEO优化 网络专题的策划与制作 3 专题的发布 经过测试的专题就可以发布了！ 网络专题的策划与制作 第四、网络专题的维护与跟进 专题的跟进维护 内容维护： 栏目维护： 及时更新新闻、事 件动态等 栏目调整，当增则 增，当减则减 民革重庆市委 虞佳佳 2012.6