简单的网页制作教程-设计一个个人网站

第一篇：简单的网页制作教程-设计一个个人网站

题目：设计一个个人网站

一、要求：

1．使用Dreamweave网页工具制作一个个人网站；

2．包含至少四个网页: 包括首页、个人简介、个人相册等（可随意设计），网页之间用超链接相连。

3．网页中要有图片和文字内容，用表格进行页面布局； 4．添加至少两种行为，并为首页添加背景音乐。

5.在网站中设计一个表单页面。

6.首页必须包含页面标题，动态按钮导航栏。

首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字，不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs，如图打开Dreamweaver软件，得到图

做网页要新建站点，关于站点配置服务器什么的，这里不讲了，只讲建立站点。

选择站点——新建站点。

我们建的文件夹就是站点根文件夹。新建站点后得到这样一个界面

点选高级，得到界面

站点名称与我们建文件夹得名字相同，zs填进去就可以了 本地根文件夹就是我们新建的那个文件夹zs，http地址为http://localhost/zs

接下来选择左侧栏里远程信息

点击无后面的那个三角，选择本地网络，远端文件夹同样选择我们新建的那个文件夹

接下来点选左面菜单里的测试服务器，点选访问后面那个三角，选择本地网络，测试服务器文件夹也为我们建好的文件夹zs，在url前缀后面加上zs

然后点击确定就可以了得到这样一个界面。

下面看老师的第一条要求，是要至少四个网页，那我们就做四个

单击新建，然后单击

接下来，选择

然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为a、b、c、d，或者1、2、3、4，当然一个网站默认的索引首页名为index，这里也用index，单击保存，这样得到第一个页面，以同样的方式建剩下的三个页面，这里我的首页默认为index.html，其他三个网页的名字分别为a.html、b.html、c.html，我们这四个网页文件已经保存在我们建的文件夹里。

站点中已经有了四个文件。

接下来，我们开始编辑index.html。

单击index.html，显示为当前页面。

单击拆分，然后我们看这个个网页就叫张三之家了，同样的方法给其他三个网页改名字。A网页标题，这个就是网页名字，我们以张三为例，这，这样老师的第六条我们就完成一半

B网页标题

C网页标题

改好名字之后，一一保存，这个不多说了，接下来操作index.html。

显示首页为当前编辑页面。

首先为index.html页面添加背景音乐。

大家在代码视图里找到，这个是什么意思就不解释了，我也不知道，就是这个了，在后面输入代码，然看见这张图片上，我光标指在哪里了吧，单击空格键，这个时候注意输入法要为美式键盘字母格式，只要不是汉字就行，得到一个菜单，单击src选中，然后单击enter建，这个时候紧跟着src会出现一个浏览，单击浏览，然后出现对话框，选择一首音乐，然后单击确定，会继续弹出一个对话框点击是，保存到自己建好的文件夹里面，注意这里不能用汉字做音乐名字，必须改成字母或者数字

我是以beyond的歌为例，名字改为by，点击保存背景音乐就添加好了。大家可以看一下，在站点目录下，已经有了这首歌曲。

接下来开始设计页面布局 这里用表格布局，这个栏叫设计栏，由于大家都不会代码，所以我们主要在这个栏里操作，下面大家点击常用里面的表格，就是下面这张图片

中的这个图标

得到对话框如图所示数据： 单击确定，得到如下界面

这个插入的表格式可以自动调整大小的，大家可以自己试一下，接下来用这些表格布局，给大家看两个图标，这个图标就像是excel中那个合并和拆分单元格是一个意思，左边那个代表合并单元格，右面那个代表拆分单元格，excel大家都会把，就和那个布局差不错，我做一个简单的布局，为了方便，我把这个表格缩小，这个布局很简单，第二行全部合并，第三行第二三列合并，大家可以根据自己的需要进行拆分合并，还可以在表格里面再次插入表格。

宽度和高度的设置时在代码里找到

height=””>，其中align表示表格位置，height表示表格高度，大家可以根据自己的需要来填数字，默认是以像素为单位的。

接下来制作导航，这是老师第六条中的第二个要求，注意我在这里给了两种方法，大家可以先看一下，再决定选择哪种

我没看懂什么叫动态按钮导航条，不知道是让这个字动呢，还是让这个字动呢？如果大家嫌麻烦，就直接输入汉字，结果就是下面这样的

如果要文字居中显示可以将这四个框同时选中，然后居中

在水平栏里面选择

以后所有的文字格式都可以在这里面选，但是首先要选中自己所要操作的文字。

创建链接，选中首页两个字，然后单击右键——创建链接，选择index.html，然后以同样的方法，给其他三个栏里的文字做链接，创建链接的文字会有下划线，同时改变颜色

如果大家不嫌麻烦，教大家用flash做一个动态的按钮导航，把光标放在第一行第一个栏里，然后

这个常用栏里的flash按钮，单击后面那个小三角，选择flash按钮。得到对话框

我们可以看到这个按钮的样式是可以自己选择的，大家随意选择一款自己喜欢的按钮，然后在按钮文本栏里，填入首页两个字，字体设置随意，然后链接

这个栏里填入index.html，注意这里的链接就是超级链接，当你点击这个按钮的时候，它就会显示主页，我们设置后面三个按钮的时候，一定要记得，当你文本栏里填入个人简介字的时候，那你的链接就要指向简介那个页面，我们这里就是a.html。其他像什么背景色之类的随意，然后单击确定。这样第一个按钮就做好了，接下来我们自己做剩下的三个按钮，注意链接问题，大家做好后，可以看到自己站点内多了四个swf格式的文件，这四个就是按钮，保存的时候，有一个文件问是否要保存，一定要点击是，不然flash不运行了。

