网站的设计与实现 (2)

课题名称： 网站的设计与实现 题目网站的设计与实现主要内容：HTML就是英文Hyper Text Markup Language的缩写，翻译成中文就是“超文本标识语言”。下面结合自己在教育教学和实践中的一些经验，设计出用手写HTML代码制作网页，目的就是使有兴趣学习HTML语言的朋友，能尽快掌握和应用HTML语言设计网页。应达到的要求或技术指标：使学者很快的掌握和应用手写HTML代码制作网页主要研究方法或技术路线：通过学习（HTML）语言，搜集一些素材，如图片、音乐、一些插件等。完成本课题应具备的条件：学习（HTML）语言认识各种代码的使用；经常研究页面代码各阶段任务安排：具体安排如下：主要参考资料：1 HTML 语言教程 2畅通无阻的网页设计 北京:清华大学出版社 3 前沿电脑图像工作室 巧学巧用Dreamweaver、Fireworks、Flash制作网页 北京:人民邮电出版社。4 程序设计语言5 高手云集收集整理,版权属于原作者(网页设计师) 200 5 年 4 月 28 日【摘 要】据研究发现，页面下载速度是网站留住访问者的关键因素，如果2030秒还不能打开一个网页，一般人就会没有耐心。做网页可以用Dreamweaver 、Frontpage软件，但这些软件在制作过程中，会产生很多没有用的废代码，增大文件占用空间，影响网页的下载速度，如果用手写HTML代码制作网页，网页简洁，文件下载传输速度快。HTML就是英文Hyper Text Markup Language的缩写，翻译成中文就是“超文本标识语言”。下面结合自己在教育教学和实践中的一些经验，设计出用手写HTML代码制作网页，目的就是使有兴趣学习HTML语言的朋友，能尽快掌握和应用HTML语言设计网页。关键词：图象；表单；表格；表格进阶【Abstract】Title:The websites design with realizeBy discovering ,Its a key factor that the speed of for the website to keep the visitant, if 20-30 seconds they still cant open a web page, ordinary people according to the research the meeting is they will be impatient. Do the web page can use the software such as the Dreamweaver, Frontpage, but these software are manufacture the process inside, and can producing a lot of useless discard the code, and enlarge the document to take up the space, and affect the speed of downloading of the web page, if by hand write the HTML code to manufacture the web page by the hand web page is semple , the speed of download the document to deliver will be quickly. The HTML is the abbreviation of “English Hyper Text Markup Language” translat into Chinese that is a chao wen ben biao shu yu yan.Then I combinate oneself is at my education and teaching experienceses, I designd to by hand write the HTML code to manufacture the web page,by hand My purpose is to make hope who the friend have the interest of studying language HTML, can control with HTML web page design as soon as possible.Keywords：Image；Form；Table；Advanced目 录1诸论11.1 设计思想11.2 开发工具的选用和介绍12 网页设计分析与设计 12.1什么是HTML12.2制作一个简单网页 22.3制作一个完整的网页 32.4将网页组合起来52.4.1网页之间的链接52.4.2列表方式制作索引文件52.4.3表格方式制作索引文件62.4.4在表格中使用透明图像72.4.5分帧处理网页82.4.6给网页加上声音92.5表单的应用93 系统的使用说明与安装10参考文献10附录：源文件代码11致谢： 11诸论在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。多学习和使用HTML 可以很成功地设计网站，但你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案，用HTML制作网页。因为用HTML设计网站，可以控制设计的整个过程。但是，如果你仅仅是网站设计的新手，你应该能用手写HTML代码，寻找一个允许修改HTML的软件包。HTML是一个很好的Web设计工具。在设计过程中，基于HTML制作网页能帮助你学习HTML。它还允许你切换到所见即所得的模式，以便你在网站发送到Web之前，预览你的网站。1.1 设计思想据研究发现，页面下载速度是网站留住访问者的关键因素，如果2030秒还不能打开一个网页，一般人就会没有耐心。做网页可以不用Dreamweaver，Frontpage等网页制作软件，其实网页制作软件，起的作用就是把你做的页面，自动转成手写的这种HTML代码的形式。直接手写代码就可以编写网页。这就要用到HTML语言了，HTML就是英文Hyper Text Markup Language的缩写，翻译成中文就是“超文本标识语言”。那么我们为什么还要手写代码？因为网页制作软件会产生很多没有用的废代码，增大文件占用空间，影响网页的下载速度，手写HTML代码简洁，文件下载传输速度快。 通过下面的学习，我们可以很快学会制作网页，达到无师自通。2网页设计分析与设计 2.1什么是HTML根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解：HTML就是英文Hyper Text Markup Language的缩写，翻译成中文就是“超文本标识语言”。 HTML 文件结构(Document Structures). , , , , HTML 文件的正文写在这里. . 2.2制作一个简单的网页现在我们就来学习如何写HTML语言代码。编写HTML语言使用的工具很简单，用WINDOWS自带的记事本就可以实现。首先从“开始”菜单中，启动“记事本”应用程序。接着在记事本中输入如下代码：职业技术学校 这就是一个HTML文件最基本的结构其中都是HTML语言的结构标识，它们通常都是“双向标识” charset=gb2312代表这个网页采用的编码是简体中文，简体中文版的WINDOWS系统都很好地支持这种编码，保证你的网页在被浏览的过程中不出现乱码。现在把这个文件保存下来，从“文件”菜单中，选择“保存”，首先，在D：目录下创建一个新的文件夹并命名为“jiaoling”进入这个文件夹再新建一个文件夹取名为“student”（在使用文件夹名和文件名最好都用英文，而且最好是小写字母，这样在网络传输中，不容易出错）在“文件名”文本框中输入“student.htm”，注意一定要输入扩展名“.htm ”，否则，记事本会将这个文件保存成扩展名为“TXT”的纯文本文件。单击“保存”，这个网页文件就保存完了。现在我们看看刚才做的网页，像打开普通文件一样，双击“student.htm”文件。这时我们可以看到IE浏览器的标题栏上显示的就是，刚才我们写在与之间的“职业技术学校”。这是这个网页上什么都没有的。那么，我们如何放入主体内容呢？不急，现在我们切换到记事本窗口，继续编写刚才的文件，在的尖括号中加入一句代码“bgcolor=yellow”。如下职业技术学校 将这个文件保存一下，再切换到IE窗口，按一下浏览器的刷新按钮。就可以看到效果了，此时页面的背景换成了黄色，如果你输入“bgcolor=red”那页面的背景就变成了红色的了，这一点不难懂吧？也可以设置成用十六进制的数字描述的颜色格式，比如“819EF0”，它代表浅蓝色。这里的数字实际描述的是颜色的“RGB”值，某种颜色的RGB值，可以借助图形图像处理软件的调色板得到，比如Photoshop用这些方法就设置背景的颜色了。如果设置背景是图形的网页，首先，我们必须在建立一个“img”子目录，以用来存储图片，图片格式必须是使用“gif”“jpg”后缀，以后每次使用的时候都调用这个文件就可以了。(如下图2.1，可以统括)图2.1现在将中的bgcolor=yellow改成”background=./img/ tuo.gif ，“./img/ tuo.gif”是背景图片的路径。2.3制作一个完整的网页页面背景设置好了，我们现在可以在网页中加入文字了。现在我们在 和中间加入一些有关职校的说明文字：职业技术学校职业技术学校是我县唯一的独立职业学校，学校开办于2000年，其前身是设在镇平中学的职业高级中学，2019年2月，学校正式从镇平中学独立，成为我县一所直属学校。学校现有在校学生640人（含在联办学校学习），教职工51人。学校办学以来，不断探索山区职业教育的办学思路，学校坚持“两条腿走路”的办学思路，开设“升学型”和“就业型”专业，学校现有商务外语（高考班）、计算机和应用、电子商务、电子技术应用、服装设计与营销、粤菜烹饪、旅游服务与管理7个专业。学校为了让更多的学子有更好的发展，为学生提供更多的就业机会，就业型专业分别于东莞市东城职业高级中学、东莞市厚街专业技术学校、中山市沙溪理工学校、广州市旅游商贸职业学校四所国家级重点职业高级中学联合办学。 并且要在每段的前面加上全角的空格。每段的后面要加上为行中断标识。（可以加上和作为空行用。）在“职业技术学校简介”前后分别加上和这个标识是使其中的内容居中对齐。再在题目的前后加上字体标识font size=6 color=31743F和， 是字体标识，它对标识中的文本起控制作用。如果一个网页要足以吸引人的话，我们要插入几张图片。图片应放在同一文件夹下，也就是在student文件夹下。先准备几张图片。tuo1.gif tuo2.gif tuo3.gif我们在文章的开头输入代码“”在这里src= tuo1.gif表示插入的是本目录下的图片（来源）“alt”后面的文字作为图片的说明。“width”和“height”是图片的宽度和高度信息，单位是像素。尖括号里面再加入“align=right”可以使图片居右。刚才插入的图片是缩略图，要使图片更大，更为清晰，我们可以作如下的链接。这样的方式一方面可以加快打开网页的速度，另一方面使得页面图片和方字比例协调，只要阅读页面的人希望看到大图片时点击就可以了。那么将如何加入链接呢？我们在“img src=”前面输入代码“”就可以实现了。在后面输入“ ，a href=后面的地址表示链接目标的路径”。（一个链接是从标识“”开始，到标识结束的，被链接的文字或是图形的信息写在这两个标识之间。）在“”代码里新加入了“border=0”，可以去除边框。加入了“target=-blank” 单击图片时就不会在原来的窗口中打开大图，而是重新弹出一个窗口，在新窗口中打开大图。如何改变它的背景颜色，如何加上背景图片，以和在页面中加入文字、图片，并给图片加上链接。我们都可以实现它，接下来我们可以把各个专业都分别做成网页。在做好的网页中我们也可以通过右键单击，选择“查看源代码”对HTML代码进行修改。比如我们可以在主网页标题中加入代码“”可以加上横线条，如果在里面加入“”就会有线条的粗细、颜色、长度、以和线的位置。这样我们的第一页面就做完了，不会很难吧。24将网页组合起来241网页之间的链接以上几节中我们已经有了系列的关于学校各专业的页面，现在要做的就是把它们彼此联系起来，这就是要通过“链接”。以前我们用过“”这种方式进行超级链接。这是用的还是“”这个标识。现在我们就把各专业网页链接到学校主页下去吧。“”“学生”，在这里我们要注意的是网络上用的都是“斜杠”，如果你使用反斜杠，在硬盘上是正确的，放到网上就不行了。（在这里的“学生”是想要加链接的地方）添加后，这两个字就会显出蓝色字样来，表示这里已经作了链接。在代码中加入“target=_blank”,就可以在另外一个页面打开了。只要哪个地方要作链接的话，我们就可以插入代码“”就可以实现链接了。只要我们已经制作了一批网页，彼此都链接起来，就可以了。242列表方式制作索引文件对于一个网站上的网页来说，仅仅有彼此的链接是不够的，还需要一个“索引”文件，将它们都连接起来，使它们成为一个有机的整体。“索引”好像是一本书的目录一样，我们在D盘根目录下建立一个名叫“all”的目录，将原来做好的“jiaoling”目录移到这个目录下。那么移动之后，里面的各个文件的链接会不会乱？不会的，因为，我们在制作那些网页的过程中使用的都是相对链接，只要里面的文件的目录，名字没有变化，这样的移动是不影响网页之间的链接关系的。在all 目录下我们再建一个img 是存放图片的目录，一个是school用于制作有关各专业的网页介绍的网页，在后面的制作索引的过程中会用到它们。下面我们来就说说如何制作索引，我们先打开一个记事本，新建一个文件，输入如下HTML代码：专业介绍 商务英语(高考班)计算机和应用电子商务电子技术应用粤菜烹饪服装设计与营销旅游服务与管理 将这个文件保存在D盘根目录下的all的文件夹内，命名为index.htm 这个标识是用来对网页中的项目进行自动编号的，括在这两个标识内的内容，每出现一个 ，就会出现个编号，而且在这个编号前面会自动换行。 标识会使网页多一些带有空心的圆点的列表。 在各专业后面，将列表中所有的内容都加上相应的链接。刚才我们学习了利用列表的方式制作网页，这种方式在列表内容比较简单的时候非常适用，但是如果用它制作整个网页，就不是十分合适了。下面我们来讲述如何应用表格来制作网页。243表格方式制作索引文件在资源管理器里，将all 下的index.htm 改名为index1.htm，这样，这个用列表制作的目录文件夹就被保存下来，以后需要的时候还可以拿出来再使用。然后再用记事本编写一个空白网页，保存在这个目录下，文件名为index.htm (为什么我们总是用index.htm 这个文件名呢？因为在网络上有这样一条规定：对于一个网址，或者是网站上的一个目录，用浏览器打开的时候，浏览器直接指向该目录下的index.htm文件。如果没有这些文件，网站就会显示出错)下面我们就用表格方式来制作目录页，输入如下代码：专业介绍 职校情况保存一下，用IE打开，我们发现IE浏览这只有一行的表格，这是一张非常简单的表格。在之间的代码就是表格的内容。下面的和两个标识，其中是表行标识，也称行标识，一个表格中有几对，就表示这个表格有几行；而是表格列标识，它们也是成对出现的，表格中的内容就写在之间。一对表行标识中包含有几对表格标识，这行中就有几列。上面我们制作的就有六个单元格。其中只有一个单元格有内容，我们只看见一个单元格，其它的没有显示出来。如果在和之间加入全角的空格，这时我们就可以看到其它个刚才没有显现出来的空白表格了。接着我们给可以给这个表格再曾加几行，并添加一些内容保存，并刷新IE，这时我们就可以看一个比较完整的表格了。如果出现文字较多时，我们可以在相对应的单元格里面加上这样一句代码“colspan=2”“colspan”属性是进行列合并处理，“colspan=2”就是让一个单元格占有两列的宽度，实际上我们就可以达到word 中的合并单元格的功能。如果要进行行的合并，我们就可以用“rowspan”。单元格不但可以有宽度属性，还可以加上背景色，现在我们就给它加上背景色。给每个中加上一句代码“bgcolor=e8eeff”再把标识中的“border=1”改成“border=0”,保存刷新，试试效果。你也用手写代码的方式，去做一个表格吧！可以给单元格加上背景颜色，设置边框宽度等，这里就不多说了。244在表格中使用透明图像所谓的透明图像，指的是一个宽和高都为一个像素的透明图形，这个图形可以用photoshop很容易地做出来，一般把它命名为“bland.gif”。在D:allimg下面存放一个这样的图形，当用浏览器阅览的时候，是看不见这个图形的，但是我们可以用透明图像来占位置、撑开行高，或者是做出一些特殊效果。加入下面代码： 这时所对应的单元格高度变成了40个像素。这就是透明图像撑开行高的典型例子。保存，刷新，看一下效果吧！245分帧处理网页分帧处理网页，就是说整个页面被分成了两个部分，每次点击左面的链接时，右面的内容就会相应产生变化。这就要用到HTML语言中的“帧”的概念，也就是通常称为“frame”的格式。专业介绍left.htm 和right.htm两个文件是我们事先做好的两个文件，保存，在浏览器中看一下效果。本来一个网页中必须要标识，现在用这个标识代替，就表示这是一个分帧处理的页面。“rows”后面的值说明窗口的横向划分情况，“cols”后面的值则说明纵向划分情况。 “cols=150,*”这里的意思是整个窗口划分成两列，第一列的宽度是150像素，第二列的宽度则为第一列划分出去之后的剩余部分。中的“frameborder=1 ”表示帧窗口之间有边界，“framespacing=5”表示这个边界宽度为5个像素。标识与标识要配合使用，用来指定帧的内容。中的“src”属性指定的是放入该帧的文件的路径，“name”属性是一个帧窗口的名称。接下来，就自己去体验一下分帧页面的做法吧。246给网页加上声音我们已经有了一些有图片也有文字的网页，但是要达到“声情并茂”的目的，还需要最后一步的努力，就是给网页加上一个声音。下面就来给页页加入声音。首先“all”目录下新建一个名叫“sound”的文件夹，放入一个名叫“backsound.mid”的声音文件。然后在index.htm中的与之间加入这样一段代码：,存盘并在浏览器中打开index.htm文件。在这段代码中，是嵌入文件的意思“src”是声音文件的路径，“ autostart=true”是自动播放，“ loop=true ”是循环播放，而“width=100与 height=100”是限制了调出的媒体播放器的大小。如果你要把这个媒体播放器隐藏的话，我们就可以加上“hidden”。25表单的应用表单的应用就是指HTML语言提供一种让浏览者与服务器之间进行交流的方式。也就是说可以上网上填一些信息，然后提交的网页。它一般需要跟JavaScript语言或者CGI等后台程序相结合，完成交流。这里我们仅讲述表单页面的基本知识，从记事本中，打开一个新文件，写上以下代码：表单提交 HTML语言使用标识来编写表单，其中的“name”属性，是这个表单的名字；后面的“ action”属性的值是要使用的后台程序的文件的路径。在 中加入如下的代码：访客姓名： 这个标识中，可以插入各种交互控件，可以是文本框，按钮，复选框等，其中的“name”属性是必须要有的，avaScript语言和CGI程序就是依据“name”来判断读者输入的信息的。在 访客姓名:电子邮件：留言内容：“Value”属性的值是出现在按钮上的文字。如果“type=reset”，那点按这个按钮后，输入的信息将被清除掉，让读者重新输入。关于表单，我们就讲这些了，有关表单更深入的知识，你可以参考其它的一些资料。关于手写HTML代码制作网页的基本知识，到这里，我们也都全部学完了。只要你有足够的耐心，一步一步跟着学，多多练习，并且经常研究页面代码，一定会学得很好的。3系统的使用说明31运行环境要求Windows9x/2000/xpMicrosoft internet explorer记事本32 搜集一些图片， “图片”文件必须是“GIF”、“JPG”格式文件，并且在命名为“img”为文件夹名下保存。搜集一些音乐必须是“mid”、“wav”、“MP3”格式文件。4参考文献1 l/html_design.html HTML 语言教程 2畅通无阻的网页设计 北京:清华大学出版社 3 前沿电脑图像工作室 巧学巧用Dreamweaver、Fireworks、Flash制作网页 北京:人民邮电出版社。4 程序设计语言5 高手云集收集整理,版权属于原作者(网页设计师) 附录：源文件代码1、文字移动属性的设置 方向 #=left, right职业技术学校 职业技术学校2、背景音乐 #=WAV 文件的 URL #=循环数3、插入视频剪辑 用 url.avi 这一 AVI(Video for MSWINDOWS) 文件来播放视频；用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。4、表格的色彩表元的背景色彩和背景图象 #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua Food Drink SweetAB第 11 页