精通网站建设（最专业网站建设）

网站建设有哪些要点和难点

难点：

一、设计难在自适应网站建设过程中，需要考虑的内容更为广泛，而且还有考虑其他方面的一些问题。比如可读性、区域面积及不同设备下运行的状态等。这对于设计师的要求甚高，这样导致要做一个完美自适应网站变得很难。【点击查看做个网站到底多少钱】

二、实现难响应式网站主要是一HTML5、CSS3为基础，需要精通这两种技术的高手。如果设计师对这两种技术不够精通，会导致就算设计师做出很棒的模版，但是实现以后，会怎么看怎么不舒服。

三、成本大因为自适应设计需要对多个界面兼容、功能调试，导致整个制作过程需要UI设计师和前端工程师要不断磨合制作。

要点：注意网页的设计要符合用户的审美习惯，同时提高网站的跳转速度和网站的安全性。

想要了解更多有关网站建设的相关信息，推荐咨询猪八戒网。猪八戒网持续推动技术升级和商业模式创新，公司荣获“国家双创示范基地”“中国互联网百强企业”“国家创业孵化示范基地”“中国文化企业30强提名奖”“国家小型微型企业创新创业示范基地”“国家电子商务示范企业”等资质奖项百余项；实力强大，值得选择。

谁比较精通网站建设，我学了一学期的网站建设，但是根本没学着啥东西，现在老师要交一份个人网站的作业，

实验25 网页的制作

实验目的

熟练掌握网页页面的基本设计手段

实验要求

1. 熟练掌握页面属性设置

2. 熟练掌握使用表格布局手段布局网页、表格及单元格的属性设置

3. 熟练掌握图片、flash文件的插入和设置

4. 熟练掌握超链接的设置

5. 掌握滚动字幕等Web组件的使用及水平线的使用

6. 掌握列表项的样式设置

实验内容及基本步骤

1. 设计出网页样式

使用图像设计软件或手绘出网页的样式，本实验完成后首页如图25-1所示。

图25 - 1 页面完成图

2. 设置页面属性

1) 双击“文件夹列表”视图中的文件“index.htm”，打开首页。

2) 选择菜单【格式】→【属性】，弹出网页属性对话框，选择“高级”标签，将“上边距”、“左边距”、“下边距”、“右边距”设置为0像素。如图25-2所示。

图25 - 2 网页属性设置

3) 选择菜单【格式】→【主题】，在窗口右边的“主题”栏目中选择“丝绸”主题。

3. 表格和单元格的属性设置

1) 选择菜单【表格(A)】→【插入表格】，弹出插入表格对话框，插入1行2列的表格，具体属性见表格25-1，如图25-3所示。设置好后，页面上有一个表格虚框。这是页面头部表格。

表格 25-1 页面头部表格属性表

属性名称参数属性名称参数

行数 1 列数 2

对齐方式居中指定宽度 960像素

单元格衬距 0 单元格间距 0

边框粗细 0 背景自动

图25 – 3 表格属性对话框

2) 将光标放在页面头部表格的第一个单元格内，选择菜单【表格(A)】→【表格属性】→【单元格(E)】，设置单元格宽度为208像素。

3) 同样地，将光标放在第二个单元格内，设置单元格宽度752像素，高度85像素，并使用背景图片images/banner.jpg，如图25-4所示。

图25 - 4 单元格属性对话框

4. 插入图片并设置超链接

1) 将光标停在页面头部表格的第一个单元格内，选择菜单【插入】→【图片】→【来自文件…】，选择“images”文件夹下的“logo.jpg”，表格的第一个单元格内就插入了一张图片。

2) 在页面上选定要设置超链接的图片Logo，选择菜单【插入】→【超链接】，设置链接地址为：index.htm，点击【屏幕提示】按钮，设置超链接的屏幕提示为“红酒品鉴”，点击【目标框架】按钮，设置目标框架为“新建窗口”。如图25-5所示。

图25 – 5 超链接属性设置

3) 保存文件，选择菜单【文件】→【在浏览器中预览】，或直接按【F12】在浏览器中预览，并更改链接的目标框架，观察目标框架不同时打开窗口方式的区别。

5. 插入flash元素

