cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
crispti
Community Member

Photoshop HTML and Image Canvas Homepage Image

I have created a graphic in photoshop with 22 layers some with Hyperlinks created using _blank to force the students to open them in a new tab. 

I am trying to use this image as my homepage on Canvas.

I saved the document as HTML and Images to my computer. I uploaded the image slices to Canvas. I navigated to and found all of the Image Id numbers and IMG SRC codes for the image slices on Canvas.

I changed the Img Src in the HTML code to reflect the images saved in Canvas. The images and links pull up.

HOWEVER, the spacing of my original image does follow the actual image all of the slices are off. 

I am uploading my HTML file and image examples:

This is the image from Photoshop

Initial Image.PNG

Here is the image on canvas:

Spacing Issue.PNG

Here is my  HTML coding:

<html>
<head>
<title>Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Profile.psd) -->
<table id="Table_01" width="833" height="1793" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img id=6853007" src="https://tulsaps.instructure.com/courses/90532/files/6853007/preview" alt="1.gif" width="832" height="516" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" alt="spacer.gif" width="1" height="516" alt=""></td>
</tr>
<tr>
<td colspan="9">
<a href="https://tulsaps.instructure.com/courses/90532" target="_blank">
<img id="6853008" src="https://tulsaps.instructure.com/courses/90532/files/6853008/preview" alt="2.gif" width="832" height="81" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" alt="spacer.gif" width="1" height="81" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img id="6853009" src="https://tulsaps.instructure.com/courses/90532/files/6853009/preview" alt="3.gif" width="832" height="75" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="75" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href="https://tulsaps.instructure.com/courses/90532/modules" target="_blank">
<img id="6853010" src="https://tulsaps.instructure.com/courses/90532/files/6853010/preview" alt="4.jpg" width="292" height="114" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://docs.google.com/spreadsheets/d/12CXLUtFD0L77KUBe70xJw5lF94y_1Ds9KgoquyVxIec/edit#gid=1050590..." target="_blank">
<img id="6853011" src="https://tulsaps.instructure.com/courses/90532/files/6853011/preview" alt="5.png" width="258" height="114" border="0" alt=""></a></td>
<td colspan="4">
<a href="mailto:crispti@tulsaschools.org" target="_blank">
<img id="6853012" src="https://tulsaps.instructure.com/courses/90532/files/6853012/preview" alt="6.jpg" width="282" height="114" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="114" alt=""></td>
</tr>
<tr>
<td>
<a href="https://tulsaps.instructure.com/courses/90532/assignments/syllabus" target="_blank">
<img id="6853013" src="https://tulsaps.instructure.com/courses/90532/files/6853013/preview" alt="7.gif" width="184" height="179" border="0" alt=""></a></td>
<td colspan="3">
<a href="https://tulsaps.instructure.com/courses/90532/pages/welcome-letter" target="_blank">
<img id="6853014" src="https://tulsaps.instructure.com/courses/90532/files/6853014/preview" alt="8.gif" width="194" height="179" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://rogers.tulsaschools.org/school-calendar" target="_blank">
<img id="6853015" src="https://tulsaps.instructure.com/courses/90532/files/6853015/preview" alt="9.gif" width="177" height="179" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://tsaweb.org/tsa" target="_blank">
<img id="6853016" src="https://tulsaps.instructure.com/courses/90532/files/6853016/preview" alt="10.gif" width="182" height="179" border="0" alt=""></a></td>
<td>
<a href="https://www.linkedin.com/in/timothy-w-crisp-jr-m-s-75126513b/" target="_blank">
<img id="6853017" src="https://tulsaps.instructure.com/courses/90532/files/6853017/preview" alt="11.gif" width="95" height="179" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="179" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img id="6853018" src="https://tulsaps.instructure.com/courses/90532/files/6853018/preview" alt="12.gif" width="832" height="127" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview.gif" width="1" height="127" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="https://curriculum.code.org/csp-20/" target="_blank">
<img id="6852996" src="https://tulsaps.instructure.com/courses/90532/files/6852996/preview" alt="13.gif" width="274" height="273" border="0" alt=""></a></td>
<td colspan="4">
<a href="https://research.google.com/colaboratory/" target="_blank">
<img id="6852997" src="https://tulsaps.instructure.com/courses/90532/files/6852997/preview" alt="15.gif" width="281" height="273" border="0" alt=""></a></td>
<td colspan="3" rowspan="2">
<a href="http://web.stanford.edu/class/cs101/index.html" target="_blank">
<img id="6852998" src="https://tulsaps.instructure.com/courses/90532/files/6852998/preview" alt="15.jpg" width="277" height="278" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="273" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&rver=7.3.6963.0&wp=MBI_SSL&wreply=https%3a%2..." target="_blank">
<img id="6852999" src="https://tulsaps.instructure.com/courses/90532/files/6852999/preview" alt="16.gif" width="274" height="281" border="0" alt=""></a></td>
<td colspan="4" rowspan="2">
<a href="https://www.thingiverse.com/" target="_blank">
<img id="6853000" src="https://tulsaps.instructure.com/courses/90532/files/6853000/preview" alt="17.gif" width="281" height="281" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href="https://rogers.tulsaschools.org/" target="_blank">
<img id="6853001" src="https://tulsaps.instructure.com/courses/90532/files/6853001/preview" alt="18.gif" width="277" height="276" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="276" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="https://twitter.com/TulsaWillRogers" target="_blank">
<img id="6853002" src="https://tulsaps.instructure.com/courses/90532/files/6853002/preview" alt="19.gif" width="274" height="46" border="0" alt=""></a></td>
<td colspan="5">
<a href="https://www.facebook.com/TulsaWillRogersSchool" target="_blank">
<img id="6853003" src="https://tulsaps.instructure.com/courses/90532/files/6853003/preview" alt="20.gif" width="283" height="46" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://tulsaps.instructure.com/courses/38292" target="_blank">
<img id="6853004" src="https://tulsaps.instructure.com/courses/90532/files/6853004/preview" alt="21.gif" width="275" height="46" border="0" alt=""></a></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="46" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img id="6853005" src="https://tulsaps.instructure.com/courses/90532/files/6853005/preview" alt="22.gif" width="832" height="100" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="1" height="100" alt=""></td>
</tr>
<tr>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="184" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="90" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="18" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="86" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="172" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="5" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="2" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="180" height="1" alt=""></td>
<td>
<img id="6853006" src="https://tulsaps.instructure.com/courses/90532/files/6853006/preview" width="95" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Labels (1)
0 Kudos
1 Reply
bbennett2
Community Champion

If you open the browser inspector, are there any errors or CSS attributes being applied that would me messing with the layout?