大家可以回到自己的文件夹里，打开首页，测试一下，是不是单击这四个按钮会指向自己所设置的网页，然后我们给第二行设置背景颜色，以有弹出颜色选框，大家随意选择自己喜欢的颜色

单击背景颜色后面那个方框，可

接下来，完成老师的第五个要求，制作表单，这个把光标指向第三行第一个栏

选在表单选项中的。也就是第一个按钮，这时得到界面

我们把光标指向红线里面，输入“用户名：”然后点击表单选项中的第二个按钮弹出对话框，选择确定，得到界面

同样方法换行输入密码

再次换行，单击表单选项中的按钮项输入两个按钮，然后选中第一个按钮，得到以下属性

将值后面栏里的文字改为登录，同样方法，把第二个按钮的值改为注册。

接下来插入文字和图片，在现在的第二行第二列里操作

把光标指向第三行第二列，选择常用栏

选择这个栏里的图像按钮，弹出对话框，这时大家选择自己电脑里的一张图片，单击确定后弹出对话框，问是否保存在站点根目录下，单击确定，这时候需要注意的是，图片名字不能有汉字，图像标签和辅助属性那一栏不用管，单击确定即可。

接下来就是输入汉字了，我们在图片的后面先输入汉字，可以看到这样的显示，上面还空了很大一块地方，似乎不太好，不符合图文混排的规矩，大家单击图片选中，在属性栏里找到找到到对齐那一栏，在后面点选左对齐，得到最终图文效果是这样的。

第四行还有四个栏，大家可以在里面表明作者时间、以及自己的邮箱、QQ等内容，这里我就不写了。

实际上做到这里，我们几乎完成了老师的所有要求了就差添加两种行为了后面还有三个网页没做呢，怎么办啊，后面三个网页大家还没做，教大家一个简单的方法，大家把鼠标指向了。

这个栏的左边，在表格和边框之间，我们可以发现，鼠标斜向右首先单击鼠标左键，选中这个表格然后不要移动鼠标，同时单击右键，单击拷贝，然后这个表格就拷贝好了，打开其他三个页面，分别粘贴过去，图像属性描述不用管，取消，这样做的好处是它的好处非常多。

大家打开a.html，这个是个人简介，就是一个图文混排了，图文混排我们已经讲过了，更何况我们这个页面里已经有了图文混排了，大家可以换一张图片，换一些文字，做一些自我介绍什么的，都可以。，但是我们最好把那个表单删掉，哪个是表单就不用我说了吧，就是这个了。删掉之后，选中第三行三个栏，合并就好了，第二个页面就做好了，接下来我们看第三个页面，b.html，这个页面是个人相册

这里我同样分两种方法给大家讲，第一种方法很简单。就是插入几张图片，现在第三行剩下三个空栏，每个栏里插入一张图片，景色也好，其他也罢，然后加上图片说明，一切搞定，这个我就不写了，第二种方法还是用flash做相册，首先大家合并第三行三个栏。

并将光标指向第三行，然后单击这个图片中的插入记录——媒体——图像查看器，之后得到这样的界面

注意这个是可以调节大小的，看你想要多大的相册了。单击选中，我们会发现右面多出这样一个界面flash元素

在其中找到

然后单击后面的img1那里，会发现后面多出一支笔，单击那个笔，弹出对话框

单击减号，将img1三个删掉，然后再单击加号，会多出一个文件夹标志，单击文件夹标志，然后弹出对话框

在自己电脑里选择一张图片，将图片保存到站点根文件夹下，还是那个问题，名字中不能有汉字，添加好第一张图片之后界面如图

大家可以多添加几张图片，这样一个相册就做好了，单击确定。接下来就剩下第四页了，就是写几行文字的事情了，把表单和图文混排都删除，然后合并三个栏，然后添加一些文字，搞定了。这四个页面都做好了，我们还有一项任务没有完成，那就是给页面添加两个行为

下面我们讲添加行为，打开首页，单击图像选中，然后找到一下命令，看到行为面板下那个醒目的加号了吗 单击加号——交换图像，弹出对话框

单击浏览，在自己电脑中找出一张图片，单击确定，存放到站点根目录下，这样第一个行为就完成了，当我们鼠标滑过这张图片的时候，就会变为另一张图片。下面添加第二个行为，我们将光标指向第二行蓝色背景哪一行，然后单击行为面板下的加号——弹出信息，得到对话框

写上你好，单击确定。这样在我们单击蓝色地带的时候，就会弹出你好信息框。

第二篇：网页制作论文--个人网站设计

网页制作课程论文

（个人网站设计论文）

姓名：薛金鸽 学号：105031040025 班级：103212 专业：市场营销（电子商务方向）学期：2011-2012学年第2学期 任课教师：刘新飞

个人网站策划书

1.组织机构描述

1.1个人网站的应用背景

网络发展到今天，建立网站已经成为一个很普遍的问题了，对于个人来说，建设好时间的个性化网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作做好充分的准备，通过自己建设的网站，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。在我的这个个人网站的制作过程中，我选择了我比较熟悉的大学生活中的许多内容做为我的网站的重要组成部分，这样相对于其他包括种类齐全的网站，我就有了一定的材料基础。这是我这个网站选择大学生主题的原因之一。