1) 将光标放在页面头部表格的第二个单元格内，选择菜单【插入】→【图片】→【Flash影片】。将文件2.swf插入。

2) 右击插入的Flash，选择快捷菜单【Flash影片属性(F)…】，设置其背景色透明，指定其大小为宽度752像素，高度85像素（注意：如果要同时更改宽度和高度，必须去掉保持纵横比复选框前面的勾）。如图25-6所示。

图25 – 6 flash影片属性对话框

3) 保存文件并点击按钮预览。再点击按钮，回到编辑状态。观察一下预览视图与在浏览器中预览的区别。

6. 页面导航栏设计

1) 依步骤2，在页面头部表格的下方，插入一个1行6列表格，表格属性见表格25-2，这是导航表格。

表格 25-2 导航表格属性

属性名称参数属性名称参数

行数 1 列数 6

对齐方式居中指定宽度 960像素

单元格衬距 0 单元格间距 0

边框粗细 0 背景自动

2) 从左侧“文件夹列表”窗口中选择index.htm，按住左键不放，将其拖到网页中导航表格的第一单元格中，导航表格中显示的导航名称是实验24中导航视图中修改的名称。依次拖动其它五个文件到导航表格中相应的单元格内。如图25-7所示。

图25 – 7 导航栏设计

7. 页面滚动字幕设计

1) 将光标放在导航表格下方，选择菜单【插入】→【Web组件…】，打开插入Web组件对话框，组件类型选择“动态效果”，选择一种效果“字幕”，如图25-8步骤1、2所示。

图25 – 8 滚动字幕的设置

2) 字幕属性对话框中，设置文本为“弘扬红酒文化，传播红酒新闻”，可以设置流动的方向，滚动的速度等，点击样式按钮还可以设置滚动文本的文字属性。如图25-8步骤3所示。

3) 保存后按【F12】观察效果。

8. 主要内容部分设计

1) 在滚动字幕下方，插入一个2行3列的表格，这是主要内容表格，具体属性见表格25-3。

表格 25-3 主要内容表格属性

属性名称参数属性名称参数

行数 2 列数 3

对齐方式居中指定宽度 940像素

单元格衬距 5 单元格间距 0

边框粗细 0 背景自动

2) 右击主要内容表格的第一行第一列单元格（以下用[行号，列号]方式表示），设置[1，1]单元格宽度460像素，高度28像素，背景色为#FF9E00，并输入文字：“天天品酒会”。如图25-9所示。

图25 – 9 单元格及背景色设置

3) 单元格[1，2]设置宽度为5像素，其它用默认值。

4) 单元格[1，3]设置属性同单元格[1，1]。并输入文字：“红酒文摘”。

9. 项目列表的使用

1) 设置主要见容表格的单元格[2，1] 背景色为白色，然后在其中插入一个1行2列的表格，只将边框设置为0，其余用默认，这是列表1表格。

2) 在列表1表格的单元格[1，1]中插入图片images/redwine.jpg

3) 列表1表格单元格[1,2]中，先点击工具栏上的项目符号图标，文字从文件夹“images”下的“文本.txt”中复制“天天品酒会”部分（注意要一行行地复制，粘贴好一行就按回车）。然后在文字中任意位置右击，选择【列表属性】，选择【样式按钮】，在“修改样式对话框中”，选择【格式】按钮，修改文字颜色为“黑色”，段落的行距大小设置为“1.5倍行距”。也可以直接将所有列表文字选中后，选择菜单【格式】→【字体】设置文本颜色为“黑色”，选择菜单【格式】→【段落】，设置行距大小为“1.5倍行距”。

4) 在“列表属性对话框中”选择“图片项目符号”标签，选择【浏览】按钮，可以将默认的项目符号图片改为指定的图片。

5) 按上述步骤完成设置主要内容表格单元格[2，3]的设置，插入“红酒文摘”部分的列表。

10. 水平线的使用

1) 主要内容表格下方插入一条水平线。选择菜单【插入】→【水平线】，设置水平线高度为1像素，居中，颜色为白色，选择“实线（无阴影）”。如图25-10所示。

图25 – 10 水平线属性对话框

11. 保存文件并用浏览器预览。