网站建设与网页设计

《网站建设与网页设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网站建设与网页设计第1章网站建设1.1网站与网页基础知识1．网页实际上是一个运行在计算机中的文件，网页经过网址（URL）来识别与存取。2．全球网全球网(WordWideWeb即万维网，缩写WWW，也称Web)，是建立在因特网上的全球性的、分布式、交互式、动态多平台的图形网络信息服务系统。它以客户机/服务器的方式进行工作的。其软件主要是由服务器端软件和客户端软件两部分组成。存取WWW的软件叫浏览器。Web结构是由Web浏览器、服务器、Web网页、统一资源定位器组成。3．超文本超文本是与其他数据有关联的数据。在全球网的语言里，

2、超文本的文件是由一些数据组成，而这些数据又与其他数据关联，用于读取超文本文件的工具称为浏览器。4．超链接超链接是带下划线或边框，内嵌Web地址的文字或图形，单击超链接可以跳转到特定的Web节点上的某一页。5．统一资源定位器URL（UniformResourceLocator）,”资源”是指在网络上所能获得的文字、图象、声音和动画等资料的总称，也就是各种类型的文件。要获取这些文件必须通过两种不同的协议，一是链接网页的HTTP（超文本传输协议），用http://开始；二是链接服务器的FTP（文件传输协议），用ftp://开始。

3、浏览器运用统一资源定位器技术，确定被访问的网页。如：http://www.163.com6．浏览器浏览器是专用于浏览网页、检索和查找网上信息的工具。7．服务器服务器是运行服务器程序的计算机8．Web网页Web网页是由HTML(超文本标识语言)编写的。9．主页网页主索引页，是网站引导访问重点内容的向导页，一般访问网站的第一页。10．网页一般布局如图：1.2网站建设规划1．确定网站规划目的科研推广网站2．可行性分析成本、费用、收益。3．网站规划网站首页科技产业成果展示成果推广蔬果类咨询作物类留言专家介绍畜牧类信函在线解答1.3

4、网站设计原则1．符合人的阅读习惯文字大小、字体、颜色2．网站导航要清晰文字、图片、按钮3．网页风格要统一文字、图片、背景颜色，“很专业”4．动静要搭配合理5．突出新内容1.4定位网站形象1．设计网站标志一般用网站名字的英文制作2．设计网站色彩主色调、深浅搭配、背景不要使用刺眼的颜色3．保持网站的颜色统一第2章Dreamweaver应用2.1熟悉Dreamweaver的工作环境Dreamweaver MX 2004是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。2.1.1Dream

5、weaver的工作界面1.标题栏：包含Dreamweaver的版本名称、网页标题、网页保存的位置及名称。2.菜单栏：提供所有菜单命令，各面板上的操作按钮均有相应的菜单命令与之对应。3.文档窗口：文档窗口是编排网页的区域，显示当前所编辑的文档内容，其显示与在浏览器中的结果近似。用户可以在文档窗口中输入文本、插入图像、音频及视频等文件内容。4.常用面板：Dreamweaver提供了大量的面板，用户可以通过面板来设计制作页面，面板因其直观、简便的操作方式，深受使用者的好评。5．HTML代码窗口：显示网页后台代码。2.1.2新建、

6、打开和保存网页1．新建网页选择菜单栏中的【文件】-【新建】命令，系统将弹出“新建文档”对话框，单击【创建】按钮，便可以创建该页面。2．打开网页在文档窗口中打开已有的网页，选择菜单栏中的【文件】-【打开】命令，系统弹出“打开”对话框，浏览选择需要打开的文档，单击【打开】按钮，打开选择的该网页。3．保存网页新建的文档必须保存，选择菜单栏中的【文件】-【保存】命令，系统自动打开“另存为”对话框，选择保存路径，输入文件名，单击【保存】按钮，则该页被保存。网站的首页默认名字一般为index.htm。如果不是新建文档，则系统自动执行文

7、件保存操作。2.2网页元素2.2.1文本文本是网页的核心内容，Dreamweaver允许通过以下三种方式在网页中添加文本。（1）直接将文本输入到页面它的操作方法十分简单，只需要将光标定位到编辑窗口中要输入文字的地方，然后直接输入文字即可。（2）从其他文档复制和粘贴文本在其它编辑器中编辑文本，选择菜单栏中的【编辑】-【复制】命令，将光标定位到编辑窗口中要输入文字的地方，选择菜单栏中的【编辑】-【粘贴】命令，即可将文字复制到页面。（3）从其它应用程序中拖放文本将光标定位到编辑窗口中要输入文字的地方，选择菜单栏中的【文件】-【导

8、入】-【Word文档】/【Excel文档】命令，系统将弹出“打开”对话框，浏览选取要添加的文件，选择【打开】按钮，Word文档或Excel文档的内容就会出现在页面中。在页面中插入文字后，选中该文字，在属性面板修饰文字。例2-1制作一个网页，测试页面属性对页面效果的影响，效果如图所示。具体的制作方法如下：