其次，做为在校大学生，我知道大学生现在对什么事物，内容，活动等等感兴趣，所以，我做起来的时候相对来说是比较随手的，我不用像其他的网站那样去刻意的收集信息，资料，我只要在校园里稍微留意，我就会捕捉到大学生的兴趣点。所以，在整个网站的设计过程中，我广泛的听取同学的意见和建议，不断的改进和提高我的网站的内容和质量，这些都取得了比较好的效果。

在整个网站的设计过程中，我根据自己以往的设计经验和自己找来的资料，又经过老师的指点，经过了近一个月的努力，几经易稿，最终做成了我的这个个人主页。.2 个人网站建设的目的

在我们的工作、日常生活中，能够拥有一个自己的网站，一个已经成为不少人的希望和骄傲。一个网站项目的确立是建立在各种各样的需求上面的，这是个人网站，所以这种需求往往来自于个人的实际需求，其中每个人的实际需求占了绝大部分[6]。因此如何更好地的了解、分析、明确需求，并且能够准确、清晰以文档的形式表达出来，保证开发过程按照个人需求为目的正确项目开发方向进行。不同的网站目的要求通过不同的方式来实现。一个展示个人能力的网站与一个以花卉种植为主题的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。因此在规划我的这个网站时，我选择了和大学生的生活和学习相关联的主题。

1.3 相关应用软件选用、技术采用

在网页的设计过程中，我选用的软件包括Dreamweavercs5、Fireworks cs5和Photoshopcs5，其中，Dreamweaver 是网页编辑软件，Fireworks cs5是图形/图像处理软件，photoshopcs5是图片处理软件。它们是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。

Dreamweaver cs5采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。她成功地将网页设计功能中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由Dreamweavercs5自动完成。另外，还有一点值得说明的是，Dreamweaver cs5可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。

Fireworkscs4的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。Fireworks cs4的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，Fireworks cs4中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也很容易学习的。

在我设计我的个人网站的过程中，我选择了Dreamwearcs5和 Photoshopcs5 Fireworks cs4三种软件。因为自己向对于其它的软件来说，这三个还算是比较熟悉的。

2．网站的技术参数部分

2.1我的导航系统

我所制作的个人网站的导航系统包括：

1.个人简介2.个人专题4.我的相册5.网站说明6.给我留言 8.发送邮件9.链接百度10.女生花园

2.2功能模块的划分

1．搜索引擎：

根据浏览者的要求，使用主页上的搜索引擎链接到百度，在整个Internet上进行搜索，完成信息的优化与提取。

2．论坛：

主要功能是网友和网站之间的交流平台，也是网友给版主提出意见的主要渠道。在论坛中用户可以发表意见，这些意见可以让所有人看到，也可以只让版主看到，版主和其他人可以针对留言的内容进行回复，只留给版主的留言只有版主能够回复，并且版主可以登录后台对留言进行管理，是否发表或删除。

3．发送电子邮件：

网友可以通过“联系我”利用outlook 向版主或其他人发送电子邮件。4．精品收藏：

在其中展示我喜爱的东西，包括电影、歌曲和一些优美的文章。奇文共欣赏，疑义相与析。我只想起到抛砖引玉的作用，让大家从中认识我和了解我，让一些美好的东西我们大家共同来欣赏。但我增加了管理权限，我以管理员的身份可以对加入的新内容进行管理，即允许加入和对其进行删除。

5．留言板：

是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。

2.3 首页的设计 我的网站首页主要采用简单大方的设计方法，用的是色调一致的一组图片做的LOGO和相关的背景图片，主要页面布局如下：

2.4主要栏目的介绍

1．个人简介：

介绍版主的一些基本信息，希望各位访客能够认识版主。2.我的论坛：

此版块又分为主页、发表意见、回复意见、显示论坛内容、版主后台管理以及版主的回复界面。其中发表意见界面是所有访客都可以在论坛里面发表自己的意见，这些意见可以是发表给所有的访客，也可以是只发表给版主，如果只发表给版主，只有版主可以看到和回复；回复意见是所有访客针对自己感兴趣的话题进行回复；这些发表的意见和回复可以在显示论坛内容的界面都显示出来，供大家讨论；那些只有版主才能看到的信息在版主的管理界面，这个界面需要登录，设有用户名和密码，在这里版主可以对所有评论进行发表或删除的管理。3.个人专题：

这里收录了我平时搜集的一些文章和音乐，各位访客可以根据自己的喜好进行阅览。4.我的相册：

在这个板块可以看到我的照片，班级照片和搜集的校园照片，如果大家喜欢可以收藏。更改照片的时候只要更新数据库就可以了。5.网站说明：

里面是我对整个网站的介绍，不太清楚网站构架的访客可以先到这里。6.给我留言：

这是每位访客针对我的网站情况给我留言，这些留言会直接保存到数据库里面，并且能够轻松的读取。7.发送邮件：

各位访客可以通过outlook向版主或者其他人发送电子邮件。8.链接百度：

如果访客想在互联网上查找东西，可以直接点击这里。9.女生花园：

收集了一些女生喜欢的东西，如果你是女生，可以进来看看。

2.5二级页面的设计

我的网站主页内容简单所以主要内容再二级页面里要有详细的说明，具体说明如下：

2.5.1个人简介

本模块是个人简介部分，每个个人网站都会有作者介绍。在这个模块访客会了解到作者的一些基本信息.2.5.2文学欣赏

这个版块主要介绍我自己喜欢的相关文学作品。此版块的界面如图所示：

