第一章DW站点建立

1第一部分网络新闻实务之一网站建设第一章网站规划与网页设计第一节站点建设教学目的：站点规划与站点的创建，是为网页制作前必须进行的设计，以便以后对整个网站维护与管理。是极其重要前提。时间安排：3课时教学重点：站点建设教学方式：讲授+指导教学过程：一、网站的概述1、网页与网站网站的英文名称是website，一般人称之为站点，指由一系列网页文件集合而成，通过网络服务器发布，为访问者提供服务和信息的平台。用户可以通过浏览器来访问这些网页，以获取网站所提供的服务。猜一猜游戏：请说出网站名称，并思考域名的差异(新浪网)(百度网)(中央人民政府)（中国红十字会官网）(河南大学)等等。2、浏览网页的工具-浏览器浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。还有火狐Firefox、360安全浏览器、遨游、腾讯TT、阿里旗下的UC浏览器，百度的极速浏览器等等。1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。3、认识网页的组成元素(打开爱奇艺首页介绍:http:/)网页标题，logo，导航，版块，版权区，首屏，文本，图像，视频，动画，超链接等二、初识DreamweaverCS51、制作网站的流程规划网站类型及主题搜集资料素材使用软件进行网页制作测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。Dream：梦想weaver：织布者，织工早期是美国著名的多媒体软件开发商Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，其中FALSH是用来制作网页动画，FIREWORKS是用来网页图像制作，而DW是用于网页开发,它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发2工具，到目前为止，全世界范围超过90%的专业网页设计师都在使用这款软件来开发网页，编织他们的梦想。前两年Macromedia公司被Adobe公司收购（PS,AU，INDESIAN），DWCS6是目前推出的最新版本，而今天我们用DWCS5来编织我们的梦想。3、Dreamweaver的用户界面●菜单栏：包含10类主菜单，涵盖了几乎DW所有的功能。●插入栏，包含很多可以插入的按钮。●文档工具栏：提供各种文档窗口的视图（如“设计”视图和“代码”视图）●文档窗口：显示当前创建和编辑的文档。●属性面板：用于查看和设置属性●面板组：是各种面板的组合，不需要的可以暂时关闭。三、站点规划与创建1.规划站点DW是一个创建站点和管理站点工具，因为使用它不仅可以制作精美WEB网页，而且可以创建完整的WEB站点。为了达到最好效果，在设计网页之前，首先都必须对站点进行设计和规划。这个规划包括站点结构和导航系统的规划，网页模板和库的使用等等。站点规划好之后，就可以根据规划绘制出一个网站结构草图，以便于有一个清晰的思路。美食美客网站版块3如何创建站点。在正式开始制作网页之前呢，最好先定义一个新网站。这样做目的是可以利用站点窗口对站点文件进行管理。也可以尽可能减少一些错误出现。比如路径出错或者链接出错。（特别是对于我们这些初学者，更要注意条理性与结构性，一个文件放这里，另外一放那里。或者所有文件都放在同一文件夹里，这样显得很乱，而且容易出错,所以创建站点是非常必要的。）2.创建本地站点所谓本地站点就是本地硬盘中存放远程网站所有文档的地方（文件夹）。建立网站的通常做法是：在本地硬盘建立一文件夹用来存放网站的所有文件，以后就直接在这个文件夹中创建和编辑文档，那么等待网页设计和测试好之后，再把他们拷贝到网站上提供给浏览者来浏览。简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。通过这个文件夹（站点），对网站进行管理，有次序，一目了然。(观看新闻编辑和非物质文化遗产站点或者裕科电子站点文件夹)方法一：直接在硬盘下创建在本地硬盘上（C、D、E、F盘下）建立一个用来存放站点的文件夹，并且命名，名称用字母表示。这个文件夹就是本地站点的根目录。这个站点可以是空的，也可以是非空的。方法二：在软件下创建站点○1【站点】→【新建站点】→站点名称（为你的网站建立一个名字，这个名字仅仅起到识别的作用，不会在浏览器上显示，与网站发布后真正的名字无关）→点击本地站点文件夹框右边的文件夹标志，在你的硬盘上(CDEF）下，新建文件夹，命名，（即设置站点在本地硬盘的位置，在硬盘上选择一个目录来存放站点的文件目录）（提示：机房电脑最好选择E或F盘，因为C、D盘是受到保护，不开放）→选择→打开→保存4注意：站点文件夹的名称必须是小写英文字母，不允许有空格和汉字，比如：F:\hylwebs\如图：○2点击保存，本地站定义完成，Dreamweaver会自动导入站点的所有文件及信息。您可以在站点视窗中的本地站点窗口中查看。3.站点编辑○1创建站点下网页文件步骤一：打开站点，在站点下建立文件。右键单击站点文件夹→新建文件→untitled.htm（给这个无标题页面起个名字，一般情况下首页的名字是“index.html”。浏览器打开某个网站，一般是先找“index.html”，再找“index.htm”这个顺序是服务器决定的，而且绝大多数服务器都遵循这个原则，而且一般用户是无权修改这种设定。所以在制作网站的时候，我们最好把网站的第一页命名为index.html或index.htm.（当网站上线后，首页index将会被申请的域名替代）步骤二：同上分别建立不同的页面。比如：interest.htm;photo.html;resume.htm.,并分别回到编辑区域给标题命名与保存。步骤三：分别双击各个网页文件，回到编辑区域，在标题栏里输入名字：我的主页……然后保存（ctrl+s）.注意：①页面的名称必须是小写的英文字母。②htm是文件的后缀，也就是这网页文件的类型说明，表示这个网页是静态的htm文件，也可以用后缀html表示，以后大家一定记住将网页的后缀改为htm或html，否则上传到服务器上，浏览器就无法打开上传的网页。○2创建站点下的文件夹步骤：右键单击站点文件夹→新建文件夹。比如：images,flash,videos等,用来存放网站上的5图片动画等资料。提示：文件夹与文件的名称不允许出现汉字和标点符号○3文件、文件夹和站点编辑剪切、粘贴、复制、删除、重命名文件或文件夹编辑站点复制站点删除站点第二节网页基本编辑1.编辑页面标题双击index页面，进入编辑区域。在标题区输入标题，Ctrl+S或者在文件下保存，F12预览效果在IE浏览器下预览：2.编辑页面属性打开窗口下属性面板。（在网页编辑中，经常打开是属性面板与站点文件夹）------修改——页面属性——选择页面背景的图片与颜色等——确定。63.页面中文本的编排与设置（1）编辑字体列表DWCS5中默认提供中英文字体，其中中文字体只有宋体和新宋体，显然不能满足精美文本的外观设置，需要系统内其它字体，就需要编辑字体列表。属性面板→单击css按钮→字体下拉列表→编辑字体列表→在可用字体列表选择→单击按钮添加字体→确定。如果需要添加更多字体单击对话框左上＋按钮继续添加即可，点＋号一次只能添加一种字体关于字体：注意：别人的系统上未必装有与你相同的字体，所以不要将一些特殊的字体加到列表中使用，如果真需要特殊字体，必须做成图片之后再使用。（民生学院主页文字显示）（2）文本换行、位置与格式在页面输入文字，系统默认的是宋体。比如：我的主页我的兴趣我的相册我的简历（竖排）关于换行：①
自动换行：在输入文字时，若某一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。②
利用“Enter”键换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行即单倍距离，可以按“Shift+Enter”键。7关于位置：在页面的位置，选中对象，【格式】---对齐，选择需要的位置。如下图：关于格式：选中文字---【格式】----【段落格式】选择（3）空格实现空格键无法实现空格，文字在页面上的位置只有左中右，如果需要输入多个连续的空格可以通过以下几种方法来实现：○1菜单“插入记录”-HTML-特殊字符-不换行空格○2直接按“Ctrl+Shift+Space”组合键○3设置软件，【编辑】----【首选参数】---允许连续空格○4如要实现空格输入法切换到全角状态，按空格键输入一（4）文本大小与颜色（css技术章节细讲）CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。Step1：属性面板→单击css按钮→选中“我的主页”文字→在属性面板里展开大小下拉列表→选择需要的字体大小参数（本案例选择字体大小为18px）Step2：随之打开【新建CSS规则】对话框，在【选择器名称】下拉列表框中输入样式名称（不允许用b,p,td,等网页标签,不允许使用汉字标点符号等，命名时候必须是字母开头），比如zi1，zi2或text1,text2（必须把输入法切换到英文状态下输入字母和数字）,最后【确定】如下图8效果图：Step3：选中“我的主页”文字，在属性面板修改字体和颜色。如下图Step4：如果其他文字要求与“我的主页”文字一致的话，可以套用zi1的样式。分别选择我的兴趣等文字，在CSS属性面板【目标规则】下拉列表中选择zi1即可实现。如下图：9最终效果图：Step5：如果文字需要不同的样式，则根据上面的“我的主页”设置步骤为其他文本设置大小与颜色。图例：共有zi1zi2zi3zi4四种样式Step6：如何删除文字的样式？选择文本，打开【目标规则】下拉列表，选择删除类就回到文字最初的状态。10效果图：提示：由于DWCS5全面支持css规则样式的应用，因此，通过【属性】面板设置文本外观属性后，将自动弹出【新建CSS规则】对话框，要求命名文本属性CSS，如此，后续其他文本属性设置可通过套用已建CSS规则，快速设置相同文本外观。3.图片的插入与应用使用图片的原则：在保证画质的前提下尽可能使图片的数据量小一些，这样有利用户快速的浏览我们的网页。.GIF格式特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色。用途：大量用于网站的图标Logo、广告条Banner及网页背景图像。但由于受到颜色的显示，不适合用于照片级的网页图像。.JPEG格式特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。用途：通常用于显示照片等颜色丰富的精美图像。.PNG格式特点：是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特点，又具有JPEG处理精美图像的优点。用途：常用于制作网页效果图○1插入图像：将插入点放到文档中要插入对象的位置上。插入→图像或者插入面板→常用→图像，这时就出现一个对话框，要求你从磁盘上选择对象文件。选择要插入的图像文件，同时在对话框里设置url的类型。此时出现一个对话框：你愿意将该文件复制到你的根文件夹里吗？点确定。保存到站点文件夹里的images文件夹里。在文档里出现插入的图片。○2设置属性：图像→设置的名称；宽、高→可缩小和放大图片的显示尺寸；源文件→图片的路径和名称。替代→图像的说明文字；边框→图片是否要加边框○3图文混排：垂直边距和水平边距→图片四周突出的