搜索
第一课：网页设计基础一、网站的概述1、网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。举例：www.sohu.com(搜狐网)www.baidu.com(百度网)www.youku.com(优酷网)等等。2、浏览网页的工具-浏览器浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式http://sports.sohu.com/nba.shtml2）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。3、认识网页的组成元素二、初识Dreamweaver1、制作网站的流程规划网站类型及主题搜集资料素材使用软件进行网页制作测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。Dream：梦想weaver：织布者，织工早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集网页制作和管理网站于一身的所见即所得网页编辑器，它是网页标题文本LOGO视频图片表单超级链接导航栏第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DMCS5是最新推出的版本。【操作演示】启动Dreamweaver实例：制作一个简单页面(两种方法对照)三、Dreamweaver的用户界面提高：工作窗口的设置、保存、恢复【操作演示】关闭Dreamweaver四、网页文件的基本操作基本网页的文件类型为HTML文档，保存的文件扩展名为“.html”1.创建网页文档（HTML文档）•文件→新建→新建文档→常规→类别→基本页2.保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存）•文件→保存（或Ctrl+S)•文件→另存为•文件→保存全部注意：1、网页文件要用英文或数字进行命名，莫用中文。2、基本网页的扩展名为.html3.打开已建的HTML文档•文件→打开•右击文件，选择Dreamweaver打开。•拖动到Dreamweaver4.关闭文件•文件→关闭还未保存的网页（*），关闭时会提示你是否保存。其他操作：1）多个编辑文件的切换选择2）预览编辑中的网页(快捷键F12)菜单栏插入面板文档编辑窗口浮动面板文档工具栏属性面板状态栏五、设置网页外观属性网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。六、创建站点1、什么是站点Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器，测试网站。站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。2、创建站点《我的足球网》站点根目录为D：//jcwww七、设置默认图像文件夹八、管理站点1、在“文件”面板中实现以下操作选择编辑网页文件创建文件或文件夹剪切、粘贴、复制、删除、重命名文件或文件夹2、站点管理编辑站点复制站点删除站点第二课：制作网页的基本操作一、在网页中添加文本1）添加普通文本方法：A、直接输入（1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的起始位置。（2）选择适当的输入法输入文字B、复制和粘贴C、从其他文件导入2）添加空格输入法切换到半角状态，按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：（1）菜单“插入记录”-HTML-特殊字符-不换行空格（2）直接按“Ctrl+Shift+Space”组合键（3）设置软件首选参数-允许连续空格3）添加日期时间在文档的最后一行插入形式如“Friday,2006-07-149:47AM”所示的日期，且要求每次保存网页时自动更新日期。具体操作过程如下：（1）切换到“常用”插入工具栏。（2）按Enter键，添加一空行，将光标放置在空行与正文对齐的最左端。（3）单击菜单【插入】→【日期】，或者单击“常用”插入栏的【日期】按钮，将弹出“插入日期”对话框。（4）在“插入日期”对话框中，“星期格式”下拉表框中选取“Thursday,”，“日期格式”选取“1974-03-07”，在“时间格式”下拉列表框选取“10:18PM”，选中“储存时自动更新”复选框，然后单击【确定】按钮，最后生成的日期效果为“Friday,2006-07-149:47AM”的形式。（5）保存插入的日期，且浏览网页。4)插入水平线（1）将“插入”工具栏切换到“HTML”类型。（2）将光标放置到标题最后一个字符的右边。（3）单击HTML插入工具栏的“水平线”按钮，即可向网页中标题与正文之间插入一条水平线。5）添加特殊字符（1）通过菜单【插入】→【HTML】→【特殊字符】插入先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】→【HTML】→【特殊字符】，在【特殊字符】的级联菜单中选择需要插入的特殊字符。（2）通过“文本”插入工具栏插入先在Dreamweavercs5的“插入”工具栏中选择“文本”，显示“文本”插入工具栏。将光标放置到需要插入特殊字符的位置，然后单击工具栏中的“文本”，单击所需插入的特殊字符即可插入到网页中。二、编辑文本1）网页中输入的文本可以像Word文档一样，进行编辑。1.拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。2.按BackSpace键或Delete键实现删除文本操作。3.实现复制、剪切、粘贴等操作。4.实现查找与替换操作。5.实现撤消或重做操作。2）设置文本格式字体(通用性问题)、大小、颜色、风格注：CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。3）分段与换行分段按Enter回车键（隔一行）、换行按Shift+Enter（不分段）4）设置段落格式a.对齐方式b.列表编号列表可以将文本段落用符号或序号标注起来，有两种类型：项目列表和编号列表。设置项目列表的操作过程如下:（1）选择要添加列表的若干文本段落（2）单击属性检查器中的“项目列表”按钮或“编号列表”按钮c.缩进5)使用Html段落样式三、在网页中添加图片1）网页中常用的图片格式使用图片的原则：在保证画质的前提下尽可能使图片的数据量小一些，这样有利用户快速的浏览我们的网页。.GIF格式特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色。用途：大量用于网站的图标Logo、广告条Banner及网页背景图像。但由于受到颜色的显示，不适合用于照片级的网页图像。.JPEG格式特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。用途：通常用于显示照片等颜色丰富的精美图像。.PNG格式特点：是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特点，又具有JPEG处理精美图像的优点。用途：常用于制作网页效果图。2）如何获取网页图像网上下载（我要素材网www.51scw.net）、购买素材光盘、使用图像制作软件创作3）插入图像插入→图像插入面板→常用→图像直接将图像文件拖入编辑区注意：在插入图像前应先将网页文件已保存，从而使所插图像引用正确。图像插入网页后，应确定图像文件已存入站点，否则在下次打开网页时，会出现看不到图像的情况。技巧：图像的位置、替换文字4）设置图像的基本属性图像→设置的名称宽、高→可缩小和放大图片的显示尺寸。源文件→图片的路径和名称。替代→图像的说明文字边框→图片是否要加边框四、图文混排垂直边距和水平边距→图片四周突出的尺寸对齐→在一行中图形和文本的对齐方式五、编辑图像裁切锐化对比度/亮度重新采样：当图片的宽、高缩小后，重新生成更小的图片。优化（为图片瘦身）六、鼠标经过更换图片特效1）概念：是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一张图像。2）步骤：a将光标放到要插入图像的地方。b单击菜单“插入记录”----“图像对象”--“鼠标经过图像”，打开“插入鼠标经过图像对话框”。c设置完成，单击确定。第三章、创建超级链接一、了解超链接1）什么是超链接所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。二、创建超链接1)到网站内页面的超链接――内部链接（网站内部页面之间创建相互链接关系）步骤1选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件步骤2从“目标”下拉菜单中，选择文档的打开位置。_self：会在当前网页所在的窗口或框架中打开（默认方式）。_blank:每个链接会创建一下新的窗口。_new：会在同一个刚创建的窗口中打开。_parent：如果是嵌套的框架，则在父框架中打开。_top：会在完整的浏览器窗口中打开。2)到网站外页面的超链接――外部链接步骤1选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如http://www.51zxw.net步骤2然后在“目标”下拉菜单中设置这个链接的目标窗口。内部链接这种链接的目标点是同个网站中的其他网页（文档），称为内部链接外部链接这种链接的目标点是不同站点或本站点以外的网页（文档），称为外部链接。注意：链接中使用完整的URL地址如：http://www.51zxw.nethttp://（是浏览网页网络协议）www.51zxw.net（域名）3)链接样式链接颜色：指定应用于链接文字的颜色已访问链接：指定链接被访问过的颜色变换图像链接：指定当鼠标位于链接上时的颜色。活动链接：指定但鼠标在链接上点击时的颜色。4)到网页某一特定位置的超链接――锚点链接锚点链接这种链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到当前网页中的某一指定位置上，也可以跳转到其他网页中的某一指定位置上。步骤1创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。步骤2属性面板的链接栏中直接输入“#锚点名”注意：1）如果链接的目标锚点标记在当前页面即输入#锚点名；2）如果链接的目标锚点标记在其他网页，即要输入目标网页的地址和名称，然后再输入“#锚点名”5)其他一些链接。A.创建E-mail电子邮件链接Email链接单击这种链接，可以启动电子邮件程序（例如：Offiece办公软件中的Outlook）书写邮件，并发送到指定的地址。步骤1选中文本和图像步骤2插入栏｜常用｜电子邮件链接｜输入邮件地址或在属性面板的链接栏中直接输入“mailto:邮件地址”B.创建下载链接：当被链接的文件是exe文件或zip、rar类型的文件时，浏览器无法直接打开，便会提示文件会被下载，这就是网上下载的方法。C.创建空链接：空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为。方法：选中要制作空链接的对象，在链接文本框中直接输入＃。在一般站点首页的导航栏中的首页链接，就可以是一个空链接三、图像热区链接图像热区指在一幅图片上创建多个区域（热点），并可可以点击触发。当用户单击某个热点时，会发生某种链接或行为。步骤：1.选中图像2.在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。3.为绘制的每一个热区设置不同的链接地址和替代文字。四、创建图像导航条使用鼠标经过变换图像的特效，创建图像导航条五、创建跳转菜单跳转菜单是网页中的弹出式菜单，可以创建任何文件类型的链接。步骤：1、