图3.6 文学欣赏界面

2.5.3快乐音乐

进入此版块，界面如图所示：

通过在数据库中存放音乐路径，达到在网页上播放的效果。在音乐的首页上放置了歌曲的名字，网友无需登录，即可收听自己喜欢的歌曲。

音乐界面

2.5.4我的相册版块

个人网站中又一亮点就是个人相册的设置，在我的相册里，放置了我自己的照片、班级照片和校园照片。

相册里面的这三个版块具有相同的版面设计，如下图所示：

相册界面

2.5.5网站说明版块

此版块是我根据自己的网站结构对整个网站以及每个版块所做的网站结构和功能的说明，以及网站和作者版权说明。如下图所示：

网站说明界面

如果网友不清楚网站的构架，可以查看此版块。2.5.6给我留言版块

留言板是目前最为流行的网络应用之一，使用留言板，可以为留言者提供发言的机会，让他们能够及时、准确地交换自己的观点。

2.5.7留言板主界面

完整的留言板具有发表留言和察看别人留言的功能，如图所示的留言板主界面index1.ASP，可由此进入留言界面和察看留言界面。

留言主界面

在主界面中存有全部留言的作者和主题，点击你想察看的主题就会进入察看留言界面，点击 “发表帖子”进入留言界面。

3．网站的维护方案

3.1域名的申请

域名（Domain Name），是由一串用点分隔的名字组成的,Internet上提供用户访问某网站或网页的路径，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

域名申请的含义

“域名申请”：为保证每个网站的域名或访问地址是独一无二的，需要向统一管理域名的机构或组织注册或备档的一种行为。也就是说，为了保证网络安全和有序性，网站建立后为其绑定一个全球独一无二的域名或访问地址，必须向全球统一管理域名的机构或组织去注册或者备档方可使用的一种行为。由于域名是网站必不可少的“门牌号”，域名可用于：网站地址访问、电子邮箱、品牌保护等用途，所以很多企业或个人均会进行域名申请。

3.2空间或者主机的租用

有了自己的域名这个门牌号后，就需要一个空间来存放自己的网站，也就是虚拟主机。一般虚拟主机提供商都向用户提供100MB、500MB、3GB等虚拟主机空间。我的个人网站选择100-300MB的虚拟主机空间。购买虚拟主机主要考虑几个方面：售后服务、稳定性、访问速度等。首先我选择在万网上注册一个域名然后申请租用空间建立个人网站。

3.3网站链接稳定性测试

超级链接对于网站用户而言意味着能不能流畅的使用整个网站提供的服务，因而链接将作为一个独立的项目进行测试。网站能够正确运行首先要保证链接能够连贯运行。

网站的运行中整个系统是否运行正常，我主要采用将测试网站长时间运转进行测试，派生出执行程序所有功能需求的输入条件，从而导出测试用例，进行测试，网站中的每个版块的每个页面都出现了很多的链接，所以每个版块要先进行单独测试，单独测试完成后，根据个版块之间的连接结构再进行总体测试，从而达到网站的整体的运营能够顺利地进行。在测试这个环节时，没有特定的测试方法，就要做到细心，做到网站的顺利运行。

总结：

通过这次个人网站设计的制作，我学会了很多东西，也了解了很多关于个人网站的资料。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Dreamwave、Firework、Html语言、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。

虽然整个网页的结构还有很多不足，还有一些板块没有开通，但是我的确能够感到在我们制作过程中技能的提高。整个网站的不足我想是没有使用到一些动态网页的知识，使得日后网站的维护较为繁杂。希望以后可以自学动态网站的课程，从而弥补自己在动态网络语言方面的不足。这样以后可以利用业余的时间为自己或者公司，根据自己的爱好建立一个个人网站。

[参考文献] [1] 袁晓红.《网页设计与制作》[M].高等教育出版社 2006 385页~389页 [2] 甘登岱.《我也能掌握Flash编程》[M].航空工业出版社 2000 [3] 赵更生.《Flash动画制作培训实录》[M].人民邮电出版社 2004 [4] 鲍嘉.卢坚.陈丁法《Dreamweaver CS5网页设计从入门到精髓》[M].中国电力出版社2010 [5] 张成龙.《网页制作一点通》.延边人民出版社

[6] 刘瑞新，《ASP动态网站开发、毕业设计指导及实例》[M].机械工业出版社 2000 [7] 石晓燕、苏萍《网页设计基础》[M].清华大学、交通出版社 20 04 [8] 王玉芬.《网站规划与设计》[M].西北工业出版社 2003 [9] 谢希仁.计算机网络(第5版)[M].北京：电子工业出版社,2008

第三篇：自学手机网站开发教程 手机网页设计和制作（本站推荐）

网站建设_app开发_手机网站开发【国互网】

自学手机网站开发教程 手机网页设计和制作

本手机网站开发教程主要介绍：手机网页设计和制作的七个方面的知识，让你避免走一些现在的手机网页的弯路，学完本教程后，你就能对手机网页的制作和设计有大概的了解，然后有针对性地学相应知识。

1.手机网页的标记语言

WML

因为WML大部分针对早期和低端的手机，现在已经逐步被其他的技术取代了，现在学习手机网页设计制作完全可以忽略WML。

XHTML

未来智能手机的市场份额会越来越大，考虑到这点，现在进行手机网页设计制作时，我们会用到更加熟悉的标记语言Xhtml。

现在大部分智能手机的浏览器都能正确处理Xhtml，它会识别两种类型的Html。

