个人网站制作主要内容介绍

一、构成网页的基本要素
二、制作及美化的基本工具
三、网页制作的基本步骤
四、界面设计及交互研究探讨
五、实例制作演示

一.构成网页的基本要素

1.文字（标题、字号、字型...）
2 图形（网页上经常使用的图片格式：jpg、jpeg、Gif、Swf...）
3.交互功能（菜单按钮、链接、表单、数据交换...）
...
超文本标识语言（HTML）
HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。
在HTML中，所有的标记符都用尖括号括起来。
例如，<HTML>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。
如：<HTML>…<／HTML> .
HTML文档的基本结构
一个典型的HTML文本的基本结构形式如下：
<HTML>
<HEAD>
<TITLE>网站制作流程及界面交互设计研究探讨<／TITLE>
<／HEAD>
<BODY>文本内容：<／BODY>
<／HTML>

二.制作及美化的基本工具

1．超文本标识语言（HTML）
编辑工具：editplus、dreamweaver、记事本、FrontPage、
2．页面设计及美化工具
使用工具：所有可制作平面的软件
推荐使用Photoshop、FireWorks、Flash

三、网页制作的基本步骤

1、整体规划
需要完成的规划：网站主题、风格、页面元素、逻辑结构等
2、资料收集
收集内容：
a、跟主题相关的文字图片资料
b、一些优秀的页面风格
c、下载一些你喜欢的交互页面
d、开放的源代码
3、伪界面设计
根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素
4、代码转换及交互添加
把平面的伪界面转化为HTML代码，添加相应的交互功能Js、按纽、表单，以及一些与数据库相连接的代码。
5、测试网页兼容性
你可以不必严格按照W3C标准来制作页面，但是你必须保证让所有现有的浏览器能比较好的展示你的作品。
6、发布站点
测试完毕，符合你的要求，当然就可以开始发布你的网站了，发布的服务器可以是远程，也可以是本地，各个语言有各自的相应的服务器，比如ASP，就应该对应的是ASP服务器，上传可利用远程FTP工具。

四.界面设计及交互研究探讨

a、导航栏设计
导航要素设计的好坏决定着用户是否能方便使用网站导航要素要设计的直接而明确，并最大限度为用户的方便考虑。
b、网页布局
网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是你研究的重点。
PS:布局之前要紧密连接你网站的主题，要注意把握整体风格，你可以事先在纸上勾画草图，利用你习惯的元素来表现你想要的效果
网页布局--主要构成原则
醒目性：指用户把注意力集中到你诱导起浏览的部分和内容
可读性：指网站的内容让人容易读懂
明快性：指准确、快速转达网站的构成内容
造型性：维持整体外型上的稳定感和均衡性
创造性：有鲜明个性，创意是必不可少的
布局的构成原则上是:统一、协调、流动、强调、均衡
c、交互研究
我这边的交互主要集中在人机操作方面，研究用户浏览网站心理我个人认为一个成功的个人主页，单纯的美观是不够的，重要的是宜人性方面应该注重，喜欢Google、Douban就居于这。

五、实例制作演示(略）

1、页面制作整体规划
对象：一个打印商业宣传主页
格调:活泼，色彩，简单，大方
2、资料收集
a 、商标、网址、公司宣传册、了解企业文化，了解负责人的品位、他们的案例、跟负责人沟通掌握信息
b 、网上下载相似印刷行业的公司主页，了解现有行业的的一些设计特点
c、下载一些色彩比较华丽的图片，或跟印刷相关连的图片
d、如果你自己不会动态语言，下载一个满足你功能的新闻发布系统和留言源码
3、伪界面设计
a、在PS设计伪界面
b、切片工具对整体进行合理的分割
注意点：隐藏你要通过输入的文字，分割时要保持他的整体意义，尽量让每一部分是完整的，注意一些交互上操作。
c、导成WEB格式-直接导成HTML格式—步骤:
1、.点击文件存储为WEB文件格式
2、在界面里面调整理想参数
3、导出保存PS能自动生成一些HTML代码，但是他不是很标准，你必须在Dreamweave里面进行加工
d、在Dreamweave里面进行代码加工
具体步骤：
1、先修改标题
2、修改页面属性：背景颜色、背景图片.....
3、把页面调整为布局格式（这个可以按照自己习惯来设置，有标准的表格方式，也有布局类型）
4、把要添加文字的图片转化为背景形式
a、找到对应图片路径
b、拷贝路径后删除图片
c、转化为标准形式
d、把路径粘贴到背景属性上
e、回到布局界面
5、添加具体文字连接设置等操作
6、CSS设置
7、修整代码，发布预览按F12即可预览效果
4、测试网页兼容性
按照你设计时的对象,根据IE版本以及浏览器的不同，调整理想的效果，但是大部分出现问题的是JS//VB等代码，如果只是单纯静态图片，基本不会有很大的差别，推选大家尽量往W3C标准靠
5、发布站点
购买自己的空间域名，其实事先就应该购买的，利用FTP上传软件，把你的页面上传到你的网上服务器上推荐一款FTP上传工具LeadFTP

转正百度

个人网站制作主要内容介绍相关推荐

【CMS建站】写给大家看的网站制作教程02—网站制作的工具介绍与下载安装
作者 | 杨小爱来源 | web前端开发(ID:web_qdkf) hello,大家好,我是杨小爱,欢迎来到web前端开发公号平台. 在上一篇<[CMS建站]写给大家看的网站制作教程01-了解 ...
学生家乡网页设计作品静态HTML网页模板源码广西旅游景点网页设计大学生家乡主题网站制作简单家乡介绍网页设计成品
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
苏州园林景区网页设计学生家乡网页设计作品静态HTML网页模板源码 DW大学生家乡主题网站制作简单家乡介绍网页设计成品
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
【CMS建站】写给大家看的网站制作教程03—零基础学网站制作的简单入门指南...
作者 | 杨小爱来源 | web前端开发(ID:web_qdkf) 在上一篇<[CMS建站]写给大家看的网站制作教程02-网站制作的工具介绍与下载安装>文章中,我详细的讲解了关于制作一个 ...
【CMS建站】写给大家看的网站制作教程01—了解网站制作流程
作者 | 杨小爱来源 | web前端开发(ID:webqdkf) hello,大家好,我是杨小爱,欢迎来到web前端开发公号平台. 这些年里,被读者和周围朋友以及一些认识的人,问的最多的一个问题,就 ...
写给大家看的网站制作教程01-了解网站制作流程
作者 | 杨小二来源 | web前端开发(ID:webqdkf) 前言这些年里,被读者和周围朋友以及一些认识的人,问的最多的问题,就是,怎么做一个自己的网站?这个难不难学呀? 其实,我知道,很多人 ...
网站制作过程合理的步骤是怎么样的呢？
公司在制作网站时通常有一个合理的步骤和流程.虽然任何公司的网站制作都没有固定的形式,但遵循这些指导流程步骤至少可以提高公司网站制作的效率,减少网站制作过程中的错误呈现.因此,公司应坚持网站制作流程. ...
pageadmin CMS网站制作教程：栏目单页内容如何修改
pageadmin CMS网站制作教程: 栏目单页内容如何修改一般情况下,如公司介绍,联系方式等介绍内页面都属于单页,单页内容可以直接在栏目设置界面进行修改,如下 1.对栏目单页内容进行设置,登录后 ...
大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载明星个人主页介绍(10页) HTML+CSS+JavaScript
HTML5期末大作业:个人网站设计--明星个人主页介绍(10页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页设计 ...

个人网站制作主要内容介绍

个人网站制作主要内容介绍相关推荐

最新文章

热门文章