网站建设与网页设计

网站建设与网页设计第1章网站建设1.1网站与网页基础知识1．网页实际上是一个运行在计算机中的文件，网页经过网址（URL）来识别与存取。2．全球网全球网(WordWideWeb即万维网，缩写，也称Web)，是建立在因特网上的全球性的、分布式、交互式、动态多平台的图形网络信息服务系统。它以客户机/服务器的方式进行工作的。其软件主要是由服务器端软件和客户端软件两部分组成。存取的软件叫浏览器。Web结构是由Web浏览器、服务器、Web网页、统一资源定位器组成。3．超文本超文本是与其他数据有关联的数据。在全球网的语言里，超文本的文件是由一些数据组成，而这些数据又与其他数据关联，用于读取超文本文件的工具称为浏览器。4．超链接超链接是带下划线或边框，内嵌Web地址的文字或图形，单击超链接可以跳转到特定的Web节点上的某一页。5．统一资源定位器URL（UniformResourceLocator）,”资源”是指在网络上所能获得的文字、图象、声音和动画等资料的总称，也就是各种类型的文件。要获取这些文件必须通过两种不同的协议，一是链接网页的HTTP（超文本传输协议），用http://开始；二是链接服务器的FTP（文件传输协议），用ftp://开始。浏览器运用统一资源定位器技术，确定被访问的网页。如：．浏览器浏览器是专用于浏览网页、检索和查找网上信息的工具。7．服务器服务器是运行服务器程序的计算机8．Web网页Web网页是由HTML(超文本标识语言)编写的。9．主页网页主索引页，是网站引导访问重点内容的向导页，一般访问网站的第一页。10．网页一般布局如图：1.2网站建设规划1．确定网站规划目的科研推广网站2．可行性分析成本、费用、收益。3．网站规划1.3网站设计原则1．符合人的阅读习惯文字大小、字体、颜色2．网站导航要清晰文字、图片、按钮3．网页风格要统一文字、图片、背景颜色，“很专业”4．动静要搭配合理5．突出新内容1.4定位网站形象1．设计网站标志一般用网站名字的英文制作2．设计网站色彩主色调、深浅搭配、背景不要使用刺眼的颜色3．保持网站的颜色统一第2章Dreamweaver应用2.1熟悉Dreamweaver的工作环境DreamweaverMX2004是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。网站首页科技产业成果展示成果推广蔬果类咨询作物类留言专家介绍畜牧类信函在线解答2.1.1Dreamweaver的工作界面1.标题栏：包含Dreamweaver的版本名称、网页标题、网页保存的位置及名称。2.菜单栏：提供所有菜单命令，各面板上的操作按钮均有相应的菜单命令与之对应。3.文档窗口：文档窗口是编排网页的区域，显示当前所编辑的文档内容，其显示与在浏览器中的结果近似。用户可以在文档窗口中输入文本、插入图像、音频及视频等文件内容。4.常用面板：Dreamweaver提供了大量的面板，用户可以通过面板来设计制作页面，面板因其直观、简便的操作方式，深受使用者的好评。5．HTML代码窗口：显示网页后台代码。2.1.2新建、打开和保存网页1．新建网页选择菜单栏中的【文件】-【新建】命令，系统将弹出“新建文档”对话框，单击【创建】按钮，便可以创建该页面。2．打开网页在文档窗口中打开已有的网页，选择菜单栏中的【文件】-【打开】命令，系统弹出“打开”对话框，浏览选择需要打开的文档，单击【打开】按钮，打开选择的该网页。3．保存网页新建的文档必须保存，选择菜单栏中的【文件】-【保存】命令，系统自动打开“另存为”对话框，选择保存路径，输入文件名，单击【保存】按钮，则该页被保存。网站的首页默认名字一般为index.htm。如果不是新建文档，则系统自动执行文件保存操作。2.2网页元素2.2.1文本文本是网页的核心内容，Dreamweaver允许通过以下三种方式在网页中添加文本。（1）直接将文本输入到页面它的操作方法十分简单，只需要将光标定位到编辑窗口中要输入文字的地方，然后直接输入文字即可。（2）从其他文档复制和粘贴文本在其它编辑器中编辑文本，选择菜单栏中的【编辑】-【复制】命令，将光标定位到编辑窗口中要输入文字的地方，选择菜单栏中的【编辑】-【粘贴】命令，即可将文字复制到页面。（3）从其它应用程序中拖放文本将光标定位到编辑窗口中要输入文字的地方，选择菜单栏中的【文件】-【导入】-【Word文档】/【Excel文档】命令，系统将弹出“打开”对话框，浏览选取要添加的文件，选择【打开】按钮，Word文档或Excel文档的内容就会出现在页面中。在页面中插入文字后，选中该文字，在属性面板修饰文字。例2-1制作一个网页，测试页面属性对页面效果的影响，效果如图所示。具体的制作方法如下：①单击菜单栏中的【文件】-【新建】命令，打开“新建文档”对话框，选择“常规面板”中的【基本页】-【HTML】命令，单击【创建】按钮，创建一个基本页面。②在文档标题中输入“测试页面属性网页”。③单击属性窗口中【页面属性】按钮，打开“页面属性”对话框，在“页面字体”列表中选择“宋体”。提示：如果“页面字体”列表中不存在某种字体，选择“编辑字体列表”添加字体。④单击“大小”右侧的下拉按钮，选择24像素。⑤单击“文本颜色”右侧下拉按钮，选取红色。⑥在“左边距”、“右边距”、“上边距”、“下边距”中均输入“0”。⑦在编辑页面中任意输入文本，注意观察文本的颜色、大小及出现的位置，以确定页面属性设定各参数的作用。⑧单击菜单栏中的【文件】-【保存】命令，浏览选取保存位置，输入文件名称“测试页面属性网页”，单击【确定】按钮，保存页面。⑨单击菜单栏中的【文件】-【在浏览器中预览】-【IEexplore】命令或按F12键，在浏览器中预览页面。2.2.2图片、图像图像既可以作为网页对象也可以作为网页背景插入。（1）直接插入图像将光标定位到要插入图像的位置，选择菜单栏中的【插入】-【图像】命令，或常用工具栏中的【图像】按钮，打开“选择图像源文件”对话框，浏览选取图像。（2）插入背景图像单击属性面板中的【页面属性】按钮，打开“页面属性”对话框，单击“背景图像”右侧的“浏览”按钮，打开“选择图像源文件”对话框，浏览选取所需图像，单击【确定】按钮，插入背景图像。（3）创建图像热点在选定的图像中，用图像属性面板上的热点工具。属性面板如图：目标（R）：[_blank]在一个新的浏览器窗口链接文件[_parent]在父辈浏览器窗口打开文件[_self]默认值[_top]在整个浏览器窗口中加载链接文件，删除所有的框架例2_2网页背景图片具体的制作方法如下：（1）单击菜单栏中的【文件】-【新建】命令，打开“新建文档”对话框，选择“常规面板”中的【基本页】-【HTML】命令，单击【创建】按钮，创建一个基本页面。（2）单击属性面板中的【页面属性】按钮，打开“页面属性”对话框，单击“背景图像”右侧的“浏览”按钮，打开“选择图像源文件”对话框，浏览选取所需图像，单击【确定】按钮，插入背景图像。（3）单击菜单栏中的【文件】-【保存】命令，浏览选取保存位置，输入文件名称“背景图像”，单击【确定】按钮，保存页面。（4）按F12键，在浏览器中预览页面。2.3导行条的使用1．插入导行条单击菜单【插入】-【图像对象】-【导航条】命令设置导行条的图像、鼠标经过时的图像、鼠标按下时的图像2．编辑导行条单击菜单【修改】-【导行条】命令3．例2_3制作导航按钮，如图所示具体操作步骤：（1）准备10个导航图片，5对两两不同色。（2）新建一个网页，在网页中输入文字“网站建设与网页制作”，并在属性面板中，设置文字属性。（3）单击菜单【插入】-【图像对象】-【导航条】命令，在弹出对话框中依次填写如图：（4）单击【确定】按钮，按F12键，在浏览器中预览页面。2.4创建链接1．创建链接选中链接的文本或图片单击菜单【插入】-【超级链接】或2．使用属性面板创建链接单击属性面板中的“链接”后面的文件夹图标，打开“选择文件”对话框，浏览选取要链接的文件后，单击【确定】按钮，便可创建该超级链接。如图所示。3．创建E-mail链接单击菜单【插入】-【电子邮件链接】或工具栏单击电子邮件链接图标4．修改链接：在修改菜单中有一系列的修改链接操作2.5表格应用1．插入表格（参照word）单击菜单【插入】-【表格】2．设置表格属性在表格属性面板里可以对表格的内容进行各项修改3．拆分单元格单击菜单【修改】-【表格】-【拆分单元格】4．合并单元格单击菜单【修改】-【表格】-【合并单元格】5．表格格式化单击菜单【命令】-【格式化表格】6．表格嵌套选中单元格单击菜单【插入】-【表格】例2_4在网页中插入表格、文本、图像对象，并进行简单的属性设置。网页效果如图所示。“在页面中插入对象网页”效果图具体的制作步骤如下：（1）单击菜单栏中的【文件】-【新建】命令，打开“新建文档”对话框，选择“常规面板”中的【基本页】-【HTML】命令，单击【创建】按钮，创建一个基本页面。（2）将光标置于页面中，单击菜单栏中的【插入】-【表格】命令，弹出“表格”对话框，设置“行数”、“列数”均为2，“表格宽度”为500像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”。设置完毕之后单击【确定】按钮插入表格，此时页面中出现一个2行2列的表格。（3）将光标置于第1行第1列单元格中，按住鼠标左键向右拖动至第1行第2列选中单元格，单击鼠标右键，在弹出的下拉菜单中选择【表格】-【合并单元格】命令，此时第1行的两列单元格就合并为1列了。（4）将光标置于第1行单元格中，在“属性”面板中，将“背景颜色”设置为“#FF0000”，此时第1行单元格中出现红色背景。（5）将光标置于红色背景上，输入文字“前沿电脑培训学校”并选中，在“属性”面板中，将“大小”设置为24，字体加粗，颜色设置为“#FFFF00”，“水平”设置为“居中”。（6）将光标置于第1行单元格中，在“属性”面板中“高”设置为80，“垂直”设置为“居中”，此时上述文本将出现在单元格正中。（7）将光标置于第2行第1列单元格中，在“属性”面板中将“背景颜色”设置为“#FF0000”，“宽”设置为90，单元格变成红色背景。（8）将光标置于第2行第2列单元格中，在“属性”面板中将“背景颜色”设置为“#FFFFCC”，“垂直”设置为“顶端”。（9）将光标置于第2行第2列单元格中，单击菜单栏中的【插入】-【图像】命令，弹出“选择图像源文件”对话框，浏览选取图片，单击【确定】按钮，在页面插入一个图片。选中图片，在属性面板中将“宽”设置为135，“高”设置为100，“垂直边距”设置为15，“水平边距”设置为10，“对齐”设置为“右对齐”。（10）单击鼠标左键，在第2行第2列单元格中输入上述文字。（11）单击菜单栏中的【文件】-【保存】命令，浏览选取保存位置，输入文件名称“在页面中插入对象网页”，单击【确定】按钮，保存。（12）单击菜单栏中的【文件】-【在浏览器中预览】-【IExplore】命令或按F12键，在浏览器中预览页面。2.6水平线的使用水平线就是在页面中插入一条直线进行页面分割或起到美观作用，它的插入方法很简单，选择菜单栏中的【插入】-【HTML】-【水平线】命令，便可以在页面中插入水平线。注意插入的水平线与所处位置的宽度相等。2.7利用层进行网页布局层（Layer）是一种HTML页面元素，可以将它定位在页面上的任意位置。层可以包含文本、图像或其它HTML文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。1．创建层方法一：将光标至于要插入层的地方，选择菜单栏中的【插入】-【布局对象】-【层】命令，在页面中插入层，在层中可以输入文字或插入图像等。方法二：选择“布局”面板中的【描绘层】按钮，在页面中按住鼠标左键拖动产生一个矩形区域后松开鼠标，插入一层。2.操作层方法一：将鼠标至于层的左上角，光标将变为十字形状，按住鼠标左键拖动可以移动层；