① Xhtml：基础的，和桌面浏览器相同的Xhtml

② Xhtml-MP：针对智能手机的Xhtml

这两种类型的不同之处，Xhtml-MP包含比较少的要素和相对宽松的限制，能适合手机平台的渲染，现在很多手机网页设计制作直接用Xhtml，也没什么大问题。

2.手机类型

网站建设_app开发_手机网站开发【国互网】 网站建设_app开发_手机网站开发【国互网】

手机市场上既有非常高端的iPhone手机和谷歌的Android手机，也有诺基亚一些单色点阵显示的低端机。这些低端机在浏览手机网页时有很多的限制，如屏幕分辨率、渲染Xhtml的性能等，因此如果你的手机网页是针对这部分用户，最好还是用WML。

另一方面，类似于iPhone和Nexus One这种高端智能机，拥有可以和桌面浏览器相媲美的渲染网页的性能。对这部分用户而言，良好的用户体验是很重要的，受限于手机的传输速度，如果直接用一般的电脑上浏览的网页来代替手机网页，对手机网页的目标客户来说，并非明智之举。

可以把手机根据屏幕尺寸分成几种常见的类型，如：

x 160 pixels

176 x 220 pixels

240 x 320 pixels

320 x 480 pixels

3.手机网页的目标群体

任何网站设计网页时都应该明白自己的目标群体，以便向他们传输最合适的信息。这点在进行手机网页设计制作时更为重要。因为你不仅要知道你的目标群体，还要知道他们浏览手机网页时的情景。浏览传统的网站，访客会坐在桌上，有着大分辨率的屏幕。手机网页的访客则有可能是在排队、等交车、坐在地铁等。

手机网页的目标群体，谷歌的开发者将看手机网页人群分为三大类，这对我们进行手机网页的设计和制作，很有参考意义。

网站建设_app开发_手机网站开发【国互网】 网站建设_app开发_手机网站开发【国互网】

4.根据具体需要提供网站内容

一个很常见的误区是很多网页开发者认为只需要简单的设置，就可以将一个传统的网页变成可以适应手机浏览的网页，他们认为只需要在CSS样式表将media=”screen”变成media=”handheld”就能使网页神奇般地适用于手机。

这是错误的想法。

虽然针对手机用户变更网页的CSS可以过滤一部分的内容，或者一些CMS网页也提供了相应的转换插件。但这些方案并不完善。

W3c定义了“一个网站”的概念，意思是手机网页不一定要提供和传统网站完全一样的内容和设计，而是要根据手机的性能、带宽等方面的不同提供一些差异化服务。

根据这个定义，一些传统网页的内容和功能不能在手机上实现是很合理的。不同手机能处理的内容和功能也都是不一样的。所以也可以根据这些手机进行相应的网页制作。

5.选择域名

为手机网页选择什么域名取决于你的目标群体是如何进入网站的。这里有三种域名可供选择：

A：为手机网页使用独立域名

B:为手机网页使用子域名

网站建设_app开发_手机网站开发【国互网】 网站建设_app开发_手机网站开发【国互网】

C：为手机网页注册mobi的顶级域名

D：判断客户端，并自动显示对应内容

6.为手机网页验证标记语言

电脑的网页浏览器对错误比较宽容，一些html标记的忘记书写或者没有正确嵌套在电脑浏览器都会正确显示，当然容错率高意味着消耗更高的cpu和内存。

手机浏览器的性能还无法和电脑相提并论，所以手机浏览器对手机网页的错误要严格一些。所以在设计和制作手机网页时，你必须不断进行检查、验证和纠错。验证手机网页和验证一般传统的网页没什么区别，如果你使用Xhtml编写，可以使用相同的工具。W3C验证器可以验证一些简单的错误，当然这里有一个更适合验证手机网页的版本。

7.为手机网页不断测试

当通过了手机网页的验证之后，就要针对几种不同的手机进行各种测试了。用电脑的浏览器虽然可以进行模拟测试，但是并不完善。这种方式通过的手机网页不能适用于某些手机。

有些手机文件尺寸的限制可能会很小，所以你制作的手机网页在这些设备上甚至无法显示。另外浏览器支持的文件类型也会不同，支持的图像格式也会不同。测试时候手机网页当然不可能拥有所有手机，所以制作网页时可以使用一些替代手段。

网站建设_app开发_手机网站开发【国互网】

第四篇：个人网站网页制作论文

个人网站网页

制 作 论 文

学院： 专业： 姓名： 学号：

摘要

本文就个人网站的规划与建设，以软件工程的方法对全过程进行了分析与研究。本文的主要工作集中在：

1.对Web页进行概述，主要是对Internet的历史和发展作了回顾，并对Web页的定义和特性进行阐述。并对网站开发过程中使用的开发工具和技术作了简要的介绍。

2.对网站建设中提及到的术语进行了解释，并对个人网站的由来和发展进行了讨论。

3.对自己的个人网站从规划到建设进行了详细的分析。

4.使用ASP＋IIS＋Access技术实现了我的网站的各种功能，其中和数据库的连接使用到了ODBC技术。

5.就网站建设提出了自己的观点与建议。

【关键词】 网站 ASP SQL Server 风格 创意

一、引言

在已跨入21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大。目前，我国上网的人口已近一个亿，成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用文本、图象、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，无可置疑，网站已成为最吸引人的也最有效的信息传递手段和方式。随着网络技术的发展，各类网站纷纷出现。个人网站也成为了一种时尚。越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格。

（一）Web页概述

1、认识Web

Web(World Wide Web，简称，其意思就是采用http超文本传输协议访问新浪网的首页，由于网页均是通过http超文本传输协议进行访问，默认下，“http://”可以省略不输。

5、IP地址

为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP（Internet Protocol）地址，这如同公用电话网中电话的号码一样。IP地址是由专门的互联网机构来分配。IP地址具有惟一性，是由32位二进制数组成，分为四组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。

（二）个人网站的由来和发展

互联网在中国的出现只有短短七年时间，1994年中国科学院高能物理研究所设立了国内第一个Web服务器，推出一个叫做“中国之窗”的网页，这可能是国内Internet上出现的第一个Web网页，1995年开始，中国教育科研网，中国科技网，中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成，使互联网在中国开始真正进入社会生活之中。

这时期，个人网站出现的条件还很不成熟，国内上网的人数很少，也缺乏支持个人建站的环境，用户很难找到理想的个人主页存放地。

个人网站发展的第二阶段是从1997年初到1998年，这段时间，中国网民数量飞速增长，个人网站日渐繁荣，个人主页的数量急剧增加。同时，越来越多的商业网站开始免费提供个人主页空间，这些良好的外部极大地促进了个人网站的发展，涌现了一批很著名的个人网页，从1998年下半年开始，随着互联网应用的深入的普及，随着众多主页制作工具的出现，使得建站成为一件非常容易的事，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。

（三）我的个人网站的设计与规划

1、明确架设网站的目的及客户要求

通常情况下，架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流，具有较强的目的性，我的个人网站一般体现在：为了展示自己的风采，让大家和我一起分享我的心得与经验，让和我有共同爱好的朋友有一个倾诉的地方。

2、我的个人网站概貌

因为是个人网站，所以只是选择了自己擅长和喜爱的内容，在突出自己的风格和特点的同时，还应用了现在流行的网站设计技术和数据库技术。因此将网站设计分为前台页面展示平台和后台在线管理平台。

3、功能划分

网站设计有新闻更新，浏览者可以在首页浏览自己喜欢的新闻，并且可以在留言板和大家交流，在后台管理页面中，通过身份认证，管理员——我，可以对网站信息进行管理。站内的其它页面均是我自己的精心收藏，与大家一起分享。

4、功能描述(1)新闻

嵌入百度新闻每日更新代码，使用在本站首页显示今日国内国际新闻和体育新闻，供浏览者浏览。

(2)留言板

是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。

(3)后台管理页面 是我管理和添加到新内容的地方，为了方便实现信息的经常更新，我设计了这个管理页面，经过身份认证后我可以进入网站对其中的信息进行管理。

(4)日记

在其中展示我喜爱的东西，包括我的日记、精品文章、社会文化和一些杂七杂八的文章。奇文共欣赏，疑义相与析。我只想起到抛砖引玉的作用，让大家从中认识我和了解我，让一些美好的东西我们大家共同来欣赏。

(5)相册

在其中展示漂亮的图片，包括我的照片、我的同学、风景照片、妹眉帅哥栏目。让大家一起来欣赏人物、风景风采。

(6)音乐

在其中展示个人喜欢的歌曲，朋友们可以在里面点播自己喜欢的歌。(7)页面组织和数据库设计

在明确了我的个人网站的风格和定位后，就是网站的材料组织以及网站的页面设计和数据库设计。

建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。如果网站结构不清晰，目录庞杂，内容东一块西一块。结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。网站的题材确定后，并且收集和组织了许多相关的资料内容，但如何组织内容才能吸引网友们来浏览网站呢？栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。因此我将自己的个人网站分为五个栏目，分别是关于我、相册、日记、音乐、留言。

三、详细设计

1、界面设计（1）相册

是一个个人相片和精彩图片展示的地方，在相册中，我们可以了解到站长的个人风采和自己喜欢的图片。a、功能

利用ASP对象语句显示图片，让大家可以看见所有图片的缩略图，同时每个图片都有快照功能，可以浏览图片的全图。

b、组成构造

相册结果显示页面 photo.asp：用来显示所有图片，同时还具备图片的分类功能和图片单个浏览功能。

站长基本信息显示页面 include.asp： 数据库连接页面 conn.asp(2)日记

是一个记录个人日记和精品收藏文章的地方，供给大家一起分享。a、功能

利用ASP对象语句分类显示日记或文章记录，让大家浏览到最新的日记或文章

b、组成结构

日记或文章显示页面 diary.asp：显示所有日记或文章，同时还具备显示不同子类日记或文章

站长基本信息显示页面 include.asp 数据库连接页面 conn.asp c、日记页面浏览效果图，如图12。(3)、音乐

是一个音乐收藏和音乐欣赏的地方。a、功能

利用ASP对象语句来显示歌曲曲目、演唱人和在线播放功能。b、组成结构

歌曲显示播放页面 media.asp：完成曲目的显示和播放功能的页面。站长基本信息显示页面 include.asp 数据库连接页面 conn.asp(4)、留言本

是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。

a、功能

利用SQL语法过滤特定的用户留言意见，让站长可以针对某位特定用户所发表的意见作出独立的回答，同时，用户在发表个人意见时，若认为意见内容涉及敏感的话题或是意见内容涉及私人隐私，都可用“悄悄话”的方式发言，这些“悄悄话”将不会被显示出来让大家看到，当然，站长拥有管理的能力，只要以密码登录管理模式，就可以进行各个用户的单独意见回复，而且还能看到用户所留下的“悄悄话

b、组成构造

意见留言结果网页gbook.asp：用来显示用户发言与站长回复内容，同时还具备查看留言和发表留言两个功能。

站长基本信息显示页面 include.asp 数据库连接页面 conn.asp

(三)、关键代码设计

1、分页功能模块代码

<% if not rs.eof then rs.MoveFirst '注意放到前面来,否则到任何页总是在第一个记录上

end if rs.pagesize=MaxPerPage '设置每页最多显示多少条记录

If trim(Request(“Page”))<>“" then '如果请求的页次不为空

CurrentPage= CLng(request(”Page“))'clng是转换成长整型数据类型,并赋值到当前页次上

If CurrentPage> rs.PageCount then '如果当前页次大于总页数,则将最大页次赋值到当前页次上

CurrentPage = rs.PageCount

End If Else

CurrentPage= 1 '一切条件不成立,将当前页设为第一页 End If totalPut=rs.recordcount '将总记录赋值于TOTALPUT

if CurrentPage<>1 then '如果当前页数不等于第一页

if(currentPage-1)*MaxPerPage

rs.move(currentPage-1)*MaxPerPage '相对当前记录数向后移动

dim bookmark '定义书签变量

bookmark=rs.bookmark '将当前记录的标签赋于变量BOOKMARK上

end if

end if

dim n,k

if(totalPut mod MaxPerPage)=0 then '总记录数与每页最大记录数求余的结果为零时,则N返回整数页次,否则再加一.n= totalPut MaxPerPage

else

n= totalPut MaxPerPage + 1

end if %>

2、图片显示功能模块代码

<% cid=request(”id“)if cid=”“ then sql=”select * from HN_pro order by id desc“ else sql=”select * from HN_pro where cstr(class)='“&cid&”' order by id desc“ end if

else

rsnews.AbsolutePage=ToPage

intCurPage=ToPage

end if

else

rsnews.AbsolutePage=1

intCurPage=1

end if intCurPage=CInt(intCurPage)k=1 do while Not rsnews.eof and k<6 %>

<%for n=1 to 6%>

<% rsnews.MoveNext if rsnews.eof then exit for if rsnews.eof then exit do next %>

“ rel=”lightbox[plants]“> “ width=”49“ height=”49“ border=”0“>

3、发表留言提交内容判断模块代码 <% if request(”action“)=”“ then response.redirect”gbook.asp?action=show“ if request(”action“)=”post“ then dim bookname dim bookwhere dim bookpic bookname=request(”name“)bookwhere=request(”where“)bookpic=request(”pic“)bookface=request(”face“)bookip=request.ServerVariables(”REMOTE_ADDR“)if bookname=”“ then Response.Write ”“

Response.End %>

（四）、网站管理系统

1、完成站长对网站信息管理及更新的系统，包括以下几部分：（1）管理登陆页面Index.asp（2）相册管理页面Admin_pro.asp（3）日记管理页面Admin_new.asp（4）音乐管理页面Admin_down.asp（5）留言管理页面GuestBook.asp

2、管理登陆

管理系统的登陆页面，主要用于管理登陆和判断用户是否已注册。（1）其中判断是否是非法登陆的代码为： <% admin_pass=md5(admin_pass)set rs=server.createobject(”adodb.recordset“)sql=”select * from admin where admin_name='“&admin_name&”' and admin_pass='“&admin_pass&”'“

rs.open sql,conn,1,3

if rs.eof then response.write”“

else

session(”admin_name“)=request(”admin_name“)

session(”loc“)=1

response.redirect ”admin.asp“ end if rs.close %>（2）其中验证码验证代码：

<% dim verifycode,verifycode2 if verifycode<>verifycode2 then response.write”“ founderr=true else session(”verifycode“)=”“ %>

3、主要功能程序段（1）打开数据库 <% set conn = Server.CreateObject(”ADODB.Connection“)conn.open ”YourDSNName“,”username“,”password“ %>（2）数据库查询操作 大类查讯

setrs=server.CreateObject(adodb.recordset)小类查询 dimrs2 setrs2=server.CreateObject(adodb.recordset)rs2.openselectnclass,nclassidfromnclasswhereanclassid=&rs(anclassid)&orderbynclassidorder,conn,1,1 dowhilenotrs2.eof response.writeAhref=class.aspaid=&rs(anclassid)&&nid=&rs2(nclassid)&&trim(rs2(nclass))&A rs2.movenext loop（3）添加记录操作

setrs=server.CreateObject(adodb.recordset)可写方式

rs.openselectbookid,username,zhuangtai,zongerfromactions,conn,1,3 rs.addnew 添加一条新记录 rs(bookid)=bookid 添加相应的记录 rs(username)=username „„„„ rs(zhuangtai)=6 rs(zonger)=0 rs.update 更新数据库（4）删除记录操作

从表actions中删除actionid匹配的记录 conn.executedeletefromactionswhereactionid= &request.QueryString(actionid)

四、编码、测试与维护

（一）测试与维护

1、IIS(Internet 信息服务)安装配置

可以在”添加或删除程序 >>添加/删除Windows组件“对话框中把”Internet 信息服务(IIS)“前的勾选中，点”下一步“进行安装就行了(注：在这之前应把系统安装盘放到光驱)。IIS 装好之后再作一下简单的配置。定位到”开始>>管理工具>>Internet 信息服务(IIS)管理器“，打开IIS管理器。在”本地计算机>>网站>>默认网站“上右键单击，在快捷菜单里选”属性“(或者直接在操作菜单下选”属性“)，弹出如下对话框图16: 图16 切换到”主目录“标签(图2)，重新选择网站根目录(我选择的是E盘下的my web目录)，默认是”系统盘:Inetpubwwwroot“,因为系统盘不宜放太多的非系统文件，所以在这里重设默认网站要目录，如果嫌麻烦可以跳过这步。再切换到”文档“标签，通过”添加“、”删除“、”上移“、”下移 “，把站点的默认文档设置如图17：

图17 可能有些朋友会疑惑，设置默认内容文档有什么作用？细心的朋友应该会发现，在浏览一些大网站的首页时用它的一级域名就行了，并不需要指定请求页的文件名，这就是设置了默认内容文档的缘故，它的作用就是在浏览器请求没有指定文档的名称时，将默认文档提供给浏览器。要得到更详尽的解释说明，可以点击图3中的“帮助”。之所以有这步，是因为网站的默认内容页中没有index.asp，不大符合国人习惯。

2、Dream weaver测试站点和用IIS测试本地站点

Dream weaver MX提供了全面检测站点的功能，它比检测链接更全面。全面地检测内部、外部链接、去除错标签、空标签、多余的标签等，它的使用相当简单，使用全面检测站点功能如下：

（1）、选择菜单中【站点】的【报告】命令，打开一个窗口。

（2）、选择检测范围，在【报告】选项中有四个内容供选择：Current Document、Entire Local Site、Select Files in site、Folder。

（3）、对工作流方面的信息进行检测。

（4）、对HTML文件的信息做出检查。

把编好的网站文件复制到D:/my web文件夹中，可以打开浏览器，在地址栏中输入http://localhost/my web/index.asp ,就会看见网站了。

3、维护

网站建成后并不意味着网站建设的结束，网站内容需要不断更新，这样才会不断的吸引更多的浏览者访问，才能成为一个优秀的网站。通过FTP软件将更新过的网页上传到服务器或通过Dream weaver MX来远程管理站点，同时还要认真回复浏览者的电子邮件和留言，做到有问比答。平时多收集资料，多听听别人建议，定期更新版面，还有推广站点。

（二）设计技巧和解决方法

用服务器端包含技术实现对文件的引用

系统中有许多页面都会引用相同的代码文件，所以使用include语句将已完成代码的文件包含进来，就可以简化代码的缩写。如首页面indes.asp中第二行和第三行代码。

结束语

经过老师耐心细致的指导，及同学之间的相互交流，同时翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)经过近一段时间的努力，个人网站的设计制作告一段落。总结这次“文武屋-个人网站”开发制作过程，我们综合使用了目前因特网上比较流行的各种静态制作方法及交互式动态网站的制作设计手段，并对初步利用后台程序完成了网站的动态响应与生成网页的技术。同时也从中学习了对静态页面的处理风格，色彩搭配，页面导航方面有了一定经验。对用Javascript语言制作动态效果也有了更进一步的认识。在交互式网页设计学会了如何使用Access建立数据库，以及对数据库浏览，修改，添加，查询。如何用ASP编写程序来方便用户在网上查看网站各方面的信息和交流。本次设计由于设计时间较紧，且相关模块比较多，加之设计经验的不足，在网站的整体设计及各模块功能可能设计的不完全，有待于进一步的完善和改进。

参考文献

[1]吴涛主编，网站全程设计技术（修订本），北京：清华大学出版社；北京交通大学出版社，2006.7 [2]龙马工作室编，ASP+SQL Server组建动态网站实例精讲，北京：人民邮电出版社，2004.8 [3] 赵增敏编，ASP动态网页设计，电子工业出版社，2003.8 [4] 任学文、范严编, 网页设计与制作，中国科学技术出版社，2006.8 [5] 武创、王惠,网页设计探索之旅 ,电子工业出版社，2006.9 [6] 杜巧玲等编, 网页设计超级梦幻组合,清华大学出版社, 2003.3 [7] 吴黎兵、罗云芳编，网页设计教程，武汉大学出版社，2006.2 [8] 庄王健编，网页设计三剑客白金教程，电子工业出版社，2006.01

第五篇：网页设计与制作与网站发布 学习心得（范文）

《网页设计与制作与网站发布》

学习心得

今天上了第一堂选修课，课程内容很简单，讲了一些关于网页的基本内容，Internet是一个覆盖几乎全球的计算机网络，www.xiexiebang.com 在上面开通属于自己的微博，就可以发表观点了，有什么开心或是不开心的事都可以在上面的写下来，开心的与他有一起分享，不开心的就可以与他人一起分担，就不会那么伤心了。

最后这两次课，讲了网页制作的一些基本问题，回顾一下之前所学内容，首先网页上文字要合理安排，标题等少量文字可以采用特殊的字体，其它字体尽量选比较普通的字体，适合就好，不要做的比较特别，文字太大占的页面大，太小又不好，所以适中就好，这样就看起来比较大气，那些好的网站就是这样的。再讲了那个图形，网页中通常采用的是JPEG和GIF两种图片格式，通常一般不加背景图片，因为这样要占用大量的储存空间，所以当在打开这个网页时会有点慢，所以考虑网页的大小，尽量不要加背景图片，这样也不会显得花哨。从整体上体看就好一点了。

最后的一次课，老师留给我们提问，交流学习经验，多去体验网页的制作过程，有什么想法尽可以说出与大家共同分享。